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/style.css

@@ -255,6 +255,7 @@ button {
 .workspace {
     display: grid;
     grid-template-columns: minmax(390px, 0.92fr) minmax(420px, 1.08fr);
+    grid-template-rows: minmax(0, 1fr);
     height: min(700px, calc(100dvh - 108px));
     min-height: 610px;
     border: 1px solid var(--line);
@@ -270,6 +271,7 @@ button {
     flex-direction: column;
     align-items: center;
     min-width: 0;
+    min-height: 0;
     padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem) 1.6rem;
     overflow: hidden;
     background:
@@ -708,6 +710,7 @@ button {
 /* ── Conversation ───────────────────────────────────────────────────────── */
 .transcript {
     min-width: 0;
+    min-height: 0;
     display: flex;
     flex-direction: column;
     padding: clamp(1.4rem, 3vw, 2.1rem);
@@ -1377,6 +1380,19 @@ body[data-mode="text"] .mic-meter {
     border: none;
 }
 
+.media-play .play-icon,
+.media-play .pause-icon {
+    display: none;
+}
+
+.media-play:not(.playing) .play-icon {
+    display: inline-block;
+}
+
+.media-play.playing .pause-icon {
+    display: inline-block;
+}
+
 .media-play:hover:not(:disabled) {
     filter: brightness(1.1);
 }