diff --git a/services/webmail/messages/en.json b/services/webmail/messages/en.json
index aabb645..a69b4b7 100644
--- a/services/webmail/messages/en.json
+++ b/services/webmail/messages/en.json
@@ -586,5 +586,9 @@
     "hintClose": "close",
     "open": "Command menu",
     "signOut": "Sign out"
+  },
+  "viewer": {
+    "asSent": "View as sent",
+    "adapt": "Match the theme"
   }
 }
diff --git a/services/webmail/messages/es.json b/services/webmail/messages/es.json
index db81fb9..b35da2a 100644
--- a/services/webmail/messages/es.json
+++ b/services/webmail/messages/es.json
@@ -586,5 +586,9 @@
     "hintClose": "cerrar",
     "open": "Menú de comandos",
     "signOut": "Cerrar sesión"
+  },
+  "viewer": {
+    "asSent": "Ver como se envió",
+    "adapt": "Adaptar al tema"
   }
 }
diff --git a/services/webmail/messages/pt-BR.json b/services/webmail/messages/pt-BR.json
index 6c9ecd6..1a8d2a8 100644
--- a/services/webmail/messages/pt-BR.json
+++ b/services/webmail/messages/pt-BR.json
@@ -586,5 +586,9 @@
     "hintClose": "fechar",
     "open": "Menu de comandos",
     "signOut": "Sair"
+  },
+  "viewer": {
+    "asSent": "Ver como enviado",
+    "adapt": "Adaptar ao tema"
   }
 }
diff --git a/services/webmail/public/icons/icon-192.png b/services/webmail/public/icons/icon-192.png
index cfb73b0..6b3bcef 100644
Binary files a/services/webmail/public/icons/icon-192.png and b/services/webmail/public/icons/icon-192.png differ
diff --git a/services/webmail/public/icons/icon-512.png b/services/webmail/public/icons/icon-512.png
index dbfbea3..9e3d3e5 100644
Binary files a/services/webmail/public/icons/icon-512.png and b/services/webmail/public/icons/icon-512.png differ
diff --git a/services/webmail/public/icons/maskable-512.png b/services/webmail/public/icons/maskable-512.png
index afe8553..49a9811 100644
Binary files a/services/webmail/public/icons/maskable-512.png and b/services/webmail/public/icons/maskable-512.png differ
diff --git a/services/webmail/src/app/(user)/user/mail/[folder]/page.tsx b/services/webmail/src/app/(user)/user/mail/[folder]/page.tsx
index 9fef3d5..75c9e79 100644
--- a/services/webmail/src/app/(user)/user/mail/[folder]/page.tsx
+++ b/services/webmail/src/app/(user)/user/mail/[folder]/page.tsx
@@ -30,6 +30,7 @@ import {
 } from "../../../../../lib/mailCounts";
 import { plainSnippet } from "../../../../../lib/snippet";
 import { useTrustedSenders } from "../../../../../lib/trustedSenders";
+import { useTheme } from "../../../../../lib/theme";
 import type { InlineImages } from "../../../../../lib/emailBody";
 import { messageDocument, hasBlockedRemoteContent } from "../../../../../lib/renderMessage";
 import {
@@ -158,6 +159,9 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
 
   const [messages, setMessages] = useState<MessageSummary[]>([]);
   const [selected, setSelected] = useState<RenderedMessage | null>(null);
+  // A plainly written message takes the app's colours; this shows it as sent.
+  const [showOriginal, setShowOriginal] = useState(false);
+  const { theme } = useTheme();
   // The open conversation, when the list is showing conversations.
   const [selectedThread, setSelectedThread] = useState<MessageSummary | null>(null);
   const conversations = useConversationView();
@@ -444,6 +448,7 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
       }
     }
     setLoadRemoteImages(false);
+    setShowOriginal(false);
     setReaderHeight(420);
     try {
       const res = await fetch(`/api/v1/mail/message/${uid}?folder=${encodeURIComponent(folder)}`, {
@@ -478,13 +483,13 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
    * markup, then resolve the message's own inline parts, then block or restore
    * remote sources - which is the only part the reader chooses.
    */
-  const readerDocument = useMemo(() => {
+  const readerBody = useMemo(() => {
     if (!selected) return null;
     // A trusted sender's images load without asking; anyone else's wait for
     // the reader's choice, one message at a time.
     const showImages = loadRemoteImages || trustedSenders.isTrusted(selected.from ?? "");
-    return messageDocument(selected, showImages);
-  }, [selected, loadRemoteImages, trustedSenders]);
+    return messageDocument(selected, showImages, { theme, original: showOriginal });
+  }, [selected, loadRemoteImages, trustedSenders, theme, showOriginal]);
 
   // Whether anything was actually held back, so the privacy banner is not shown
   // over a message that has no remote content at all.
@@ -794,7 +799,11 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
                 name: target.name,
                 label: FOLDER_LABELS[(target.special_use || target.name).toLowerCase()] ?? target.name,
               }))}
-              document={readerDocument}
+              document={readerBody?.document ?? null}
+              paper={readerBody?.paper ?? true}
+              canAdapt={readerBody?.canAdapt ?? false}
+              showingOriginal={showOriginal}
+              onToggleOriginal={() => setShowOriginal((v) => !v)}
               frameHeight={readerHeight}
               hasBlockedContent={hasBlockedContent}
               imagesLoaded={loadRemoteImages || senderTrusted}
diff --git a/services/webmail/src/app/apple-icon.png b/services/webmail/src/app/apple-icon.png
index 0a694a0..90a2674 100644
Binary files a/services/webmail/src/app/apple-icon.png and b/services/webmail/src/app/apple-icon.png differ
diff --git a/services/webmail/src/app/favicon.ico b/services/webmail/src/app/favicon.ico
index f8553e0..db11bde 100644
Binary files a/services/webmail/src/app/favicon.ico and b/services/webmail/src/app/favicon.ico differ
diff --git a/services/webmail/src/app/icon.svg b/services/webmail/src/app/icon.svg
index b3c661c..7b2fa2c 100644
--- a/services/webmail/src/app/icon.svg
+++ b/services/webmail/src/app/icon.svg
@@ -1,14 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
-  <defs>
-    <linearGradient id="lm-tile" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#6F7EFF"/>
-      <stop offset="1" stop-color="#3441D8"/>
-    </linearGradient>
-  </defs>
-  <rect width="64" height="64" rx="15" fill="url(#lm-tile)"/>
-  <!-- the flap of an envelope, as light on the tile: the fold every letter has -->
-  <path d="M0 15C0 6.7 6.7 0 15 0h34c8.3 0 15 6.7 15 15v2L32 40 0 17z" fill="#fff" fill-opacity=".11"/>
-  <!-- the lambda -->
-  <path d="M21 14.5 43 50" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M32.1 32.4 21 50" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- a lambda built as two square-cut strokes, on a tile with continuous corners -->
+  <path d="M64.00 32.00 L64.00 38.34 L63.99 40.36 L63.98 41.83 L63.97 43.03 L63.95 44.06 L63.93 44.97 L63.90 45.79 L63.88 46.54 L63.84 47.24 L63.80 47.89 L63.76 48.50 L63.72 49.07 L63.67 49.62 L63.62 50.14 L63.56 50.64 L63.50 51.11 L63.43 51.57 L63.36 52.01 L63.29 52.43 L63.21 52.83 L63.13 53.23 L63.05 53.61 L62.96 53.97 L62.86 54.33 L62.77 54.67 L62.66 55.01 L62.56 55.33 L62.45 55.65 L62.33 55.95 L62.21 56.25 L62.09 56.54 L61.96 56.82 L61.83 57.10 L61.69 57.36 L61.55 57.62 L61.40 57.87 L61.25 58.12 L61.09 58.36 L60.93 58.59 L60.76 58.81 L60.59 59.04 L60.42 59.25 L60.24 59.46 L60.05 59.66 L59.86 59.86 L59.66 60.05 L59.46 60.24 L59.25 60.42 L59.04 60.59 L58.81 60.76 L58.59 60.93 L58.36 61.09 L58.12 61.25 L57.87 61.40 L57.62 61.55 L57.36 61.69 L57.10 61.83 L56.82 61.96 L56.54 62.09 L56.25 62.21 L55.95 62.33 L55.65 62.45 L55.33 62.56 L55.01 62.66 L54.67 62.77 L54.33 62.86 L53.97 62.96 L53.61 63.05 L53.23 63.13 L52.83 63.21 L52.43 63.29 L52.01 63.36 L51.57 63.43 L51.11 63.50 L50.64 63.56 L50.14 63.62 L49.62 63.67 L49.07 63.72 L48.50 63.76 L47.89 63.80 L47.24 63.84 L46.54 63.88 L45.79 63.90 L44.97 63.93 L44.06 63.95 L43.03 63.97 L41.83 63.98 L40.36 63.99 L38.34 64.00 L32.00 64.00 L25.66 64.00 L23.64 63.99 L22.17 63.98 L20.97 63.97 L19.94 63.95 L19.03 63.93 L18.21 63.90 L17.46 63.88 L16.76 63.84 L16.11 63.80 L15.50 63.76 L14.93 63.72 L14.38 63.67 L13.86 63.62 L13.36 63.56 L12.89 63.50 L12.43 63.43 L11.99 63.36 L11.57 63.29 L11.17 63.21 L10.77 63.13 L10.39 63.05 L10.03 62.96 L9.67 62.86 L9.33 62.77 L8.99 62.66 L8.67 62.56 L8.35 62.45 L8.05 62.33 L7.75 62.21 L7.46 62.09 L7.18 61.96 L6.90 61.83 L6.64 61.69 L6.38 61.55 L6.13 61.40 L5.88 61.25 L5.64 61.09 L5.41 60.93 L5.19 60.76 L4.96 60.59 L4.75 60.42 L4.54 60.24 L4.34 60.05 L4.14 59.86 L3.95 59.66 L3.76 59.46 L3.58 59.25 L3.41 59.04 L3.24 58.81 L3.07 58.59 L2.91 58.36 L2.75 58.12 L2.60 57.87 L2.45 57.62 L2.31 57.36 L2.17 57.10 L2.04 56.82 L1.91 56.54 L1.79 56.25 L1.67 55.95 L1.55 55.65 L1.44 55.33 L1.34 55.01 L1.23 54.67 L1.14 54.33 L1.04 53.97 L0.95 53.61 L0.87 53.23 L0.79 52.83 L0.71 52.43 L0.64 52.01 L0.57 51.57 L0.50 51.11 L0.44 50.64 L0.38 50.14 L0.33 49.62 L0.28 49.07 L0.24 48.50 L0.20 47.89 L0.16 47.24 L0.12 46.54 L0.10 45.79 L0.07 44.97 L0.05 44.06 L0.03 43.03 L0.02 41.83 L0.01 40.36 L0.00 38.34 L0.00 32.00 L0.00 25.66 L0.01 23.64 L0.02 22.17 L0.03 20.97 L0.05 19.94 L0.07 19.03 L0.10 18.21 L0.12 17.46 L0.16 16.76 L0.20 16.11 L0.24 15.50 L0.28 14.93 L0.33 14.38 L0.38 13.86 L0.44 13.36 L0.50 12.89 L0.57 12.43 L0.64 11.99 L0.71 11.57 L0.79 11.17 L0.87 10.77 L0.95 10.39 L1.04 10.03 L1.14 9.67 L1.23 9.33 L1.34 8.99 L1.44 8.67 L1.55 8.35 L1.67 8.05 L1.79 7.75 L1.91 7.46 L2.04 7.18 L2.17 6.90 L2.31 6.64 L2.45 6.38 L2.60 6.13 L2.75 5.88 L2.91 5.64 L3.07 5.41 L3.24 5.19 L3.41 4.96 L3.58 4.75 L3.76 4.54 L3.95 4.34 L4.14 4.14 L4.34 3.95 L4.54 3.76 L4.75 3.58 L4.96 3.41 L5.19 3.24 L5.41 3.07 L5.64 2.91 L5.88 2.75 L6.13 2.60 L6.38 2.45 L6.64 2.31 L6.90 2.17 L7.18 2.04 L7.46 1.91 L7.75 1.79 L8.05 1.67 L8.35 1.55 L8.67 1.44 L8.99 1.34 L9.33 1.23 L9.67 1.14 L10.03 1.04 L10.39 0.95 L10.77 0.87 L11.17 0.79 L11.57 0.71 L11.99 0.64 L12.43 0.57 L12.89 0.50 L13.36 0.44 L13.86 0.38 L14.38 0.33 L14.93 0.28 L15.50 0.24 L16.11 0.20 L16.76 0.16 L17.46 0.12 L18.21 0.10 L19.03 0.07 L19.94 0.05 L20.97 0.03 L22.17 0.02 L23.64 0.01 L25.66 0.00 L32.00 0.00 L38.34 0.00 L40.36 0.01 L41.83 0.02 L43.03 0.03 L44.06 0.05 L44.97 0.07 L45.79 0.10 L46.54 0.12 L47.24 0.16 L47.89 0.20 L48.50 0.24 L49.07 0.28 L49.62 0.33 L50.14 0.38 L50.64 0.44 L51.11 0.50 L51.57 0.57 L52.01 0.64 L52.43 0.71 L52.83 0.79 L53.23 0.87 L53.61 0.95 L53.97 1.04 L54.33 1.14 L54.67 1.23 L55.01 1.34 L55.33 1.44 L55.65 1.55 L55.95 1.67 L56.25 1.79 L56.54 1.91 L56.82 2.04 L57.10 2.17 L57.36 2.31 L57.62 2.45 L57.87 2.60 L58.12 2.75 L58.36 2.91 L58.59 3.07 L58.81 3.24 L59.04 3.41 L59.25 3.58 L59.46 3.76 L59.66 3.95 L59.86 4.14 L60.05 4.34 L60.24 4.54 L60.42 4.75 L60.59 4.96 L60.76 5.19 L60.93 5.41 L61.09 5.64 L61.25 5.88 L61.40 6.13 L61.55 6.38 L61.69 6.64 L61.83 6.90 L61.96 7.18 L62.09 7.46 L62.21 7.75 L62.33 8.05 L62.45 8.35 L62.56 8.67 L62.66 8.99 L62.77 9.33 L62.86 9.67 L62.96 10.03 L63.05 10.39 L63.13 10.77 L63.21 11.17 L63.29 11.57 L63.36 11.99 L63.43 12.43 L63.50 12.89 L63.56 13.36 L63.62 13.86 L63.67 14.38 L63.72 14.93 L63.76 15.50 L63.80 16.11 L63.84 16.76 L63.88 17.46 L63.90 18.21 L63.93 19.03 L63.95 19.94 L63.97 20.97 L63.98 22.17 L63.99 23.64 L64.00 25.66Z" fill="#1B2BD0"/>
+  <path transform="translate(-0.9 0)" d="M15.27 10.00 L23.13 10.00 L48.73 54.00 L40.87 54.00Z M29.96 28.49 L34.04 35.51 L24.80 54.00 L17.20 54.00Z" fill="#fff"/>
 </svg>
