fix: play/pause icon toggle and disappearing conversation controls

- The play/pause button never swapped icons: app.js set the .hidden
  property on <svg> elements, which does not reflect to the hidden
  attribute (that IDL attribute is on HTMLElement, not SVGElement), so the
  CSS [hidden] rule never applied and both glyphs overlapped. Toggle a
  .playing class on the button and show/hide the icons via CSS instead.
- The Start conversation and mute buttons were pushed off-screen as the
  transcript grew: the workspace grid had no template-rows, so row 1
  auto-sized to the tall transcript and stretched the voice-console
  beyond the clipped 700px box. Pin the row with grid-template-rows:
  minmax(0,1fr) and give both grid columns min-height:0 so the transcript
  (and the inner #messages) scroll instead of expanding the layout.

web/app.js

@@ -1322,8 +1322,7 @@ function updateMediaBadge(s) {
 // ── Playback controls ───────────────────────────────────────────────────────
 function updateMediaControls() {
     const playing = !mediaAudio.paused && !!mediaCurrentTrackId;
-    playIcon.hidden = playing;
-    pauseIcon.hidden = !playing;
+    playPauseBtn.classList.toggle("playing", playing);
     playPauseBtn.setAttribute("aria-label", playing ? "Pause" : "Play");
     updateMediaBadge({ pending: [] });
 }