From 38bd77d03c8b1e92581bbc87068f0af690b4455c Mon Sep 17 00:00:00 2001
From: Phillip Carter <pcarter@fastmail.com>
Date: Thu, 23 Jul 2026 15:47:26 -0700
Subject: [PATCH] Big issue address

---
 src/app/(inbox)/email/[id]/page.tsx        |   2 +-
 src/app/(inbox)/thread/[threadId]/page.tsx |   4 +-
 src/app/api/download/route.ts              |   5 +-
 src/app/globals.css                        | 149 +++---
 src/app/layout.tsx                         |  47 +-
 src/components/AttachmentList.tsx          |   8 +-
 src/components/Composer.tsx                |  42 +-
 src/components/EmailBody.tsx               |  27 +-
 src/components/EmailDetailView.tsx         |   6 +-
 src/components/EmailListPanel.tsx          |  12 +-
 src/components/MobileBackButton.tsx        |   8 +-
 src/components/MobileNav.tsx               |  12 +-
 src/components/SenderAvatar.tsx            |  10 +-
 src/components/ThreadView.tsx              |   7 +-
 src/lib/__tests__/compose.test.ts          |   8 +-
 src/lib/__tests__/composeHtml.test.ts      |  55 +-
 src/lib/__tests__/emailHtml.test.ts        | 583 +++++++--------------
 src/lib/__tests__/jmap.test.ts             |   1 +
 src/lib/compose.ts                         |   2 +-
 src/lib/composeHtml.ts                     | 245 ++++-----
 src/lib/emailHtml.ts                       | 435 +++++++--------
 src/lib/emailRenderTheme.ts                |  66 +--
 src/lib/jmap.ts                            |  10 +-
 src/lib/senderAvatar.ts                    |  27 +-
 src/lib/types.ts                           |   3 +
 25 files changed, 761 insertions(+), 1013 deletions(-)

diff --git a/src/app/(inbox)/email/[id]/page.tsx b/src/app/(inbox)/email/[id]/page.tsx
index 132c5c2..a64b381 100644
--- a/src/app/(inbox)/email/[id]/page.tsx
+++ b/src/app/(inbox)/email/[id]/page.tsx
@@ -24,7 +24,7 @@ export default async function EmailPage({ params, searchParams }: Props) {
 
   return (
     <div className="overflow-y-auto h-full bg-stone-50 dark:bg-stone-900">
-      <div className="max-w-3xl mx-auto px-8 py-8">
+      <div className="max-w-4xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
         <MobileBackButton label={backLabel} />
         <EmailDetailView
           email={email}
diff --git a/src/app/(inbox)/thread/[threadId]/page.tsx b/src/app/(inbox)/thread/[threadId]/page.tsx
index 4763c77..683a3f7 100644
--- a/src/app/(inbox)/thread/[threadId]/page.tsx
+++ b/src/app/(inbox)/thread/[threadId]/page.tsx
@@ -32,7 +32,7 @@ export default async function ThreadPage({ params, searchParams }: Props) {
   if (emails.length === 1) {
     return (
       <div className="overflow-y-auto h-full bg-stone-50 dark:bg-stone-900">
-        <div className="max-w-3xl mx-auto px-8 py-8">
+        <div className="max-w-4xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
           <MobileBackButton label={backLabel} />
           <EmailDetailView
             email={emails[0]}
@@ -56,7 +56,7 @@ export default async function ThreadPage({ params, searchParams }: Props) {
 
   return (
     <div className="overflow-y-auto h-full bg-stone-50 dark:bg-stone-900">
-      <div className="max-w-3xl mx-auto px-4 sm:px-8 py-8">
+      <div className="max-w-4xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
         <MobileBackButton label={backLabel} />
         <div className="flex items-start justify-between gap-4 mb-6">
           <div className="min-w-0 flex flex-wrap items-center gap-2">
diff --git a/src/app/api/download/route.ts b/src/app/api/download/route.ts
index 18ea715..88ec303 100644
--- a/src/app/api/download/route.ts
+++ b/src/app/api/download/route.ts
@@ -79,7 +79,10 @@ export async function GET(req: NextRequest) {
     const headers: Record<string, string> = {
       "Content-Type": contentType,
       "Content-Disposition": formatContentDisposition(disposition, name),
-      "Cross-Origin-Resource-Policy": "same-origin",
+      // Sandboxed srcdoc iframes have an opaque origin. Inline images must be
+      // embeddable there even though the authenticated route is same-site.
+      "Cross-Origin-Resource-Policy":
+        disposition === "inline" ? "cross-origin" : "same-origin",
       "X-Content-Type-Options": "nosniff",
     };
     const contentLength = res.headers.get("Content-Length");
diff --git a/src/app/globals.css b/src/app/globals.css
index b31216d..ec732a3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,114 +1,89 @@
 @import "tailwindcss";
 
 @theme inline {
-  /* Share Tech Mono — clean terminal font (not pixel, just monospace) */
-  --font-sans: var(--font-share-tech-mono);
-  --font-mono: var(--font-share-tech-mono);
+  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
 
-  /* "Dark terminal with green accents" palette
-     Primary text = off-white phosphor (near-white with green tint)
-     UI chrome    = green (nav, buttons, indicators, labels)
-     Background   = near-black
+  /* A quiet neutral scale. Existing stone-* utilities intentionally map here
+     so the visual refresh does not require noisy class churn throughout the app. */
+  --color-stone-50:  #f8fafc;
+  --color-stone-100: #f1f5f9;
+  --color-stone-200: #e2e8f0;
+  --color-stone-300: #cbd5e1;
+  --color-stone-400: #94a3b8;
+  --color-stone-500: #64748b;
+  --color-stone-600: #475569;
+  --color-stone-700: #334155;
+  --color-stone-800: #1e293b;
+  --color-stone-900: #0f172a;
+  --color-stone-950: #020617;
 
-     Dark mode text tiers (contrast vs #060e06 bg):
-       stone-100 = #e0ece0  off-white phosphor  (~15:1) — unread senders, body text
-       stone-200 = #a8c8a8  light gray-green    (~11:1) — unread subjects, key values
-       stone-300 = #80b880  medium-bright green  (~9:1) — nav chrome labels
-       stone-400 = #7a8a7a  neutral gray-green   (~6:1) — read senders/subjects, muted
-       stone-500 = #607060  neutral grey-green   (~4:1) — preview text, timestamps
-     Background tiers:
-       stone-800 = #0a1c0a  hover / selection surface
-       stone-900 = #060e06  main dark bg
-       stone-950 = #030704  sidebar bg
-     Note: stone-400/500 are intentionally more neutral (less saturated) than
-     stone-300, so content text reads as "dimmer" while staying readable.      */
-  --color-stone-50:  #f0f5f0;
-  --color-stone-100: #e0ece0;
-  --color-stone-200: #a8c8a8;
-  --color-stone-300: #80b880;
-  --color-stone-400: #7a8a7a;
-  --color-stone-500: #607060;
-  --color-stone-600: #1e3e1e;
-  --color-stone-700: #122a12;
-  --color-stone-800: #0a1c0a;
-  --color-stone-900: #060e06;
-  --color-stone-950: #030704;
+  --color-blue-50:  #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
 
-  /* Phosphor green — accent scale (blue → vivid terminal green)
-     These are the "active" / "interactive" greens: selected rows, button borders,
-     unread dots, focused outlines. Vivid so they stand out against off-white text. */
-  --color-blue-50:  #f0fff4;
-  --color-blue-100: #dcfce7;
-  --color-blue-200: #bbf7d0;
-  --color-blue-300: #4ade80;
-  --color-blue-400: #22c55e;
-  --color-blue-500: #16a34a;
-  --color-blue-600: #15803d;
-  --color-blue-700: #166534;
-  --color-blue-800: #14532d;
-  --color-blue-900: #052e16;
-  --color-blue-950: #022912;
-
-  /* Sharp, blocky corners — no roundness */
-  --radius-sm:  0px;
-  --radius:     0px;
-  --radius-md:  0px;
-  --radius-lg:  0px;
-  --radius-xl:  0px;
-  --radius-2xl: 0px;
-  --radius-3xl: 0px;
+  --radius-sm: 0.25rem;
+  --radius: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.25rem;
+  --radius-3xl: 1.5rem;
 }
 
 :root {
   color-scheme: light dark;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
 }
 
-/* Subtle scanlines — barely visible, just a hint */
-body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 9999;
-  background: repeating-linear-gradient(
-    0deg,
-    transparent,
-    transparent 3px,
-    rgba(0, 0, 0, 0.03) 3px,
-    rgba(0, 0, 0, 0.03) 4px
-  );
+html {
+  overscroll-behavior: none;
 }
 
-body.rich-content-open::after {
-  display: none;
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* Dark mode: subtle phosphor glow on body text */
-@media (prefers-color-scheme: dark) {
-  body {
-    text-shadow: 0 0 8px rgba(180, 220, 180, 0.12);
-  }
-  input, textarea, select, button {
-    text-shadow: none;
-  }
+button,
+a,
+input,
+textarea,
+select {
+  -webkit-tap-highlight-color: transparent;
+}
+
+input,
+textarea {
+  caret-color: #2563eb;
 }
 
-/* Green terminal caret */
-input, textarea {
-  caret-color: #22c55e;
+:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
 }
 
-/* Focused inputs: vivid green accent outline */
-@media (prefers-color-scheme: dark) {
-  input:focus, textarea:focus {
-    outline: 1px solid #22c55e !important;
-    outline-offset: 0 !important;
-    box-shadow: 0 0 0 1px #22c55e, 0 0 6px rgba(34, 197, 94, 0.25) !important;
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
 }
 
 @media print {
   html, body { height: auto !important; overflow: visible !important; }
   body > div, main { height: auto !important; overflow: visible !important; }
-  body::after { display: none; }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e7d270b..076a737 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { Share_Tech_Mono } from "next/font/google";
 import Link from "next/link";
 import { auth, signOut } from "@/auth";
 import LiveUnreadCountBadge from "@/components/LiveUnreadCountBadge";
@@ -9,13 +8,6 @@ import UnreadCountProvider from "@/components/UnreadCountProvider";
 import { getAccountId, getMailboxes, getSession as getJmapSession } from "@/lib/jmap";
 import "./globals.css";
 
-const shareTechMono = Share_Tech_Mono({
-  variable: "--font-share-tech-mono",
-  weight: "400",
-  subsets: ["latin"],
-  display: "swap",
-});
-
 export const metadata: Metadata = {
   title: "Mail",
   description: "Personal email client",
@@ -44,62 +36,59 @@ export default async function RootLayout({
   }
 
   return (
-    <html
-      lang="en"
-      className={`${shareTechMono.variable} h-full`}
-    >
+    <html lang="en" className="h-full">
       <body className="h-full flex flex-col bg-stone-50 dark:bg-stone-900 text-stone-900 dark:text-stone-100 antialiased">
         <UnreadCountProvider initialCount={unreadTotal}>
           {/* Row: desktop sidebar + main content */}
           <div className="flex flex-1 min-h-0 overflow-hidden">
             {/* Sidebar — desktop only */}
-            <nav className="hidden md:flex print:hidden w-44 shrink-0 flex-col bg-stone-100 dark:bg-stone-950 border-r border-stone-300 dark:border-stone-500 px-3 py-5">
-              <span className="text-sm font-bold tracking-widest text-stone-700 dark:text-blue-300 px-2 mb-6">
-                [MAIL]
+            <nav className="hidden md:flex print:hidden w-48 shrink-0 flex-col bg-white dark:bg-stone-950 border-r border-stone-200 dark:border-stone-800 px-3 py-5">
+              <span className="text-base font-semibold tracking-tight text-stone-900 dark:text-stone-100 px-2 mb-6">
+                Mail
               </span>
 
               <div className="flex flex-col gap-1">
                 <Link
                   href="/"
-                  className="flex items-center justify-between gap-2 text-xs tracking-widest uppercase text-stone-500 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 border border-stone-400 dark:border-stone-300 hover:border-stone-700 dark:hover:border-stone-100 px-2 py-1.5 transition-colors"
+                  className="flex items-center justify-between gap-2 rounded-md text-sm text-stone-600 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white hover:bg-stone-100 dark:hover:bg-stone-800 px-2.5 py-2 transition-colors"
                 >
-                  <span>[INBOX]</span>
+                  <span>Inbox</span>
                   <LiveUnreadCountBadge className="shrink-0" />
                 </Link>
                 <Link
                   href="/drafts"
-                  className="flex items-center justify-between gap-2 text-xs tracking-widest uppercase text-stone-500 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 border border-stone-400 dark:border-stone-300 hover:border-stone-700 dark:hover:border-stone-100 px-2 py-1.5 transition-colors"
+                  className="flex items-center justify-between gap-2 rounded-md text-sm text-stone-600 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white hover:bg-stone-100 dark:hover:bg-stone-800 px-2.5 py-2 transition-colors"
                 >
-                  <span>[DRAFTS]</span>
+                  <span>Drafts</span>
                   <UnreadCountBadge count={draftTotal} className="shrink-0" />
                 </Link>
                  <Link
                   href="/sent"
-                  className="text-xs tracking-widest uppercase text-stone-500 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 border border-stone-400 dark:border-stone-300 hover:border-stone-700 dark:hover:border-stone-100 px-2 py-1.5 transition-colors"
+                  className="rounded-md text-sm text-stone-600 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white hover:bg-stone-100 dark:hover:bg-stone-800 px-2.5 py-2 transition-colors"
                 >
-                  [SENT]
+                  Sent
                 </Link>
                 <Link
                   href="/spam"
-                  className="flex items-center justify-between gap-2 text-xs tracking-widest uppercase text-stone-500 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 border border-stone-400 dark:border-stone-300 hover:border-stone-700 dark:hover:border-stone-100 px-2 py-1.5 transition-colors"
+                  className="flex items-center justify-between gap-2 rounded-md text-sm text-stone-600 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white hover:bg-stone-100 dark:hover:bg-stone-800 px-2.5 py-2 transition-colors"
                 >
-                  <span>[SPAM]</span>
+                  <span>Spam</span>
                   <UnreadCountBadge count={spamUnreadTotal} className="shrink-0" />
                 </Link>
                 <Link
                   href="/calendar"
-                  className="text-xs tracking-widest uppercase text-stone-500 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 border border-stone-400 dark:border-stone-300 hover:border-stone-700 dark:hover:border-stone-100 px-2 py-1.5 transition-colors"
+                  className="rounded-md text-sm text-stone-600 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white hover:bg-stone-100 dark:hover:bg-stone-800 px-2.5 py-2 transition-colors"
                 >
-                  [CALENDAR]
+                  Calendar
                 </Link>
               </div>
 
               <div className="mt-auto flex flex-col gap-1">
                 <Link
                   href="/settings"
-                  className="text-xs tracking-widest uppercase text-stone-500 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 border border-stone-400 dark:border-stone-300 hover:border-stone-700 dark:hover:border-stone-100 px-2 py-1.5 transition-colors"
+                  className="rounded-md text-sm text-stone-600 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white hover:bg-stone-100 dark:hover:bg-stone-800 px-2.5 py-2 transition-colors"
                 >
-                  [SETTINGS]
+                  Settings
                 </Link>
                 {session && (
                   <form
@@ -110,9 +99,9 @@ export default async function RootLayout({
                   >
                     <button
                       type="submit"
-                      className="w-full text-left text-xs tracking-widest uppercase text-stone-500 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 border border-stone-400 dark:border-stone-300 hover:border-stone-700 dark:hover:border-stone-100 px-2 py-1.5 transition-colors"
+                      className="w-full text-left rounded-md text-sm text-stone-500 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white hover:bg-stone-100 dark:hover:bg-stone-800 px-2.5 py-2 transition-colors"
                     >
-                      [SIGN OUT]
+                      Sign out
                     </button>
                   </form>
                 )}
diff --git a/src/components/AttachmentList.tsx b/src/components/AttachmentList.tsx
index 89efe92..7ec0275 100644
--- a/src/components/AttachmentList.tsx
+++ b/src/components/AttachmentList.tsx
@@ -109,7 +109,13 @@ export default function AttachmentList({ attachments }: Props) {
   const [previewPdf, setPreviewPdf] = useState<EmailBodyPart | null>(null);
   const [previewSpreadsheet, setPreviewSpreadsheet] = useState<EmailBodyPart | null>(null);
 
-  const visible = attachments.filter((a) => a.type !== "text/calendar" && a.blobId);
+  const visible = attachments.filter(
+    (a) =>
+      a.type !== "text/calendar" &&
+      a.blobId &&
+      !a.cid &&
+      a.disposition?.toLowerCase() !== "inline",
+  );
   if (visible.length === 0) return null;
 
   return (
diff --git a/src/components/Composer.tsx b/src/components/Composer.tsx
index 6693f89..b4c0d80 100644
--- a/src/components/Composer.tsx
+++ b/src/components/Composer.tsx
@@ -4,7 +4,11 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { marked } from "marked";
 import { saveDraftAction, deleteDraftAction } from "@/app/compose/actions";
-import { wrapComposePreviewHtml, wrapEmailHtml } from "@/lib/composeHtml";
+import {
+  markQuotedReplyHtml,
+  wrapComposePreviewHtml,
+  wrapEmailHtml,
+} from "@/lib/composeHtml";
 import { normalizeComposeMarkdown, htmlToPlainText } from "@/lib/compose";
 
 // ---------------------------------------------------------------------------
@@ -287,15 +291,16 @@ export default function Composer({
       const withImages = replacePlaceholders(html, (id) => {
         return inlineImages.find((img) => img.id === id)?.dataUrl ?? "";
       });
-      const body = forwardedHtml
+      const composed = forwardedHtml
         ? withImages + appendForwardedHtml(forwardedHtml)
         : withImages;
+      const body = inReplyToId ? markQuotedReplyHtml(composed) : composed;
       if (!cancelled) setPreview(wrapComposePreviewHtml(body));
     })();
     return () => {
       cancelled = true;
     };
-  }, [markdown, inlineImages, forwardedHtml]);
+  }, [markdown, inlineImages, forwardedHtml, inReplyToId]);
 
   // Auto-save: debounce 2s after any content change
   useEffect(() => {
@@ -478,9 +483,12 @@ export default function Composer({
     try {
       const rawHtml = await marked.parse(normalizeComposeMarkdown(markdown));
       const htmlWithCids = replacePlaceholders(rawHtml, (id) => `cid:${id}@mail`);
-      const composedBody = forwardedHtml
+      const renderedBody = forwardedHtml
         ? htmlWithCids + appendForwardedHtml(forwardedHtml)
         : htmlWithCids;
+      const composedBody = inReplyToId
+        ? markQuotedReplyHtml(renderedBody)
+        : renderedBody;
 
       const splitAddrs = (val: string) =>
         val
@@ -497,9 +505,9 @@ export default function Composer({
           cc: showCc && cc.trim() ? splitAddrs(cc) : undefined,
           bcc: showBcc && bcc.trim() ? splitAddrs(bcc) : undefined,
           subject,
-          textBody: forwardedHtml
-            ? markdown + "\n\n" + htmlToPlainText(forwardedHtml)
-            : markdown,
+          // Drafts stay Markdown, while the text/plain transport is a clean,
+          // readable fallback derived from the rendered representation.
+          textBody: htmlToPlainText(composedBody),
           htmlBody: wrapEmailHtml(composedBody),
           inlineImages: inlineImagesRef.current.map(({ id, blobId, type }) => ({
             id,
@@ -611,7 +619,7 @@ export default function Composer({
   const fieldClass =
     "flex-1 text-sm text-stone-700 dark:text-stone-300 bg-transparent outline-none placeholder:text-stone-300 dark:placeholder:text-stone-600";
   const labelClass = "text-xs text-stone-400 dark:text-stone-500 w-16";
-  const rowClass = "flex items-center px-6 py-2 gap-3";
+  const rowClass = "flex items-center px-4 sm:px-6 py-2 gap-3";
 
   return (
     <div className="flex flex-col h-full bg-white dark:bg-stone-900" onKeyDown={handleComposerKeyDown}>
@@ -696,7 +704,7 @@ export default function Composer({
       </div>
 
       {/* Toolbar */}
-      <div className="flex items-center gap-4 px-6 py-2 border-b border-stone-100 dark:border-stone-800 bg-stone-50 dark:bg-stone-900/50">
+      <div className="flex items-center gap-3 px-4 sm:px-6 py-2 border-b border-stone-100 dark:border-stone-800 bg-stone-50 dark:bg-stone-900/50">
         <span className="text-xs text-stone-400 dark:text-stone-500">Markdown</span>
         {uploading > 0 && (
           <span className="text-xs text-stone-400 dark:text-stone-500">
@@ -730,7 +738,7 @@ export default function Composer({
                 : "text-stone-500 dark:text-stone-400 hover:text-stone-700 dark:hover:text-stone-200"
             }`}
           >
-            Split
+            Preview
           </button>
         </div>
       </div>
@@ -738,10 +746,10 @@ export default function Composer({
       {/* Editor area */}
       <div className="flex flex-1 min-h-0 overflow-hidden">
         <div
-          className={`flex flex-col ${
+          className={`flex-col ${
             showPreview
-              ? "w-1/2 border-r border-stone-200 dark:border-stone-800"
-              : "w-full"
+              ? "hidden md:flex md:w-1/2 md:border-r md:border-stone-200 md:dark:border-stone-800"
+              : "flex w-full"
           }`}
         >
           <textarea
@@ -752,12 +760,12 @@ export default function Composer({
             placeholder={
               "Write your email in Markdown…\n\n**Bold**, *italic*, `code`, lists, links — all supported.\nPaste an image anywhere to embed it."
             }
-            className="flex-1 resize-none px-6 py-4 text-sm text-stone-700 dark:text-stone-300 font-mono leading-relaxed outline-none placeholder:text-stone-300 dark:placeholder:text-stone-600 bg-white dark:bg-stone-900"
+            className="flex-1 resize-none px-4 sm:px-6 py-4 text-sm text-stone-700 dark:text-stone-300 font-mono leading-relaxed outline-none placeholder:text-stone-300 dark:placeholder:text-stone-600 bg-white dark:bg-stone-900"
           />
         </div>
 
         {showPreview && (
-          <div className="w-1/2 overflow-auto bg-white dark:bg-stone-900">
+          <div className="w-full md:w-1/2 overflow-auto bg-white dark:bg-stone-900">
             <iframe
               srcDoc={preview}
               className="w-full h-full border-0"
@@ -770,7 +778,7 @@ export default function Composer({
 
       {/* Attachment pills */}
       {attachments.length > 0 && (
-        <div className="border-t border-stone-100 dark:border-stone-800 px-6 py-2 flex flex-wrap gap-2 bg-white dark:bg-stone-900">
+        <div className="border-t border-stone-100 dark:border-stone-800 px-4 sm:px-6 py-2 flex flex-wrap gap-2 bg-white dark:bg-stone-900">
           {attachments.map((att) => (
             <div
               key={att.id}
@@ -797,7 +805,7 @@ export default function Composer({
       )}
 
       {/* Footer */}
-      <div className="border-t border-stone-200 dark:border-stone-800 px-6 py-3 flex items-center gap-4 bg-white dark:bg-stone-900">
+      <div className="border-t border-stone-200 dark:border-stone-800 px-4 sm:px-6 py-3 flex items-center gap-4 bg-white dark:bg-stone-900">
         <button
           onClick={handleSend}
           disabled={sending || uploading > 0}
diff --git a/src/components/EmailBody.tsx b/src/components/EmailBody.tsx
index d482e2c..e35bbb5 100644
--- a/src/components/EmailBody.tsx
+++ b/src/components/EmailBody.tsx
@@ -3,14 +3,21 @@
 import { useCallback, useEffect, useRef } from "react";
 import useBodyClass from "@/components/useBodyClass";
 import { prepareHtml, prepareTextBody } from "@/lib/emailHtml";
+import type { EmailBodyPart } from "@/lib/types";
 
 interface Props {
   body: string;
   type: "html" | "text";
   stripQuotes?: boolean;
+  embeddedParts?: EmailBodyPart[];
 }
 
-export default function EmailBody({ body, type, stripQuotes }: Props) {
+export default function EmailBody({
+  body,
+  type,
+  stripQuotes,
+  embeddedParts = [],
+}: Props) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const lastDimsRef = useRef({ h: 0, w: 0 });
@@ -41,9 +48,10 @@ export default function EmailBody({ body, type, stripQuotes }: Props) {
       if (e.origin !== "null") return;
       if (e.data?.type !== "iframe-resize") return;
 
-      const naturalH: number = e.data.height;
-      const naturalW: number = e.data.width ?? 0;
-      if (!naturalH || naturalH <= 0) return;
+      const naturalH = Number(e.data.height);
+      const naturalW = Number(e.data.width);
+      if (!Number.isFinite(naturalH) || naturalH <= 0) return;
+      if (!Number.isFinite(naturalW) || naturalW < 0) return;
       if (naturalH === lastDimsRef.current.h && naturalW === lastDimsRef.current.w) return;
       lastDimsRef.current = { h: naturalH, w: naturalW };
 
@@ -55,11 +63,13 @@ export default function EmailBody({ body, type, stripQuotes }: Props) {
         iframe.style.height = naturalH + "px";
         iframe.style.transform = `scale(${scale})`;
         iframe.style.transformOrigin = "top left";
+        iframe.style.willChange = "transform";
         wrapper.style.height = Math.ceil(naturalH * scale) + "px";
       } else {
         iframe.style.width = "100%";
         iframe.style.height = naturalH + "px";
         iframe.style.transform = "";
+        iframe.style.willChange = "";
         wrapper.style.height = "";
       }
     };
@@ -86,16 +96,21 @@ export default function EmailBody({ body, type, stripQuotes }: Props) {
 
   const srcDoc =
     type === "html"
-      ? prepareHtml(body, { stripQuotes })
+      ? prepareHtml(body, { stripQuotes, embeddedParts })
       : prepareTextBody(body, { stripQuotes });
 
   return (
-    <div ref={wrapperRef} className="bg-white dark:bg-stone-900" style={{ minHeight: "200px", overflow: "hidden", position: "relative" }}>
+    <div
+      ref={wrapperRef}
+      className="bg-white"
+      style={{ minHeight: "160px", overflow: "hidden", position: "relative" }}
+    >
       <iframe
         ref={iframeRef}
         srcDoc={srcDoc}
         className="w-full border-0 block"
         sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
+        referrerPolicy="no-referrer"
         title="Email content"
         onLoad={syncIframeLayout}
       />
diff --git a/src/components/EmailDetailView.tsx b/src/components/EmailDetailView.tsx
index d76ef9f..cbd5c72 100644
--- a/src/components/EmailDetailView.tsx
+++ b/src/components/EmailDetailView.tsx
@@ -141,7 +141,11 @@ export default async function EmailDetailView({ email, downloadUrl, accountId }:
 
       {/* Body */}
       {body ? (
-        <EmailBody body={body} type={bodyType} />
+        <EmailBody
+          body={body}
+          type={bodyType}
+          embeddedParts={email.attachments}
+        />
       ) : (
         <p className="text-stone-400 dark:text-stone-500 text-sm">
           No body content.
diff --git a/src/components/EmailListPanel.tsx b/src/components/EmailListPanel.tsx
index 4fa3008..312fc4a 100644
--- a/src/components/EmailListPanel.tsx
+++ b/src/components/EmailListPanel.tsx
@@ -262,7 +262,7 @@ export default function EmailListPanel({
   function checkLongPressMove(e: React.PointerEvent) {
     const dx = e.clientX - longPressPos.current.x;
     const dy = e.clientY - longPressPos.current.y;
-    if (Math.abs(dx) > 8 || Math.abs(dy) > 8) cancelLongPress();
+    if (Math.abs(dx) > 12 || Math.abs(dy) > 12) cancelLongPress();
   }
 
   // -------------------------------------------------------------------------
@@ -722,20 +722,20 @@ export default function EmailListPanel({
               return (
                 <div key={thread.threadId}>
                   {showPinnedDivider && (
-                    <div className="px-4 py-1 text-[10px] tracking-widest text-stone-400 dark:text-stone-400 border-y border-stone-300 dark:border-stone-500">
-                      {"// pinned"}
+                    <div className="px-4 py-1.5 text-[10px] font-medium uppercase tracking-wide text-stone-500 dark:text-stone-400 border-y border-stone-200 dark:border-stone-800 bg-stone-100/70 dark:bg-stone-950">
+                      Pinned
                     </div>
                   )}
                   {showRestDivider && (
-                    <div className="px-4 py-1 text-[10px] tracking-widest text-stone-400 dark:text-stone-400 border-y border-stone-300 dark:border-stone-500">
-                      {"// all mail"}
+                    <div className="px-4 py-1.5 text-[10px] font-medium uppercase tracking-wide text-stone-500 dark:text-stone-400 border-y border-stone-200 dark:border-stone-800 bg-stone-100/70 dark:bg-stone-950">
+                      All mail
                     </div>
                   )}
 
                   {/* Thread row */}
                   <div
                     className={[
-                      "group flex items-center gap-2.5 px-3 py-2.5 border-b border-stone-100 dark:border-stone-700/60 select-none transition-colors",
+                      "group flex items-center gap-2.5 px-3 py-2.5 border-b border-stone-100 dark:border-stone-800 select-none touch-pan-y transition-colors",
                       isChecked
                         ? "bg-blue-50 dark:bg-blue-950/25"
                         : isRouteSelected
diff --git a/src/components/MobileBackButton.tsx b/src/components/MobileBackButton.tsx
index 6812000..a72a57a 100644
--- a/src/components/MobileBackButton.tsx
+++ b/src/components/MobileBackButton.tsx
@@ -6,8 +6,12 @@ export default function MobileBackButton({ label = "Back" }: { label?: string })
   const router = useRouter();
   return (
     <button
-      onClick={() => router.back()}
-      className="md:hidden flex items-center gap-1 text-sm text-stone-500 dark:text-stone-400 active:text-stone-900 dark:active:text-stone-100 mb-4"
+      onClick={() => {
+        if (window.history.length > 1) router.back();
+        else router.push("/");
+      }}
+      className="md:hidden flex items-center gap-1 text-sm text-stone-500 dark:text-stone-400 active:text-stone-900 dark:active:text-stone-100 touch-manipulation mb-4"
+      aria-label={label ? `Back to ${label}` : "Go back"}
     >
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-4 h-4" aria-hidden="true">
         <path d="M15 18l-6-6 6-6" />
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index e61386b..c8bd146 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/MobileNav.tsx
@@ -138,17 +138,21 @@ export default function MobileNav({ draftTotal = 0, spamTotal = 0 }: Props) {
   ];
 
   return (
-    <nav className="md:hidden shrink-0 flex border-t border-stone-200 dark:border-stone-800 bg-stone-50 dark:bg-stone-950">
+    <nav
+      className="md:hidden shrink-0 flex overflow-x-auto overscroll-x-contain border-t border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-950"
+      aria-label="Primary navigation"
+    >
       {tabs.map(({ href, label, icon, active, badge }) => (
         <Link
           key={href}
           href={href}
           className={[
-            "flex-1 flex flex-col items-center gap-0.5 py-2.5 text-[11px] transition-colors",
+            "flex-none w-[68px] flex flex-col items-center gap-0.5 py-2.5 text-[11px] touch-manipulation transition-colors",
             active
-              ? "text-stone-900 dark:text-stone-100"
-              : "text-stone-400 dark:text-stone-600",
+              ? "text-blue-600 dark:text-blue-400"
+              : "text-stone-500 dark:text-stone-400",
           ].join(" ")}
+          aria-current={active ? "page" : undefined}
         >
           <span className="relative inline-flex">
             {icon}
diff --git a/src/components/SenderAvatar.tsx b/src/components/SenderAvatar.tsx
index ec73d15..fe3831d 100644
--- a/src/components/SenderAvatar.tsx
+++ b/src/components/SenderAvatar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { EmailAddress } from "@/lib/types";
 import { WEBMAIL_DOMAINS, colorFor, initialsFor } from "@/lib/senderAvatar";
 
@@ -15,15 +15,17 @@ interface Props {
 
 export default function SenderAvatar({ from, size = 36 }: Props) {
   const [imgFailed, setImgFailed] = useState(false);
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
 
   const sender = from?.[0] ?? null;
   const domain = sender?.email.match(/@(.+)$/)?.[1]?.toLowerCase() ?? null;
   const initials = initialsFor(from);
   const color = colorFor(sender?.email ?? "");
 
-  const useIcon = !!domain && !WEBMAIL_DOMAINS.has(domain) && !imgFailed && (!mounted || !failedDomains.has(domain));
+  const useIcon =
+    !!domain &&
+    !WEBMAIL_DOMAINS.has(domain) &&
+    !imgFailed &&
+    !failedDomains.has(domain);
   const faviconUrl = useIcon
     ? `https://logo.clearbit.com/${domain}`
     : null;
diff --git a/src/components/ThreadView.tsx b/src/components/ThreadView.tsx
index 0ec0fdc..450e985 100644
--- a/src/components/ThreadView.tsx
+++ b/src/components/ThreadView.tsx
@@ -190,7 +190,12 @@ function EmailStackItem({
 
           {/* Body */}
           {resolved ? (
-            <EmailBody body={resolved.body} type={resolved.type} stripQuotes />
+            <EmailBody
+              body={resolved.body}
+              type={resolved.type}
+              stripQuotes
+              embeddedParts={email.attachments}
+            />
           ) : (
             <p className="px-4 py-6 text-sm text-stone-400 dark:text-stone-500">
               No content.
diff --git a/src/lib/__tests__/compose.test.ts b/src/lib/__tests__/compose.test.ts
index b091d4c..0a1bb05 100644
--- a/src/lib/__tests__/compose.test.ts
+++ b/src/lib/__tests__/compose.test.ts
@@ -87,7 +87,13 @@ describe("buildReplyQuote", () => {
 
   it("includes the attribution line", () => {
     const result = buildReplyQuote("Mon Jan 1", "Alice <alice@example.com>", "body");
-    assert.ok(result.includes("On Mon Jan 1, Alice <alice@example.com> wrote:"));
+    assert.ok(result.includes("> On Mon Jan 1, Alice <alice@example.com> wrote:"));
+  });
+
+  it("keeps the attribution and prior content inside one Markdown quote", () => {
+    const result = buildReplyQuote("Mon Jan 1", "alice@example.com", "body");
+    assert.ok(!result.includes("\n---\n"));
+    assert.ok(result.includes("> On Mon Jan 1, alice@example.com wrote:\n>\n> body"));
   });
 
   it("trims trailing newlines from body before quoting", () => {
diff --git a/src/lib/__tests__/composeHtml.test.ts b/src/lib/__tests__/composeHtml.test.ts
index 3dda2bc..5fd9e7e 100644
--- a/src/lib/__tests__/composeHtml.test.ts
+++ b/src/lib/__tests__/composeHtml.test.ts
@@ -1,25 +1,54 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import { wrapComposePreviewHtml, wrapEmailHtml } from "../composeHtml";
+import {
+  markQuotedReplyHtml,
+  wrapComposePreviewHtml,
+  wrapEmailHtml,
+} from "../composeHtml";
 
 describe("wrapEmailHtml", () => {
-  it("keeps the outgoing email wrapper on a plain white background", () => {
+  it("creates a neutral, responsive outgoing email document", () => {
     const result = wrapEmailHtml("<p>Hello</p>");
-    assert.ok(result.includes("color: #1a1a1a"), "outgoing email text should stay neutral");
-    assert.ok(result.includes("background: #f4f4f5"), "outgoing email code blocks should keep the light email styling");
+    assert.ok(result.startsWith("<!DOCTYPE html>"));
+    assert.ok(result.includes('name="viewport"'));
+    assert.ok(result.includes('class="mail-content"'));
+    assert.ok(result.includes("max-width:680px"));
+    assert.ok(result.includes("BlinkMacSystemFont"));
+    assert.ok(!result.includes("Share Tech Mono"));
+  });
+
+  it("keeps images proportional and code blocks readable", () => {
+    const result = wrapEmailHtml("<p>Hello</p>");
+    assert.ok(result.includes("max-width: 100%; height: auto"));
+    assert.ok(result.includes("white-space: pre-wrap"));
   });
 });
 
-describe("wrapComposePreviewHtml", () => {
-  it("wraps preview content in the themed preview shell", () => {
-    const result = wrapComposePreviewHtml("<p>Hello</p>");
-    assert.ok(result.includes('class="preview-shell"'), "preview should render inside the themed shell");
-    assert.ok(result.includes("--preview-bg: #060e06"), "preview should include the app dark background color");
-    assert.ok(result.includes("font-family: 'Share Tech Mono', monospace"), "preview should use the app font");
+describe("markQuotedReplyHtml", () => {
+  it("marks only the final blockquote as standard cited history", () => {
+    const result = markQuotedReplyHtml(
+      "<blockquote><p>A deliberate quote</p></blockquote><p>Reply</p><blockquote><p>Previous message</p></blockquote>",
+    );
+    assert.equal((result.match(/type="cite"/g) ?? []).length, 1);
+    assert.ok(
+      result.endsWith(
+        '<blockquote type="cite" class="email-client-quoted-reply" data-quoted-reply="true"><p>Previous message</p></blockquote>',
+      ),
+    );
   });
 
-  it("styles forwarded-email blocks with the preview theme override hook", () => {
-    const result = wrapComposePreviewHtml('<div data-forwarded-email="true">Forwarded</div>');
-    assert.ok(result.includes('[data-forwarded-email="true"]'), "preview should override forwarded content styling");
+  it("leaves content without a quote untouched", () => {
+    assert.equal(markQuotedReplyHtml("<p>Hello</p>"), "<p>Hello</p>");
+  });
+});
+
+describe("wrapComposePreviewHtml", () => {
+  it("uses the same message content styles on a quiet preview canvas", () => {
+    const result = wrapComposePreviewHtml("<p>Hello</p>");
+    assert.ok(result.includes('class="preview-surface"'));
+    assert.ok(result.includes('class="mail-content"'));
+    assert.ok(result.includes("--canvas: #f8fafc"));
+    assert.ok(!result.includes("Share Tech Mono"));
+    assert.ok(!result.includes("#060e06"));
   });
 });
diff --git a/src/lib/__tests__/emailHtml.test.ts b/src/lib/__tests__/emailHtml.test.ts
index 12d9018..89bbddc 100644
--- a/src/lib/__tests__/emailHtml.test.ts
+++ b/src/lib/__tests__/emailHtml.test.ts
@@ -1,433 +1,226 @@
-import { describe, it } from "node:test";
 import assert from "node:assert/strict";
-import { prepareHtml, prepareTextBody } from "../emailHtml";
+import { readFileSync } from "node:fs";
+import { describe, it } from "node:test";
+import {
+  prepareHtml,
+  prepareTextBody,
+  resolveEmbeddedImages,
+} from "../emailHtml";
 
-describe("prepareHtml", () => {
-  it("injects into existing <head>", () => {
-    const result = prepareHtml("<html><head></head><body>hi</body></html>");
-    assert.ok(result.includes("<style>"), "should inject style");
-    assert.ok(result.includes("<script>"), "should inject script");
-  });
+function documentWith(body: string, head = "") {
+  return `<html><head>${head}</head><body>${body}</body></html>`;
+}
 
-  it("preserves existing head attributes", () => {
-    const result = prepareHtml('<html><head lang="x"></head><body></body></html>');
-    assert.ok(result.includes('<head lang="x">'), "should preserve head attributes");
-    assert.ok(result.includes("<style>"), "should still inject style");
+describe("prepareHtml", () => {
+  it("injects into an existing head without losing its attributes", () => {
+    const result = prepareHtml(
+      '<html><head lang="en"><title>Message</title></head><body>Hi</body></html>',
+    );
+    assert.ok(result.includes('<head lang="en">'));
+    assert.ok(result.includes("<title>Message</title>"));
+    assert.ok(result.includes("iframe-resize"));
   });
 
-  it("wraps bare HTML with no <head>", () => {
-    const result = prepareHtml("<p>hello</p>");
+  it("wraps an HTML fragment in a complete document", () => {
+    const result = prepareHtml("<p>Hello</p>");
     assert.ok(result.startsWith("<html><head>"));
-    assert.ok(result.includes("<body><p>hello</p></body>"));
-  });
-
-  it("reports content width via direct body children so the parent can scale externally", () => {
-    const result = prepareHtml("<html><head></head><body>hi</body></html>");
-    // The parent (EmailBody) scales the iframe element itself when content is
-    // wider than the container. We measure only direct body children using
-    // offsetLeft+offsetWidth (not scrollWidth or getBCR on all descendants)
-    // because descending into nested tables picks up inner-element margin
-    // overflow, which creates an infinite resize loop.
-    assert.ok(result.includes("document.body.children"), "should iterate direct body children");
-    assert.ok(result.includes("offsetWidth"), "should use offsetWidth to measure content width");
-    assert.ok(result.includes("width:w"), "should include width in the postMessage payload");
-  });
-
-  it("injects parent-width-driven readable mobile reflow rules", () => {
-    const result = prepareHtml("<html><head></head><body><table width='600'><tr><td>hello</td></tr></table></body></html>");
-    assert.ok(result.includes('data-mobile-friendly'), "should gate readable mode behind a root data attribute");
-    assert.ok(result.includes("--iframe-parent-width"), "should clamp the iframe document to the parent width");
-    assert.ok(result.includes("table[width]{width:100%!important"), "fixed-width tables should be allowed to shrink");
-    assert.ok(result.includes("overflow-wrap:anywhere"), "long text should wrap in readable mode");
-    assert.ok(result.includes("img[width]{display:block!important"), "inline images should stack instead of forcing a giant row");
-  });
-
-  it("emulates common responsive email helper classes in readable mobile mode", () => {
-    const result = prepareHtml("<html><head></head><body><table class='flexible'></table><td class='hide'></td><span class='db'>x</span></body></html>");
-    assert.ok(result.includes('table[class~="flexible"]{width:100%!important'), "flexible tables should expand to the available width");
-    assert.ok(result.includes('[class~="hide"]{display:none!important'), "gmail spacer rows should be hidden in mobile readable mode");
-    assert.ok(result.includes('[class~="db"]{display:block!important'), "db helper classes should become block elements");
-  });
-
-  it("listens for parent width messages from EmailBody", () => {
-    const result = prepareHtml("<html><head></head><body>hi</body></html>");
-    assert.ok(result.includes("iframe-parent-width"), "should accept parent width postMessages");
-    assert.ok(result.includes("setProperty('--iframe-parent-width'"), "should store the parent width as a CSS variable");
-    assert.ok(result.includes("requestAnimationFrame(send)"), "width changes should trigger a fresh resize measurement");
+    assert.ok(result.includes("<body><p>Hello</p></body>"));
   });
 
-  it("strips a fixed-width viewport meta from the original email", () => {
-    const email = '<html><head><meta name="viewport" content="width=600"></head><body></body></html>';
-    const result = prepareHtml(email);
-    assert.ok(!result.includes('content="width=600"'), "original fixed-width viewport should be removed");
+  it("preserves a sender-provided responsive viewport", () => {
+    const viewport =
+      '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
+    const result = prepareHtml(documentWith("<p>Hello</p>", viewport));
+    assert.equal((result.match(/name="viewport"/g) ?? []).length, 1);
+    assert.ok(result.includes(viewport));
   });
 
-  it("sets overflow:hidden to prevent iframe internal scrollbar", () => {
-    const result = prepareHtml("<html><head></head><body>content</body></html>");
-    assert.ok(result.includes("overflow:hidden"));
+  it("adds a responsive viewport only when one is absent", () => {
+    const result = prepareHtml(documentWith("<p>Hello</p>"));
+    assert.ok(
+      result.includes(
+        '<meta name="viewport" content="width=device-width, initial-scale=1">',
+      ),
+    );
   });
 
-  it("handles uppercase HEAD tag", () => {
-    const result = prepareHtml("<HTML><HEAD></HEAD><BODY>hi</BODY></HTML>");
-    assert.ok(result.includes("<style>"), "should inject style into uppercase HEAD");
+  it("does not rewrite table, cell, or responsive helper-class geometry", () => {
+    const result = prepareHtml(
+      documentWith(
+        '<table class="flexible" width="600"><tr><td width="480">Text</td></tr></table>',
+      ),
+    );
+    assert.ok(!result.includes("data-mobile-friendly"));
+    assert.ok(!result.includes("table[width]{width:100%"));
+    assert.ok(!result.includes("td[width]"));
+    assert.ok(!result.includes('[class~="hide"]'));
   });
 
-  it("includes postMessage resize script", () => {
-    const result = prepareHtml("<html><head></head><body></body></html>");
-    assert.ok(result.includes("iframe-resize"));
-    assert.ok(result.includes("postMessage"));
+  it("contains images without cropping while preserving their aspect ratio", () => {
+    const result = prepareHtml(documentWith('<img src="hero.jpg" width="1200">'));
+    assert.ok(result.includes("max-width:100%!important"));
+    assert.ok(result.includes("height:auto!important"));
+    assert.ok(result.includes("object-fit:contain!important"));
+    assert.ok(!result.includes("img[width]{display:block"));
   });
 
-  describe("bare URL linkification", () => {
-    it("converts a bare URL in text to a clickable link", () => {
-      const result = prepareHtml('<html><head></head><body>see https://example.com for info</body></html>');
-      assert.ok(result.includes('<a href="https://example.com"'), "bare URL should become an anchor");
-      assert.ok(result.includes('target="_blank"'), "link should open in new tab");
-      assert.ok(result.includes('rel="noopener"'), "link should have noopener rel");
-    });
-
-    it("does not double-link URLs already inside an <a> tag", () => {
-      const input = '<html><head></head><body><a href="https://example.com">https://example.com</a></body></html>';
-      const result = prepareHtml(input);
-      const count = (result.match(/<a /g) ?? []).length;
-      assert.equal(count, 1, "should not create a nested anchor");
-    });
-
-    it("trims trailing punctuation from linkified URLs", () => {
-      const result = prepareHtml('<html><head></head><body>visit https://example.com.</body></html>');
-      assert.ok(result.includes('<a href="https://example.com"'), "trailing period should not be part of href");
-      assert.ok(result.includes('</a>.'), "period should appear after the closing anchor tag");
-    });
-
-    it("does not linkify URLs inside <script> blocks", () => {
-      const result = prepareHtml('<html><head><script>var u="https://example.com"</script></head><body></body></html>');
-      // The URL inside the script should not be wrapped in an <a> tag
-      assert.ok(!result.includes('<a href="https://example.com"'), "URL in script should not be linkified");
-    });
-  });
-
-  describe("light-mode emails (no native dark mode)", () => {
-    const lightEmail = "<html><head></head><body>plain</body></html>";
-
-    it("sets a white background", () => {
-      const result = prepareHtml(lightEmail);
-      assert.ok(result.includes("background-color:#ffffff"));
-    });
-
-    it("injects dark-mode filter inversion via CSS @media (prefers-color-scheme:dark)", () => {
-      const result = prepareHtml(lightEmail);
-      // color-scheme:light suppresses both CSS @media and window.matchMedia in modern
-      // browsers, so we must NOT set it. Use a plain CSS @media block instead.
-      assert.ok(!result.includes("color-scheme:light"), "must not set color-scheme:light");
-      assert.ok(result.includes("filter:invert(1) hue-rotate(180deg)"),
-        "should inject invert filter for dark mode");
-      assert.ok(result.match(/@media\(prefers-color-scheme:dark\)/),
-        "dark mode filter must be in a CSS @media rule");
-    });
-
-    it("sets app-matching dark background and text colour via pre-filter values", () => {
-      const result = prepareHtml(lightEmail);
-      // html gets stone-900 directly (no filter on html) to avoid browser bg-escape quirk
-      assert.ok(result.includes("#060e06"), "dark @media block should set html background-color:#060e06");
-      // body pre-filter bg: #f1f9f1 → filter → #060e06 (stone-900)
-      assert.ok(result.includes("#f1f9f1"), "dark @media block should set body background-color:#f1f9f1");
-      // body pre-filter color: #131f13 → filter → #e0ece0 (stone-100)
-      assert.ok(result.includes("#131f13"), "dark @media block should set body color:#131f13");
-    });
-
-    it("injects default font-family on html,body so unstyled emails match the client font", () => {
-      const result = prepareHtml(lightEmail);
-      assert.ok(result.includes("font-family:"), "should inject font-family on html,body");
-    });
-
-    it("injects counter-filter on img/video/picture/canvas to preserve image colors", () => {
-      const result = prepareHtml(lightEmail);
-      // These elements get the same filter applied twice (self-inverse).
-      // !important ensures email CSS cannot override the counter-filter.
-      assert.ok(result.includes("img,video,picture,canvas{filter:invert(1) hue-rotate(180deg)!important}"), `got: ${result}`);
-    });
-  });
-
-  describe("dark-mode-aware emails", () => {
-    const darkEmail =
-      "<html><head><style>@media (prefers-color-scheme: dark){body{background:#000}}</style></head><body></body></html>";
-
-    it("does not inject color-scheme:light", () => {
-      const result = prepareHtml(darkEmail);
-      assert.ok(!result.includes("color-scheme:light"));
-    });
-
-    it("does not inject a white background override", () => {
-      const result = prepareHtml(darkEmail);
-      // The injected style should only contain overflow:hidden, not a background color
-      const injectedStyle = result.match(/<style>(.*?)<\/style>/)?.[1] ?? "";
-      assert.ok(!injectedStyle.includes("background-color:#ffffff"), `got: ${injectedStyle}`);
-    });
-
-    it("does not inject a filter inversion (email handles its own dark mode)", () => {
-      const result = prepareHtml(darkEmail);
-      // Only one prefers-color-scheme reference — the email's own style, not our injected filter
-      const injectedStyle = result.match(/<style>(.*?)<\/style>/)?.[1] ?? "";
-      assert.ok(!injectedStyle.includes("filter:invert"), `injected style should not contain filter: ${injectedStyle}`);
-    });
-
-    it("still injects overflow:hidden", () => {
-      const result = prepareHtml(darkEmail);
-      assert.ok(result.includes("overflow:hidden"));
+  it("keeps sender colours intact instead of applying a dark-mode inversion filter", () => {
+    const result = prepareHtml(
+      documentWith('<div style="color:#c026d3">Brand colour</div>'),
+    );
+    assert.ok(!result.includes("filter:invert"));
+    assert.ok(!result.includes("hue-rotate"));
+    assert.ok(result.includes("color:#c026d3"));
+  });
+
+  it("measures full scroll geometry and batches updates in animation frames", () => {
+    const result = prepareHtml(documentWith("<p>Hello</p>"));
+    assert.ok(result.includes("root?root.scrollWidth:0"));
+    assert.ok(result.includes("body?body.scrollWidth:0"));
+    assert.ok(result.includes("requestAnimationFrame(measure)"));
+    assert.ok(result.includes("ResizeObserver"));
+    assert.ok(result.includes("document.fonts.ready"));
+  });
+
+  describe("links", () => {
+    it("linkifies a bare URL without nesting an existing link", () => {
+      const result = prepareHtml(
+        documentWith(
+          'See https://example.com. <a href="https://openai.com">https://openai.com</a>',
+        ),
+      );
+      assert.ok(result.includes('<a href="https://example.com"'));
+      assert.ok(result.includes("</a>."));
+      assert.equal((result.match(/<a /g) ?? []).length, 2);
+    });
+
+    it("does not linkify URLs in style or script blocks", () => {
+      const result = prepareHtml(
+        '<html><head><style>.x{background:url(https://example.com/a.png)}</style><script>const x="https://example.com"</script></head><body>Hi</body></html>',
+      );
+      assert.ok(!result.includes('<a href="https://example.com'));
+    });
+
+    it("unwraps Google Calendar redirect links", () => {
+      const target = "https://example.zoom.us/j/123";
+      const wrapped = `https://www.google.com/url?q=${encodeURIComponent(target)}&sa=D`;
+      const result = prepareHtml(
+        documentWith(`<a href="${wrapped}">Join meeting</a>`),
+      );
+      assert.ok(result.includes(`href="${target}"`));
+      assert.ok(!result.includes("google.com/url"));
+    });
+  });
+
+  describe("quoted thread history", () => {
+    it("includes common client selectors only when quote stripping is requested", () => {
+      const stripped = prepareHtml(documentWith("<p>Reply</p>"), {
+        stripQuotes: true,
+      });
+      assert.ok(stripped.includes('[data-quoted-reply="true"]'));
+      assert.ok(stripped.includes('blockquote[type="cite"]'));
+      assert.ok(stripped.includes(".gmail_quote"));
+      assert.ok(stripped.includes("#divRplyFwdMsg"));
+
+      const full = prepareHtml(documentWith("<p>Reply</p>"));
+      assert.ok(!full.includes('[data-quoted-reply="true"]'));
+      assert.ok(!full.includes(".gmail_quote"));
+      assert.ok(!full.includes("#divRplyFwdMsg"));
     });
   });
 });
 
-describe("prepareTextBody", () => {
-  it("returns a full HTML document", () => {
-    const result = prepareTextBody("hello world");
-    assert.ok(result.startsWith("<html>"), "should start with <html>");
-    assert.ok(result.includes("</html>"), "should end with </html>");
-  });
-
-  it("escapes HTML entities in the text", () => {
-    const result = prepareTextBody("<b>bold</b> & \"quoted\"");
-    assert.ok(result.includes("&lt;b&gt;bold&lt;/b&gt;"), "< and > should be escaped");
-    assert.ok(result.includes("&amp;"), "& should be escaped");
-    assert.ok(!result.includes("<b>"), "raw <b> tag must not appear");
-  });
-
-  it("uses the app's theme font (monospace)", () => {
-    const result = prepareTextBody("hello");
-    assert.ok(result.includes("monospace"), "should use app monospace font");
-  });
-
-  it("preserves newlines via white-space:pre-wrap", () => {
-    const result = prepareTextBody("line one\nline two");
-    assert.ok(result.includes("white-space:pre-wrap") || result.includes("white-space: pre-wrap"),
-      "should use pre-wrap to preserve newlines");
-    assert.ok(result.includes("line one\nline two"), "raw text with newlines should be present");
-  });
-
-  it("injects dark mode via CSS media query with app stone palette colors", () => {
-    const result = prepareTextBody("text");
-    // Must use CSS @media so dark mode applies before first paint (no flash)
-    assert.ok(result.match(/@media[^{]*prefers-color-scheme[^{]*dark/),
-      "dark mode must use a CSS @media rule");
-    // App stone-900 (#060e06) background, stone-100 (#e0ece0) text
-    assert.ok(result.includes("#060e06"), "dark background should use app stone-900 (#060e06)");
-    assert.ok(result.includes("#e0ece0"), "dark text should use app stone-100 (#e0ece0)");
-  });
-
-  it("injects the iframe resize postMessage script", () => {
-    const result = prepareTextBody("text");
-    assert.ok(result.includes("iframe-resize"), "should send iframe-resize postMessage");
-    assert.ok(result.includes("postMessage"), "should call postMessage");
-  });
-
-  it("sets overflow:hidden to prevent internal scrollbar", () => {
-    const result = prepareTextBody("text");
-    assert.ok(result.includes("overflow:hidden"));
+describe("resolveEmbeddedImages", () => {
+  it("maps cid image references to authenticated inline downloads", () => {
+    const result = resolveEmbeddedImages(
+      '<img src="cid:hero@message"><table background="CID:bg@message"></table>',
+      [
+        {
+          type: "image/png",
+          size: 10,
+          blobId: "blob/hero",
+          name: "hero image.png",
+          cid: "hero@message",
+          disposition: "inline",
+        },
+        {
+          type: "image/jpeg",
+          size: 10,
+          blobId: "blob-bg",
+          cid: "<bg@message>",
+        },
+      ],
+    );
+    assert.ok(result.includes("/api/download?"));
+    assert.ok(result.includes("blobId=blob%2Fhero"));
+    assert.ok(result.includes("inline=true"));
+    assert.ok(!result.toLowerCase().includes("cid:"));
   });
 
-  describe("stripQuotes option", () => {
-    it("strips lines starting with > from plain text", () => {
-      const text = "Thanks for the update.\n\n> On Monday, Bob wrote:\n> some quoted text\n> more quoted text";
-      const result = prepareTextBody(text, { stripQuotes: true });
-      assert.ok(!result.includes("&gt; some quoted text"), "quoted lines should be removed");
-      assert.ok(result.includes("Thanks for the update."), "original content should be preserved");
-    });
-
-    it("strips the attribution line before quoted text", () => {
-      const text = "Got it.\n\nOn Monday, Bob wrote:\n> the previous message";
-      const result = prepareTextBody(text, { stripQuotes: true });
-      assert.ok(!result.includes("On Monday, Bob wrote:"), "attribution line should be removed");
-      assert.ok(result.includes("Got it."), "original content should be preserved");
-    });
-
-    it("strips blank lines between content and attribution", () => {
-      const text = "Reply here.\n\n\nOn Thu, Alice wrote:\n> quoted";
-      const result = prepareTextBody(text, { stripQuotes: true });
-      // Everything from the blank lines onward should be gone
-      assert.ok(!result.includes("On Thu, Alice wrote:"), "attribution should be removed");
-      assert.ok(!result.includes("&gt; quoted"), "quoted content should be removed");
-      assert.ok(result.includes("Reply here."), "reply should be preserved");
-    });
-
-    it("leaves text untouched when there are no quoted lines", () => {
-      const text = "No quotes here.\nJust plain text.";
-      const result = prepareTextBody(text, { stripQuotes: true });
-      assert.ok(result.includes("No quotes here."), "text should be unchanged");
-      assert.ok(result.includes("Just plain text."), "text should be unchanged");
-    });
-
-    it("does not strip when stripQuotes is false", () => {
-      const text = "My reply.\n\n> quoted line";
-      const result = prepareTextBody(text, { stripQuotes: false });
-      assert.ok(result.includes("&gt; quoted line"), "quoted line should be present when stripping is off");
-    });
-
-    it("does not strip when stripQuotes is omitted", () => {
-      const text = "My reply.\n\n> quoted line";
-      const result = prepareTextBody(text);
-      assert.ok(result.includes("&gt; quoted line"), "quoted line should be present by default");
-    });
+  it("leaves an unmatched cid reference untouched", () => {
+    assert.equal(
+      resolveEmbeddedImages('<img src="cid:missing">', []),
+      '<img src="cid:missing">',
+    );
   });
 });
 
-describe("prepareHtml stripQuotes option", () => {
-  const selectors = [
-    { name: "Gmail (.gmail_quote)", html: '<div class="gmail_quote">quoted</div>' },
-    { name: "Apple Mail (blockquote[type=cite])", html: '<blockquote type="cite">quoted</blockquote>' },
-    { name: "Outlook (#divRplyFwdMsg)", html: '<div id="divRplyFwdMsg">quoted</div>' },
-    { name: "Yahoo (.yahoo_quoted)", html: '<div class="yahoo_quoted">quoted</div>' },
+describe("real-message rendering fixtures", () => {
+  const fixtures = [
+    "new-dental-appointment-for-phillip_Stp0bVMUG5Sc.json",
+    "start-small-and-scale-when-it-matters_Stp09-UTL1Lw.json",
+    "plan-your-weekend-10-open-houses-for-sale-near-bellevue-wa-9_Stp09-_Y2kmN.json",
   ];
 
-  for (const { name, html } of selectors) {
-    it(`injects JS to remove ${name} quote container`, () => {
-      const email = `<html><head></head><body><p>My reply</p>${html}</body></html>`;
-      const result = prepareHtml(email, { stripQuotes: true });
-      // The injected script should contain the relevant CSS selector
-      const selector = html.match(/class="([^"]+)"/)?.[1]
-        ? `.${html.match(/class="([^"]+)"/)![1]}`
-        : html.match(/id="([^"]+)"/)?.[1]
-        ? `#${html.match(/id="([^"]+)"/)![1]}`
-        : 'blockquote[type="cite"]';
-      assert.ok(result.includes(selector), `should inject selector for ${name}: ${selector}`);
+  for (const fixture of fixtures) {
+    it(`preserves the sender layout for ${fixture}`, () => {
+      const email = JSON.parse(
+        readFileSync(new URL(`./fixtures/${fixture}`, import.meta.url), "utf8"),
+      ) as {
+        htmlBody: Array<{ partId?: string }>;
+        bodyValues: Record<string, { value: string }>;
+      };
+      const partId = email.htmlBody[0]?.partId;
+      assert.ok(partId);
+      const original = email.bodyValues[partId].value;
+      const result = prepareHtml(original);
+
+      assert.ok(result.length >= original.length);
+      assert.ok(!result.includes("data-mobile-friendly"));
+      assert.ok(!result.includes("filter:invert"));
+      assert.ok(result.includes("iframe-resize"));
+      if (/name=["']viewport["']/i.test(original)) {
+        assert.equal(
+          (result.match(/name=["']viewport["']/gi) ?? []).length,
+          (original.match(/name=["']viewport["']/gi) ?? []).length,
+        );
+      }
     });
   }
-
-  it("does not inject quote-stripping JS when stripQuotes is false", () => {
-    const email = '<html><head></head><body><p>hi</p></body></html>';
-    const result = prepareHtml(email, { stripQuotes: false });
-    assert.ok(!result.includes("querySelectorAll"), "querySelectorAll should not be injected when stripping is off");
-  });
-
-  it("does not inject quote-stripping JS by default", () => {
-    const email = '<html><head></head><body><p>hi</p></body></html>';
-    const result = prepareHtml(email);
-    assert.ok(!result.includes("querySelectorAll"), "querySelectorAll should not be injected by default");
-  });
-
-  it("quote-stripping runs after load so DOM is fully parsed", () => {
-    const email = '<html><head></head><body><div class="gmail_quote">quoted</div></body></html>';
-    const result = prepareHtml(email, { stripQuotes: true });
-    // The strip-quotes IIFE must be inside the load event listener, not at the top level,
-    // so it runs after the full document is parsed.
-    const loadListenerMatch = result.match(/addEventListener\('load',function\(\)\{([\s\S]*?)\}\)/);
-    assert.ok(loadListenerMatch, "should have a load event listener");
-    assert.ok(loadListenerMatch![1].includes("gmail_quote"), "strip-quotes JS should run inside the load listener");
-  });
 });
 
-describe("linkifyHtmlText (via prepareHtml)", () => {
-  function wrap(body: string) {
-    return `<html><head></head><body>${body}</body></html>`;
-  }
-
-  it("linkifies a bare URL in a table cell — Capitol Hill regression", () => {
-    const email = wrap(
-      '<table><tr><td>Click here: https://www.soundtransit.org/ride-with-us/changes-affect-my-ride/navigating-service-disruptions#1line</td></tr></table>'
-    );
-    const result = prepareHtml(email);
-    assert.ok(
-      result.includes('<a href="https://www.soundtransit.org/ride-with-us/changes-affect-my-ride/navigating-service-disruptions#1line"'),
-      "URL with hash fragment inside a table cell should be linkified"
-    );
-  });
-
-  it("linkifies multiple bare URLs in the same text block", () => {
-    const result = prepareHtml(wrap("See https://example.com and https://other.org for details."));
-    assert.ok(result.includes('<a href="https://example.com"'), "first URL should be linked");
-    assert.ok(result.includes('<a href="https://other.org"'), "second URL should be linked");
-  });
-
-  it("trims trailing period so sentence-ending URLs parse correctly", () => {
-    const result = prepareHtml(wrap("Visit https://example.com. That's the site."));
-    assert.ok(result.includes('<a href="https://example.com"'), "href should not include trailing period");
-    assert.ok(result.includes("</a>."), "period should follow the closing tag");
-  });
-
-  it("trims trailing closing parenthesis", () => {
-    const result = prepareHtml(wrap("(see https://example.com)"));
-    assert.ok(result.includes('<a href="https://example.com"'), "href should not include trailing paren");
-    assert.ok(result.includes("</a>)"), "paren should follow the closing tag");
-  });
-
-  it("preserves query parameters including & in the href", () => {
-    const result = prepareHtml(wrap("Track: https://example.com/path?a=1&b=2"));
-    assert.ok(
-      result.includes('href="https://example.com/path?a=1&amp;b=2"'),
-      "& in query string should be escaped as &amp; in href attribute"
-    );
-  });
-
-  it("does not double-link a URL that is already wrapped in <a>", () => {
-    const input = wrap('<a href="https://example.com">https://example.com</a>');
-    const result = prepareHtml(input);
-    const anchorCount = (result.match(/<a /g) ?? []).length;
-    assert.equal(anchorCount, 1, "should not create a nested anchor around an already-linked URL");
-  });
-
-  it("does not linkify a URL in a <script> block", () => {
-    const input = '<html><head><script>var u="https://tracker.example.com/pixel"</script></head><body>hi</body></html>';
-    const result = prepareHtml(input);
-    assert.ok(!result.includes('<a href="https://tracker.example.com'), "URL inside script must not be linkified");
-  });
-
-  it("does not linkify a URL in a <style> block", () => {
-    const input = '<html><head><style>body{background:url(https://example.com/bg.png)}</style></head><body>hi</body></html>';
-    const result = prepareHtml(input);
-    assert.ok(!result.includes('<a href="https://example.com/bg.png"'), "URL inside style must not be linkified");
-  });
-
-  it("does not modify emails with no bare URLs", () => {
-    const email = wrap("<p>Hello world. No URLs here.</p>");
-    const result = prepareHtml(email);
-    assert.ok(!result.includes("<a href="), "no anchors should be injected when there are no bare URLs");
-  });
-
-  it("linkified anchor opens in a new tab", () => {
-    const result = prepareHtml(wrap("Go to https://example.com now."));
-    assert.ok(result.includes('target="_blank"'), "linkified URL should have target=_blank");
-    assert.ok(result.includes('rel="noopener"'), "linkified URL should have noopener rel");
-  });
-
-  it("injects cursor:pointer on anchors so hover cursor works inside the sandboxed iframe", () => {
-    const result = prepareHtml(wrap("<p>hello</p>"));
-    assert.ok(result.includes("a{cursor:pointer}"), "cursor:pointer must be in the injected style");
+describe("prepareTextBody", () => {
+  it("escapes markup and preserves line breaks", () => {
+    const result = prepareTextBody("<b>Hello</b>\nNext");
+    assert.ok(result.includes("&lt;b&gt;Hello&lt;/b&gt;\nNext"));
+    assert.ok(result.includes("white-space:pre-wrap"));
   });
 
-  it("unwraps Google Calendar redirect URLs in href attributes", () => {
-    const zoomUrl = "https://coreweave.zoom.us/j/86296412870";
-    const googleRedirectUrl = `https://www.google.com/url?q=${encodeURIComponent(zoomUrl)}&sa=D&source=calendar&ust=1780956240000000&usg=AOvVaw2hpQdEyAOVox_UyoWKRPB1`;
-    const email = wrap(`<a href="${googleRedirectUrl}">Join Zoom Meeting</a>`);
-    const result = prepareHtml(email);
-    assert.ok(
-      result.includes(`href="${zoomUrl}"`),
-      "Google Calendar redirect should be unwrapped to the direct Zoom URL"
-    );
-    assert.ok(
-      !result.includes("google.com/url"),
-      "Google redirect wrapper should be removed"
-    );
+  it("uses neutral system typography and dark-mode colours", () => {
+    const result = prepareTextBody("Hello");
+    assert.ok(result.includes("BlinkMacSystemFont"));
+    assert.ok(result.includes("#0f172a"));
+    assert.ok(result.includes("#e2e8f0"));
   });
 
-  it("preserves non-Google URLs unchanged", () => {
-    const regularUrl = "https://example.com/meeting";
-    const email = wrap(`<a href="${regularUrl}">Click here</a>`);
-    const result = prepareHtml(email);
-    assert.ok(
-      result.includes(`href="${regularUrl}"`),
-      "regular URLs should not be modified"
-    );
-  });
+  it("strips quoted lines only when requested", () => {
+    const text = "My reply\n\nOn Monday, Alice wrote:\n> Previous";
+    const stripped = prepareTextBody(text, { stripQuotes: true });
+    assert.ok(stripped.includes("My reply"));
+    assert.ok(!stripped.includes("Alice wrote"));
+    assert.ok(!stripped.includes("&gt; Previous"));
 
-  it("handles HTML-escaped characters in Google redirect URLs", () => {
-    const zoomUrl = "https://zoom.us/j/123456?pwd=xyz";
-    const googleRedirectUrl = `https://www.google.com/url?q=${encodeURIComponent(zoomUrl)}&sa=D`;
-    // HTML-escaped version
-    const escapedUrl = googleRedirectUrl.replace(/&/g, "&amp;");
-    const email = wrap(`<a href="${escapedUrl}">Join</a>`);
-    const result = prepareHtml(email);
-    assert.ok(
-      result.includes("zoom.us/j/123456"),
-      "Google redirect should be unwrapped even with HTML-escaped ampersands"
-    );
+    const full = prepareTextBody(text);
+    assert.ok(full.includes("&gt; Previous"));
   });
 });
diff --git a/src/lib/__tests__/jmap.test.ts b/src/lib/__tests__/jmap.test.ts
index 90852d6..cd9b519 100644
--- a/src/lib/__tests__/jmap.test.ts
+++ b/src/lib/__tests__/jmap.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 process.env.FASTMAIL_API_TOKEN = "test-token";
 
 import { describe, it } from "node:test";
diff --git a/src/lib/compose.ts b/src/lib/compose.ts
index 449a269..9d40ac1 100644
--- a/src/lib/compose.ts
+++ b/src/lib/compose.ts
@@ -50,7 +50,7 @@ export function buildReplyQuote(
     .split("\n")
     .map((line) => `> ${line}`)
     .join("\n");
-  return `\n\n---\n\n*On ${date}, ${from} wrote:*\n\n${quoted}`;
+  return `\n\n> On ${date}, ${from} wrote:\n>\n${quoted}`;
 }
 
 /**
diff --git a/src/lib/composeHtml.ts b/src/lib/composeHtml.ts
index 1ec728d..19156a0 100644
--- a/src/lib/composeHtml.ts
+++ b/src/lib/composeHtml.ts
@@ -1,26 +1,96 @@
+const EMAIL_CONTENT_CSS = `
+  .mail-content {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 680px;
+    margin: 0 auto;
+    padding: 24px;
+    color: #172033;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+    font-size: 15px;
+    line-height: 1.65;
+    overflow-wrap: anywhere;
+  }
+  .mail-content > :first-child { margin-top: 0; }
+  .mail-content > :last-child { margin-bottom: 0; }
+  .mail-content h1 { font-size: 1.45em; line-height: 1.25; font-weight: 650; margin: 1.4em 0 0.5em; }
+  .mail-content h2 { font-size: 1.25em; line-height: 1.3; font-weight: 650; margin: 1.4em 0 0.5em; }
+  .mail-content h3 { font-size: 1.08em; line-height: 1.35; font-weight: 650; margin: 1.4em 0 0.5em; }
+  .mail-content p { margin: 0 0 1em; }
+  .mail-content a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; }
+  .mail-content ul, .mail-content ol { padding-left: 1.5em; margin: 0 0 1em; }
+  .mail-content li { margin: 0.2em 0; }
+  .mail-content hr { border: 0; border-top: 1px solid #e2e8f0; margin: 1.5em 0; }
+  .mail-content img { max-width: 100%; height: auto; display: block; margin: 1em 0; }
+  .mail-content code {
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+    background: #f1f5f9;
+    padding: 0.15em 0.35em;
+    border-radius: 4px;
+    font-size: 0.9em;
+  }
+  .mail-content pre {
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: 14px 16px;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    background: #f8fafc;
+    overflow-x: auto;
+    white-space: pre-wrap;
+  }
+  .mail-content pre code { padding: 0; border: 0; background: transparent; }
+  .mail-content blockquote {
+    margin: 1em 0;
+    padding: 0 0 0 14px;
+    border-left: 2px solid #cbd5e1;
+    color: #64748b;
+  }
+  .mail-content table { max-width: 100%; border-collapse: collapse; }
+  .mail-content th, .mail-content td { padding: 6px 8px; border: 1px solid #e2e8f0; text-align: left; }
+`;
+
+/**
+ * Mark the final Markdown blockquote as the quoted part of a reply.
+ * The editor remains pure Markdown; this transport-only annotation lets email
+ * clients collapse the quote and lets our thread view hide duplicate history.
+ */
+export function markQuotedReplyHtml(body: string): string {
+  const openings = [...body.matchAll(/<blockquote(?:\s[^>]*)?>/gi)];
+  const last = openings[openings.length - 1];
+  if (!last || last.index === undefined) return body;
+
+  const opening = last[0];
+  if (
+    /\btype\s*=\s*["']cite["']/i.test(opening) ||
+    /\bdata-quoted-reply\s*=/i.test(opening)
+  ) {
+    return body;
+  }
+
+  const replacement = opening.replace(
+    /^<blockquote/i,
+    '<blockquote type="cite" class="email-client-quoted-reply" data-quoted-reply="true"',
+  );
+  return body.slice(0, last.index) + replacement + body.slice(last.index + opening.length);
+}
+
 export function wrapEmailHtml(body: string): string {
   return `<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
-  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6; color: #1a1a1a; max-width: 640px; margin: 0 auto; padding: 24px; }
-  h1 { font-size: 1.3em; font-weight: 600; margin: 1.5em 0 0.5em; }
-  h2 { font-size: 1.15em; font-weight: 600; margin: 1.5em 0 0.5em; }
-  h3 { font-size: 1em; font-weight: 600; margin: 1.5em 0 0.5em; }
-  p { margin: 0 0 1em; }
-  img { max-width: 100%; height: auto; display: block; margin: 1em 0; }
-  code { font-family: monospace; background: #f4f4f5; padding: 2px 5px; border-radius: 3px; font-size: 0.9em; }
-  pre { background: #f4f4f5; padding: 12px 16px; border-radius: 6px; overflow-x: auto; }
-  pre code { background: none; padding: 0; }
-  blockquote { border-left: 3px solid #d4d4d8; margin: 0 0 1em; padding: 4px 16px; color: #71717a; }
-  a { color: #2563eb; }
-  ul, ol { padding-left: 1.5em; margin: 0 0 1em; }
-  li { margin-bottom: 0.25em; }
-  hr { border: none; border-top: 1px solid #e4e4e7; margin: 1.5em 0; }
+  html, body { margin: 0; padding: 0; background: #ffffff; }
+  ${EMAIL_CONTENT_CSS}
 </style>
 </head>
-<body>${body}</body>
+<body>
+  <div class="mail-content" style="box-sizing:border-box;width:100%;max-width:680px;margin:0 auto;padding:24px;color:#172033;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.65;overflow-wrap:anywhere;">
+    ${body}
+  </div>
+</body>
 </html>`;
 }
 
@@ -29,135 +99,44 @@ export function wrapComposePreviewHtml(body: string): string {
 <html>
 <head>
 <meta charset="utf-8">
-<meta name="color-scheme" content="dark light">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
 <style>
   :root {
     color-scheme: light dark;
-    --preview-bg: #f0f5f0;
-    --preview-panel: #ffffff;
-    --preview-border: #d6e4d6;
-    --preview-text: #1e3e1e;
-    --preview-muted: #607060;
-    --preview-accent: #15803d;
-    --preview-accent-soft: #dcfce7;
-    --preview-code-bg: #ecf5ec;
-    --preview-code-border: #bbd2bb;
-    --preview-quote: #7a8a7a;
-    --preview-table-head: #e7f0e7;
+    --canvas: #f8fafc;
+    --surface: #ffffff;
+    --border: #e2e8f0;
   }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --preview-bg: #060e06;
-      --preview-panel: #030704;
-      --preview-border: #122a12;
-      --preview-text: #e0ece0;
-      --preview-muted: #a8c8a8;
-      --preview-accent: #4ade80;
-      --preview-accent-soft: #0a1c0a;
-      --preview-code-bg: #0a1c0a;
-      --preview-code-border: #1e3e1e;
-      --preview-quote: #80b880;
-      --preview-table-head: #0a1c0a;
-    }
-  }
-
   html, body {
-    margin: 0;
-    min-height: 100%;
-    background: var(--preview-bg);
-    color: var(--preview-text);
-    font-family: 'Share Tech Mono', monospace;
-  }
-
-  body {
-    padding: 20px;
     box-sizing: border-box;
+    min-height: 100%;
+    margin: 0;
+    background: var(--canvas);
   }
-
-  .preview-shell {
-    max-width: 720px;
+  body { padding: 20px; }
+  .preview-surface {
+    max-width: 680px;
     margin: 0 auto;
-    padding: 24px 28px;
-    background: var(--preview-panel);
-    border: 1px solid var(--preview-border);
-    box-shadow: inset 0 1px 0 rgba(128, 184, 128, 0.08);
-  }
-
-  .preview-shell > :first-child { margin-top: 0; }
-  .preview-shell > :last-child { margin-bottom: 0; }
-
-  h1 { font-size: 1.3em; font-weight: 600; margin: 1.5em 0 0.5em; color: var(--preview-text); }
-  h2 { font-size: 1.15em; font-weight: 600; margin: 1.5em 0 0.5em; color: var(--preview-text); }
-  h3 { font-size: 1em; font-weight: 600; margin: 1.5em 0 0.5em; color: var(--preview-text); }
-  p { margin: 0 0 1em; }
-  a { color: var(--preview-accent); }
-  ul, ol { padding-left: 1.5em; margin: 0 0 1em; }
-  li { margin-bottom: 0.25em; }
-  hr { border: none; border-top: 1px solid var(--preview-border); margin: 1.5em 0; }
-
-  img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 1em 0;
-    border: 1px solid var(--preview-border);
-    background: var(--preview-accent-soft);
-  }
-
-  code {
-    font-family: 'Share Tech Mono', monospace;
-    background: var(--preview-code-bg);
-    border: 1px solid var(--preview-code-border);
-    padding: 2px 5px;
-    border-radius: 3px;
-    font-size: 0.9em;
-  }
-
-  pre {
-    background: var(--preview-code-bg);
-    border: 1px solid var(--preview-code-border);
-    padding: 12px 16px;
-    border-radius: 6px;
-    overflow-x: auto;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--surface);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+    overflow: hidden;
   }
-
-  pre code {
-    background: none;
-    border: 0;
-    padding: 0;
-  }
-
-  blockquote {
-    border-left: 3px solid var(--preview-accent);
-    margin: 0 0 1em;
-    padding: 4px 16px;
-    color: var(--preview-quote);
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 0 0 1em;
-  }
-
-  th, td {
-    border: 1px solid var(--preview-border);
-    padding: 8px 10px;
-    text-align: left;
-    vertical-align: top;
-  }
-
-  th {
-    background: var(--preview-table-head);
-  }
-
-  [data-forwarded-email="true"] {
-    border-top-color: var(--preview-border) !important;
-    color: var(--preview-muted);
+  ${EMAIL_CONTENT_CSS}
+  [data-forwarded-email="true"] { color: #475569; }
+  @media (prefers-color-scheme: dark) {
+    :root { --canvas: #020617; --border: #334155; }
+    /* The preview intentionally remains a white email surface. That is what
+       recipients see and avoids a misleading filter-based dark rendering. */
   }
 </style>
 </head>
-<body><div class="preview-shell">${body}</div></body>
+<body>
+  <div class="preview-surface">
+    <div class="mail-content">${body}</div>
+  </div>
+</body>
 </html>`;
 }
diff --git a/src/lib/emailHtml.ts b/src/lib/emailHtml.ts
index 5dd674a..cbbb6bd 100644
--- a/src/lib/emailHtml.ts
+++ b/src/lib/emailHtml.ts
@@ -1,91 +1,124 @@
 /**
- * Prepare email HTML for display in a sandboxed iframe.
+ * Prepare untrusted email HTML for display in a sandboxed iframe.
  *
- * Dark mode strategy:
- * - Emails with native dark mode (prefers-color-scheme: dark rules): step
- *   aside entirely, let their own CSS handle theming.
- * - All other emails: in dark mode, apply filter:invert(1) hue-rotate(180deg)
- *   to the html element. This flips white→black and dark text→light text.
- *   A counter-filter on img/video restores images to their original colors
- *   (applying the same filter twice is self-inverse for images).
- *
- * Scrolling: overflow:hidden on html,body prevents the iframe from ever
- * getting its own scrollbar; the parent container handles all scrolling.
- *
- * Resizing: the injected script reports { height, width } via postMessage.
- * The parent (EmailBody) sizes the iframe element to these natural dimensions
- * and applies a CSS transform to scale it down when the content is wider
- * than the available space. This handles the iOS Safari limitation where
- * <meta viewport> is ignored inside iframes and content lays out at ~980px.
- *
- * Readable mobile mode: the parent posts the rendered container width into
- * the iframe. On narrow screens we clamp html/body to that width and apply
- * aggressive wrapping rules so text emails hidden inside fixed-width HTML can
- * reflow instead of being scaled down to unreadably small text.
+ * The sender's layout is treated as the source of truth. The injected CSS only
+ * prevents media from overflowing or being cropped; it does not rewrite table
+ * widths, cell widths, colours, or responsive helper classes. If a message is
+ * wider than the reader, EmailBody scales the complete document as one unit.
  */
 import { defaultEmailRenderTheme, type EmailRenderTheme } from "./emailRenderTheme";
+import type { EmailBodyPart } from "./types";
 
-// Unwrap Google Calendar redirect URLs to their actual destination.
-// Google Calendar wraps meeting links (especially Zoom) like:
-// https://www.google.com/url?q=<actual_url>&sa=D&source=calendar&...
-// This function extracts the real URL so users can click directly to join meetings.
 function unwrapGoogleCalendarUrl(href: string): string {
   try {
-    // Match Google's URL wrapper pattern - the q parameter contains the actual URL
-    const googleUrlMatch = href.match(/[?&]q=([^&]+)/);
-    if (googleUrlMatch && googleUrlMatch[1]) {
-      const decoded = decodeURIComponent(googleUrlMatch[1]);
-      // Only unwrap if it's a valid http(s) URL (avoid security issues)
-      // and it came from a Google domain
-      if (/^https?:\/\//.test(decoded) && /(?:www\.)?google\.com\/url/.test(href)) {
-        return decoded;
-      }
+    const url = new URL(href.replace(/&amp;/g, "&"));
+    if (
+      (url.hostname === "google.com" || url.hostname === "www.google.com") &&
+      url.pathname === "/url"
+    ) {
+      const destination = url.searchParams.get("q");
+      if (destination && /^https?:\/\//i.test(destination)) return destination;
     }
   } catch {
-    // If URL parsing fails, return original
+    // Malformed links are left untouched.
   }
   return href;
 }
 
-// Unwrap Google redirect URLs in href attributes
+function escapeAttribute(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
 function unwrapGoogleUrlsInHtml(html: string): string {
-  // Match href="..." and href='...' attributes and unwrap their URLs
   return html.replace(/\bhref=(['"])(.*?)\1/gi, (_match, quote, href) => {
-    const unescaped = href.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&");
-    const unwrapped = unwrapGoogleCalendarUrl(unescaped);
-    // Re-escape for HTML attribute
-    const reescaped = unwrapped.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-    return `href=${quote}${reescaped}${quote}`;
+    const unescaped = href
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/g, "'")
+      .replace(/&amp;/g, "&");
+    return `href=${quote}${escapeAttribute(unwrapGoogleCalendarUrl(unescaped))}${quote}`;
   });
 }
 
-// Linkify bare URLs in HTML text content at the string level (server-side),
-// so no browser DOM manipulation is needed. Skips content inside <a>, <script>,
-// and <style> tags. Tracks <a> nesting so already-linked URLs are not re-wrapped.
 const URL_RE = /(https?:\/\/[^\s<>"']+)/g;
-const TOKEN_RE = /(<script[\s\S]*?<\/script\s*>|<style[\s\S]*?<\/style\s*>|<\/a\s*>|<a[\s>][^>]*>|<[^>]*>)|([^<]*)/gi;
+const TOKEN_RE =
+  /(<script[\s\S]*?<\/script\s*>|<style[\s\S]*?<\/style\s*>|<\/a\s*>|<a[\s>][^>]*>|<[^>]*>)|([^<]*)/gi;
+
 function linkifyHtmlText(html: string): string {
   let inAnchor = 0;
-  return html.replace(TOKEN_RE, (_match, tag: string | undefined, text: string | undefined) => {
-    if (tag !== undefined) {
-      if (/^<\/a/i.test(tag)) inAnchor = Math.max(0, inAnchor - 1);
-      else if (/^<a[\s>]/i.test(tag)) inAnchor++;
-      return tag;
-    }
-    if (!text || inAnchor > 0) return text ?? "";
-    return text.replace(URL_RE, (url) => {
-      const trimmed = url.replace(/[.,;:!?)]+$/, "");
-      const rest = url.slice(trimmed.length);
-      const safeHref = trimmed.replace(/&/g, "&amp;");
-      return `<a href="${safeHref}" target="_blank" rel="noopener">${trimmed}</a>${rest}`;
-    });
+  return html.replace(
+    TOKEN_RE,
+    (_match, tag: string | undefined, text: string | undefined) => {
+      if (tag !== undefined) {
+        if (/^<\/a/i.test(tag)) inAnchor = Math.max(0, inAnchor - 1);
+        else if (/^<a[\s>]/i.test(tag)) inAnchor++;
+        return tag;
+      }
+      if (!text || inAnchor > 0) return text ?? "";
+      return text.replace(URL_RE, (url) => {
+        const trimmed = url.replace(/[.,;:!?)]+$/, "");
+        const rest = url.slice(trimmed.length);
+        return `<a href="${escapeAttribute(trimmed)}" target="_blank" rel="noopener noreferrer">${trimmed}</a>${rest}`;
+      });
+    },
+  );
+}
+
+function normalizeCid(value: string): string {
+  let decoded = value;
+  try {
+    decoded = decodeURIComponent(value);
+  } catch {
+    // Keep the original when it is not valid URL-encoded text.
+  }
+  return decoded.replace(/^cid:/i, "").replace(/^<|>$/g, "").trim().toLowerCase();
+}
+
+function inlinePartUrl(part: EmailBodyPart): string | null {
+  if (!part.blobId) return null;
+  const name = part.name || "inline-image";
+  const params = new URLSearchParams({
+    blobId: part.blobId,
+    name,
+    type: part.type,
+    inline: "true",
   });
+  return `/api/download?${params.toString()}`;
+}
+
+/**
+ * Replace cid: image references with authenticated local download URLs.
+ * JMAP exposes the matching content-id and blob id on the body part.
+ */
+export function resolveEmbeddedImages(
+  html: string,
+  parts: EmailBodyPart[] = [],
+): string {
+  const byCid = new Map<string, string>();
+  for (const part of parts) {
+    if (!part.cid) continue;
+    const url = inlinePartUrl(part);
+    if (url) byCid.set(normalizeCid(part.cid), url);
+  }
+  if (byCid.size === 0) return html;
+
+  return html.replace(
+    /\b(src|background)=(['"])(cid:[^'"]+)\2/gi,
+    (match, attribute: string, quote: string, cidUrl: string) => {
+      const resolved = byCid.get(normalizeCid(cidUrl));
+      return resolved
+        ? `${attribute}=${quote}${escapeAttribute(resolved)}${quote}`
+        : match;
+    },
+  );
 }
 
-// JS injected into HTML emails to remove quoted reply sections.
-// Targets the most common quote containers across major email clients.
 const STRIP_QUOTES_JS = `(function(){
   var sels=[
+    '[data-quoted-reply="true"]',
+    '.email-client-quoted-reply',
     'blockquote[type="cite"]',
     '.gmail_quote','.gmail_extra',
     '#divRplyFwdMsg','#appendonsend',
@@ -94,144 +127,102 @@ const STRIP_QUOTES_JS = `(function(){
   ];
   sels.forEach(function(s){
     var els=document.querySelectorAll(s);
-    for(var i=0;i<els.length;i++){els[i].parentNode&&els[i].parentNode.removeChild(els[i]);}
-  });
-  // Remove "On [date], [name] wrote:" attribution line immediately before a removed quote.
-  // After removal above, look for trailing <br> + attribution text nodes and drop them.
-  function trimTrailingAttribution(node){
-    if(!node)return;
-    var ch=node.childNodes;
-    for(var i=ch.length-1;i>=0;i--){
-      var n=ch[i];
-      if(n.nodeType===3&&n.nodeValue&&n.nodeValue.trim()==='')continue;
-      if(n.nodeType===1&&n.tagName==='BR'){n.parentNode.removeChild(n);continue;}
-      if(n.nodeType===3&&/wrote:\\s*$/.test(n.nodeValue)){n.parentNode.removeChild(n);}
-      break;
+    for(var i=0;i<els.length;i++){
+      var el=els[i];
+      el.parentNode&&el.parentNode.removeChild(el);
     }
-  }
-  trimTrailingAttribution(document.body);
+  });
 })();`;
 
-const MOBILE_READABLE_MAX_WIDTH = 640;
-
-export function prepareHtml(
-  html: string,
-  opts?: { stripQuotes?: boolean; theme?: EmailRenderTheme },
-): string {
-  const theme = opts?.theme ?? defaultEmailRenderTheme;
-  const hasNativeDark = /prefers-color-scheme\s*:\s*dark/i.test(html);
-
-  // Strip any existing viewport meta — we control sizing from outside.
-  html = html.replace(/<meta[^>]*name=["']viewport["'][^>]*>/gi, "");
-
-  // Unwrap Google Calendar redirect URLs so Zoom links and other meeting links work directly.
-  html = unwrapGoogleUrlsInHtml(html);
-
-  // Auto-link bare URLs in text content (server-side, no DOM manipulation needed).
-  html = linkifyHtmlText(html);
-
-  const mobileReadableStyle = [
-    'html[data-mobile-friendly="true"],html[data-mobile-friendly="true"] body{',
-    "width:var(--iframe-parent-width)!important;",
-    "max-width:var(--iframe-parent-width)!important;",
-    "min-width:0!important}",
-    'html[data-mobile-friendly="true"] body>*{max-width:100%!important}',
-    'html[data-mobile-friendly="true"] p,html[data-mobile-friendly="true"] div,html[data-mobile-friendly="true"] li,html[data-mobile-friendly="true"] td,html[data-mobile-friendly="true"] th,html[data-mobile-friendly="true"] blockquote,html[data-mobile-friendly="true"] span,html[data-mobile-friendly="true"] a{overflow-wrap:anywhere;word-break:break-word}',
-    'html[data-mobile-friendly="true"] table,html[data-mobile-friendly="true"] table[width]{width:100%!important;max-width:100%!important;table-layout:auto!important}',
-    'html[data-mobile-friendly="true"] td,html[data-mobile-friendly="true"] th,html[data-mobile-friendly="true"] td[width],html[data-mobile-friendly="true"] th[width]{width:auto!important;max-width:100%!important;min-width:0!important}',
-    'html[data-mobile-friendly="true"] img,html[data-mobile-friendly="true"] img[width]{display:block!important;max-width:100%!important;width:auto!important;height:auto!important}',
-    'html[data-mobile-friendly="true"] table[class~="flexible"]{width:100%!important;max-width:100%!important}',
-    'html[data-mobile-friendly="true"] [class~="hide"]{display:none!important;width:0!important;height:0!important;max-width:0!important;max-height:0!important;min-width:0!important;overflow:hidden!important;padding:0!important;font-size:0!important;line-height:0!important}',
-    'html[data-mobile-friendly="true"] [class~="db"]{display:block!important}',
-    'html[data-mobile-friendly="true"] pre,html[data-mobile-friendly="true"] code,html[data-mobile-friendly="true"] blockquote{overflow-wrap:anywhere;word-break:break-word}',
-  ].join("");
-
-  const baseStyle = [
-    hasNativeDark
-      ? "html,body{overflow:hidden;height:auto!important}"
-      : `html,body{background-color:#ffffff;color:#000000;overflow:hidden;height:auto!important;font-family:${theme.fontFamily}}`,
-    "a{cursor:pointer}",
-    "img{max-width:100%!important;height:auto!important}",
-    mobileReadableStyle,
-    hasNativeDark
-      ? ""
-      : "@media(prefers-color-scheme:dark){" +
-          // html gets the actual dark colour directly — no filter on html avoids
-          // browser quirks where the html/body background escapes the filter scope.
-          `html{background-color:${theme.htmlDarkBg}}` +
-          `body{filter:invert(1) hue-rotate(180deg);background-color:${theme.bodyDarkPreFilterBg};color:${theme.bodyDarkPreFilterColor}}` +
-          "img,video,picture,canvas{filter:invert(1) hue-rotate(180deg)!important}}",
-  ].join("");
-
-  const stripQuotesJs = opts?.stripQuotes ? STRIP_QUOTES_JS : "";
-
-  const inject = [
-    `<style>${baseStyle}</style>`,
-    `<script>(function(){
-  var lastH=0,lastW=0,lastParentWidth=0;
-  function setParentWidth(width){
-    if(width===lastParentWidth)return false;
-    lastParentWidth=width;
-    if(width>0&&width<=${MOBILE_READABLE_MAX_WIDTH}){
-      document.documentElement.setAttribute('data-mobile-friendly','true');
-      document.documentElement.style.setProperty('--iframe-parent-width',width+'px');
-    }else{
-      document.documentElement.removeAttribute('data-mobile-friendly');
-      document.documentElement.style.removeProperty('--iframe-parent-width');
-    }
-    return true;
-  }
-  function send(){
-    var h=Math.max(
-      document.body?document.body.scrollHeight:0,
-      document.documentElement.scrollHeight
-    );
-    // Measure width via direct body children only (offsetLeft+offsetWidth).
-    // Using scrollWidth or descending into nested elements picks up inner-table
-    // margin/position micro-overflow (a few px) which creates an infinite
-    // scale loop. The direct-child offsetWidth gives the outer wrapper's true
-    // layout width (which expands correctly for min-width constraints) without
-    // leaking sub-element overflow.
-    var w=(document.documentElement.hasAttribute('data-mobile-friendly')?lastParentWidth:0)||document.documentElement.clientWidth||0;
-    if(document.body){
-      var ch=document.body.children;
-      for(var i=0;i<ch.length;i++){
-        var rr=ch[i].offsetLeft+ch[i].offsetWidth;
-        if(rr>w)w=rr;
-      }
-    }
+function resizeScript(stripQuotes: boolean): string {
+  return `<script>(function(){
+  var lastH=0,lastW=0,raf=0;
+  function measure(){
+    raf=0;
+    var root=document.documentElement;
+    var body=document.body;
+    var h=Math.ceil(Math.max(
+      root?root.scrollHeight:0,
+      root?root.offsetHeight:0,
+      body?body.scrollHeight:0,
+      body?body.offsetHeight:0
+    ));
+    var w=Math.ceil(Math.max(
+      root?root.scrollWidth:0,
+      root?root.offsetWidth:0,
+      body?body.scrollWidth:0,
+      body?body.offsetWidth:0
+    ));
+    if(!h||h<1)return;
     if(h===lastH&&w===lastW)return;
     lastH=h;lastW=w;
     window.parent.postMessage({type:'iframe-resize',height:h,width:w},'*');
   }
-  send();
-  window.addEventListener('message',function(e){
-    if(e.data==='iframe-ping'){send();return;}
-    if(e.data&&e.data.type==='iframe-parent-width'){
-      var parentWidth=Number(e.data.width)||0;
-      if(setParentWidth(parentWidth)){window.requestAnimationFrame(send);}
-    }
-  });
-  function openLinksInNewTab(){
+  function schedule(){
+    if(!raf)raf=window.requestAnimationFrame(measure);
+  }
+  function finishSetup(){
+    ${stripQuotes ? STRIP_QUOTES_JS : ""}
     var links=document.getElementsByTagName('a');
     for(var i=0;i<links.length;i++){
       links[i].setAttribute('target','_blank');
-      links[i].setAttribute('rel','noopener');
+      links[i].setAttribute('rel','noopener noreferrer');
     }
-  }
-  window.addEventListener('load',function(){
-    ${stripQuotesJs}
-    openLinksInNewTab();
-    send();
-    var imgs=document.getElementsByTagName('img');
-    for(var i=0;i<imgs.length;i++){
-      imgs[i].addEventListener('load',send);
-      imgs[i].addEventListener('error',send);
+    var media=document.querySelectorAll('img,video');
+    for(var j=0;j<media.length;j++){
+      media[j].addEventListener('load',schedule);
+      media[j].addEventListener('error',schedule);
+      media[j].addEventListener('loadedmetadata',schedule);
     }
+    schedule();
+  }
+  window.addEventListener('message',function(e){
+    if(e.data==='iframe-ping')schedule();
   });
-  if(window.ResizeObserver){new ResizeObserver(send).observe(document.documentElement);}
-})();</script>`,
-  ].join("");
+  window.addEventListener('load',finishSetup);
+  document.addEventListener('DOMContentLoaded',schedule);
+  if(window.ResizeObserver){
+    new ResizeObserver(schedule).observe(document.documentElement);
+  }
+  if(window.MutationObserver){
+    new MutationObserver(schedule).observe(document.documentElement,{
+      childList:true,subtree:true,attributes:true
+    });
+  }
+  if(document.fonts&&document.fonts.ready){
+    document.fonts.ready.then(schedule);
+  }
+  schedule();
+})();</script>`;
+}
+
+export function prepareHtml(
+  html: string,
+  opts?: {
+    stripQuotes?: boolean;
+    theme?: EmailRenderTheme;
+    embeddedParts?: EmailBodyPart[];
+  },
+): string {
+  const theme = opts?.theme ?? defaultEmailRenderTheme;
+  html = resolveEmbeddedImages(html, opts?.embeddedParts);
+  html = unwrapGoogleUrlsInHtml(html);
+  html = linkifyHtmlText(html);
+
+  const hasViewport = /<meta[^>]*name=["']viewport["'][^>]*>/i.test(html);
+  const viewport = hasViewport
+    ? ""
+    : '<meta name="viewport" content="width=device-width, initial-scale=1">';
+  const baseStyle = `<style>
+    html,body{overflow:hidden;min-height:0}
+    html{background:#fff}
+    body{font-family:${theme.fontFamily}}
+    a{cursor:pointer}
+    img{max-width:100%!important;height:auto!important;object-fit:contain!important}
+    video,canvas,svg{max-width:100%!important;height:auto!important}
+    pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
+  </style>`;
+  const inject = `${viewport}${baseStyle}${resizeScript(!!opts?.stripQuotes)}`;
 
   if (/<head[\s>]/i.test(html)) {
     return html.replace(/<head([^>]*)>/i, `<head$1>${inject}`);
@@ -239,31 +230,25 @@ export function prepareHtml(
   return `<html><head>${inject}</head><body>${html}</body></html>`;
 }
 
-/**
- * Wrap a plain-text email body in themed HTML for iframe display.
- * Uses the same resize/dark-mode infrastructure as prepareHtml so the
- * rendered output matches the app's visual style.
- */
+function stripQuotedText(text: string): string {
+  const lines = text.split("\n");
+  let cutAt = -1;
+  for (let i = 0; i < lines.length; i++) {
+    if (/^>/.test(lines[i])) {
+      cutAt = i > 0 && /wrote:\s*$/i.test(lines[i - 1].trim()) ? i - 1 : i;
+      while (cutAt > 0 && lines[cutAt - 1].trim() === "") cutAt--;
+      break;
+    }
+  }
+  return cutAt > 0 ? lines.slice(0, cutAt).join("\n").trimEnd() : text;
+}
+
 export function prepareTextBody(
   text: string,
   opts?: { stripQuotes?: boolean; theme?: EmailRenderTheme },
 ): string {
   const theme = opts?.theme ?? defaultEmailRenderTheme;
-  if (opts?.stripQuotes) {
-    // Find the first quoted line or "On ... wrote:" attribution and trim from there.
-    const lines = text.split("\n");
-    let cutAt = -1;
-    for (let i = 0; i < lines.length; i++) {
-      if (/^>/.test(lines[i])) {
-        // Also include the attribution line immediately before it, if present.
-        cutAt = i > 0 && /wrote:\s*$/.test(lines[i - 1].trim()) ? i - 1 : i;
-        // Walk back over any blank lines before the attribution.
-        while (cutAt > 0 && lines[cutAt - 1].trim() === "") cutAt--;
-        break;
-      }
-    }
-    if (cutAt > 0) text = lines.slice(0, cutAt).join("\n").trimEnd();
-  }
+  if (opts?.stripQuotes) text = stripQuotedText(text);
 
   const escaped = text
     .replace(/&/g, "&amp;")
@@ -271,42 +256,20 @@ export function prepareTextBody(
     .replace(/>/g, "&gt;");
 
   return `<html><head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 html,body{margin:0;padding:0;overflow:hidden}
 body{
+  box-sizing:border-box;
   font-family:${theme.fontFamily};
-  font-size:14px;line-height:1.6;
-  color:#1c1917;background:#ffffff;
-  padding:0;word-break:break-word;white-space:pre-wrap;
+  font-size:15px;line-height:1.65;
+  color:${theme.textLightColor};background:${theme.textLightBg};
+  word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;
 }
 @media(prefers-color-scheme:dark){
-  html{background:${theme.textDarkBg}}
-  body{color:${theme.textDarkColor};background:${theme.textDarkBg}}
+  html,body{color:${theme.textDarkColor};background:${theme.textDarkBg}}
 }
 </style>
-<script>(function(){
-  var lastH=0,lastW=0;
-  function send(){
-    var h=Math.max(
-      document.body?document.body.scrollHeight:0,
-      document.documentElement.scrollHeight
-    );
-    var w=document.documentElement.clientWidth||0;
-    if(document.body){
-      var ch=document.body.children;
-      for(var i=0;i<ch.length;i++){
-        var rr=ch[i].offsetLeft+ch[i].offsetWidth;
-        if(rr>w)w=rr;
-      }
-    }
-    if(h===lastH&&w===lastW)return;
-    lastH=h;lastW=w;
-    window.parent.postMessage({type:'iframe-resize',height:h,width:w},'*');
-  }
-  send();
-  window.addEventListener('message',function(e){if(e.data==='iframe-ping')send();});
-  window.addEventListener('load',send);
-  if(window.ResizeObserver){new ResizeObserver(send).observe(document.documentElement);}
-})();</script>
+${resizeScript(false)}
 </head><body>${escaped}</body></html>`;
 }
diff --git a/src/lib/emailRenderTheme.ts b/src/lib/emailRenderTheme.ts
index 6d63016..dbe61cf 100644
--- a/src/lib/emailRenderTheme.ts
+++ b/src/lib/emailRenderTheme.ts
@@ -1,66 +1,20 @@
 /**
- * Visual theme for email rendering inside sandboxed iframes.
- *
- * HTML emails use CSS invert(1) hue-rotate(180deg) for dark mode, so their
- * background must be specified as a *pre-filter* value — whatever colour you
- * want the user to actually see must first be run through the inverse
- * transform to produce the right input for the filter:
- *
- *   pre-filter = invert( hue-rotate(180deg)(desiredBg) )
- *
- * Plain-text emails don't use the inversion filter; their dark-mode colours
- * are applied directly via a matchMedia check.
+ * Defaults used only when a message does not provide its own typography.
+ * HTML email colours are deliberately left alone: preserving the sender's
+ * light/dark artwork is more reliable than applying a blanket colour filter.
  */
 export interface EmailRenderTheme {
-  /**
-   * Direct dark-mode background colour applied to the `html` element (no
-   * filter on html). Set this to whatever you want the user to actually see
-   * behind the email in dark mode.
-   */
-  htmlDarkBg: string;
-  /**
-   * Dark-mode background for the `body` element, specified *before* the
-   * invert(1) hue-rotate(180deg) filter that is applied to body.
-   * After the filter it should equal htmlDarkBg so the background is seamless.
-   * Derive it: invert(hue-rotate(180deg)(htmlDarkBg)).
-   */
-  bodyDarkPreFilterBg: string;
-  /**
-   * Default text colour for the `body` element in dark mode, specified
-   * *before* the filter. Only affects elements that inherit colour from body
-   * (unstyled content). Elements with explicit colours override this.
-   * Derive it: invert(hue-rotate(180deg)(desiredTextColor)).
-   */
-  bodyDarkPreFilterColor: string;
-  /**
-   * Default font-family injected on html,body for HTML emails.
-   * Emails that declare their own font override this; it only affects
-   * unstyled content like plain-wrapper emails.
-   */
   fontFamily: string;
-  /** Plain-text email background in dark mode. */
+  textLightBg: string;
+  textLightColor: string;
   textDarkBg: string;
-  /** Plain-text email text colour in dark mode. */
   textDarkColor: string;
 }
 
-/**
- * Matches the app's "dark terminal" palette defined in globals.css.
- *
- * The filter on <body> is invert(1) hue-rotate(180deg). To derive pre-filter
- * values from desired post-filter colours:
- *   pre = invert(hue-rotate(180deg)(desired))
- *
- *   stone-900 #060e06 → hue-rotate → #0e060e → invert → #f1f9f1  (bodyDarkPreFilterBg)
- *   stone-100 #e0ece0 → hue-rotate → #ece0ec → invert → #131f13  (bodyDarkPreFilterColor)
- *
- * Update all three values if the app's dark background or text colour changes.
- */
 export const defaultEmailRenderTheme: EmailRenderTheme = {
-  htmlDarkBg: "#060e06",              // stone-900 — set directly on html (no filter)
-  bodyDarkPreFilterBg: "#f1f9f1",     // → #060e06 (stone-900) after filter
-  bodyDarkPreFilterColor: "#131f13",  // → #e0ece0 (stone-100) after filter
-  fontFamily: "'Share Tech Mono', monospace",
-  textDarkBg: "#060e06",              // stone-900
-  textDarkColor: "#e0ece0",           // stone-100
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  textLightBg: "#ffffff",
+  textLightColor: "#0f172a",
+  textDarkBg: "#0f172a",
+  textDarkColor: "#e2e8f0",
 };
diff --git a/src/lib/jmap.ts b/src/lib/jmap.ts
index 91bbf0d..6d087e7 100644
--- a/src/lib/jmap.ts
+++ b/src/lib/jmap.ts
@@ -95,6 +95,12 @@ const EMAIL_LIST_PROPERTIES = [
   "size",
 ];
 
+// HTML is usually compact because image payloads are separate MIME parts, but
+// complex newsletters can exceed the previous 1 MB cap and were silently
+// returned as truncated bodyValues. Keep a generous bounded cap so full
+// layouts render without turning normal list queries into body downloads.
+const MAX_RENDERED_BODY_BYTES = 10 * 1024 * 1024;
+
 const CALENDAR_CANDIDATE_PROPERTIES = [
   "id",
   "messageId",
@@ -356,7 +362,7 @@ export async function getEmail(
         ],
         fetchHTMLBodyValues: true,
         fetchTextBodyValues: true,
-        maxBodyValueBytes: 1024 * 1024, // 1MB
+        maxBodyValueBytes: MAX_RENDERED_BODY_BYTES,
       },
       "0",
     ],
@@ -395,7 +401,7 @@ export async function getThreadEmails(
         ],
         fetchHTMLBodyValues: true,
         fetchTextBodyValues: true,
-        maxBodyValueBytes: 1024 * 1024,
+        maxBodyValueBytes: MAX_RENDERED_BODY_BYTES,
       },
       "e",
     ],
diff --git a/src/lib/senderAvatar.ts b/src/lib/senderAvatar.ts
index 653567b..69900dd 100644
--- a/src/lib/senderAvatar.ts
+++ b/src/lib/senderAvatar.ts
@@ -16,21 +16,20 @@ export const WEBMAIL_DOMAINS = new Set([
   "yandex.com", "yandex.ru",
 ]);
 
-// Avatar backgrounds: visible against the near-black row bg (#060e06).
-// Dark enough to not compete with text, bright enough to be distinct (~3:1 vs bg).
+// Calm, distinct avatar colours that work against both neutral app surfaces.
 export const PALETTE = [
-  "#1a5c2a", // medium dark green
-  "#245a1e", // medium forest
-  "#1e5030", // dark teal-green
-  "#2a5c1a", // medium olive-green
-  "#1a5a3a", // dark sea-green
-  "#285020", // dark medium green
-  "#1e4a2e", // cool dark green
-  "#244c1c", // dark leafy green
-  "#204e34", // dark evergreen
-  "#2a4e1a", // yellow-green dark
-  "#1c4e28", // dark green variant
-  "#264828", // deep teal
+  "#475569",
+  "#0369a1",
+  "#1d4ed8",
+  "#4338ca",
+  "#6d28d9",
+  "#a21caf",
+  "#be123c",
+  "#b45309",
+  "#047857",
+  "#0f766e",
+  "#0e7490",
+  "#4f46e5",
 ];
 
 export function colorFor(seed: string): string {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index dfb94bb..e03b562 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -28,6 +28,9 @@ export interface EmailBodyPart {
   type: string;
   charset?: string;
   name?: string;
+  cid?: string | null;
+  disposition?: string | null;
+  location?: string | null;
 }
 
 export interface Email {
-- 
2.51.2