feat: dashboard UI/UX overhaul from full review

Shared foundation:
- New Modal component on native <dialog>.showModal() (focus trap, inert
  background, Escape, focus restore, scroll lock); all eight dialogs and
  both globalThis.confirm calls migrated to it
- Design tokens for success/warning/danger surfaces; pill danger variant;
  .sr-only utility; toast layering above dialog backdrops; not-allowed
  cursor for validity-disabled buttons

Conversations/attention: auto-scroll with jump-to-latest, per-conversation
draft persistence, suggestion undo, 30s auto-refresh with refresh controls,
unread emphasis and counts, blur-consistent share dialog, empty-accounts
guidance, collapsed user lookup, relative timestamps, danger pills for
critical items

Media/library/outreach: click-blurred-to-reveal, lightbox with arrow
navigation and captions, dirty-form preservation across refetches, upload
validation with thumbnail preview, save feedback, result counts with
load-more and clear-filters, ticking countdowns from a single clock

Overview/performance/operations/settings: mutation errors inside the
confirm dialog, live sending-window countdown, offline-aware loading
states, per-panel loading/error with retry, 7/30/90-day range toggle,
console scroll yielding with shown/retained counts, risky-save matching
by subreddit name instead of index, useBlocker unsaved-changes guard,
single-pass validation with focus-to-first-error, access panel JSON
validation and input reset

Tests: 806 -> 844 passing; both typechecks clean.

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

apps/dashboard/src/features/media/filters.ts

@@ -15,6 +15,12 @@ export function mediaType(item: MediaItem): 'image' | 'gif' {
   return item.fileName.toLowerCase().endsWith('.gif') ? 'gif' : 'image';
 }
 
