Inbox and Messaging Layout

Build a three-pane inbox and messaging layout for a SaaS customer support tool called "Replybase". The layout should include:

1. **Far-left navigation rail (64px wide)** — Icon-only vertical nav with tooltips. Icons: Home, Inbox (active, blue-600 badge with "12"), Contacts, Reporting, Automations, Settings. User avatar at the very bottom with a "●" green online indicator.

2. **Left pane — Contact list (280px, scrollable):**
   - Header: "Inbox" title, a "Compose" pencil icon, and a filter icon
   - Search input: "Search conversations…" (full-width, zinc-100 bg)
   - Filter tabs: "All (47)", "Open (12)", "Pending (8)", "Closed (27)"
   - List of conversation items, each showing:
     - Avatar (32px circle, initials)
     - Contact name (font-semibold)
     - Last message snippet (text-sm, text-zinc-500, truncated)
     - Timestamp (text-xs, right-aligned)
     - Unread: bold name + blue dot indicator
   - Sample contacts (6 visible):
     1. **Sofia M.** — "Can I change my plan mid-cycle?" — 2m ago 🔵 (unread)
     2. **David Park** — "Reset password link not arriving…" — 14m ago
     3. **Ren Carlson** — "When does the new integration ship?" — 1h ago 🔵
     4. **Maria Gomes** — "Export doesn't include…" — 3h ago
     5. **Tom Nakamura** — "Love the new dashboard! One…" — 5h ago
     6. **Priya Nair** — "Billing receipt needed for April" — 1d ago

3. **Center pane — Thread list (320px, scrollable):**
   - Header: Selected contact "Sofia M." with avatar, email, and a "View profile →" link
   - Three previous threads listed (card-style, clickable):
     - "Can I change my plan mid-cycle?" — Today, 2:14 PM — Open 🟢
     - "Trouble logging in after reset" — Feb 12, 2026 — Closed ✓
     - "Need invoice for Feb billing" — Feb 3, 2026 — Closed ✓
   - Active thread highlighted with blue-50 background

4. **Right pane — Conversation view (flex-1):**
   - Header: Thread title "Can I change my plan mid-cycle?", a "Assign to: Alex R. ▾" dropdown, a status badge "Open" (green), and action buttons: "Snooze", "Close", "⋯ More"
   - Chat-style message bubbles:
     - **Sofia M.** (left, zinc-100 bg) at 2:14 PM: "Hi! I'm currently on the Starter plan. Can I switch to Pro mid-month without losing my remaining days? Also, does my billing date change?"
     - **Alex Rivera** (right, blue-600 bg, white text) at 2:18 PM: "Hey Sofia! Great question. Yes — you can upgrade at any time. We'll prorate the difference automatically. Your billing date stays the same."
     - **Sofia M.** (left) at 2:20 PM: "That's perfect, thank you! One more thing — does Pro include API access immediately after upgrade, or is there a delay?"
     - **Alex R.** (right, blue) at 2:22 PM: "API access is available instantly after upgrading. You'll find your API keys under Settings → Developer. Let me know if you need anything else! 🙂"
   - Reply compose box at the bottom (full-width):
     - Tabs: "Reply | Note | Forward"
     - Textarea with placeholder: "Type a reply…"
     - Bottom toolbar: Bold, Italic, Link, Attachment, Emoji
     - "Send reply" button (blue-600) and "Close on send" checkbox

5. **Design:** White background, zinc-50 for left panels, blue-600 accent, Inter font, 1px zinc-200 dividers between panes. Unread indicator is a 6px blue-600 dot. Keyboard shortcut shown in tooltip on "Compose" button: ⌘N.

[NAV RAIL — 64px, icons only]
  [🏠]
  [📥] ← blue badge "12" (active)
  [👥]
  [📊]
  [⚡]
  [⚙]
  ──
  [●] ← avatar, green dot

[THREE-PANE LAYOUT]
┌──────────────────────────┐  ┌────────────────────────────────┐  ┌──────────────────────────────────────────────────┐
│ Inbox              ✏ ⊞  │  │ Sofia M.  ←   View profile →  │  │ "Can I change my plan mid-cycle?"                │
│ [Search conversations…]  │  │ sofia@email.com                │  │  Assign: [Alex R. ▾]  🟢 Open   [Snooze][Close] │
│ ─────────────────────── │  │ ────────────────────────────── │  │ ──────────────────────────────────────────────── │
│ [All 47][Open 12][Pend 8]│  │                                │  │                                                  │
│                          │  │ ● Can I change my plan…        │  │  ┌──────────────────────────────────────┐        │
│ 🔵 Sofia M.              │  │   Today, 2:14 PM    🟢 Open   │  │  │ Sofia M. — 2:14 PM                  │        │
│    "Can I change my…"    │  │   (active, blue-50 bg)         │  │  │ Hi! I'm on the Starter plan. Can I  │        │
│    2m ago                │  │                                │  │  │ switch to Pro mid-month without      │        │
│ ─────────────────────── │  │ ○ Trouble logging in…          │  │  │ losing my remaining days?            │        │
│    David Park            │  │   Feb 12, 2026      ✓ Closed  │  │  └──────────────────────────────────────┘        │
│    "Reset password link" │  │                                │  │                                                  │
│    14m ago               │  │ ○ Need invoice for Feb…        │  │         ┌────────────────────────────────────┐   │
│ ─────────────────────── │  │   Feb 3, 2026       ✓ Closed  │  │         │ Alex Rivera — 2:18 PM             │   │
│ 🔵 Ren Carlson           │  │                                │  │         │ Of course! You can upgrade any    │   │
│    "When does the new…"  │  │                                │  │         │ time. We'll prorate the difference.│   │
│    1h ago                │  │                                │  │         │ Your billing date stays the same.  │   │
│ ─────────────────────── │  │                                │  │         └────────────────────────────────────┘   │
│    Maria Gomes           │  │                                │  │                                                  │
│    "Export doesn't…"     │  │                                │  │  ┌──────────────────────────────────────┐        │
│    3h ago                │  │                                │  │  │ Sofia M. — 2:20 PM                  │        │
│ ─────────────────────── │  │                                │  │  │ Does Pro include API access           │        │
│    Tom Nakamura          │  │                                │  │  │ immediately after upgrade?            │        │
│    "Love the new dash…"  │  │                                │  │  └──────────────────────────────────────┘        │
│    5h ago                │  │                                │  │                                                  │
│ ─────────────────────── │  │                                │  │         ┌────────────────────────────────────┐   │
│    Priya Nair            │  │                                │  │         │ Alex Rivera — 2:22 PM             │   │
│    "Billing receipt for  │  │                                │  │         │ API access is instant! Find keys   │   │
│    April" — 1d ago       │  │                                │  │         │ at Settings → Developer. 🙂        │   │
│                          │  │                                │  │         └────────────────────────────────────┘   │
│                          │  │                                │  │                                                  │
│                          │  │                                │  │ [Reply] [Note] [Forward]                         │
│                          │  │                                │  │ ┌──────────────────────────────────────────────┐ │
│                          │  │                                │  │ │ Type a reply…                               │ │
│                          │  │                                │  │ │                                              │ │
│                          │  │                                │  │ └──────────────────────────────────────────────┘ │
│                          │  │                                │  │ [B][I][🔗][📎][😊]        ☐ Close on send       │
│                          │  │                                │  │                         [Send reply]             │
└──────────────────────────┘  └────────────────────────────────┘  └──────────────────────────────────────────────────┘