fix: Convert rich text to inline styles for reliable email rendering

Fix highlighting and all rich text formatting in emails by converting HTML tags to inline styles before sending. Email clients strip <style> blocks, so inline styles are the only reliable method.

Changes:
- Convert <mark> tags to <span> with inline background-color (#fef08a)
- Add inline styles to all rich text elements (strong, em, u, s, headings, lists)
- Process HTML conversion in email API before sending
- Simplified email template by removing unreliable <style> block
- All formatting now uses inline styles directly on elements

This ensures highlights and all other formatting (bold, italic, underline, strikethrough, headings, lists) render correctly across all email clients including Gmail, Outlook, Apple Mail, etc.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

server/api/notes/email/[sermonId].post.ts

@@ -43,7 +43,25 @@ export default defineEventHandler(async (event) => {
 
   // Get user's notes (already stored as HTML from rich text editor)
   const noteRecord = getSermonNote(user.id!, sermonId)
-  const userNotes = noteRecord?.notes || '<p>No notes taken</p>'
+  let userNotes = noteRecord?.notes || '<p>No notes taken</p>'
+
+  // Convert Tiptap HTML to email-friendly HTML with inline styles
+  // Email clients don't support <style> blocks well, so we need inline styles
+  userNotes = userNotes
+    // Convert <mark> to <span> with inline background color (email clients often don't support <mark>)
+    .replace(/<mark>/gi, '<span style="background-color: #fef08a; padding: 2px 4px; border-radius: 2px;">')
+    .replace(/<\/mark>/gi, '</span>')
+    // Add inline styles to other elements
+    .replace(/<strong>/gi, '<strong style="font-weight: 700;">')
+    .replace(/<em>/gi, '<em style="font-style: italic;">')
+    .replace(/<u>/gi, '<u style="text-decoration: underline;">')
+    .replace(/<s>/gi, '<s style="text-decoration: line-through;">')
+    .replace(/<h2>/gi, '<h2 style="font-size: 1.5em; font-weight: 700; margin: 1em 0 0.5em; color: #333;">')
+    .replace(/<h3>/gi, '<h3 style="font-size: 1.25em; font-weight: 600; margin: 0.75em 0 0.5em; color: #333;">')
+    .replace(/<ul>/gi, '<ul style="padding-left: 1.5em; margin: 0.5em 0;">')
+    .replace(/<ol>/gi, '<ol style="padding-left: 1.5em; margin: 0.5em 0;">')
+    .replace(/<li>/gi, '<li style="margin: 0.25em 0;">')
+    .replace(/<p>/gi, '<p style="margin: 0.5em 0;">')
 
   // Format bible references for HTML email
   let bibleReferencesText = ''