feat(ui): render a live timer in the message control preview

The preview showed the word "Timer" where the timer goes, so it could not
tell an operator what the audience will actually see. It now embeds the same
component the picture-in-picture window uses.

Making PipTimer embeddable also fixes the pop-out window, which rendered a
running timer while the stage was blacked out and did not blink with the
stage. The timer font size, the message padding and the overtime outline move
from viewport to container units: inside the preview they resolve against the
stage frame, and in the pip window - which has no ancestor query container -
they resolve against its viewport exactly as before.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra

apps/client/src/features/control/message/TimerPreview.module.scss

@@ -1,34 +1,33 @@
 .preview {
-  background-color: $ui-black;
-  display: grid;
-  place-content: center;
-  text-align: center;
   position: relative;
+  display: grid;
+  place-items: center;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.mainContent {
-  font-size: 1rem;
-  font-weight: 600;
+/* the frame is a query container so that the embedded timer scales to the preview, not to the viewport */
+.stageFrame {
+  position: relative;
+  container-type: inline-size;
+  contain: paint;
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
   width: 100%;
-  color: var(--override-colour, $ui-white);
-
-  &[data-phase='pending'] {
-    color: $ontime-roll;
-  }
-  &[data-phase='overtime'] {
-    color: $playback-negative;
-  }
-  &[data-phase='none'] {
-    opacity: $opacity-disabled;
-  }
+  max-height: 100%;
+  border-radius: $component-border-radius-md;
 }
 
-.secondaryContent {
-  border-top: 1px solid $white-7;
-}
+/* keep the pop-out affordances reachable above the blackout and message overlays */
+.stageCorners {
+  position: absolute;
+  inset: 0;
+  z-index: calc($zindex-floating + 2);
+  pointer-events: none;
 
-.blackout {
-  display: none;
+  > * {
+    pointer-events: auto;
+  }
 }
 
 .eventStatus {