# Responsive Behavior — Measured at 1440 / 834 / 406(~390)

> Measured live via getComputedStyle + window.innerWidth on the WorkClaw agent-chat shell.
> Breakpoints in stylesheet: max-width 767px and max-width 600px (verified earlier).

## Viewport: 1440 (desktop)
- App shell: persistent LEFT agent rail (avatars + names: WorkClaw, Morpheus, Sage Claw, Tank Claw, + add) and bottom nav (Skills, Apps, Team, Credits, user).
- Header toolbar fully expanded: Slack icon, sessions/list icon, compose icon (center) + device-preview icons & close (right).
- Welcome heading on a single line. Suggestion chips render in ONE horizontal row of 4.
- Computer panel: docked as a RIGHT rail (does not cover chat). Panel home = app grid (Browser, Slack, Claw Chat, Add Apps) + bottom dock (Skills, Files, Routines, Settings).

## Viewport: 834 (tablet)
- Computer panel becomes a FULL-SCREEN / full-width overlay (no longer a right rail); chat is hidden behind it.
- Panel home apps span full width; bottom dock centered as a floating capsule.
- Header reduces to a single close (X) control while panel is open.

## Viewport: 406 (~390 mobile)
- LEFT agent rail COLLAPSES to a single panel-toggle icon (top-left).
- Header toolbar collapses to a "..." overflow menu + a prominent CORAL Computer-panel launcher button (top-right).
- Welcome heading WRAPS to two lines; avatar centered; input full-width.
- Suggestion chips STACK vertically (single column).
- Computer panel = full-screen overlay (same as tablet).

## Transition summary
- >= ~768px: dock-rail layout (left rail + right computer rail).
- <= 767px: computer panel switches to full-screen overlay.
- <= 600px: chat shell mobile mode (rail->hamburger, toolbar->overflow, chips stack).