feat: Complete Ableton-style track layout redesign

Track height & spacing improvements:
- Increased DEFAULT_TRACK_HEIGHT from 180px to 240px for vertical controls
- Increased MIN_TRACK_HEIGHT from 60px to 120px
- Increased MAX_TRACK_HEIGHT from 300px to 400px
- Added COLLAPSED_TRACK_HEIGHT constant (48px)
- Reduced control panel gap from 8px to 6px for tighter spacing
- Added min-h-0 and overflow-hidden to prevent flex overflow
- Optimized fader container with max-h-[140px] constraint

Clip-style waveform visualization (Ableton-like):
- Wrapped waveform canvas in visible "clip" container
- Added border, rounded corners, and shadow for clip identity
- Added 16px clip header bar showing track name
- Implemented hover state for better interactivity
- Added gradient background from-foreground/5 to-transparent

Track height resize functionality:
- Added draggable bottom-edge resize handle
- Implemented cursor-ns-resize with hover feedback
- Constrain resizing to MIN/MAX height range
- Real-time height updates with smooth visual feedback
- Active state highlighting during resize

Effects section visual integration:
- Changed from solid background to gradient (from-muted/80 to-muted/60)
- Reduced device rack height from 192px to 176px for better proportion
- Improved visual hierarchy and connection to track row

Flexible VerticalFader component:
- Changed from fixed h-32 (128px) to flex-1 layout
- Added min-h-[80px] and max-h-[140px] constraints
- Allows parent container to control actual height
- Maintains readability and proportions at all sizes

CSS enhancements (globals.css):
- Added .track-clip-container utility class
- Added .track-clip-header utility class
- Theme-aware clip styling for light/dark modes
- OKLCH color space for consistent appearance

Visual results:
- Professional DAW appearance matching Ableton Live
- Clear clip/region boundaries for audio editing
- Better proportions for vertical controls (240px tracks)
- Resizable track heights (120-400px range)
- Improved visual hierarchy and organization

Files modified:
- types/track.ts (height constants)
- components/tracks/Track.tsx (layout + clip styling + resize)
- components/ui/VerticalFader.tsx (flexible height)
- app/globals.css (clip styling)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/globals.css

@@ -354,4 +354,31 @@
   .custom-scrollbar::-webkit-scrollbar-thumb:active {
     background: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
   }
+
+  /* Clip/Region styling for Ableton-style appearance */
+  .track-clip-container {
+    @apply absolute inset-2 rounded-sm shadow-sm overflow-hidden transition-all duration-150;
+    background: oklch(0.2 0.01 var(--hue) / 0.3);
+    border: 1px solid oklch(0.4 0.02 var(--hue) / 0.5);
+  }
+
+  .track-clip-container:hover {
+    border-color: oklch(0.5 0.03 var(--hue) / 0.7);
+  }
+
+  .track-clip-header {
+    @apply absolute top-0 left-0 right-0 h-4 pointer-events-none z-10 px-2 flex items-center;
+    background: linear-gradient(to bottom, rgb(0 0 0 / 0.1), transparent);
+  }
+}
+
+@layer utilities {
+  [data-theme='light'] .track-clip-container {
+    background: oklch(0.95 0.01 var(--hue) / 0.3);
+    border: 1px solid oklch(0.7 0.02 var(--hue) / 0.5);
+  }
+
+  [data-theme='light'] .track-clip-header {
+    background: linear-gradient(to bottom, rgb(255 255 255 / 0.15), transparent);
+  }
 }