Phase 5: reply drafts — template/LLM draft, edit, SMTP send (AUD-71)

Implements Phase 5 of AGENTS.md §11 (FR-8, FR-15):

- Message detail pane (GET /partials/message) with body, recommended
  action, reply identity, template picker, editable draft, and history.
- internal/reply: OmniRoute (OpenAI-compatible) chat client and a
  template-based draft generator. All non-JEV models go through
  OmniRoute (§10).
- internal/mailops: SMTP send over smtp.gmail.com:587 with STARTTLS and
  the app password, forcing IPv4 (§9); FR-15 reply identity (send as the
  arrived-at X-Pm-Original-To address, else "Sam Rolfe"); threading via
  In-Reply-To/References; -check-smtp safe verification; and a
  [Gmail]/Sent Mail thread check.
- Migration v5 stores messages.message_id_header and drafts.sent_at;
  mailfetch parses Message-ID.
- Send is user-triggered only: CSRF + UI confirm + confirm=yes guard,
  no auto-send, duplicate-send refused. A sent reply files the original
  under Replied-to/<address> and logs every step (FR-13).
- Tests for reply, mailops SMTP/identity/thread check, store drafts and
  migration v5, and the server draft/edit/send guards.
- docs/phase5-replies.md, README, .env.example, docker-compose updated.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

web/static/app.css

@@ -412,3 +412,57 @@ a:hover { text-decoration: underline; }
 }
 .btn-small { min-height: 32px; padding: 0 var(--space-sm); font: var(--type-caption); }
 .scan-note-error { color: var(--sticker-red); }
+
+/* Phase 5: message detail, reply draft, and send (FR-8, FR-15) */
+#message-detail { min-width: 0; }
+.msg-open {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+.msg-open:hover .msg-subject,
+.msg-open:focus-visible .msg-subject { color: var(--primary); }
+.detail-meta { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); }
+.detail-subject { font: var(--type-title-sm, 600 16px/1.3 Inter, sans-serif); color: var(--ink); }
+.detail-pills { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
+.detail-original { margin: var(--space-sm) 0 var(--space-md); }
+.detail-original summary {
+  cursor: pointer;
+  font: var(--type-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: .125px;
+  color: var(--ink-faint);
+  padding: var(--space-xs) 0;
+}
+.detail-text {
+  margin: var(--space-xs) 0 0;
+  padding: var(--space-sm);
+  max-height: 320px;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: var(--canvas-soft, var(--surface-2, #f6f5f4));
+  border: 1px solid var(--hairline);
+  border-radius: 4px;
+  font: var(--type-body-sm);
+  color: var(--ink-secondary);
+}
+.reply-box { border-top: 1px solid var(--hairline); padding-top: var(--space-md); display: grid; gap: var(--space-sm); }
+.reply-box h3, .reply-history h3 { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: .125px; color: var(--ink-faint); margin: 0; }
+.reply-identity { display: grid; gap: 2px; font: var(--type-body-sm); }
+.reply-value { color: var(--ink-secondary); overflow-wrap: anywhere; }
+.reply-draft-form, .reply-send-form { display: grid; gap: var(--space-sm); }
+.reply-textarea { width: 100%; resize: vertical; min-height: 160px; line-height: 1.5; }
+.reply-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
+.reply-history { border-top: 1px solid var(--hairline); margin-top: var(--space-md); padding-top: var(--space-md); }
+.history-list { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
+.history-list li { font: var(--type-caption); color: var(--ink-secondary); overflow-wrap: anywhere; }
+@media (max-width: 759px) {
+  .reply-actions .btn { flex: 1 1 auto; }
+}