Make the world timeline a scrubber under the dock

The timeline shows whenever a layer with time to show is on, live or not.
Its track runs over the time those layers cover, reaching to now, with a
tick for each launch or frame and a handle to drag; arrows step between the
ticks, and a scrub to now goes live. The bar sits along the bottom of the
screen, and the dock and everything anchored above it rise by its height;
clean view, recording and the cockpit put it away with the dock.

src/ui/styles/world-timeline.css

@@ -1,14 +1,37 @@
 /* ── World timeline ─────────────────────────── */
-/* Shown while the world time is away from live, centred above the dock. */
+/* Shown while a layer with time to show is on, centred along the bottom of
+   the screen; the command dock and what sits above it rise by its height. */
+:root {
+  --world-timeline-lift: 0px;
+}
+
+body:has(#world-timeline) {
+  --world-timeline-lift: 50px;
+}
+
+/* Clean view, recording and the cockpit put the dock away; the bar goes too. */
+body.ui-clean-view,
+body.recording-mode,
+body.cockpit-mode {
+  --world-timeline-lift: 0px !important;
+}
+
+body.ui-clean-view #world-timeline,
+body.recording-mode #world-timeline,
+body.cockpit-mode #world-timeline {
+  display: none;
+}
+
 #world-timeline {
   position: fixed;
-  bottom: calc(2vh + 7rem);
+  bottom: 2vh;
   left: 50%;
   z-index: 146;
   display: flex;
   align-items: center;
   gap: 10px;
-  max-width: calc(100vw - 32px);
+  width: min(820px, calc(100vw - 24px));
+  height: 42px;
   box-sizing: border-box;
   padding: 4px 6px;
   border: 1px solid var(--glass-border);
@@ -20,11 +43,6 @@
   transform: translateX(-50%);
 }
 
-body.ui-clean-view #world-timeline,
-body.recording-mode #world-timeline {
-  bottom: 2vh;
-}
-
 #world-timeline .world-timeline-play,
 #world-timeline .world-timeline-live {
   display: inline-flex;
@@ -46,6 +64,13 @@ body.recording-mode #world-timeline {
   background: rgba(0, 212, 255, 0.18);
 }
 
+#world-timeline .world-timeline-live.is-live {
+  border-color: rgba(0, 212, 255, 0.6);
+  background: rgba(0, 212, 255, 0.2);
+  color: var(--accent);
+  cursor: default;
+}
+
 #world-timeline .world-timeline-live {
   font-size: 11px;
   letter-spacing: 0.08em;
@@ -60,3 +85,138 @@ body.recording-mode #world-timeline {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+#world-timeline .world-timeline-edge {
+  flex: none;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+/* The track: ticks for each launch or frame, the elapsed fill, and a native
+   range input on top for dragging and the keyboard. */
+#world-timeline .world-timeline-track {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 80px;
+  height: 24px;
+}
+
+#world-timeline .world-timeline-track::before {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(123, 189, 211, 0.22);
+  content: '';
+  transform: translateY(-50%);
+}
+
+#world-timeline .world-timeline-fill {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--accent);
+  opacity: 0.7;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+#world-timeline .world-timeline-tick {
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 12px;
+  margin-left: -1px;
+  border-radius: 1px;
+  background: rgba(0, 212, 255, 0.75);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+#world-timeline .world-timeline-scrub {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+}
+
+#world-timeline .world-timeline-scrub::-webkit-slider-runnable-track {
+  height: 100%;
+  background: transparent;
+}
+
+#world-timeline .world-timeline-scrub::-moz-range-track {
+  background: transparent;
+}
+
+#world-timeline .world-timeline-scrub::-webkit-slider-thumb {
+  width: 14px;
+  height: 14px;
+  margin-top: 5px;
+  border: 2px solid var(--accent);
+  border-radius: 50%;
+  background: #031018;
+  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
+  appearance: none;
+}
+
+#world-timeline .world-timeline-scrub::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--accent);
+  border-radius: 50%;
+  background: #031018;
+}
+
+#world-timeline .world-timeline-scrub:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 720px) {
+  #world-timeline {
+    bottom: 8px;
+  }
+}
+
+/* On phones the bar sits just above the tab bar, under the voice dock, with
+   the track on a row of its own beneath play, the time and live. */
+body.mobile-shell:has(#world-timeline) {
+  --world-timeline-lift: 80px;
+}
+
+body.mobile-shell #world-timeline {
+  bottom: calc(var(--mobile-tab-space) + 6px);
+  flex-wrap: wrap;
+  row-gap: 4px;
+  height: auto;
+}
+
+body.mobile-shell #world-timeline .world-timeline-time {
+  flex: 1 1 0;
+}
+
+body.mobile-shell #world-timeline .world-timeline-track {
+  order: 1;
+  flex-basis: 100%;
+}
+
+@media (max-width: 640px) {
+  #world-timeline .world-timeline-edge {
+    display: none;
+  }
+
+  #world-timeline .world-timeline-time {
+    font-size: 11px;
+  }
+}