diff --git a/web/app.js b/web/app.js
index b352b37..1e62fe5 100644
--- a/web/app.js
+++ b/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: [] });
 }
diff --git a/web/index.html b/web/index.html
index fdd53a9..4a361b3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -185,8 +185,8 @@
                 <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 17a5 5 0 1 0-5-5"></path><path d="M11 17H6v-5"></path><path d="m19 5-4 4h-3"></path><path d="m15 9 4-4"></path></svg>
             </button>
             <button id="playPauseBtn" class="btn btn-icon media-play" aria-label="Play or pause" title="Play / pause">
-                <svg id="playIcon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7Z"></path></svg>
-                <svg id="pauseIcon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true" hidden><path d="M7 5h4v14H7zM13 5h4v14h-4z"></path></svg>
+                <svg id="playIcon" class="play-icon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7Z"></path></svg>
+                <svg id="pauseIcon" class="pause-icon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M7 5h4v14H7zM13 5h4v14h-4z"></path></svg>
             </button>
             <button id="fwdBtn" class="btn btn-icon" aria-label="Forward 10 seconds" title="Forward 10s">
                 <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 17a5 5 0 1 1 5-5"></path><path d="M13 17h5v-5"></path><path d="m5 5 4 4h3"></path><path d="m9 9 4-4"></path></svg>
diff --git a/web/style.css b/web/style.css
index a84003c..60cf3e8 100644
--- a/web/style.css
+++ b/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);
 }