# WorkClaw "Computer" Panel — In-Depth Style Spec (measured)

> Source: getComputedStyle on live DOM, dark theme, 1440 viewport. WorkClaw agent.

## 1. Outer positioning wrapper (ASIDE)
- position: absolute; pinned to right edge of the chat column.
- width: 448px (rail); height: full (100% / 764px); padding: 88px 24px 24px (88px top clears the global header bar).
- will-change: transform, width  => panel OPENS/CLOSES by animating WIDTH (docked rail expand), not a translate slide. transition applied only during open/close (none at rest).

## 2. Visual "screen" card (inner)
- 400 x 652px; border-radius: 32px; overflow clips children to the rounded screen.
- Ambient lift shadow (floats off dark bg), white-tinted:
  0 4px 12px rgba(255,255,255,.024),
  0 24px 60px -8px rgba(255,255,255,.03),
  0 40px 80px -20px rgba(255,255,255,.02)

## 3. Wallpaper layer stack (back to front), all absolute inset-0, radius 32px
1. Base gradient (-z-20): INLINE style, AGENT-THEMED.
   - WorkClaw: linear-gradient(135deg, #0f172a 0%, #1e293b 100%)  (slate/navy)
   - Morpheus: coral/red variant (per-agent prop)  => wallpaper is a per-claw property.
2. Dark vignette (-z-10): solid #000 at opacity 0.40 (deepens lower area).
3. Frosted glass overlay: bg-white/5 (dark), backdrop-filter blur(40px), layer opacity ~0.36 — gives the soft "screen glass" sheen.

## 4. Header row
- Title: SPAN, 12px / weight 500 / line-height 16px, near-white (neutral-100).
- Status dot: 8x8px circle, fully rounded, rgb(244,63,94) (rose-500), sits left of the title (macOS "running" indicator).

## 5. App grid (home)
- 56x56 tile button; inner icon container 56x56, border-radius 16px (iOS squircle).
- Icons are brand glyphs (Slack multicolor on white squircle; Claw Chat = coral speech bubble on black).
- Label: 11px, muted, below icon.
- "Add Apps": dashed-border placeholder squircle + "+" glyph, label color white/65%.
- Tile press interaction: active:scale-[0.92], transition transform 0.1s cubic-bezier(0.16,1,0.3,1) (snappy easeOutExpo "icon press").

## 6. Bottom dock (Skills / Files / Routines / Settings)
- Floating frosted capsule: rounded-3xl (24px), gap 20px, padding 16px 24px 12px.
- bg-white/[0.07] (dark); backdrop-filter: blur(40px) saturate(1.5).
- ring-1 inset white/[0.04]; shadow: inset 0 1px 0 rgba(255,255,255,.06) (top highlight) + 0 10px 30px -6px rgba(0,0,0,.35) (drop).
- Dock tiles: ~48px, black bg, 16px radius, inset white hairline ring.

## 7. Notes for reimplementation
- Per-agent wallpaper = pass a gradient (or image) as a prop; everything else (glass, vignette, dock, grid) is shared chrome.
- The "computer" metaphor = a rounded 32px screen card with layered glass + agent wallpaper, app squircles, and a frosted dock — desktop docks it as a 448px right rail; <=767px it goes full-screen overlay.