diff --git a/.env.example b/.env.example
index 0c53e43..be1511b 100644
--- a/.env.example
+++ b/.env.example
@@ -8,3 +8,7 @@ VITE_FIREBASE_PROJECT_ID=your-project-id
 VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
 VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
 VITE_FIREBASE_APP_ID=your_app_id
+
+# Claude AI Assistant
+# Get your API key from: https://console.anthropic.com/
+VITE_CLAUDE_API_KEY=example_key
diff --git a/MOBILE_SUPPORT.md b/MOBILE_SUPPORT.md
new file mode 100644
index 0000000..bff5851
--- /dev/null
+++ b/MOBILE_SUPPORT.md
@@ -0,0 +1,371 @@
+# Mobile Support Improvement Plan
+
+## Current Issues
+
+Based on testing, the current mobile implementation has several usability problems:
+
+1. **Circular chart is not properly centered** - Main feature of the app is hard to use
+2. **Horizontal scrolling occurs** - Creates poor UX, elements overflow viewport
+3. **Sidebar approach is clunky** - Takes up too much space when open, not intuitive
+4. **Elements not optimally sized** - Some elements too small, others too large
+5. **Footer visibility** - Footer might be interfering with content
+
+---
+
+## Mobile-First Design Goals
+
+### Priority 1: Circular Chart (The Core Feature)
+- **Must be perfectly centered** on the screen
+- **Must never cause horizontal scrolling**
+- **Must scale to fit viewport width** with proper padding
+- **Must be the dominant visual element** on mobile
+- All interactions must work smoothly with touch
+
+### Priority 2: Navigation
+- **Remove sidebar completely on mobile** - not suitable for small screens
+- Replace with **bottom navigation bar** (industry standard for mobile apps)
+  - 3-4 icons at bottom: Schedule Editor, My Schedules, Settings
+  - Always visible, doesn't take up much space
+  - Easy thumb access on phones
+
+### Priority 3: Layout & Viewport
+- **No horizontal scrolling anywhere**
+- **Vertical scrolling only** for timeline/content areas
+- **Sticky header** with minimal height
+- **Remove or minimize footer** on mobile (or make it absolutely positioned at bottom)
+
+### Priority 4: Controls & Actions
+- **Compact header controls** - smaller, icon-only where possible
+- **Floating Action Button (FAB)** for primary actions like "Save"
+- **View toggle** (Linear/Circular) should be compact icons, not text buttons
+
+---
+
+## Detailed Implementation Plan
+
+### 1. Circular Chart Component (src/components/CircularChart.tsx)
+
+**Changes:**
+```
+- Calculate chart size based on viewport width
+- Add horizontal padding: 16px on mobile, 24px on tablet
+- Center chart using flex container
+- Prevent overflow with: overflow-x: hidden on parent
+- Max width: min(100vw - 32px, 500px) for chart container
+- Position absolutely within centered container
+```
+
+**Layout:**
+```html
+<div className="flex-1 overflow-y-auto overflow-x-hidden">
+  <div className="flex items-center justify-center min-h-full p-4">
+    <div className="w-full max-w-[500px]">
+      <!-- Circular Chart Here -->
+    </div>
+  </div>
+</div>
+```
+
+### 2. Timeline Component (src/components/Timeline.tsx)
+
+**Changes:**
+```
+- Full width on mobile (no side padding that causes overflow)
+- Vertical scrolling only
+- Time labels positioned carefully to not overflow
+- Hour markers on left with negative margin: careful sizing
+```
+
+**Layout:**
+```html
+<div className="flex-1 overflow-y-auto overflow-x-hidden px-4">
+  <div className="max-w-3xl mx-auto">
+    <!-- Timeline content -->
+  </div>
+</div>
+```
+
+### 3. Navigation - Bottom Nav Bar (New Approach)
+
+**Create: src/components/BottomNav.tsx**
+
+```typescript
+// Bottom navigation bar for mobile only
+// Shown only on screens < 1024px (lg breakpoint)
+// 3 main tabs: Schedule Editor, My Schedules, Settings
+// Icons with labels below
+// Active state highlighting
+// Fixed to bottom of screen
+```
+
+**Design:**
+```
+- Fixed position at bottom
+- White background with top border shadow
+- Height: 64px
+- 3 equal-width buttons
+- Icon (24px) + Label (10px text)
+- Active: blue color, inactive: gray
+- Safe area padding for iOS notch
+```
+
+**Example:**
+```html
+<nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 lg:hidden z-50 safe-area-pb">
+  <div className="flex items-center justify-around h-16">
+    <button>Schedule Editor</button>
+    <button>Schedules</button>
+    <button>Settings</button>
+  </div>
+</nav>
+```
+
+### 4. Dashboard Layout Restructure (src/components/Dashboard.tsx)
+
+**Mobile Layout (< 1024px):**
+```
+┌─────────────────────┐
+│   Compact Header    │ ← Minimal height, essential controls only
+├─────────────────────┤
+│                     │
+│   Main Content      │ ← Chart/Timeline fills space
+│   (Scrollable)      │
+│                     │
+├─────────────────────┤
+│  Bottom Nav Bar     │ ← Fixed at bottom (mobile only)
+└─────────────────────┘
+```
+
+**Desktop Layout (≥ 1024px):**
+```
+┌───────┬─────────────────────┐
+│       │      Header         │
+│ Side  ├─────────────────────┤
+│ bar   │                     │
+│       │   Main Content      │
+│       │                     │
+└───────┴─────────────────────┘
+```
+
+**Changes:**
+```
+- Remove sidebar on mobile entirely (not even hamburger menu)
+- Remove mobile sidebar backdrop/overlay
+- Remove hamburger button
+- Add bottom navigation component
+- Header: much more compact on mobile
+- Footer: hidden on mobile OR absolutely positioned
+- Main content: flex-1 with proper overflow handling
+```
+
+### 5. Header Improvements (Mobile)
+
+**Current Issues:**
+- Too tall on mobile
+- Controls take up too much space
+- Schedule dropdown is clunky
+
+**Mobile Header Design:**
+```
+Height: 48px (down from current ~60px)
+Layout:
+  - Left: Page title (small, 16px font)
+  - Right: Compact controls (icon buttons only)
+
+View toggle: Icon-only buttons (☰ for linear, ⭕ for circular)
+Save button: Icon-only (💾) or FAB instead
+Schedule selector: Icon/chevron only, opens bottom sheet
+```
+
+### 6. Footer Handling
+
+**Options:**
+
+**Option A: Hide on Mobile**
+```css
+.footer {
+  @apply hidden lg:block;
+}
+```
+
+**Option B: Absolute Position**
+```css
+.footer {
+  @apply absolute bottom-0 left-0 right-0 lg:relative;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+```
+
+**Option C: Above Bottom Nav**
+```css
+.footer {
+  @apply mb-16 lg:mb-0; /* 64px for bottom nav */
+}
+```
+
+**Recommendation: Option A (Hide on mobile)** - Simplest, keeps focus on content
+
+### 7. Responsive Breakpoints Strategy
+
+```css
+Mobile: < 640px (default styles)
+  - Bottom nav visible
+  - Sidebar hidden
+  - Compact header
+  - Chart: full width minus 32px padding
+  - Icon-only controls
+
+Tablet: 640px - 1023px (sm: to lg:)
+  - Bottom nav visible
+  - Sidebar hidden
+  - Slightly larger header
+  - Chart: max-width 500px, centered
+  - Some text labels shown
+
+Desktop: ≥ 1024px (lg:)
+  - Bottom nav hidden
+  - Sidebar visible (always shown)
+  - Full header with text labels
+  - Chart: flexible sizing
+  - All features visible
+```
+
+### 8. Specific Component Updates
+
+#### CircularChart.tsx
+```
+✓ Container: flex justify-center items-center
+✓ Max width constraint
+✓ Responsive sizing based on viewport
+✓ Prevent horizontal overflow
+✓ Center tooltip positioning
+```
+
+#### Timeline.tsx
+```
+✓ Full width within container
+✓ Remove side overflow
+✓ Time labels: careful positioning
+✓ Blocks: proper touch targets (min 44px height)
+```
+
+#### Dashboard.tsx
+```
+✓ Remove sidebar for mobile
+✓ Add BottomNav component
+✓ Restructure layout with proper flex
+✓ Add overflow-x-hidden to main container
+✓ Make header compact on mobile
+✓ Hide/reposition footer
+```
+
+#### Header Controls
+```
+✓ View toggle: sm:text-xs → icons only on mobile
+✓ Save button: Consider FAB instead
+✓ Schedule dropdown: Bottom sheet modal on mobile
+```
+
+---
+
+## Implementation Order
+
+### Phase 1: Layout Foundation (Critical)
+1. Add `overflow-x-hidden` to main Dashboard container
+2. Remove sidebar/hamburger on mobile (< lg)
+3. Restructure Dashboard flex layout
+4. Hide footer on mobile
+
+### Phase 2: Bottom Navigation
+1. Create BottomNav.tsx component
+2. Add to Dashboard (mobile only)
+3. Implement active state logic
+4. Test navigation flow
+
+### Phase 3: Chart Centering
+1. Wrap CircularChart in flex centering container
+2. Add max-width constraints
+3. Calculate responsive sizing
+4. Test on various mobile sizes (320px - 768px)
+
+### Phase 4: Header Optimization
+1. Reduce header height on mobile
+2. Convert text buttons to icon-only
+3. Simplify schedule selector
+4. Test touch targets (min 44x44px)
+
+### Phase 5: Timeline Optimization
+1. Ensure no horizontal overflow
+2. Improve vertical scrolling
+3. Optimize time label positioning
+4. Test block creation on mobile
+
+### Phase 6: Polish & Testing
+1. Test on real devices (iPhone, Android)
+2. Test in Chrome DevTools mobile mode
+3. Check all screen sizes: 320px, 375px, 390px, 414px, 768px
+4. Verify no horizontal scrolling anywhere
+5. Verify circular chart is perfectly centered
+6. Test all touch interactions
+
+---
+
+## Testing Checklist
+
+### Layout Tests
+- [ ] No horizontal scrolling on any page
+- [ ] Circular chart is perfectly centered
+- [ ] Bottom nav is visible on mobile only
+- [ ] Sidebar is hidden on mobile
+- [ ] Footer doesn't interfere with content
+- [ ] All pages use full viewport height
+
+### Interaction Tests
+- [ ] Tap navigation items in bottom nav
+- [ ] Drag to create time blocks (circular)
+- [ ] Drag to create time blocks (linear)
+- [ ] Toggle between linear/circular views
+- [ ] Save schedule
+- [ ] Edit time blocks
+- [ ] All buttons are tappable (44x44px minimum)
+
+### Visual Tests
+- [ ] Text is readable (min 14px on mobile)
+- [ ] Colors have sufficient contrast
+- [ ] Touch targets are appropriately sized
+- [ ] Spacing feels comfortable
+- [ ] No UI elements cut off or hidden
+- [ ] Safe area padding on iPhone notch
+
+### Device Tests
+- [ ] iPhone SE (375x667) - smallest modern iPhone
+- [ ] iPhone 12/13/14 (390x844)
+- [ ] iPhone 14 Pro Max (430x932)
+- [ ] Samsung Galaxy S21 (360x800)
+- [ ] iPad Mini (768x1024)
+- [ ] Test in both portrait and landscape
+
+---
+
+## Success Criteria
+
+After implementation, mobile experience should have:
+
+1. ✅ **Circular chart is the hero** - Perfectly centered, no scrolling to see it
+2. ✅ **Zero horizontal scrolling** - Anywhere in the app
+3. ✅ **Easy navigation** - Bottom nav is intuitive and thumb-friendly
+4. ✅ **All features accessible** - Nothing hidden or hard to reach
+5. ✅ **Smooth interactions** - Drag-to-create works flawlessly
+6. ✅ **Professional feel** - Looks and feels like a native mobile app
+
+---
+
+## Notes
+
+- **Don't use a hamburger menu** - Bottom nav is much better for mobile apps
+- **Keep mobile simple** - Remove features if they clutter the UI
+- **Touch targets matter** - Minimum 44x44px for all tappable elements
+- **Test on real devices** - Emulators are good, but real devices are better
+- **Consider gestures** - Swipe to switch between views could be cool (future)
+
+This plan prioritizes the circular chart as the centerpiece of the mobile experience and removes friction from navigation and layout.
diff --git a/MOBILE_UX_IMPROVEMENTS.md b/MOBILE_UX_IMPROVEMENTS.md
new file mode 100644
index 0000000..409679d
--- /dev/null
+++ b/MOBILE_UX_IMPROVEMENTS.md
@@ -0,0 +1,117 @@
+# Mobile UX Improvement Plan
+
+## Current Status
+- Chart is centered and not cut off ✅
+- Bottom action bar implemented ✅
+- Desktop recommendation message added ✅
+
+## Issues to Fix
+
+### 1. **Desktop Scrolling Broken** 🔴 CRITICAL
+- Desktop cannot scroll at all, stuck
+- Likely caused by `overflow-auto` being conditionally applied in CircularChart
+- **Fix**: Ensure desktop keeps `overflow-auto`, only remove on mobile
+- **Location**: `src/components/CircularChart.tsx:542`
+
+### 2. **Make Chart Bigger on Mobile** 🟡
+**Options:**
+- **Option A**: Reduce label margins further (from 28px to 24px)
+- **Option B**: Move hour labels to inner circle (more complex)
+- **Option C**: Show only key times (12 AM, 6 AM, 12 PM, 6 PM) and remove others
+- **Recommended**: Option A (quick win) + Option C (better UX)
+
+**Changes needed**:
+- Reduce `baseLabelMargin` from 28px to 24px
+- Update `renderHourLabels()` to only show [0, 6, 12, 18] hours on mobile
+- This saves ~8px around the circle = ~16px more chart diameter
+
+### 3. **Contextual Bottom Message** 🟢
+**Current**: "For best experience and to save schedules, use desktop"
+
+**New (contextual)**:
+- **Guest users**: "Sign in on desktop to save schedules"
+- **Authenticated users**: "Use desktop to manage multiple schedules"
+
+**Location**: `src/components/Dashboard.tsx:694`
+
+### 4. **Add Save Button for Authenticated Mobile Users** 🟢
+**Current**: Only showing "Delete All" for signed-in users
+
+**New**: Replace layout for authenticated users:
+```
+[ Save Schedule ] [ Delete All ]
+```
+
+**Behavior**:
+- Save button triggers `handleSaveSchedule()`
+- Works the same as desktop (prompts for name, saves to Firebase)
+- Users can save but cannot view/switch schedules on mobile
+
+**Location**: `src/components/Dashboard.tsx:669-693`
+
+### 5. **Schedule Dropdown on Mobile** 🔵 OPTIONAL
+**Decision needed**: Should we add schedule management to mobile?
+
+**If YES**:
+- Add schedule dropdown button in top section
+- Show current schedule name
+- Allow switching between schedules
+- Keep UI minimal
+
+**If NO**:
+- Just allow saving
+- Users must use desktop to switch/manage schedules
+
+**Recommendation**: Start with just Save button, add dropdown later if needed
+
+## Implementation Order
+
+### Phase 1: Critical Fixes
+1. ✅ Fix desktop scrolling issue
+2. ✅ Add Save button for authenticated users
+3. ✅ Make message contextual
+
+### Phase 2: Polish
+4. ✅ Make chart bigger (reduce margins + show fewer time labels)
+5. ⏸️ (Optional) Add schedule dropdown on mobile
+
+## Technical Details
+
+### Chart Size Calculation (iPhone XR: 414 × 896px)
+**Current**:
+- Height offset: 190px
+- Label margin: 28px each side
+- Available width: 414 - 8 - 56 = 350px
+- Chart diameter: ~350px
+
+**Proposed**:
+- Height offset: 190px (keep same)
+- Label margin: 24px each side (reduced)
+- Available width: 414 - 8 - 48 = 358px
+- Chart diameter: ~358px (+2.3% bigger)
+
+### Hour Labels
+**Current**: Shows all [0, 3, 6, 9, 12, 15, 18, 21]
+**Proposed Mobile**: Show only [0, 6, 12, 18] (cardinal directions)
+
+This provides cleaner look and more space for the actual chart.
+
+## Files to Modify
+
+1. `src/components/CircularChart.tsx`
+   - Fix desktop scrolling (line 542)
+   - Reduce mobile label margins (line 56)
+   - Update renderHourLabels() to show fewer labels on mobile (line 247)
+
+2. `src/components/Dashboard.tsx`
+   - Add Save button for authenticated users (line 669-693)
+   - Make message contextual based on auth status (line 694)
+
+## Success Criteria
+
+- [ ] Desktop scrolling works normally
+- [ ] Chart is ~8-10px bigger on mobile
+- [ ] Authenticated users can save schedules on mobile
+- [ ] Bottom message changes based on auth status
+- [ ] All changes only affect mobile (<1024px)
+- [ ] Desktop experience unchanged
diff --git a/SECURITY_TODOS.md b/SECURITY_TODOS.md
new file mode 100644
index 0000000..eb13949
--- /dev/null
+++ b/SECURITY_TODOS.md
@@ -0,0 +1,290 @@
+# Security & Performance TODOs
+
+## HIGH Priority - Do Before Public Launch
+
+### 1. Firestore Security Rules 🚨
+**Status:** Not implemented
+**Risk:** HIGH - Any authenticated user can access other users' schedules
+
+**Implementation:**
+```javascript
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /schedules/{scheduleId} {
+      // Only schedule owner can read/write their own schedules
+      allow read, write: if request.auth != null
+        && request.auth.uid == resource.data.userId;
+
+      // Only owner can create schedules
+      allow create: if request.auth != null
+        && request.auth.uid == request.resource.data.userId;
+
+      // Prevent creating more than 10 schedules per user
+      allow create: if request.auth != null
+        && request.auth.uid == request.resource.data.userId
+        && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.scheduleCount < 10;
+    }
+  }
+}
+```
+
+**Steps:**
+1. Go to Firebase Console → Firestore Database → Rules
+2. Replace rules with the above
+3. Test with different users
+4. Publish
+
+---
+
+### 2. Email Verification
+**Status:** Not implemented
+**Risk:** MEDIUM - Fake accounts, spam
+
+**Implementation:**
+```typescript
+// In src/auth.ts
+import { sendEmailVerification } from 'firebase/auth';
+
+export const signUp = async (email: string, password: string) => {
+  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+  await sendEmailVerification(userCredential.user);
+  return userCredential;
+};
+```
+
+**Steps:**
+1. Add email verification after signup
+2. Update UI to show "Check your email" message
+3. Block access until email verified (optional but recommended)
+
+---
+
+### 3. Firebase App Check
+**Status:** Not implemented
+**Risk:** MEDIUM - API abuse, bot attacks
+
+**Steps:**
+1. Go to Firebase Console → App Check
+2. Register your app
+3. Add reCAPTCHA v3 for web
+4. Add enforcement to Firestore
+
+**Documentation:** https://firebase.google.com/docs/app-check
+
+---
+
+### 4. Rate Limiting Per User
+**Status:** Not implemented
+**Risk:** MEDIUM - Users creating 1000s of schedules
+
+**Limit schedules to 10 per person:**
+- Prevents database bloat
+- 10 is generous for normal use
+- Users can delete old schedules to make room
+
+**Implementation:**
+```typescript
+// In src/services/scheduleService.ts
+export const saveSchedule = async (userId: string, scheduleData: ScheduleData) => {
+  // Check existing schedule count
+  const schedulesRef = collection(db, 'schedules');
+  const q = query(schedulesRef, where('userId', '==', userId));
+  const snapshot = await getDocs(q);
+
+  if (snapshot.size >= 10) {
+    throw new Error('Maximum 10 schedules per user. Delete old schedules to create new ones.');
+  }
+
+  // Continue with save...
+};
+```
+
+---
+
+## MEDIUM Priority - Do Soon
+
+### 5. Input Sanitization
+**Status:** Not implemented
+**Risk:** LOW - XSS potential (React escapes by default)
+
+**Implementation:**
+```typescript
+// Add to src/utils/validation.ts
+export const sanitizeInput = (input: string, maxLength = 100): string => {
+  return input
+    .replace(/<script>/gi, '')
+    .replace(/<\/script>/gi, '')
+    .replace(/javascript:/gi, '')
+    .trim()
+    .slice(0, maxLength);
+};
+```
+
+Apply to:
+- Schedule names
+- Time block labels
+- User inputs
+
+---
+
+### 6. CAPTCHA on Sign-Up
+**Status:** Not implemented
+**Risk:** MEDIUM - Bot registrations
+
+**Options:**
+- reCAPTCHA v3 (invisible)
+- hCaptcha
+- Cloudflare Turnstile (privacy-focused)
+
+---
+
+### 7. Content Security Policy (CSP)
+**Status:** Not implemented
+**Risk:** LOW
+
+**If using Vercel, add to `vercel.json`:**
+```json
+{
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "Content-Security-Policy",
+          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://apis.google.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://*.firebaseio.com https://*.googleapis.com"
+        }
+      ]
+    }
+  ]
+}
+```
+
+---
+
+## LOW Priority - Nice to Have
+
+### 8. Session Timeout
+**Implementation:**
+```typescript
+// Auto-logout after 7 days of inactivity
+const SESSION_TIMEOUT = 7 * 24 * 60 * 60 * 1000; // 7 days
+
+// Check last activity and logout if expired
+```
+
+---
+
+### 9. Account Security Features
+- [ ] Password strength indicator on signup
+- [ ] 2FA option (Google Authenticator)
+- [ ] Account recovery options
+- [ ] Login history/active sessions
+- [ ] Suspicious activity alerts
+
+---
+
+### 10. Monitoring & Alerts
+**Setup in Firebase Console:**
+- [ ] Enable Cloud Monitoring
+- [ ] Set alerts for:
+  - Unusual authentication patterns
+  - High read/write rates
+  - Error spikes
+  - Budget thresholds
+
+---
+
+### 11. Automated Security Scanning
+**Run regularly:**
+```bash
+# Check for vulnerable dependencies
+npm audit
+
+# Fix auto-fixable issues
+npm audit fix
+
+# For more thorough scanning (install Snyk)
+npx snyk test
+```
+
+---
+
+### 12. Backup Strategy
+**Status:** Not implemented
+
+**Setup:**
+1. Enable Firestore automatic backups (paid feature)
+2. OR: Create scheduled Cloud Function to export data
+3. Store backups in Cloud Storage
+
+---
+
+## Compliance & Legal
+
+### 13. Privacy Policy & Terms of Service
+- [ ] Add Privacy Policy page
+- [ ] Add Terms of Service page
+- [ ] Cookie consent (if needed in your region)
+- [ ] GDPR compliance (if EU users)
+- [ ] CCPA compliance (if CA users)
+
+---
+
+### 14. Data Export/Deletion
+**Status:** Partially implemented (export only)
+
+- [x] Users can export schedules (JSON/CSV)
+- [x] Users can delete account
+- [ ] Verify all user data is deleted on account deletion
+- [ ] Add "Download all my data" option (GDPR requirement)
+
+---
+
+## Testing Checklist
+
+Before launch, test:
+- [ ] Unauthorized access attempts (try accessing other users' schedules)
+- [ ] XSS attempts (inject `<script>` in inputs)
+- [ ] Rate limiting (create many schedules rapidly)
+- [ ] SQL injection (not applicable, but test Firestore queries)
+- [ ] Authentication bypass attempts
+- [ ] CSRF protection (Firebase handles this)
+- [ ] Password reset flow security
+- [ ] Account deletion completeness
+
+---
+
+## Incident Response Plan
+
+If there's a security breach:
+1. **Immediate:** Disable affected features/accounts
+2. **Assess:** Determine scope and impact
+3. **Notify:** Inform affected users within 72 hours
+4. **Fix:** Patch vulnerability
+5. **Review:** Post-mortem and prevention strategy
+
+---
+
+## Performance & Cost Optimization
+
+### 15. Database Indexing
+- [ ] Add Firestore indexes for common queries
+- [ ] Monitor slow queries in Firebase Console
+
+### 16. Caching Strategy
+- [ ] Cache user schedules in localStorage
+- [ ] Reduce Firestore reads
+
+### 17. Cost Monitoring
+- [ ] Set up billing alerts
+- [ ] Monitor Firestore read/write counts
+- [ ] Optimize queries to reduce costs
+
+---
+
+## Resources
+
+- [Firebase Security Checklist](https://firebase.google.com/support/guides/security-checklist)
+- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
+- [Web Security Academy](https://portswigger.net/web-security)
diff --git a/src/auth.ts b/src/auth.ts
index 11dafcd..8db60f2 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -1,8 +1,11 @@
-import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, signInWithPopup, GoogleAuthProvider, sendPasswordResetEmail  } from "firebase/auth"
+import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, signInWithPopup, GoogleAuthProvider, sendPasswordResetEmail, sendEmailVerification  } from "firebase/auth"
 import { auth } from "./firebase";
 
-export const signUp = (email: string, password:string) => {
-    return createUserWithEmailAndPassword(auth, email, password);
+export const signUp = async (email: string, password: string) => {
+    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+    // Send email verification immediately after signup
+    await sendEmailVerification(userCredential.user);
+    return userCredential;
 };
 
 export const signIn = (email: string, password:string) => {
@@ -20,4 +23,12 @@ export const googleSignIn = () => {
 
 export const resetPassword = (email: string) => {
     return sendPasswordResetEmail(auth, email);
+}
+
+export const resendVerificationEmail = async () => {
+    const user = auth.currentUser;
+    if (user && !user.emailVerified) {
+        return sendEmailVerification(user);
+    }
+    throw new Error('No user signed in or email already verified');
 }
\ No newline at end of file
diff --git a/src/components/AIAssistant.tsx b/src/components/AIAssistant.tsx
new file mode 100644
index 0000000..8692464
--- /dev/null
+++ b/src/components/AIAssistant.tsx
@@ -0,0 +1,375 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import type { TimeBlock } from '../types/schedule';
+import { sendMessage } from '../services/aiService';
+import type { ChatMessage } from '../services/aiService';
+import { formatTo12Hour } from '../utils/timeUtils';
+
+/** Simple markdown-to-JSX renderer for AI responses */
+function renderMarkdown(text: string): React.ReactNode[] {
+  const lines = text.split('\n');
+  const elements: React.ReactNode[] = [];
+  let listItems: React.ReactNode[] = [];
+  let listKey = 0;
+
+  const flushList = () => {
+    if (listItems.length > 0) {
+      elements.push(
+        <ul key={`list-${listKey++}`} className="list-disc list-inside space-y-1 my-1">
+          {listItems}
+        </ul>
+      );
+      listItems = [];
+    }
+  };
+
+  const formatInline = (str: string): React.ReactNode[] => {
+    const parts: React.ReactNode[] = [];
+    // Match **bold**, `code`, and plain text
+    const regex = /(\*\*(.+?)\*\*|`(.+?)`)/g;
+    let lastIndex = 0;
+    let match;
+    let key = 0;
+
+    while ((match = regex.exec(str)) !== null) {
+      if (match.index > lastIndex) {
+        parts.push(str.slice(lastIndex, match.index));
+      }
+      if (match[2]) {
+        parts.push(<strong key={key++} className="font-semibold">{match[2]}</strong>);
+      } else if (match[3]) {
+        parts.push(
+          <code key={key++} className="bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-xs">
+            {match[3]}
+          </code>
+        );
+      }
+      lastIndex = match.index + match[0].length;
+    }
+    if (lastIndex < str.length) {
+      parts.push(str.slice(lastIndex));
+    }
+    return parts;
+  };
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // Headers
+    const headerMatch = line.match(/^(#{1,3})\s+(.+)$/);
+    if (headerMatch) {
+      flushList();
+      const level = headerMatch[1].length;
+      const cls = level === 1
+        ? 'text-base font-bold mt-3 mb-1'
+        : level === 2
+        ? 'text-sm font-bold mt-2 mb-1'
+        : 'text-sm font-semibold mt-2 mb-0.5';
+      elements.push(<div key={`h-${i}`} className={cls}>{formatInline(headerMatch[2])}</div>);
+      continue;
+    }
+
+    // List items (- or *)
+    const listMatch = line.match(/^[\-\*]\s+(.+)$/);
+    if (listMatch) {
+      listItems.push(<li key={`li-${i}`}>{formatInline(listMatch[1])}</li>);
+      continue;
+    }
+
+    // Numbered list items
+    const numListMatch = line.match(/^\d+\.\s+(.+)$/);
+    if (numListMatch) {
+      flushList();
+      elements.push(
+        <div key={`nl-${i}`} className="ml-2 my-0.5">{formatInline(line)}</div>
+      );
+      continue;
+    }
+
+    // Empty line
+    if (line.trim() === '') {
+      flushList();
+      elements.push(<div key={`br-${i}`} className="h-2" />);
+      continue;
+    }
+
+    // Plain paragraph
+    flushList();
+    elements.push(<div key={`p-${i}`} className="my-0.5">{formatInline(line)}</div>);
+  }
+
+  flushList();
+  return elements;
+}
+
+export interface DisplayMessage {
+  role: 'user' | 'assistant';
+  content: string;
+  timeBlocks?: TimeBlock[];
+  timestamp: Date;
+}
+
+interface AIAssistantProps {
+  timeBlocks: TimeBlock[];
+  onApplySchedule: (timeBlocks: TimeBlock[]) => void;
+  messages: DisplayMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<DisplayMessage[]>>;
+}
+
+export default function AIAssistant({ timeBlocks, onApplySchedule, messages, setMessages }: AIAssistantProps) {
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  const handleSend = async () => {
+    const trimmed = input.trim();
+    if (!trimmed || isLoading) return;
+
+    setError(null);
+    const userMessage: DisplayMessage = {
+      role: 'user',
+      content: trimmed,
+      timestamp: new Date(),
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    setInput('');
+    setIsLoading(true);
+
+    // Build chat history for API (exclude the initial greeting)
+    const chatHistory: ChatMessage[] = messages
+      .filter((_, i) => i > 0) // skip greeting
+      .map((m) => ({ role: m.role, content: m.content }));
+    chatHistory.push({ role: 'user', content: trimmed });
+
+    try {
+      const response = await sendMessage(chatHistory, timeBlocks);
+
+      const assistantMessage: DisplayMessage = {
+        role: 'assistant',
+        content: response.message,
+        timeBlocks: response.timeBlocks,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Something went wrong';
+      setError(errorMsg);
+      const errorMessage: DisplayMessage = {
+        role: 'assistant',
+        content: `Sorry, I encountered an error: ${errorMsg}`,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleApplySchedule = (blocks: TimeBlock[]) => {
+    if (confirm('This will replace your current schedule with the AI-generated one. Continue?')) {
+      onApplySchedule(blocks);
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          content: 'Schedule applied! Switch to the Schedule Editor to see your new time blocks.',
+          timestamp: new Date(),
+        },
+      ]);
+    }
+  };
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-hidden bg-gray-50">
+      {/* Header */}
+      <div className="bg-white border-b border-gray-200 px-4 sm:px-6 py-3 sm:py-4 flex-shrink-0">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-sm">
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+            </svg>
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900">AI Assistant</h2>
+            <p className="text-xs text-gray-500">Powered by Claude</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 space-y-4">
+        {messages.map((msg, i) => (
+          <div
+            key={i}
+            className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
+          >
+            <div
+              className={`max-w-[85%] sm:max-w-[75%] rounded-2xl px-4 py-3 ${
+                msg.role === 'user'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white border border-gray-200 text-gray-800 shadow-sm'
+              }`}
+            >
+              <div className="text-sm leading-relaxed">
+                {msg.role === 'assistant' ? renderMarkdown(msg.content) : msg.content}
+              </div>
+
+              {/* Schedule Preview */}
+              {msg.timeBlocks && msg.timeBlocks.length > 0 && (
+                <div className="mt-3 pt-3 border-t border-gray-200">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                      Suggested Schedule
+                    </span>
+                    <span className="text-xs text-gray-400">
+                      {msg.timeBlocks.length} block{msg.timeBlocks.length !== 1 ? 's' : ''}
+                    </span>
+                  </div>
+                  <div className="space-y-1.5 max-h-64 overflow-y-auto">
+                    {msg.timeBlocks.map((block, j) => (
+                      <div
+                        key={j}
+                        className="flex items-center gap-2 text-xs bg-gray-50 rounded-lg px-3 py-2"
+                      >
+                        <div
+                          className="w-3 h-3 rounded-full flex-shrink-0"
+                          style={{ backgroundColor: block.color }}
+                        />
+                        <span className="font-medium text-gray-700 flex-1 truncate">
+                          {block.label}
+                        </span>
+                        <span className="text-gray-500 flex-shrink-0">
+                          {formatTo12Hour(block.startTime)} - {formatTo12Hour(block.endTime)}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                  <button
+                    onClick={() => handleApplySchedule(msg.timeBlocks!)}
+                    className="mt-3 w-full px-4 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white text-sm font-medium rounded-lg hover:from-purple-700 hover:to-indigo-700 transition-all shadow-sm hover:shadow-md flex items-center justify-center gap-2"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    Apply This Schedule
+                  </button>
+                </div>
+              )}
+
+              <div
+                className={`text-[10px] mt-1.5 ${
+                  msg.role === 'user' ? 'text-blue-200' : 'text-gray-400'
+                }`}
+              >
+                {msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {/* Loading indicator */}
+        {isLoading && (
+          <div className="flex justify-start">
+            <div className="bg-white border border-gray-200 rounded-2xl px-4 py-3 shadow-sm">
+              <div className="flex items-center gap-2">
+                <div className="flex gap-1">
+                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                </div>
+                <span className="text-xs text-gray-500">Thinking...</span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Error Banner */}
+      {error && (
+        <div className="mx-4 sm:mx-6 mb-2 px-3 py-2 bg-red-50 border border-red-200 rounded-lg flex items-center gap-2">
+          <svg className="w-4 h-4 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <span className="text-xs text-red-700 flex-1">{error}</span>
+          <button onClick={() => setError(null)} className="text-red-400 hover:text-red-600">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      )}
+
+      {/* Quick Suggestions */}
+      {messages.length <= 1 && (
+        <div className="px-4 sm:px-6 pb-2 flex-shrink-0">
+          <div className="flex flex-wrap gap-2">
+            {[
+              'Create a productive morning routine',
+              'Plan a balanced work day',
+              'Help me optimize my current schedule',
+              'Suggest a study schedule',
+            ].map((suggestion) => (
+              <button
+                key={suggestion}
+                onClick={() => {
+                  setInput(suggestion);
+                  inputRef.current?.focus();
+                }}
+                className="px-3 py-1.5 text-xs bg-white border border-gray-200 text-gray-600 rounded-full hover:bg-gray-50 hover:border-gray-300 transition-colors"
+              >
+                {suggestion}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Input Area */}
+      <div className="bg-white border-t border-gray-200 px-4 sm:px-6 py-3 flex-shrink-0">
+        <div className="flex items-end gap-2">
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask about your schedule or request a new one..."
+            rows={1}
+            className="flex-1 resize-none rounded-xl border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent placeholder-gray-400 max-h-32"
+            style={{ minHeight: '42px' }}
+            disabled={isLoading}
+          />
+          <button
+            onClick={handleSend}
+            disabled={!input.trim() || isLoading}
+            className="p-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl hover:from-purple-700 hover:to-indigo-700 transition-all disabled:opacity-40 disabled:cursor-not-allowed shadow-sm hover:shadow-md flex-shrink-0"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+            </svg>
+          </button>
+        </div>
+        <p className="text-[10px] text-gray-400 mt-1.5 text-center">
+          Press Enter to send, Shift+Enter for new line
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/AuthButtons.tsx b/src/components/AuthButtons.tsx
index 7254ae6..cd68050 100644
--- a/src/components/AuthButtons.tsx
+++ b/src/components/AuthButtons.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { auth } from '../firebase';
 import { onAuthStateChanged } from 'firebase/auth';
-import { signIn, signUp, signOutUser, googleSignIn, resetPassword } from '../auth';
+import { signIn, signUp, signOutUser, googleSignIn, resetPassword, resendVerificationEmail } from '../auth';
 import Modal from 'react-modal';
 
 Modal.setAppElement('#root');
@@ -42,10 +42,10 @@ export default function AuthButtons() {
       setError('Please fill in all fields');
       return;
     }
-    
+
     setIsLoading(true);
     setError('');
-    
+
     try {
       await signIn(email, password);
       closeModal();
@@ -61,17 +61,19 @@ export default function AuthButtons() {
       setError('Please fill in all fields');
       return;
     }
-    
+
     if (password.length < 6) {
       setError('Password must be at least 6 characters');
       return;
     }
-    
+
     setIsLoading(true);
     setError('');
-    
+
     try {
       await signUp(email, password);
+      // User stays signed in and can use the app
+      // Verification email is sent (in auth.ts) but not required
       closeModal();
     } catch (error: unknown) {
       setError(getErrorMessage(error));
@@ -178,17 +180,73 @@ export default function AuthButtons() {
     </svg>
   );
 
+  const [isResendingVerification, setIsResendingVerification] = useState(false);
+  const [verificationMessage, setVerificationMessage] = useState('');
+
+  const handleResendVerification = async () => {
+    setIsResendingVerification(true);
+    setVerificationMessage('');
+
+    try {
+      await resendVerificationEmail();
+      setVerificationMessage('Verification email sent! Check your inbox.');
+      setTimeout(() => setVerificationMessage(''), 5000);
+    } catch (error: unknown) {
+      setVerificationMessage('Failed to send verification email. Please try again.');
+      setTimeout(() => setVerificationMessage(''), 5000);
+    } finally {
+      setIsResendingVerification(false);
+    }
+  };
+
+  const handleReloadUser = () => {
+    user?.reload().then(() => {
+      // Force a re-render by setting user again
+      setUser(auth.currentUser);
+    });
+  };
+
   if (user) {
     return (
-      <div className="fixed top-4 right-4 flex items-center gap-4 bg-white/95 backdrop-blur-md px-4 py-3 rounded-xl shadow-lg border border-white/80">
-        <span className="text-sm text-gray-700 font-medium">{user.email}</span>
-        <button
-          className="bg-red-500 text-white border-none px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all hover:bg-red-600 hover:-translate-y-0.5"
-          onClick={signOutUser}
-        >
-          Sign Out
-        </button>
-      </div>
+      <>
+        {!user.emailVerified && (
+          <div className="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-3 text-center text-sm font-medium shadow-lg">
+            <div className="max-w-4xl mx-auto flex items-center justify-center gap-4 flex-wrap">
+              <span>⚠️ Please verify your email address to access all features.</span>
+              <button
+                onClick={handleResendVerification}
+                disabled={isResendingVerification}
+                className="bg-white text-amber-600 px-3 py-1 rounded-md text-xs font-semibold hover:bg-amber-50 transition-colors disabled:opacity-50"
+              >
+                {isResendingVerification ? 'Sending...' : 'Resend Email'}
+              </button>
+              <button
+                onClick={handleReloadUser}
+                className="bg-white text-amber-600 px-3 py-1 rounded-md text-xs font-semibold hover:bg-amber-50 transition-colors"
+              >
+                Already Verified?
+              </button>
+              {verificationMessage && (
+                <span className="text-xs bg-white/20 px-3 py-1 rounded-md">{verificationMessage}</span>
+              )}
+            </div>
+          </div>
+        )}
+        <div className={`fixed ${!user.emailVerified ? 'top-16' : 'top-4'} right-4 flex items-center gap-4 bg-white/95 backdrop-blur-md px-4 py-3 rounded-xl shadow-lg border border-white/80 transition-all`}>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-700 font-medium">{user.email}</span>
+            {user.emailVerified && (
+              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full" title="Email verified">✓</span>
+            )}
+          </div>
+          <button
+            className="bg-red-500 text-white border-none px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all hover:bg-red-600 hover:-translate-y-0.5"
+            onClick={signOutUser}
+          >
+            Sign Out
+          </button>
+        </div>
+      </>
     );
   }
 
diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx
index 7507043..466d293 100644
--- a/src/components/BottomNav.tsx
+++ b/src/components/BottomNav.tsx
@@ -25,6 +25,15 @@ export default function BottomNav({ currentRoute, onNavigate }: BottomNavProps)
         </svg>
       ),
     },
+    {
+      route: 'ai-assistant' as NavRoute,
+      label: 'AI',
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+        </svg>
+      ),
+    },
     {
       route: 'settings' as NavRoute,
       label: 'Settings',
diff --git a/src/components/CircularChart.tsx b/src/components/CircularChart.tsx
index a97e157..2b93c23 100644
--- a/src/components/CircularChart.tsx
+++ b/src/components/CircularChart.tsx
@@ -422,6 +422,55 @@ export default function CircularChart({
       const labelX = center + labelRadius * Math.cos(midAngleRad);
       const labelY = center + labelRadius * Math.sin(midAngleRad);
 
+      // Calculate available arc length at the label radius for smart text fitting
+      const arcSpanDeg = endAngle - startAngle;
+      const arcLength = (arcSpanDeg / 360) * 2 * Math.PI * labelRadius;
+      const radialWidth = radius - innerRadius;
+
+      // Estimate how many characters fit: ~7px per char at text-xs (12px font), ~6px at 10px font
+      const charWidthLarge = 7;
+      const charWidthSmall = 5.5;
+      // Use the smaller of arc length and radial width as the constraining dimension,
+      // but arc length is the primary constraint for text along the arc
+      const availableWidth = Math.min(arcLength * 0.85, radialWidth * 1.2);
+
+      // Determine font size and label text
+      let fontSize: number;
+      let displayLabel: string;
+
+      if (duration < 20) {
+        // Very small blocks: hide text entirely (tooltip on hover is enough)
+        fontSize = 0;
+        displayLabel = '';
+      } else if (availableWidth < charWidthSmall * 2) {
+        // Too small for any text
+        fontSize = 0;
+        displayLabel = '';
+      } else if (availableWidth < charWidthLarge * block.label.length) {
+        // Text doesn't fit at normal size — try smaller font first
+        fontSize = 10;
+        const maxChars = Math.floor(availableWidth / charWidthSmall);
+        if (maxChars < 3) {
+          fontSize = 0;
+          displayLabel = '';
+        } else if (maxChars < block.label.length) {
+          displayLabel = block.label.slice(0, maxChars - 1) + '\u2026';
+        } else {
+          displayLabel = block.label;
+        }
+      } else {
+        // Text fits at normal size
+        fontSize = 12;
+        displayLabel = block.label;
+      }
+
+      // Rotate text to follow the arc direction for readability
+      const rotationAngle = midAngle;
+      // Flip text if it would be upside-down (between 90° and 270° on the circle)
+      const adjustedRotation = (rotationAngle > 90 && rotationAngle < 270)
+        ? rotationAngle + 180
+        : rotationAngle;
+
       return (
         <g key={block.id}>
           <path
@@ -455,15 +504,17 @@ export default function CircularChart({
               setTooltipPos(null);
             }}
           />
-          {duration >= 30 && (
+          {fontSize > 0 && displayLabel && (
             <text
               x={labelX}
               y={labelY}
               textAnchor="middle"
               dominantBaseline="middle"
-              className="text-xs font-semibold fill-white pointer-events-none"
+              transform={`rotate(${adjustedRotation}, ${labelX}, ${labelY})`}
+              className="font-semibold fill-white pointer-events-none"
+              style={{ fontSize: `${fontSize}px` }}
             >
-              {block.label}
+              {displayLabel}
             </text>
           )}
         </g>
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 1fccde4..1a27706 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -9,6 +9,8 @@ import LabelModal from './LabelModal';
 import SchedulesPage from './SchedulesPage';
 import SettingsPage from './SettingsPage';
 import AuthButtons from './AuthButtons';
+import AIAssistant from './AIAssistant';
+import type { DisplayMessage } from './AIAssistant';
 import Footer from './Footer';
 import type { NavRoute, TimeBlock } from '../types/schedule';
 import {
@@ -48,6 +50,15 @@ export default function Dashboard() {
   const [allSchedules, setAllSchedules] = useState<Schedule[]>([]);
   const authButtonRef = useRef<HTMLDivElement>(null);
 
+  // AI Assistant chat state (lifted up to persist across navigation)
+  const [aiMessages, setAiMessages] = useState<DisplayMessage[]>([
+    {
+      role: 'assistant',
+      content: 'Hi! I\'m your AI scheduling assistant. I can help you plan your day, suggest schedule improvements, or create a new schedule from scratch.\n\nHow can I help?',
+      timestamp: new Date(),
+    },
+  ]);
+
   // Ref to track if we're currently saving
   const savingRef = useRef(false);
 
@@ -406,8 +417,8 @@ export default function Dashboard() {
           </div>
         )}
 
-        {/* Header - Hidden on mobile */}
-        <header className="hidden lg:block bg-white border-b border-gray-200 px-4 sm:px-8 py-2 sm:py-3 lg:py-4">
+        {/* Header - Hidden on mobile and on AI Assistant (which has its own header) */}
+        <header className={`bg-white border-b border-gray-200 px-4 sm:px-8 py-2 sm:py-3 lg:py-4 ${currentRoute === 'ai-assistant' ? 'hidden' : 'hidden lg:block'}`}>
           <div className="flex items-center justify-between gap-2 sm:gap-4">
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2 sm:gap-3">
@@ -415,6 +426,7 @@ export default function Dashboard() {
                   {currentRoute === 'dashboard' && 'Schedule Editor'}
                   {currentRoute === 'schedules' && 'My Schedules'}
                   {currentRoute === 'settings' && 'Settings'}
+                  {currentRoute === 'ai-assistant' && 'AI Assistant'}
                 </h2>
 
                 {/* Schedule Dropdown - only on Schedule Editor page */}
@@ -626,6 +638,17 @@ export default function Dashboard() {
           </>
         )}
 
+        {currentRoute === 'ai-assistant' && (
+          <AIAssistant
+            timeBlocks={timeBlocks}
+            messages={aiMessages}
+            setMessages={setAiMessages}
+            onApplySchedule={(newBlocks) => {
+              setTimeBlocks(newBlocks);
+            }}
+          />
+        )}
+
         {currentRoute === 'settings' && (
           <>
             {user ? (
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index a7e936f..5efb931 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -42,6 +42,15 @@ export default function Sidebar({ currentRoute, onNavigate, userEmail, isGuestMo
         </svg>
       )
     },
+    {
+      route: 'ai-assistant',
+      label: 'AI Assistant',
+      renderIcon: () => (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+        </svg>
+      )
+    },
     {
       route: 'settings',
       label: 'Settings',
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 2ee25f9..9c24beb 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -222,29 +222,66 @@ export default function Timeline({
         const top = (segment.start / totalDayMinutes) * 100;
         const height = (segment.duration / totalDayMinutes) * 100;
 
+        // Calculate pixel height for smart text fitting
+        const pixelHeight = (segment.duration / totalDayMinutes) * timelineHeight;
+        const isVeryShort = pixelHeight < 28;
+        const isShort = pixelHeight < 44;
+        const isMedium = pixelHeight < 60;
+
         return (
           <div
             key={`${block.id}-${index}`}
-            className="absolute left-12 sm:left-14 right-2 sm:right-4 rounded-lg cursor-pointer transition-all hover:shadow-lg active:scale-95 sm:hover:scale-[1.02] group touch-manipulation"
+            className="absolute left-12 sm:left-14 right-2 sm:right-4 rounded-lg cursor-pointer transition-all hover:shadow-lg active:scale-95 sm:hover:scale-[1.02] group touch-manipulation overflow-hidden"
             style={{
               top: `${top}%`,
               height: `${height}%`,
               backgroundColor: block.color,
-              minHeight: '30px',
+              minHeight: '20px',
             }}
             onClick={() => onBlockClick(block)}
             title={`${block.label} (${formatTo12Hour(block.startTime)} - ${formatTo12Hour(block.endTime)})`}
           >
-            {duration >= 15 && (
+            {isVeryShort ? (
+              <div className="px-2 py-0.5 text-white font-medium flex items-center h-full" style={{ fontSize: '10px' }}>
+                <span className="truncate">{block.label}</span>
+              </div>
+            ) : isShort ? (
+              <div className="px-2 sm:px-3 py-1 text-white font-medium text-xs">
+                <div className="flex items-center justify-between gap-1">
+                  <span className="truncate">{block.label}</span>
+                  {index === 0 && (
+                    <span className="opacity-75 whitespace-nowrap flex-shrink-0" style={{ fontSize: '10px' }}>
+                      {formatDuration(duration)}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ) : isMedium ? (
+              <div className="px-2 sm:px-3 py-1.5 text-white font-medium text-xs sm:text-sm">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="truncate">{block.label}</span>
+                  {index === 0 && (
+                    <span className="text-xs opacity-75 whitespace-nowrap flex-shrink-0">
+                      {formatDuration(duration)}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ) : (
               <div className="px-2 sm:px-3 py-1.5 sm:py-2 text-white font-medium text-xs sm:text-sm">
                 <div className="flex items-center justify-between gap-2">
                   <span className="truncate">{block.label}</span>
-                  {index === 0 && duration >= 30 && (
-                    <span className="text-xs opacity-75 whitespace-nowrap">
+                  {index === 0 && (
+                    <span className="text-xs opacity-75 whitespace-nowrap flex-shrink-0">
                       {formatDuration(duration)}
                     </span>
                   )}
                 </div>
+                {index === 0 && pixelHeight > 80 && (
+                  <div className="text-xs opacity-60 mt-0.5">
+                    {formatTo12Hour(block.startTime)} - {formatTo12Hour(block.endTime)}
+                  </div>
+                )}
               </div>
             )}
           </div>
diff --git a/src/services/aiService.ts b/src/services/aiService.ts
new file mode 100644
index 0000000..d4c0c7c
--- /dev/null
+++ b/src/services/aiService.ts
@@ -0,0 +1,155 @@
+import type { TimeBlock } from '../types/schedule';
+
+const CLAUDE_API_KEY = import.meta.env.VITE_CLAUDE_API_KEY || 'your-claude-api-key-here';
+const CLAUDE_API_URL = 'https://api.anthropic.com/v1/messages';
+
+export interface ChatMessage {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export interface AIScheduleResponse {
+  message: string;
+  timeBlocks?: TimeBlock[];
+}
+
+const SYSTEM_PROMPT = `You are a helpful AI scheduling assistant for DayChart, a visual time-blocking app. You help users plan their day by creating and discussing schedules.
+
+When the user asks you to create or suggest a schedule, you MUST respond with a JSON block containing time blocks. Use this exact format embedded in your response:
+
+\`\`\`schedule
+[
+  {
+    "startTime": "HH:MM",
+    "endTime": "HH:MM",
+    "label": "Activity Name",
+    "color": "#hexcolor"
+  }
+]
+\`\`\`
+
+Rules for time blocks:
+- Times must be in 24-hour "HH:MM" format, snapped to 5-minute increments (e.g., "07:00", "09:30", "14:15")
+- Time blocks must NOT overlap
+- Use these colors: #f87171 (red), #60a5fa (blue), #34d399 (green), #fbbf24 (yellow), #a78bfa (purple), #fb923c (orange), #a3e635 (lime), #f472b6 (pink), #38bdf8 (sky), #c084fc (violet)
+- Give each block a concise, descriptive label
+- Cover the full day if the user asks for a full schedule, or just the requested portion
+
+When NOT creating a schedule, just respond conversationally about time management, productivity tips, or answer questions about their current schedule.
+
+If the user shares their current schedule, analyze it and provide helpful feedback.`;
+
+/**
+ * Parse time blocks from AI response text
+ */
+export const parseScheduleFromResponse = (text: string): TimeBlock[] | null => {
+  const scheduleMatch = text.match(/```schedule\s*\n([\s\S]*?)\n```/);
+  if (!scheduleMatch) return null;
+
+  try {
+    const parsed = JSON.parse(scheduleMatch[1]);
+    if (!Array.isArray(parsed)) return null;
+
+    return parsed.map((block: { startTime: string; endTime: string; label: string; color: string }, index: number) => ({
+      id: crypto.randomUUID(),
+      startTime: block.startTime,
+      endTime: block.endTime,
+      label: block.label,
+      color: block.color || '#60a5fa',
+      order: index,
+    }));
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Strip the schedule JSON block from the message for display
+ */
+export const stripScheduleBlock = (text: string): string => {
+  return text.replace(/```schedule\s*\n[\s\S]*?\n```/g, '').trim();
+};
+
+/**
+ * Format current schedule as context for the AI
+ */
+export const formatScheduleContext = (timeBlocks: TimeBlock[]): string => {
+  if (timeBlocks.length === 0) {
+    return 'The user currently has no time blocks in their schedule.';
+  }
+
+  const sorted = [...timeBlocks].sort((a, b) => {
+    const [aH, aM] = a.startTime.split(':').map(Number);
+    const [bH, bM] = b.startTime.split(':').map(Number);
+    return aH * 60 + aM - (bH * 60 + bM);
+  });
+
+  const lines = sorted.map(
+    (b) => `- ${b.startTime} to ${b.endTime}: ${b.label}`
+  );
+
+  return `The user's current schedule:\n${lines.join('\n')}`;
+};
+
+/**
+ * Send a message to the Claude API
+ */
+export const sendMessage = async (
+  messages: ChatMessage[],
+  currentTimeBlocks: TimeBlock[]
+): Promise<AIScheduleResponse> => {
+  if (CLAUDE_API_KEY === 'your-claude-api-key-here') {
+    throw new Error(
+      'Claude API key not configured. Add VITE_CLAUDE_API_KEY to your .env file.'
+    );
+  }
+
+  const scheduleContext = formatScheduleContext(currentTimeBlocks);
+
+  const apiMessages = messages.map((msg) => ({
+    role: msg.role,
+    content: msg.content,
+  }));
+
+  try {
+    const response = await fetch(CLAUDE_API_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': CLAUDE_API_KEY,
+        'anthropic-version': '2023-06-01',
+        'anthropic-dangerous-direct-browser-access': 'true',
+      },
+      body: JSON.stringify({
+        model: 'claude-sonnet-4-20250514',
+        max_tokens: 4096,
+        system: `${SYSTEM_PROMPT}\n\n${scheduleContext}`,
+        messages: apiMessages,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(
+        errorData?.error?.message || `API request failed with status ${response.status}`
+      );
+    }
+
+    const data = await response.json();
+    const assistantText =
+      data.content?.[0]?.text || 'Sorry, I could not generate a response.';
+
+    const timeBlocks = parseScheduleFromResponse(assistantText);
+    const displayMessage = stripScheduleBlock(assistantText);
+
+    return {
+      message: displayMessage || (timeBlocks ? 'Here\'s a schedule I created for you:' : assistantText),
+      timeBlocks: timeBlocks || undefined,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error('Failed to communicate with AI assistant');
+  }
+};
diff --git a/src/types/schedule.ts b/src/types/schedule.ts
index 82c6c43..841c834 100644
--- a/src/types/schedule.ts
+++ b/src/types/schedule.ts
@@ -40,4 +40,4 @@ export interface TimeRange {
 
 export type TimeBlockInput = Omit<TimeBlock, 'id' | 'order'>;
 export type ViewMode = 'chart' | 'timeline' | 'both';
-export type NavRoute = 'dashboard' | 'schedules' | 'settings';
+export type NavRoute = 'dashboard' | 'schedules' | 'settings' | 'ai-assistant';