From 0c704aac3886a69964d13c11021ff0cd22e47c6f Mon Sep 17 00:00:00 2001
From: heaven <vojochatdev@gmail.com>
Date: Mon, 18 May 2026 02:04:39 +0300
Subject: [PATCH] tweak(bubbles): paint peer bg and horseshoe void pure black
 and flip own/peer flat-corner to bottom-left/top-left at 16px radius

---
 .../components/message/layout/Channel.css.ts  | 39 +++++++------------
 .../components/message/layout/layout.css.ts   | 10 ++---
 src/app/styles/horseshoe.ts                   |  2 +-
 src/index.css                                 |  4 +-
 4 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/src/app/components/message/layout/Channel.css.ts b/src/app/components/message/layout/Channel.css.ts
index ce194186..ce811241 100644
--- a/src/app/components/message/layout/Channel.css.ts
+++ b/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
-// (4px), incoming messages flatten BOTTOM-LEFT. Same pattern as
+// Asymmetric corner per `data-own` — own messages flatten BOTTOM-LEFT
+// (4px), incoming messages flatten TOP-LEFT. Same pattern as
 // `StreamBubble.own`/`StreamBubble.others`.
-globalStyle(
-  `${ChannelRow}[data-bubble="true"][data-own="true"] ${ChannelMessageBody}`,
-  {
-    borderRadius: `${toRem(4)} ${config.radii.R500} ${config.radii.R500} ${config.radii.R500}`,
-  }
-);
+globalStyle(`${ChannelRow}[data-bubble="true"][data-own="true"] ${ChannelMessageBody}`, {
+  borderRadius: `${toRem(16)} ${toRem(16)} ${toRem(16)} ${toRem(4)}`,
+});
 
-globalStyle(
-  `${ChannelRow}[data-bubble="true"][data-own="false"] ${ChannelMessageBody}`,
-  {
-    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)',
-  }
-);
+globalStyle(`${ChannelRow}[data-bubble="true"][data-own="false"] ${ChannelMessageBody}`, {
+  borderRadius: `${toRem(4)} ${toRem(16)} ${toRem(16)} ${toRem(16)}`,
+  // 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(
-  `${ChannelRow}[data-bubble="true"] ${ChannelHeader}[data-in-bubble="true"]`,
-  {
-    marginBottom: toRem(2),
-  }
-);
+globalStyle(`${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
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index 07b92ea8..2e23ed60 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/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.
-    // Incoming: mirrored.
+    // Asymmetric notch — own: bottom-left flat, three corners R500+.
+    // 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,
diff --git a/src/app/styles/horseshoe.ts b/src/app/styles/horseshoe.ts
index ec163197..60ae6bdb 100644
--- a/src/app/styles/horseshoe.ts
+++ b/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
diff --git a/src/index.css b/src/index.css
index 4a37bea6..d87332ee 100644
--- a/src/index.css
+++ b/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;