+export function mediaAlt(item: MediaItem): string {
+  const kind = mediaType(item) === 'gif' ? 'GIF' : 'Image';
+  const date = new Intl.DateTimeFormat(undefined, { day: 'numeric', month: 'short' }).format(item.timestamp);
+  return `${kind} from u/${item.sender}, ${date}`;
+}
+
 export function filterMedia(items: MediaItem[], filters: MediaFilters, now: number): MediaItem[] {
   const rangeMs = {
     all: null,

apps/dashboard/src/features/media/full-sync-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { Modal } from '../../components/modal.js';
 
 interface FullSyncDialogProps {
   isPending: boolean;
@@ -7,27 +7,24 @@ interface FullSyncDialogProps {
 }
 
 export function FullSyncDialog({ isPending, onCancel, onConfirm }: FullSyncDialogProps) {
-  const cancelButtonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    cancelButtonRef.current?.focus();
-  }, []);
-
   return (
-    <div aria-labelledby="full-sync-title" aria-modal="true" className="dialog-backdrop" role="dialog">
-      <div className="dialog-card">
-        <span className="eyebrow">Confirm expensive action</span>
-        <h2 id="full-sync-title">Run full media sync?</h2>
-        <p>This scans every conversation and can take several minutes. Routine refreshes should use Sync new media.</p>
-        <div className="dialog-actions">
-          <button className="button secondary" disabled={isPending} onClick={onCancel} ref={cancelButtonRef} type="button">
-            Cancel
-          </button>
-          <button className="button danger" disabled={isPending} onClick={onConfirm} type="button">
-            {isPending ? 'Syncing…' : 'Run full sync'}
-          </button>
-        </div>
+    <Modal
+      className="dialog-card"
+      isDismissLocked={isPending}
+      labelledBy="full-sync-title"
+      onClose={onCancel}
+    >
+      <span className="eyebrow">Confirm expensive action</span>
+      <h2 id="full-sync-title">Run full media sync?</h2>
+      <p>This scans every conversation and can take several minutes. Routine refreshes should use Sync new media.</p>
+      <div className="dialog-actions">
+        <button autoFocus className="button secondary" disabled={isPending} onClick={onCancel} type="button">
+          Cancel
+        </button>
+        <button aria-busy={isPending || undefined} className="button danger" disabled={isPending} onClick={onConfirm} type="button">
+          {isPending ? 'Syncing…' : 'Run full sync'}
+        </button>
       </div>
-    </div>
+    </Modal>
   );
 }

apps/dashboard/src/features/media/media-card.tsx

@@ -2,7 +2,7 @@ import type { MediaItem } from '../../../../../packages/api-contracts/src/index.
 import { Link } from 'react-router-dom';
 import { RedditUsernameLink } from '../../components/reddit-username-link.js';
 import { createOwnedConversationId } from '../conversations/conversation-identity.js';
-import { mediaConversation, mediaType } from './filters.js';
+import { mediaAlt, mediaConversation, mediaType } from './filters.js';
 import { AccountOwnerBadge } from '../../components/account-owner-badge.js';
 
 interface MediaCardProps {
@@ -26,21 +26,23 @@ export function MediaCard({ item, isRevealed, onToggleReveal, onOpenPreview }: M
     <article className="media-card">
       <div className="media-preview">
         <button
-          aria-label={`View media from ${item.sender} larger`}
+          aria-label={isRevealed ? `View media from ${item.sender} larger` : `Reveal media from ${item.sender}`}
           className="media-preview-button"
-          disabled={!isRevealed}
-          onClick={onOpenPreview}
+          onClick={() => {
+            if (isRevealed) onOpenPreview();
+            else onToggleReveal();
+          }}
           type="button"
         >
-          <img alt={`Media from ${item.sender}`} className={isRevealed ? 'media-image' : 'media-image is-blurred'} loading="lazy" src={item.urlPath} />
+          <img alt={mediaAlt(item)} className={isRevealed ? 'media-image' : 'media-image is-blurred'} loading="lazy" src={item.urlPath} />
         </button>
         {!isRevealed ? <span className="privacy-label">Private media hidden</span> : null}
       </div>
       <div className="media-card-body">
         <AccountOwnerBadge owner={item.owner} />
         <div>
-          <strong><RedditUsernameLink showPrefix={false} username={item.sender} /></strong>
-          <span>{item.chatUsername
+          <strong><span className="media-link-prefix">From</span> <RedditUsernameLink showPrefix={false} username={item.sender} /></strong>
+          <span><span className="media-link-prefix">Conversation</span> {item.chatUsername
             ? <RedditUsernameLink showPrefix={false} username={item.chatUsername} />
             : mediaConversation(item)}</span>
         </div>
@@ -54,6 +56,7 @@ export function MediaCard({ item, isRevealed, onToggleReveal, onOpenPreview }: M
           </Link>
         ) : null}
         <button
+          aria-pressed={isRevealed}
           className="button secondary media-reveal"
           onClick={onToggleReveal}
           type="button"

apps/dashboard/src/features/media/media-page.tsx

@@ -1,8 +1,8 @@
-import { useMemo, useState } from 'react';
-import { filterMedia, mediaConversation, type MediaFilters } from './filters.js';
+import { useEffect, useMemo, useState } from 'react';
+import { filterMedia, mediaAlt, mediaConversation, type MediaFilters } from './filters.js';
 import { FullSyncDialog } from './full-sync-dialog.js';
 import { MediaCard } from './media-card.js';
-import { MediaPreviewDialog } from './media-preview-dialog.js';
+import { MediaPreviewDialog, type MediaPreviewEntry } from './media-preview-dialog.js';
 import { useMediaQuery, useMediaSyncStatusQuery, useTriggerMediaSyncMutation } from './queries.js';
 import './media.css';
 
@@ -13,6 +13,9 @@ export const initialMediaFilters: MediaFilters = {
   dateRange: 'all',
 };
 
+const PAGE_SIZE = 48;
+const SUCCESS_NOTICE_MS = 5_000;
+
 function errorMessage(error: Error | null): string {
   return error?.message ?? 'Something went wrong.';
 }
@@ -36,9 +39,11 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
   const [isRevealAll, setIsRevealAll] = useState(false);
   const [isFullSyncDialogOpen, setIsFullSyncDialogOpen] = useState(false);
   const [previewItemId, setPreviewItemId] = useState<string | null>(null);
+  const [visibleLimit, setVisibleLimit] = useState(PAGE_SIZE);
 
   const items = mediaQuery.data ?? [];
   const visibleItems = useMemo(() => filterMedia(items, filters, Date.now()), [items, filters]);
+  const displayedItems = visibleItems.slice(0, visibleLimit);
   const conversations = useMemo(
     () => [...new Set(items.map(mediaConversation))].sort((left, right) => left.localeCompare(right)),
     [items],
@@ -48,12 +53,37 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
     [items],
   );
   const isSyncBusy = statusQuery.data?.isSyncing === true || syncMutation.isPending;
-  const previewItem = items.find((item) => item.id === previewItemId) ?? null;
+  const isFiltered = filters.conversation !== 'all' || filters.sender !== 'all' || filters.type !== 'all' || filters.dateRange !== 'all';
+  const previewIndex = previewItemId === null ? -1 : visibleItems.findIndex((item) => item.id === previewItemId);
+  const previewEntries: MediaPreviewEntry[] = useMemo(
+    () => visibleItems.map((item) => ({
+      id: item.id,
+      src: item.urlPath,
+      alt: mediaAlt(item),
+      label: `Media from ${item.sender}`,
+      captionTitle: `u/${item.sender}`,
+      captionSubtitle: formatLastSync(item.timestamp),
+    })),
+    [visibleItems],
+  );
 
-  function updateFilter<Key extends keyof MediaFilters>(key: Key, value: MediaFilters[Key]) {
-    const next = { ...filters, [key]: value };
+  const isSyncSuccess = syncMutation.isSuccess;
+  useEffect(() => {
+    if (!isSyncSuccess) return;
+    const timer = setTimeout(() => syncMutation.reset(), SUCCESS_NOTICE_MS);
+    return () => clearTimeout(timer);
+    // syncMutation is a fresh object every render; keying on isSuccess is intentional.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSyncSuccess]);
+
+  function updateFilters(next: MediaFilters) {
     if (controlledFilters === undefined) setLocalFilters(next);
     onFiltersChange?.(next);
+    setVisibleLimit(PAGE_SIZE);
+  }
+
+  function updateFilter<Key extends keyof MediaFilters>(key: Key, value: MediaFilters[Key]) {
+    updateFilters({ ...filters, [key]: value });
   }
 
   function toggleItem(itemId: string) {
@@ -90,7 +120,15 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
       <div className="page-state error-state" role="alert">
         <strong>Media unavailable</strong>
         <span>{errorMessage(mediaQuery.error)}</span>
-        <button className="button secondary" onClick={() => void mediaQuery.refetch()} type="button">Retry media</button>
+        <button
+          aria-busy={mediaQuery.isFetching || undefined}
+          className="button secondary"
+          disabled={mediaQuery.isFetching}
+          onClick={() => void mediaQuery.refetch()}
+          type="button"
+        >
+          {mediaQuery.isFetching ? 'Refreshing…' : 'Retry media'}
+        </button>
       </div>
     );
   }
@@ -106,11 +144,9 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
         <div className="header-actions">
           {items.length > 0 ? (
             <button
+              aria-pressed={isRevealAll}
               className="button secondary"
-              onClick={() => {
-                setIsRevealAll((current) => !current);
-                setRevealedIds(new Set());
-              }}
+              onClick={() => setIsRevealAll((current) => !current)}
               type="button"
             >
               {isRevealAll ? 'Blur all media' : 'Reveal all media'}
@@ -127,7 +163,7 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
           >
             Full sync
           </button>
-          <button className="button primary" disabled={isSyncBusy} onClick={() => runSync(false)} type="button">
+          <button aria-busy={isSyncBusy || undefined} className="button primary" disabled={isSyncBusy} onClick={() => runSync(false)} type="button">
             {isSyncBusy ? 'Syncing…' : 'Sync new media'}
           </button>
         </div>
@@ -138,7 +174,15 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
         {statusQuery.isError ? (
           <div role="alert">
             <span>{errorMessage(statusQuery.error)}</span>
-            <button className="button secondary" onClick={() => void statusQuery.refetch()} type="button">Retry sync status</button>
+            <button
+              aria-busy={statusQuery.isFetching || undefined}
+              className="button secondary"
+              disabled={statusQuery.isFetching}
+              onClick={() => void statusQuery.refetch()}
+              type="button"
+            >
+              {statusQuery.isFetching ? 'Refreshing…' : 'Retry sync status'}
+            </button>
           </div>
         ) : null}
         {statusQuery.data ? (
@@ -188,22 +232,45 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
                 <option value="all">Any time</option><option value="24h">Past 24 hours</option><option value="7d">Past 7 days</option><option value="30d">Past 30 days</option>
               </select>
             </label>
+            <div className="media-filter-summary">
+              <span role="status">Showing {displayedItems.length} of {items.length} items</span>
+              {isFiltered ? (
+                <button className="button secondary" onClick={() => updateFilters(initialMediaFilters)} type="button">
+                  Clear filters
+                </button>
+              ) : null}
+            </div>
           </section>
 
           {visibleItems.length === 0 ? (
-            <section className="panel empty-state"><strong>No media matches these filters.</strong><span>Try broadening one or more filters.</span></section>
-          ) : (
-            <section aria-label="Media gallery" className="media-grid">
-              {visibleItems.map((item) => (
-                <MediaCard
-                  isRevealed={isRevealAll || revealedIds.has(item.id)}
-                  item={item}
-                  key={item.id}
-                  onOpenPreview={() => setPreviewItemId(item.id)}
-                  onToggleReveal={() => toggleItem(item.id)}
-                />
-              ))}
+            <section className="panel empty-state">
+              <strong>No media matches these filters.</strong>
+              <span>Try broadening one or more filters.</span>
+              <button className="button secondary" onClick={() => updateFilters(initialMediaFilters)} type="button">
+                Clear filters
+              </button>
             </section>
+          ) : (
+            <>
+              <section aria-label="Media gallery" className="media-grid">
+                {displayedItems.map((item) => (
+                  <MediaCard
+                    isRevealed={isRevealAll || revealedIds.has(item.id)}
+                    item={item}
+                    key={item.id}
+                    onOpenPreview={() => setPreviewItemId(item.id)}
+                    onToggleReveal={() => toggleItem(item.id)}
+                  />
+                ))}
+              </section>
+              {visibleItems.length > displayedItems.length ? (
+                <div className="media-load-more">
+                  <button className="button secondary" onClick={() => setVisibleLimit((current) => current + PAGE_SIZE)} type="button">
+                    Load more ({visibleItems.length - displayedItems.length} remaining)
+                  </button>
+                </div>
+              ) : null}
+            </>
           )}
         </>
       )}
@@ -215,7 +282,14 @@ export function MediaPage({ filters: controlledFilters, onFiltersChange }: Media
           onConfirm={() => runSync(true)}
         />
       ) : null}
-      {previewItem ? <MediaPreviewDialog item={previewItem} onClose={() => setPreviewItemId(null)} /> : null}
+      {previewIndex >= 0 ? (
+        <MediaPreviewDialog
+          entries={previewEntries}
+          index={previewIndex}
+          onClose={() => setPreviewItemId(null)}
+          onNavigate={(nextIndex) => setPreviewItemId(visibleItems[nextIndex]?.id ?? null)}
+        />
+      ) : null}
     </div>
   );
 }

apps/dashboard/src/features/media/media-preview-dialog.tsx

@@ -1,37 +1,119 @@
-import { useEffect, useRef } from 'react';
-import type { MediaItem } from '../../../../../packages/api-contracts/src/index.js';
+import { useEffect, useState } from 'react';
+import { Modal } from '../../components/modal.js';
+
+export interface MediaPreviewEntry {
+  id: string;
+  src: string;
+  alt: string;
+  /** Accessible name for the dialog. */
+  label: string;
+  /** Caption bar: sender (or file name) plus optional date line. */
+  captionTitle: string;
+  captionSubtitle?: string;
+}
 
 interface MediaPreviewDialogProps {
-  item: MediaItem;
+  entries: MediaPreviewEntry[];
+  index: number;
+  onNavigate?(index: number): void;
   onClose(): void;
 }
 
-export function MediaPreviewDialog({ item, onClose }: MediaPreviewDialogProps) {
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-
+/**
+ * Full-screen lightbox for conversation and library media. When more than one
+ * entry is provided, previous/next buttons and ArrowLeft/ArrowRight navigate
+ * the visible set.
+ */
+export function MediaPreviewDialog({ entries, index, onNavigate, onClose }: MediaPreviewDialogProps) {
+  const entry = entries[index];
+  const [isLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
-    closeButtonRef.current?.focus();
+    setIsLoaded(false);
+  }, [entry?.src]);
+
+  const hasPrevious = index > 0;
+  const hasNext = index < entries.length - 1;
+  const canNavigate = entries.length > 1 && onNavigate !== undefined;
+
+  // Arrow keys navigate regardless of which control inside the modal holds
+  // focus (a nav button can become disabled, dropping focus).
+  useEffect(() => {
+    if (!canNavigate) return;
     function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === 'Escape') onClose();
+      if (event.key === 'ArrowLeft' && hasPrevious) {
+        event.preventDefault();
+        onNavigate?.(index - 1);
+      } else if (event.key === 'ArrowRight' && hasNext) {
+        event.preventDefault();
+        onNavigate?.(index + 1);
+      }
     }
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [onClose]);
+  }, [canNavigate, hasPrevious, hasNext, index, onNavigate]);
+
+  if (!entry) return null;
+
+  function goPrevious() {
+    if (hasPrevious) onNavigate?.(index - 1);
+  }
+
+  function goNext() {
+    if (hasNext) onNavigate?.(index + 1);
+  }
 
   return (
-    <div
-      aria-label={`Media from ${item.sender}`}
-      aria-modal="true"
-      className="media-preview-dialog-backdrop"
-      onClick={(event) => {
-        if (event.target === event.currentTarget) onClose();
-      }}
-      role="dialog"
-    >
+    <Modal className="media-preview-dialog" closeOnBackdrop label={entry.label} onClose={onClose}>
       <div className="media-preview-dialog-content">
-        <img alt={`Media from ${item.sender}`} className="media-preview-dialog-image" src={item.urlPath} />
-        <button aria-label="Close media preview" className="media-preview-dialog-close" onClick={onClose} ref={closeButtonRef} type="button">×</button>
+        {!isLoaded ? (
+          <span className="media-preview-dialog-loading" role="status">
+            <span className="spinner" />
+            <span className="sr-only">Loading full-size media</span>
+          </span>
+        ) : null}
+        <img
+          alt={entry.alt}
+          className={isLoaded ? 'media-preview-dialog-image' : 'media-preview-dialog-image is-loading'}
+          onLoad={() => setIsLoaded(true)}
+          src={entry.src}
+        />
+        <button
+          aria-label="Close media preview"
+          autoFocus
+          className="media-preview-dialog-close"
+          onClick={onClose}
+          type="button"
+        >
+          ×
+        </button>
+        {canNavigate ? (
+          <>
+            <button
+              aria-label="Previous media"
+              className="media-preview-dialog-nav is-previous"
+              disabled={!hasPrevious}
+              onClick={goPrevious}
+              type="button"
+            >
+              ‹
+            </button>
+            <button
+              aria-label="Next media"
+              className="media-preview-dialog-nav is-next"
+              disabled={!hasNext}
+              onClick={goNext}
+              type="button"
+            >
+              ›
+            </button>
+          </>
+        ) : null}
+        <div className="media-preview-dialog-caption">
+          <strong>{entry.captionTitle}</strong>
+          {entry.captionSubtitle ? <span>{entry.captionSubtitle}</span> : null}
+          {canNavigate ? <span>{index + 1} of {entries.length}</span> : null}
+        </div>
       </div>
-    </div>
+    </Modal>
   );
 }

apps/dashboard/src/features/media/media.css

@@ -3,13 +3,15 @@
 .media-sync-status > div[role="alert"] { width: 100%; justify-content: space-between; }
 .media-sync-status .spinner { width: 1rem; height: 1rem; }
 .media-notice { padding: .8rem 1rem; margin-bottom: 1rem; border-radius: .75rem; font-weight: 700; }
-.media-notice.success { color: #aaf0c4; background: #163a26; border: 1px solid #28593d; }
-.media-notice.error { color: #ffd1ce; background: #461b18; border: 1px solid #80352f; }
+.media-notice.success { color: var(--success-text); background: var(--success-bg); border: 1px solid var(--success-border); }
+.media-notice.error { color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-border); }
 .media-filters { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-bottom: 1rem; }
 .media-filters label { display: grid; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
 .media-filters select { width: 100%; min-height: 2.6rem; padding: .5rem .7rem; color: #e9f1ec; background: var(--surface-raised); border: 1px solid var(--border); border-radius: .6rem; }
 .media-filters select:focus-visible, .media-reveal:focus-visible, .media-conversation-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.media-filter-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; grid-column: 1 / -1; color: var(--muted); font-size: .82rem; }
 .media-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
+.media-load-more { display: flex; justify-content: center; margin-top: 1rem; }
 .media-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; }
 .media-preview { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: #050907; }
 .media-preview-button { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
@@ -20,17 +22,30 @@
 .media-card-body { display: grid; gap: .8rem; padding: .9rem; }
 .media-card-body > div:first-child { display: flex; justify-content: space-between; gap: .75rem; }
 .media-card-body > div:first-child span { color: var(--muted); }
+.media-link-prefix { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
 .media-card-body dl { display: grid; gap: .4rem; margin: 0; }
 .media-card-body dl div { display: flex; justify-content: space-between; gap: .75rem; }
 .media-card-body dt { color: var(--muted); }
 .media-card-body dd { margin: 0; text-align: right; }
 .media-conversation-link { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
 .media-reveal { width: 100%; }
-.media-preview-dialog-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .88); }
+
+/* Full-screen lightbox rendered through the shared <dialog> Modal. */
+dialog.media-preview-dialog { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; padding: 1rem; border: 0; background: transparent; }
+dialog.media-preview-dialog::backdrop { background: rgba(0, 0, 0, .9); }
 .media-preview-dialog-content { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
-.media-preview-dialog-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
+.media-preview-dialog-image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100% - 3.6rem); object-fit: contain; }
+.media-preview-dialog-image.is-loading { opacity: 0; }
+.media-preview-dialog-loading { position: absolute; display: grid; place-items: center; color: white; }
 .media-preview-dialog-close { position: absolute; top: .5rem; right: .5rem; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; color: white; background: rgba(0, 0, 0, .7); font-size: 2rem; line-height: 1; cursor: pointer; }
 .media-preview-dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.media-preview-dialog-nav { position: absolute; top: 50%; width: 2.75rem; height: 2.75rem; padding: 0; transform: translateY(-50%); border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; color: white; background: rgba(0, 0, 0, .7); font-size: 1.8rem; line-height: 1; cursor: pointer; }
+.media-preview-dialog-nav:disabled { opacity: .35; }
+.media-preview-dialog-nav.is-previous { left: .5rem; }
+.media-preview-dialog-nav.is-next { right: .5rem; }
+.media-preview-dialog-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.media-preview-dialog-caption { position: absolute; bottom: 0; left: 50%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .35rem .8rem; max-width: 100%; padding: .55rem .9rem; transform: translateX(-50%); color: white; background: rgba(0, 0, 0, .72); border-radius: .6rem .6rem 0 0; font-size: .82rem; }
+.media-preview-dialog-caption span { color: rgba(255, 255, 255, .75); }
 
 @media (min-width: 40rem) {
   .media-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }