fix(mdviewer): match selection colors to Phoenix CodeMirror theme

Light: focused #abdffa, unfocused #d5dee3
Dark: focused #0050a0, unfocused #333f48
Uses window focus/blur to toggle .content-focused class since
::selection + :focus doesn't work in WebKit.

Author: abose

src-mdviewer/src/bridge.js

@@ -265,6 +265,17 @@ export function initBridge() {
         sendToParent("mdviewrCursorSyncToggle", { enabled });
     });
 
+    // Toggle selection color class based on iframe focus
+    // (::selection + :focus doesn't work in WebKit)
+    window.addEventListener("focus", () => {
+        const content = document.getElementById("viewer-content");
+        if (content) content.classList.add("content-focused");
+    });
+    window.addEventListener("blur", () => {
+        const content = document.getElementById("viewer-content");
+        if (content) content.classList.remove("content-focused");
+    });
+
     // Notify parent that iframe is ready
     sendToParent("mdviewrReady", {});
 }

src-mdviewer/src/styles/markdown.css

@@ -412,8 +412,14 @@
   margin-bottom: var(--space-sm);
 }
 
-/* Selection */
+/* Selection — match Phoenix editor selection colors.
+   Toggled via .content-focused class on window focus/blur since
+   ::selection + :focus doesn't work in WebKit. */
 .markdown-body ::selection {
+  background-color: var(--color-selection-bg-unfocused);
+}
+
+.markdown-body.content-focused ::selection {
   background-color: var(--color-selection-bg);
 }
 

src-mdviewer/src/styles/themes/dark.css

@@ -51,8 +51,9 @@
   --color-table-row-alt: #252526;
   --color-table-row-hover: #2D2D2D;
 
-  /* Selection */
-  --color-selection-bg: #539bf533;
+  /* Selection — match Phoenix CodeMirror selection colors */
+  --color-selection-bg: #0050a0;
+  --color-selection-bg-unfocused: #333f48;
 
   /* Search highlight */
   --color-highlight: #ae7c1426;

src-mdviewer/src/styles/themes/light.css

@@ -51,8 +51,9 @@
   --color-table-row-alt: #f6f8fa;
   --color-table-row-hover: #eef3f8;
 
-  /* Selection */
-  --color-selection-bg: #0969da33;
+  /* Selection — match Phoenix CodeMirror selection colors */
+  --color-selection-bg: #abdffa;
+  --color-selection-bg-unfocused: #d5dee3;
 
   /* Search highlight */
   --color-highlight: #fff8c5;