feat: enhance mobile responsiveness with collapsible controls and automation/effects bars

Added comprehensive mobile support for Phase 15 (Polish & Optimization):

**Mobile Layout Enhancements:**
- Track controls now collapsible on mobile with two states:
  - Collapsed: minimal controls with expand chevron, R/M/S buttons, horizontal level meter
  - Expanded: full height fader, pan control, all buttons
- Track collapse buttons added to mobile view (left chevron for track collapse, right chevron for control collapse)
- Master controls collapse button hidden on desktop (lg:hidden)
- Automation and effects bars now available on mobile layout
- Both bars collapsible with eye/eye-off icons, horizontally scrollable when zoomed
- Mobile vertical stacking: controls → waveform → automation → effects per track

**Bug Fixes:**
- Fixed track controls and waveform container height matching on desktop
- Fixed Modal component prop: isOpen → open in all dialog components
- Fixed TypeScript null check for audioBuffer.duration
- Fixed keyboard shortcut category: 'help' → 'view'

**Technical Improvements:**
- Consistent height calculation using trackHeight variable
- Proper responsive breakpoints with Tailwind (sm:640px, lg:1024px)
- Progressive disclosure pattern for mobile controls

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

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

components/controls/MasterControls.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { CircularKnob } from '@/components/ui/CircularKnob';
 import { MasterFader } from './MasterFader';
 import { cn } from '@/lib/utils/cn';
@@ -12,10 +13,12 @@ export interface MasterControlsProps {
   rmsLevel: number;
   isClipping: boolean;
   isMuted?: boolean;
+  collapsed?: boolean; // For collapsible on mobile/small screens
   onVolumeChange: (volume: number) => void;
   onPanChange: (pan: number) => void;
   onMuteToggle: () => void;
   onResetClip?: () => void;
+  onToggleCollapse?: () => void;
   className?: string;
 }
 
@@ -26,20 +29,81 @@ export function MasterControls({
   rmsLevel,
   isClipping,
   isMuted = false,
+  collapsed = false,
   onVolumeChange,
   onPanChange,
   onMuteToggle,
   onResetClip,
+  onToggleCollapse,
   className,
 }: MasterControlsProps) {
+  // Collapsed view - minimal controls
+  if (collapsed) {
+    return (
+      <div className={cn(
+        'flex flex-col items-center gap-2 px-3 py-2 bg-card/50 border border-accent/50 rounded-lg w-full',
+        className
+      )}>
+        <div className="flex items-center justify-between w-full">
+          <div className="text-xs font-bold text-accent uppercase tracking-wider">
+            Master
+          </div>
+          {onToggleCollapse && (
+            <button
+              onClick={onToggleCollapse}
+              className="p-1 hover:bg-accent/20 rounded transition-colors"
+              title="Expand master controls"
+            >
+              <ChevronDown className="h-3 w-3 text-muted-foreground" />
+            </button>
+          )}
+        </div>
+        <div className="flex items-center gap-2 w-full justify-center">
+          <button
+            onClick={onMuteToggle}
+            className={cn(
+              'h-7 w-7 rounded-md flex items-center justify-center transition-all text-xs font-bold',
+              isMuted
+                ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
+                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+            )}
+            title={isMuted ? 'Unmute' : 'Mute'}
+          >
+            M
+          </button>
+          <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+            <div
+              className={cn(
+                'h-full transition-all',
+                peakLevel > 0.95 ? 'bg-red-500' : peakLevel > 0.8 ? 'bg-yellow-500' : 'bg-green-500'
+              )}
+              style={{ width: `${peakLevel * 100}%` }}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={cn(
       'flex flex-col items-center gap-3 px-4 py-3 bg-card/50 border-2 border-accent/50 rounded-lg',
       className
     )}>
-      {/* Master Label */}
-      <div className="text-[10px] font-bold text-accent uppercase tracking-wider">
-        Master
+      {/* Master Label with collapse button */}
+      <div className="flex items-center justify-between w-full">
+        <div className="text-[10px] font-bold text-accent uppercase tracking-wider flex-1 text-center">
+          Master
+        </div>
+        {onToggleCollapse && (
+          <button
+            onClick={onToggleCollapse}
+            className="p-0.5 hover:bg-accent/20 rounded transition-colors flex-shrink-0 lg:hidden"
+            title="Collapse master controls"
+          >
+            <ChevronUp className="h-3 w-3 text-muted-foreground" />
+          </button>
+        )}
       </div>
 
       {/* Pan Control */}