feat: Add character names to scenarios and UI

Introduces `characterName` to the `Scenario` type, enabling AI personas to be explicitly named. This change also updates the `ScenarioCard` component to display the character name and adds foundational support for potential future scenario deletion functionality. The README has been updated with a new AI Studio link.

components/SettingsModal.tsx

@@ -1,8 +1,9 @@
 
 import React from 'react';
 import { UserSettings } from '../types';
-import { X, Volume2, Check, Info, Mic2 } from 'lucide-react';
+import { X, Volume2, Check, Info, Mic2, Settings2 } from 'lucide-react';
 import Tooltip from './Tooltip';
+import AudioDeviceSelector from './AudioDeviceSelector';
 
 interface SettingsModalProps {
   settings: UserSettings;
@@ -29,8 +30,8 @@ const VOICE_OPTIONS: VoiceOption[] = [
 const SettingsModal: React.FC<SettingsModalProps> = ({ settings, onUpdate, onClose }) => {
   return (
     <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-md">
-      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-xl overflow-hidden animate-in fade-in zoom-in duration-300 border border-slate-100">
-        <div className="p-6 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
+      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-xl overflow-hidden animate-in fade-in zoom-in duration-300 border border-slate-100 max-h-[90vh] flex flex-col">
+        <div className="p-6 bg-slate-50 border-b border-slate-200 flex justify-between items-center flex-shrink-0">
           <div className="flex items-center gap-3">
             <div className="bg-slate-800 p-2 rounded-xl text-white">
               <Volume2 size={20} />
@@ -45,7 +46,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ settings, onUpdate, onClo
           </button>
         </div>
 
-        <div className="p-8 space-y-8">
+        <div className="p-8 space-y-8 overflow-y-auto">
           <section className="space-y-4">
             <div className="flex items-center justify-between">
               <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
@@ -94,6 +95,20 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ settings, onUpdate, onClo
             </div>
           </section>
 
+          <section className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+                <Settings2 size={14} className="text-teal-600" />
+                Hardware Configuration
+              </h3>
+            </div>
+            
+            <AudioDeviceSelector 
+              selectedDeviceId={settings.preferredAudioDeviceId}
+              onSelect={(deviceId) => onUpdate({ ...settings, preferredAudioDeviceId: deviceId })}
+            />
+          </section>
+
           <div className="bg-amber-50 border border-amber-100 rounded-2xl p-4 flex gap-3">
             <div className="text-amber-600 mt-0.5">
               <Info size={18} />
@@ -104,7 +119,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ settings, onUpdate, onClo
           </div>
         </div>
 
-        <div className="p-6 bg-slate-50 border-t border-slate-200 flex justify-end">
+        <div className="p-6 bg-slate-50 border-t border-slate-200 flex justify-end flex-shrink-0">
           <button
             onClick={onClose}
             className="bg-slate-800 text-white px-8 py-3 rounded-2xl font-bold hover:bg-slate-900 shadow-lg shadow-slate-200 transition-all uppercase tracking-widest text-[10px]"