Show the video inline in service mode and keep audio alive in the background

frontend/styles.css

@@ -2662,36 +2662,50 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
   color: var(--text);
 }
 
-/* Placeholder the real .player-stage is pinned over. It reserves the space and
-   defines the geometry; it never contains the video itself. */
-.service-video-slot { display: none; }
-
-body.service-video .service-video-slot {
-  display: block;
-  width: 100%;
-  max-width: 720px;
-  aspect-ratio: 16 / 9;
-  margin: 0 auto 18px;
-  border-radius: var(--radius);
-  background: #000;
+/* Video panel on: the overlay is moved into the player pane (see
+   applyServiceVideoLayout) and rendered inline beneath the stage, so the video
+   is simply visible where it already is. A full-screen overlay can never show
+   it — .app is its own stacking context at z-index 1, which caps anything
+   inside it below the overlay's 320. */
+body.service-video .service-mode {
+  position: static;
+  inset: auto;
+  height: auto;
+  min-height: 0;
+  z-index: auto;
+  background: transparent;
+  overflow: visible;
+  animation: none;
+  padding: 12px 0 0;
 }
 
-/* Lift the pinned stage above the overlay (320) while it is on loan. */
-body.service-open.service-video .player-stage {
-  z-index: 330;
+/* Everything except the stage, the app's own transport controls and the
+   service info steps aside. */
+body.service-video .topbar,
+body.service-video .list-pane { display: none; }
+
+body.service-video .player-pane {
+  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
 }
 
 /* With the picture carrying the song, the type steps back so both fit. */
+body.service-video .service-center {
+  flex: 0 0 auto;
+  padding: 10px 0;
+}
 body.service-video .service-title {
-  font-size: clamp(20px, 4.2vw, 32px);
-  margin-bottom: 6px;
+  font-size: clamp(20px, 4.2vw, 30px);
+  margin-bottom: 4px;
 }
 body.service-video .service-channel {
   font-size: clamp(14px, 2.2vw, 18px);
-  margin-bottom: 6px;
+  margin-bottom: 4px;
 }
 body.service-video .service-upnext {
-  margin-top: 12px;
+  margin-top: 10px;
+}
+body.service-video .service-bottom {
+  padding-bottom: 14px;
 }
 
 .service-exit-btn {
@@ -2903,7 +2917,6 @@ body.service-open .sidebar-backdrop {
     max-width: none;
     padding: 12px 14px;
   }
-  body.service-video .service-video-slot { margin-bottom: 12px; }
   body.service-video .service-title { font-size: clamp(19px, 5.2vw, 26px); }
   body.service-video .service-note { display: none; }
   .service-time {