designmd-forge 1.2.0

package/dist/data/designs/ios-messenger.md

@@ -0,0 +1,361 @@
+# Design System Inspiration of Messenger (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Messenger's iOS app is the most expressive mainstream messaging surface — playful, colorful, and built for reactions rather than restraint. Where a privacy-first messenger whispers, Messenger performs. The defining visual is the outgoing message bubble: not a flat color but a vivid diagonal gradient sweeping from electric blue (`#0A7CFF`) through violet (`#9D4EDD`) into pink (`#FF5CA0`). The gradient is anchored to the *conversation*, not the bubble — it flows continuously down a run of your messages as if they were drawn on one ribbon, so a thread looks like a stream of color rather than disconnected chips. Incoming messages stay neutral gray, keeping the visual energy on "you."
+
+The canvas itself is calm white (`#FFFFFF`) in light mode and true black (`#000000`) in dark mode — Messenger uses pure black in dark mode (unlike privacy-minimal apps), which makes the gradient bubbles glow against it. Chrome is round and friendly: circular "chat head" avatars everywhere, pill search fields, fully-rounded bubbles (18pt). The signature interaction is the reactions popover — long-press any message and a floating row of six emoji (👍 ❤️ 😆 😮 😢 😡) springs up above the bubble with a bouncy scale animation; tapping one drops a small reaction badge onto the bubble's corner. The send affordance is a big friendly blue thumb/arrow that doubles as a one-tap "like" (the iconic thumbs-up) when the composer is empty.
+
+Typography is **Inter / SF** at weights 400 / 600 / 700 — clean and legible, deferring to the color and motion for personality. Conversation names are 17pt semibold, message bodies 16pt regular, the active-now green dot and reaction badges carry meaning at small sizes. Bottom tabs are minimal (Chats / Marketplace / Stories). The overall feel is "a conversation that's fun to be in": rounded, gradient-lit, reaction-forward, and motion-rich — the opposite of utilitarian, intentionally so.
+
+**Key Characteristics:**
+- Gradient outgoing bubble — diagonal `#0A7CFF → #9D4EDD → #FF5CA0`, anchored to the conversation and flowing down the whole run
+- Incoming bubbles stay neutral gray — energy stays on "you"
+- White light canvas (`#FFFFFF`) / true-black dark canvas (`#000000`) — black makes the gradient glow
+- Reactions popover — long-press → floating row of 6 emoji with a bouncy spring; tap drops a corner badge
+- Circular chat-head avatars everywhere — friendly, round, ever-present
+- Big-thumb send — a friendly blue circle that is a one-tap thumbs-up "like" when the composer is empty
+- Active-now green dot — a `#31D158` presence ring on avatars
+- Fully-rounded 18pt bubbles, pill search, round everything
+- Inter / SF at 400/600/700 — type defers to color and motion
+- Bottom tabs: Chats / Marketplace / Stories
+
+## 2. Color Palette & Roles
+
+### Primary (the Gradient)
+- **Gradient Blue** (`#0A7CFF`): Start of the outgoing-bubble gradient, send button, links, primary actions, active tab.
+- **Gradient Violet** (`#9D4EDD`): Mid-stop of the outgoing-bubble gradient.
+- **Gradient Pink** (`#FF5CA0`): End-stop of the outgoing-bubble gradient.
+- **Blue Pressed** (`#0866D6`): Pressed state for solid-blue controls (send, primary buttons).
+- **Like Thumb** (`#0A7CFF`): The thumbs-up reaction + the empty-composer "like" button.
+
+### Canvas & Surface (Light)
+- **Canvas White** (`#FFFFFF`): Chat list, thread background, navigation.
+- **Surface Gray** (`#F1F1F2`): Search field, grouped sections, composer field background.
+- **Incoming Bubble** (`#F1F1F2`): Left-aligned received message bubble (light).
+- **Divider** (`#E4E6EB`): Hairline dividers between list rows.
+- **Text Primary** (`#050505`): Conversation names, incoming text, primary labels.
+- **Text Secondary** (`#65676B`): Previews, timestamps, secondary labels.
+- **Text Tertiary** (`#8A8D91`): Placeholders, disabled labels.
+
+### Canvas & Surface (Dark)
+- **Dark Canvas** (`#000000`): Chat list, thread background (true black — makes gradient glow).
+- **Dark Surface** (`#1C1C1D`): Search field, grouped sections.
+- **Dark Incoming Bubble** (`#303030`): Received message bubble (dark).
+- **Dark Divider** (`#3A3B3C`): Hairline dividers in dark mode.
+- **Dark Text Primary** (`#E4E6EB`): Conversation names, incoming text (dark).
+- **Dark Text Secondary** (`#B0B3B8`): Previews, timestamps (dark).
+
+### Message-Specific
+- **Outgoing Text** (`#FFFFFF`): Text on the gradient bubble (both modes).
+- **Outgoing Meta** (`#FFFFFFCC`): Time + delivery status inside an outgoing bubble (80% white).
+- **Reaction Badge BG** (`#FFFFFF` light / `#000000` dark): Pill behind the corner reaction emoji + count, with a hairline ring.
+
+### Semantic
+- **Active Now Green** (`#31D158`): Presence dot/ring on avatars (online indicator).
+- **Typing Dots** (`#65676B`): The animated "…" typing indicator in a gray bubble.
+- **Unread Blue** (`#0A7CFF`): Unread conversation dot + bold name.
+- **Error Red** (`#FA383E`): Failed-to-send, destructive actions.
+- **Success Green** (`#31A24C`): "Sent", confirmation toasts.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter` (matches Messenger's clean grotesque tone; SF Pro is the native fallback)
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Emoji**: system color emoji (Apple Color Emoji) — reactions are real emoji glyphs
+- **Weights**: 400 (regular), 600 (semibold), 700 (bold)
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Large Title | Inter | 28pt | 700 | 1.2 | -0.3pt | "Chats" nav large title |
+| Conversation Name | Inter | 17pt | 600 | 1.3 | 0pt | Row title in chat list (bold 700 if unread) |
+| Thread Title | Inter | 16pt | 600 | 1.25 | 0pt | Contact/group name in chat header |
+| Message Body | Inter | 16pt | 400 | 1.4 | 0pt | The bubble text — core reading size |
+| Message Preview | Inter | 15pt | 400 | 1.3 | 0pt | Last-message snippet (semibold if unread) |
+| Section Header | Inter | 13pt | 700 | 1.2 | 0.2pt | Grouped section labels |
+| Timestamp (Row) | Inter | 13pt | 400 | 1.2 | 0pt | Time on a conversation row |
+| Bubble Meta | Inter | 12pt | 400 | 1.2 | 0pt | Time + delivery inside/under a bubble |
+| Reaction Count | Inter | 12pt | 600 | 1.0 | 0pt | Number beside a corner reaction emoji |
+| Button (Primary) | Inter | 16pt | 600 | 1.0 | 0pt | Blue primary button labels |
+| Button (Text) | Inter | 16pt | 600 | 1.0 | 0pt | Blue text actions |
+| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
+| Active Now | Inter | 12pt | 400 | 1.2 | 0pt | "Active now" / "Active 5m ago" |
+| System Message | Inter | 13pt | 400 | 1.35 | 0pt | "You named the group …" centered note |
+
+### Principles
+- **Type defers to color and motion**: the gradient + reactions carry personality, so text stays clean and quiet
+- **Unread is bold, not colored**: an unread conversation goes weight 700, with a small blue dot — never colored text
+- **Message body at 16pt / line-height 1.4**: comfortable and compact
+- **Emoji are first-class**: reactions render as full-color system emoji at meaningful sizes (24pt in the popover)
+- **Dynamic Type respected** on names and bodies; bubble meta, reaction counts, tab labels are layout-fixed
+- **Weights 400/600/700 only** — no light, no display type
+
+## 4. Component Stylings
+
+### Buttons
+
+**Big-Thumb Send (Signature)**
+- Shape: Circle, diameter 32pt (composer-trailing)
+- Empty composer: a thumbs-up glyph `hand.thumbsup.fill` 20pt in `#0A7CFF`, no fill background (tap = send a 👍 "like")
+- With text: a filled `#0A7CFF` circle with a white paper-plane/arrow 16pt
+- Transition: glyph morphs thumbs-up → filled-send with a 180ms spring as text appears
+- Pressed: scale 0.90, `#0866D6` if filled, soft haptic
+- Long-press the empty-state thumb: scales the 👍 up for a "big like" (super-size reaction)
+
+**Primary Button ("Create", "Send Invite")**
+- Background: `#0A7CFF` (solid blue — the gradient is reserved for bubbles)
+- Text: `#FFFFFF`, Inter 16pt weight 600
+- Padding: 13pt vertical, full-width (16pt horizontal inset)
+- Corner radius: 20pt (pill-ish, friendly)
+- Pressed: `#0866D6`, scale 0.99
+
+**Text Button ("Edit", "Done")**
+- Inter 16pt weight 600, color `#0A7CFF`
+- No background; 44pt hit area; pressed opacity 0.5
+
+**Reaction Pill (on a bubble)**
+- A small rounded pill anchored to the bubble's bottom corner
+- Background: `#FFFFFF` (light) / `#000000` (dark) with a 1pt `#E4E6EB` / `#3A3B3C` ring
+- Content: the emoji (16pt) + optional count (Inter 12pt w600 `#65676B`)
+- Multiple reactions stack horizontally; tap opens the reaction detail sheet
+
+**Icon Action (Camera, Photo, Mic, GIF, Call, Video, Info)**
+- Glyph 22pt, hit area 44pt
+- Default: `#0A7CFF` (Messenger tints action glyphs blue, not gray)
+- In-thread header call/video: `#0A7CFF`
+
+### Cards & Containers
+
+**Conversation Row**
+- Height: 72pt
+- Layout: 56pt circular avatar with optional green active-ring (leading) → name (17pt w600, 700 if unread) + last-message preview (15pt w400 `#65676B`, 1-line clamp) → trailing: timestamp (13pt) + unread blue dot
+- Active-now: a `#31D158` 14pt dot on the avatar's bottom-right with a 2pt canvas-color ring
+- Background: canvas; pressed `#F1F1F2` (light) / `#1C1C1D` (dark)
+- Divider: hairline `#E4E6EB` inset to text origin
+
+**Message Bubble — Outgoing (Gradient, Signature)**
+- Background: a diagonal linear gradient `#0A7CFF → #9D4EDD → #FF5CA0` (≈135°)
+- **Conversation-anchored**: the gradient spans the full vertical extent of the visible thread, each bubble shows the slice of the ribbon at its position — a run of your messages reads as one continuous color flow
+- Text: `#FFFFFF`, Inter 16pt w400
+- Padding: 9pt vertical, 14pt horizontal
+- Corner radius: 18pt, with the tail-side corner tightened to 6pt on the last bubble of a same-sender run
+- Meta: time + delivery (sent/delivered/seen avatar) below the bubble, 12pt `#FFFFFFCC` or `#65676B`
+- Max width: 72% of thread width; right-aligned with 10pt trailing inset
+
+**Message Bubble — Incoming**
+- Background: `#F1F1F2` (light) / `#303030` (dark) — flat, neutral
+- Text: `#050505` (light) / `#E4E6EB` (dark), Inter 16pt w400
+- Corner radius: 18pt, bottom-left tightened to 6pt on last of run
+- Group sender avatar (28pt) shown once at the run's bottom-left
+- Max width: 72%; left-aligned with 10pt leading inset
+
+**Reactions Popover (Signature)**
+- Triggered by long-press on any bubble
+- A floating capsule above the bubble: 6 emoji (👍 ❤️ 😆 😮 😢 😡) at 30pt, 12pt gaps, plus a "+" to open the full picker
+- Background: `#FFFFFF` (light) / `#1C1C1D` (dark), corner radius 28pt (full pill), shadow `rgba(0,0,0,0.18) 0 8px 28px`
+- Enter: scales 0.7 → 1.0 with a spring (damping 0.6) + each emoji has a 20ms staggered pop
+- On selection: chosen emoji animates down and lands as a corner reaction badge with a bounce
+
+**Typing Indicator**
+- A gray incoming-style bubble containing three `#65676B` dots that bounce in sequence (the "…")
+- Same radius/inset as an incoming bubble
+
+**Stories Tray**
+- Horizontal row at the top of Chats (or its own tab): circular avatars with a gradient ring for unseen Stories
+- "Your story" tile with a blue "+" badge leading
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 50pt + safe area
+- Background: `#FFFFFF` (light) / `#000000` (dark), top hairline `#E4E6EB` / `#3A3B3C`
+- Tabs: Chats, Marketplace, Stories
+- Icon 26pt; active `#0A7CFF`, inactive `#65676B`
+- Labels: Inter 10pt w600, always shown
+- Chats: unread total badge `#FA383E` (red) with white count
+
+**Chat List Top Bar**
+- Large title "Chats" (28pt w700), profile avatar (32pt circular) leading on scroll
+- Trailing: new-message compose glyph (pencil) 22pt `#0A7CFF`
+- Below title: pill search field — `#F1F1F2` fill, 36pt, corner radius 18pt, placeholder "Search"
+- Optional Stories tray row beneath search
+
+**Thread Header**
+- Height: 44pt + safe area, canvas background, bottom hairline
+- Leading: back chevron 24pt `#0A7CFF` + 36pt avatar (with active dot) + name (16pt w600) + "Active now" (12pt `#65676B`)
+- Trailing: audio-call + video-call glyphs, 22pt `#0A7CFF`, 18pt gap
+- Tap name/avatar: opens conversation info
+
+### Input Fields
+
+**Composer**
+- A row of round action glyphs (camera / photo / mic / GIF) in `#0A7CFF`, then the pill field
+- Pill: `#F1F1F2` (light) / `#1C1C1D` (dark), min height 36pt, corner radius 18pt
+- Field: Inter 16pt w400, placeholder "Aa" `#8A8D91`, grows to 5 lines then scrolls
+- Trailing: emoji glyph inside the pill; outside: the big-thumb send (👍 when empty)
+- Focus: action glyphs collapse into a single chevron to give the field room (Messenger's signature collapse)
+
+**Search Field**
+- Background: `#F1F1F2` (light) / `#1C1C1D` (dark)
+- Height: 36pt, corner radius 18pt (full pill)
+- Leading magnifier 16pt `#65676B`, placeholder "Search" `#8A8D91`
+- Focus: cursor `#0A7CFF`, "Cancel" text button appears trailing
+
+### Distinctive Components
+
+**Conversation-Anchored Gradient Bubble**
+- The single most identifying element: outgoing messages are a blue→violet→pink gradient that flows continuously down the whole run, not per-bubble
+- Implementation: render the gradient on a layer the size of the message stack and mask it to the union of outgoing bubble shapes
+
+**Reactions Popover**
+- Long-press any bubble → a springy floating row of 6 emoji + "+"
+- Bouncy enter (scale 0.7 → 1 spring, staggered emoji pop); selection lands as a corner badge with a bounce
+- The defining "fun" interaction of the app
+
+**Big-Thumb Send / One-Tap Like**
+- Empty composer shows a blue 👍 — tapping it instantly sends a thumbs-up; long-press makes it a giant like
+- Morphs into a filled send button when you type
+
+**Active-Now Presence**
+- A `#31D158` dot/ring on avatars across the list, header, and Stories tray — Messenger foregrounds presence
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 10, 12, 16, 20, 24, 32, 44, 56
+- Bubble inner padding: 9pt vertical, 14pt horizontal
+- Inter-bubble gap: 2pt within a same-sender run, 8pt between senders
+- Row inset: avatar leading 16pt, text origin 80pt (divider starts here)
+
+### Grid & Container
+- Single column everywhere — list, thread
+- Bubble max width: 72% of thread width
+- Thread side insets: 10pt; group avatar reserves 28pt on the leading side
+- Stories tray: horizontal scroll, 64pt circular tiles, 12pt gap
+- iPad: master-detail split (list left, thread right)
+
+### Whitespace Philosophy
+- **Friendly density**: 72pt rows, rounded everything — approachable, never clinical
+- **The gradient is the focal point**: keep incoming bubbles flat and gray so the color stays on "you"
+- **Reactions get room to perform**: the popover floats clear above the bubble with shadow separation
+- **Black background in dark mode** is intentional — it makes the gradient luminous
+
+### Border Radius Scale
+- Soft (6pt): the tightened tail corner on the last bubble of a run
+- Standard (12pt): info cards, attachment thumbnails
+- Bubble (18pt): message bubbles, composer pill, search pill
+- Pill (20pt): primary buttons
+- Popover (28pt): the reactions popover capsule
+- Circle (50%): avatars, send button, chat heads, reaction badges
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Conversation rows, bubbles, canvas |
+| Bubble (Level 0) | No shadow (color/fill separation) | Bubbles separate by gradient vs gray, not elevation |
+| Bar Hairline (Level 1) | `rgba(0,0,0,0.06) 0 0.5px 0` | Tab bar + thread header on scroll |
+| Reaction Badge (Level 1) | `rgba(0,0,0,0.10) 0 1px 3px` | The corner reaction pill lifts slightly off the bubble |
+| Popover (Level 3) | `rgba(0,0,0,0.18) 0 8px 28px` | Reactions popover, context menu |
+| Sheet (Level 3) | `rgba(0,0,0,0.16) 0 -8px 32px` | Attachment sheet, reaction-detail sheet |
+
+**Shadow Philosophy**: Bubbles are flat — they separate by the gradient-vs-gray contrast, not shadow. The only persistent shadow is the subtle lift under a corner reaction badge so it reads as stuck *onto* the bubble. Real elevation is reserved for the reactions popover and sheets, where a soft 28px shadow makes them float convincingly above the playful canvas.
+
+### Motion
+- **Reactions popover enter**: capsule scale 0.7 → 1.0 spring (damping 0.6), emoji pop in with a 20ms stagger
+- **Reaction land**: selected emoji translates from the popover to the bubble corner + bounce 1.0 → 1.25 → 1.0
+- **Bubble pop**: a newly sent bubble scales 0.85 → 1.0 spring (damping 0.65) as it enters
+- **Big-thumb morph**: thumbs-up ↔ filled send, 180ms spring as composer text toggles
+- **Big like**: long-press the empty thumb → 👍 scales up smoothly; release sends a giant reaction
+- **Active dot**: a gentle pulse on first appearance, then static
+- **Tab switch**: instant crossfade
+
+## 7. Do's and Don'ts
+
+### Do
+- Render the outgoing bubble as a `#0A7CFF → #9D4EDD → #FF5CA0` gradient anchored to the conversation, flowing down the whole run
+- Keep incoming bubbles flat neutral gray — energy stays on "you"
+- Use white (`#FFFFFF`) light canvas and TRUE black (`#000000`) dark canvas — black makes the gradient glow
+- Make the reactions popover bouncy: spring enter, staggered emoji pop, landing bounce
+- Show a blue thumbs-up in the empty composer that one-tap sends a 👍 and morphs to send on text
+- Put a `#31D158` active-now dot on avatars — Messenger foregrounds presence
+- Use circular chat-head avatars everywhere; round all bubbles to 18pt
+- Keep type clean (Inter 400/600/700) — color and motion carry the personality
+
+### Don't
+- Don't make outgoing bubbles a flat single color — the conversation-anchored gradient is the brand
+- Don't gradient the incoming bubbles — they stay flat gray
+- Don't use soft-black in dark mode — Messenger uses pure `#000000` so the gradient luminesces
+- Don't make the reactions popover stiff — it must bounce and stagger
+- Don't show the filled send button when the composer is empty — it's a thumbs-up then
+- Don't color body text for unread — go bold (700) + a small blue dot instead
+- Don't add a second solid accent — blue is the UI accent; the gradient is bubble-only
+- Don't use display-size type — the 28pt large title is the ceiling
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | 64pt rows, bubble max 78%, popover emoji 26pt |
+| iPhone 13/14/15 | 390pt | Standard — 72pt rows, popover emoji 30pt |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the header |
+| iPhone 15/16 Pro Max | 430pt | Larger avatars (60pt), wider thread |
+| iPad | 768pt+ | Master-detail split: list (left, 360pt) + thread (right) |
+
+### Dynamic Type
+- Conversation names, message bodies, previews: full scale
+- Message body caps at ~22pt; bubble grows with content
+- Bubble meta, reaction counts, tab labels: layout-fixed (do not scale)
+- Reactions popover emoji: fixed size (gesture-sensitive layout)
+
+### Orientation
+- Chat list / thread: **portrait + landscape** (landscape widens the thread; gradient re-spans the new height)
+- iPad: split view in both orientations
+- Media viewer / video call: rotates freely
+
+### Touch Targets
+- Big-thumb send: 32pt visual, 44pt effective hit
+- Reactions popover emoji: 44pt effective hit each (even though rendered ~30pt)
+- Conversation rows: full 72pt row tappable
+- Tab items: 26pt icon, 49pt hit
+
+### Safe Area Handling
+- Top: large title + search respect safe area / Dynamic Island
+- Bottom: composer + tab bar respect home indicator; composer rises with the keyboard
+- Sides: 10pt thread insets, 16pt list insets
+- Reactions popover repositions to stay on-screen near edges
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Gradient: `#0A7CFF` → `#9D4EDD` → `#FF5CA0` (≈135°, outgoing bubble only)
+- UI blue (send / links / actions): `#0A7CFF`; pressed `#0866D6`
+- Canvas (light/dark): `#FFFFFF` / `#000000` (true black)
+- Surface (light/dark): `#F1F1F2` / `#1C1C1D`
+- Incoming bubble (light/dark): `#F1F1F2` / `#303030`
+- Divider (light/dark): `#E4E6EB` / `#3A3B3C`
+- Text primary (light/dark): `#050505` / `#E4E6EB`
+- Text secondary: `#65676B` / `#B0B3B8`
+- Active-now green: `#31D158`; error red: `#FA383E`
+
+### Example Component Prompts
+- "Create a SwiftUI Messenger conversation row: 72pt height, 56pt circular avatar leading with a #31D158 active-now dot (14pt, 2pt canvas ring) at its bottom-right. Name 'Theo Marchetti' Inter 17pt weight 600 #050505, last-message preview 'sent a photo' Inter 15pt #65676B (1-line clamp). Trailing: timestamp '9:41 AM' Inter 13pt #65676B. If unread: name weight 700 + a 8pt #0A7CFF dot. Pressed background #F1F1F2."
+- "Build a Messenger outgoing gradient bubble: background is a ≈135° linear gradient from #0A7CFF through #9D4EDD to #FF5CA0, ANCHORED to the conversation (the gradient spans the full visible thread height; this bubble shows its slice so a run of messages reads as one continuous ribbon). Text #FFFFFF Inter 16pt w400, padding 9pt vertical 14pt horizontal, corner radius 18pt with the bottom-right tightened to 6pt for the tail. Max width 72%, right-aligned."
+- "Design the Messenger reactions popover: triggered by long-press on a bubble. A floating capsule above it with 6 emoji 👍 ❤️ 😆 😮 😢 😡 at 30pt, 12pt gaps, plus a '+'. Background #FFFFFF (light) / #1C1C1D (dark), corner radius 28pt, shadow rgba(0,0,0,0.18) 0 8px 28px. Enter: scale 0.7 → 1.0 spring (damping 0.6) with a 20ms staggered emoji pop. On tap: the chosen emoji flies down and lands as a corner badge on the bubble with a 1.0 → 1.25 → 1.0 bounce."
+- "Build the Messenger composer with big-thumb send: a row of #0A7CFF action glyphs (camera, photo, mic, GIF) then a #F1F1F2 pill (corner radius 18pt, placeholder 'Aa' #8A8D91, emoji glyph trailing inside). Outside the pill: a 32pt send affordance that is a blue 👍 thumbs-up when the field is EMPTY (tap = send a like) and morphs via a 180ms spring into a filled #0A7CFF circle with a white send arrow when text exists. Long-press the empty thumb scales the 👍 up for a 'big like'."
+- "Build the Messenger bottom tab bar: 50pt + safe area, background #FFFFFF (light) / #000000 (true black, dark). Tabs Chats / Marketplace / Stories, icons 26pt, active #0A7CFF, inactive #65676B, labels Inter 10pt w600. Chats shows a #FA383E unread badge with a white count."
+
+### Iteration Guide
+1. Outgoing bubble = conversation-anchored `#0A7CFF → #9D4EDD → #FF5CA0` gradient flowing down the whole run — this is THE brand
+2. Incoming bubbles stay flat neutral gray — keep the energy on "you"
+3. Canvas is `#FFFFFF` light / TRUE `#000000` dark — black makes the gradient glow
+4. Reactions popover must bounce: spring enter (damping 0.6), staggered emoji pop, landing bounce
+5. Empty composer shows a blue 👍 (one-tap like); it morphs to a filled send on text
+6. Put `#31D158` active-now dots on avatars — presence is foregrounded
+7. Round everything: 18pt bubbles, circular avatars/chat-heads, pill fields
+8. Type stays clean (Inter 400/600/700) — color and motion carry personality; unread = bold + blue dot, never colored text