ui: extend Liquid Glass to all chrome floating over video

[morepriyam]

The recorder established the glass rule (src/components/glass-pill.tsx, src/features/recorder/close-button.tsx): glass = chrome floating over live media; themed screens stay flat. The close button, control rail, and lens chips follow it — but other over-video chrome still uses flat rgba(0,0,0,…) scrims, which reads inconsistent right next to glass controls.

Convert to GlassPill (all sit over video):

• Preview card (src/features/recorder/preview-modal.tsx): ✕ / ✂ / 🗑 badges + the time readout pill. Pairs with preview card: bigger ✕ / ✂ / 🗑 action buttons #164 (bigger buttons) — resize and glassify in one pass. Consider a GlassContainer around ✂ + 🗑 so adjacent badges merge.
• Export screen video overlays (src/app/export.tsx): caption badge (top-right), clip-count · duration meta pill, play badge. The themed screen body stays flat.
• Play badges: preview card ▶ overlay, export preview ▶ overlay. If recorder: “play all” button for full playthrough of the draft #165 lands a center play-all overlay, it should be glass from day one.

Optional / verify first:

• Recorder timer readout (src/app/recorder.tsx) — bare text next to a glass close button; a small pill would tie the top bar together.
• Segment bar container (src/features/recorder/segment-bar.tsx, the 0.4 scrim bar) — highest visual impact, but hosts a scrolling Sortable grid: perf-test glass + Reanimated before committing.

Explicitly NOT glass (keeps the system sparse):

• Themed screens (home, export body, captions editor, onboarding, modals/sheets/toasts).
• Accent-red controls (record, →, upload, + FAB) — brand color is the hierarchy signal.
• Tiny badges (<20pt: clip numbers, duration labels) — glass reads as noise at that size.
• Caption text scrim (caption-overlay.tsx) — legibility layer mirroring exported VTT.
• Drag trash circle — animates flat → accent via interpolateColor, which glass can't do.

All conversions go through the existing GlassPill so the clear-glass style, dark tint, and Android/older-iOS fallback stay in one place.

[morepriyam]

The preview-card set from the checklist is done in #169: the ✕ / ✂ / 🗑 badges, the time readout pill, and the paused ▶ overlay all render through GlassPill now (done together with the #164 resize, as suggested). Remaining from the list: the export screen overlays, and the optional recorder-timer / segment-bar items.

[morepriyam]

Full audit of every scrim/overlay in the app, to pin down the remaining scope before working this issue.

System rules (locking these in)

Glass = interactive chrome floating over moving media. Everything else stays flat.

One tint only: the dark rgba(0,0,0,0.35) dim already inside GlassPill. No color tints — flat accent-red stays the hierarchy signal for actions, glass stays the "floats over content" signal, and neither dilutes the other. If a color tint is ever justified it's a selected state (e.g. active lens chip), not the 🗑 — destructive is already covered by the confirm dialog, and one colored glass element would break the sparse rule harder than it helps.

Remaining conversions (5, all mechanical GlassPill swaps)

Surface	Now	Note
export.tsx ▶ play badge (56pt over merged video)	flat 0.45	same role as the preview-card ▶ done in #169
export.tsx meta pill (clip-count · duration)	flat 0.55	same role as the preview time pill
export.tsx caption badge (top-right, tappable)	flat 0.55, 30×30pt	has the same sub-HIG tap target problem as #164 — grow to ~40pt and glassify in one pass
subtitles.tsx ▶ play badge (48pt over video preview)	flat 0.45	missing from the original checklist — same ▶-over-video pattern; leaving it flat would be the one inconsistent sibling
Recorder top timer (recorder.tsx)	bare text	small glass pill next to the glass close button ties the top bar together, matches the preview time pill

Plus: if #165 lands a play-all control, it's glass from day one.

Confirmed NOT glass (reasons, so this doesn't get relitigated)

• Segment bar container (0.4 scrim) — a container, not a control, and it hosts Sortable + Reanimated scrolling; rule violation and perf gamble
• Tiny badges (segment duration labels, drag pills, the 18pt home upload badge) — glass needs ~30pt+ to read as material, below that it's blur noise
• Home draft cards — static thumbnails on a themed screen, not live media; the upload scrim is a state overlay, not chrome
• Modal/sheet backdrops (destinations sheet, upload-complete prompt) — dimming layers whose job is to recede; glass would make them an object
• Caption text scrim — mirrors the exported VTT rendering; fidelity beats chrome consistency
• Accent controls & drag trash — brand hierarchy + interpolateColor animation

With #169 merged, these 5 swaps close this issue.

[morepriyam]

Update from #170: the segment-bar container is now glass too — done as a passive absolute-fill GlassPill background layer behind the bar's content rather than a wrapper, so the Sortable/Reanimated hierarchy is untouched. The perf caveat from the checklist is resolved: verified on device with scrubbing, reorder drags, and playhead-follow — no jank. Remaining: the export-screen overlays, the subtitles ▶ badge, and the recorder-timer pill.