# Responsiveness Strategy

## Breakpoints
| Breakpoint | Min Width | Max Width | Target Devices |
|------------|-----------|-----------|----------------|
| Mobile | 320px | 767px | iPhone, Android phones, small tablets |
| Tablet | 768px | 1023px | iPad, Surface, large phones landscape |
| Desktop | 1024px | 1439px | Laptops, smaller monitors |
| Wide | 1440px | - | Large monitors, ultrawide displays |

## Adaptation Patterns

### Layout Changes:
- **Mobile:** Single column, collapsible navigation, full-width components
- **Tablet:** Two-column layout, persistent sidebar, optimized for touch
- **Desktop:** Multi-column layout, hover states, dense information display
- **Wide:** Three-column layout, expanded panels, maximum information density

### AI-Specific Responsive Patterns:
- **Mobile:** AI prompt becomes full-screen modal when focused, voice input option
- **Tablet:** Half-screen overlay with context selection chips  
- **Desktop:** Inline expansion with preview panel
- **Wide:** Permanent expanded state with live suggestions

### Critical Mobile Optimizations:
- Voice input option for AI prompts (speech-to-text)
- One-handed operation for task status changes
- Swipe gestures for status changes (swipe right = done)
- Offline queue for AI requests when connectivity limited