fix: improve overlay visibility with header controls and lighter backdrop

Changes to automation and effects overlays:
- Reduced backdrop opacity from bg-black/60 to bg-black/30 (less dark)
- Added header to automation overlay with parameter name display
- Added close button to automation overlay (ChevronDown icon)
- Wrapped automation lane in rounded card with border and shadow
- Both overlays now have consistent visual styling
- Added ChevronDown import to TrackList

This makes the overlays less obtrusive and adds proper controls for closing
the automation view, matching the effects overlay pattern.

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

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

components/tracks/TrackList.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Plus, Upload } from 'lucide-react';
+import { Plus, Upload, ChevronDown } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Track } from './Track';
 import { TrackExtensions } from './TrackExtensions';
@@ -294,8 +294,31 @@ export function TrackList({
 
                   {/* Automation Lane Overlay */}
                   {!track.collapsed && track.automation?.showAutomation && (
-                    <div className="absolute inset-0 bg-black/60 backdrop-blur-sm pointer-events-auto z-10">
+                    <div className="absolute inset-0 bg-black/30 backdrop-blur-sm pointer-events-auto z-10">
-                      <div className="h-full p-4">
+                      <div className="h-full p-4 flex flex-col">
+                        <div className="bg-card/95 rounded-lg border border-border shadow-2xl flex flex-col h-full">
+                          {/* Header */}
+                          <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50">
+                            <div className="flex items-center gap-2">
+                              <span className="text-sm font-medium">Automation</span>
+                              <span className="text-xs text-muted-foreground">
+                                {track.automation.selectedParameterId || 'Volume'}
+                              </span>
+                            </div>
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              onClick={() => onUpdateTrack(track.id, {
+                                automation: { ...track.automation, showAutomation: false }
+                              })}
+                              title="Close automation"
+                            >
+                              <ChevronDown className="h-4 w-4" />
+                            </Button>
+                          </div>
+
+                          {/* Automation Lane */}
+                          <div className="flex-1 overflow-hidden">
                             {track.automation.lanes
                               .filter((lane) => lane.parameterId === track.automation.selectedParameterId)
                               .map((lane) => (
@@ -356,11 +379,13 @@ export function TrackList({
                               ))}
                           </div>
                         </div>
+                      </div>
+                    </div>
                   )}
 
                   {/* Effects Overlay */}
                   {!track.collapsed && track.showEffects && (
-                    <div className="absolute inset-0 bg-black/60 backdrop-blur-sm pointer-events-auto z-10">
+                    <div className="absolute inset-0 bg-black/30 backdrop-blur-sm pointer-events-auto z-10">
                       <div className="h-full p-4">
                         <TrackExtensions
                           track={track}