docs: add comprehensive pinned agents drawer documentation

- Add detailed Pinned Agents Drawer section to .cursorrules with mobile, desktop, card features, and animation details
- Add Pinned Agents Drawer section to CLAUDE.md with mobile/desktop design and card functionality

.cursorrules

@@ -410,6 +410,34 @@ localStorage.getItem('selected-agent')
 - Duration: 0.6s with `easeInOut` easing
 - Provides clear visual feedback before selecting Morgan and populating input
 
+### Pinned Agents Drawer
+**Mobile (Bottom Sheet):**
+- Appears as full-width bottom sheet on mobile
+- Drag handle indicator at top
+- Rounded top corners with semi-transparent dark background
+- Smooth slide-up animation from bottom
+
+**Desktop (Side Drawer):**
+- Slides out from under the main glass manuscript card to the right
+- Positioned relative to manuscript panel, partially behind it
+- Shorter height (slightly less than manuscript panel)
+- Centered vertically on screen
+- 40% less opacity than desktop UI baseline for subtle appearance
+- Smooth slide animation with easeInOut timing
+
+**Card Features:**
+- Minimalist design showing only name, handle, and start chat button
+- Hover effects: description and button become visible on hover
+- Smooth height expansion animation on hover (grid-based)
+- Drag-and-drop reordering with visual feedback
+- Dragged cards render above all other cards (z-index management)
+- Delete button visible only on hover
+
+**Animation Details:**
+- Entrance: 0.2s opacity fade-in + scale from left
+- Exit: Slide deeper left with 0.28s opacity fade-out, easeIn timing
+- Card content transitions smoothly between collapsed/expanded states
+
 **Last Updated**: 2025-11-15
 **Version**: 1.1
 

CLAUDE.md

@@ -147,6 +147,28 @@ The route handles multiple n8n response formats:
 - Loading state: animated shimmer bar
 - Scrollbars: gray color (neutral), hidden by default, shown on hover
 
+### Pinned Agents Drawer
+**Mobile Design:**
+- Full-width bottom sheet sliding up from bottom
+- Drag handle indicator visible at top
+- Semi-transparent dark background
+- Responsive layout for touch interaction
+
+**Desktop Design:**
+- Side drawer that slides out from behind the main manuscript card to the right
+- Positioned relative to the manuscript panel (not viewport-locked)
+- Partially hidden behind main card, with left edge not visible
+- Shorter height, centered vertically on screen
+- Reduced opacity (40% less) for subtle appearance
+
+**Card Functionality:**
+- Minimalist cards showing: agent name, handle, and start chat button
+- Hover reveals: full description and action button
+- Smooth height animation on hover using CSS Grid transitions
+- Drag-and-drop reordering with visual feedback
+- Dragged cards render above others (z-index layering)
+- Delete button only visible on hover
+
 ## Feature Flag System
 
 ### Architecture