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/ScenarioCard.tsx

@@ -1,15 +1,16 @@
 
 import React from 'react';
 import { Scenario } from '../types';
-import { Mic, MessageSquare, Info } from 'lucide-react';
+import { Mic, MessageSquare, Trash2 } from 'lucide-react';
 import Tooltip from './Tooltip';
 
 interface ScenarioCardProps {
   scenario: Scenario;
   onSelect: (scenario: Scenario, mode: 'text' | 'voice') => void;
+  onDelete?: (id: string) => void;
 }
 
-const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect }) => {
+const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect, onDelete }) => {
   const getDifficultyColor = (diff: string) => {
     switch (diff) {
       case 'Beginner': return 'bg-teal-50 text-teal-800 border-teal-100';
@@ -26,19 +27,34 @@ const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect }) => {
   };
 
   return (
-    <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-200 hover:border-teal-200 hover:shadow-md transition-all flex flex-col h-full group">
+    <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-200 hover:border-teal-200 hover:shadow-md transition-all flex flex-col h-full group relative">
+      {onDelete && (
+        <button 
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(scenario.id);
+          }}
+          className="absolute top-4 right-4 p-2 text-slate-300 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-all opacity-0 group-hover:opacity-100"
+          title="Delete custom scenario"
+        >
+          <Trash2 size={16} />
+        </button>
+      )}
+
       <div className="flex justify-between items-start mb-4">
         <Tooltip content={difficultyExplanations[scenario.difficulty]}>
           <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border cursor-help ${getDifficultyColor(scenario.difficulty)}`}>
             {scenario.difficulty}
           </span>
         </Tooltip>
-        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
-          {scenario.category}
-        </span>
+        {!onDelete && (
+          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
+            {scenario.category}
+          </span>
+        )}
       </div>
       
-      <h3 className="text-lg font-bold text-slate-800 mb-2 group-hover:text-teal-700 transition-colors">{scenario.title}</h3>
+      <h3 className="text-lg font-bold text-slate-800 mb-2 group-hover:text-teal-700 transition-colors pr-6">{scenario.title}</h3>
       <p className="text-slate-600 text-sm mb-5 flex-grow leading-relaxed font-light">{scenario.description}</p>
       
       <div className="mb-6">