tweak(bubbles): paint peer bg and horseshoe void pure black and flip own/peer flat-corner to bottom-left/top-left at 16px radius

src/app/components/message/layout/Channel.css.ts

@@ -155,36 +155,27 @@ globalStyle(`${ChannelRow}[data-bubble="true"] ${ChannelMessageBody}`, {
   overflow: 'hidden',
 });
 
-// Asymmetric corner per `data-own` — own messages flatten TOP-LEFT
+// Asymmetric corner per `data-own` — own messages flatten BOTTOM-LEFT
-// (4px), incoming messages flatten BOTTOM-LEFT. Same pattern as
+// (4px), incoming messages flatten TOP-LEFT. Same pattern as
 // `StreamBubble.own`/`StreamBubble.others`.
-globalStyle(
+globalStyle(`${ChannelRow}[data-bubble="true"][data-own="true"] ${ChannelMessageBody}`, {
-  `${ChannelRow}[data-bubble="true"][data-own="true"] ${ChannelMessageBody}`,
+  borderRadius: `${toRem(16)} ${toRem(16)} ${toRem(16)} ${toRem(4)}`,
-  {
+});
-    borderRadius: `${toRem(4)} ${config.radii.R500} ${config.radii.R500} ${config.radii.R500}`,
-  }
-);
 
-globalStyle(
+globalStyle(`${ChannelRow}[data-bubble="true"][data-own="false"] ${ChannelMessageBody}`, {
-  `${ChannelRow}[data-bubble="true"][data-own="false"] ${ChannelMessageBody}`,
+  borderRadius: `${toRem(4)} ${toRem(16)} ${toRem(16)} ${toRem(16)}`,
-  {
-    borderRadius: `${config.radii.R500} ${config.radii.R500} ${config.radii.R500} ${toRem(4)}`,
   // Peer (not-own) bubble bg — matches Stream layout's `peerBg`
   // variant. Covers channels main timeline AND thread drawer
   // (both pass `headerInBubble`, so `data-bubble="true"` fires).
   backgroundColor: 'var(--vojo-peer-bubble-bg)',
-  }
+});
-);
 
 // Small gap so the in-bubble header (username + time) doesn't sit flush
 // against the first line of message text. Matches `StreamBubbleHeader`'s
 // 2px gap.
-globalStyle(
+globalStyle(`${ChannelRow}[data-bubble="true"] ${ChannelHeader}[data-in-bubble="true"]`, {
-  `${ChannelRow}[data-bubble="true"] ${ChannelHeader}[data-in-bubble="true"]`,
-  {
   marginBottom: toRem(2),
-  }
+});
-);
 
 // Thread-summary footer rendered INSIDE the bubble (rather than as a
 // separate pill below). Negative L/R margin (matches the bubble's

src/app/components/message/layout/layout.css.ts

@@ -424,14 +424,15 @@ export const StreamBubble = recipe({
     zIndex: 1,
   },
   variants: {
-    // Asymmetric notch — own: top-left flat, three corners R500.
+    // Asymmetric notch — own: bottom-left flat, three corners R500+.
-    // Incoming: mirrored.
+    // Incoming: top-left flat, three corners R500+. Mirrored on the
+    // vertical axis so own/peer read as opposing silhouettes.
     own: {
       true: {
-        borderRadius: `${toRem(4)} ${config.radii.R500} ${config.radii.R500} ${config.radii.R500}`,
+        borderRadius: `${toRem(16)} ${toRem(16)} ${toRem(16)} ${toRem(4)}`,
       },
       false: {
-        borderRadius: `${config.radii.R500} ${config.radii.R500} ${config.radii.R500} ${toRem(4)}`,
+        borderRadius: `${toRem(4)} ${toRem(16)} ${toRem(16)} ${toRem(16)}`,
       },
     },
     // Mobile fills the message column (block 100%); desktop fits content
@@ -544,7 +545,6 @@ export const StreamSysline = style({
   paddingBottom: toRem(2),
 });
 
-
 export const StreamSyslineBody = style({
   fontSize: toRem(11.5),
   color: color.Surface.OnContainer,

src/app/styles/horseshoe.ts

@@ -4,7 +4,7 @@
 // silhouette, bottom call rail, settings/profile rail, page-nav <-> chat
 // split, etc.) is painted through the `--vojo-horseshoe-void` CSS
 // variable so it reshades with the active theme:
-//   * dark theme — near-black `#090909` so the seam reads as a deep
+//   * dark theme — pure `#000000` so the seam reads as a hard black
 //                  void against `Background.Container` `#0d0e11`.
 //   * light theme — soft lavender-grey `#d6d6e3` so the seam stays
 //                   visible against the panel bg `#f2f2f7` without

src/index.css

@@ -46,9 +46,9 @@
   --mx-uc-7: hsl(243, 100%, 80%);
   --mx-uc-8: hsl(94, 100%, 80%);
 
-  --vojo-horseshoe-void: #090909;
+  --vojo-horseshoe-void: #000000;
 
-  --vojo-peer-bubble-bg: #090909;
+  --vojo-peer-bubble-bg: #000000;
   --vojo-timeline-rail: #000000;
 
   --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;