fix(profile): override avatar circle force via && self-doubled selector instead of source-order-dependent !important double-up

src/app/components/user-profile/styles.css.ts

@@ -92,16 +92,28 @@ export const HeroAvatarButton = style({
 // server-side 1:1 avatar shows full-bleed without cropping, and the
 // rest of the card stays in flow below. Replaces the legacy full-pane
 // avatar swap which hid the name / presence / info rows entirely.
-// `border-radius: !important` is mandatory: the global override in
+//
-// `components/user-avatar/UserAvatar.css.ts` uses `!important` to
+// `&&` self-doubled selector + `!important` for `border-radius` is
-// force every avatar parent to 50%, so without matching specificity
+// the override pattern for the global avatar-circle force in
-// the expanded square would render as a huge circle.
+// `components/user-avatar/UserAvatar.css.ts:23-25`, which uses
+// `*:has(> .UserAvatar) { border-radius: 50% !important }` to round
+// every avatar parent. A single-class override + `!important` would
+// be source-order dependent (both rules carry `!important`, so the
+// cascade falls to specificity). `&&` emits
+// `.HeroAvatarExpanded.HeroAvatarExpanded` which doubles class
+// specificity and beats the single-class selector inside the
+// global `:has()`, so we win regardless of which CSS module the
+// bundler emits first.
 export const HeroAvatarExpanded = style({
   width: '100%',
   height: 'auto',
   aspectRatio: '1 / 1',
-  borderRadius: `${toRem(16)} !important`,
   boxShadow: 'none',
+  selectors: {
+    '&&': {
+      borderRadius: `${toRem(16)} !important`,
+    },
+  },
 });
 
 export const HeroAvatarButtonExpanded = style({