Blueprint Chat Inbox

Act like a frontend developer with 15 years of experience. I want the exact same UI with 95-99% similarity.

Platform: This is a RESPONSIVE design — it should work on both mobile and desktop. Use mobile layout patterns (bottom nav, stacked content) for mobile, and desktop layout patterns (sidebar/nav bar, wider content areas) for web.

Design a message inbox with a search bar, a horizontal row of story-style avatars, and a list of conversation rows each with avatar, name, message preview, time and an unread count badge.

Visual style — Blueprint:
A deep blue canvas with a fine white grid-line texture throughout, thin white 1px construction-line borders on cards, and corner crop-mark ticks on card edges. Technical monospace for labels and measurements. Precise, drafting-table, technical-drawing feel.

Color palette — Cyan Blueprint:
Background #062B3A, grid lines rgba(180,240,255,0.15). Text #E4FBFF. Accent cyan #5FD8F0.

Typography — use these exact font families:
- Headings / display: "SF Mono", "Cascadia Code", "Courier New", monospace
- Monospace / data: "SF Mono", "Cascadia Code", "Courier New", monospace

Commit fully to this style — it should be unmistakable at a glance. Use realistic content, not placeholder text. Keep animations smooth (200ms ease-out).