feat(lightbox): reskin web chrome buttons to match native

Replace the blurred-backdrop Button for the menu trigger and close button
with CircleChromeButton wrapped in a Pressable/View, matching the translucent
dark-circle aesthetic used by the native chrome.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/features/lightbox/Lightbox.web.tsx

@@ -29,6 +29,7 @@ import {Loader} from '#/components/Loader'
 import * as Menu from '#/components/Menu'
 import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
+import {CircleChromeButton} from '#/features/lightbox/chrome/CircleChromeButton'
 import {useLightbox, useLightboxControls} from '#/features/lightbox/state'
 import {type ImageSource} from '#/features/lightbox/types'
 
@@ -251,25 +252,16 @@ function LightboxGallery({
       <Menu.Root>
         <Menu.Trigger label={_(msg`Image options`)}>
           {({props}) => (
-            <Button
+            <Pressable
               {...props}
-              style={[
+              style={[a.absolute, styles.menuBtn, delayedFadeInAnim]}
-                a.absolute,
+              accessibilityLabel={_(msg`Image options`)}
-                styles.menuBtn,
+              accessibilityHint="">
-                styles.blurredBackdrop,
+              <CircleChromeButton
-                a.transition_color,
+                icon={EllipsisIcon}
-                delayedFadeInAnim,
+                label={_(msg`Image options`)}
-              ]}
-              hoverStyle={styles.blurredBackdropHover}
-              color="secondary"
-              label={_(msg`Image options`)}
-              shape="round"
-              size={gtPhone ? 'large' : 'small'}>
-              <EllipsisIcon
-                size={gtPhone ? 'md' : 'sm'}
-                style={{color: t.palette.white}}
               />
-            </Button>
+            </Pressable>
           )}
         </Menu.Trigger>
         <Menu.Outer>
@@ -294,22 +286,13 @@ function LightboxGallery({
           </Menu.Group>
         </Menu.Outer>
       </Menu.Root>
-      <Button
+      <View style={[a.absolute, styles.closeBtn, delayedFadeInAnim]}>
-        onPress={onClose}
+        <CircleChromeButton
-        style={[
+          icon={XIcon}
-          a.absolute,
+          label={_(msg`Close image viewer`)}
-          styles.closeBtn,
+          onPress={onClose}
-          styles.blurredBackdrop,
+        />
-          a.transition_color,
+      </View>
-          delayedFadeInAnim,
-        ]}
-        hoverStyle={styles.blurredBackdropHover}
-        color="secondary"
-        label={_(msg`Close image viewer`)}
-        shape="round"
-        size={gtPhone ? 'large' : 'small'}>
-        <XIcon size={gtPhone ? 'md' : 'sm'} style={{color: t.palette.white}} />
-      </Button>
     </View>
   )
 }