@brett_lamy/docstream 1.6.1 → 1.8.0

package/src/styles.css

@@ -2064,13 +2064,76 @@
 .docs-demo-files {
   flex-shrink: 0;
   box-sizing: border-box;
-  width: 188px;
+  /* --docs-demo-files-w is set (px) once the reader drags the handle; 188px until then. */
+  width: var(--docs-demo-files-w, 188px);
   padding: 8px;
   overflow-y: auto;
   border-right: 1px solid var(--gb-border);
   background: var(--gb-muted);
 }
 
+/* The drag handle between the file list and the source: zero layout width, with a wider hit area
+   and the same grip as the preview handle straddling the divider. */
+.docs-demo-files-handle {
+  position: relative;
+  z-index: 2;
+  flex: 0 0 0;
+  width: 0;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.docs-demo-files-handle::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -5px;
+  width: 10px;
+  content: "";
+}
+
+.docs-demo-files-handle::after {
+  position: absolute;
+  top: 50%;
+  left: -2.5px;
+  width: 5px;
+  height: 40px;
+  margin-top: -20px;
+  border-radius: 3px;
+  background: var(--gb-stage-dot);
+  content: "";
+  opacity: 0;
+  transition: opacity 150ms ease, background 150ms ease, height 200ms ease, margin 200ms ease;
+}
+
+.docs-demo-code:hover .docs-demo-files-handle::after {
+  opacity: 1;
+}
+
+.docs-demo-files-handle:hover::after,
+.docs-demo-files-handle:focus-visible::after,
+.docs-demo-files-handle[data-dragging]::after {
+  height: 56px;
+  margin-top: -28px;
+  background: var(--gb-primary);
+  opacity: 1;
+}
+
+.docs-demo-files-handle:focus-visible {
+  outline: none;
+}
+
+.docs-demo-files-handle:focus-visible::before {
+  outline: 2px solid var(--gb-primary);
+  outline-offset: -1px;
+  border-radius: 2px;
+}
+
+.docs-demo-code[data-dragging] {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .docs-demo-files-h {
   padding: 6px 8px 8px;
   color: var(--gb-muted-foreground);
@@ -2143,18 +2206,174 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 5px 6px 5px 14px;
+  padding: 5px 6px 5px 8px;
   border-bottom: 1px solid var(--gb-border);
   color: var(--gb-muted-foreground);
   font: 12px/1 var(--docs-demo-mono);
 }
 
-.docs-demo-source-path {
+/* Breadcrumb path: one button per segment. The list is clipped to the header; the fit logic in
+   PathBreadcrumb collapses the middle to a "…" before that matters. */
+.docs-demo-crumbs {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.docs-demo-crumbs > .docs-demo-crumbs-list {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  white-space: nowrap;
+}
+
+.docs-demo-crumbs > .docs-demo-crumbs-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.docs-demo-crumbs-list > .docs-demo-crumb-item {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.docs-demo-crumbs-list > .docs-demo-crumb-item[data-last] {
+  flex: 0 1 auto;
+}
+
+.docs-demo-crumb-sep {
+  flex-shrink: 0;
+  color: var(--gb-muted-foreground);
+  opacity: 0.7;
+}
+
+.docs-demo-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  box-sizing: border-box;
+  height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--gb-muted-foreground);
+  font: inherit;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.docs-demo-crumb svg {
+  flex-shrink: 0;
+}
+
+.docs-demo-crumb-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docs-demo-crumb:hover,
+.docs-demo-crumb[aria-expanded="true"] {
+  background: var(--gb-hover);
+  color: var(--gb-panel-foreground);
+}
+
+.docs-demo-crumb[data-current] {
+  color: var(--gb-panel-foreground);
+  font-weight: 600;
+}
+
+.docs-demo-crumb[data-current] svg {
+  color: var(--gb-primary);
+}
+
+.docs-demo-crumb:focus-visible {
+  outline: 2px solid var(--gb-primary);
+  outline-offset: -2px;
+}
+
+/* The sibling / hidden-segment menu. Portalled next to the docs root (so it isn't clipped by the
+   viewer) and fixed under its trigger; --crumb-x / --crumb-y are set from the trigger's rect. */
+.docs-demo-crumb-menu {
+  position: fixed;
+  top: var(--crumb-y, 0);
+  left: var(--crumb-x, 0);
+  z-index: 60;
+  box-sizing: border-box;
+  min-width: 160px;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: min(320px, calc(100vh - 16px));
+  padding: 4px;
+  overflow-y: auto;
+  border: 1px solid var(--gb-border);
+  border-radius: 10px;
+  background: var(--gb-panel);
+  box-shadow: var(--gb-menu-shadow);
+  color: var(--gb-panel-foreground);
+  font: 12.5px/1.3 var(--docs-demo-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+}
+
+.docs-demo-crumb-option {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.docs-demo-crumb-option svg {
+  flex-shrink: 0;
+  color: var(--gb-muted-foreground);
+}
+
+.docs-demo-crumb-option:hover,
+.docs-demo-crumb-option:focus-visible {
+  outline: none;
+  background: var(--gb-hover);
+}
+
+.docs-demo-crumb-option[data-current] {
+  color: var(--gb-primary);
+  font-weight: 600;
+}
+
+.docs-demo-crumb-option[data-current] svg {
+  color: var(--gb-primary);
+}
+
+.docs-demo-crumb-option-text {
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.docs-demo-crumb-option .docs-demo-crumb-check {
+  margin-left: auto;
+}
+
 .docs-demo-source-body {
   flex: 1;
   min-height: 0;
@@ -2195,7 +2414,8 @@
   }
 
   .docs-demo-files-h,
-  .docs-demo-dir {
+  .docs-demo-dir,
+  .docs-demo-files-handle {
     display: none;
   }
 
@@ -2338,100 +2558,592 @@
   }
 
   .docs-demo-handle::after,
+  .docs-demo-files-handle::after,
+  .docs-demo-crumb,
   .docs-page-actions-more svg {
     transition: none;
   }
 }
 
-/* Replay embeds (ReplayPreview / ReplayEmbed). Part of the one package stylesheet so no
-   module imports CSS on the eager path: the root entry stays importable from Node
-   (SSR, vitest) without a CSS loader. */
-.replay-preview {
-  width: 100%;
-  min-width: 0;
-  color: var(--replay-preview-fg, #e5e7eb);
-  background: var(--replay-preview-bg, #0f172a);
-  border: 1px solid var(--replay-preview-border, rgba(148, 163, 184, 0.28));
-  border-radius: 12px;
-  overflow: hidden;
-}
+/* ReplayPreview / ReplayEmbed: the session-replay player and its iframe embed. Part of the one package
+   stylesheet so no module imports CSS on the eager path: the root entry stays importable from Node
+   (SSR, vitest) without a CSS loader.
+
+   Everything sits in the `docstream.replay` cascade layer and under `:where()`, so a host's own rules win:
+   unlayered CSS always does, and Tailwind-style utilities (`w-full`, `pointer-events-none`, `h-full`) do as
+   long as their layer is declared after this one. If your utilities layer comes earlier in the layer order,
+   put `@layer docstream.replay;` before it. Colors read the shadcn-style tokens below and fall back to
+   neutral values: --card --background --foreground --muted --muted-foreground --border --primary --ring
+   --destructive --success --warning --tertiary-foreground. The root sets `--replay-ar` (recorded aspect
+   ratio) on the stage; the page and overlay run in recorded-viewport pixels with `--replay-scale` set. */
+@layer docstream.replay {
+  :where([data-slot="replay-preview"]) {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-width: 0;
+    overflow: hidden;
+    outline: none;
+    color: var(--foreground, #18181b);
+    background: var(--card, #ffffff);
+    font-size: 13px;
+    line-height: 1.4;
+  }
 
-.replay-preview__frame {
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  border: 0;
-  background: #0f172a;
-}
+  :where([data-slot="replay-preview"] *, [data-slot="replay-preview"] *::before, [data-slot="replay-preview"] *::after) {
+    box-sizing: border-box;
+  }
 
-.replay-preview__invalid,
-.replay-preview__empty,
-.replay-preview__error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 140px;
-  padding: 20px;
-  color: var(--replay-preview-muted, #94a3b8);
-  font: 13px/1.5 ui-sans-serif, system-ui, sans-serif;
-  text-align: center;
-}
+  :where([data-slot="replay-preview"][data-chrome="browser"]) {
+    border: 1px solid var(--border, #e4e4e7);
+    border-radius: 14px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px -18px rgba(0, 0, 0, 0.28);
+  }
 
-.replay-preview__invalid {
-  color: var(--replay-preview-link, #7dd3fc);
-}
+  :where([data-slot="replay-preview"][data-chrome="minimal"]) {
+    border: 1px solid var(--border, #e4e4e7);
+    border-radius: 12px;
+  }
 
-.replay-preview__error {
-  color: #fda4af;
-}
+  :where([data-slot="replay-preview"][data-fit="contain"]) {
+    height: 100%;
+  }
 
-.replay-preview__native {
-  width: 100%;
-  background: #0f172a;
-}
+  :where([data-slot="replay-preview"][data-fullscreen]) {
+    border: 0;
+    border-radius: 0;
+  }
 
-.replay-preview__stage {
-  position: relative;
-  width: 100%;
-  min-height: 160px;
-  overflow: hidden;
-  background: #020617;
-}
+  /* ── browser bar ─────────────────────────────────────────────── */
+  :where([data-slot="replay-preview-bar"]) {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 12px;
+    height: 40px;
+    padding: 0 14px;
+    border-bottom: 1px solid var(--border, #e4e4e7);
+    background: color-mix(in srgb, var(--muted, #f4f4f5) 60%, transparent);
+  }
 
-.replay-preview__scaler {
-  position: absolute;
-  inset: 0 auto auto 0;
-}
+  :where([data-slot="replay-preview-lights"]) {
+    display: flex;
+    flex-shrink: 0;
+    gap: 7px;
+  }
 
-.replay-preview__player {
-  position: relative;
-  overflow: hidden;
+  :where([data-slot="replay-preview-lights"] > span) {
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background: var(--light);
+    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
+  }
+
+  :where([data-slot="replay-preview-lights-spacer"]) {
+    flex-shrink: 0;
+    width: 47px;
+  }
+
+  :where([data-slot="replay-preview-address"]) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    width: 100%;
+    max-width: 460px;
+    min-width: 0;
+    height: 26px;
+    margin-inline: auto;
+    padding: 0 10px;
+    border-radius: 7px;
+    background: var(--background, #ffffff);
+    box-shadow: inset 0 0 0 1px var(--border, #e4e4e7);
+    font-size: 12px;
+  }
+
+  :where([data-slot="replay-preview-lock"]) {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 12px;
+    height: 12px;
+    color: var(--tertiary-foreground, #a1a1aa);
+  }
+
+  :where([data-slot="replay-preview-url"]) {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-slot="replay-preview-url"] > :first-child) {
+    color: var(--foreground, #18181b);
+  }
+
+  :where([data-slot="replay-preview-url"] > :last-child) {
+    color: var(--muted-foreground, #71717a);
+  }
+
+  :where([data-slot="replay-preview-spinner"]) {
+    width: 11px;
+    height: 11px;
+    border: 1.5px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: docstream-replay-spin 0.7s linear infinite;
+  }
+
+  /* ── stage: the page, its poster, the pointer overlay ────────── */
+  :where([data-slot="replay-preview-stage"]) {
+    position: relative;
+    min-height: 0;
+    overflow: hidden;
+    aspect-ratio: var(--replay-ar, 16 / 9);
+    background: var(--muted, #f4f4f5);
+  }
+
+  :where([data-slot="replay-preview"][data-fit="contain"] > [data-slot="replay-preview-stage"]) {
+    flex: 1 1 0%;
+    aspect-ratio: auto;
+  }
+
+  /* ReplayStage sets its own inline size and position; the stage box overrides them to fill the frame. */
+  [data-slot="replay-preview-stage"] > .replay-preview__page {
+    position: absolute !important;
+    inset: 0 !important;
+  }
+
+  :where([data-slot="replay-preview-pointer"]) {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  :where([data-slot="replay-preview-ripple"]) {
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    transform-origin: center;
+    border: 2px solid var(--primary, #4f46e5);
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--primary, #4f46e5) 20%, transparent);
+  }
+
+  :where([data-slot="replay-preview-cursor"]) {
+    position: absolute;
+    transform-origin: top left;
+    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
+  }
+
+  :where([data-slot="replay-preview-poster"]) {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    transition: opacity 0.22s ease-out;
+  }
+
+  :where([data-slot="replay-preview-poster"][data-leaving]) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :where([data-slot="replay-preview-skeleton"]) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 6%;
+    width: 100%;
+    height: 100%;
+    padding: 4%;
+    background: var(--background, #ffffff);
+  }
+
+  :where([data-slot="replay-preview-skeleton"] i) {
+    display: block;
+    height: 5%;
+    min-height: 8px;
+    border-radius: 4px;
+    background: color-mix(in srgb, var(--muted-foreground, #71717a) 16%, transparent);
+    animation: docstream-replay-pulse 1.6s ease-in-out infinite;
+  }
+
+  :where([data-slot="replay-preview-skeleton"] i[data-tone="block"]) {
+    border-radius: 8px;
+    min-height: 12px;
+  }
+
+  :where([data-slot="replay-preview-skeleton"] [data-part="header"]) {
+    display: flex;
+    align-items: center;
+    gap: 3%;
+  }
+
+  :where([data-slot="replay-preview-skeleton"] [data-part="header"] > span) {
+    flex: 1;
+  }
+
+  :where([data-slot="replay-preview-skeleton"] [data-part="hero"]) {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  :where([data-slot="replay-preview-skeleton"] [data-part="hero"] i) {
+    min-height: 0;
+  }
+
+  :where([data-slot="replay-preview-skeleton"] [data-part="grid"]) {
+    display: grid;
+    flex: 1;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2.5%;
+  }
+
+  :where([data-slot="replay-preview-skeleton"] [data-part="grid"] i) {
+    height: 70%;
+  }
+
+  :where([data-slot="replay-preview-skeleton"] [data-part="empty"]) {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+  }
+
+  :where([data-slot="replay-preview-skeleton"] [data-part="empty"] > span) {
+    padding: 6px 12px;
+    border-radius: 999px;
+    color: var(--muted-foreground, #71717a);
+    background: var(--card, #ffffff);
+    box-shadow: 0 0 0 1px var(--border, #e4e4e7), 0 4px 16px rgba(0, 0, 0, 0.08);
+    font-size: 12.5px;
+    font-weight: 500;
+  }
+
+  /* ── the big play button ─────────────────────────────────────── */
+  :where([data-slot="replay-preview-center"]) {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    scale: 1.15;
+    transition: opacity 0.16s ease-out, scale 0.2s ease-out, visibility 0s linear 0.2s;
+  }
+
+  :where([data-slot="replay-preview-center"][data-show]) {
+    visibility: visible;
+    opacity: 1;
+    scale: 1;
+    transition: opacity 0.2s ease-out, scale 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s;
+  }
+
+  :where([data-slot="replay-preview-center"] > button) {
+    display: grid;
+    place-items: center;
+    width: 56px;
+    height: 56px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    outline: none;
+    cursor: pointer;
+    pointer-events: auto;
+    appearance: none;
+    color: var(--background, #ffffff);
+    background: color-mix(in srgb, var(--foreground, #18181b) 72%, transparent);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+    transition: scale 0.16s ease-out;
+  }
+
+  :where([data-slot="replay-preview-center"] > button:hover) {
+    scale: 1.05;
+  }
+
+  :where([data-slot="replay-preview-center"] > button:active) {
+    scale: 0.95;
+  }
+
+  :where([data-slot="replay-preview-center"] > button > svg) {
+    translate: 1px 0;
+  }
+
+  /* ── controls ────────────────────────────────────────────────── */
+  :where([data-slot="replay-preview-controls"]) {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 4px;
+    height: 44px;
+    padding: 0 6px;
+    border-top: 1px solid var(--border, #e4e4e7);
+    background: var(--card, #ffffff);
+  }
+
+  :where([data-slot="replay-preview-controls"] button) {
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    height: 32px;
+    min-width: 32px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 8px;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    color: var(--foreground, #18181b);
+    background: transparent;
+    font: inherit;
+    transition: background-color 0.12s ease-out;
+  }
+
+  :where([data-slot="replay-preview-controls"] button:hover:not(:disabled)) {
+    background: color-mix(in srgb, var(--foreground, #18181b) 8%, transparent);
+  }
+
+  :where([data-slot="replay-preview-controls"] button:disabled) {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  :where([data-slot="replay-preview-controls"] button:focus-visible) {
+    box-shadow: 0 0 0 2px var(--ring, #6366f1);
+  }
+
+  :where([data-slot="replay-preview-speed"]) {
+    height: 28px;
+    min-width: 42px;
+    padding: 0 6px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-slot="replay-preview-time"]) {
+    flex-shrink: 0;
+    width: 74px;
+    color: var(--muted-foreground, #71717a);
+    font-size: 11.5px;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-slot="replay-preview-time"] > span) {
+    color: var(--foreground, #18181b);
+  }
+
+  /* ── scrubber: a native range, with the markers' rail above it ─
+     (the thumb and track pseudo-elements can't sit inside :where(); the layer still lets hosts win) */
+  :where([data-slot="replay-preview-scrubber"]) {
+    position: relative;
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    justify-content: center;
+    align-self: stretch;
+    min-width: 0;
+    padding-inline: 4px;
+  }
+
+  :where([data-slot="replay-preview-markers"]) {
+    position: absolute;
+    inset-inline: 4px;
+    top: 13px;
+    height: 10px;
+    margin-inline: 6px;
+  }
+
+  :where([data-slot="replay-preview-scrubber"][data-markers] > input) {
+    transform: translateY(5px);
+  }
+
+  :where([data-slot="replay-preview-markers"] > button) {
+    position: absolute;
+    top: 50%;
+    box-sizing: border-box;
+    width: 8px;
+    height: 8px;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    background: var(--success, #22c55e);
+    box-shadow: 0 0 0 2px var(--card, #ffffff);
+    translate: -50% -50%;
+    transition: scale 0.16s ease-out;
+  }
+
+  :where([data-slot="replay-preview-markers"] > button:hover:not(:disabled)) {
+    scale: 1.5;
+  }
+
+  :where([data-slot="replay-preview-markers"] > button[data-kind="click"]) {
+    width: 3px;
+    height: 8px;
+    border-radius: 1.5px;
+    background: var(--tertiary-foreground, #a1a1aa);
+    box-shadow: none;
+  }
+
+  :where([data-slot="replay-preview-markers"] > button[data-kind="error"]) {
+    background: var(--destructive, #ef4444);
+  }
+
+  :where([data-slot="replay-preview-markers"] > button[data-kind="network"]) {
+    background: var(--warning, #f59e0b);
+  }
+
+  :where([data-slot="replay-preview-markers"] > button[data-kind="navigation"]) {
+    background: var(--primary, #4f46e5);
+  }
+
+  :where([data-slot="replay-preview-markers"] > button:focus-visible) {
+    box-shadow: 0 0 0 2px var(--card, #ffffff), 0 0 0 4px var(--ring, #6366f1);
+  }
+
+  :where([data-slot="replay-preview-scrubber"] > input[type="range"]) {
+    --replay-track: 4px;
+    --replay-thumb: 12px;
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    width: 100%;
+    height: 20px;
+    margin: 0;
+    padding: 0;
+    outline: none;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  :where([data-slot="replay-preview-scrubber"] > input[type="range"]:disabled) {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  [data-slot="replay-preview-scrubber"] > input[type="range"]::-webkit-slider-runnable-track {
+    height: var(--replay-track);
+    border-radius: 999px;
+    background: linear-gradient(
+      to right,
+      var(--primary, #4f46e5) var(--replay-progress, 0%),
+      color-mix(in srgb, var(--muted-foreground, #71717a) 26%, transparent) var(--replay-progress, 0%)
+    );
+  }
+
+  [data-slot="replay-preview-scrubber"] > input[type="range"]::-moz-range-track {
+    height: var(--replay-track);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--muted-foreground, #71717a) 26%, transparent);
+  }
+
+  [data-slot="replay-preview-scrubber"] > input[type="range"]::-moz-range-progress {
+    height: var(--replay-track);
+    border-radius: 999px;
+    background: var(--primary, #4f46e5);
+  }
+
+  [data-slot="replay-preview-scrubber"] > input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: var(--replay-thumb);
+    height: var(--replay-thumb);
+    margin-top: calc((var(--replay-track) - var(--replay-thumb)) / 2);
+    border: 0;
+    border-radius: 50%;
+    background: var(--primary, #4f46e5);
+    box-shadow: 0 0 0 2px var(--card, #ffffff), 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+
+  [data-slot="replay-preview-scrubber"] > input[type="range"]::-moz-range-thumb {
+    width: var(--replay-thumb);
+    height: var(--replay-thumb);
+    border: 0;
+    border-radius: 50%;
+    background: var(--primary, #4f46e5);
+    box-shadow: 0 0 0 2px var(--card, #ffffff), 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+
+  [data-slot="replay-preview-scrubber"] > input[type="range"]:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 2px var(--card, #ffffff), 0 0 0 4px var(--ring, #6366f1);
+  }
+
+  [data-slot="replay-preview-scrubber"] > input[type="range"]:focus-visible::-moz-range-thumb {
+    box-shadow: 0 0 0 2px var(--card, #ffffff), 0 0 0 4px var(--ring, #6366f1);
+  }
+
+  /* ── iframe embeds (a public Loop QA page) and their notes ───── */
+  :where(.replay-preview__frame) {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background: var(--background, #ffffff);
+  }
+
+  :where(.replay-preview__invalid, .replay-preview__empty, .replay-preview__error) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    color: var(--muted-foreground, #71717a);
+    font-size: 13px;
+    line-height: 1.5;
+    text-align: center;
+  }
+
+  :where(.replay-preview__invalid) {
+    color: var(--primary, #4f46e5);
+  }
+
+  :where(.replay-preview__error) {
+    color: var(--destructive, #ef4444);
+  }
 }
 
-.replay-preview__controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-top: 1px solid rgba(148, 163, 184, 0.2);
-  background: #111827;
-  font: 12px/1.2 ui-sans-serif, system-ui, sans-serif;
+@keyframes docstream-replay-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.replay-preview__controls button,
-.replay-preview__controls select {
-  border: 1px solid rgba(148, 163, 184, 0.3);
-  border-radius: 6px;
-  padding: 5px 8px;
-  color: inherit;
-  background: #1e293b;
-  cursor: pointer;
+@keyframes docstream-replay-pulse {
+  50% {
+    opacity: 0.55;
+  }
 }
 
-.replay-preview__controls input[type='range'] {
-  min-width: 60px;
-  flex: 1;
-  accent-color: #38bdf8;
+@media (prefers-reduced-motion: reduce) {
+  @layer docstream.replay {
+    :where([data-slot="replay-preview"] *) {
+      animation: none !important;
+      transition-duration: 0.01ms !important;
+      transition-delay: 0s !important;
+    }
+
+    :where([data-slot="replay-preview-center"]) {
+      scale: 1;
+    }
+  }
 }
 
 /* Keep every rendered table variant flush, after the shared block spacing rules. */