diff --git a/services/webmail/src/components/Logo.tsx b/services/webmail/src/components/Logo.tsx
index a883f0f..35705d3 100644
--- a/services/webmail/src/components/Logo.tsx
+++ b/services/webmail/src/components/Logo.tsx
@@ -1,36 +1,20 @@
-import React, { useId } from "react";
+import React from "react";
 
 /**
- * The LambdaMail mark: a lambda on an ultramarine tile, with the flap of an
- * envelope lit across the top. The same drawing as app/icon.svg, inline so it
- * costs no request and takes any size.
+ * The LambdaMail mark: a lambda built as two square-cut strokes of one weight,
+ * white on an ultramarine tile with continuous corners. The same drawing as
+ * app/icon.svg and the generated icons, inline so it costs no request and takes
+ * any size. Flat on purpose: it has to hold at 16 pixels and on either theme.
  */
+const TILE = "M64.00 32.00 L64.00 38.34 L63.99 40.36 L63.98 41.83 L63.97 43.03 L63.95 44.06 L63.93 44.97 L63.90 45.79 L63.88 46.54 L63.84 47.24 L63.80 47.89 L63.76 48.50 L63.72 49.07 L63.67 49.62 L63.62 50.14 L63.56 50.64 L63.50 51.11 L63.43 51.57 L63.36 52.01 L63.29 52.43 L63.21 52.83 L63.13 53.23 L63.05 53.61 L62.96 53.97 L62.86 54.33 L62.77 54.67 L62.66 55.01 L62.56 55.33 L62.45 55.65 L62.33 55.95 L62.21 56.25 L62.09 56.54 L61.96 56.82 L61.83 57.10 L61.69 57.36 L61.55 57.62 L61.40 57.87 L61.25 58.12 L61.09 58.36 L60.93 58.59 L60.76 58.81 L60.59 59.04 L60.42 59.25 L60.24 59.46 L60.05 59.66 L59.86 59.86 L59.66 60.05 L59.46 60.24 L59.25 60.42 L59.04 60.59 L58.81 60.76 L58.59 60.93 L58.36 61.09 L58.12 61.25 L57.87 61.40 L57.62 61.55 L57.36 61.69 L57.10 61.83 L56.82 61.96 L56.54 62.09 L56.25 62.21 L55.95 62.33 L55.65 62.45 L55.33 62.56 L55.01 62.66 L54.67 62.77 L54.33 62.86 L53.97 62.96 L53.61 63.05 L53.23 63.13 L52.83 63.21 L52.43 63.29 L52.01 63.36 L51.57 63.43 L51.11 63.50 L50.64 63.56 L50.14 63.62 L49.62 63.67 L49.07 63.72 L48.50 63.76 L47.89 63.80 L47.24 63.84 L46.54 63.88 L45.79 63.90 L44.97 63.93 L44.06 63.95 L43.03 63.97 L41.83 63.98 L40.36 63.99 L38.34 64.00 L32.00 64.00 L25.66 64.00 L23.64 63.99 L22.17 63.98 L20.97 63.97 L19.94 63.95 L19.03 63.93 L18.21 63.90 L17.46 63.88 L16.76 63.84 L16.11 63.80 L15.50 63.76 L14.93 63.72 L14.38 63.67 L13.86 63.62 L13.36 63.56 L12.89 63.50 L12.43 63.43 L11.99 63.36 L11.57 63.29 L11.17 63.21 L10.77 63.13 L10.39 63.05 L10.03 62.96 L9.67 62.86 L9.33 62.77 L8.99 62.66 L8.67 62.56 L8.35 62.45 L8.05 62.33 L7.75 62.21 L7.46 62.09 L7.18 61.96 L6.90 61.83 L6.64 61.69 L6.38 61.55 L6.13 61.40 L5.88 61.25 L5.64 61.09 L5.41 60.93 L5.19 60.76 L4.96 60.59 L4.75 60.42 L4.54 60.24 L4.34 60.05 L4.14 59.86 L3.95 59.66 L3.76 59.46 L3.58 59.25 L3.41 59.04 L3.24 58.81 L3.07 58.59 L2.91 58.36 L2.75 58.12 L2.60 57.87 L2.45 57.62 L2.31 57.36 L2.17 57.10 L2.04 56.82 L1.91 56.54 L1.79 56.25 L1.67 55.95 L1.55 55.65 L1.44 55.33 L1.34 55.01 L1.23 54.67 L1.14 54.33 L1.04 53.97 L0.95 53.61 L0.87 53.23 L0.79 52.83 L0.71 52.43 L0.64 52.01 L0.57 51.57 L0.50 51.11 L0.44 50.64 L0.38 50.14 L0.33 49.62 L0.28 49.07 L0.24 48.50 L0.20 47.89 L0.16 47.24 L0.12 46.54 L0.10 45.79 L0.07 44.97 L0.05 44.06 L0.03 43.03 L0.02 41.83 L0.01 40.36 L0.00 38.34 L0.00 32.00 L0.00 25.66 L0.01 23.64 L0.02 22.17 L0.03 20.97 L0.05 19.94 L0.07 19.03 L0.10 18.21 L0.12 17.46 L0.16 16.76 L0.20 16.11 L0.24 15.50 L0.28 14.93 L0.33 14.38 L0.38 13.86 L0.44 13.36 L0.50 12.89 L0.57 12.43 L0.64 11.99 L0.71 11.57 L0.79 11.17 L0.87 10.77 L0.95 10.39 L1.04 10.03 L1.14 9.67 L1.23 9.33 L1.34 8.99 L1.44 8.67 L1.55 8.35 L1.67 8.05 L1.79 7.75 L1.91 7.46 L2.04 7.18 L2.17 6.90 L2.31 6.64 L2.45 6.38 L2.60 6.13 L2.75 5.88 L2.91 5.64 L3.07 5.41 L3.24 5.19 L3.41 4.96 L3.58 4.75 L3.76 4.54 L3.95 4.34 L4.14 4.14 L4.34 3.95 L4.54 3.76 L4.75 3.58 L4.96 3.41 L5.19 3.24 L5.41 3.07 L5.64 2.91 L5.88 2.75 L6.13 2.60 L6.38 2.45 L6.64 2.31 L6.90 2.17 L7.18 2.04 L7.46 1.91 L7.75 1.79 L8.05 1.67 L8.35 1.55 L8.67 1.44 L8.99 1.34 L9.33 1.23 L9.67 1.14 L10.03 1.04 L10.39 0.95 L10.77 0.87 L11.17 0.79 L11.57 0.71 L11.99 0.64 L12.43 0.57 L12.89 0.50 L13.36 0.44 L13.86 0.38 L14.38 0.33 L14.93 0.28 L15.50 0.24 L16.11 0.20 L16.76 0.16 L17.46 0.12 L18.21 0.10 L19.03 0.07 L19.94 0.05 L20.97 0.03 L22.17 0.02 L23.64 0.01 L25.66 0.00 L32.00 0.00 L38.34 0.00 L40.36 0.01 L41.83 0.02 L43.03 0.03 L44.06 0.05 L44.97 0.07 L45.79 0.10 L46.54 0.12 L47.24 0.16 L47.89 0.20 L48.50 0.24 L49.07 0.28 L49.62 0.33 L50.14 0.38 L50.64 0.44 L51.11 0.50 L51.57 0.57 L52.01 0.64 L52.43 0.71 L52.83 0.79 L53.23 0.87 L53.61 0.95 L53.97 1.04 L54.33 1.14 L54.67 1.23 L55.01 1.34 L55.33 1.44 L55.65 1.55 L55.95 1.67 L56.25 1.79 L56.54 1.91 L56.82 2.04 L57.10 2.17 L57.36 2.31 L57.62 2.45 L57.87 2.60 L58.12 2.75 L58.36 2.91 L58.59 3.07 L58.81 3.24 L59.04 3.41 L59.25 3.58 L59.46 3.76 L59.66 3.95 L59.86 4.14 L60.05 4.34 L60.24 4.54 L60.42 4.75 L60.59 4.96 L60.76 5.19 L60.93 5.41 L61.09 5.64 L61.25 5.88 L61.40 6.13 L61.55 6.38 L61.69 6.64 L61.83 6.90 L61.96 7.18 L62.09 7.46 L62.21 7.75 L62.33 8.05 L62.45 8.35 L62.56 8.67 L62.66 8.99 L62.77 9.33 L62.86 9.67 L62.96 10.03 L63.05 10.39 L63.13 10.77 L63.21 11.17 L63.29 11.57 L63.36 11.99 L63.43 12.43 L63.50 12.89 L63.56 13.36 L63.62 13.86 L63.67 14.38 L63.72 14.93 L63.76 15.50 L63.80 16.11 L63.84 16.76 L63.88 17.46 L63.90 18.21 L63.93 19.03 L63.95 19.94 L63.97 20.97 L63.98 22.17 L63.99 23.64 L64.00 25.66Z";
+const LAMBDA = "M15.27 10.00 L23.13 10.00 L48.73 54.00 L40.87 54.00Z M29.96 28.49 L34.04 35.51 L24.80 54.00 L17.20 54.00Z";
+
 export function Logo({ size = 32, className = "" }: { size?: number; className?: string }) {
-  // Several of these can be on one page, and a gradient id must be unique.
-  const id = useId().replace(/:/g, "");
   return (
-    <svg
-      viewBox="0 0 64 64"
-      width={size}
-      height={size}
-      className={className}
-      role="img"
-      aria-label="LambdaMail"
-    >
-      <defs>
-        <linearGradient id={`tile-${id}`} x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0" stopColor="#6F7EFF" />
-          <stop offset="1" stopColor="#3441D8" />
-        </linearGradient>
-      </defs>
-      <rect width="64" height="64" rx="15" fill={`url(#tile-${id})`} />
-      <path
-        d="M0 15C0 6.7 6.7 0 15 0h34c8.3 0 15 6.7 15 15v2L32 40 0 17z"
-        fill="#fff"
-        fillOpacity=".11"
-      />
-      <path d="M21 14.5 43 50" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M32.1 32.4 21 50" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
+    <svg viewBox="0 0 64 64" width={size} height={size} className={className} role="img" aria-label="LambdaMail">
+      <path d={TILE} fill="#1B2BD0" />
+      {/* Shifted left a little so the glyph, not its bounding box, is centred. */}
+      <path d={LAMBDA} fill="#fff" transform="translate(-0.9 0)" />
     </svg>
   );
 }
diff --git a/services/webmail/src/components/MessageFrame.tsx b/services/webmail/src/components/MessageFrame.tsx
index a8f73a8..5834c84 100644
--- a/services/webmail/src/components/MessageFrame.tsx
+++ b/services/webmail/src/components/MessageFrame.tsx
@@ -11,7 +11,7 @@ import { useTranslations } from "../i18n/provider";
  * that sent it. The sandbox has no allow-same-origin: the frame stays on an
  * opaque origin and can read nothing of this page.
  */
-export function MessageFrame({ document: html }: { document: string }) {
+export function MessageFrame({ document: html, paper = true }: { document: string; paper?: boolean }) {
   const t = useTranslations();
   const frame = useRef<HTMLIFrameElement>(null);
   const [height, setHeight] = useState(160);
@@ -30,7 +30,7 @@ export function MessageFrame({ document: html }: { document: string }) {
   }, []);
 
   return (
-    <div className="overflow-hidden rounded-xl bg-white shadow-edge ring-1 ring-ink/10">
+    <div className={paper ? "overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-ink/10" : ""}>
       <iframe
         ref={frame}
         title={t("ui.messageBody")}
@@ -38,7 +38,7 @@ export function MessageFrame({ document: html }: { document: string }) {
         sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
         referrerPolicy="no-referrer"
         style={{ height: `${height}px` }}
-        className="block w-full border-0"
+        className="block w-full border-0 bg-transparent"
       />
     </div>
   );
diff --git a/services/webmail/src/components/MessageReader.tsx b/services/webmail/src/components/MessageReader.tsx
index 8853e2e..2a0df88 100644
--- a/services/webmail/src/components/MessageReader.tsx
+++ b/services/webmail/src/components/MessageReader.tsx
@@ -70,6 +70,12 @@ interface Props {
   moveTargets: MoveTarget[];
   /** The document the body frame renders, or null for a text-only message. */
   document: string | null;
+  /** Drawn on a white sheet: designed mail, or a plain one shown as sent. */
+  paper: boolean;
+  /** A plainly written message that is taking the app's colours. */
+  canAdapt: boolean;
+  showingOriginal: boolean;
+  onToggleOriginal: () => void;
   frameHeight: number;
   /** Whether anything was held back, so the privacy bar is not always shown. */
   hasBlockedContent: boolean;
@@ -302,14 +308,14 @@ export function MessageReader(props: Props) {
       </div>
 
       <div className="flex-1 overflow-y-auto">
-        <div className="mx-auto flex w-full max-w-[1000px] flex-col gap-4 px-4 pb-10 pt-5 sm:px-7 2xl:max-w-[1140px]">
+        <div className="mx-auto flex w-full max-w-[820px] flex-col gap-5 px-4 pb-14 pt-6 sm:px-8">
           {message.important && (
             <span className="inline-flex w-fit items-center gap-1.5 rounded-full bg-rose-900/60 px-2.5 py-0.5 text-xs font-medium text-rose-200 shadow-[inset_0_0_0_1px_rgba(244,63,94,0.45)]">
               <AlertCircle className="h-3.5 w-3.5" aria-hidden />
               {t("mail.highImportanceBadge")}
             </span>
           )}
-          <h1 className="text-[19px] font-semibold leading-snug tracking-[-0.01em] text-slate-100 [overflow-wrap:anywhere] [text-wrap:pretty] sm:text-[22px]">
+          <h1 className="text-[22px] font-semibold leading-[1.22] tracking-[-0.022em] text-slate-50 [overflow-wrap:anywhere] [text-wrap:balance] sm:text-[27px]">
             {message.subject || t("mail.noSubject")}
           </h1>
 
@@ -439,8 +445,22 @@ export function MessageReader(props: Props) {
             </section>
           )}
 
+          {props.document && props.canAdapt && (
+            <div className="-mb-2 flex justify-end">
+              <button type="button" onClick={props.onToggleOriginal} className={infoLinkClass}>
+                {props.showingOriginal ? t("viewer.adapt") : t("viewer.asSent")}
+              </button>
+            </div>
+          )}
+
           {props.document ? (
-            <div className="overflow-hidden rounded-xl bg-white shadow-edge">
+            <div
+              className={
+                props.paper
+                  ? "overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-ink/10"
+                  : ""
+              }
+            >
               <iframe
                 title={t("ui.messageBody")}
                 srcDoc={props.document}
@@ -452,15 +472,13 @@ export function MessageReader(props: Props) {
                 sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
                 referrerPolicy="no-referrer"
                 style={{ height: `${props.frameHeight}px` }}
-                className="block w-full border-0"
+                className="block w-full border-0 bg-transparent"
               />
             </div>
           ) : (
-            <div className="rounded-xl bg-dark-panel px-5 py-5 shadow-edge sm:px-6">
-              <pre className="whitespace-pre-wrap break-words font-sans text-[14.5px] leading-relaxed text-slate-200">
-                {message.text || t("mail.emptyBody")}
-              </pre>
-            </div>
+            <pre className="whitespace-pre-wrap break-words font-sans text-[15.5px] leading-[1.68] text-slate-100">
+              {message.text || t("mail.emptyBody")}
+            </pre>
           )}
         </div>
       </div>
diff --git a/services/webmail/src/components/ThreadReader.tsx b/services/webmail/src/components/ThreadReader.tsx
index e94b0d3..b31b907 100644
--- a/services/webmail/src/components/ThreadReader.tsx
+++ b/services/webmail/src/components/ThreadReader.tsx
@@ -30,6 +30,7 @@ import {
   type ThreadSummary,
 } from "../lib/conversations";
 import { hasBlockedRemoteContent, messageDocument } from "../lib/renderMessage";
+import { useTheme } from "../lib/theme";
 import { offersReplyAll, replyAllRecipients, replyRecipients } from "../lib/recipients";
 import { plainSnippet } from "../lib/snippet";
 import { notifyMailStateChanged } from "../lib/useFolders";
@@ -97,6 +98,9 @@ function initialsOf(name: string, address: string): string {
 export function ThreadReader(props: Props) {
   const { thread, folder, ownAddress, trusted } = props;
   const { t, locale } = useI18n();
+  const { theme } = useTheme();
+  // Plain messages that are shown as sent instead of in the app's colours.
+  const [originals, setOriginals] = useState<Set<string>>(new Set());
 
   const [infos, setInfos] = useState<ThreadMessageInfo[] | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -365,13 +369,15 @@ export function ThreadReader(props: Props) {
       </div>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto flex w-full max-w-[1000px] flex-col gap-3 px-4 pb-10 pt-5 sm:px-7 2xl:max-w-[1140px]">
+        <div className="mx-auto flex w-full max-w-[820px] flex-col gap-3 px-4 pb-14 pt-6 sm:px-8">
           <div className="flex flex-col gap-2">
-            <h1 className="text-[19px] font-semibold leading-snug tracking-[-0.01em] text-slate-100 [overflow-wrap:anywhere] [text-wrap:pretty] sm:text-[22px]">
+            <h1 className="text-[22px] font-semibold leading-[1.22] tracking-[-0.022em] text-slate-50 [overflow-wrap:anywhere] [text-wrap:balance] sm:text-[27px]">
               {thread.subject || t("mail.noSubject")}
             </h1>
             <div className="flex flex-wrap items-center gap-2 text-[12.5px] text-slate-400">
-              <span>{t("conversations.messagesInConversation", { count: infos?.length ?? thread.message_count })}</span>
+              {(infos?.length ?? thread.message_count) > 1 && (
+                <span>{t("conversations.messagesInConversation", { count: infos?.length ?? thread.message_count })}</span>
+              )}
               {infos && waitingOnMe && lastIncoming && (
                 <span
                   className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11.5px] font-medium ${
@@ -404,7 +410,7 @@ export function ThreadReader(props: Props) {
             const displayName = info.own ? t("conversations.me") : sender.name || info.from_display_name || sender.address;
             const trustedHere = loaded ? trusted.isTrusted(loaded.from) : false;
             const showImages = trustedHere || imagesOnce.has(key);
-            const doc = loaded ? messageDocument(loaded, showImages) : null;
+            const rendered = loaded ? messageDocument(loaded, showImages, { theme, original: originals.has(key) }) : null;
             const blocked = loaded ? hasBlockedRemoteContent(loaded) : false;
 
             return (
@@ -532,10 +538,29 @@ export function ThreadReader(props: Props) {
                           </div>
                         )}
 
-                        {doc ? (
-                          <MessageFrame document={doc} />
+                        {rendered?.canAdapt && (
+                          <div className="-mb-1 flex justify-end">
+                            <button
+                              type="button"
+                              onClick={() =>
+                                setOriginals((current) => {
+                                  const next = new Set(current);
+                                  if (next.has(key)) next.delete(key);
+                                  else next.add(key);
+                                  return next;
+                                })
+                              }
+                              className={infoLinkClass}
+                            >
+                              {originals.has(key) ? t("viewer.adapt") : t("viewer.asSent")}
+                            </button>
+                          </div>
+                        )}
+
+                        {rendered ? (
+                          <MessageFrame document={rendered.document} paper={rendered.paper} />
                         ) : (
-                          <pre className="whitespace-pre-wrap break-words rounded-xl bg-dark-bg px-4 py-4 font-sans text-[14.5px] leading-relaxed text-slate-200">
+                          <pre className="whitespace-pre-wrap break-words font-sans text-[15.5px] leading-[1.68] text-slate-100">
                             {loaded.text || t("mail.emptyBody")}
                           </pre>
                         )}
diff --git a/services/webmail/src/emailBody.test.ts b/services/webmail/src/emailBody.test.ts
index a610426..64539dc 100644
--- a/services/webmail/src/emailBody.test.ts
+++ b/services/webmail/src/emailBody.test.ts
@@ -99,3 +99,96 @@ describe("the document the reader frame is given", () => {
     expect(doc).toContain("lm:reader-height");
   });
 });
+
+import { looksDesigned } from "./lib/emailBody.js";
+
+describe("telling a designed message from a written one", () => {
+  it("takes a letter between two people for written", () => {
+    expect(looksDesigned("<p>Hi Ana,</p><p>Friday works for me.</p><p>Lucas</p>")).toBe(false);
+  });
+
+  it("takes a coloured background, in any of its spellings, for designed", () => {
+    expect(looksDesigned('<table bgcolor="#336699"><tr><td>x</td></tr></table>')).toBe(true);
+    expect(looksDesigned('<div style="background-color: #0c6">x</div>')).toBe(true);
+    expect(looksDesigned("<style>.hero{background:#112233}</style><p>x</p>")).toBe(true);
+    expect(looksDesigned('<td background="hero.png">x</td>')).toBe(true);
+    expect(looksDesigned('<div style="background:url(https://x.test/a.png)">x</div>')).toBe(true);
+  });
+
+  // Outlook paints white behind everything it sends; that is not a design.
+  it("does not count plain white or nothing at all as a background", () => {
+    expect(looksDesigned('<div style="background-color: rgb(255, 255, 255)">hi</div>')).toBe(false);
+    expect(looksDesigned('<div style="background:#ffffff">hi</div>')).toBe(false);
+    expect(looksDesigned('<div style="background-color: white;">hi</div>')).toBe(false);
+    expect(looksDesigned('<p style="background:transparent">hi</p>')).toBe(false);
+    expect(looksDesigned('<body bgcolor="#FFF"><p>hi</p></body>')).toBe(false);
+  });
+
+  it("takes a layout built from tables for designed even with no colour", () => {
+    expect(looksDesigned("<table><tr><td><table><tr><td><table><tr><td>x</td></tr></table></td></tr></table></td></tr></table>")).toBe(true);
+    expect(looksDesigned("<table><tr><td>a</td><td>b</td></tr></table>")).toBe(false);
+  });
+
+  it("is false for nothing", () => {
+    expect(looksDesigned("")).toBe(false);
+  });
+});
+
+describe("a written message takes the app's colours", () => {
+  it("is drawn without a white sheet in dark, with light text", () => {
+    const doc = buildReaderDocument("<p>Hi</p>", { theme: "dark", paper: false });
+    expect(doc).toContain('content="dark"');
+    expect(doc).toContain("#e6e9f0");
+    expect(doc).not.toContain("background:#ffffff");
+    expect(doc).toContain("background:transparent");
+  });
+
+  it("is drawn with dark text in light", () => {
+    const doc = buildReaderDocument("<p>Hi</p>", { theme: "light", paper: false });
+    expect(doc).toContain('content="light"');
+    expect(doc).toContain("#12151c");
+  });
+
+  // Black text its own program gave it must not vanish on a dark ground.
+  it("carries the script that lifts text too dark for the ground", () => {
+    const dark = buildReaderDocument("<p>Hi</p>", { theme: "dark", paper: false });
+    expect(dark).toContain("luminance");
+    expect(buildReaderDocument("<p>Hi</p>", { paper: true })).not.toContain("luminance");
+  });
+
+  it("folds the quoted history of a reply behind a button, in both modes", () => {
+    for (const paper of [true, false]) {
+      const doc = buildReaderDocument("<p>ok</p><blockquote>x</blockquote>", { theme: "dark", paper });
+      expect(doc).toContain("lm-quote-toggle");
+      expect(doc).toContain("blockquote");
+    }
+  });
+});
+
+// The script that lifts dark text runs inside a template literal, where `\d`
+// silently means "d". The regular expression it reads colours with must not
+// depend on a backslash, or it matches nothing and a plain message stays a
+// white slab on a dark ground.
+describe("the colour-reading script in a written message", () => {
+  it("reads numbers without relying on an escape", () => {
+    const doc = buildReaderDocument("<p>Hi</p>", { theme: "dark", paper: false });
+    const line = doc.split("\n").find((l) => l.includes("const channels")) ?? "";
+    expect(line).toContain("[0-9.]+");
+    expect(line).not.toMatch(/\\d/);
+  });
+
+  it("actually lifts too-dark text and clears white backdrops", () => {
+    const html = `<div style="background-color:rgb(255,255,255)"><p style="color:#000">Hi</p></div>`;
+    const doc = buildReaderDocument(html, { theme: "dark", paper: false });
+    const dom = new DOMParser().parseFromString(doc, "text/html");
+    document.body.innerHTML = dom.body.innerHTML;
+    // The same script, run against a document that has the styles applied.
+    const script = dom.querySelector("script")!.textContent!;
+    const rewritten = script.replace(/parent\.postMessage[\s\S]*?"\*"\);/, "0;").replace("new ResizeObserver(report).observe(document.body)", "0");
+    new Function(rewritten)();
+    const div = document.querySelector("div")! as HTMLElement;
+    const p = document.querySelector("p")! as HTMLElement;
+    expect(div.style.getPropertyValue("background-color")).toBe("transparent");
+    expect(p.style.getPropertyValue("color")).toBe("inherit");
+  });
+});
diff --git a/services/webmail/src/lib/emailBody.ts b/services/webmail/src/lib/emailBody.ts
index 7a4f19c..e6bd91a 100644
--- a/services/webmail/src/lib/emailBody.ts
+++ b/services/webmail/src/lib/emailBody.ts
@@ -33,18 +33,69 @@ export function resolveInlineImages(html: string, images: InlineImages): string
   );
 }
 
+/**
+ * Whether a message was designed, as a newsletter or a receipt is, rather than
+ * just written, as a letter between two people is.
+ *
+ * A designed message brings its own colours, tables and background images, and
+ * they only make sense on the white sheet it was drawn for. A written one has
+ * nothing of the kind and reads best when it takes the app's own colours - on a
+ * dark ground, a plain note as a bright white slab is the loudest thing on the
+ * screen and says nothing the words do not.
+ *
+ * Plain white is not design: Outlook paints it behind everything it sends.
+ */
+export function looksDesigned(html: string): boolean {
+  if (!html) return false;
+  const neutral = /^\s*(?:#f{3}(?:f{3})?|white|transparent|none|rgba?\(\s*255\s*,\s*255\s*,\s*255(?:\s*,\s*(?:1|1\.0|0?\.\d+))?\s*\)|rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\))\s*(?:!important)?\s*;?\s*$/i;
+
+  // bgcolor="#336699" and background="hero.png" are always a statement.
+  for (const m of html.matchAll(/\b(?:bgcolor|background)\s*=\s*(["']?)([^"'\s>]+)\1/gi)) {
+    if (!neutral.test(m[2])) return true;
+  }
+  // background / background-color in a style attribute or a <style> block.
+  for (const m of html.matchAll(/background(?:-color|-image)?\s*:\s*([^;}"']+)/gi)) {
+    const value = m[1].trim();
+    if (/url\(/i.test(value) || !neutral.test(value)) return true;
+  }
+  // A layout built from tables is a design even where nothing is coloured.
+  return (html.match(/<table\b/gi) ?? []).length >= 3;
+}
+
+/** The colours a message is drawn in, by the way it is shown. */
+const SURFACES = {
+  paper: { fg: "#1d1d1f", muted: "#5b6272", link: "#3f4fe6", rule: "#d6d9e0", wash: "rgba(20,28,50,.05)", scheme: "light" },
+  dark: { fg: "#e6e9f0", muted: "#8e96a8", link: "#8794ff", rule: "#383e4d", wash: "rgba(233,237,245,.07)", scheme: "dark" },
+  light: { fg: "#12151c", muted: "#5b6272", link: "#3f4fe6", rule: "#cdd1db", wash: "rgba(20,28,50,.05)", scheme: "light" },
+} as const;
+
+export interface ReaderDocumentOptions {
+  /** The app's theme, which a message written plainly takes the colours of. */
+  theme?: "dark" | "light";
+  /**
+   * Draw the message on a white sheet, as it was written. A designed message
+   * always is; a plain one only when the reader asks to see it as sent.
+   */
+  paper?: boolean;
+}
+
 /**
  * Wraps a message body in the document the reader frame renders.
  *
  * The frame is sandboxed with an opaque origin, so it cannot inherit anything
- * from the app: every style, the light surface mail assumes, and the height
- * report the host page sizes the frame from all have to travel inside it.
+ * from the app: every style, the surface mail assumes, the height report the
+ * host page sizes the frame from and the little script that tidies a message
+ * all have to travel inside it.
  */
-export function buildReaderDocument(bodyHtml: string): string {
+export function buildReaderDocument(bodyHtml: string, options: ReaderDocumentOptions = {}): string {
+  const paper = options.paper ?? true;
+  const surface = paper ? SURFACES.paper : SURFACES[options.theme ?? "dark"];
+  const native = !paper;
   return `<!doctype html>
 <html><head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="${surface.scheme}">
 <!-- Every link leaves this document: it has an opaque origin, so navigating in
      place strands the reader on a blank pane with no way back. Declared here
      rather than only in script so it holds even if script does not run. -->
@@ -53,11 +104,13 @@ export function buildReaderDocument(bodyHtml: string): string {
      with it, and this holds without script. -->
 <meta name="referrer" content="no-referrer">
 <style>
-  html { background:#ffffff; }
+  :root { color-scheme:${surface.scheme}; }
+  html { background:${native ? "transparent" : "#ffffff"}; }
   body {
-    margin:0; padding:24px 28px; background:#ffffff; color:#1d1d1f;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
+    margin:0; padding:${native ? "2px 0 6px" : "26px 30px"}; background:${native ? "transparent" : "#ffffff"}; color:${surface.fg};
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size:${native ? "15.5px" : "15px"}; line-height:${native ? "1.68" : "1.55"};
+    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
     /* Mail is written against desktop widths. Without these a newsletter
        pushes a horizontal scrollbar across its own content. */
     overflow-wrap:anywhere; word-break:break-word;
@@ -68,12 +121,24 @@ export function buildReaderDocument(bodyHtml: string): string {
   /* A layout table keeps the width its author gave it - forcing "auto" is what
      collapsed designed messages into a narrow column. max-width above is what
      stops one from overflowing a small screen. */
+  p { margin:0 0 .9em; }
+  ${native ? "img { border-radius:8px; }" : ""}
+  a { color:${surface.link}; text-decoration-thickness:1px; text-underline-offset:2px; }
+  pre, code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.9em; }
+  pre { white-space:pre-wrap; background:${surface.wash}; padding:12px 14px; border-radius:8px; }
   blockquote {
-    margin:0 0 0 4px; padding-left:12px;
-    border-left:3px solid #cbd5e1; color:#475569;
+    margin:.4em 0 .9em; padding:2px 0 2px 14px;
+    border-left:3px solid ${surface.rule}; color:${surface.muted};
   }
-  a { color:#4f46e5; }
-  pre { white-space:pre-wrap; }
+  hr { border:0; border-top:1px solid ${surface.rule}; margin:1.2em 0; }
+  /* The button that stands in for a reply's quoted history. */
+  .lm-quote-toggle {
+    display:inline-flex; align-items:center; justify-content:center; height:20px; padding:0 9px; margin:2px 0 8px;
+    border:0; border-radius:10px; background:${surface.wash}; color:${surface.muted};
+    font:600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing:.08em; cursor:pointer;
+  }
+  .lm-quote-toggle:hover { color:${surface.fg}; }
+  .lm-quote-toggle:focus-visible { outline:2px solid ${surface.link}; outline-offset:2px; }
 </style>
 </head>
 <body>
@@ -85,6 +150,47 @@ ${bodyHtml}
     link.setAttribute("rel", "noopener noreferrer");
   }
 
+  ${native ? `// A message written plainly is drawn in the app's colours, but it may still
+  // carry its own: black text it was given by the program that wrote it, and a
+  // white backdrop behind every block. Dark text on a dark ground is the one
+  // thing this must never produce, so any colour too close to the ground goes.
+  (function () {
+    const dark = ${surface.scheme === "dark"};
+    const channels = (value) => (value.match(/[0-9.]+/g) || []).map(Number);
+    const luminance = ([r, g, b]) => (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+    for (const el of document.body.querySelectorAll("*")) {
+      const style = getComputedStyle(el);
+      const [r, g, b, a = 1] = channels(style.backgroundColor);
+      if (a > 0 && r > 244 && g > 244 && b > 244) el.style.setProperty("background-color", "transparent", "important");
+      const [fr, fg, fb] = channels(style.color);
+      const lum = luminance([fr, fg, fb]);
+      if ((dark && lum < 0.42) || (!dark && lum > 0.62)) el.style.removeProperty("color"), el.removeAttribute("color"), el.style.setProperty("color", "inherit", "important");
+    }
+  })();` : ""}
+
+  // A reply carries the whole conversation under it. The history is one click
+  // away rather than a screenful in the way - and in a conversation, where each
+  // message is shown anyway, it is a duplicate.
+  (function () {
+    const quotes = [...document.querySelectorAll("blockquote")].filter((q) => !q.parentElement.closest("blockquote"));
+    for (const quote of quotes) {
+      if ((quote.textContent || "").trim().length < 60) continue;
+      const toggle = document.createElement("button");
+      toggle.type = "button";
+      toggle.className = "lm-quote-toggle";
+      toggle.textContent = "\u00b7\u00b7\u00b7";
+      toggle.setAttribute("aria-expanded", "false");
+      toggle.title = "...";
+      quote.style.display = "none";
+      toggle.addEventListener("click", () => {
+        const open = quote.style.display === "none";
+        quote.style.display = open ? "" : "none";
+        toggle.setAttribute("aria-expanded", String(open));
+      });
+      quote.parentNode.insertBefore(toggle, quote);
+    }
+  })();
+
   // The host sizes the frame from this rather than guessing: a fixed height
   // either clips a long message or leaves a slab of empty white under a short
   // one, and a sandboxed frame cannot be measured from outside.
diff --git a/services/webmail/src/lib/renderMessage.ts b/services/webmail/src/lib/renderMessage.ts
index a3845cb..b4e87a4 100644
--- a/services/webmail/src/lib/renderMessage.ts
+++ b/services/webmail/src/lib/renderMessage.ts
@@ -1,5 +1,5 @@
 import { sanitizeEmailHtml, blockRemoteImages, unblockRemoteImages } from "./sanitizer";
-import { resolveInlineImages, buildReaderDocument, type InlineImages } from "./emailBody";
+import { resolveInlineImages, buildReaderDocument, looksDesigned, type InlineImages } from "./emailBody";
 
 /** What it takes to draw a message's body. */
 export interface RenderableBody {
@@ -14,13 +14,34 @@ export interface RenderableBody {
  * markup, then resolve the message's own inline parts, then block or restore
  * remote sources - which is the only part the reader chooses.
  */
-export function messageDocument(message: RenderableBody, showImages: boolean): string | null {
+export interface RenderedBody {
+  /** The document for the reader frame. */
+  document: string;
+  /** Drawn on a white sheet (designed mail, or the reader asked for the original). */
+  paper: boolean;
+  /** A plain message that could have taken the app's colours but was kept as sent. */
+  canAdapt: boolean;
+}
+
+export interface RenderOptions {
+  theme: "dark" | "light";
+  /** Show a plainly written message as it was sent instead of in the app's colours. */
+  original?: boolean;
+}
+
+export function messageDocument(message: RenderableBody, showImages: boolean, options: RenderOptions): RenderedBody | null {
   if (!message.html) return null;
   const sanitized = sanitizeEmailHtml(message.html);
   if (!sanitized) return null;
   const withInline = resolveInlineImages(sanitized, message.inline_images ?? {});
   const body = showImages ? unblockRemoteImages(withInline) : blockRemoteImages(withInline);
-  return buildReaderDocument(body);
+  const designed = looksDesigned(sanitized);
+  const paper = designed || Boolean(options.original);
+  return {
+    document: buildReaderDocument(body, { theme: options.theme, paper }),
+    paper,
+    canAdapt: !designed,
+  };
 }
 
 /**