refactor: update mobile gesture styles to use global styles for better maintainability

overlay/src/app/components/mobile/mobile-gestures.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
 export const SwipeBackRoot = style({
@@ -49,10 +49,11 @@ export const CompactDetailLayer = style({
   display: 'flex',
   flexDirection: 'column',
   // Pass through taps when outlet content is null/empty; real pages
-  // re-enable pointer events on their root via the child selector.
+  // re-enable pointer events on their root via the child rule below.
   pointerEvents: 'none',
-  selectors: {
-    '& > *': {
+});
+
+globalStyle(`${CompactDetailLayer} > *`, {
   pointerEvents: 'auto',
   flex: 1,
   minHeight: 0,
@@ -60,8 +61,6 @@ export const CompactDetailLayer = style({
   display: 'flex',
   flexDirection: 'column',
   backgroundColor: color.Background.Container,
-    },
-  },
 });
 
 export const SwipeToReplyLayer = style({