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/dialogs/BrowserCompatDialog.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import { AlertTriangle, XCircle, Info, X } from 'lucide-react';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import { getBrowserInfo } from '@/lib/utils/browser-compat';
+
+interface BrowserCompatDialogProps {
+  open: boolean;
+  missingFeatures: string[];
+  warnings: string[];
+  onClose: () => void;
+}
+
+export function BrowserCompatDialog({
+  open,
+  missingFeatures,
+  warnings,
+  onClose,
+}: BrowserCompatDialogProps) {
+  const [browserInfo, setBrowserInfo] = React.useState({ name: 'Unknown', version: 'Unknown' });
+  const hasErrors = missingFeatures.length > 0;
+
+  // Get browser info only on client side
+  React.useEffect(() => {
+    setBrowserInfo(getBrowserInfo());
+  }, []);
+
+  if (!open) return null;
+
+  return (
+    <Modal open={open} onClose={onClose} title="">
+      <div className="p-6 max-w-md">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-2">
+            {hasErrors ? (
+              <>
+                <XCircle className="h-5 w-5 text-destructive" />
+                <h2 className="text-lg font-semibold">Browser Not Supported</h2>
+              </>
+            ) : (
+              <>
+                <AlertTriangle className="h-5 w-5 text-yellow-500" />
+                <h2 className="text-lg font-semibold">Browser Warnings</h2>
+              </>
+            )}
+          </div>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <p className="text-sm text-muted-foreground mb-4">
+          {hasErrors ? (
+            <>Your browser is missing required features to run this audio editor.</>
+          ) : (
+            <>Some features may not work as expected in your browser.</>
+          )}
+        </p>
+
+        <div className="space-y-4">
+          {/* Browser Info */}
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Info className="h-4 w-4" />
+            <span>
+              {browserInfo.name} {browserInfo.version}
+            </span>
+          </div>
+
+          {/* Missing Features */}
+          {missingFeatures.length > 0 && (
+            <div className="space-y-2">
+              <h3 className="text-sm font-semibold text-destructive flex items-center gap-2">
+                <XCircle className="h-4 w-4" />
+                Missing Required Features:
+              </h3>
+              <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+                {missingFeatures.map((feature) => (
+                  <li key={feature}>{feature}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Warnings */}
+          {warnings.length > 0 && (
+            <div className="space-y-2">
+              <h3 className="text-sm font-semibold text-yellow-600 dark:text-yellow-500 flex items-center gap-2">
+                <AlertTriangle className="h-4 w-4" />
+                Warnings:
+              </h3>
+              <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+                {warnings.map((warning) => (
+                  <li key={warning}>{warning}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Recommendations */}
+          {hasErrors && (
+            <div className="bg-muted/50 border border-border rounded-md p-3 space-y-2">
+              <h3 className="text-sm font-semibold">Recommended Browsers:</h3>
+              <ul className="text-sm text-muted-foreground space-y-1">
+                <li>• Chrome 90+ or Edge 90+</li>
+                <li>• Firefox 88+</li>
+                <li>• Safari 14+</li>
+              </ul>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2">
+            {hasErrors ? (
+              <Button onClick={onClose} variant="destructive">
+                Close
+              </Button>
+            ) : (
+              <Button onClick={onClose}>
+                Continue Anyway
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}