{/* Visual glass capsule — clips BlurView + gradients inside the rounded silhouette.
Figma "Glass" settings translated to RN:
Light 0°/100% → top-down white gradient (L2)
Refraction 80 → bright top-edge highlight line (L3)
Dispersion 50 → faint chromatic edge tint at bottom (L4)
Depth 100 → existing drop shadow on glassCapsule (kept)
Frost 4 → BlurView intensity reduced from 40 → 6 (sharper glass)
Splay 0 → no spread layer */}
{/* L1 · Frost — bumped +100% (6 → 12) so the pill reads as glass with
a real haze behind it while still keeping the refraction/dispersion
edges visible.
IMPORTANT: borderRadius must be set explicitly on this element.
backdrop-filter is NOT clipped by the parent's border-radius even
when the parent has overflow:hidden — browsers render the filter
in the child's rectangular bounding box, which makes the blur
leak past the pill's rounded ends as visible "corner" artifacts
at the four corners of the pill's bounding rect. Matching the
pill's br:100 here clips the blur to the same capsule shape. */}
{/* L2 · Light source from 0°/100° — bright top crest fading down */}
{/* L3 · Refraction — bumped +25% in both intensity and thickness.
Edge stops 0.2 → 0.25, peak clamped at 1.0 (was 0.95); height
1.5 → 2 in the stylesheet. Reads as a brighter, slightly thicker
refractive crest at the top edge of the glass. */}
{/* L4 · Dispersion — subtle chromatic split at the bottom edge.
Cool blue on the left, warm amber on the right with a transparent
middle, simulating the wavelength fan-out you get at a glass edge. */}
{/* Edge rim — sits on top of the glass, no overflow clipping needed */}
{/* Shared sliding pill — rendered BEFORE the buttonRow so the FAB
(inside buttonRow) draws on top when the pill crosses the middle. */}
{allMeasured && (
)}
{/* Button row — separate from the clipped capsule so the FAB can overflow upward.
The FAB cutout now lives INSIDE VoiceFAB as a sibling of fabRing, so its halo
is geometrically locked to the fabRing position regardless of flex layout.
pointerEvents="box-none" makes the buttonRow View itself invisible to
hit-testing — pure taps land on its children (NavBtn / FAB Pressables) —
while still allowing RN's responder negotiation to walk UP the tree on
move, so panResponder can claim horizontal drags once |dx| > DRAG_THRESHOLD. */}
{ if (!draggingRef.current) onChange(NAV_ITEMS[0].key); }}
btnRef={(el) => { navBtnRefs.current[NAV_ITEMS[0].key] = el; }}
/>
{ if (!draggingRef.current) onChange(NAV_ITEMS[1].key); }}
btnRef={(el) => { navBtnRefs.current[NAV_ITEMS[1].key] = el; }}
/>
{/* Empty — shared at App root sits over this slot. */}
{ if (!draggingRef.current) onChange(NAV_ITEMS[2].key); }}
btnRef={(el) => { navBtnRefs.current[NAV_ITEMS[2].key] = el; }}
/>
{ if (!draggingRef.current) onChange(NAV_ITEMS[3].key); }}
btnRef={(el) => { navBtnRefs.current[NAV_ITEMS[3].key] = el; }}
/>