# WorkClaw — Chat Message Components (MEASURED)
> Captured live via a throwaway test message on an empty WorkClaw conversation.
> No transcript content reproduced — only component geometry/style.

## Layout model
The thread uses an **asymmetric** chat pattern:
- **User messages** = a filled rounded "pill" bubble, **right-aligned**.
- **Assistant messages** = **NO bubble**. Avatar + plain text on transparent bg, **left-aligned**.

## User message bubble
- Wrapper row: `flex w-full justify-end`
- Bubble column: `flex flex-col w-fit max-w-full md:max-w-[75%] items-end`  → caps at **75%** desktop, full-width mobile
- Bubble element classes: `bg-white dark:bg-[#1A1A1A] ring-1 ring-inset ring-black/[0.06] dark:ring-white/[0.07] text-neutral-600 dark:text-neutral-300 whitespace-pre-wrap wrap-anywhere`
- Background (dark): **#1A1A1A** (rgb 26,26,26)
- Ring/border: 1px inset `rgba(255,255,255,0.07)` (dark) / `rgba(0,0,0,0.06)` (light)
- Text color (dark): neutral-300 (≈ lab 84.9 → ~#D4D4D4)
- Font: **Geist**, 14px / line-height 23.8px, weight 400, letter-spacing normal
- Padding: **10px 14px**
- Border-radius: **24px 24px 4px** (TL TR BR; bottom-right tucks to 4px → "tail" toward sender side)
- Box-shadow (subtle dual): `rgba(0,0,0,0.03) 0 2px 5px, rgba(255,255,255,0.03) 0 -10.4px 16px`
- No max-width on bubble itself (controlled by 75% column)

## Assistant message
- Row: `flex items-start`, **gap 15px**, transparent bg
- Avatar: **50×50px**, img (rounded via image asset — agent face), left of text
- Text: `<span>`, Geist 14px / 23.8px, weight 400, color neutral ≈ lab 91 (~#E8E8E8 / neutral-200)
- No bubble, no padding, no border — text flows directly in the row
- Row max content width inherits the thread column (≈768px content rail)

## Thread column / message list
- Message rows stack in a `flex flex-col` list
- Content rail ≈ **768px** max (matches main chat shell content width)
- Vertical rhythm between turns: gap-2 (8px) at the turn-group level; rows themselves are spaced by the wrapper

## Tokens to add
- `--bubble-user-bg: #1A1A1A;`
- `--bubble-user-ring: rgba(255,255,255,0.07);`
- `--bubble-user-text: #D4D4D4;` (neutral-300)
- `--bubble-radius: 24px 24px 4px;`
- `--assistant-avatar-size: 50px;`
- `--assistant-row-gap: 15px;`
- `--msg-font-size: 14px; --msg-line-height: 23.8px;`

## Notes
- The assistant returned a generic system error ("Sorry, I encountered an error…") — this is just the empty/no-backend response and is NOT real content. We only used it to measure the assistant text node geometry.
- Brand avatar images = replace with our own agent art.