Chat bubbles start at the left edge, and zaps sit quietly in them. "Let's remove the border and BG for zaps. Also remove the zap icon at the right of every message or adds too much clutter we'll just have it in the click menu or tapping an existing zap count can zap too. Also there's wasted space on the left of each message bubble can we make them flush to the left side?" (Adam, 2026-11-15, phone screenshot of the Coinos community). In a group chat the avatar now sits beside the name and the bubble runs from the left edge under both, not indented a whole avatar column; a zap total in a bubble is just the amber bolt and sats, without the tinted pill or the ring it had once you'd zapped; the one-tap ⚡ beside every bubble is gone from group chats and DMs (Zap is in each message's tap menu, and tapping a zap total still zaps). Live-stream chat keeps its ⚡. chat-layout, gif-picker and features-smoke passHEADmaster

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01VMan6UKGJyuGyZFxddYRxS

1 files changed, 9 insertions, 1 deletions

diff --git a/src/style.css b/src/style.css
index 17412b2..1db0984 100644
--- a/src/style.css
+++ b/src/style.css
@@ -534,6 +534,13 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
 }
 .chat-row { display: flex; gap: 9px; align-items: flex-start; }
 .chat-row.grouped { margin-top: -6px; }
+/* group chats: the avatar sits beside the name and the bubble starts at the
+   left edge under both, instead of indented a whole avatar column */
+.chat-row.group { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; row-gap: 3px; align-items: center; }
+.chat-row.group > .chat-body { display: contents; }
+.chat-row.group .chat-meta { grid-column: 2; margin-bottom: 0; }
+.chat-row.group .chat-line { grid-column: 1 / -1; }
+.chat-row.group > .chat-avatar.spacer { display: none; }
 .chat-avatar {
   width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
   background: var(--accent-soft);
@@ -623,7 +630,8 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
 .chat-react.on { border-color: color-mix(in srgb, currentColor 55%, transparent); font-weight: 600; }
 /* zap tally: a little bolt + sats, amber on both themes; .on = we zapped it */
 .zap-tally { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 650; color: #e6a800; white-space: nowrap; flex-shrink: 0; }
-.zap-tally.chat-react { font-size: 12px; padding: 1px 7px 1px 5px; }
+/* in a bubble the zap total is just the amber bolt + sats: no pill, no ring */
+.zap-tally.chat-react { font-size: 12px; padding: 1px 2px 1px 0; background: none; border: none; }
 .zap-tally.clickable { cursor: pointer; }
 /* the one-tap ⚡ beside someone else's chat bubble */
 .chat-line { display: flex; align-items: center; gap: 4px; }