fix(voice): KI-029 — make push-to-talk button visibly findable

User report: screenshot of the live toolbar with Voice off (red dot) →
"no push to talk button". Root cause: the mic was a 40×40 icon-only
button immediately adjacent to the also-icon-only upload button. With
Grammarly's browser-extension icons overlapping the input area, the user
genuinely couldn't tell which button was which.

Changes:
• Mic button now shows the icon AND a "Push-to-talk" label (visible
on sm+ breakpoints; icon-only on mobile to save horizontal space).
• When Voice is OFF (red pill), the mic button is highlighted in
emerald with a soft outer ring and shadow — eye-catching call to
action that says "use this instead". When Voice is ON, the mic
stays neutral grey (since Live is the primary path).
• While recording, the button turns rose/red with a "Stop" label.
• Tooltips updated to spell out the consequence of each state — in
particular, "Voice will stay off until you click the red dot"
when PTT is used while Voice is off, so the user knows their
earlier off-toggle is preserved.

No behavioral changes; pure findability + clarity fix.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/app/page.tsx

@@ -740,18 +740,32 @@ export default function Page() {
             >
               <UploadIcon />
             </button>
+            {/* KI-029 (2026-05-14) — push-to-talk button is now LABELED and
+                visually highlighted when Voice is OFF, so the user can find
+                it. Was just a 40px icon indistinguishable from the upload
+                icon; user reported "no push to talk button" despite it
+                technically existing. */}
             <button
               type="button"
               onClick={recording ? stopRecording : startRecording}
               disabled={busy && !recording}
-              className={`shrink-0 w-11 h-11 rounded-xl flex items-center justify-center transition-all ${
-                recording ? "bg-[var(--error)] text-white animate-record-pulse" : "bg-[var(--muted)] hover:bg-[var(--border)]"
+              className={`shrink-0 h-11 px-3 rounded-xl flex items-center gap-1.5 transition-all text-sm font-medium ${
+                recording
+                  ? "bg-[var(--error)] text-white animate-record-pulse"
+                  : userPrefersLive
+                    ? "bg-[var(--muted)] hover:bg-[var(--border)] text-[var(--foreground)]"
+                    : "bg-emerald-600 hover:bg-emerald-700 text-white shadow-md ring-2 ring-emerald-300 dark:ring-emerald-700"
               } disabled:opacity-40`}
               title={recording
-                ? "Push-to-talk: recording… click to stop or stay silent for 2s"
-                : "Push-to-talk (pauses always-on listening for one turn)"}
+                ? "Recording… click to stop, or stay silent for 2s"
+                : userPrefersLive
+                  ? "Push-to-talk (one turn — Live resumes after)"
+                  : "Push-to-talk — click and speak; Voice will stay off until you click the red dot"}
             >
               {recording ? <StopIcon /> : <MicIcon />}
+              <span className="hidden sm:inline">
+                {recording ? "Stop" : "Push-to-talk"}
+              </span>
             </button>
             <button
               type="button"