Improve image lightbox controls (#1084)

desktop/src/shared/styles/globals.css

@@ -2021,6 +2021,73 @@
   }
 }
 
+/* ── Image lightbox zoom slider (shared/ui/markdown) ───────────────────
+   Matches the white-on-glass media control track used by the video player. */
+.image-zoom-slider {
+  appearance: none;
+  background: transparent;
+}
+
+.image-zoom-slider:focus-visible {
+  outline: none;
+  border-radius: 9999px;
+  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7);
+}
+
+.image-zoom-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    white var(--image-zoom-fill, 0%),
+    rgb(255 255 255 / 0.3) var(--image-zoom-fill, 0%)
+  );
+}
+
+.image-zoom-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -4px;
+  height: 12px;
+  width: 12px;
+  border-radius: 9999px;
+  background: white;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
+}
+
+.image-zoom-slider:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    0 0 0 3px rgb(255 255 255 / 0.25),
+    0 1px 3px rgb(0 0 0 / 0.3);
+}
+
+.image-zoom-slider::-moz-range-track {
+  height: 4px;
+  border-radius: 9999px;
+  background: rgb(255 255 255 / 0.3);
+}
+
+.image-zoom-slider::-moz-range-progress {
+  height: 4px;
+  border-radius: 9999px;
+  background: white;
+}
+
+.image-zoom-slider::-moz-range-thumb {
+  border: none;
+  height: 12px;
+  width: 12px;
+  border-radius: 9999px;
+  background: white;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
+}
+
+.image-zoom-slider:focus-visible::-moz-range-thumb {
+  box-shadow:
+    0 0 0 3px rgb(255 255 255 / 0.25),
+    0 1px 3px rgb(0 0 0 / 0.3);
+}
+
 /* ── Video review overlay theme (shared/ui/VideoPlayer) ─────────────────
    The review dialog uses the shadcn "neutral" dark palette regardless of
    the app theme. Applied together with `.dark` on the portal root; this