diff --git a/package-lock.json b/package-lock.json
index 5c4a2aed..88b3bef8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "date-fns": "^4.1.0",
         "expo": "~54.0.33",
         "expo-camera": "~17.0.10",
-        "expo-clipboard": "^8.0.7",
+        "expo-clipboard": "~8.0.8",
         "expo-crypto": "~15.0.9",
         "expo-document-picker": "~14.0.8",
         "expo-file-system": "~19.0.21",
@@ -5238,9 +5238,9 @@
       }
     },
     "node_modules/expo-clipboard": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/expo-clipboard/-/expo-clipboard-8.0.7.tgz",
-      "integrity": "sha512-zvlfFV+wB2QQrQnHWlo0EKHAkdi2tycLtE+EXFUWTPZYkgu1XcH+aiKfd4ul7Z0SDF+1IuwoiW9AA9eO35aj3Q==",
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/expo-clipboard/-/expo-clipboard-8.0.8.tgz",
+      "integrity": "sha512-VKoBkHIpZZDJTB0jRO4/PZskHdMNOEz3P/41tmM6fDuODMpqhvyWK053X0ebspkxiawJX9lX33JXHBCvVsTTOA==",
       "license": "MIT",
       "peerDependencies": {
         "expo": "*",
diff --git a/package.json b/package.json
index f26e4e2b..87b87d73 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "date-fns": "^4.1.0",
     "expo": "~54.0.33",
     "expo-camera": "~17.0.10",
-    "expo-clipboard": "^8.0.7",
+    "expo-clipboard": "~8.0.8",
     "expo-crypto": "~15.0.9",
     "expo-document-picker": "~14.0.8",
     "expo-file-system": "~19.0.21",
diff --git a/src/api/email.ts b/src/api/email.ts
index 11e7470a..5681fd73 100644
--- a/src/api/email.ts
+++ b/src/api/email.ts
@@ -6,6 +6,7 @@ import type { Email, EmailAddress, JMAPMethodCall, Mailbox, Thread } from './typ
 import { toWildcardQuery } from '../lib/search-utils';
 import { sanitizeDisplayName } from '../lib/rfc5322-mailbox';
 import { generateMessageId, stripMessageIdBrackets } from '../lib/email-threading';
+import { buildMdnMessage, type MdnOptions } from '../lib/mdn';
 
 export const EMAIL_LIST_PROPERTIES = [
   'id', 'threadId', 'mailboxIds', 'keywords', 'size',
@@ -989,6 +990,12 @@ export interface OutgoingEmail {
   // Pre-assigned Message-ID (e.g. when re-sending a draft); generated when absent.
   messageId?: string;
   requestReadReceipt?: boolean;
+  /**
+   * SMTP MAIL FROM when it must differ from the header From - a catch-all
+   * alias on an owned domain is sent through the identity's envelope while
+   * the visible From keeps the alias (webmail #246).
+   */
+  envelopeMailFrom?: string;
 }
 
 export interface SendEmailResult {
@@ -1128,19 +1135,19 @@ export async function sendEmail(
   const submissionCreate: Record<string, unknown> = { emailId: '#draft', identityId };
   // For a deferred send the envelope must be set explicitly so the HOLDFOR
   // mail-from parameter rides along (JMAP §7.3: an omitted envelope makes the
-  // server derive mailFrom from the Identity, dropping our parameter).
-  if (holdForSeconds && holdForSeconds > 0) {
+  // server derive mailFrom from the Identity, dropping our parameter). An
+  // explicit envelope sender (catch-all From override) needs it as well.
+  const holdFor = holdForSeconds && holdForSeconds > 0 ? Math.ceil(holdForSeconds) : 0;
+  if (holdFor > 0 || email.envelopeMailFrom) {
     const rcptTo = [...email.to, ...(email.cc ?? []), ...(email.bcc ?? [])]
       .map((r) => r.email.trim())
       .filter(Boolean)
       .map((address) => ({ email: address }));
-    submissionCreate.envelope = {
-      mailFrom: {
-        email: email.from[0]?.email,
-        parameters: { HOLDFOR: String(Math.ceil(holdForSeconds)) },
-      },
-      rcptTo,
+    const mailFrom: Record<string, unknown> = {
+      email: email.envelopeMailFrom || email.from[0]?.email,
     };
+    if (holdFor > 0) mailFrom.parameters = { HOLDFOR: String(holdFor) };
+    submissionCreate.envelope = { mailFrom, rcptTo };
   }
 
   const submissionArgs: Record<string, unknown> = {
@@ -1402,3 +1409,72 @@ export async function rescheduleScheduledSend(
   const created = body.created?.replacement as { id?: string; sendAt?: string } | undefined;
   return { emailSubmissionId: created?.id, sendAt: created?.sendAt };
 }
+
+/**
+ * Move a message back into Drafts (out of Sent) and re-flag it `$draft` so
+ * it can be edited and re-sent - used after cancelling a scheduled send for
+ * editing (webmail `restoreEmailToDraft`).
+ */
+export async function restoreEmailToDraft(
+  emailId: string,
+  draftsMailboxId: string,
+  sentMailboxId?: string,
+  accountIdOverride?: string,
+): Promise<void> {
+  const accountId = accountIdOverride ?? jmapClient.accountId;
+  const patch: Record<string, unknown> = {
+    [mailboxPointer(draftsMailboxId)]: true,
+    [keywordPointer('$draft')]: true,
+    [keywordPointer('$seen')]: true,
+  };
+  if (sentMailboxId && sentMailboxId !== draftsMailboxId) patch[mailboxPointer(sentMailboxId)] = null;
+  await emailSetBatched(accountId, { update: { [emailId]: patch } }, 'draft');
+}
+
+export interface SendReadReceiptOptions extends MdnOptions {
+  /** Identity the receipt is submitted through (its address is the MDN From). */
+  identityId: string;
+  /** Where the sent receipt is filed. */
+  sentMailboxId: string;
+  /** Submitting account (shared/group account); defaults to the primary. */
+  accountId?: string;
+}
+
+/**
+ * Send an RFC 8098 read receipt (MDN). JMAP has no MDN primitive, so the
+ * multipart/report is built client-side (`lib/mdn.ts`), uploaded as a blob,
+ * imported into Sent and submitted with an explicit envelope - mirrors the
+ * webmail's `client.sendReadReceipt`. The caller flags the original
+ * `$mdnsent` afterwards.
+ */
+export async function sendReadReceipt(opts: SendReadReceiptOptions): Promise<string> {
+  const accountId = opts.accountId ?? jmapClient.accountId;
+  const raw = buildMdnMessage(opts);
+  const bytes = new TextEncoder().encode(raw);
+  // Lazy: blob.ts pulls in expo-file-system, which this module otherwise
+  // never needs (and which the node test environment cannot load).
+  const { uploadBytes } = await import('./blob');
+  const upload = await uploadBytes(bytes, 'message/rfc822', accountId);
+  const emailId = await importEmailBlob(upload.blobId, opts.sentMailboxId, { $seen: true }, accountId);
+  const res = await jmapClient.request(
+    [
+      ['EmailSubmission/set', {
+        accountId,
+        create: {
+          mdn: {
+            emailId,
+            identityId: opts.identityId,
+            envelope: {
+              mailFrom: { email: opts.fromEmail },
+              rcptTo: [{ email: opts.to }],
+            },
+          },
+        },
+      }, '0'],
+    ],
+    SUBMISSION_USING,
+  );
+  const body = requireMethodResult(res, '0', 'EmailSubmission/set');
+  assertSetResult(body, ['mdn'], 'read receipt');
+  return emailId;
+}
diff --git a/src/components/RichTextEditor.tsx b/src/components/RichTextEditor.tsx
index 11141bb8..e8b0a8f0 100644
--- a/src/components/RichTextEditor.tsx
+++ b/src/components/RichTextEditor.tsx
@@ -21,7 +21,9 @@ export type RichTextCommand =
   | 'justifyRight'
   | 'removeFormat'
   | 'undo'
-  | 'redo';
+  | 'redo'
+  // Text colour: a CSS colour after the colon, e.g. 'foreColor:#d97706'.
+  | `foreColor:${string}`;
 
 export interface RichTextSelectionState {
   bold: boolean;
@@ -50,6 +52,8 @@ export interface RichTextEditorHandle {
   insertLink(url: string, label?: string): void;
   unsetLink(): void;
   insertImage(src: string, cid?: string, alt?: string): void;
+  /** Insert an HTML fragment at the caret (template bodies, tables). */
+  insertHtml(html: string): void;
   setHtml(html: string): void;
   /**
    * Read the live editor DOM content. Resolves with the current innerHTML or
@@ -97,7 +101,17 @@ const RichTextEditor = React.forwardRef<RichTextEditorHandle, Props>(function Ri
     [],
   );
 
+  // Scripts injected before the page has run its inline script are lost, and
+  // the composer talks to the editor as soon as async data arrives (signature
+  // after the identities load, hydrated inline images). Queue until the page
+  // posts its first message, then replay in order.
+  const readyRef = React.useRef(false);
+  const queuedRef = React.useRef<string[]>([]);
   const call = React.useCallback((script: string) => {
+    if (!readyRef.current) {
+      queuedRef.current.push(script);
+      return;
+    }
     webViewRef.current?.injectJavaScript(`${script}; true;`);
   }, []);
 
@@ -124,7 +138,9 @@ const RichTextEditor = React.forwardRef<RichTextEditorHandle, Props>(function Ri
 
   React.useImperativeHandle(ref, () => ({
     exec: (command) => {
-      const [name, value] = command.split(':');
+      const sep = command.indexOf(':');
+      const name = sep === -1 ? command : command.slice(0, sep);
+      const value = sep === -1 ? undefined : command.slice(sep + 1);
       if (value) call(`window.__rne && window.__rne.exec(${JSON.stringify(name)}, ${JSON.stringify(value)})`);
       else call(`window.__rne && window.__rne.exec(${JSON.stringify(name)})`);
     },
@@ -137,6 +153,9 @@ const RichTextEditor = React.forwardRef<RichTextEditorHandle, Props>(function Ri
     insertImage: (src, cid, alt) => {
       call(`window.__rne && window.__rne.insertImage(${JSON.stringify(src)}, ${JSON.stringify(cid ?? '')}, ${JSON.stringify(alt ?? '')})`);
     },
+    insertHtml: (html) => {
+      call(`window.__rne && window.__rne.insertHtml(${JSON.stringify(html)})`);
+    },
     setHtml: (next) => {
       call(`window.__rne && window.__rne.setHtml(${JSON.stringify(next)})`);
     },
@@ -162,6 +181,12 @@ const RichTextEditor = React.forwardRef<RichTextEditorHandle, Props>(function Ri
     } catch {
       return;
     }
+    if (!readyRef.current) {
+      readyRef.current = true;
+      const queued = queuedRef.current;
+      queuedRef.current = [];
+      for (const script of queued) webViewRef.current?.injectJavaScript(`${script}; true;`);
+    }
     switch (data.type) {
       case 'change':
         onChangeRef.current?.(typeof data.payload === 'string' ? data.payload : '');
diff --git a/src/components/TemplateSheet.tsx b/src/components/TemplateSheet.tsx
new file mode 100644
index 00000000..3737552b
--- /dev/null
+++ b/src/components/TemplateSheet.tsx
@@ -0,0 +1,199 @@
+import React from 'react';
+import {
+  View, Text, StyleSheet, ScrollView, Pressable, Modal, Animated, Easing, TextInput,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { X, Star, FileText } from 'lucide-react-native';
+import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
+import { useColors } from '../theme/colors';
+import { useSheetDrag } from '../lib/use-sheet-drag';
+import { useLocaleStore } from '../stores/locale-store';
+import { useTemplatesStore, type EmailTemplate } from '../stores/templates-store';
+import { filterTemplates } from '../lib/template-utils';
+
+interface TemplateSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  onPick: (template: EmailTemplate) => void;
+}
+
+/**
+ * Bottom sheet listing the user's templates for insertion into the composer
+ * (webmail template picker): favourites first, then the rest, with a search
+ * box over name/subject/category.
+ */
+export function TemplateSheet({ visible, onClose, onPick }: TemplateSheetProps) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const insets = useSafeAreaInsets();
+  const t = useLocaleStore((s) => s.t);
+  const templates = useTemplatesStore((s) => s.templates);
+  const hydrated = useTemplatesStore((s) => s.hydrated);
+  const hydrate = useTemplatesStore((s) => s.hydrate);
+  const [query, setQuery] = React.useState('');
+  const slideY = React.useRef(new Animated.Value(500)).current;
+  const overlayOpacity = React.useRef(new Animated.Value(0)).current;
+  const dragHandlers = useSheetDrag({ slideY, closedY: 500, onClose });
+
+  React.useEffect(() => {
+    if (!hydrated) void hydrate();
+  }, [hydrated, hydrate]);
+
+  React.useEffect(() => {
+    if (visible) {
+      setQuery('');
+      Animated.parallel([
+        Animated.timing(slideY, { toValue: 0, duration: 220, easing: Easing.out(Easing.cubic), useNativeDriver: true }),
+        Animated.timing(overlayOpacity, { toValue: 1, duration: 220, useNativeDriver: true }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(slideY, { toValue: 500, duration: 180, easing: Easing.in(Easing.cubic), useNativeDriver: true }),
+        Animated.timing(overlayOpacity, { toValue: 0, duration: 180, useNativeDriver: true }),
+      ]).start();
+    }
+  }, [visible, slideY, overlayOpacity]);
+
+  const visibleTemplates = React.useMemo(() => {
+    const list = query.trim() ? filterTemplates(templates, query.trim()) : templates;
+    return [...list].sort((a, b) => {
+      if (a.isFavorite !== b.isFavorite) return a.isFavorite ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+  }, [templates, query]);
+
+  return (
+    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose} statusBarTranslucent>
+      <Animated.View style={[styles.sheetOverlay, { opacity: overlayOpacity }]}>
+        <Pressable style={styles.sheetOverlayPress} onPress={onClose} />
+      </Animated.View>
+      <Animated.View
+        style={[
+          styles.sheet,
+          { paddingBottom: Math.max(insets.bottom, spacing.md), transform: [{ translateY: slideY }] },
+        ]}
+      >
+        <View {...dragHandlers}>
+          <View style={styles.sheetHandleHit}>
+            <View style={styles.sheetHandle} />
+          </View>
+          <View style={styles.sheetHeader}>
+            <Text style={styles.sheetTitle}>{t('templates.picker_title', 'Choose a Template')}</Text>
+            <Pressable onPress={onClose} hitSlop={8} style={styles.sheetClose}>
+              <X size={18} color={c.textSecondary} />
+            </Pressable>
+          </View>
+        </View>
+        {templates.length > 4 && (
+          <TextInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder={t('templates.search_placeholder', 'Search templates...')}
+            placeholderTextColor={c.textMuted}
+            style={styles.search}
+            autoCorrect={false}
+          />
+        )}
+        <ScrollView style={styles.scrollList} keyboardShouldPersistTaps="handled">
+          {visibleTemplates.length === 0 ? (
+            <Text style={styles.empty}>
+              {templates.length === 0
+                ? t('templates.no_templates', 'No templates yet')
+                : t('templates.no_results', 'No templates found')}
+            </Text>
+          ) : visibleTemplates.map((template) => (
+            <Pressable
+              key={template.id}
+              onPress={() => {
+                onPick(template);
+                onClose();
+              }}
+              style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+            >
+              <View style={styles.iconWrap}>
+                {template.isFavorite
+                  ? <Star size={16} color={c.primary} />
+                  : <FileText size={16} color={c.textSecondary} />}
+              </View>
+              <View style={styles.details}>
+                <Text style={styles.name} numberOfLines={1}>{template.name}</Text>
+                {!!(template.subject || template.category) && (
+                  <Text style={styles.subject} numberOfLines={1}>
+                    {[template.category, template.subject].filter(Boolean).join(' · ')}
+                  </Text>
+                )}
+              </View>
+            </Pressable>
+          ))}
+        </ScrollView>
+      </Animated.View>
+    </Modal>
+  );
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+    sheetOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.5)' },
+    sheetOverlayPress: { flex: 1 },
+    sheet: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      maxHeight: '70%',
+      backgroundColor: c.popover,
+      borderTopLeftRadius: radius.lg,
+      borderTopRightRadius: radius.lg,
+      borderTopWidth: 1,
+      borderColor: c.border,
+      paddingTop: spacing.sm,
+    },
+    sheetHandleHit: { alignItems: 'center', paddingTop: spacing.xs, paddingBottom: spacing.sm },
+    sheetHandle: { width: 36, height: 4, borderRadius: 2, backgroundColor: c.border },
+    sheetHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: spacing.lg,
+      paddingBottom: spacing.sm,
+      borderBottomWidth: 1,
+      borderBottomColor: c.border,
+    },
+    sheetTitle: { ...typography.bodySemibold, color: c.text },
+    sheetClose: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center', borderRadius: radius.xs },
+    search: {
+      ...typography.body,
+      color: c.text,
+      marginHorizontal: spacing.lg,
+      marginTop: spacing.sm,
+      paddingHorizontal: spacing.md,
+      paddingVertical: 8,
+      borderRadius: radius.sm,
+      borderWidth: 1,
+      borderColor: c.border,
+      backgroundColor: c.surface,
+    },
+    scrollList: { paddingVertical: spacing.xs },
+    empty: { ...typography.body, color: c.textMuted, textAlign: 'center', padding: spacing.xl },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.md,
+      minHeight: 52,
+    },
+    rowPressed: { backgroundColor: c.surfaceHover },
+    iconWrap: {
+      marginRight: spacing.md,
+      width: 28,
+      height: 28,
+      borderRadius: radius.xs,
+      backgroundColor: c.surface,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    details: { flex: 1, justifyContent: 'center' },
+    name: { ...typography.bodyMedium, color: c.text },
+    subject: { ...typography.caption, color: c.textSecondary, marginTop: 2 },
+  });
+}
diff --git a/src/components/UndoSnackbar.tsx b/src/components/UndoSnackbar.tsx
index faf02b7a..3ac35699 100644
--- a/src/components/UndoSnackbar.tsx
+++ b/src/components/UndoSnackbar.tsx
@@ -1,33 +1,72 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable, Animated, Easing } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 import { useEmailStore } from '../stores/email-store';
+import { useSendUndoStore, type PendingUndoSend } from '../stores/send-undo-store';
+import { useLocaleStore } from '../stores/locale-store';
+import { getFullEmail, restoreEmailToDraft } from '../api/email';
+import { ownMailboxes } from '../lib/mailbox-tree';
+import { draftContextFromEmail } from '../lib/draft-context';
+import type { RootStackParamList } from '../navigation/types';
 
 const VISIBLE_MS = 5000;
 
+interface Shown {
+  label: string;
+  createdAt: number;
+  visibleMs: number;
+  /** Undo-send entries carry a second "Send now" action. */
+  send?: PendingUndoSend;
+}
+
 export function UndoSnackbar() {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const insets = useSafeAreaInsets();
+  const t = useLocaleStore((s) => s.t);
+  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const entry = useEmailStore((s) => s.pendingUndo);
   const undoLast = useEmailStore((s) => s.undoLast);
   const clearUndo = useEmailStore((s) => s.clearUndo);
+  const pendingSend = useSendUndoStore((s) => s.pending);
+  const sendBusy = useSendUndoStore((s) => s.busy);
   const slideY = React.useRef(new Animated.Value(120)).current;
   const opacity = React.useRef(new Animated.Value(0)).current;
+
+  // The undo-send entry (composer) and the list-action entry (store) share
+  // the bar; the newer one wins.
+  const current = React.useMemo<Shown | null>(() => {
+    const list: Shown | null = entry
+      ? { label: entry.label, createdAt: entry.createdAt, visibleMs: VISIBLE_MS }
+      : null;
+    const send: Shown | null = pendingSend
+      ? {
+          label: t('email_composer.undo_send_label', 'Sending in {seconds}s…', { seconds: pendingSend.delaySeconds }),
+          createdAt: pendingSend.createdAt,
+          visibleMs: Math.max(1000, pendingSend.delaySeconds * 1000 - 1000),
+          send: pendingSend,
+        }
+      : null;
+    if (list && send) return list.createdAt >= send.createdAt ? list : send;
+    return list ?? send;
+  }, [entry, pendingSend, t]);
+
   // Remember the last non-null entry so the bar's text/handlers stay valid
-  // while it animates out after pendingUndo flips to null.
-  const [shown, setShown] = React.useState(entry);
+  // while it animates out after the entry flips to null.
+  const [shown, setShown] = React.useState(current);
 
   React.useEffect(() => {
-    if (entry) setShown(entry);
-  }, [entry]);
+    if (current) setShown(current);
+  }, [current]);
 
   // Drive the auto-dismiss off the entry's createdAt so re-renders during
   // animation don't reset the timer, and so consecutive actions reset it.
   React.useEffect(() => {
-    if (!entry) {
+    if (!current) {
       Animated.parallel([
         Animated.timing(slideY, { toValue: 120, duration: 180, easing: Easing.in(Easing.cubic), useNativeDriver: true }),
         Animated.timing(opacity, { toValue: 0, duration: 180, useNativeDriver: true }),
@@ -42,16 +81,44 @@ export function UndoSnackbar() {
       Animated.timing(opacity, { toValue: 1, duration: 220, useNativeDriver: true }),
     ]).start();
 
-    const elapsed = Date.now() - entry.createdAt;
-    const remaining = Math.max(0, VISIBLE_MS - elapsed);
+    const elapsed = Date.now() - current.createdAt;
+    const remaining = Math.max(0, current.visibleMs - elapsed);
     const id = setTimeout(() => {
-      // Only clear if the entry is still the same one we scheduled for.
-      if (useEmailStore.getState().pendingUndo === entry) {
+      if (current.send) {
+        if (useSendUndoStore.getState().pending === current.send) useSendUndoStore.getState().clear();
+      } else if (useEmailStore.getState().pendingUndo === entry) {
+        // Only clear if the entry is still the same one we scheduled for.
         clearUndo();
       }
     }, remaining);
     return () => clearTimeout(id);
-  }, [entry, slideY, opacity, clearUndo]);
+  }, [current, entry, slideY, opacity, clearUndo]);
+
+  const onUndo = async () => {
+    if (!shown) return;
+    if (!shown.send) {
+      void undoLast();
+      return;
+    }
+    const send = shown.send;
+    const ok = await useSendUndoStore.getState().undo();
+    if (!ok) return;
+    // Bring the message back as an editable draft and reopen the composer.
+    try {
+      const own = ownMailboxes(useEmailStore.getState().mailboxes);
+      const drafts = own.find((m) => m.role === 'drafts');
+      const sent = own.find((m) => m.role === 'sent');
+      if (drafts) await restoreEmailToDraft(send.emailId, drafts.id, sent?.id);
+      const email = await getFullEmail(send.emailId);
+      navigation.navigate('Compose', { draft: draftContextFromEmail(email) });
+    } catch (err) {
+      console.warn('[send-undo] reopen failed', err);
+    }
+  };
+
+  const onSendNow = () => {
+    void useSendUndoStore.getState().sendNow();
+  };
 
   if (!shown) return null;
 
@@ -65,12 +132,23 @@ export function UndoSnackbar() {
     >
       <View style={styles.bar}>
         <Text style={styles.label} numberOfLines={1}>{shown.label}</Text>
+        {shown.send && (
+          <Pressable
+            onPress={onSendNow}
+            hitSlop={8}
+            disabled={sendBusy}
+            style={({ pressed }) => [styles.undoBtn, pressed && styles.undoBtnPressed]}
+          >
+            <Text style={styles.sendNowText}>{t('email_composer.send_now', 'Send now').toUpperCase()}</Text>
+          </Pressable>
+        )}
         <Pressable
-          onPress={() => { void undoLast(); }}
+          onPress={() => { void onUndo(); }}
           hitSlop={8}
+          disabled={sendBusy}
           style={({ pressed }) => [styles.undoBtn, pressed && styles.undoBtnPressed]}
         >
-          <Text style={styles.undoText}>UNDO</Text>
+          <Text style={styles.undoText}>{t('common.undo', 'Undo').toUpperCase()}</Text>
         </Pressable>
       </View>
     </Animated.View>
@@ -117,5 +195,11 @@ function makeStyles(c: ThemePalette) {
       color: c.primary,
       letterSpacing: 0.5,
     },
+    sendNowText: {
+      ...typography.bodySemibold,
+      color: c.background,
+      letterSpacing: 0.5,
+      opacity: 0.85,
+    },
   });
 }
diff --git a/src/lib/editor-html.ts b/src/lib/editor-html.ts
index a6214516..6e00881d 100644
--- a/src/lib/editor-html.ts
+++ b/src/lib/editor-html.ts
@@ -80,7 +80,7 @@ export function buildEditorHtml(opts: {
 </style>
 </head>
 <body>
-<div id="editor" contenteditable="true" data-placeholder=${placeholderJson}></div>
+<div id="editor" contenteditable="true" dir="auto" data-placeholder=${placeholderJson}></div>
 <script>
 (function () {
   var editor = document.getElementById('editor');
diff --git a/src/screens/ComposeScreen.tsx b/src/screens/ComposeScreen.tsx
index 65a9f629..5122bc5f 100644
--- a/src/screens/ComposeScreen.tsx
+++ b/src/screens/ComposeScreen.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   View, Text, StyleSheet, TextInput, Pressable, ScrollView,
-  Keyboard, Dimensions, Platform, ActivityIndicator, Alert, Modal,
+  Keyboard, Dimensions, Platform, ActivityIndicator, Alert, Modal, Switch,
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
@@ -9,49 +9,72 @@ import {
   X, Send, Paperclip, ChevronDown, Bold, Italic, Underline, Strikethrough,
   List, ListOrdered, Link2, Link2Off, Image as ImageIcon, Quote,
   Heading1, Heading2, AlignLeft, AlignCenter, AlignRight, RemoveFormatting,
-  Undo2, Redo2, FileText, Clock, Check,
+  Undo2, Redo2, FileText, Clock, Check, Palette, Table, LayoutTemplate, MailCheck,
+  Users, Tag,
 } from 'lucide-react-native';
 import DateTimePicker, { type DateTimePickerEvent } from '@react-native-community/datetimepicker';
 import * as ImagePicker from 'expo-image-picker';
+import * as DocumentPicker from 'expo-document-picker';
 import * as FileSystem from 'expo-file-system/legacy';
-import { File as FsFile } from 'expo-file-system';
+import * as Sharing from 'expo-sharing';
+import * as Clipboard from 'expo-clipboard';
 import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 import { Button, IdentitySheet } from '../components';
+import { TemplateSheet } from '../components/TemplateSheet';
 import RichTextEditor, {
   type RichTextEditorHandle,
   type RichTextSelectionState,
 } from '../components/RichTextEditor';
 import { useEmailStore } from '../stores/email-store';
 import { ownMailboxes } from '../lib/mailbox-tree';
-import { useContactsStore } from '../stores/contacts-store';
+import { useContactsStore, type RecipientSuggestion } from '../stores/contacts-store';
 import { useLocaleStore } from '../stores/locale-store';
 import { useSettingsStore } from '../stores/settings-store';
 import { useAccountStore } from '../stores/account-store';
-import { isGroup } from '../lib/contact-utils';
-import {
-  getContactDisplayName,
-  getContactInitials,
-  matchesContactSearch,
-} from '../lib/contact-utils';
+import { useSendUndoStore } from '../stores/send-undo-store';
+import { type EmailTemplate } from '../stores/templates-store';
 import { getIdentities } from '../api/identity';
-import { sendEmail, patchKeywordsForEmails, type OutgoingAttachment } from '../api/email';
+import {
+  sendEmail, createDraft, destroyEmails, patchKeywordsForEmails, type OutgoingAttachment, type OutgoingEmail,
+} from '../api/email';
 import { jmapClient, RequestTimeoutError } from '../api/jmap-client';
 import { uploadBlob, uploadBytes } from '../api/blob';
 import { buildReplyRecipients, type ReplySource } from '../lib/reply-recipients';
 import { buildReplySubject, buildForwardSubject } from '../lib/subject-prefix';
-import { computeReplyThreadingHeaders } from '../lib/email-threading';
-import { escapeHtml } from '../lib/email-html';
-import { buildInitialHtml, htmlToPlainText, rewriteInlineImages } from '../lib/compose-html';
-import { stripDangerousTags } from '../lib/email-html';
-import type { EmailAddress, Identity, ContactCard } from '../api/types';
+import { computeReplyThreadingHeaders, generateMessageId, stripMessageIdBrackets } from '../lib/email-threading';
+import { escapeHtml, stripDangerousTags } from '../lib/email-html';
+import {
+  buildInitialHtml, htmlToPlainText, rewriteInlineImages, extractUserAuthoredText,
+  rewriteCidImagesForEditor, replaceInlineImagePlaceholders, sniffImageMime, QUOTED_BLOCK_START,
+} from '../lib/compose-html';
+import { buildQuoteHeader, formatQuoteDate, type QuoteHeaderLabels } from '../lib/quote-header';
+import {
+  isValidEmail, splitPastedRecipients, expandRecipients, parseRecipient, type Recipient as ParsedRecipient,
+} from '../lib/recipients';
+import { findDraftIdentityId, resolveReplyFrom } from '../lib/reply-identity';
+import {
+  hasSignature, buildEmbeddedSignatureHtml, containsEmbeddedSignature, spliceSignature,
+  insertSignatureAboveQuote, getPlainTextSignature, appendPlainTextSignature,
+  plainTextBodyHasSignature, plainTextBodyWithoutSignature, SIGNATURE_RANGE_MARKER,
+} from '../lib/signature-utils';
+import {
+  getAutoFilledPlaceholders, getPlaceholdersFromTemplate, substitutePlaceholders, templateBodyToHtml,
+} from '../lib/template-utils';
+import {
+  generateSubAddress, extractDomain, suggestTagsForDomain, getTagValidationError, MAX_TAG_LENGTH,
+} from '../lib/sub-addressing';
+import { sanitizeDisplayName } from '../lib/rfc5322-mailbox';
+import type { EmailAddress, Identity } from '../api/types';
 import type { RootStackParamList } from '../navigation/types';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Compose'>;
 
+/** A recipient chip. Group chips carry their resolved members and no email. */
 interface Recipient {
   name: string;
   email: string;
+  group?: { members: Array<{ name?: string; email: string }> };
 }
 
 type AttachmentEntry = {
@@ -64,28 +87,17 @@ type AttachmentEntry = {
   cid?: string;
   blobId?: string;
   uploading: boolean;
+  /** 0..1 while uploading, when the transport reports it. */
+  progress?: number;
   error?: string;
+  abort?: AbortController;
 };
 
-const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+type Field = 'to' | 'cc' | 'bcc';
+
 const URL_RE = /^https?:\/\/.+/i;
 
-function parseRecipients(input: string): Recipient[] {
-  return input
-    .split(/[,;\n]/)
-    .map((s) => s.trim())
-    .filter(Boolean)
-    .map((s) => {
-      const match = s.match(/^(.*?)\s*<([^\s@]+@[^\s@]+\.[^\s@]+)>$/);
-      if (match) {
-        return {
-          name: match[1].replace(/^["']|["']$/g, '').trim(),
-          email: match[2].trim(),
-        };
-      }
-      return { name: '', email: s };
-    });
-}
+const TEXT_COLORS = ['#000000', '#6b7280', '#dc2626', '#ea580c', '#ca8a04', '#16a34a', '#2563eb', '#7c3aed'];
 
 function formatBytes(n: number): string {
   if (n < 1024) return `${n} B`;
@@ -112,69 +124,141 @@ async function readUriAsDataUrl(uri: string, mime: string): Promise<string | nul
   }
 }
 
-function RecipientChip({ recipient, onRemove }: { recipient: Recipient; onRemove: () => void }) {
+const B64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+function bytesToBase64(bytes: Uint8Array): string {
+  let out = '';
+  let i = 0;
+  for (; i + 2 < bytes.length; i += 3) {
+    const n = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
+    out += B64[(n >> 18) & 63] + B64[(n >> 12) & 63] + B64[(n >> 6) & 63] + B64[n & 63];
+  }
+  if (i < bytes.length) {
+    const rem = bytes.length - i;
+    const n = (bytes[i] << 16) | (rem === 2 ? bytes[i + 1] << 8 : 0);
+    out += B64[(n >> 18) & 63] + B64[(n >> 12) & 63] + (rem === 2 ? B64[(n >> 6) & 63] : '=') + '=';
+  }
+  return out;
+}
+
+function toRecipient(r: { name?: string | null; email?: string | null }): Recipient | null {
+  if (!r.email) return null;
+  return { name: r.name ?? '', email: r.email };
+}
+
+function toRecipientList(list: Array<{ name?: string | null; email?: string | null }> | undefined | null): Recipient[] {
+  return (list ?? []).map(toRecipient).filter((r): r is Recipient => !!r);
+}
+
+function fromParsed(r: ParsedRecipient): Recipient {
+  return { name: r.name ?? '', email: r.email, group: r.group };
+}
+
+function toAddress(r: { name?: string; email: string }): EmailAddress {
+  return r.name ? { name: r.name, email: r.email } : { email: r.email };
+}
+
+function chipIsValid(r: Recipient): boolean {
+  return r.group ? r.group.members.length > 0 : isValidEmail(r.email);
+}
+
+/** Strip the editor's structural markers before the HTML leaves the device. */
+function stripEditorMarkers(html: string): string {
+  return html
+    .replace(new RegExp(`\\s${SIGNATURE_RANGE_MARKER}=("[^"]*"|'[^']*')`, 'g'), '')
+    .replace(/\sdata-quoted-html=("[^"]*"|'[^']*')/g, '');
+}
+
+function quoteLines(text: string): string {
+  return text.split('\n').map((l) => `> ${l}`).join('\n');
+}
+
+function RecipientChip({
+  recipient, invalid, onRemove, onLongPress,
+}: {
+  recipient: Recipient;
+  invalid?: boolean;
+  onRemove: () => void;
+  onLongPress?: () => void;
+}) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
+  const label = recipient.group
+    ? `${recipient.name || 'Group'} (${recipient.group.members.length})`
+    : recipient.name || recipient.email;
   return (
-    <View style={styles.chip}>
-      <Text style={styles.chipText} numberOfLines={1}>
-        {recipient.name || recipient.email}
+    <Pressable onLongPress={onLongPress} delayLongPress={350} style={[styles.chip, invalid && styles.chipInvalid]}>
+      {recipient.group && <Users size={12} color={c.textSecondary} />}
+      <Text style={[styles.chipText, invalid && styles.chipTextInvalid]} numberOfLines={1}>
+        {label}
       </Text>
       <Pressable onPress={onRemove} hitSlop={8}>
-        <X size={12} color={c.textMuted} />
+        <X size={12} color={invalid ? c.error : c.textMuted} />
       </Pressable>
-    </View>
+    </Pressable>
   );
 }
 
+function initialsOf(name: string, email: string): string {
+  const source = name.trim() || email;
+  const parts = source.split(/[\s@._-]+/).filter(Boolean);
+  const first = parts[0]?.[0] ?? '?';
+  const second = parts.length > 1 ? parts[1][0] : '';
+  return `${first}${second}`.toUpperCase();
+}
+
 function SuggestionList({
   suggestions, onPick, onPressIn,
 }: {
-  suggestions: Array<{ contact: ContactCard; name: string; email: string }>;
-  onPick: (s: { name: string; email: string }) => void;
+  suggestions: RecipientSuggestion[];
+  onPick: (s: RecipientSuggestion) => void;
   onPressIn?: () => void;
 }) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={styles.suggestionBox}>
-      {suggestions.map((s, i) => {
-        const initials = getContactInitials(s.contact);
-        return (
-          <Pressable
-            key={`${s.contact.id}-${s.email}-${i}`}
-            onPressIn={onPressIn}
-            onPress={() => onPick(s)}
-            style={({ pressed }) => [styles.suggestionRow, pressed && styles.suggestionRowPressed]}
-          >
-            <View style={styles.suggestionAvatar}>
-              <Text style={styles.suggestionAvatarText}>{initials}</Text>
-            </View>
-            <View style={styles.suggestionText}>
-              <Text style={styles.suggestionName} numberOfLines={1}>
-                {s.name || s.email}
-              </Text>
-              {!!s.name && (
-                <Text style={styles.suggestionEmail} numberOfLines={1}>{s.email}</Text>
-              )}
-            </View>
-          </Pressable>
-        );
-      })}
+      {suggestions.map((s, i) => (
+        <Pressable
+          key={`${s.group?.id ?? s.email}-${i}`}
+          onPressIn={onPressIn}
+          onPress={() => onPick(s)}
+          style={({ pressed }) => [styles.suggestionRow, pressed && styles.suggestionRowPressed]}
+        >
+          <View style={styles.suggestionAvatar}>
+            {s.group
+              ? <Users size={14} color={c.primary} />
+              : <Text style={styles.suggestionAvatarText}>{initialsOf(s.name, s.email)}</Text>}
+          </View>
+          <View style={styles.suggestionText}>
+            <Text style={styles.suggestionName} numberOfLines={1}>
+              {s.name || s.email}
+            </Text>
+            {s.group ? (
+              <Text style={styles.suggestionEmail} numberOfLines={1}>{`${s.group.memberCount} ✉`}</Text>
+            ) : !!s.name && (
+              <Text style={styles.suggestionEmail} numberOfLines={1}>{s.email}</Text>
+            )}
+          </View>
+        </Pressable>
+      ))}
     </View>
   );
 }
 
 function AttachmentChip({
-  attachment, onRemove,
+  attachment, onRemove, onPress, uploadingLabel, cancelLabel,
 }: {
   attachment: AttachmentEntry;
   onRemove: () => void;
+  onPress: () => void;
+  uploadingLabel: string;
+  cancelLabel: string;
 }) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
+  const pct = attachment.progress != null ? Math.round(attachment.progress * 100) : null;
   return (
-    <View style={styles.attachmentChip}>
+    <Pressable onPress={onPress} style={styles.attachmentChip} disabled={attachment.uploading}>
       {attachment.uploading ? (
         <ActivityIndicator size="small" color={c.primary} />
       ) : attachment.error ? (
@@ -188,18 +272,28 @@ function AttachmentChip({
         <Text style={styles.attachmentName} numberOfLines={1}>
           {attachment.name}
         </Text>
-        <Text style={styles.attachmentSize}>
+        <Text style={[styles.attachmentSize, !!attachment.error && { color: c.error }]} numberOfLines={1}>
           {attachment.error
             ? attachment.error
             : attachment.uploading
-              ? 'Uploading...'
+              ? pct != null ? `${uploadingLabel} ${pct}%` : uploadingLabel
               : formatBytes(attachment.size)}
         </Text>
+        {attachment.uploading && pct != null && (
+          <View style={styles.progressTrack}>
+            <View style={[styles.progressFill, { width: `${pct}%` }]} />
+          </View>
+        )}
       </View>
-      <Pressable onPress={onRemove} hitSlop={8} style={styles.attachmentRemove}>
+      <Pressable
+        onPress={onRemove}
+        hitSlop={8}
+        style={styles.attachmentRemove}
+        accessibilityLabel={attachment.uploading ? cancelLabel : undefined}
+      >
         <X size={14} color={c.textMuted} />
       </Pressable>
-    </View>
+    </Pressable>
   );
 }
 
@@ -225,6 +319,47 @@ function ToolbarButton({
   );
 }
 
+interface SheetOption {
+  label: string;
+  destructive?: boolean;
+  onPress: () => void;
+}
+
+/** Simple action list (Android's Alert caps at three buttons). */
+function OptionsSheet({
+  visible, title, options, onClose, cancelLabel,
+}: {
+  visible: boolean;
+  title?: string;
+  options: SheetOption[];
+  onClose: () => void;
+  cancelLabel: string;
+}) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <Pressable style={styles.modalBackdrop} onPress={onClose}>
+        <Pressable style={styles.scheduleCard} onPress={() => {}}>
+          {!!title && <Text style={styles.modalTitle} numberOfLines={2}>{title}</Text>}
+          {options.map((opt) => (
+            <Pressable
+              key={opt.label}
+              style={styles.scheduleRow}
+              onPress={() => { onClose(); opt.onPress(); }}
+            >
+              <Text style={[styles.scheduleRowLabel, opt.destructive && { color: c.error }]}>{opt.label}</Text>
+            </Pressable>
+          ))}
+          <Pressable style={styles.scheduleCancel} onPress={onClose}>
+            <Text style={styles.modalCancelText}>{cancelLabel}</Text>
+          </Pressable>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
 export default function ComposeScreen({ route, navigation }: Props) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
@@ -269,8 +404,11 @@ export default function ComposeScreen({ route, navigation }: Props) {
   const mode = route.params?.mode ?? 'compose';
   const prefillTo = route.params?.prefillTo;
   const prefillCc = route.params?.prefillCc;
+  const prefillBcc = route.params?.prefillBcc;
   const prefillSubject = route.params?.prefillSubject;
   const prefillBody = route.params?.prefillBody;
+  const prefillAttachments = route.params?.prefillAttachments;
+  const isReplyLike = !!replyTo && !draft;
   const mailboxes = useEmailStore((s) => s.mailboxes);
   // Always the user's own Sent — composing on behalf of a shared account
   // isn't supported, so a group account's Sent must never be picked up here.
@@ -301,6 +439,23 @@ export default function ComposeScreen({ route, navigation }: Props) {
   const attachmentReminderEnabled = useSettingsStore((s) => s.attachmentReminderEnabled);
   const attachmentReminderKeywords = useSettingsStore((s) => s.attachmentReminderKeywords);
   const sendDelaySeconds = useSettingsStore((s) => s.sendDelaySeconds);
+  const signaturePosition = useSettingsStore((s) => s.signaturePosition);
+  const signatureSeparatorEnabled = useSettingsStore((s) => s.signatureSeparatorEnabled);
+  const requestReadReceiptDefault = useSettingsStore((s) => s.requestReadReceiptDefault);
+  const emptySubjectWarningEnabled = useSettingsStore((s) => s.emptySubjectWarningEnabled);
+  const autoSaveDraftInterval = useSettingsStore((s) => s.autoSaveDraftInterval);
+  const subAddressDelimiter = useSettingsStore((s) => s.subAddressDelimiter);
+  const preferredIdentityIds = useSettingsStore((s) => s.preferredIdentityIds);
+  const trustedSendersAddressBook = useSettingsStore((s) => s.trustedSendersAddressBook);
+  const updateSetting = useSettingsStore((s) => s.updateSetting);
+
+  const quoteLabels = React.useMemo<QuoteHeaderLabels>(() => ({
+    replyLine: t('quote_header.reply_line', 'On {date}, {from} wrote:'),
+    forwardedSeparator: t('quote_header.forwarded_separator', '---------- Forwarded message ----------'),
+    fromLabel: t('quote_header.from_label', 'From'),
+    dateLabel: t('quote_header.date_label', 'Date'),
+    subjectLabel: t('quote_header.subject_label', 'Subject'),
+  }), [t]);
 
   // Every address that is "us": the login, the account's primary address and
   // every identity. Reply-all must not send the user a copy, and replying to
@@ -327,11 +482,6 @@ export default function ComposeScreen({ route, navigation }: Props) {
     [replyTo],
   );
 
-  const toRecipientList = (list: Array<{ name?: string; email?: string }> | undefined): Recipient[] =>
-    (list ?? [])
-      .filter((r): r is { name?: string; email: string } => !!r.email)
-      .map((r) => ({ name: r.name ?? '', email: r.email }));
-
   const initialTo = React.useMemo<Recipient[]>(() => {
     if (draft) return toRecipientList(draft.to);
     if (!replyTo) return toRecipientList(prefillTo);
@@ -352,7 +502,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
   }, [replyTo, draft, mode, prefillCc]);
 
   const initialBcc = React.useMemo<Recipient[]>(
-    () => (draft ? toRecipientList(draft.bcc) : toRecipientList(route.params?.prefillBcc)),
+    () => (draft ? toRecipientList(draft.bcc) : toRecipientList(prefillBcc)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [draft],
   );
@@ -368,10 +518,20 @@ export default function ComposeScreen({ route, navigation }: Props) {
     return buildReplySubject(replyTo.subject, t('email_composer.prefix.reply', 'Re:'));
   }, [replyTo, draft, mode, prefillSubject, t]);
 
+  // The quoted HTML with `cid:` images swapped for placeholders that carry
+  // the cid; the hydration effect below fetches the blobs (#163/#543).
+  const seedHtml = React.useMemo(() => {
+    const raw = draft ? draft.htmlBody : replyTo?.htmlBody;
+    if (!raw) return { html: undefined as string | undefined, cids: [] as string[] };
+    const { html, cids } = rewriteCidImagesForEditor(stripDangerousTags(raw));
+    return { html, cids };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const initialBodyHtml = React.useMemo(
     () => {
       if (draft) {
-        if (draft.htmlBody) return stripDangerousTags(draft.htmlBody);
+        if (seedHtml.html) return seedHtml.html;
         if (draft.textBody) return `<div>${escapeHtml(draft.textBody).replace(/\r?\n/g, '<br>')}</div>`;
         return '<p><br></p>';
       }
@@ -386,22 +546,50 @@ export default function ComposeScreen({ route, navigation }: Props) {
         cc: replyTo.cc,
         subject: replyTo.subject,
         body: replyTo.body,
-        htmlBody: replyTo.htmlBody,
+        htmlBody: seedHtml.html,
         receivedAt: replyTo.sentAt ?? replyTo.receivedAt,
-      }, { timeFormat, locale, unknownLabel: t('common.unknown', 'Unknown') });
+      }, { timeFormat, locale, unknownLabel: t('common.unknown', 'Unknown'), labels: quoteLabels });
     },
-    [mode, replyTo, draft, prefillBody, timeFormat, locale, t],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
   );
 
+  // Plain-text mode seed: the same quote as text, `> `-prefixed for replies.
+  const initialPlainBody = React.useMemo(() => {
+    if (draft) return draft.textBody ?? (draft.htmlBody ? htmlToPlainText(stripDangerousTags(draft.htmlBody)) : '');
+    if (!replyTo) return prefillBody ?? '';
+    const header = buildQuoteHeader({
+      mode: mode === 'compose' ? 'reply' : mode,
+      email: { from: replyTo.from, subject: replyTo.subject, receivedAt: replyTo.sentAt ?? replyTo.receivedAt },
+      timeFormat,
+      locale,
+      unknownLabel: t('common.unknown', 'Unknown'),
+      labels: quoteLabels,
+    });
+    const body = replyTo.body ?? (replyTo.htmlBody ? htmlToPlainText(stripDangerousTags(replyTo.htmlBody)) : '');
+    if (!body) return '';
+    if (mode === 'forward') return `\n\n${header.text}\n${body}`;
+    return `\n\n${header.text}${quoteLines(body)}`;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // Attachments carried over from the original (forward) or the re-opened
   // draft. Blobs are account-scoped: a message in a shared/group account has
   // to be re-uploaded into the user's own account before it can be sent.
+  // Inline images referenced from the quoted body are hydrated separately
+  // and never shown as file chips.
   const seedAttachments = replyTo?.attachments ?? draft?.attachments;
   const seedOwnerAccountId = replyTo?.jmapAccountId ?? draft?.jmapAccountId;
+  const seedCidSet = React.useMemo(() => new Set(seedHtml.cids), [seedHtml.cids]);
+  const isSeedInline = React.useCallback(
+    (a: { cid?: string; disposition?: string }) =>
+      !!a.cid && seedCidSet.has(stripMessageIdBrackets(a.cid)),
+    [seedCidSet],
+  );
   const initialAttachments = React.useMemo<AttachmentEntry[]>(() => {
     if (!seedAttachments?.length) return [];
     return seedAttachments
-      .filter((a) => !!a.blobId)
+      .filter((a) => !!a.blobId && !isSeedInline(a))
       .map((a) => ({
         localId: `seed-${a.blobId}`,
         name: a.name || 'attachment',
@@ -419,12 +607,19 @@ export default function ComposeScreen({ route, navigation }: Props) {
   const [ccRecipients, setCcRecipients] = React.useState<Recipient[]>(initialCc);
   const [bccRecipients, setBccRecipients] = React.useState<Recipient[]>(initialBcc);
   const [ccVisible, setCcVisible] = React.useState(initialCc.length > 0 || initialBcc.length > 0);
+  const [bccVisible, setBccVisible] = React.useState(initialBcc.length > 0);
   const [toInput, setToInput] = React.useState('');
   const [ccInput, setCcInput] = React.useState('');
+  const [bccInput, setBccInput] = React.useState('');
   const [subject, setSubject] = React.useState(initialSubject);
   const [bodyHtml, setBodyHtml] = React.useState(initialBodyHtml);
-  const [activeField, setActiveField] = React.useState<'to' | 'cc' | null>(null);
+  const [plainBody, setPlainBody] = React.useState(initialPlainBody);
+  const plainSelectionRef = React.useRef<{ start: number; end: number } | null>(null);
+  const [activeField, setActiveField] = React.useState<Field | null>(null);
   const [attachments, setAttachments] = React.useState<AttachmentEntry[]>(initialAttachments);
+  const [requestReadReceipt, setRequestReadReceipt] = React.useState(requestReadReceiptDefault);
+  const [subAddressTag, setSubAddressTag] = React.useState('');
+  const [fromOverride, setFromOverride] = React.useState<{ name: string; email: string } | null>(null);
   const [selState, setSelState] = React.useState<RichTextSelectionState>({
     bold: false, italic: false, underline: false, strikeThrough: false,
     ul: false, ol: false, blockquote: false, h1: false, h2: false,
@@ -437,43 +632,60 @@ export default function ComposeScreen({ route, navigation }: Props) {
   // until send time. Maps cid → blobId/type/name/size.
   const inlineRegistryRef = React.useRef<Map<string, AttachmentEntry>>(new Map());
 
-  const allContacts = useContactsStore((s) => s.contacts);
-  const individuals = React.useMemo(() => allContacts.filter((c) => !isGroup(c)), [allContacts]);
+  const getAutocomplete = useContactsStore((s) => s.getAutocomplete);
+  const getGroupRecipients = useContactsStore((s) => s.getGroupRecipients);
+  const loadRecentRecipients = useContactsStore((s) => s.loadRecentRecipients);
+  const contactsVersion = useContactsStore((s) => s.contacts);
+  const recentVersion = useContactsStore((s) => s.recentRecipients);
 
-  const suggestionQuery = activeField === 'to' ? toInput : activeField === 'cc' ? ccInput : '';
+  React.useEffect(() => {
+    if (sentMailbox?.id) void loadRecentRecipients(sentMailbox.id);
+  }, [sentMailbox?.id, loadRecentRecipients]);
+
+  const inputFor = (field: Field | null) =>
+    field === 'to' ? toInput : field === 'cc' ? ccInput : field === 'bcc' ? bccInput : '';
+  const suggestionQuery = inputFor(activeField);
   const alreadySelected = React.useMemo(
-    () => new Set([...toRecipients, ...ccRecipients].map((r) => r.email.toLowerCase())),
-    [toRecipients, ccRecipients],
+    () => new Set(
+      [...toRecipients, ...ccRecipients, ...bccRecipients]
+        .flatMap((r) => (r.group ? r.group.members.map((m) => m.email) : [r.email]))
+        .map((e) => e.toLowerCase()),
+    ),
+    [toRecipients, ccRecipients, bccRecipients],
   );
-  const suggestions: Array<{ contact: ContactCard; name: string; email: string }> = React.useMemo(() => {
+  const suggestions = React.useMemo<RecipientSuggestion[]>(() => {
     const q = suggestionQuery.trim();
     if (q.length < 1) return [];
-    const out: Array<{ contact: ContactCard; name: string; email: string }> = [];
-    for (const c of individuals) {
-      if (!matchesContactSearch(c, q)) continue;
-      if (!c.emails) continue;
-      const name = getContactDisplayName(c);
-      for (const e of Object.values(c.emails)) {
-        if (!e.address) continue;
-        if (alreadySelected.has(e.address.toLowerCase())) continue;
-        out.push({ contact: c, name, email: e.address });
-        if (out.length >= 8) break;
-      }
-      if (out.length >= 8) break;
-    }
-    return out;
-  }, [suggestionQuery, individuals, alreadySelected]);
+    return getAutocomplete(q, 16)
+      .filter((s) => s.group || !alreadySelected.has(s.email.toLowerCase()))
+      .slice(0, 8);
+    // contactsVersion/recentVersion re-run the lookup when the store loads.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [suggestionQuery, alreadySelected, getAutocomplete, contactsVersion, recentVersion]);
 
-  const pickSuggestion = (s: { name: string; email: string }) => {
+  const setterFor = (field: Field) =>
+    field === 'to' ? setToRecipients : field === 'cc' ? setCcRecipients : setBccRecipients;
+  const inputSetterFor = (field: Field) =>
+    field === 'to' ? setToInput : field === 'cc' ? setCcInput : setBccInput;
+
+  const pickSuggestion = (s: RecipientSuggestion) => {
     isPickingSuggestion.current = true;
-    const recipient: Recipient = { name: s.name, email: s.email };
-    if (activeField === 'cc') {
-      setCcRecipients((prev) => [...prev, recipient]);
-      setCcInput('');
+    const field = activeField ?? 'to';
+    let recipient: Recipient;
+    if (s.group) {
+      const members = getGroupRecipients(s.group.id)
+        .filter((m) => !alreadySelected.has(m.email.toLowerCase()))
+        .map((m) => ({ name: m.name || undefined, email: m.email }));
+      if (members.length === 0) {
+        inputSetterFor(field)('');
+        return;
+      }
+      recipient = { name: s.name, email: '', group: { members } };
     } else {
-      setToRecipients((prev) => [...prev, recipient]);
-      setToInput('');
+      recipient = { name: s.name, email: s.email };
     }
+    setterFor(field)((prev) => [...prev, recipient]);
+    inputSetterFor(field)('');
   };
 
   React.useEffect(() => {
@@ -497,7 +709,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
   const recipientsRefinedRef = React.useRef(false);
   React.useEffect(() => {
     if (recipientsRefinedRef.current || identities.length === 0) return;
-    if (!replyTo || mode === 'forward') return;
+    if (!isReplyLike || mode === 'forward') return;
     recipientsRefinedRef.current = true;
     const sameList = (a: Recipient[], b: Recipient[]) =>
       a.length === b.length && a.every((r, i) => r.email === b[i].email);
@@ -524,7 +736,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
     let cancelled = false;
     void (async () => {
       for (const a of seedAttachments) {
-        if (!a.blobId) continue;
+        if (!a.blobId || isSeedInline(a)) continue;
         const localId = `seed-${a.blobId}`;
         try {
           const buf = await jmapClient.fetchBlobArrayBuffer(a.blobId, a.name, a.type, seedOwnerAccountId);
@@ -544,27 +756,90 @@ export default function ComposeScreen({ route, navigation }: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Choose the identity once we know both the loaded identities and the reply
-  // context. With auto-select on, prefer the identity that received the
-  // original message (matches webmail's reply-identity behaviour).
+  // Hydrate the quoted original's inline images: fetch each cid's blob, show
+  // it as a data URL and register the part so it is re-attached inline on
+  // send (#163/#543). Cross-account blobs are re-uploaded into our account.
+  React.useEffect(() => {
+    if (seedHtml.cids.length === 0 || !seedAttachments?.length) return;
+    let cancelled = false;
+    void (async () => {
+      const map = new Map<string, string>();
+      for (const cid of seedHtml.cids) {
+        const att = seedAttachments.find((a) => a.cid && stripMessageIdBrackets(a.cid) === cid && a.blobId);
+        if (!att?.blobId) continue;
+        try {
+          const buf = await jmapClient.fetchBlobArrayBuffer(att.blobId, att.name, att.type, seedOwnerAccountId);
+          const bytes = new Uint8Array(buf);
+          const mime = att.type?.toLowerCase().startsWith('image/') ? att.type : (sniffImageMime(bytes) ?? 'image/png');
+          map.set(cid, `data:${mime};base64,${bytesToBase64(bytes)}`);
+          let blobId = att.blobId;
+          if (seedOwnerAccountId) blobId = (await uploadBytes(bytes, mime)).blobId;
+          inlineRegistryRef.current.set(cid, {
+            localId: `cid-${cid}`,
+            name: att.name || 'image',
+            type: mime,
+            size: att.size ?? bytes.byteLength,
+            uri: '',
+            inline: true,
+            cid,
+            blobId,
+            uploading: false,
+          });
+        } catch (err) {
+          console.warn('[compose] inline image hydration failed', err);
+        }
+      }
+      if (cancelled || map.size === 0) return;
+      let live = latestRef.current.bodyHtml;
+      try {
+        live = (await editorRef.current?.getHtml()) ?? live;
+      } catch { /* fall back to the last change message */ }
+      const next = replaceInlineImagePlaceholders(live, map);
+      if (next !== live) {
+        setBodyHtml(next);
+        editorRef.current?.setHtml(next);
+      }
+      // The hydrated images are part of the untouched baseline, not an edit.
+      baselineRef.current = replaceInlineImagePlaceholders(baselineRef.current, map);
+      if (lastSavedRef.current) lastSavedRef.current = replaceInlineImagePlaceholders(lastSavedRef.current, map);
+    })();
+    return () => { cancelled = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Choose the identity once we know both the loaded identities and the
+  // compose context: a re-opened draft keeps the identity it was written
+  // with; with auto-select on, a reply picks the identity that received the
+  // original (or a catch-all alias on an owned domain as a From override);
+  // otherwise the preferred ("Use as default") identity, else the one
+  // matching the active account.
   React.useEffect(() => {
     if (selectedIdentityId || identities.length === 0) return;
     const activeEmail = useAccountStore.getState().getActiveAccount()?.email || jmapClient.username;
-    const defaultIdentity = identities.find(
-      (i) => i.email.toLowerCase() === activeEmail?.toLowerCase()
-    ) ?? identities[0];
+    const preferredId = preferredIdentityIds[jmapClient.accountId];
+    const defaultIdentity =
+      identities.find((i) => i.id === preferredId)
+      ?? identities.find((i) => i.email.toLowerCase() === activeEmail?.toLowerCase())
+      ?? identities.find((i) => !i.mayDelete)
+      ?? identities[0];
 
-    if (autoSelectReplyIdentity && replyTo) {
-      const candidates = [...(replyTo.to ?? []), ...(replyTo.cc ?? [])];
-      const candidateAddrs = new Set(
-        candidates.map((r) => r.email?.toLowerCase()).filter(Boolean) as string[],
-      );
-      const matched = identities.find((i) => candidateAddrs.has(i.email.toLowerCase()));
-      setSelectedIdentityId((matched ?? defaultIdentity).id);
-    } else {
-      setSelectedIdentityId(defaultIdentity.id);
+    if (draft) {
+      const matched = findDraftIdentityId(identities, draft.from?.[0]);
+      setSelectedIdentityId(matched ?? defaultIdentity.id);
+      return;
     }
-  }, [identities, autoSelectReplyIdentity, replyTo, selectedIdentityId]);
+    if (autoSelectReplyIdentity && replyTo) {
+      const resolved = resolveReplyFrom(identities, { to: replyTo.to, cc: replyTo.cc, bcc: replyTo.bcc });
+      if (resolved) {
+        setSelectedIdentityId(resolved.identityId);
+        if (resolved.overrideEmail) {
+          setFromOverride({ name: resolved.overrideName ?? '', email: resolved.overrideEmail });
+        }
+        return;
+      }
+    }
+    setSelectedIdentityId(defaultIdentity.id);
+  }, [identities, autoSelectReplyIdentity, replyTo, draft, selectedIdentityId, preferredIdentityIds]);
 
   const primaryIdentity = React.useMemo(() => {
     if (identities.length === 0) return null;
@@ -575,60 +850,113 @@ export default function ComposeScreen({ route, navigation }: Props) {
     return identities.find((i) => i.id === selectedIdentityId) ?? defaultIdentity;
   }, [identities, selectedIdentityId]);
 
+  // An alias without a signature falls back to the primary identity's.
+  const signatureIdentity = React.useMemo(() => {
+    if (!primaryIdentity) return null;
+    if (hasSignature(primaryIdentity)) return primaryIdentity;
+    const fallback = identities.find((i) => !i.mayDelete) ?? identities[0];
+    return fallback && hasSignature(fallback) ? fallback : null;
+  }, [primaryIdentity, identities]);
+
   const openIdentityPicker = () => {
     if (identities.length <= 1) return;
     setIdentitySheetOpen(true);
   };
 
-  const commitTyped = () => {
-    const extraTo = parseRecipients(toInput);
-    const extraCc = parseRecipients(ccInput);
-    return {
-      finalTo: [...toRecipients, ...extraTo],
-      finalCc: [...ccRecipients, ...extraCc],
+  // ── Recipients ───────────────────────────────────────────────────────
+
+  // Typed-but-uncommitted text is parsed the same way a paste is; leftovers
+  // that are not addresses count as invalid and block Send.
+  const typedRecipients = React.useMemo(() => {
+    const parseField = (input: string, existing: Recipient[]) => {
+      if (!input.trim()) return { valid: [] as Recipient[], invalid: [] as string[] };
+      const { valid, invalid } = splitPastedRecipients(input, Array.from(alreadySelected));
+      return {
+        valid: valid.map(fromParsed).filter((r) => !existing.some((e) => e.email.toLowerCase() === r.email.toLowerCase())),
+        invalid,
+      };
     };
-  };
+    return {
+      to: parseField(toInput, toRecipients),
+      cc: parseField(ccInput, ccRecipients),
+      bcc: parseField(bccInput, bccRecipients),
+    };
+  }, [toInput, ccInput, bccInput, toRecipients, ccRecipients, bccRecipients, alreadySelected]);
 
-  const addTyped = () => {
-    const extraTo = parseRecipients(toInput);
-    const extraCc = parseRecipients(ccInput);
-    if (extraTo.length) {
-      setToRecipients((prev) => {
-        const existing = new Set(prev.map((r) => r.email.toLowerCase()));
-        const unique: Recipient[] = [];
-        for (const r of extraTo) {
-          const emailLower = r.email.toLowerCase();
-          if (!existing.has(emailLower)) {
-            existing.add(emailLower);
-            unique.push(r);
-          }
-        }
-        return [...prev, ...unique];
-      });
-      setToInput('');
-    }
-    if (extraCc.length) {
-      setCcRecipients((prev) => {
-        const existing = new Set(prev.map((r) => r.email.toLowerCase()));
-        const unique: Recipient[] = [];
-        for (const r of extraCc) {
-          const emailLower = r.email.toLowerCase();
-          if (!existing.has(emailLower)) {
-            existing.add(emailLower);
-            unique.push(r);
-          }
-        }
-        return [...prev, ...unique];
-      });
-      setCcInput('');
+  const finalTo = React.useMemo(() => [...toRecipients, ...typedRecipients.to.valid], [toRecipients, typedRecipients]);
+  const finalCc = React.useMemo(() => [...ccRecipients, ...typedRecipients.cc.valid], [ccRecipients, typedRecipients]);
+  const finalBcc = React.useMemo(() => [...bccRecipients, ...typedRecipients.bcc.valid], [bccRecipients, typedRecipients]);
+  const invalidTyped = [...typedRecipients.to.invalid, ...typedRecipients.cc.invalid, ...typedRecipients.bcc.invalid];
+
+  // Move what was typed into chips (blur / submit). Unparseable leftovers
+  // stay in the input so nothing the user typed is silently dropped.
+  const addTyped = (field?: Field) => {
+    const fields: Field[] = field ? [field] : ['to', 'cc', 'bcc'];
+    for (const f of fields) {
+      const parsed = typedRecipients[f];
+      if (parsed.valid.length) {
+        setterFor(f)((prev) => {
+          const existing = new Set(prev.flatMap((r) => (r.group ? r.group.members.map((m) => m.email) : [r.email])).map((e) => e.toLowerCase()));
+          const unique = parsed.valid.filter((r) => !existing.has(r.email.toLowerCase()));
+          return unique.length ? [...prev, ...unique] : prev;
+        });
+      }
+      const leftover = parsed.invalid.join(' ');
+      if (leftover !== inputFor(f)) inputSetterFor(f)(leftover);
     }
   };
 
-  const { finalTo, finalCc } = commitTyped();
+  const [chipMenu, setChipMenu] = React.useState<{ field: Field; index: number } | null>(null);
+  const chipMenuRecipient = chipMenu ? (chipMenu.field === 'to' ? toRecipients : chipMenu.field === 'cc' ? ccRecipients : bccRecipients)[chipMenu.index] : null;
+  const removeChip = (field: Field, index: number) =>
+    setterFor(field)((prev) => prev.filter((_, i) => i !== index));
+  const moveChip = (from: Field, index: number, to: Field) => {
+    const list = from === 'to' ? toRecipients : from === 'cc' ? ccRecipients : bccRecipients;
+    const r = list[index];
+    if (!r) return;
+    removeChip(from, index);
+    setterFor(to)((prev) => [...prev, r]);
+    if (to === 'cc') setCcVisible(true);
+    if (to === 'bcc') { setCcVisible(true); setBccVisible(true); }
+  };
+  const chipMenuOptions = React.useMemo<SheetOption[]>(() => {
+    if (!chipMenu || !chipMenuRecipient) return [];
+    const r = chipMenuRecipient;
+    const fieldLabel = (f: Field) => (f === 'to' ? t('email_composer.to', 'To') : f === 'cc' ? t('email_composer.cc', 'Cc') : t('email_composer.bcc', 'Bcc'));
+    const opts: SheetOption[] = [];
+    for (const target of (['to', 'cc', 'bcc'] as Field[]).filter((f) => f !== chipMenu.field)) {
+      opts.push({
+        label: t('email_composer.recipient_move_to', 'Move to {field}', { field: fieldLabel(target) }),
+        onPress: () => moveChip(chipMenu.field, chipMenu.index, target),
+      });
+    }
+    if (!r.group) {
+      opts.push({
+        label: t('email_composer.recipient_copy', 'Copy address'),
+        onPress: () => { void Clipboard.setStringAsync(r.email); },
+      });
+      opts.push({
+        label: t('email_composer.recipient_add_contact', 'Add to contacts'),
+        onPress: () => navigation.navigate('ContactForm', { prefill: { email: r.email, name: r.name || undefined } }),
+      });
+    }
+    opts.push({
+      label: t('email_composer.recipient_remove', 'Remove'),
+      destructive: true,
+      onPress: () => removeChip(chipMenu.field, chipMenu.index),
+    });
+    return opts;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chipMenu, chipMenuRecipient, t]);
+
   const hasUploadInFlight = attachments.some((a) => a.uploading);
   const hasUploadError = attachments.some((a) => !!a.error);
-  const hasValidRecipients = finalTo.every((r) => EMAIL_RE.test(r.email)) && finalTo.length > 0;
-  const bodyPlain = React.useMemo(() => htmlToPlainText(bodyHtml), [bodyHtml]);
+  const allChipsValid = [...finalTo, ...finalCc, ...finalBcc].every(chipIsValid);
+  const hasValidRecipients = finalTo.length > 0 && allChipsValid && invalidTyped.length === 0;
+  const bodyPlain = React.useMemo(
+    () => (plainTextMode ? plainBody : htmlToPlainText(bodyHtml)),
+    [plainTextMode, plainBody, bodyHtml],
+  );
   const hasBodyContent = bodyPlain.trim().length > 0
     || attachments.some((a) => a.blobId && !a.error);
   const canSend =
@@ -636,33 +964,383 @@ export default function ComposeScreen({ route, navigation }: Props) {
     !hasUploadInFlight &&
     !hasUploadError &&
     hasValidRecipients &&
-    subject.trim().length > 0 &&
     hasBodyContent &&
     !!primaryIdentity &&
     !!sentMailbox;
 
-  const onClose = () => {
-    const isDirty =
-      bodyPlain.trim().length > 0
-      || subject.trim().length > 0
-      || toRecipients.length > 0
-      || ccRecipients.length > 0
-      || attachments.length > 0;
-    if (isDirty) {
-      Alert.alert(
-        t('email_composer.discard_draft_title', 'Discard draft?'),
-        t('email_composer.discard_draft_confirm', 'You have unsaved changes. Do you want to discard this draft?'),
-        [
-          { text: t('email_composer.cancel', 'Cancel'), style: 'cancel' },
-          {
-            text: t('email_composer.discard', 'Discard'),
-            style: 'destructive',
-            onPress: () => navigation.goBack(),
-          },
-        ],
-      );
+  // ── Dirty tracking / drafts ──────────────────────────────────────────
+
+  const snapshotOf = (s: {
+    to: Recipient[]; cc: Recipient[]; bcc: Recipient[]; subject: string; body: string;
+    attachments: AttachmentEntry[];
+  }) => JSON.stringify({
+    to: s.to.map((r) => [r.name, r.email, r.group?.members.map((m) => m.email)]),
+    cc: s.cc.map((r) => [r.name, r.email, r.group?.members.map((m) => m.email)]),
+    bcc: s.bcc.map((r) => [r.name, r.email, r.group?.members.map((m) => m.email)]),
+    subject: s.subject,
+    body: s.body,
+    att: s.attachments.filter((a) => !a.inline).map((a) => a.blobId ?? a.localId),
+  });
+
+  const currentSnapshot = snapshotOf({
+    to: finalTo, cc: finalCc, bcc: finalBcc, subject,
+    body: plainTextMode ? plainBody : bodyHtml, attachments,
+  });
+  const baselineRef = React.useRef(snapshotOf({
+    to: initialTo, cc: initialCc, bcc: initialBcc, subject: initialSubject,
+    body: plainTextMode ? initialPlainBody : initialBodyHtml, attachments: initialAttachments,
+  }));
+  // Snapshot at the last successful draft save (null = never saved).
+  const lastSavedRef = React.useRef<string | null>(draft ? baselineRef.current : null);
+  const draftIdRef = React.useRef<string | null>(draft?.id ?? null);
+  const messageIdRef = React.useRef<string | null>(draft?.messageId?.[0] ?? null);
+  const inflightSaveRef = React.useRef<Promise<string | null> | null>(null);
+  const saveTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastSaveAtRef = React.useRef(0);
+  const allowLeaveRef = React.useRef(false);
+  const sendingRef = React.useRef(false);
+  const [draftStatus, setDraftStatus] = React.useState<'idle' | 'saving' | 'saved' | 'failed'>('idle');
+  const [savingDraft, setSavingDraft] = React.useState(false);
+
+  const isDirty = currentSnapshot !== baselineRef.current;
+  const needsSave = currentSnapshot !== (lastSavedRef.current ?? baselineRef.current);
+
+  // Latest state for callbacks that outlive a render (autosave timer,
+  // beforeRemove listener, hydration).
+  const latestRef = React.useRef({ bodyHtml, plainBody, isDirty, needsSave, currentSnapshot });
+  latestRef.current = { bodyHtml, plainBody, isDirty, needsSave, currentSnapshot };
+
+  // ── Signature ────────────────────────────────────────────────────────
+
+  const placeSignatureHtml = React.useCallback((html: string, sigHtml: string): string => {
+    if (!sigHtml) return html;
+    if (isReplyLike && signaturePosition === 'above_quote') {
+      return insertSignatureAboveQuote(html, sigHtml, QUOTED_BLOCK_START);
+    }
+    return `${html}${sigHtml}`;
+  }, [isReplyLike, signaturePosition]);
+
+  const placeSignaturePlain = React.useCallback((body: string, identity: Identity): string => {
+    const sig = getPlainTextSignature(identity);
+    if (!sig) return body;
+    const sep = signatureSeparatorEnabled ? '\n\n-- \n' : '\n\n';
+    if (isReplyLike && signaturePosition === 'above_quote') {
+      const idx = body.indexOf('\n\n');
+      const head = idx === -1 ? body : body.slice(0, idx);
+      const tail = idx === -1 ? '' : body.slice(idx);
+      return `${head}${sep}${sig}${tail}`;
+    }
+    return appendPlainTextSignature(body, identity, { separator: signatureSeparatorEnabled });
+  }, [isReplyLike, signaturePosition, signatureSeparatorEnabled]);
+
+  // Embed the signature once the identities are known. A re-opened draft
+  // keeps whatever it already carries (#848).
+  const signatureEmbeddedRef = React.useRef(false);
+  const prevSignatureIdentityRef = React.useRef<Identity | null>(null);
+  React.useEffect(() => {
+    if (!primaryIdentity) return;
+    if (!signatureEmbeddedRef.current) {
+      signatureEmbeddedRef.current = true;
+      prevSignatureIdentityRef.current = signatureIdentity;
+      if (draft || !signatureIdentity) return;
+      if (plainTextMode) {
+        const next = placeSignaturePlain(latestRef.current.plainBody, signatureIdentity);
+        setPlainBody(next);
+        baselineRef.current = snapshotOf({
+          to: initialTo, cc: initialCc, bcc: initialBcc, subject: initialSubject, body: next, attachments: initialAttachments,
+        });
+      } else {
+        const sigHtml = buildEmbeddedSignatureHtml(signatureIdentity, { separator: signatureSeparatorEnabled });
+        void (async () => {
+          let live = latestRef.current.bodyHtml;
+          try {
+            live = (await editorRef.current?.getHtml()) ?? live;
+          } catch { /* keep the last change message */ }
+          if (containsEmbeddedSignature(live)) return;
+          const next = placeSignatureHtml(live, sigHtml);
+          setBodyHtml(next);
+          editorRef.current?.setHtml(next);
+          baselineRef.current = snapshotOf({
+            to: initialTo, cc: initialCc, bcc: initialBcc, subject: initialSubject,
+            body: placeSignatureHtml(initialBodyHtml, sigHtml), attachments: initialAttachments,
+          });
+        })();
+      }
       return;
     }
+    // Identity switch: swap the signature block, leaving the text alone.
+    const prev = prevSignatureIdentityRef.current;
+    if (prev?.id === signatureIdentity?.id) return;
+    prevSignatureIdentityRef.current = signatureIdentity;
+    if (plainTextMode) {
+      setPlainBody((body) => {
+        let stripped = body;
+        if (prev && plainTextBodyHasSignature(body, prev)) {
+          stripped = plainTextBodyWithoutSignature(body, prev);
+        } else if (prev) {
+          const old = getPlainTextSignature(prev);
+          const marker = `${signatureSeparatorEnabled ? '\n\n-- \n' : '\n\n'}${old}`;
+          if (old && body.includes(marker)) stripped = body.replace(marker, '');
+        }
+        return signatureIdentity ? placeSignaturePlain(stripped, signatureIdentity) : stripped;
+      });
+      return;
+    }
+    const sigHtml = signatureIdentity
+      ? buildEmbeddedSignatureHtml(signatureIdentity, { separator: signatureSeparatorEnabled })
+      : '';
+    void (async () => {
+      let live = latestRef.current.bodyHtml;
+      try {
+        live = (await editorRef.current?.getHtml()) ?? live;
+      } catch { /* keep the last change message */ }
+      const next = containsEmbeddedSignature(live)
+        ? spliceSignature(live, sigHtml)
+        : placeSignatureHtml(live, sigHtml);
+      if (next !== live) {
+        setBodyHtml(next);
+        editorRef.current?.setHtml(next);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [primaryIdentity?.id, signatureIdentity?.id]);
+
+  // ── Outgoing message assembly ─────────────────────────────────────────
+
+  const senderAddress = React.useCallback((identity: Identity): { from: EmailAddress; envelopeMailFrom?: string } => {
+    const name = sanitizeDisplayName(identity.name);
+    let from: EmailAddress;
+    if (fromOverride?.email.trim()) {
+      const overrideName = sanitizeDisplayName(fromOverride.name);
+      from = overrideName ? { name: overrideName, email: fromOverride.email.trim() } : { email: fromOverride.email.trim() };
+    } else {
+      const email = subAddressTag ? generateSubAddress(identity.email, subAddressTag, subAddressDelimiter) : identity.email;
+      from = name ? { name, email } : { email };
+    }
+    // A From that isn't the identity's own address still goes out through
+    // the identity's envelope sender.
+    const envelopeMailFrom = from.email.toLowerCase() !== identity.email.toLowerCase() ? identity.email : undefined;
+    return { from, envelopeMailFrom };
+  }, [fromOverride, subAddressTag, subAddressDelimiter]);
+
+  const buildOutgoing = React.useCallback((identity: Identity, liveHtml: string, opts: { forDraft: boolean }): OutgoingEmail => {
+    const { from, envelopeMailFrom } = senderAddress(identity);
+    if (!messageIdRef.current) messageIdRef.current = generateMessageId(identity.email);
+
+    let htmlBody: string | undefined;
+    let textBody: string;
+    let usedCids: string[] = [];
+    if (plainTextMode) {
+      textBody = plainBody;
+    } else {
+      const rewritten = rewriteInlineImages(liveHtml);
+      usedCids = rewritten.usedCids;
+      // Belt-and-suspenders sanitization: the editor uses execCommand which
+      // can preserve pasted <script>/<style>/etc. Strip them before sending.
+      const safeHtml = stripDangerousTags(opts.forDraft ? rewritten.html : stripEditorMarkers(rewritten.html));
+      htmlBody = `<div>${safeHtml}</div>`;
+      textBody = htmlToPlainText(safeHtml);
+    }
+
+    const inlineFromBody = usedCids
+      .map((cid) => inlineRegistryRef.current.get(cid))
+      .filter((e): e is AttachmentEntry => !!e && !!e.blobId && !e.error)
+      .map<OutgoingAttachment>((e) => ({
+        blobId: e.blobId!,
+        type: e.type,
+        name: e.name,
+        size: e.size,
+        disposition: 'inline',
+        cid: e.cid,
+      }));
+
+    const fileAttachments = attachments
+      .filter((a) => !a.inline && a.blobId && !a.error)
+      .map<OutgoingAttachment>((a) => ({
+        blobId: a.blobId!,
+        type: a.type,
+        name: a.name,
+        size: a.size,
+        disposition: 'attachment',
+      }));
+    const outgoingAttachments = [...inlineFromBody, ...fileAttachments];
+
+    // RFC 5322 §3.6.4: only replies continue the thread; a forward starts
+    // a new one. The original's Message-ID (never its JMAP id) seeds
+    // In-Reply-To, and References accumulates the chain (#234). A draft
+    // keeps the headers it was saved with.
+    const threading = replyTo && !draft && mode !== 'forward'
+      ? computeReplyThreadingHeaders({ messageId: replyTo.messageId, references: replyTo.references })
+      : draft && (draft.inReplyTo?.length || draft.references?.length)
+        ? { inReplyTo: draft.inReplyTo ?? [], references: draft.references ?? draft.inReplyTo ?? [] }
+        : null;
+
+    const identityBcc = opts.forDraft ? [] : (identity.bcc ?? []).filter((r) => !!r.email);
+    const bccAll = [...expandRecipients(finalBcc).map(toAddress), ...identityBcc];
+
+    return {
+      from: [from],
+      to: expandRecipients(finalTo).map(toAddress),
+      cc: finalCc.length ? expandRecipients(finalCc).map(toAddress) : undefined,
+      bcc: bccAll.length ? bccAll : undefined,
+      // The identity's Reply-To rides along on every message sent with it.
+      replyTo: identity.replyTo?.length ? identity.replyTo : undefined,
+      subject,
+      htmlBody,
+      textBody,
+      attachments: outgoingAttachments.length ? outgoingAttachments : undefined,
+      inReplyTo: threading?.inReplyTo,
+      references: threading?.references,
+      messageId: messageIdRef.current,
+      requestReadReceipt,
+      envelopeMailFrom,
+    };
+  }, [senderAddress, plainTextMode, plainBody, attachments, replyTo, draft, mode, finalTo, finalCc, finalBcc, subject, requestReadReceipt]);
+
+  // Save one draft version (create, then destroy the previous one - #849).
+  const saveDraftOnce = async (opts: { live: boolean }): Promise<string | null> => {
+    const identity = primaryIdentity;
+    if (!identity || !draftsMailbox || sendingRef.current) return draftIdRef.current;
+    let html = latestRef.current.bodyHtml;
+    if (opts.live && !plainTextMode) {
+      try {
+        html = (await editorRef.current?.getHtml()) ?? html;
+      } catch { /* the last change message is the best we have */ }
+      if (html !== latestRef.current.bodyHtml) setBodyHtml(html);
+    }
+    const snapshot = snapshotOf({
+      to: finalTo, cc: finalCc, bcc: finalBcc, subject,
+      body: plainTextMode ? plainBody : html, attachments,
+    });
+    if (snapshot === lastSavedRef.current) return draftIdRef.current;
+    if (snapshot === baselineRef.current && !draftIdRef.current) return null;
+    setDraftStatus('saving');
+    try {
+      const outgoing = buildOutgoing(identity, html, { forDraft: true });
+      const id = await createDraft(outgoing, draftsMailbox.id, draftIdRef.current ?? undefined);
+      draftIdRef.current = id;
+      lastSavedRef.current = snapshot;
+      lastSaveAtRef.current = Date.now();
+      setDraftStatus('saved');
+      return id;
+    } catch (err) {
+      setDraftStatus('failed');
+      throw err;
+    }
+  };
+
+  // Serialize saves: a save that starts while another is in flight waits
+  // for it, so two versions can never race (#303).
+  const saveDraft = (opts: { live: boolean }): Promise<string | null> => {
+    const previous = inflightSaveRef.current;
+    const promise = (async () => {
+      if (previous) {
+        try { await previous; } catch { /* reported by its own caller */ }
+      }
+      return saveDraftOnce(opts);
+    })();
+    inflightSaveRef.current = promise;
+    void promise.finally(() => {
+      if (inflightSaveRef.current === promise) inflightSaveRef.current = null;
+    });
+    return promise;
+  };
+  const saveDraftRef = React.useRef(saveDraft);
+  saveDraftRef.current = saveDraft;
+
+  // Debounced autosave: two seconds after the last change, rate-limited to
+  // one save per `autoSaveDraftInterval`.
+  React.useEffect(() => {
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    if (!isDirty || !needsSave || !draftsMailbox || !primaryIdentity) return;
+    const sinceLast = Date.now() - lastSaveAtRef.current;
+    const wait = Math.max(2000, autoSaveDraftInterval - sinceLast);
+    saveTimerRef.current = setTimeout(() => {
+      saveTimerRef.current = null;
+      if (sendingRef.current || !latestRef.current.needsSave) return;
+      saveDraftRef.current({ live: false }).catch((err) => {
+        console.warn('[compose] autosave failed', err);
+      });
+    }, wait);
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSnapshot, draftsMailbox?.id, primaryIdentity?.id]);
+
+  // ── Close guard ──────────────────────────────────────────────────────
+
+  const saveAndClose = async (proceed: () => void) => {
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    setSavingDraft(true);
+    try {
+      await saveDraft({ live: true });
+      allowLeaveRef.current = true;
+      proceed();
+    } catch (err) {
+      // The server refused the draft: keep the text on screen rather than
+      // dropping it with nothing but an error (#702).
+      Alert.alert(
+        t('email_composer.save_failed', 'Failed to save'),
+        err instanceof Error ? err.message : String(err),
+      );
+    } finally {
+      setSavingDraft(false);
+    }
+  };
+
+  const discardAndClose = (proceed: () => void) => {
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    for (const a of attachments) a.abort?.abort();
+    // A draft this session created by autosave goes with the discard; a
+    // re-opened draft keeps its last saved version.
+    const autosaved = draftIdRef.current;
+    if (autosaved && !draft) {
+      void (async () => {
+        try { await inflightSaveRef.current; } catch { /* ignore */ }
+        const id = draftIdRef.current ?? autosaved;
+        destroyEmails([id]).catch((err) => console.warn('[compose] discard failed', err));
+      })();
+    }
+    allowLeaveRef.current = true;
+    proceed();
+  };
+
+  const showCloseDialog = (proceed: () => void) => {
+    Alert.alert(
+      t('email_composer.close_draft_title', 'Save or discard draft?'),
+      t('email_composer.close_draft_message', 'You have unsaved changes. Would you like to save this as a draft or discard it?'),
+      [
+        { text: t('email_composer.cancel', 'Cancel'), style: 'cancel' },
+        { text: t('email_composer.discard', 'Discard'), style: 'destructive', onPress: () => discardAndClose(proceed) },
+        { text: t('email_composer.save_draft', 'Save Draft'), onPress: () => { void saveAndClose(proceed); } },
+      ],
+    );
+  };
+  const showCloseDialogRef = React.useRef(showCloseDialog);
+  showCloseDialogRef.current = showCloseDialog;
+
+  // The OS back gesture / hardware back goes through the same guard as the
+  // header X.
+  React.useEffect(() => {
+    return navigation.addListener('beforeRemove', (e) => {
+      if (allowLeaveRef.current) return;
+      if (!latestRef.current.isDirty && !latestRef.current.needsSave) return;
+      e.preventDefault();
+      showCloseDialogRef.current(() => navigation.dispatch(e.data.action));
+    });
+  }, [navigation]);
+
+  const onClose = () => {
     navigation.goBack();
   };
 
@@ -677,23 +1355,56 @@ export default function ComposeScreen({ route, navigation }: Props) {
   };
 
   const removeAttachment = (localId: string) => {
-    setAttachments((prev) => {
-      const removed = prev.find((a) => a.localId === localId);
-      if (removed?.inline && removed.cid) {
-        inlineRegistryRef.current.delete(removed.cid);
-        // Strip the editor's <img data-cid="…"> for this cid.
-        const escCid = removed.cid.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        const stripped = bodyHtml.replace(
-          new RegExp(`<img\\b[^>]*\\sdata-cid=("${escCid}"|'${escCid}')[^>]*>`, 'gi'),
-          '',
-        );
-        if (stripped !== bodyHtml) {
+    const removed = attachments.find((a) => a.localId === localId);
+    removed?.abort?.abort();
+    setAttachments((prev) => prev.filter((a) => a.localId !== localId));
+    if (removed?.inline && removed.cid) {
+      inlineRegistryRef.current.delete(removed.cid);
+      // Strip the editor's <img data-cid="…"> for this cid from the live DOM
+      // (not the last change message, which can lag typing).
+      const escCid = removed.cid.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const re = new RegExp(`<img\\b[^>]*\\sdata-cid=("${escCid}"|'${escCid}')[^>]*>`, 'gi');
+      void (async () => {
+        let live = latestRef.current.bodyHtml;
+        try {
+          live = (await editorRef.current?.getHtml()) ?? live;
+        } catch { /* fall back */ }
+        const stripped = live.replace(re, '');
+        if (stripped !== live) {
           setBodyHtml(stripped);
           editorRef.current?.setHtml(stripped);
         }
+      })();
+    }
+  };
+
+  // Server limits: refuse files the upload endpoint would reject and keep
+  // the per-message attachment total under the mail capability's ceiling.
+  const checkAttachmentSize = (size: number, inline: boolean): boolean => {
+    const maxUpload = jmapClient.getMaxSizeUpload();
+    if (maxUpload && size > maxUpload) {
+      Alert.alert(
+        t('email_composer.attach', 'Attach'),
+        t('email_composer.attachment_too_large', 'This file is larger than the server allows ({size} > {max}).', {
+          size: formatBytes(size), max: formatBytes(maxUpload),
+        }),
+      );
+      return false;
+    }
+    const maxTotal = jmapClient.getMaxSizeAttachmentsPerEmail();
+    if (!inline && maxTotal) {
+      const total = attachments.filter((a) => !a.inline && !a.error).reduce((n, a) => n + a.size, 0) + size;
+      if (total > maxTotal) {
+        Alert.alert(
+          t('email_composer.attach', 'Attach'),
+          t('email_composer.attachments_too_large_total', 'The attachments would exceed the {max} this server allows per message.', {
+            max: formatBytes(maxTotal),
+          }),
+        );
+        return false;
       }
-      return prev.filter((a) => a.localId !== localId);
-    });
+    }
+    return true;
   };
 
   const addUploadEntry = (asset: {
@@ -714,6 +1425,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
       inline: asset.inline,
       cid: asset.cid,
       uploading: true,
+      abort: new AbortController(),
     };
     setAttachments((prev) => [...prev, entry]);
     if (asset.inline && asset.cid) inlineRegistryRef.current.set(asset.cid, entry);
@@ -722,29 +1434,52 @@ export default function ComposeScreen({ route, navigation }: Props) {
 
   const startUpload = async (entry: AttachmentEntry) => {
     try {
-      const { blobId, size, type } = await uploadBlob(entry.uri, entry.type);
+      const { blobId, size, type } = await uploadBlob(entry.uri, entry.type, {
+        signal: entry.abort?.signal,
+        onProgress: (sent, total) => {
+          if (total > 0) updateAttachment(entry.localId, { progress: Math.min(1, sent / total) });
+        },
+      });
       updateAttachment(entry.localId, {
         blobId,
         type: type || entry.type,
         size: size || entry.size,
         uploading: false,
+        progress: undefined,
+        abort: undefined,
       });
     } catch (e) {
+      if (e instanceof Error && e.name === 'AbortError') return; // removed by the user
       const message = e instanceof Error ? e.message : 'Upload failed';
-      updateAttachment(entry.localId, { uploading: false, error: message });
+      updateAttachment(entry.localId, { uploading: false, progress: undefined, error: message });
       Alert.alert(
-        t('email_composer.upload_failed', 'Failed to upload {filename}').replace('{filename}', entry.name),
+        t('email_composer.upload_failed', 'Failed to upload {filename}', { filename: entry.name }),
         message,
       );
     }
   };
 
+  const addFileAsset = (asset: { name: string; type: string; size: number; uri: string }) => {
+    if (!checkAttachmentSize(asset.size, false)) return;
+    void startUpload(addUploadEntry({ ...asset, inline: false }));
+  };
+
+  // Files shared into the app (Android SEND / iOS share sheet) start uploading
+  // right away.
+  React.useEffect(() => {
+    if (!prefillAttachments?.length) return;
+    for (const a of prefillAttachments) {
+      addFileAsset({ name: a.name, type: a.type || 'application/octet-stream', size: a.size ?? 0, uri: a.uri });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const pickPhotoAttachments = async () => {
     const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (!perm.granted) {
       Alert.alert(
         t('email_composer.attach', 'Attach'),
-        'Photo library permission is required to attach images.',
+        t('email_composer.permission_photos', 'Photo library permission is required to attach images.'),
       );
       return;
     }
@@ -758,62 +1493,89 @@ export default function ComposeScreen({ route, navigation }: Props) {
     for (const asset of result.assets) {
       const fallbackName = asset.fileName
         || `attachment-${Date.now()}.${(asset.mimeType ?? 'application/octet-stream').split('/')[1] ?? 'bin'}`;
-      const entry = addUploadEntry({
+      addFileAsset({
         name: fallbackName,
         type: asset.mimeType ?? 'application/octet-stream',
         size: asset.fileSize ?? 0,
         uri: asset.uri,
-        inline: false,
       });
-      void startUpload(entry);
     }
   };
 
-  const pickFileAttachment = async () => {
-    // pickFileAsync's return type is the lower-level FileSystemFile, not the
-    // public `File` wrapper. Both expose the fields we need (uri/name/size/type).
-    type PickedFile = { uri: string; name?: string; size?: number; type?: string };
-    let picked: PickedFile | undefined;
+  const takePhotoAttachment = async () => {
+    const perm = await ImagePicker.requestCameraPermissionsAsync();
+    if (!perm.granted) {
+      Alert.alert(
+        t('email_composer.attach', 'Attach'),
+        t('email_composer.permission_camera', 'Camera permission is required to take a photo.'),
+      );
+      return;
+    }
+    const result = await ImagePicker.launchCameraAsync({ quality: 0.9, exif: false });
+    if (result.canceled || !result.assets[0]) return;
+    const asset = result.assets[0];
+    const mime = asset.mimeType ?? 'image/jpeg';
+    addFileAsset({
+      name: asset.fileName || `photo-${Date.now()}.${mime.split('/')[1] ?? 'jpg'}`,
+      type: mime,
+      size: asset.fileSize ?? 0,
+      uri: asset.uri,
+    });
+  };
+
+  const pickFileAttachments = async () => {
+    let result: DocumentPicker.DocumentPickerResult;
     try {
-      const result = await FsFile.pickFileAsync();
-      picked = (Array.isArray(result) ? result[0] : result) as PickedFile;
+      result = await DocumentPicker.getDocumentAsync({ multiple: true, copyToCacheDirectory: true });
     } catch (e) {
-      // The picker rejects with PickerCancelledException when the user backs
-      // out — treat that as a no-op rather than surfacing an error.
       const message = e instanceof Error ? e.message : String(e);
       if (/cancel/i.test(message)) return;
       Alert.alert(t('email_composer.attach', 'Attach'), message);
       return;
     }
-    if (!picked) return;
-    const type = picked.type || 'application/octet-stream';
-    const name = picked.name || `attachment-${Date.now()}`;
-    const entry = addUploadEntry({
-      name,
-      type,
-      size: picked.size ?? 0,
-      uri: picked.uri,
-      inline: false,
-    });
-    void startUpload(entry);
+    if (result.canceled) return;
+    for (const picked of result.assets) {
+      addFileAsset({
+        name: picked.name || `attachment-${Date.now()}`,
+        type: picked.mimeType || 'application/octet-stream',
+        size: picked.size ?? 0,
+        uri: picked.uri,
+      });
+    }
   };
 
-  const pickAttachment = () => {
-    Alert.alert(
-      t('email_composer.attach', 'Attach'),
-      undefined,
-      [
-        {
-          text: t('email_composer.attach_photos', 'Photos & Videos'),
-          onPress: () => { void pickPhotoAttachments(); },
-        },
-        {
-          text: t('email_composer.attach_files', 'Files'),
-          onPress: () => { void pickFileAttachment(); },
-        },
-        { text: t('email_composer.cancel', 'Cancel'), style: 'cancel' },
-      ],
-    );
+  const [attachMenuOpen, setAttachMenuOpen] = React.useState(false);
+  const attachOptions: SheetOption[] = [
+    { label: t('email_composer.attach_photos', 'Photos & Videos'), onPress: () => { void pickPhotoAttachments(); } },
+    { label: t('email_composer.attach_camera', 'Camera'), onPress: () => { void takePhotoAttachment(); } },
+    { label: t('email_composer.attach_files', 'Files'), onPress: () => { void pickFileAttachments(); } },
+  ];
+
+  const insertInlineImages = async (assets: Array<{ uri: string; mimeType?: string | null; fileName?: string | null; fileSize?: number | null }>) => {
+    for (const asset of assets) {
+      const mime = asset.mimeType ?? 'image/jpeg';
+      const fallbackName = asset.fileName || `image-${Date.now()}.${mime.split('/')[1] ?? 'jpg'}`;
+      if (!checkAttachmentSize(asset.fileSize ?? 0, true)) continue;
+      const cid = genCid();
+      // Read the picked image as a data URL so it shows up immediately in the
+      // editor. At send time the data URL is rewritten to `cid:<id>` and the
+      // matching inline part is added via the registry.
+      const dataUrl = await readUriAsDataUrl(asset.uri, mime);
+      if (!dataUrl) {
+        Alert.alert(t('email_composer.attach', 'Attach'), t('email_composer.image_load_failed', 'Could not load image'));
+        continue;
+      }
+      editorRef.current?.insertImage(dataUrl, cid, fallbackName);
+      const entry = addUploadEntry({
+        name: fallbackName,
+        type: mime,
+        size: asset.fileSize ?? 0,
+        uri: asset.uri,
+        inline: true,
+        cid,
+      });
+      void startUpload(entry);
+    }
   };
 
   const insertInlineImage = async () => {
@@ -821,40 +1583,40 @@ export default function ComposeScreen({ route, navigation }: Props) {
     if (!perm.granted) {
       Alert.alert(
         t('email_composer.attach', 'Attach'),
-        'Photo library permission is required to attach images.',
+        t('email_composer.permission_photos', 'Photo library permission is required to attach images.'),
       );
       return;
     }
     const result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ['images'],
-      allowsMultipleSelection: false,
+      allowsMultipleSelection: true,
       quality: 0.9,
       exif: false,
     });
-    if (result.canceled || !result.assets[0]) return;
-    const asset = result.assets[0];
-    const mime = asset.mimeType ?? 'image/jpeg';
-    const fallbackName = asset.fileName || `image-${Date.now()}.${mime.split('/')[1] ?? 'jpg'}`;
-    const cid = genCid();
+    if (result.canceled || result.assets.length === 0) return;
+    await insertInlineImages(result.assets);
+  };
 
-    // Read the picked image as a data URL so it shows up immediately in the
-    // editor. At send time the data URL is rewritten to `cid:<id>` and the
-    // matching inline part is added via the registry.
-    const dataUrl = await readUriAsDataUrl(asset.uri, mime);
-    if (!dataUrl) {
-      Alert.alert(t('email_composer.attach', 'Attach'), 'Could not load image');
-      return;
+  // Open a chip: local files straight from their URI, server blobs after a
+  // download into the cache.
+  const previewAttachment = async (entry: AttachmentEntry) => {
+    try {
+      let uri = entry.uri;
+      if (!uri && entry.blobId) {
+        const buf = await jmapClient.fetchBlobArrayBuffer(entry.blobId, entry.name, entry.type);
+        const dir = FileSystem.cacheDirectory ?? '';
+        uri = `${dir}${entry.localId}-${entry.name.replace(/[^\w.-]+/g, '_')}`;
+        await FileSystem.writeAsStringAsync(uri, bytesToBase64(new Uint8Array(buf)), {
+          encoding: FileSystem.EncodingType.Base64,
+        });
+      }
+      if (!uri) return;
+      if (await Sharing.isAvailableAsync()) {
+        await Sharing.shareAsync(uri, { mimeType: entry.type, dialogTitle: entry.name });
+      }
+    } catch (err) {
+      Alert.alert(t('email_composer.attach', 'Attach'), err instanceof Error ? err.message : String(err));
     }
-    editorRef.current?.insertImage(dataUrl, cid, fallbackName);
-    const entry = addUploadEntry({
-      name: fallbackName,
-      type: mime,
-      size: asset.fileSize ?? 0,
-      uri: asset.uri,
-      inline: true,
-      cid,
-    });
-    void startUpload(entry);
   };
 
   // ── Link prompt (Modal) ──────────────────────────────────────────────
@@ -882,18 +1644,146 @@ export default function ComposeScreen({ route, navigation }: Props) {
     openLinkPrompt();
   };
 
+  // ── Colour / table ───────────────────────────────────────────────────
+  const [colorPickerOpen, setColorPickerOpen] = React.useState(false);
+  const [tableMenuOpen, setTableMenuOpen] = React.useState(false);
+  const insertTable = (rows: number, cols: number) => {
+    const cell = '<td style="border:1px solid #cccccc;padding:6px;min-width:40px">&nbsp;</td>';
+    const row = `<tr>${cell.repeat(cols)}</tr>`;
+    editorRef.current?.insertHtml(
+      `<table style="border-collapse:collapse;width:100%"><tbody>${row.repeat(rows)}</tbody></table><p><br></p>`,
+    );
+  };
+  const tableOptions: SheetOption[] = [
+    { label: '2 × 2', onPress: () => insertTable(2, 2) },
+    { label: '3 × 3', onPress: () => insertTable(3, 3) },
+    { label: '4 × 3', onPress: () => insertTable(4, 3) },
+  ];
+
+  // ── Templates ────────────────────────────────────────────────────────
+  const [templateSheetOpen, setTemplateSheetOpen] = React.useState(false);
+  const [placeholderPrompt, setPlaceholderPrompt] = React.useState<{
+    template: EmailTemplate;
+    auto: Record<string, string>;
+    values: Record<string, string>;
+  } | null>(null);
+
+  const insertPlainText = (text: string) => {
+    const sel = plainSelectionRef.current;
+    setPlainBody((prev) => {
+      const start = sel ? Math.min(sel.start, prev.length) : prev.length;
+      const end = sel ? Math.min(sel.end, prev.length) : prev.length;
+      return prev.slice(0, start) + text + prev.slice(end);
+    });
+  };
+
+  const applyTemplate = (template: EmailTemplate, values: Record<string, string>) => {
+    const hasValues = Object.keys(values).length > 0;
+    const filledSubject = hasValues ? substitutePlaceholders(template.subject, values) : template.subject;
+    const filledBody = hasValues ? substitutePlaceholders(template.body, values) : template.body;
+    // An empty template subject must not wipe one the user typed (#540).
+    if (filledSubject && !subject.trim()) setSubject(filledSubject);
+    if (plainTextMode) {
+      insertPlainText(template.isHTML ? htmlToPlainText(filledBody) : filledBody);
+    } else {
+      // Inserted at the caret so it lands after any text already typed and
+      // leaves the signature / quote alone (#539/#540).
+      editorRef.current?.insertHtml(templateBodyToHtml({ body: filledBody, isHTML: template.isHTML }));
+    }
+    const addChips = (field: Field, list?: string[]) => {
+      if (!list?.length) return;
+      const chips = list.map(parseRecipient).map(fromParsed).filter(chipIsValid);
+      if (!chips.length) return;
+      setterFor(field)((prev) => {
+        const existing = new Set(prev.map((r) => r.email.toLowerCase()));
+        return [...prev, ...chips.filter((r) => !existing.has(r.email.toLowerCase()))];
+      });
+      if (field === 'cc') setCcVisible(true);
+      if (field === 'bcc') { setCcVisible(true); setBccVisible(true); }
+    };
+    addChips('to', template.defaultRecipients?.to);
+    addChips('cc', template.defaultRecipients?.cc);
+    addChips('bcc', template.defaultRecipients?.bcc);
+    if (template.identityId && identities.some((i) => i.id === template.identityId)) {
+      setSelectedIdentityId(template.identityId);
+    }
+  };
+
+  const onPickTemplate = (template: EmailTemplate) => {
+    const placeholders = getPlaceholdersFromTemplate(template);
+    const auto = getAutoFilledPlaceholders({
+      senderName: primaryIdentity?.name || undefined,
+      recipientName: finalTo[0]?.name || undefined,
+      locale,
+    });
+    const missing = placeholders.filter((p) => auto[p] === undefined);
+    if (missing.length === 0) {
+      applyTemplate(template, placeholders.length ? auto : {});
+      return;
+    }
+    setPlaceholderPrompt({
+      template,
+      auto,
+      values: Object.fromEntries(missing.map((m) => [m, ''])),
+    });
+  };
+
+  // ── From options (sub-address tag / override) ────────────────────────
+  const [fromOptionsOpen, setFromOptionsOpen] = React.useState(false);
+  const [tagDraft, setTagDraft] = React.useState('');
+  const [overrideEnabled, setOverrideEnabled] = React.useState(false);
+  const [overrideName, setOverrideName] = React.useState('');
+  const [overrideEmail, setOverrideEmail] = React.useState('');
+  const openFromOptions = () => {
+    setTagDraft(subAddressTag);
+    setOverrideEnabled(!!fromOverride);
+    setOverrideName(fromOverride?.name ?? primaryIdentity?.name ?? '');
+    setOverrideEmail(fromOverride?.email ?? primaryIdentity?.email ?? '');
+    setFromOptionsOpen(true);
+  };
+  const tagError = tagDraft ? getTagValidationError(tagDraft) : null;
+  const tagSuggestions = React.useMemo(() => {
+    const domains = finalTo.flatMap((r) => (r.group ? r.group.members.map((m) => m.email) : [r.email]))
+      .map(extractDomain)
+      .filter((d): d is string => !!d);
+    const out: string[] = [];
+    for (const d of domains) for (const s of suggestTagsForDomain(d)) if (!out.includes(s)) out.push(s);
+    return out.slice(0, 5);
+  }, [finalTo]);
+  const applyFromOptions = () => {
+    if (overrideEnabled) {
+      const email = overrideEmail.trim();
+      if (!isValidEmail(email)) {
+        Alert.alert(t('email_composer.from_override.email_label', 'From email address'), t('identities.form.email_invalid', 'Please enter a valid email address'));
+        return;
+      }
+      setFromOverride({ name: overrideName.trim(), email });
+      setSubAddressTag('');
+    } else {
+      setFromOverride(null);
+      if (tagDraft && tagError) return;
+      setSubAddressTag(tagDraft.trim());
+    }
+    setFromOptionsOpen(false);
+  };
+
   // ── Send ─────────────────────────────────────────────────────────────
 
   // Catch the classic "I forgot the attachment" footgun. Only file attachments
   // count - inline images don't satisfy the user's intent of attaching a file.
+  // Only the text the user wrote is scanned, not the quoted original (#570).
   // Returns true if it's safe to proceed, false if the user cancelled.
-  const passesAttachmentReminder = async (html: string): Promise<boolean> => {
+  const passesAttachmentReminder = async (body: string): Promise<boolean> => {
     if (!attachmentReminderEnabled) return true;
     const hasFileAttachment = attachments.some(
       (a) => !a.inline && a.blobId && !a.error,
     );
     if (hasFileAttachment) return true;
-    const haystack = `${subject}\n${htmlToPlainText(html)}`.toLowerCase();
+    const authored = extractUserAuthoredText(body, {
+      plainTextMode,
+      forwardedSeparator: quoteLabels.forwardedSeparator,
+    });
+    const haystack = `${subject}\n${authored}`.toLowerCase();
     const matchedKeyword = attachmentReminderKeywords.find((kw) => {
       const k = kw.trim().toLowerCase();
       if (!k) return false;
@@ -907,7 +1797,8 @@ export default function ComposeScreen({ route, navigation }: Props) {
         t(
           'email_composer.attachment_reminder_body',
           'Your message mentions "{keyword}" but no file is attached. Send anyway?',
-        ).replace('{keyword}', matchedKeyword),
+          { keyword: matchedKeyword },
+        ),
         [
           { text: t('email_composer.cancel', 'Cancel'), style: 'cancel', onPress: () => resolve(false) },
           { text: t('email_composer.send', 'Send'), onPress: () => resolve(true) },
@@ -916,6 +1807,25 @@ export default function ComposeScreen({ route, navigation }: Props) {
     });
   };
 
+  // Confirm an empty subject instead of silently blocking Send (#684).
+  const passesEmptySubjectCheck = (): Promise<boolean> => {
+    if (subject.trim() || !emptySubjectWarningEnabled) return Promise.resolve(true);
+    return new Promise<boolean>((resolve) => {
+      Alert.alert(
+        t('email_composer.empty_subject.title', 'Send without a subject?'),
+        t('email_composer.empty_subject.message', 'This message has no subject. Send it anyway?'),
+        [
+          { text: t('email_composer.empty_subject.back', 'Back to editing'), style: 'cancel', onPress: () => resolve(false) },
+          {
+            text: t('email_composer.empty_subject.dont_ask_again', "Don't ask again"),
+            onPress: () => { updateSetting('emptySubjectWarningEnabled', false); resolve(true); },
+          },
+          { text: t('email_composer.empty_subject.send_anyway', 'Send anyway'), onPress: () => resolve(true) },
+        ],
+      );
+    });
+  };
+
   // Translate an absolute "send at" time into the HOLDFOR seconds the server
   // expects, clamping to what it actually supports. Returns null (and alerts)
   // when scheduling isn't possible so the caller can abort.
@@ -960,6 +1870,8 @@ export default function ComposeScreen({ route, navigation }: Props) {
     void performSend(holdFor, date);
   };
 
+  const formatWhen = (date: Date) => formatQuoteDate(date.toISOString(), timeFormat, locale);
+
   const schedulePresets = React.useMemo(() => {
     const now = new Date();
     const inHours = (h: number) => new Date(now.getTime() + h * 3600 * 1000);
@@ -969,8 +1881,9 @@ export default function ComposeScreen({ route, navigation }: Props) {
     return [
       { label: t('email_composer.schedule_in_1h', 'In 1 hour'), date: inHours(1) },
       { label: t('email_composer.schedule_in_3h', 'In 3 hours'), date: inHours(3) },
-      { label: t('email_composer.schedule_tomorrow', 'Tomorrow, 8:00 AM'), date: tomorrowMorning },
+      { label: t('email_composer.schedule_tomorrow_morning', 'Tomorrow morning'), date: tomorrowMorning },
     ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [t, scheduleSheetOpen]);
 
   const startCustomPicker = () => {
@@ -1005,10 +1918,9 @@ export default function ComposeScreen({ route, navigation }: Props) {
     }
   };
 
-  // Synchronous re-entry guard: `sending` state only flips after two awaits
-  // below, so two quick taps could both pass `canSend` and submit twice.
-  const sendingRef = React.useRef(false);
-
+  // Synchronous re-entry guard: `sending` state only flips after a few
+  // awaits below, so two quick taps could both pass `canSend` and submit
+  // twice. The same flag pauses the autosave while a send is in flight.
   const performSend = async (holdForSeconds?: number, scheduledAt?: Date) => {
     if (!canSend || !primaryIdentity || !sentMailbox) return;
     if (sendingRef.current) return;
@@ -1028,97 +1940,48 @@ export default function ComposeScreen({ route, navigation }: Props) {
     // here once shipped replies with the typed text silently missing when the
     // page script had died (issue #9). If the editor doesn't answer we abort
     // loudly rather than send possibly-stale content.
-    let liveBodyHtml: string;
-    try {
-      liveBodyHtml = (await editorRef.current?.getHtml()) ?? bodyHtml;
-    } catch {
-      Alert.alert(
-        t('email_composer.send_failed', 'Send failed'),
-        t(
-          'email_composer.editor_unavailable',
-          'Could not read the message content. Copy your text, then close and reopen the composer.',
-        ),
-      );
-      return;
+    let liveBodyHtml = bodyHtml;
+    if (!plainTextMode) {
+      try {
+        liveBodyHtml = (await editorRef.current?.getHtml()) ?? bodyHtml;
+      } catch {
+        Alert.alert(
+          t('email_composer.send_failed', 'Send failed'),
+          t(
+            'email_composer.editor_unavailable',
+            'Could not read the message content. Copy your text, then close and reopen the composer.',
+          ),
+        );
+        return;
+      }
+      if (liveBodyHtml !== bodyHtml) setBodyHtml(liveBodyHtml);
+    }
+
+    if (!(await passesEmptySubjectCheck())) return;
+    if (!(await passesAttachmentReminder(plainTextMode ? plainBody : liveBodyHtml))) return;
+
+    // Autosave must not race the send: cancel a scheduled save and let an
+    // in-flight one finish so its version can be destroyed after the send.
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    if (inflightSaveRef.current) {
+      try { await inflightSaveRef.current; } catch { /* stale version stays; cleaned up below */ }
     }
-    if (liveBodyHtml !== bodyHtml) setBodyHtml(liveBodyHtml);
 
-    if (!(await passesAttachmentReminder(liveBodyHtml))) return;
     setSending(true);
     try {
-      const from: EmailAddress[] = [{ name: primaryIdentity.name, email: primaryIdentity.email }];
-
-      const { html: rewrittenHtml, usedCids } = rewriteInlineImages(liveBodyHtml);
-      // Belt-and-suspenders sanitization: the editor uses execCommand which
-      // can preserve pasted <script>/<style>/etc. Strip them before sending.
-      const safeHtml = stripDangerousTags(rewrittenHtml);
-      const finalHtml = `<div>${safeHtml}</div>`;
-      const finalText = htmlToPlainText(safeHtml);
-
-      const inlineFromBody = usedCids
-        .map((cid) => inlineRegistryRef.current.get(cid))
-        .filter((e): e is AttachmentEntry => !!e && !!e.blobId && !e.error)
-        .map<OutgoingAttachment>((e) => ({
-          blobId: e.blobId!,
-          type: e.type,
-          name: e.name,
-          size: e.size,
-          disposition: 'inline',
-          cid: e.cid,
-        }));
-
-      const fileAttachments = attachments
-        .filter((a) => !a.inline && a.blobId && !a.error)
-        .map<OutgoingAttachment>((a) => ({
-          blobId: a.blobId!,
-          type: a.type,
-          name: a.name,
-          size: a.size,
-          disposition: 'attachment',
-        }));
-
-      const outgoing = [...inlineFromBody, ...fileAttachments];
-
-      // RFC 5322 §3.6.4: only replies continue the thread; a forward starts
-      // a new one. The original's Message-ID (never its JMAP id) seeds
-      // In-Reply-To, and References accumulates the chain (#234).
-      const threading = replyTo && mode !== 'forward'
-        ? computeReplyThreadingHeaders({ messageId: replyTo.messageId, references: replyTo.references })
-        : draft && (draft.inReplyTo?.length || draft.references?.length)
-          ? { inReplyTo: draft.inReplyTo ?? [], references: draft.references ?? draft.inReplyTo ?? [] }
-          : null;
-
-      const identityBcc = (primaryIdentity.bcc ?? []).filter((r) => !!r.email);
-      const bccAll = [
-        ...bccRecipients.map((r) => ({ name: r.name || undefined, email: r.email })),
-        ...identityBcc,
-      ];
-
+      const outgoing = buildOutgoing(primaryIdentity, liveBodyHtml, { forDraft: false });
       const result = await sendEmail(
-        {
-          from,
-          to: finalTo.map((r) => ({ name: r.name || undefined, email: r.email })),
-          cc: finalCc.length
-            ? finalCc.map((r) => ({ name: r.name || undefined, email: r.email }))
-            : undefined,
-          bcc: bccAll.length ? bccAll : undefined,
-          // The identity's Reply-To rides along on every message sent with it.
-          replyTo: primaryIdentity.replyTo?.length ? primaryIdentity.replyTo : undefined,
-          subject,
-          // Plain-text mode: skip the HTML part entirely so receiving clients
-          // render the text/plain alternative without any formatting.
-          htmlBody: plainTextMode ? undefined : finalHtml,
-          textBody: finalText,
-          attachments: outgoing.length ? outgoing : undefined,
-          inReplyTo: threading?.inReplyTo,
-          references: threading?.references,
-          messageId: draft?.messageId?.[0],
-        },
+        outgoing,
         primaryIdentity.id,
         sentMailbox.id,
         holdForSeconds,
-        { draftsMailboxId: draftsMailbox?.id, draftId: draft?.id },
+        { draftsMailboxId: draftsMailbox?.id, draftId: draftIdRef.current ?? undefined },
       );
+      draftIdRef.current = null;
+      lastSavedRef.current = null;
       if (result.filingWarning) {
         console.warn('[compose] post-send filing warning:', result.filingWarning);
       }
@@ -1131,19 +1994,39 @@ export default function ComposeScreen({ route, navigation }: Props) {
           replyTo.jmapAccountId,
         ).catch(() => undefined);
       }
-      // Confirm an explicit "send later" so the user knows it didn't go out
-      // now. The brief undo-send delay stays silent — it's meant to be
-      // invisible unless the user cancels from the Scheduled view.
+      // People you reply to are people you trust: allow their remote content
+      // from now on (webmail 1.5.x).
+      if (isReplyLike && mode !== 'forward') {
+        const settings = useSettingsStore.getState();
+        const contacts = useContactsStore.getState();
+        for (const r of [...outgoing.to, ...(outgoing.cc ?? [])]) {
+          settings.addTrustedSender(r.email);
+          if (trustedSendersAddressBook) {
+            contacts.addToTrustedSendersBook(r.name ? `${r.name} <${r.email}>` : r.email).catch(() => undefined);
+          }
+        }
+      }
       if (scheduledAt && result.scheduled) {
+        // Confirm an explicit "send later" so the user knows it didn't go out now.
         const when = result.sendAt ? new Date(result.sendAt) : scheduledAt;
         Alert.alert(
           t('email_composer.scheduled_title', 'Scheduled'),
-          t('email_composer.scheduled_body', 'Your message will be sent at {time}.').replace(
-            '{time}',
-            when.toLocaleString(),
-          ),
+          t('email_composer.scheduled_body', 'Your message will be sent at {time}.', { time: formatWhen(when) }),
         );
+      } else if (holdForSeconds && result.scheduled && result.emailSubmissionId && result.emailId) {
+        // Undo-send window: the mail list's snackbar offers Undo / Send now.
+        useSendUndoStore.getState().setPending({
+          emailSubmissionId: result.emailSubmissionId,
+          emailId: result.emailId,
+          identityId: primaryIdentity.id,
+          from: outgoing.from,
+          to: [...outgoing.to, ...(outgoing.cc ?? []), ...(outgoing.bcc ?? [])],
+          sendAt: result.sendAt,
+          delaySeconds: holdForSeconds,
+          createdAt: Date.now(),
+        });
       }
+      allowLeaveRef.current = true;
       navigation.goBack();
     } catch (e) {
       if (e instanceof RequestTimeoutError) {
@@ -1173,18 +2056,110 @@ export default function ComposeScreen({ route, navigation }: Props) {
     : replyTo ? 'email_composer.reply'
     : 'email_composer.new_message';
 
+  const fromDisplay = React.useMemo(() => {
+    if (!primaryIdentity) return identityError ? t('email_composer.identity_unavailable', 'Identity unavailable') : t('common.loading', 'Loading...');
+    const { from } = senderAddress(primaryIdentity);
+    return from.name ? `${from.name} <${from.email}>` : from.email;
+  }, [primaryIdentity, identityError, senderAddress, t]);
+
+  const draftStatusText =
+    savingDraft || draftStatus === 'saving' ? t('email_composer.saving', 'Saving...')
+    : draftStatus === 'saved' ? t('email_composer.draft_saved', 'Draft saved')
+    : draftStatus === 'failed' ? t('email_composer.save_failed', 'Failed to save')
+    : '';
+
+  const renderRecipientField = (field: Field, label: string, placeholder: string, zIndex: number) => {
+    const list = field === 'to' ? toRecipients : field === 'cc' ? ccRecipients : bccRecipients;
+    const input = inputFor(field);
+    const setInput = inputSetterFor(field);
+    const invalidInput = typedRecipients[field].invalid.length > 0 && !typedRecipients[field].valid.length && input.trim().length > 0 && activeField !== field;
+    return (
+      <View style={[styles.fieldRow, { zIndex }]}>
+        <Text style={styles.fieldLabel}>{label}</Text>
+        <View style={styles.recipientField}>
+          {list.map((r, i) => (
+            <RecipientChip
+              key={`${r.email}-${i}`}
+              recipient={r}
+              invalid={!chipIsValid(r)}
+              onRemove={() => removeChip(field, i)}
+              onLongPress={() => setChipMenu({ field, index: i })}
+            />
+          ))}
+          <TextInput
+            style={[styles.recipientInput, invalidInput && styles.recipientInputInvalid]}
+            placeholder={placeholder}
+            placeholderTextColor={c.textMuted}
+            value={input}
+            onChangeText={(text) => {
+              // A separator ends the entry: commit immediately so a pasted
+              // list turns into chips as it lands.
+              setInput(text);
+              if (/[,;\n]$/.test(text) && text.trim().length > 1) {
+                const { valid, invalid } = splitPastedRecipients(text, Array.from(alreadySelected));
+                if (valid.length) {
+                  setterFor(field)((prev) => [...prev, ...valid.map(fromParsed)]);
+                  setInput(invalid.join(' '));
+                }
+              }
+            }}
+            onFocus={() => setActiveField(field)}
+            onBlur={() => {
+              setTimeout(() => {
+                if (!isPickingSuggestion.current) {
+                  addTyped(field);
+                }
+                setActiveField((f) => (f === field ? null : f));
+                isPickingSuggestion.current = false;
+              }, 200);
+            }}
+            onSubmitEditing={() => addTyped(field)}
+            blurOnSubmit={false}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+        </View>
+        {activeField === field && suggestions.length > 0 && (
+          <SuggestionList
+            suggestions={suggestions}
+            onPick={pickSuggestion}
+            onPressIn={() => {
+              isPickingSuggestion.current = true;
+            }}
+          />
+        )}
+        {field === 'to' && !ccVisible && (
+          <Pressable onPress={() => setCcVisible(true)} style={styles.ccToggle}>
+            <Text style={styles.ccToggleText}>{t('email_composer.cc', 'Cc')}</Text>
+          </Pressable>
+        )}
+        {field === 'cc' && !bccVisible && (
+          <Pressable onPress={() => setBccVisible(true)} style={styles.ccToggle}>
+            <Text style={styles.ccToggleText}>{t('email_composer.bcc', 'Bcc')}</Text>
+          </Pressable>
+        )}
+      </View>
+    );
+  };
+
   return (
     <SafeAreaView style={styles.container} edges={['top']}>
       <View style={styles.header}>
-        <Pressable onPress={onClose} style={styles.headerBtn}>
-          <X size={22} color={c.text} />
+        <Pressable onPress={onClose} style={styles.headerBtn} disabled={savingDraft}>
+          {savingDraft ? <ActivityIndicator size="small" color={c.text} /> : <X size={22} color={c.text} />}
         </Pressable>
-        <Text style={styles.headerTitle}>
-          {t(titleKey, mode === 'forward' ? 'Forward' : mode === 'replyAll' ? 'Reply All' : replyTo ? 'Reply' : 'New Message')}
-        </Text>
+        <View style={styles.headerTitleWrap}>
+          <Text style={styles.headerTitle} numberOfLines={1}>
+            {t(titleKey, mode === 'forward' ? 'Forward' : mode === 'replyAll' ? 'Reply All' : replyTo ? 'Reply' : 'New Message')}
+          </Text>
+          {!!draftStatusText && (
+            <Text style={styles.headerSubtitle} numberOfLines={1}>{draftStatusText}</Text>
+          )}
+        </View>
         <View style={styles.headerRight}>
           <Pressable
-            onPress={() => { void pickAttachment(); }}
+            onPress={() => setAttachMenuOpen(true)}
             style={styles.headerBtn}
             hitSlop={8}
           >
@@ -1230,108 +2205,25 @@ export default function ComposeScreen({ route, navigation }: Props) {
             <Text style={styles.fieldLabel}>{t('email_composer.from', 'From')}</Text>
             <Pressable
               onPress={openIdentityPicker}
-              disabled={identities.length <= 1}
+              onLongPress={openFromOptions}
+              disabled={identities.length <= 1 && !primaryIdentity}
               style={styles.fieldContent}
             >
-              <Text style={styles.fromText} numberOfLines={1}>
-                {primaryIdentity?.email ?? (identityError ? 'identity unavailable' : 'Loading...')}
+              <Text style={[styles.fromText, !!fromOverride && styles.fromTextOverride]} numberOfLines={1}>
+                {fromDisplay}
               </Text>
-              <ChevronDown size={14} color={c.textMuted} />
+              {identities.length > 1 && <ChevronDown size={14} color={c.textMuted} />}
             </Pressable>
-          </View>
-
-          <View style={[styles.fieldRow, { zIndex: 5 }]}>
-            <Text style={styles.fieldLabel}>{t('email_composer.to', 'To')}</Text>
-            <View style={styles.recipientField}>
-              {toRecipients.map((r, i) => (
-                <RecipientChip
-                  key={i}
-                  recipient={r}
-                  onRemove={() => setToRecipients((prev) => prev.filter((_, idx) => idx !== i))}
-                />
-              ))}
-              <TextInput
-                style={styles.recipientInput}
-                placeholder={t('email_composer.to_placeholder', 'Recipient email addresses')}
-                placeholderTextColor={c.textMuted}
-                value={toInput}
-                onChangeText={setToInput}
-                onFocus={() => setActiveField('to')}
-                onBlur={() => {
-                  setTimeout(() => {
-                    if (!isPickingSuggestion.current) {
-                      addTyped();
-                    }
-                    setActiveField((f) => (f === 'to' ? null : f));
-                    isPickingSuggestion.current = false;
-                  }, 200);
-                }}
-                onSubmitEditing={addTyped}
-                keyboardType="email-address"
-                autoCapitalize="none"
-                autoCorrect={false}
-              />
-            </View>
-            {activeField === 'to' && suggestions.length > 0 && (
-              <SuggestionList
-                suggestions={suggestions}
-                onPick={pickSuggestion}
-                onPressIn={() => {
-                  isPickingSuggestion.current = true;
-                }}
-              />
-            )}
-            {!ccVisible && (
-              <Pressable onPress={() => setCcVisible(true)} style={styles.ccToggle}>
-                <Text style={styles.ccToggleText}>{t('email_composer.cc', 'Cc')}</Text>
+            {!!primaryIdentity && (
+              <Pressable onPress={openFromOptions} hitSlop={8} style={styles.fromOptionsBtn}>
+                <Tag size={16} color={subAddressTag || fromOverride ? c.primary : c.textMuted} />
               </Pressable>
             )}
           </View>
 
-          {ccVisible && (
-            <View style={[styles.fieldRow, { zIndex: 4 }]}>
-              <Text style={styles.fieldLabel}>{t('email_composer.cc', 'Cc')}</Text>
-              <View style={styles.recipientField}>
-                {ccRecipients.map((r, i) => (
-                  <RecipientChip
-                    key={i}
-                    recipient={r}
-                    onRemove={() => setCcRecipients((prev) => prev.filter((_, idx) => idx !== i))}
-                  />
-                ))}
-                <TextInput
-                  style={styles.recipientInput}
-                  placeholder={t('email_composer.cc_placeholder', 'Cc recipients')}
-                  placeholderTextColor={c.textMuted}
-                  value={ccInput}
-                  onChangeText={setCcInput}
-                  onFocus={() => setActiveField('cc')}
-                  onBlur={() => {
-                    setTimeout(() => {
-                      if (!isPickingSuggestion.current) {
-                        addTyped();
-                      }
-                      setActiveField((f) => (f === 'cc' ? null : f));
-                      isPickingSuggestion.current = false;
-                    }, 200);
-                  }}
-                  onSubmitEditing={addTyped}
-                  keyboardType="email-address"
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                />
-              </View>
-              {activeField === 'cc' && suggestions.length > 0 && (
-                <SuggestionList
-                  suggestions={suggestions}
-                  onPick={pickSuggestion}
-                  onPressIn={() => {
-                    isPickingSuggestion.current = true;
-                  }}
-                />
-              )}
-            </View>
-          )}
+          {renderRecipientField('to', t('email_composer.to', 'To'), t('email_composer.to_placeholder', 'Recipient email addresses'), 6)}
+          {ccVisible && renderRecipientField('cc', t('email_composer.cc', 'Cc'), t('email_composer.cc_placeholder', 'Cc recipients'), 5)}
+          {bccVisible && renderRecipientField('bcc', t('email_composer.bcc', 'Bcc'), t('email_composer.bcc_placeholder', 'Bcc recipients'), 4)}
 
           <View style={styles.fieldRow}>
             <Text style={styles.fieldLabel}>{t('email_composer.subject', 'Subject')}</Text>
@@ -1351,18 +2243,35 @@ export default function ComposeScreen({ route, navigation }: Props) {
                   key={a.localId}
                   attachment={a}
                   onRemove={() => removeAttachment(a.localId)}
+                  onPress={() => { void previewAttachment(a); }}
+                  uploadingLabel={t('email_composer.uploading', 'Uploading...')}
+                  cancelLabel={t('email_composer.upload_cancel', 'Cancel upload')}
                 />
               ))}
             </View>
           )}
 
-          <RichTextEditor
-            ref={editorRef}
-            initialHtml={initialBodyHtml}
-            placeholder={t('email_composer.body_placeholder', 'Write your message...')}
-            onChange={setBodyHtml}
-            onSelectionChange={setSelState}
-          />
+          {plainTextMode ? (
+            <TextInput
+              style={styles.plainEditor}
+              multiline
+              value={plainBody}
+              onChangeText={setPlainBody}
+              onSelectionChange={(e) => { plainSelectionRef.current = e.nativeEvent.selection; }}
+              placeholder={t('email_composer.body_placeholder', 'Write your message...')}
+              placeholderTextColor={c.textMuted}
+              textAlignVertical="top"
+              autoCorrect
+            />
+          ) : (
+            <RichTextEditor
+              ref={editorRef}
+              initialHtml={initialBodyHtml}
+              placeholder={t('email_composer.body_placeholder', 'Write your message...')}
+              onChange={setBodyHtml}
+              onSelectionChange={setSelState}
+            />
+          )}
         </ScrollView>
 
         <ScrollView
@@ -1372,57 +2281,72 @@ export default function ComposeScreen({ route, navigation }: Props) {
           contentContainerStyle={styles.formatActions}
           keyboardShouldPersistTaps="always"
         >
-          <ToolbarButton active={selState.bold} onPress={() => editorRef.current?.exec('bold')}
-            icon={<Bold size={18} color={selState.bold ? c.primary : c.textSecondary} />} />
-          <ToolbarButton active={selState.italic} onPress={() => editorRef.current?.exec('italic')}
-            icon={<Italic size={18} color={selState.italic ? c.primary : c.textSecondary} />} />
-          <ToolbarButton active={selState.underline} onPress={() => editorRef.current?.exec('underline')}
-            icon={<Underline size={18} color={selState.underline ? c.primary : c.textSecondary} />} />
-          <ToolbarButton active={selState.strikeThrough} onPress={() => editorRef.current?.exec('strikeThrough')}
-            icon={<Strikethrough size={18} color={selState.strikeThrough ? c.primary : c.textSecondary} />} />
+          <ToolbarButton onPress={() => setTemplateSheetOpen(true)}
+            icon={<LayoutTemplate size={18} color={c.textSecondary} />} />
+          <ToolbarButton active={requestReadReceipt} onPress={() => setRequestReadReceipt((v) => !v)}
+            icon={<MailCheck size={18} color={requestReadReceipt ? c.primary : c.textSecondary} />} />
 
-          <View style={styles.formatSep} />
+          {!plainTextMode && (
+            <>
+              <View style={styles.formatSep} />
 
-          <ToolbarButton active={selState.h1} onPress={() => editorRef.current?.exec('formatBlock:H1')}
-            icon={<Heading1 size={18} color={selState.h1 ? c.primary : c.textSecondary} />} />
-          <ToolbarButton active={selState.h2} onPress={() => editorRef.current?.exec('formatBlock:H2')}
-            icon={<Heading2 size={18} color={selState.h2 ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.bold} onPress={() => editorRef.current?.exec('bold')}
+                icon={<Bold size={18} color={selState.bold ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.italic} onPress={() => editorRef.current?.exec('italic')}
+                icon={<Italic size={18} color={selState.italic ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.underline} onPress={() => editorRef.current?.exec('underline')}
+                icon={<Underline size={18} color={selState.underline ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.strikeThrough} onPress={() => editorRef.current?.exec('strikeThrough')}
+                icon={<Strikethrough size={18} color={selState.strikeThrough ? c.primary : c.textSecondary} />} />
+              <ToolbarButton onPress={() => setColorPickerOpen(true)}
+                icon={<Palette size={18} color={c.textSecondary} />} />
 
-          <View style={styles.formatSep} />
+              <View style={styles.formatSep} />
 
-          <ToolbarButton active={selState.ul} onPress={() => editorRef.current?.exec('insertUnorderedList')}
-            icon={<List size={18} color={selState.ul ? c.primary : c.textSecondary} />} />
-          <ToolbarButton active={selState.ol} onPress={() => editorRef.current?.exec('insertOrderedList')}
-            icon={<ListOrdered size={18} color={selState.ol ? c.primary : c.textSecondary} />} />
-          <ToolbarButton active={selState.blockquote} onPress={() => editorRef.current?.exec('formatBlock:BLOCKQUOTE')}
-            icon={<Quote size={18} color={selState.blockquote ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.h1} onPress={() => editorRef.current?.exec('formatBlock:H1')}
+                icon={<Heading1 size={18} color={selState.h1 ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.h2} onPress={() => editorRef.current?.exec('formatBlock:H2')}
+                icon={<Heading2 size={18} color={selState.h2 ? c.primary : c.textSecondary} />} />
 
-          <View style={styles.formatSep} />
+              <View style={styles.formatSep} />
 
-          <ToolbarButton active={selState.alignLeft} onPress={() => editorRef.current?.exec('justifyLeft')}
-            icon={<AlignLeft size={18} color={selState.alignLeft ? c.primary : c.textSecondary} />} />
-          <ToolbarButton active={selState.alignCenter} onPress={() => editorRef.current?.exec('justifyCenter')}
-            icon={<AlignCenter size={18} color={selState.alignCenter ? c.primary : c.textSecondary} />} />
-          <ToolbarButton active={selState.alignRight} onPress={() => editorRef.current?.exec('justifyRight')}
-            icon={<AlignRight size={18} color={selState.alignRight ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.ul} onPress={() => editorRef.current?.exec('insertUnorderedList')}
+                icon={<List size={18} color={selState.ul ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.ol} onPress={() => editorRef.current?.exec('insertOrderedList')}
+                icon={<ListOrdered size={18} color={selState.ol ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.blockquote} onPress={() => editorRef.current?.exec('formatBlock:BLOCKQUOTE')}
+                icon={<Quote size={18} color={selState.blockquote ? c.primary : c.textSecondary} />} />
+              <ToolbarButton onPress={() => setTableMenuOpen(true)}
+                icon={<Table size={18} color={c.textSecondary} />} />
 
-          <View style={styles.formatSep} />
+              <View style={styles.formatSep} />
 
-          <ToolbarButton active={selState.link} onPress={onLinkPress}
-            icon={selState.link
-              ? <Link2Off size={18} color={c.primary} />
-              : <Link2 size={18} color={c.textSecondary} />} />
-          <ToolbarButton onPress={() => { void insertInlineImage(); }}
-            icon={<ImageIcon size={18} color={c.textSecondary} />} />
-          <ToolbarButton onPress={() => editorRef.current?.exec('removeFormat')}
-            icon={<RemoveFormatting size={18} color={c.textSecondary} />} />
+              <ToolbarButton active={selState.alignLeft} onPress={() => editorRef.current?.exec('justifyLeft')}
+                icon={<AlignLeft size={18} color={selState.alignLeft ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.alignCenter} onPress={() => editorRef.current?.exec('justifyCenter')}
+                icon={<AlignCenter size={18} color={selState.alignCenter ? c.primary : c.textSecondary} />} />
+              <ToolbarButton active={selState.alignRight} onPress={() => editorRef.current?.exec('justifyRight')}
+                icon={<AlignRight size={18} color={selState.alignRight ? c.primary : c.textSecondary} />} />
 
-          <View style={styles.formatSep} />
+              <View style={styles.formatSep} />
 
-          <ToolbarButton onPress={() => editorRef.current?.exec('undo')}
-            icon={<Undo2 size={18} color={c.textSecondary} />} />
-          <ToolbarButton onPress={() => editorRef.current?.exec('redo')}
-            icon={<Redo2 size={18} color={c.textSecondary} />} />
+              <ToolbarButton active={selState.link} onPress={onLinkPress}
+                icon={selState.link
+                  ? <Link2Off size={18} color={c.primary} />
+                  : <Link2 size={18} color={c.textSecondary} />} />
+              <ToolbarButton onPress={() => { void insertInlineImage(); }}
+                icon={<ImageIcon size={18} color={c.textSecondary} />} />
+              <ToolbarButton onPress={() => editorRef.current?.exec('removeFormat')}
+                icon={<RemoveFormatting size={18} color={c.textSecondary} />} />
+
+              <View style={styles.formatSep} />
+
+              <ToolbarButton onPress={() => editorRef.current?.exec('undo')}
+                icon={<Undo2 size={18} color={c.textSecondary} />} />
+              <ToolbarButton onPress={() => editorRef.current?.exec('redo')}
+                icon={<Redo2 size={18} color={c.textSecondary} />} />
+            </>
+          )}
         </ScrollView>
       </View>
 
@@ -1476,6 +2400,51 @@ export default function ComposeScreen({ route, navigation }: Props) {
         </View>
       </Modal>
 
+      {/* Text colour palette */}
+      <Modal visible={colorPickerOpen} transparent animationType="fade" onRequestClose={() => setColorPickerOpen(false)}>
+        <Pressable style={styles.modalBackdrop} onPress={() => setColorPickerOpen(false)}>
+          <Pressable style={styles.scheduleCard} onPress={() => {}}>
+            <Text style={styles.modalTitle}>{t('email_composer.toolbar.text_color', 'Text color')}</Text>
+            <View style={styles.swatchRow}>
+              {TEXT_COLORS.map((color) => (
+                <Pressable
+                  key={color}
+                  onPress={() => { setColorPickerOpen(false); editorRef.current?.exec(`foreColor:${color}`); }}
+                  style={[styles.swatch, { backgroundColor: color }]}
+                />
+              ))}
+            </View>
+            <Pressable style={styles.scheduleCancel} onPress={() => setColorPickerOpen(false)}>
+              <Text style={styles.modalCancelText}>{t('email_composer.cancel', 'Cancel')}</Text>
+            </Pressable>
+          </Pressable>
+        </Pressable>
+      </Modal>
+
+      <OptionsSheet
+        visible={tableMenuOpen}
+        title={t('email_composer.toolbar.table', 'Table')}
+        options={tableOptions}
+        onClose={() => setTableMenuOpen(false)}
+        cancelLabel={t('email_composer.cancel', 'Cancel')}
+      />
+
+      <OptionsSheet
+        visible={attachMenuOpen}
+        title={t('email_composer.attach', 'Attach')}
+        options={attachOptions}
+        onClose={() => setAttachMenuOpen(false)}
+        cancelLabel={t('email_composer.cancel', 'Cancel')}
+      />
+
+      <OptionsSheet
+        visible={!!chipMenu}
+        title={chipMenuRecipient ? (chipMenuRecipient.group ? chipMenuRecipient.name : (chipMenuRecipient.name ? `${chipMenuRecipient.name} <${chipMenuRecipient.email}>` : chipMenuRecipient.email)) : undefined}
+        options={chipMenuOptions}
+        onClose={() => setChipMenu(null)}
+        cancelLabel={t('email_composer.cancel', 'Cancel')}
+      />
+
       {/* Schedule send sheet */}
       <Modal
         visible={scheduleSheetOpen}
@@ -1501,11 +2470,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
               >
                 <Clock size={16} color={c.textSecondary} />
                 <Text style={styles.scheduleRowLabel}>{preset.label}</Text>
-                <Text style={styles.scheduleRowTime}>
-                  {preset.date.toLocaleString(undefined, {
-                    weekday: 'short', hour: 'numeric', minute: '2-digit',
-                  })}
-                </Text>
+                <Text style={styles.scheduleRowTime}>{formatWhen(preset.date)}</Text>
               </Pressable>
             ))}
             <Pressable style={styles.scheduleRow} onPress={startCustomPicker}>
@@ -1563,12 +2528,153 @@ export default function ComposeScreen({ route, navigation }: Props) {
         />
       )}
 
+      {/* Template placeholders */}
+      <Modal
+        visible={!!placeholderPrompt}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setPlaceholderPrompt(null)}
+      >
+        <View style={styles.modalBackdrop}>
+          <View style={styles.modalCard}>
+            <Text style={styles.modalTitle}>{t('templates.fill_placeholders', 'Fill Placeholder Values')}</Text>
+            <ScrollView style={{ maxHeight: 320 }} keyboardShouldPersistTaps="handled">
+              {Object.keys(placeholderPrompt?.values ?? {}).map((name) => (
+                <View key={name} style={{ gap: 4, marginBottom: spacing.sm }}>
+                  <Text style={styles.modalLabel}>
+                    {t(`templates.placeholders.${name}`, name.replace(/_/g, ' '))}
+                  </Text>
+                  <TextInput
+                    style={styles.modalInput}
+                    value={placeholderPrompt?.values[name] ?? ''}
+                    onChangeText={(v) => setPlaceholderPrompt((p) => (p ? { ...p, values: { ...p.values, [name]: v } } : p))}
+                    placeholder={t('templates.enter_value', 'Enter a value...')}
+                    placeholderTextColor={c.textMuted}
+                  />
+                </View>
+              ))}
+            </ScrollView>
+            <View style={styles.modalActions}>
+              <Pressable
+                style={styles.modalCancel}
+                onPress={() => {
+                  const p = placeholderPrompt;
+                  setPlaceholderPrompt(null);
+                  if (p) applyTemplate(p.template, {});
+                }}
+              >
+                <Text style={styles.modalCancelText}>{t('templates.insert_raw', 'Insert Raw')}</Text>
+              </Pressable>
+              <Pressable
+                style={styles.modalConfirm}
+                onPress={() => {
+                  const p = placeholderPrompt;
+                  setPlaceholderPrompt(null);
+                  if (!p) return;
+                  const values: Record<string, string> = { ...p.auto };
+                  for (const [k, v] of Object.entries(p.values)) if (v.trim()) values[k] = v.trim();
+                  applyTemplate(p.template, values);
+                }}
+              >
+                <Text style={styles.modalConfirmText}>{t('templates.insert_with_values', 'Insert with Values')}</Text>
+              </Pressable>
+            </View>
+          </View>
+        </View>
+      </Modal>
+
+      {/* From options: sub-address tag / From override */}
+      <Modal visible={fromOptionsOpen} transparent animationType="fade" onRequestClose={() => setFromOptionsOpen(false)}>
+        <View style={styles.modalBackdrop}>
+          <View style={styles.modalCard}>
+            <Text style={styles.modalTitle}>{t('email_composer.from', 'From')}</Text>
+            {!overrideEnabled && (
+              <>
+                <Text style={styles.modalLabel}>{t('identities.sub_address.popover_title', 'Add Sub-Address Tag')}</Text>
+                <TextInput
+                  style={styles.modalInput}
+                  value={tagDraft}
+                  onChangeText={setTagDraft}
+                  placeholder={t('identities.sub_address.tag_input_placeholder', 'Enter tag (e.g., shopping)')}
+                  placeholderTextColor={c.textMuted}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                />
+                {!!tagError && (
+                  <Text style={styles.scheduleWarning}>
+                    {tagError === 'TOO_LONG'
+                      ? t('identities.sub_address.validation.too_long', 'Tag must be {max} characters or less', { max: MAX_TAG_LENGTH })
+                      : t('identities.sub_address.validation.invalid_chars', 'Tag must contain only letters, numbers, and dashes')}
+                  </Text>
+                )}
+                {tagSuggestions.length > 0 && (
+                  <View style={styles.tagRow}>
+                    {tagSuggestions.map((s) => (
+                      <Pressable key={s} onPress={() => setTagDraft(s)} style={styles.tagChip}>
+                        <Text style={styles.tagChipText}>{s}</Text>
+                      </Pressable>
+                    ))}
+                  </View>
+                )}
+                {!!primaryIdentity && (
+                  <Text style={styles.modalLabel} numberOfLines={1}>
+                    {t('identities.sub_address.preview_label', 'Preview:')} {tagDraft && !tagError
+                      ? generateSubAddress(primaryIdentity.email, tagDraft, subAddressDelimiter)
+                      : primaryIdentity.email}
+                  </Text>
+                )}
+              </>
+            )}
+            <View style={styles.switchRow}>
+              <Text style={styles.switchLabel}>{t('email_composer.from_override.toggle_off', 'Override')}</Text>
+              <Switch value={overrideEnabled} onValueChange={setOverrideEnabled} />
+            </View>
+            {overrideEnabled && (
+              <>
+                <Text style={styles.modalLabel}>{t('email_composer.from_override.toggle_tooltip', 'Edit the From name and address freely. Mail is still sent through your identity - only the visible From header changes.')}</Text>
+                <TextInput
+                  style={styles.modalInput}
+                  value={overrideName}
+                  onChangeText={setOverrideName}
+                  placeholder={t('email_composer.from_override.name_placeholder', 'Name')}
+                  placeholderTextColor={c.textMuted}
+                />
+                <TextInput
+                  style={styles.modalInput}
+                  value={overrideEmail}
+                  onChangeText={setOverrideEmail}
+                  placeholder={t('email_composer.from_override.email_placeholder', 'alias@example.com')}
+                  placeholderTextColor={c.textMuted}
+                  keyboardType="email-address"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                />
+              </>
+            )}
+            <View style={styles.modalActions}>
+              <Pressable style={styles.modalCancel} onPress={() => setFromOptionsOpen(false)}>
+                <Text style={styles.modalCancelText}>{t('email_composer.cancel', 'Cancel')}</Text>
+              </Pressable>
+              <Pressable style={styles.modalConfirm} onPress={applyFromOptions}>
+                <Text style={styles.modalConfirmText}>{t('confirm_dialog.confirm', 'Confirm')}</Text>
+              </Pressable>
+            </View>
+          </View>
+        </View>
+      </Modal>
+
+      <TemplateSheet
+        visible={templateSheetOpen}
+        onClose={() => setTemplateSheetOpen(false)}
+        onPick={onPickTemplate}
+      />
+
       <IdentitySheet
         visible={identitySheetOpen}
         onClose={() => setIdentitySheetOpen(false)}
         identities={identities}
         selectedIdentityId={selectedIdentityId}
-        onPick={(identity) => setSelectedIdentityId(identity.id)}
+        onPick={(identity) => { setSelectedIdentityId(identity.id); setFromOverride(null); }}
       />
     </SafeAreaView>
   );
@@ -1597,7 +2703,9 @@ function makeStyles(c: ThemePalette) {
     justifyContent: 'center',
     borderRadius: radius.full,
   },
-  headerTitle: { ...typography.h3, color: c.text, flex: 1 },
+  headerTitleWrap: { flex: 1, minWidth: 0 },
+  headerTitle: { ...typography.h3, color: c.text },
+  headerSubtitle: { ...typography.caption, color: c.textMuted, marginTop: -2 },
   headerRight: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
   sendButtonDisabled: { opacity: 0.5 },
 
@@ -1624,7 +2732,9 @@ function makeStyles(c: ThemePalette) {
     paddingVertical: 10,
     gap: spacing.sm,
   },
-  fromText: { ...typography.body, color: c.text },
+  fromText: { ...typography.body, color: c.text, flexShrink: 1 },
+  fromTextOverride: { fontStyle: 'italic' },
+  fromOptionsBtn: { paddingTop: 10, paddingHorizontal: 4 },
   recipientField: {
     flex: 1,
     flexDirection: 'row',
@@ -1643,7 +2753,9 @@ function makeStyles(c: ThemePalette) {
     backgroundColor: c.surfaceActive,
     maxWidth: 220,
   },
+  chipInvalid: { backgroundColor: c.errorBg, borderWidth: 1, borderColor: c.error },
   chipText: { ...typography.caption, color: c.text, flexShrink: 1 },
+  chipTextInvalid: { color: c.error },
   recipientInput: {
     flexGrow: 1,
     minWidth: 100,
@@ -1651,6 +2763,7 @@ function makeStyles(c: ThemePalette) {
     color: c.text,
     paddingVertical: 6,
   },
+  recipientInputInvalid: { color: c.error },
   suggestionBox: {
     position: 'absolute',
     top: '100%',
@@ -1694,6 +2807,14 @@ function makeStyles(c: ThemePalette) {
     color: c.text,
     paddingVertical: 10,
   },
+  plainEditor: {
+    ...typography.body,
+    color: c.text,
+    minHeight: 220,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    lineHeight: 22,
+  },
 
   attachmentList: {
     paddingHorizontal: spacing.lg,
@@ -1715,6 +2836,8 @@ function makeStyles(c: ThemePalette) {
   attachmentName: { ...typography.bodyMedium, color: c.text },
   attachmentSize: { ...typography.caption, color: c.textMuted },
   attachmentRemove: { padding: 4 },
+  progressTrack: { height: 3, borderRadius: 2, backgroundColor: c.borderLight, marginTop: 4, overflow: 'hidden' },
+  progressFill: { height: 3, backgroundColor: c.primary },
 
   formatBar: {
     borderTopWidth: 1,
@@ -1794,6 +2917,18 @@ function makeStyles(c: ThemePalette) {
     backgroundColor: c.primary,
   },
   modalConfirmText: { ...typography.bodyMedium, color: c.primaryForeground },
+  switchRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  switchLabel: { ...typography.body, color: c.text },
+  tagRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+  tagChip: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 4,
+    borderRadius: radius.full,
+    backgroundColor: c.surfaceActive,
+  },
+  tagChipText: { ...typography.caption, color: c.text },
+  swatchRow: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.sm, paddingVertical: spacing.sm },
+  swatch: { width: 36, height: 36, borderRadius: 18, borderWidth: 1, borderColor: c.border },
   scheduleCard: {
     width: '100%',
     maxWidth: 420,
diff --git a/src/stores/send-undo-store.ts b/src/stores/send-undo-store.ts
new file mode 100644
index 00000000..bcf780ce
--- /dev/null
+++ b/src/stores/send-undo-store.ts
@@ -0,0 +1,83 @@
+// A message sent with the undo-send delay: the submission is held by the
+// server (HOLDFOR) and can still be cancelled or released early. The composer
+// records it here after a delayed send; the UndoSnackbar on the mail list
+// offers "Undo" / "Send now" for the length of the window (webmail
+// `pendingUndoSend`, changelog 1.7.0).
+
+import { create } from 'zustand';
+import { cancelScheduledSend, rescheduleScheduledSend } from '../api/email';
+import type { EmailAddress } from '../api/types';
+
+export interface PendingUndoSend {
+  emailSubmissionId: string;
+  emailId: string;
+  identityId: string;
+  from?: EmailAddress[];
+  to?: EmailAddress[];
+  /** ISO time the server will release the message. */
+  sendAt?: string;
+  /** Milliseconds the message is held (drives the snackbar timer). */
+  delaySeconds: number;
+  createdAt: number;
+}
+
+interface SendUndoState {
+  pending: PendingUndoSend | null;
+  busy: boolean;
+  /** Set after an undo so the composer can be reopened with the draft. */
+  restoredEmailId: string | null;
+  setPending: (entry: PendingUndoSend) => void;
+  clear: () => void;
+  /** Cancel delivery. The message stays in Sent; the caller may re-open it. */
+  undo: () => Promise<boolean>;
+  /** Release the held message immediately. */
+  sendNow: () => Promise<boolean>;
+}
+
+export const useSendUndoStore = create<SendUndoState>((set, get) => ({
+  pending: null,
+  busy: false,
+  restoredEmailId: null,
+
+  setPending: (entry) => set({ pending: entry, restoredEmailId: null }),
+  clear: () => set({ pending: null, busy: false }),
+
+  undo: async () => {
+    const entry = get().pending;
+    if (!entry || get().busy) return false;
+    set({ busy: true });
+    try {
+      await cancelScheduledSend(entry.emailSubmissionId);
+      set({ pending: null, busy: false, restoredEmailId: entry.emailId });
+      return true;
+    } catch (err) {
+      console.warn('[send-undo] cancel failed', err);
+      set({ busy: false });
+      return false;
+    }
+  },
+
+  sendNow: async () => {
+    const entry = get().pending;
+    if (!entry || get().busy) return false;
+    set({ busy: true });
+    try {
+      await rescheduleScheduledSend(
+        {
+          emailSubmissionId: entry.emailSubmissionId,
+          emailId: entry.emailId,
+          identityId: entry.identityId,
+          from: entry.from,
+          to: entry.to,
+        },
+        0,
+      );
+      set({ pending: null, busy: false });
+      return true;
+    } catch (err) {
+      console.warn('[send-undo] send now failed', err);
+      set({ busy: false });
+      return false;
+    }
+  },
+}));