fix: add Cancel to recorder + safe-area insets (notch ate the ✕)

The header ✕ sat under the iPhone status bar/notch (overlay had no safe-area
padding), so there was no reachable way out without saving. Add a labeled Cancel
button next to Save, and pad the header/footer for the notch + home indicator.

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

lyra/web/static/recorder.css

@@ -25,6 +25,7 @@
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
+  padding-top: calc(12px + env(safe-area-inset-top));   /* clear the notch/status bar */
   border-bottom: 1px solid var(--border, #2a1d12);
 }
 .rec-title { font-weight: 700; color: var(--accent, #ff7a00); }
@@ -94,9 +95,15 @@
 .rec-ln.brd { display: flex; gap: 4px; align-items: center; color: var(--text-fade, #8a8a8a); }
 .rec-ln b { color: var(--accent, #ff7a00); font-weight: 700; }
 
-.rec-foot { padding: 12px 14px; border-top: 1px solid var(--border, #2a1d12); }
+.rec-foot {
-.rec-save { width: 100%; padding: 14px; border-radius: 10px; background: var(--accent, #ff7a00); color: #111; border: none; font-weight: 700; font-size: 1rem; }
+  display: flex; gap: 10px;
+  padding: 12px 14px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--border, #2a1d12);
+}
+.rec-save { flex: 1; padding: 14px; border-radius: 10px; background: var(--accent, #ff7a00); color: #111; border: none; font-weight: 700; font-size: 1rem; }
 .rec-save:disabled { opacity: .6; }
+.rec-cancel { padding: 14px 18px; border-radius: 10px; background: var(--bg-elev, #0e0e0e); color: var(--text-fade, #8a8a8a); border: 1px solid var(--border, #2a1d12); font-weight: 600; font-size: 1rem; }
 
 .rec-undo { background: none; border: none; color: var(--text-fade, #8a8a8a); font-size: .75rem; padding: 0 4px; }
 

lyra/web/static/recorder.js

@@ -209,6 +209,7 @@
       </div>
 
       <div class="rec-foot">
+        <button class="rec-cancel" data-act="close">Cancel</button>
         <button class="rec-save" data-act="save">Save &amp; replay</button>
       </div>
     `;