diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,107 +3,141 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Google TTS Document Reader (BYOK) - Enhanced v3</title>
+    <title>Google TTS Document Reader (BYOK)</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            --primary-blue: #3B82F6; /* blue-500 */
-            --bg-gray: #F9FAFB; /* gray-50 */
-            --text-primary: #1F2937; /* gray-800 */
-            --border-color: #E5E7EB; /* gray-200 */
+            --primary-blue: #3B82F6;
+            --bg-gray: #F9FAFB;
+            --text-primary: #1F2937;
+            --border-color: #E5E7EB;
             --card-bg: #FFFFFF;
         }
-
+        
+        /* Dark mode variables */
         [data-theme="dark"] {
-            --bg-gray: #111827; /* gray-900 */
-            --text-primary: #F9FAFB; /* gray-50 */
-            --border-color: #374151; /* gray-700 */
-            --card-bg: #1F2937; /* gray-800 */
+            --bg-gray: #111827;
+            --text-primary: #F9FAFB;
+            --border-color: #374151;
+            --card-bg: #1F2937;
         }
-
+        
         body {
-            font-family: "Inter", sans-serif;
             background-color: var(--bg-gray);
             color: var(--text-primary);
             transition: background-color 0.3s, color 0.3s;
         }
-
-        .bg-white { background-color: var(--card-bg) !important; }
-        .border-gray-200 { border-color: var(--border-color) !important; }
-        .text-gray-800 { color: var(--text-primary) !important; }
-
-        .dropzone { border: 2px dashed #9CA3AF; transition: all 0.3s ease; border-radius: 0.5rem; }
-        .dropzone.active { border-color: var(--primary-blue); background-color: #EFF6FF; /* blue-50 */ }
-        [data-theme="dark"] .dropzone.active { background-color: #1E3A8A; /* blue-800 */ }
-
-        .document-content { max-height: 45vh; overflow-y: auto; border-radius: 0.5rem; }
-        .document-content p { cursor: pointer; padding: 4px 2px; border-radius: 3px; position: relative;}
-        .document-content p:hover { background-color: rgba(0,0,0,0.05); }
-        [data-theme="dark"] .document-content p:hover { background-color: rgba(255,255,255,0.05); }
-        .document-content p .bookmark-icon {
-            position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
-            color: #9CA3AF; opacity: 0; transition: opacity 0.2s;
+        
+        .bg-white {
+            background-color: var(--card-bg) !important;
+        }
+        
+        .border-gray-200 {
+            border-color: var(--border-color) !important;
+        }
+        
+        .text-gray-800 {
+            color: var(--text-primary) !important;
+        }
+        
+        .dropzone {
+            border: 2px dashed #9CA3AF;
+            transition: all 0.3s ease;
+        }
+        .dropzone.active {
+            border-color: #3B82F6;
+            background-color: #EFF6FF;
+        }
+        .document-content {
+            max-height: 60vh;
+            overflow-y: auto;
+        }
+        .highlight {
+            background-color: #FEF08A;
+            transition: background-color 0.2s;
+            border-radius: 3px;
+            padding: 0 2px;
+        }
+        .loading-spinner {
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 3px solid #3B82F6;
+            width: 20px;
+            height: 20px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 12px 24px;
+            border-radius: 8px;
+            color: white;
+            z-index: 1000;
+            animation: slideIn 0.3s ease;
+        }
+        .toast.success { background-color: #10B981; }
+        .toast.error { background-color: #EF4444; }
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        
+        /* Progress indicator styles */
+        #progressContainer {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        #currentPositionMarker {
+            box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+        }
+        
+        .reading-highlight {
+            background-color: rgba(34, 197, 94, 0.2);
+            border-radius: 3px;
+            padding: 0 2px;
+            transition: all 0.2s;
         }
-        .document-content p:hover .bookmark-icon { opacity: 1; }
-        .document-content p.bookmarked { background-color: #FEF9C3; /* yellow-100 */ }
-        .document-content p.bookmarked .bookmark-icon { color: #FACC15; /* yellow-500 */ opacity: 1;}
-        [data-theme="dark"] .document-content p.bookmarked { background-color: #713F12; /* yellow-800 adjusted */ }
-
-
-        .loading-spinner { border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 3px solid var(--primary-blue); width: 20px; height: 20px; animation: spin 1s linear infinite; }
-        [data-theme="dark"] .loading-spinner { border-top: 3px solid #60A5FA; /* blue-400 */ }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-
-        .toast { /* ... existing ... */ }
-        @keyframes slideInRight { /* ... existing ... */ }
-        @keyframes fadeOutToast { /* ... existing ... */ }
-
-        #currentPositionMarker { /* ... existing ... */ }
-        .reading-highlight { /* ... existing ... */ }
-        [data-theme="dark"] .reading-highlight { /* ... existing ... */ }
-
-        .audio-controls { /* ... existing ... */ }
-        [data-theme="dark"] .audio-controls { /* ... existing ... */ }
-        .control-button { /* ... existing ... */ }
-        .control-button:disabled { /* ... existing ... */ }
-
-        .progress-bar-container { /* ... existing ... */ }
-        .progress-bar { /* ... existing ... */ }
-
-        .voice-status { /* ... existing ... */ }
-        [data-theme="dark"] .voice-status { /* ... existing ... */ }
-        [data-theme="dark"] select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); }
 
-        .modal { /* ... existing ... */ }
-        .modal-content { /* ... existing ... */ }
-        .modal-header { /* ... existing ... */ }
-        .modal-body { /* ... existing ... */ }
-        .close-button { /* ... existing ... */ }
-        @keyframes fadeInModal { /* ... existing ... */ }
-        @keyframes slideInModal { /* ... existing ... */ }
+        /* Audio controls enhancement */
+        .audio-controls {
+            background: linear-gradient(145deg, #ffffff, #f9fafb);
+            border-radius: 16px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
 
-        #libraryItems li { /* ... existing ... */ }
-        #libraryItems .item-title { /* ... existing ... */ }
-        #libraryItems .item-date { /* ... existing ... */ }
-        [data-theme="dark"] #libraryItems .item-date { /* ... existing ... */ }
+        .control-button {
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
 
-        #notesTextarea { /* ... existing ... */ }
-        [data-theme="dark"] #notesTextarea { /* ... existing ... */ }
+        .control-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+        }
 
-        /* Styling for the new voice selector dropdown */
-        #voiceSelectorDropdown {
-            appearance: none; /* Remove default arrow */
-            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-            background-position: right 0.5rem center;
-            background-repeat: no-repeat;
-            background-size: 1.5em 1.5em;
-            padding-right: 2.5rem; /* Make space for custom arrow */
+        .control-button:active {
+            transform: translateY(0);
         }
-        [data-theme="dark"] #voiceSelectorDropdown {
-             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+
+        /* Enhanced progress bar */
+        .progress-bar-container {
+            background: linear-gradient(145deg, #e5e7eb, #f3f4f6);
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
         }
 
+        .progress-bar {
+            background: linear-gradient(45deg, #3b82f6, #6366f1);
+            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -111,47 +145,53 @@
         <header class="text-center mb-8 relative">
             <h1 class="text-4xl font-bold text-blue-600 mb-2">Google TTS Document Reader</h1>
             <p class="text-gray-600">Natural HD English voices with BYOK (Bring Your Own Key)</p>
-            <button id="darkModeToggle" class="absolute top-0 right-0 p-2 text-gray-600 hover:text-gray-800 transition rounded-full hover:bg-gray-200 dark:hover:bg-gray-700" title="Toggle Dark Mode">
+            
+            <!-- Dark Mode Toggle -->
+            <button id="darkModeToggle" class="absolute top-0 right-0 p-2 text-gray-600 hover:text-gray-800 transition" title="Toggle Dark Mode">
                 <i class="fas fa-moon text-xl"></i>
             </button>
         </header>
 
-        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
-            <div class="bg-blue-50 p-6 border-b border-blue-100 dark:bg-gray-800 dark:border-gray-700">
+        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
+            <!-- API Key Section -->
+            <div class="bg-blue-50 p-6 border-b border-blue-100">
                 <div class="flex flex-col md:flex-row items-center gap-4">
                     <div class="flex-1">
-                        <label for="apiKey" class="block text-sm font-medium text-blue-800 dark:text-blue-300 mb-1">Google Cloud API Key</label>
+                        <label for="apiKey" class="block text-sm font-medium text-blue-800 mb-1">Google Cloud API Key</label>
                         <div class="relative">
-                            <input type="password" id="apiKey" placeholder="Enter your Google Cloud API key"
-                                 class="api-key-input w-full px-4 py-2 pr-10 border border-blue-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-400 dark:focus:border-blue-400">
-                            <button type="button" id="toggleKeyVisibility" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
+                            <input type="password" id="apiKey" placeholder="Enter your Google Cloud API key" 
+                                class="api-key-input w-full px-4 py-2 pr-10 border border-blue-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <button type="button" id="toggleKeyVisibility" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                                 <i class="fas fa-eye" id="eyeIcon"></i>
                             </button>
                         </div>
                     </div>
-                    <button id="saveKeyBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-md transition whitespace-nowrap shadow hover:shadow-md">
+                    <button id="saveKeyBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-md transition whitespace-nowrap">
                         <i class="fas fa-save mr-2"></i> Save Key
                     </button>
                 </div>
-                 <div class="mt-3 text-xs text-blue-600 dark:text-blue-400">
-                    <p class="flex items-center mb-1"> <i class="fas fa-info-circle mr-1.5"></i> Your API key is stored locally.</p>
-                     <details class="mt-2">
-                        <summary class="cursor-pointer hover:text-blue-800 dark:hover:text-blue-200">Need help getting an API key?</summary>
-                        <div class="mt-2 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-700 p-3 rounded border dark:border-gray-600">
+                <div class="mt-3 text-xs text-blue-600">
+                    <p class="flex items-center mb-1">
+                        <i class="fas fa-info-circle mr-1"></i> Your API key is stored locally and never sent to our servers.
+                    </p>
+                    <details class="mt-2">
+                        <summary class="cursor-pointer hover:text-blue-800">Need help getting an API key? (Click to expand)</summary>
+                        <div class="mt-2 text-xs text-gray-600 bg-white p-3 rounded border">
                             <p class="font-medium">How to get your Google Cloud API key:</p>
                             <ol class="mt-1 list-decimal list-inside space-y-1">
-                                <li>Go to <a href="https://console.cloud.google.com" target="_blank" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Google Cloud Console</a></li>
+                                <li>Go to <a href="https://console.cloud.google.com" target="_blank" class="text-blue-600 hover:underline">Google Cloud Console</a></li>
                                 <li>Create a new project or select existing one</li>
                                 <li>Enable the "Cloud Text-to-Speech API"</li>
                                 <li>Go to "Credentials" → "Create Credentials" → "API Key"</li>
                                 <li>Copy the generated API key and paste it above</li>
                                 <li>Optionally, restrict the key to Text-to-Speech API for security</li>
                             </ol>
-                            <div class="mt-3 p-2 bg-yellow-50 dark:bg-yellow-700 dark:bg-opacity-30 border border-yellow-200 dark:border-yellow-500 rounded text-yellow-800 dark:text-yellow-200">
+                            <div class="mt-3 p-2 bg-yellow-50 border border-yellow-200 rounded text-yellow-800">
                                 <p class="font-medium">⚠️ Important:</p>
                                 <ul class="mt-1 list-disc list-inside space-y-1">
                                     <li>Make sure billing is enabled for your project</li>
                                     <li>Copy ONLY the API key (no extra text)</li>
+                                    <li>If restricted, allow this domain</li>
                                 </ul>
                             </div>
                         </div>
@@ -159,1300 +199,1599 @@
                 </div>
             </div>
 
-            <div class="p-6 dark:bg-gray-800">
+            <!-- Input Section -->
+            <div class="p-6">
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                    <button id="uploadBtn" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition shadow hover:shadow-md">
+                    <button id="uploadBtn" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition">
                         <i class="fas fa-upload mr-2"></i> Upload File
                     </button>
-                    <button id="pasteBtn" class="bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition shadow hover:shadow-md">
+                    <button id="pasteBtn" class="bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition">
                         <i class="fas fa-paste mr-2"></i> Paste Text
                     </button>
-                    <div id="dropzone" class="dropzone bg-gray-50 dark:bg-gray-700 py-3 px-4 rounded-lg flex items-center justify-center cursor-pointer">
+                    <div id="dropzone" class="dropzone bg-gray-50 py-3 px-4 rounded-lg flex items-center justify-center cursor-pointer">
                         <div class="text-center">
-                            <i class="fas fa-file-import text-2xl text-gray-400 dark:text-gray-500 mb-1"></i>
-                            <p class="text-gray-500 dark:text-gray-400">Drag & Drop File</p>
-                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Supports: TXT, PDF, DOC/DOCX, HTML...</p>
+                            <i class="fas fa-file-import text-2xl text-gray-400 mb-1"></i>
+                            <p class="text-gray-500">Drag & Drop File</p>
+                            <p class="text-xs text-gray-400 mt-1">Supports: TXT, PDF, DOC/DOCX, RTF, MD, JSON, HTML, XML, CSV</p>
                         </div>
                     </div>
                 </div>
+
                 <input type="file" id="fileInput" class="hidden" accept=".txt,.pdf,.doc,.docx,.odt,.rtf,.md,.markdown,.json,.html,.htm,.xml,.csv,.epub">
             </div>
 
-            <div class="border-t border-gray-200 dark:border-gray-700 p-6 dark:bg-gray-800">
+            <!-- Document Display -->
+            <div class="border-t border-gray-200 p-6">
                 <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Document Content</h2>
-                    <div class="text-sm text-gray-500 dark:text-gray-400" id="charCount">0 characters</div>
+                    <h2 class="text-xl font-semibold text-gray-800">Document Content</h2>
+                    <div class="flex items-center gap-2">
+                        <div class="text-sm text-gray-500" id="charCount">0 characters</div>
+                    </div>
                 </div>
-                <div id="documentContent" class="document-content bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 min-h-[10rem]">
-                    <p class="text-gray-500 dark:text-gray-400 italic">Your document content will appear here...</p>
+                
+                <div id="documentContent" class="document-content bg-gray-50 p-4 rounded-lg border border-gray-200 min-h-32">
+                    <p class="text-gray-500 italic">Your document content will appear here...</p>
                 </div>
             </div>
 
-            <div class="border-t border-gray-200 dark:border-gray-700 p-6 dark:bg-gray-800">
-                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-3">My Notes</h2>
-                <textarea id="notesTextarea" placeholder="Type your notes or comments about the document here... Notes are saved with the document to the library." class="dark:placeholder-gray-400"></textarea>
-            </div>
-
-
-            <div class="border-t border-gray-200 dark:border-gray-700 p-6 bg-gray-50 dark:bg-gray-850">
-                <div class="flex flex-wrap justify-between items-center mb-4 gap-2">
-                     <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Voice & Settings</h2>
-                     <div class="flex items-center gap-2">
-                         <div class="relative">
-                            <select id="languageSelect" title="Select Language" class="bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md py-1.5 px-3 pr-8 text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-white">
+            <!-- Voice & Settings Section -->
+            <div class="border-t border-gray-200 p-6 bg-gray-50">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold text-gray-800">Voice & Settings</h2>
+                    <div class="flex items-center gap-2">
+                        <div class="relative">
+                            <select id="languageSelect" class="bg-white border border-gray-300 rounded-md py-1 px-3 pr-8 text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                                 <option value="en-US">English (US)</option>
                                 <option value="en-GB">English (UK)</option>
                                 <option value="en-AU">English (Australia)</option>
                             </select>
-                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-400">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                 <i class="fas fa-chevron-down text-xs"></i>
                             </div>
                         </div>
-                        <button id="refreshVoicesBtn" title="Refresh voice list for selected language" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 text-sm flex items-center p-1.5 rounded hover:bg-blue-100 dark:hover:bg-blue-700">
+                        <button id="refreshVoicesBtn" class="text-blue-500 hover:text-blue-700 text-sm flex items-center">
                             <i class="fas fa-sync-alt mr-1"></i> Refresh
                         </button>
                     </div>
                 </div>
-
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
-                    <div>
-                        <label for="modelSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Voice Model Type</label>
-                        <select id="modelSelect" title="Select Voice Model Type" class="bg-white dark:bg-gray-700 border dark:border-gray-600 border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-white">
-                            <option value="standard" selected>Standard</option>
-                            <option value="wavenet">WaveNet</option>
-                            <option value="neural2">Neural2</option>
-                            <option value="studio">Studio</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label for="voiceSelectorDropdown" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Specific Voice</label>
-                        <select id="voiceSelectorDropdown" title="Select Specific Voice" class="bg-white dark:bg-gray-700 border dark:border-gray-600 border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-white">
-                            <option value="">-- Select a voice --</option>
-                            </select>
-                    </div>
-                </div>
-
-
-                <div id="costEstimator" class="mb-4 p-3 rounded-lg hidden"></div>
-                <div id="voiceStatus" class="voice-status p-4 rounded-lg mb-6">
+                
+                <!-- Cost Estimator -->
+                <div id="costEstimator" class="mb-4 p-3 bg-blue-100 border border-blue-200 rounded-lg hidden">
                     <div class="flex items-center justify-between">
                         <div class="flex items-center">
-                            <i class="fas fa-microphone text-blue-600 dark:text-blue-400 mr-3 text-lg"></i>
-                            <div>
-                                <div class="font-medium text-gray-800 dark:text-gray-100" id="currentVoiceName">No voice selected</div>
-                                <div class="text-sm text-gray-600 dark:text-gray-300" id="currentVoiceDetails">Select language, model, and voice.</div>
-                            </div>
+                            <i class="fas fa-calculator text-blue-600 mr-2"></i>
+                            <span class="text-sm font-medium text-blue-800">Estimated Cost:</span>
+                        </div>
+                        <div class="text-right">
+                            <div class="text-lg font-bold text-blue-900" id="estimatedCost">$0.00</div>
+                            <div class="text-xs text-blue-600" id="costDetails">0 characters</div>
+                        </div>
+                    </div>
+                    <div class="mt-2 text-xs text-blue-600 flex justify-between items-center">
+                        <div>
+                            <span id="voiceType">Standard voice</span> • 
+                            <span id="priceRate">$4.00/million chars</span>
                         </div>
-                        <button id="playVoiceSample" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm transition shadow hover:shadow-md" disabled>
-                            <i class="fas fa-play mr-1.5"></i> Play Sample
+                        <button id="showCostBreakdown" class="text-blue-500 hover:text-blue-700 underline">
+                            <i class="fas fa-info-circle mr-1"></i>
+                            Pricing Info
                         </button>
                     </div>
                 </div>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <div>
-                        <label for="rateSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Speed</label>
-                        <select id="rateSelect" title="Select Playback Speed" class="bg-white dark:bg-gray-700 border dark:border-gray-600 border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-white">
-                            <option value="0.5">0.5x</option> <option value="0.75">0.75x</option> <option value="1" selected>1x (Normal)</option> <option value="1.25">1.25x</option> <option value="1.5">1.5x</option> <option value="2">2x</option>
+
+                <!-- Voice Settings Grid -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                    <div>
+                        <label for="voiceSelect" class="block text-sm font-medium text-gray-700 mb-1">Voice Selection</label>
+                        <select id="voiceSelect" class="bg-white border border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                            <option value="">Loading voices...</option>
                         </select>
                     </div>
+                    
                     <div>
-                        <label for="pitchSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pitch</label>
-                        <select id="pitchSelect" title="Select Playback Pitch" class="bg-white dark:bg-gray-700 border dark:border-gray-600 border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-white">
-                           <option value="-5">Lower (-5st)</option> <option value="0" selected>Normal (0st)</option> <option value="5">Higher (+5st)</option> <option value="-10">Low (-10st)</option>  <option value="10">High (+10st)</option>
+                        <label for="rateSelect" class="block text-sm font-medium text-gray-700 mb-1">Speed</label>
+                        <select id="rateSelect" class="bg-white border border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                            <option value="0.5">0.5x (Slow)</option>
+                            <option value="0.8">0.8x</option>
+                            <option value="1" selected>1x (Normal)</option>
+                            <option value="1.2">1.2x</option>
+                            <option value="1.5">1.5x (Fast)</option>
+                            <option value="2">2x (Very Fast)</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label for="pitchSelect" class="block text-sm font-medium text-gray-700 mb-1">Pitch</label>
+                        <select id="pitchSelect" class="bg-white border border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                            <option value="-20">Low (-20st)</option>
+                            <option value="-10">Lower (-10st)</option>
+                            <option value="0" selected>Normal (0st)</option>
+                            <option value="10">Higher (+10st)</option>
+                            <option value="20">High (+20st)</option>
                         </select>
                     </div>
                 </div>
-            </div>
 
-            <div class="p-6 dark:bg-gray-800 border-t dark:border-gray-700 flex flex-col sm:flex-row gap-3 justify-center">
-                <button id="saveToLibraryBtn" class="bg-purple-500 hover:bg-purple-600 text-white py-3 px-6 rounded-lg flex items-center justify-center transition shadow hover:shadow-md">
-                    <i class="fas fa-save mr-2"></i> Save to Library
-                </button>
-                <button id="viewLibraryBtn" class="bg-teal-500 hover:bg-teal-600 text-white py-3 px-6 rounded-lg flex items-center justify-center transition shadow hover:shadow-md">
-                    <i class="fas fa-book-open mr-2"></i> View Library
-                </button>
+                <!-- Voice Model Selection -->
+                <div class="mb-6">
+                    <label for="modelSelect" class="block text-sm font-medium text-gray-700 mb-1">Voice Model</label>
+                    <select id="modelSelect" class="bg-white border border-gray-300 rounded-md py-2 px-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                        <option value="standard" selected>Standard - $4.00/1M chars (Default)</option>
+                        <option value="wavenet">WaveNet - $16.00/1M chars</option>
+                        <option value="neural2">Neural2 - $16.00/1M chars</option>
+                        <option value="studio">Studio - $160.00/1M chars</option>
+                    </select>
+                </div>
             </div>
 
-            <div class="audio-controls p-6 m-4 dark:bg-gray-800">
-                <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-4">
-                    <div class="flex-grow">
-                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Status:</span>
-                        <span id="synthesisActionStatus" class="text-sm text-blue-600 dark:text-blue-400 font-medium">Load document and select voice.</span>
-                         <div id="synthesisProgress" class="mt-1 hidden">
-                            <span class="text-xs text-gray-500 dark:text-gray-400">Synthesizing... <span id="progressPercentage">0%</span></span>
-                            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-1.5 mt-0.5">
-                                <div id="synthesisProgressBarInner" class="bg-blue-500 h-1.5 rounded-full transition-all duration-300" style="width: 0%"></div>
-                            </div>
-                        </div>
+            <!-- Enhanced Audio Controls -->
+            <div class="audio-controls p-6 m-4">
+                <div class="flex flex-wrap justify-between items-center gap-4 mb-4">
+                    <div class="flex items-center gap-2">
+                        <span class="text-sm font-medium text-gray-700">Selected Voice:</span>
+                        <span id="selectedVoiceName" class="text-sm text-blue-600 font-medium">None</span>
                     </div>
-                    <div class="playback-controls flex items-center gap-3 flex-shrink-0">
-                         <button id="synthesizeBtn" title="Synthesize audio from current text and settings" class="control-button bg-orange-500 hover:bg-orange-600 text-white rounded-full w-14 h-14 flex items-center justify-center transition">
-                            <i class="fas fa-cogs text-lg"></i> </button>
-                        <button id="playAudioBtn" title="Play synthesized audio" class="control-button bg-blue-600 hover:bg-blue-700 text-white rounded-full w-14 h-14 flex items-center justify-center transition" disabled>
+                    
+                    <div class="playback-controls flex items-center gap-3">
+                        <button id="playBtn" class="control-button bg-blue-600 hover:bg-blue-700 text-white rounded-full w-14 h-14 flex items-center justify-center transition">
                             <i class="fas fa-play text-lg"></i>
                         </button>
-                        <button id="stopBtn" title="Stop synthesis or playback" class="control-button bg-gray-300 hover:bg-gray-400 text-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-gray-200 rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
+                        <button id="pauseBtn" class="control-button bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
+                            <i class="fas fa-pause"></i>
+                        </button>
+                        <button id="stopBtn" class="control-button bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
                             <i class="fas fa-stop"></i>
                         </button>
-                        <button id="downloadBtn" title="Download synthesized audio" class="control-button bg-green-600 hover:bg-green-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
+                        <button id="downloadBtn" class="control-button bg-green-600 hover:bg-green-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition" disabled title="Download Audio">
                             <i class="fas fa-download"></i>
                         </button>
                     </div>
                 </div>
-                <div class="progress-main-container"> <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-1">
+                
+                <!-- Enhanced Progress Container -->
+                <div class="progress-container">
+                    <div class="flex justify-between text-sm text-gray-600 mb-2">
                         <span id="currentTime">0:00</span>
+                        <span class="text-xs text-gray-500">
+                            <span id="synthesisProgress" class="hidden">Synthesizing... <span id="progressPercentage">0%</span></span>
+                        </span>
                         <span id="totalTime">0:00</span>
                     </div>
-                    <div id="progressContainer" class="progress-bar-container w-full h-3 flex relative cursor-pointer rounded-full">
+                    <div id="progressContainer" class="progress-bar-container w-full h-4 flex relative cursor-pointer">
+                        <!-- Progress bar for audio -->
+                        <div id="progressBar" class="progress-bar h-full rounded-full transition-all duration-300" style="width: 0%"></div>
+                        <!-- Reading progress indicator -->
                         <div id="readingProgress" class="absolute inset-0 bg-green-500 bg-opacity-30 h-full rounded-full transition-all duration-300" style="width: 0%"></div>
-                        <div id="progressBar" class="progress-bar h-full rounded-full transition-all duration-100" style="width: 0%"></div>
-                        <div id="currentPositionMarker" class="absolute top-[-2px] w-1 h-[calc(100%+4px)] bg-red-500 transition-all duration-100 rounded-sm" style="left: 0%"></div>
+                        <!-- Current position marker -->
+                        <div id="currentPositionMarker" class="absolute top-0 w-1 h-full bg-red-500 transition-all duration-100" style="left: 0%"></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 
-    <div id="libraryModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2>My Saved Library</h2>
-                <span class="close-button" id="closeLibraryModalBtn">&times;</span>
-            </div>
-            <div class="modal-body">
-                <ul id="libraryItems" class="list-none p-0">
-                    <p class="text-gray-500 dark:text-gray-400 italic text-center">Your library is empty. Save documents to see them here.</p>
-                </ul>
-            </div>
-        </div>
-    </div>
-
+    <!-- Required libraries for document processing -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.21/mammoth.browser.min.js"></script>
-
+    
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // --- Global state variables ---
+            // Global state variables
             let apiKey = localStorage.getItem('googleTTSApiKey') || '';
             let currentText = '';
-            let currentNotes = '';
-            let currentBookmarks = [];
-            let selectedVoiceObject = null; // Stores the full voice object from API
+            let selectedVoice = null;
             let availableVoices = [];
             let isPlaying = false;
             let isPaused = false;
             let audioContext = null;
             let audioSource = null;
-            let audioBuffer = null; // Holds the fully decoded and (if needed) concatenated audio
-            let playbackStartTime = 0;
-            let pausedAtTime = 0;
-            let currentAudioBlob = null; // Holds the raw MP3 blob for download
+            let audioBuffer = null;
+            let startTime = 0;
+            let pauseTime = 0;
+            let currentAudioBlob = null;
             let currentReadingPosition = 0;
-
-            let isSynthesizing = false; // NEW: Tracks if synthesis is in progress
-            let synthesisCancelled = false; // NEW: Flag to signal cancellation
-
-            const MAX_CHUNK_SIZE = 4800;
-            const PRICING = { standard: 4.00, wavenet: 16.00, neural2: 16.00, studio: 160.00 };
-            const defaultStandardMaleVoices = [ /* ... existing ... */ ];
-            const LIBRARY_STORAGE_KEY = 'ttsReaderLibrary';
-
-            // --- Global error handlers (existing) ---
-            window.addEventListener('error', (e) => { console.error('Global error:', e.error); showToast(`Unexpected error: ${e.message}`, 'error'); });
-            window.addEventListener('unhandledrejection', (e) => { console.error('Unhandled rejection:', e.reason); showToast(`Unhandled error: ${e.reason.message || e.reason}`, 'error'); e.preventDefault(); });
-
-            // --- DOM Elements ---
+            let estimatedDuration = 0;
+            let synthesisProgressInterval = null;
+            
+            const MAX_CHUNK_SIZE = 5000;
+            const PRICING = {
+                standard: 4.00,
+                wavenet: 16.00,
+                neural2: 16.00,
+                studio: 160.00
+            };
+
+            // Default male voices preference (Standard model only)
+            const defaultStandardMaleVoices = [
+                'en-US-Standard-A', // Male voice
+                'en-US-Standard-B', // Male voice
+                'en-US-Standard-D', // Male voice
+                'en-US-Standard-I', // Male voice
+                'en-US-Standard-J'  // Male voice
+            ];
+            
+            // Global error handler
+            window.addEventListener('error', (e) => {
+                console.error('Global error caught:', e.error);
+            });
+            
+            // Global unhandled promise rejection handler
+            window.addEventListener('unhandledrejection', (e) => {
+                console.error('Unhandled promise rejection:', e.reason);
+                e.preventDefault();
+            });
+            
+            // DOM Elements
             const apiKeyInput = document.getElementById('apiKey');
             const saveKeyBtn = document.getElementById('saveKeyBtn');
             const uploadBtn = document.getElementById('uploadBtn');
             const pasteBtn = document.getElementById('pasteBtn');
             const dropzone = document.getElementById('dropzone');
             const fileInput = document.getElementById('fileInput');
-            const documentContentEl = document.getElementById('documentContent');
+            const documentContent = document.getElementById('documentContent');
             const charCount = document.getElementById('charCount');
+            const voiceSelect = document.getElementById('voiceSelect');
             const refreshVoicesBtn = document.getElementById('refreshVoicesBtn');
             const languageSelect = document.getElementById('languageSelect');
             const rateSelect = document.getElementById('rateSelect');
             const pitchSelect = document.getElementById('pitchSelect');
-            const modelSelect = document.getElementById('modelSelect'); // Filters voices for voiceSelectorDropdown
-            const voiceSelectorDropdown = document.getElementById('voiceSelectorDropdown'); // NEW: For specific voice selection
-
-            const synthesizeBtn = document.getElementById('synthesizeBtn'); // NEW: Triggers synthesis
-            const playAudioBtn = document.getElementById('playAudioBtn'); // RENAMED from playBtn, handles playback
+            const modelSelect = document.getElementById('modelSelect');
+            const playBtn = document.getElementById('playBtn');
+            const pauseBtn = document.getElementById('pauseBtn');
             const stopBtn = document.getElementById('stopBtn');
             const downloadBtn = document.getElementById('downloadBtn');
-
-            const currentVoiceName = document.getElementById('currentVoiceName');
-            const currentVoiceDetails = document.getElementById('currentVoiceDetails');
-            const playVoiceSample = document.getElementById('playVoiceSample');
-
-            const synthesisActionStatus = document.getElementById('synthesisActionStatus'); // RENAMED from synthesisStatus
-            const currentTimeEl = document.getElementById('currentTime');
-            const totalTimeEl = document.getElementById('totalTime');
-            const progressContainer = document.getElementById('progressContainer'); // Playback progress bar container
-            const progressBar = document.getElementById('progressBar'); // Playback progress bar fill
-            const readingProgress = document.getElementById('readingProgress'); // Text highlight progress
+            const selectedVoiceName = document.getElementById('selectedVoiceName');
+            const currentTime = document.getElementById('currentTime');
+            const totalTime = document.getElementById('totalTime');
+            const progressContainer = document.getElementById('progressContainer');
+            const progressBar = document.getElementById('progressBar');
+            const readingProgress = document.getElementById('readingProgress');
             const currentPositionMarker = document.getElementById('currentPositionMarker');
-
-            const synthesisProgressEl = document.getElementById('synthesisProgress'); // Container for synthesis progress text & bar
-            const progressPercentageEl = document.getElementById('progressPercentage'); // Text for X%
-            const synthesisProgressBarInner = document.getElementById('synthesisProgressBarInner'); // Visual bar for synthesis
-
+            const synthesisProgress = document.getElementById('synthesisProgress');
+            const progressPercentage = document.getElementById('progressPercentage');
+            
+            // Dark mode elements
             const darkModeToggle = document.getElementById('darkModeToggle');
-            const toggleKeyVisibilityBtn = document.getElementById('toggleKeyVisibility');
-            const eyeIcon = document.getElementById('eyeIcon');
-            const costEstimatorEl = document.getElementById('costEstimator');
-
-            const notesTextarea = document.getElementById('notesTextarea');
-            const saveToLibraryBtn = document.getElementById('saveToLibraryBtn');
-            const viewLibraryBtn = document.getElementById('viewLibraryBtn');
-            const libraryModal = document.getElementById('libraryModal');
-            const closeLibraryModalBtn = document.getElementById('closeLibraryModalBtn');
-            const libraryItemsUl = document.getElementById('libraryItems');
-
-
-            // --- Initialization ---
+            
+            // Initialize function
             function init() {
-                if (apiKey) { apiKeyInput.value = apiKey; loadVoices(); }
-
+                // Load saved API key
+                if (apiKey) {
+                    apiKeyInput.value = apiKey;
+                    loadVoices();
+                }
+                
+                // Set PDF.js worker path
                 if (typeof pdfjsLib !== 'undefined') {
                     pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
-                } else { console.warn('pdf.js not loaded.'); }
-                if (typeof mammoth === 'undefined') { console.warn('mammoth.js not loaded.'); }
-
-                document.body.addEventListener('click', initAudioContext, { once: true });
-                document.body.addEventListener('keydown', initAudioContext, { once: true });
-
-                toggleKeyVisibilityBtn.addEventListener('click', () => {
-                    apiKeyInput.type = apiKeyInput.type === 'password' ? 'text' : 'password';
-                    eyeIcon.className = apiKeyInput.type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
+                }
+                
+                // Initialize AudioContext on user interaction
+                document.addEventListener('click', initAudioContext, { once: true });
+                
+                // API Key visibility toggle
+                const toggleKeyVisibility = document.getElementById('toggleKeyVisibility');
+                const eyeIcon = document.getElementById('eyeIcon');
+                
+                toggleKeyVisibility.addEventListener('click', () => {
+                    if (apiKeyInput.type === 'password') {
+                        apiKeyInput.type = 'text';
+                        eyeIcon.className = 'fas fa-eye-slash';
+                    } else {
+                        apiKeyInput.type = 'password';
+                        eyeIcon.className = 'fas fa-eye';
+                    }
                 });
-
+                
+                // Dark mode initialization
                 initDarkMode();
-                initProgressIndicator(); // For playback seeking
+                
+                // Initialize progress indicator
+                initProgressIndicator();
+                
+                // Initialize download feature
                 initDownloadFeature();
-
-                // Voice selection chain: Language -> Model -> Voice Dropdown
-                languageSelect.addEventListener('change', loadVoices);
-                modelSelect.addEventListener('change', populateVoiceSelectorDropdown); // Model change repopulates specific voices
-                voiceSelectorDropdown.addEventListener('change', handleVoiceSelectionChange); // User picks a specific voice
-
-                rateSelect.addEventListener('change', updateCostEstimator); // Cost might depend on features tied to rate (though not directly for Google basic)
-                pitchSelect.addEventListener('change', updateCostEstimator);
-
-
-                playVoiceSample.addEventListener('click', () => {
-                    if (selectedVoiceObject) playSample(selectedVoiceObject); else showToast('Select a voice first.', 'info');
+                
+                // Event listeners to update cost estimates
+                modelSelect.addEventListener('change', (e) => {
+                    updateCostEstimator();
+                    filterVoicesByModel(e.target.value);
                 });
-
-                // NEW Synthesis and Playback buttons
-                synthesizeBtn.addEventListener('click', startFullSynthesis);
-                playAudioBtn.addEventListener('click', handlePlayPauseAudio); // For playing already synthesized audio
-                stopBtn.addEventListener('click', handleStopAll);
-
-                // File and text input
-                uploadBtn.addEventListener('click', () => fileInput.click());
-                fileInput.addEventListener('change', (e) => { if (e.target.files.length > 0) handleFile(e.target.files[0]); });
-                pasteBtn.addEventListener('click', handlePaste);
-                setupDragAndDrop();
-
-                refreshVoicesBtn.addEventListener('click', loadVoices);
-                saveKeyBtn.addEventListener('click', saveApiKey);
-
-                // Library and Notes
-                notesTextarea.addEventListener('input', () => currentNotes = notesTextarea.value);
-                saveToLibraryBtn.addEventListener('click', handleSaveToLibrary);
-                viewLibraryBtn.addEventListener('click', openLibraryModal);
-                closeLibraryModalBtn.addEventListener('click', closeLibraryModal);
-                libraryModal.addEventListener('click', (e) => { if (e.target === libraryModal) closeLibraryModal(); });
-                documentContentEl.addEventListener('click', handleParagraphClickForBookmark);
-
-                updateAllControlButtons();
-                updateSynthesisActionStatus();
-                renderLibraryItems();
-            }
-
-            // --- Audio Context (Existing) ---
-            function initAudioContext() { /* ... same as before ... */ }
-
-            // --- Dark Mode (Existing) ---
-            function initDarkMode() { /* ... same as before ... */ }
-            function toggleDarkMode() { /* ... same as before ... */ }
-
-            // --- Progress Indicator & Seeking (For Playback - Existing) ---
-            function initProgressIndicator() { /* ... same as before, targets playback progress bar ... */ }
-            function seekToTime(time) { /* ... same as before, for seeking in audioBuffer ... */ }
-
-            // --- Download (Existing, uses currentAudioBlob) ---
-            function initDownloadFeature() { /* ... same as before ... */ }
-            async function downloadCurrentAudio() { /* ... same as before ... */ }
-
-            // --- Toast Notifications (Existing) ---
-            function showToast(message, type = 'info', duration = 3000) { /* ... same as before ... */ }
-
-            // --- File Utilities (Existing) ---
-            function formatFileSize(bytes) { /* ... same as before ... */ }
-
-            // --- UI Updates (Status, Cost) ---
-            function updateSynthesisActionStatus(message = "") {
-                if (isSynthesizing) {
-                    synthesisActionStatus.textContent = message || `Synthesizing audio...`;
-                } else if (audioBuffer && !isPlaying && !isPaused) {
-                    synthesisActionStatus.textContent = "Synthesis complete. Ready to play or download.";
-                } else if (isPlaying && !isPaused) {
-                    synthesisActionStatus.textContent = "Playing audio...";
-                } else if (isPaused) {
-                    synthesisActionStatus.textContent = "Playback paused.";
-                } else if (!apiKey) {
-                    synthesisActionStatus.textContent = "API key needed.";
-                } else if (availableVoices.length === 0) {
-                    synthesisActionStatus.textContent = "Loading voices or no voices available for language/model.";
-                } else if (!selectedVoiceObject) {
-                    synthesisActionStatus.textContent = "Select a specific voice.";
-                } else if (!currentText.trim()) {
-                    synthesisActionStatus.textContent = "Load or paste document text.";
-                } else {
-                    synthesisActionStatus.textContent = "Ready to synthesize.";
-                }
-            }
-
-            function getVoiceTypeAndPricing(voiceName) { /* ... same as before ... */ }
-            function calculateEstimatedCost(textLength, voiceTypeInfo) { /* ... same as before ... */ }
-            function updateCostEstimator() {
-                // This function now relies on selectedVoiceObject
-                if (!selectedVoiceObject || !currentText.trim()) {
-                    costEstimatorEl.classList.add('hidden');
-                    return;
-                }
-                // ... rest of the logic is similar, using selectedVoiceObject.name
-                 const voiceInfo = getVoiceTypeAndPricing(selectedVoiceObject.name);
-                 const est = calculateEstimatedCost(currentText.length, voiceInfo);
-                 costEstimatorEl.classList.remove('hidden');
-
-                if (!costEstimatorEl.querySelector('#estimatedCost')) {
-                    costEstimatorEl.innerHTML = `
-                        <div class="flex items-center justify-between">
-                            <div class="flex items-center"> <i class="fas fa-calculator mr-2"></i> <span class="text-sm font-medium">Estimated Cost:</span> </div>
-                            <div class="text-right"> <div class="text-lg font-bold" id="estimatedCost">$0.00</div> <div class="text-xs" id="costDetails">0 chars</div> </div>
-                        </div>
-                        <div class="mt-2 text-xs flex justify-between items-center">
-                            <div> <span id="voiceTypeEst">Standard voice</span> • <span id="priceRateEst">$4.00/M chars</span> </div>
-                            <button id="showCostBreakdownInner" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline"> <i class="fas fa-info-circle mr-1"></i> Pricing Info </button>
-                        </div>`;
-                    costEstimatorEl.querySelector('#showCostBreakdownInner')?.addEventListener('click', showCostBreakdownModal);
-                }
-
-                costEstimatorEl.querySelector('#estimatedCost').textContent = `$${est.cost.toFixed(4)}`;
-                costEstimatorEl.querySelector('#costDetails').textContent = est.details;
-                costEstimatorEl.querySelector('#voiceTypeEst').textContent = `${voiceInfo.name} voice`;
-                costEstimatorEl.querySelector('#priceRateEst').textContent = `$${voiceInfo.rate.toFixed(2)}/M chars`;
-                // ... color coding logic ...
-            }
-            function showCostBreakdownModal() { /* ... same as before, ensure it uses selectedVoiceObject if needed ... */ }
-
-            // --- API Key Management (Existing) ---
-            async function saveApiKey() { /* ... same as before ... */ }
-
-            // --- Voice Loading & Selection - REWORKED ---
-            async function loadVoices() {
-                if (!apiKey) {
-                    updateVoiceStatusDisplay("API key required.", "Enter API key to load voices.");
-                    clearVoiceSelector();
-                    availableVoices = [];
-                    selectedVoiceObject = null;
-                    updateAllControlButtons();
-                    updateSynthesisActionStatus();
-                    return;
-                }
-                updateVoiceStatusDisplay("Loading voices...", "Please wait...");
-                playVoiceSample.disabled = true;
-                refreshVoicesBtn.disabled = true;
-                const loadingIcon = refreshVoicesBtn.querySelector('i');
-                if (loadingIcon) loadingIcon.classList.add('fa-spin');
-
-                try {
-                    const languageCode = languageSelect.value;
-                    const response = await fetch(`https://texttospeech.googleapis.com/v1/voices?languageCode=${languageCode}`, {
-                        method: 'GET', headers: { 'X-Goog-Api-Key': apiKey, 'Accept': 'application/json' },
-                        mode: 'cors', cache: 'no-cache'
-                    });
-                    if (!response.ok) {
-                        const errorData = await response.json().catch(() => null);
-                        throw new Error(`API error (${response.status}): ${errorData?.error?.message || 'Failed to load voices'}`);
-                    }
-                    const data = await response.json();
-                    if (!data || !data.voices || data.voices.length === 0) {
-                        throw new Error('No voices returned for the selected language.');
-                    }
-                    availableVoices = data.voices;
-                    showToast(`Loaded ${availableVoices.length} voices for ${languageCode}.`, 'success');
-                    populateVoiceSelectorDropdown(); // This will also try to select a default
-                } catch (error) {
-                    console.error('Error loading voices:', error);
-                    updateVoiceStatusDisplay("Error loading voices", error.message.substring(0, 100));
-                    clearVoiceSelector();
-                    availableVoices = [];
-                    selectedVoiceObject = null;
-                    showToast('Failed to load voices: ' + error.message, 'error', 5000);
-                } finally {
-                    refreshVoicesBtn.disabled = false;
-                    if (loadingIcon) loadingIcon.classList.remove('fa-spin');
-                    updateAllControlButtons();
-                    updateSynthesisActionStatus();
-                }
-            }
-
-            function populateVoiceSelectorDropdown() {
-                clearVoiceSelector();
-                const currentModelType = modelSelect.value.toLowerCase(); // e.g. "standard", "wavenet"
-
-                const filteredVoices = availableVoices.filter(voice => {
-                    const voiceNameLower = voice.name.toLowerCase();
-                    // Check if voice name contains model type (e.g., "en-US-Standard-C" for "standard")
-                    // Or, for "standard" model, accept voices that don't explicitly state Wavenet, Neural2, Studio
-                    if (currentModelType === "standard") {
-                        return !voiceNameLower.includes("wavenet") && !voiceNameLower.includes("neural2") && !voiceNameLower.includes("studio");
+                
+                voiceSelect.addEventListener('change', (e) => {
+                    const selectedVoiceName = e.target.value;
+                    if (selectedVoiceName) {
+                        selectedVoice = availableVoices.find(voice => voice.name === selectedVoiceName);
+                        updateSelectedVoice();
+                        updateCostEstimator();
                     }
-                    return voiceNameLower.includes(currentModelType);
                 });
-
-                if (filteredVoices.length === 0) {
-                    voiceSelectorDropdown.options.add(new Option(`No ${modelSelect.options[modelSelect.selectedIndex].text} voices found`, ""));
-                    selectedVoiceObject = null;
-                    updateVoiceStatusDisplay("No voices match criteria.", "Try different language/model.");
-                    updateAllControlButtons();
-                    return;
-                }
-
-                filteredVoices.forEach(voice => {
-                    // Create a more descriptive name: e.g., "Wavenet D (Male)" or "Standard C (Female)"
-                    let displayName = voice.name.replace(`${languageSelect.value}-`, ''); // Remove lang prefix
-                    displayName = displayName.replace(/Standard-|Wavenet-|Neural2-|Studio-/i, ''); // Remove type prefix
-                    displayName = `${displayName.replace(/-/g, ' ')} (${voice.ssmlGender === 'MALE' ? 'M' : voice.ssmlGender === 'FEMALE' ? 'F' : 'N'})`;
-                    voiceSelectorDropdown.options.add(new Option(displayName, voice.name));
-                });
-
-                // Try to pre-select a voice (e.g., first one, or a default if applicable)
-                if (voiceSelectorDropdown.options.length > 1) { // more than just the "-- Select --"
-                     // Attempt to select a previously selected voice if it's still in the list
-                    if (selectedVoiceObject && filteredVoices.some(v => v.name === selectedVoiceObject.name)) {
-                        voiceSelectorDropdown.value = selectedVoiceObject.name;
-                    } else {
-                         // Try to find a default standard male voice if model is standard
-                        let defaultSelected = false;
-                        if (currentModelType === "standard") {
-                            for (const preferredName of defaultStandardMaleVoices) {
-                                if (filteredVoices.some(v => v.name === preferredName)) {
-                                    voiceSelectorDropdown.value = preferredName;
-                                    defaultSelected = true;
-                                    break;
-                                }
-                            }
-                        }
-                        if(!defaultSelected) voiceSelectorDropdown.selectedIndex = 1; // Select the first actual voice
-                    }
-                }
-                handleVoiceSelectionChange(); // Update based on (auto)selection
+                
+                rateSelect.addEventListener('change', updateCostEstimator);
+                pitchSelect.addEventListener('change', updateCostEstimator);
+                
+                document.getElementById('showCostBreakdown')?.addEventListener('click', showCostBreakdownModal);
             }
-
-            function handleVoiceSelectionChange() {
-                const selectedName = voiceSelectorDropdown.value;
-                if (selectedName) {
-                    selectedVoiceObject = availableVoices.find(v => v.name === selectedName);
-                    if (selectedVoiceObject) {
-                        updateVoiceStatusDisplay();
-                        updateCostEstimator();
-                    } else {
-                        selectedVoiceObject = null; // Should not happen if populated correctly
-                        updateVoiceStatusDisplay("Error selecting voice.", "");
-                    }
+            
+            // Voice type and pricing functions
+            function getVoiceTypeAndPricing(voiceName) {
+                const name = voiceName.toLowerCase();
+                if (name.includes('studio')) {
+                    return { type: 'studio', name: 'Studio', rate: PRICING.studio };
+                } else if (name.includes('wavenet')) {
+                    return { type: 'wavenet', name: 'WaveNet', rate: PRICING.wavenet };
+                } else if (name.includes('neural2')) {
+                    return { type: 'neural2', name: 'Neural2', rate: PRICING.neural2 };
                 } else {
-                    selectedVoiceObject = null;
-                    updateVoiceStatusDisplay("No voice selected.", "Please pick a voice from the dropdown.");
+                    return { type: 'standard', name: 'Standard', rate: PRICING.standard };
                 }
-                updateAllControlButtons();
-                updateSynthesisActionStatus();
             }
-
-            function clearVoiceSelector() {
-                voiceSelectorDropdown.innerHTML = '<option value="">-- Select a voice --</option>';
-                selectedVoiceObject = null;
+            
+            function calculateEstimatedCost(textLength, voiceType) {
+                if (!textLength || !voiceType) return { cost: 0, details: '' };
+                
+                const pricePerMillion = voiceType.rate;
+                const cost = (textLength / 1000000) * pricePerMillion;
+                
+                return {
+                    cost: cost,
+                    details: `${textLength.toLocaleString()} characters`
+                };
             }
-
-            function updateVoiceStatusDisplay(nameOverride = null, detailsOverride = null) {
-                if (nameOverride) {
-                    currentVoiceName.textContent = nameOverride;
-                    currentVoiceDetails.textContent = detailsOverride || "";
-                    playVoiceSample.disabled = true;
+            
+            function updateCostEstimator() {
+                const costEstimator = document.getElementById('costEstimator');
+                const estimatedCost = document.getElementById('estimatedCost');
+                const costDetails = document.getElementById('costDetails');
+                const voiceTypeEl = document.getElementById('voiceType');
+                const priceRateEl = document.getElementById('priceRate');
+                
+                if (!selectedVoice || !currentText.trim()) {
+                    costEstimator.classList.add('hidden');
                     return;
                 }
-                if (selectedVoiceObject) {
-                    const displayName = selectedVoiceObject.name.replace(`${languageSelect.value}-`, '').replace(/-/g, ' ');
-                    currentVoiceName.textContent = displayName;
-                    const voiceTypeInfo = getVoiceTypeAndPricing(selectedVoiceObject.name);
-                    const gender = selectedVoiceObject.ssmlGender === 'MALE' ? '♂ Male' : selectedVoiceObject.ssmlGender === 'FEMALE' ? '♀ Female' : 'Neutral';
-                    currentVoiceDetails.textContent = `${gender} • ${voiceTypeInfo.name} • $${voiceTypeInfo.rate.toFixed(2)}/M chars`;
-                    playVoiceSample.disabled = false;
+                
+                const voiceType = getVoiceTypeAndPricing(selectedVoice.name);
+                const estimation = calculateEstimatedCost(currentText.length, voiceType);
+                
+                costEstimator.classList.remove('hidden');
+                
+                estimatedCost.textContent = `$${estimation.cost.toFixed(4)}`;
+                costDetails.textContent = estimation.details;
+                voiceTypeEl.textContent = `${voiceType.name} voice`;
+                priceRateEl.textContent = `$${voiceType.rate.toFixed(2)}/million chars`;
+                
+                // Color code based on cost
+                if (estimation.cost < 0.10) {
+                    costEstimator.className = 'mb-4 p-3 bg-green-100 border border-green-200 rounded-lg';
+                    estimatedCost.className = 'text-lg font-bold text-green-900';
+                } else if (estimation.cost < 1.00) {
+                    costEstimator.className = 'mb-4 p-3 bg-blue-100 border border-blue-200 rounded-lg';
+                    estimatedCost.className = 'text-lg font-bold text-blue-900';
+                } else if (estimation.cost < 5.00) {
+                    costEstimator.className = 'mb-4 p-3 bg-yellow-100 border border-yellow-200 rounded-lg';
+                    estimatedCost.className = 'text-lg font-bold text-yellow-900';
                 } else {
-                    currentVoiceName.textContent = "No voice selected";
-                    currentVoiceDetails.textContent = "Select language, model, and specific voice.";
-                    playVoiceSample.disabled = true;
-                }
-            }
-
-            // --- TTS Synthesis & Playback Sample (Largely existing, uses selectedVoiceObject) ---
-            async function playSample(voiceObj) {
-                if (!apiKey) { showToast('API key required.', 'error'); return; }
-                if (isSynthesizing || isPlaying) handleStopAll(); // Stop current activity
-
-                const btnOrig = playVoiceSample.innerHTML;
-                playVoiceSample.innerHTML = '<div class="loading-spinner inline-block w-3 h-3"></div>';
-                playVoiceSample.disabled = true;
-                let sampleAudioSource = null; // Local source for sample
-
-                try {
-                    const sampleText = "Hello, this is a sample of my voice.";
-                    const audioB64 = await callSynthesizeSpeechAPI(sampleText, voiceObj, parseFloat(rateSelect.value), parseFloat(pitchSelect.value), getVoiceTypeAndPricing(voiceObj.name).type);
-
-                    if (!initAudioContext()) { showToast("Audio system not ready.", "error"); return; }
-                    const audioBytes = Uint8Array.from(atob(audioB64), c => c.charCodeAt(0));
-                    const decodedSampleBuffer = await audioContext.decodeAudioData(audioBytes.buffer.slice(0));
-
-                    sampleAudioSource = audioContext.createBufferSource();
-                    sampleAudioSource.buffer = decodedSampleBuffer;
-                    sampleAudioSource.connect(audioContext.destination);
-                    sampleAudioSource.start(0);
-                    sampleAudioSource.onended = () => {
-                        playVoiceSample.innerHTML = btnOrig;
-                        playVoiceSample.disabled = false;
-                    };
-                } catch (err) {
-                    console.error('Sample error:', err);
-                    showToast('Sample failed: ' + err.message, 'error');
-                    playVoiceSample.innerHTML = btnOrig;
-                    playVoiceSample.disabled = false;
+                    costEstimator.className = 'mb-4 p-3 bg-red-100 border border-red-200 rounded-lg';
+                    estimatedCost.className = 'text-lg font-bold text-red-900';
                 }
             }
-
-            function showSynthesisProgressUI(progress) { // For the main synthesis progress bar
-                synthesisProgressEl.classList.remove('hidden');
-                progressPercentageEl.textContent = `${Math.round(progress)}%`;
-                synthesisProgressBarInner.style.width = `${progress}%`;
-            }
-            function hideSynthesisProgressUI() {
-                synthesisProgressEl.classList.add('hidden');
-                progressPercentageEl.textContent = `0%`;
-                synthesisProgressBarInner.style.width = `0%`;
-            }
-
-            // Renamed from synthesizeSpeech to avoid confusion with the new startFullSynthesis
-            async function callSynthesizeSpeechAPI(text, voiceConfigObj, rate = 1, pitch = 0, model = 'standard') {
-                // ... (This is the actual API call logic, same as previous synthesizeSpeech)
-                // Ensure it uses voiceConfigObj.name and voiceConfigObj.languageCodes[0]
-                 if (!apiKey) throw new Error('API key not provided.');
-                if (!text || !text.trim()) throw new Error('No text for synthesis.');
-                if (!voiceConfigObj) throw new Error('Voice config not provided.');
-                const reqBody = {
-                    input: { text: text.trim() },
-                    voice: { languageCode: voiceConfigObj.languageCodes[0], name: voiceConfigObj.name },
-                    audioConfig: { audioEncoding: 'MP3', speakingRate: Math.max(0.25, Math.min(4.0, rate)), pitch: Math.max(-20.0, Math.min(20.0, pitch)) }
-                };
-                // Studio voice effect (example, check docs)
-                // if (model.toLowerCase() === 'studio' && voiceConfigObj.name.toLowerCase().includes('studio')) {
-                //     reqBody.audioConfig.effectsProfileId = ['telephony-class-application'];
-                // }
-                const url = `https://texttospeech.googleapis.com/v1/text:synthesize`;
-                let res;
-                try {
-                    res = await fetch(url, { method: 'POST', headers: { 'X-Goog-Api-Key': apiKey, 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(reqBody), mode: 'cors', cache: 'no-cache' });
-                } catch (netErr) { // Fallback for restrictive environments
-                    console.warn("Primary API call failed, fallback with key in URL:", netErr);
-                    const fbUrl = `https://texttospeech.googleapis.com/v1/text:synthesize?key=${encodeURIComponent(apiKey)}`;
-                    res = await fetch(fbUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(reqBody), mode: 'cors', cache: 'no-cache' });
-                }
-                if (!res.ok) {
-                    let errMsg = `TTS API failed (HTTP ${res.status})`;
-                    try { const errD = await res.json(); errMsg = errD.error?.message || errMsg; if (errD.error?.details) errMsg += ` Details: ${JSON.stringify(errD.error.details)}`; } catch (e) { /*ignore*/ }
-                    throw new Error(errMsg);
-                }
-                const data = await res.json();
-                if (!data || !data.audioContent) throw new Error('Invalid TTS API response: no audio content.');
-                return data.audioContent; // base64 string
+            
+            // Filter voices by selected model
+            function filterVoicesByModel(model) {
+                const filteredVoices = availableVoices.filter(voice => {
+                    const voiceType = getVoiceTypeAndPricing(voice.name);
+                    return voiceType.type === model;
+                });
+                
+                populateVoiceDropdown(filteredVoices);
+                selectDefaultMaleVoice(filteredVoices, model);
             }
-
-
-            // --- NEW Main Synthesis Logic ---
-            async function startFullSynthesis() {
-                if (!selectedVoiceObject) { showToast('Please select a specific voice.', 'info'); return; }
-                if (!currentText.trim()) { showToast('No document content to synthesize.', 'info'); return; }
-                if (isSynthesizing) { showToast('Synthesis already in progress.', 'info'); return; }
-                if (isPlaying || isPaused) handleStopAll(); // Stop current playback before new synthesis
-
-                isSynthesizing = true;
-                synthesisCancelled = false;
-                audioBuffer = null; // Clear previous buffer
-                currentAudioBlob = null; // Clear previous blob
-                updateAllControlButtons();
-                showSynthesisProgressUI(0);
-                updateSynthesisActionStatus("Starting synthesis...");
-
-                try {
-                    const chunks = splitTextIntoChunks(currentText, MAX_CHUNK_SIZE);
-                    if (chunks.length === 0) {
-                        showToast('Nothing to synthesize.', 'info');
-                        throw new Error("Empty content after chunking.");
-                    }
-
-                    const allAudioBase64Data = [];
-                    for (let i = 0; i < chunks.length; i++) {
-                        if (synthesisCancelled) {
-                            showToast('Synthesis cancelled by user.', 'info');
-                            throw new Error("Synthesis Cancelled");
-                        }
-                        updateSynthesisActionStatus(`Synthesizing chunk ${i + 1} of ${chunks.length}...`);
-                        const audioData = await callSynthesizeSpeechAPI(
-                            chunks[i], selectedVoiceObject,
-                            parseFloat(rateSelect.value), parseFloat(pitchSelect.value),
-                            modelSelect.value // Use the general model type here
-                        );
-                        allAudioBase64Data.push(audioData);
-                        showSynthesisProgressUI(((i + 1) / chunks.length) * 100);
-                    }
-
-                    if (synthesisCancelled) return; // Double check
-
-                    // Combine and decode all chunks
-                    updateSynthesisActionStatus("Finalizing audio...");
-                    if (!initAudioContext()) throw new Error("Audio system not ready.");
-
-                    const allByteArrays = allAudioBase64Data.map(b64 => Uint8Array.from(atob(b64), c => c.charCodeAt(0)));
-                    let totalBlobLength = 0; allByteArrays.forEach(ba => totalBlobLength += ba.length);
-                    const combinedBlobBytes = new Uint8Array(totalBlobLength);
-                    let blobOffset = 0;
-                    for (const byteArray of allByteArrays) {
-                        combinedBlobBytes.set(byteArray, blobOffset);
-                        blobOffset += byteArray.length;
-                    }
-                    currentAudioBlob = new Blob([combinedBlobBytes], { type: 'audio/mpeg' });
-
-                    const decodedBuffersPromises = allByteArrays.map(byteArray =>
-                        audioContext.decodeAudioData(byteArray.buffer.slice(byteArray.byteOffset, byteArray.byteOffset + byteArray.byteLength))
-                    );
-                    const decodedBuffers = await Promise.all(decodedBuffersPromises);
-
-                    if (decodedBuffers.length === 0) throw new Error("Failed to decode any audio chunks.");
-                    const totalLength = decodedBuffers.reduce((sum, buffer) => sum + buffer.length, 0);
-                    const numChannels = decodedBuffers[0].numberOfChannels;
-                    const sampleRate = decodedBuffers[0].sampleRate;
-                    const concatenatedBuffer = audioContext.createBuffer(numChannels, totalLength, sampleRate);
-                    let currentBufferOffset = 0;
-                    for (const buffer of decodedBuffers) {
-                        for (let channel = 0; channel < numChannels; channel++) {
-                            concatenatedBuffer.copyToChannel(buffer.getChannelData(channel), channel, currentBufferOffset);
+            
+            // Find and select default male voice
+            function selectDefaultMaleVoice(voices, model) {
+                if (!voices.length) return;
+                
+                // For standard model, use specific preferred voices
+                if (model === 'standard') {
+                    for (const preferredVoice of defaultStandardMaleVoices) {
+                        const voice = voices.find(v => v.name === preferredVoice);
+                        if (voice) {
+                            selectVoice(voice);
+                            return voice;
                         }
-                        currentBufferOffset += buffer.length;
                     }
-                    audioBuffer = concatenatedBuffer; // Audio is ready!
-
-                    showToast('Synthesis complete! Ready to play.', 'success');
-
-                } catch (error) {
-                    if (!synthesisCancelled) { // Don't show error if user cancelled
-                        console.error('Error during full synthesis:', error);
-                        showToast('Synthesis error: ' + error.message, 'error', 5000);
-                    }
-                    audioBuffer = null;
-                    currentAudioBlob = null;
-                } finally {
-                    isSynthesizing = false;
-                    hideSynthesisProgressUI();
-                    updateAllControlButtons();
-                    updateSynthesisActionStatus(); // Update to "Ready to play" or error state
                 }
-            }
-
-
-            // --- Main Playback Logic (Plays pre-synthesized audioBuffer) ---
-            function handlePlayPauseAudio() {
-                if (!audioBuffer) { showToast("No audio synthesized yet. Click 'Synthesize Audio' first.", 'info'); return; }
-                if (!initAudioContext()) { showToast("Audio system not ready.", "error"); return; }
-
-                if (isPlaying && !isPaused) { // Currently playing, so pause
-                    pauseAudioPlayback();
-                } else if (isPaused) { // Currently paused, so resume
-                    resumeAudioPlayback();
-                } else { // Not playing, so start from beginning of audioBuffer
-                    startAudioPlayback();
+                
+                // Fallback to first male voice of the selected model
+                const maleVoice = voices.find(v => v.ssmlGender === 'MALE');
+                if (maleVoice) {
+                    selectVoice(maleVoice);
+                    return maleVoice;
+                }
+                
+                // Final fallback to any voice of the selected model
+                if (voices.length > 0) {
+                    selectVoice(voices[0]);
+                    return voices[0];
                 }
+                
+                return null;
             }
-
-            function startAudioPlayback() {
-                if (!audioBuffer || !audioContext) return;
-                if (audioSource) audioSource.stop(); // Stop any previous
-
-                audioSource = audioContext.createBufferSource();
-                audioSource.buffer = audioBuffer;
-                audioSource.connect(audioContext.destination);
-
-                isPlaying = true;
-                isPaused = false;
-                pausedAtTime = 0; // Start from beginning
-                playbackStartTime = audioContext.currentTime;
-
-                audioSource.start(0, pausedAtTime);
-                startProgressTracking(); // For playback progress bar
-                updateAllControlButtons();
-                updateSynthesisActionStatus();
-
-                audioSource.onended = () => {
-                    if (isPlaying && !isPaused) { // Natural end
-                        handleStopAll(false); // Don't show "stopped by user"
-                    }
-                };
+            
+            function selectVoice(voice) {
+                selectedVoice = voice;
+                voiceSelect.value = voice.name;
+                updateSelectedVoice();
+                updateCostEstimator();
             }
-
-            function pauseAudioPlayback() {
-                if (!audioContext || !audioSource || !isPlaying || isPaused) return;
-                audioContext.suspend().then(() => {
-                    pausedAtTime += audioContext.currentTime - playbackStartTime;
-                    isPaused = true;
-                    if (animationFrameId) cancelAnimationFrame(animationFrameId);
-                    updateAllControlButtons();
-                    updateSynthesisActionStatus();
-                    // showToast('Playback paused.', 'info', 1500);
-                });
+            
+            function updateSelectedVoice() {
+                if (selectedVoice) {
+                    selectedVoiceName.textContent = selectedVoice.name;
+                } else {
+                    selectedVoiceName.textContent = 'None';
+                }
             }
-
-            function resumeAudioPlayback() {
-                if (!audioContext || !audioSource || !isPlaying || !isPaused) return;
-                audioContext.resume().then(() => {
-                    playbackStartTime = audioContext.currentTime; // Reset for elapsed calculation
-                    isPaused = false;
-
-                    // Recreate source if it was stopped completely by a previous full stop
-                    // For simple pause/resume with suspend/resume, source might still be valid if not explicitly stopped.
-                    // However, to be safe, especially if stop logic fully nullifies audioSource:
-                    if (!audioSource || audioSource.playbackState === AudioBufferSourceNode.FINISHED_STATE) {
-                         audioSource = audioContext.createBufferSource();
-                         audioSource.buffer = audioBuffer;
-                         audioSource.connect(audioContext.destination);
+            
+            // Cost breakdown modal
+            function showCostBreakdownModal() {
+                const modal = document.createElement('div');
+                modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+                modal.innerHTML = `
+                    <div class="bg-white rounded-lg p-6 max-w-lg w-full mx-4">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-lg font-semibold text-gray-900">Google TTS Pricing</h3>
+                            <button class="text-gray-400 hover:text-gray-600" onclick="this.parentElement.parentElement.parentElement.remove()">
+                                <i class="fas fa-times text-xl"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="space-y-3">
+                            <div class="bg-green-50 p-3 rounded border border-green-200">
+                                <div class="flex justify-between items-center">
+                                    <span class="font-medium text-green-800">Standard Voices (Default)</span>
+                                    <span class="text-green-900 font-bold">$4.00</span>
+                                </div>
+                                <div class="text-sm text-green-600">per million characters</div>
+                            </div>
+                            
+                            <div class="bg-blue-50 p-3 rounded border border-blue-200">
+                                <div class="flex justify-between items-center">
+                                    <span class="font-medium text-blue-800">WaveNet & Neural2 Voices</span>
+                                    <span class="text-blue-900 font-bold">$16.00</span>
+                                </div>
+                                <div class="text-sm text-blue-600">per million characters</div>
+                            </div>
+                            
+                            <div class="bg-purple-50 p-3 rounded border border-purple-200">
+                                <div class="flex justify-between items-center">
+                                    <span class="font-medium text-purple-800">Studio Voices</span>
+                                    <span class="text-purple-900 font-bold">$160.00</span>
+                                </div>
+                                <div class="text-sm text-purple-600">per million characters</div>
+                            </div>
+                        </div>
+                        
+                        <div class="mt-4 p-3 bg-gray-50 rounded border">
+                            <h4 class="font-medium text-gray-800 mb-2">Current Calculation:</h4>
+                            <div class="text-sm text-gray-600">
+                                ${currentText ? `
+                                    <div>Document: ${currentText.length.toLocaleString()} characters</div>
+                                    ${selectedVoice ? `
+                                        <div>Voice: ${getVoiceTypeAndPricing(selectedVoice.name).name}</div>
+                                        <div>Rate: $${getVoiceTypeAndPricing(selectedVoice.name).rate.toFixed(2)}/million chars</div>
+                                        <div class="font-semibold mt-1">Total: $${calculateEstimatedCost(currentText.length, getVoiceTypeAndPricing(selectedVoice.name)).cost.toFixed(4)}</div>
+                                    ` : '<div>No voice selected</div>'}
+                                ` : '<div>No document loaded</div>'}
+                            </div>
+                        </div>
+                        
+                        <div class="mt-4 text-xs text-gray-500">
+                            <p>* Prices are based on Google Cloud Text-to-Speech API pricing as of 2024.</p>
+                            <p>* Actual costs may vary. Check Google Cloud Console for current pricing.</p>
+                        </div>
+                        
+                        <div class="mt-6 flex justify-end">
+                            <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded" onclick="this.parentElement.parentElement.parentElement.remove()">
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                `;
+                document.body.appendChild(modal);
+                
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) {
+                        modal.remove();
                     }
-
-                    audioSource.start(0, pausedAtTime); // Start from where it was paused
-                    startProgressTracking();
-                    updateAllControlButtons();
-                    updateSynthesisActionStatus();
-                    // showToast('Playback resumed.', 'info', 1500);
-
-                    audioSource.onended = () => { // Re-attach onended
-                        if (isPlaying && !isPaused) {
-                            handleStopAll(false);
-                        }
-                    };
                 });
             }
-
-            function handleStopAll(showMsg = true) {
-                if (isSynthesizing) {
-                    synthesisCancelled = true; // Signal synthesis loop to stop
-                    isSynthesizing = false; // Immediately update state
-                    if(showMsg) showToast('Synthesis cancelled.', 'info');
-                }
-                if (audioSource) {
-                    audioSource.onended = null;
-                    try { audioSource.stop(); } catch (e) { /* ignore if already stopped */ }
-                    audioSource = null;
-                }
-                if (animationFrameId) {
-                    cancelAnimationFrame(animationFrameId);
-                    animationFrameId = null;
-                }
-
-                isPlaying = false;
-                isPaused = false;
-                playbackStartTime = 0;
-                pausedAtTime = 0;
-                // Keep audioBuffer and currentAudioBlob available unless new synthesis starts or content changes
-
-                updateAllControlButtons();
-                updateProgressUI(0, audioBuffer ? audioBuffer.duration : 0); // Reset playback progress
-                documentContentEl.querySelectorAll('.reading-highlight').forEach(el => el.classList.remove('reading-highlight'));
-                currentReadingPosition = 0; readingProgress.style.width = '0%';
-                hideSynthesisProgressUI();
-                updateSynthesisActionStatus(showMsg && !isSynthesizing ? "Stopped." : "");
-            }
-
-            function updateAllControlButtons() {
-                // Synthesis Button
-                synthesizeBtn.disabled = !currentText.trim() || !selectedVoiceObject || isSynthesizing;
-
-                // Play Audio Button
-                if (isPlaying && !isPaused) { // Playing
-                    playAudioBtn.innerHTML = '<i class="fas fa-pause text-lg"></i>'; playAudioBtn.title = "Pause Audio";
-                    playAudioBtn.disabled = false;
-                } else if (isPaused) { // Paused
-                    playAudioBtn.innerHTML = '<i class="fas fa-play text-lg"></i>'; playAudioBtn.title = "Resume Audio";
-                    playAudioBtn.disabled = false;
-                } else { // Stopped or initial, or synthesis complete
-                    playAudioBtn.innerHTML = '<i class="fas fa-play text-lg"></i>'; playAudioBtn.title = "Play Audio";
-                    playAudioBtn.disabled = !audioBuffer || isSynthesizing; // Enabled if buffer exists and not synthesizing
-                }
-
-                // Stop Button
-                stopBtn.disabled = !isPlaying && !isPaused && !isSynthesizing;
-
-                // Download Button
-                downloadBtn.disabled = !currentAudioBlob || isSynthesizing;
-
-                // Sample Button
-                playVoiceSample.disabled = !selectedVoiceObject || isSynthesizing || isPlaying || isPaused;
-            }
-
-
-            // --- Progress Tracking & UI Update (For Playback - Existing) ---
-            // let animationFrameId = null; // Already declared
-            function startProgressTracking() { /* ... same as before ... */ }
-            function updateProgressUI(currentPlayTime, duration) { /* ... same as before ... */ }
-            function updateReadingHighlight() { /* ... same as before ... */ }
-            function formatTime(totalSeconds) { /* ... same as before ... */ }
-
-            // --- File Input & Processing (setDocumentContent resets audio states) ---
-            function setupDragAndDrop() { /* ... same as before ... */ }
-            function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); }
-            function handlePaste() { /* ... same as before ... */ }
-            function handleFile(file) { /* ... same as before ... */ }
-            function readTextFile(file) { /* ... same as before ... */ }
-            async function readPDFFile(file) { /* ... same as before ... */ }
-            async function readWordDocument(file) { /* ... same as before ... */ }
-            function readHTMLFile(file) { /* ... same as before ... */ }
-            // Other basic readers: readRTFFile, readMarkdownFile, etc. (same)
-
-            function setDocumentContent(text, notes = '', bookmarks = []) {
-                handleStopAll(false); // Stop any activity and clear states before loading new content
-                audioBuffer = null;
-                currentAudioBlob = null;
-
-                currentText = text.trim();
-                currentNotes = notes;
-                notesTextarea.value = currentNotes;
-                currentBookmarks = bookmarks;
-
-                documentContentEl.innerHTML = currentText.split(/\r\n|\r|\n/)
-                    .map((line, index) => {
-                        const isBookmarked = currentBookmarks.includes(index);
-                        return `<p data-paragraph-index="${index}" class="${isBookmarked ? 'bookmarked' : ''}">${line.trim() || '&nbsp;'}<span class="bookmark-icon"><i class="fas ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}"></i></span></p>`;
-                    })
-                    .join('');
-                charCount.textContent = `${currentText.length.toLocaleString()} characters`;
-
-                if (currentText.length > 1000000) showToast('Doc >1M chars. Consider splitting.', 'info', 5000);
-
-                updateCostEstimator();
-                updateAllControlButtons();
-                updateSynthesisActionStatus();
-                updateProgressUI(0,0); // Reset playback progress display
-            }
-
-            function splitTextIntoChunks(text, chunkSize) { /* ... same as before ... */ }
-
-            // --- Notes & Bookmarking Logic (Existing) ---
-            function handleParagraphClickForBookmark(event) { /* ... same as before ... */ }
-
-            // --- Library Logic (Existing - loadFromLibrary needs to set voice and then user synthesizes) ---
-            function getLibrary() { /* ... same as before ... */ }
-            function saveLibrary(library) { /* ... same as before ... */ }
-            function handleSaveToLibrary() { /* ... same as before, saves selectedVoiceObject.name ... */ }
-            function renderLibraryItems() { /* ... same as before ... */ }
-            function loadFromLibrary(itemId) {
-                const library = getLibrary();
-                const item = library.find(entry => entry.id === itemId);
-                if (item) {
-                    setDocumentContent(item.text, item.notes || '', item.bookmarks || []); // This also stops audio and clears buffers
-
-                    if (item.voiceSettings) {
-                        languageSelect.value = item.voiceSettings.languageCode || 'en-US';
-                        modelSelect.value = item.voiceSettings.model || 'standard';
-                        // Important: loadVoices will trigger populateVoiceSelectorDropdown,
-                        // which will then try to select the specific voice.
-                        loadVoices().then(() => {
-                            if (item.voiceSettings.voiceName) {
-                                const voiceExists = Array.from(voiceSelectorDropdown.options).some(opt => opt.value === item.voiceSettings.voiceName);
-                                if (voiceExists) {
-                                    voiceSelectorDropdown.value = item.voiceSettings.voiceName;
-                                } else {
-                                    showToast(`Voice "${item.voiceSettings.voiceName}" not found for current language/model. Select manually.`, 'info', 4000);
-                                    // voiceSelectorDropdown will have a default selected by populateVoiceSelectorDropdown
-                                }
-                            }
-                            handleVoiceSelectionChange(); // Ensure selectedVoiceObject is updated
-
-                            rateSelect.value = item.voiceSettings.rate || 1;
-                            pitchSelect.value = item.voiceSettings.pitch || 0;
-                            updateCostEstimator();
-                            updateAllControlButtons();
-                            updateSynthesisActionStatus("Settings loaded. Click 'Synthesize Audio'.");
-                        });
-                    }
-                    showToast(`Loaded "${item.title}". Synthesize to hear audio.`, 'success');
-                    closeLibraryModal();
-                } else {
-                    showToast('Error: Item not found in library.', 'error');
+            
+            function initAudioContext() {
+                try {
+                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                } catch (e) {
+                    console.error('Web Audio API not supported', e);
+                    showToast('Your browser does not support the Web Audio API. Please use Chrome or Edge.', 'error');
                 }
             }
-            function deleteFromLibrary(itemId) { /* ... same as before ... */ }
-            function openLibraryModal() { /* ... same as before ... */ }
-            function closeLibraryModal() { /* ... same as before ... */ }
-
-
-            // --- Initialize the application ---
-            init();
-             // Helper functions from previous versions (ensure they are defined or simplified)
-            const defaultStandardMaleVoices = [
-                'en-US-Standard-D', 'en-US-Standard-B', 'en-US-Standard-A', 'en-US-Standard-I',
-                'en-GB-Standard-B', 'en-GB-Standard-D', 'en-GB-Standard-A',
-                'en-AU-Standard-B', 'en-AU-Standard-D', 'en-AU-Standard-A'
-            ]; // Ensure this is defined
+            
+            // Dark Mode Implementation
             function initDarkMode() {
                 const savedTheme = localStorage.getItem('theme');
                 const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                const root = document.documentElement;
-                const icon = darkModeToggle.querySelector('i');
-
-                if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
-                    root.setAttribute('data-theme', 'dark');
-                    icon.className = 'fas fa-sun text-xl';
+                
+                if (savedTheme) {
+                    document.documentElement.setAttribute('data-theme', savedTheme);
+                    updateDarkModeIcon(savedTheme === 'dark');
+                } else if (systemPrefersDark) {
+                    document.documentElement.setAttribute('data-theme', 'dark');
+                    updateDarkModeIcon(true);
                 } else {
-                    root.setAttribute('data-theme', 'light');
-                    icon.className = 'fas fa-moon text-xl';
+                    document.documentElement.setAttribute('data-theme', 'light');
+                    updateDarkModeIcon(false);
                 }
+                
                 darkModeToggle.addEventListener('click', toggleDarkMode);
             }
-
+            
             function toggleDarkMode() {
-                const root = document.documentElement;
-                const currentTheme = root.getAttribute('data-theme');
+                const currentTheme = document.documentElement.getAttribute('data-theme');
                 const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-                const icon = darkModeToggle.querySelector('i');
-
-                root.setAttribute('data-theme', newTheme);
+                
+                document.documentElement.setAttribute('data-theme', newTheme);
                 localStorage.setItem('theme', newTheme);
-                icon.className = newTheme === 'dark' ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl';
+                updateDarkModeIcon(newTheme === 'dark');
+            }
+            
+            function updateDarkModeIcon(isDark) {
+                const icon = darkModeToggle.querySelector('i');
+                icon.className = isDark ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl';
             }
+            
+            // Progress indicator initialization
             function initProgressIndicator() {
                 progressContainer.addEventListener('click', (e) => {
-                    if (!audioBuffer || !isPlaying) return;
+                    if (!audioSource || !audioBuffer) return;
+                    
                     const rect = progressContainer.getBoundingClientRect();
                     const clickX = e.clientX - rect.left;
-                    const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+                    const percentage = clickX / rect.width;
                     const newTime = percentage * audioBuffer.duration;
+                    
                     seekToTime(newTime);
                 });
             }
+            
             function seekToTime(time) {
-                if (!audioContext || !audioSource || !audioBuffer || !isPlaying || isPaused) return; // Don't seek if paused, resume will handle
-                // Stop current playback if playing
-                audioSource.onended = null;
-                try { audioSource.stop(); } catch(e) {/* already stopped */}
-
-                // Create new source and start from new time
+                if (!audioSource || !audioBuffer) return;
+                
+                audioSource.stop();
+                
                 audioSource = audioContext.createBufferSource();
                 audioSource.buffer = audioBuffer;
                 audioSource.connect(audioContext.destination);
-
-                pausedAtTime = time; // Store the seeked time
-                playbackStartTime = audioContext.currentTime - pausedAtTime; // Adjust playbackStartTime for progress calc
-
-                audioSource.start(0, pausedAtTime);
-
-                audioSource.onended = () => { // Re-attach onended handler
-                    if (isPlaying && !isPaused) { // If it naturally ends
-                        handleStopAll(false);
+                
+                startTime = audioContext.currentTime - time;
+                audioSource.start(0, time);
+                
+                audioSource.onended = () => {
+                    if (isPlaying && !isPaused) {
+                        stopPlayback();
                     }
                 };
-                // Update UI immediately
-                updateProgressUI(pausedAtTime, audioBuffer.duration);
             }
+            
+            // Download feature initialization
             function initDownloadFeature() {
-                downloadBtn.addEventListener('click', downloadCurrentAudio);
+                downloadBtn.addEventListener('click', downloadAudio);
             }
-            async function downloadCurrentAudio() {
-                if (!currentAudioBlob) { showToast('No audio to download.', 'info'); return; }
+            
+            async function downloadAudio() {
+                if (!currentAudioBlob) {
+                    showToast('No audio available to download', 'error');
+                    return;
+                }
+                
                 try {
                     const url = URL.createObjectURL(currentAudioBlob);
                     const a = document.createElement('a');
-                    a.style.display = 'none'; a.href = url;
-                    const ts = new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-');
-                    const vName = selectedVoiceObject ? selectedVoiceObject.name.replace(/[^a-zA-Z0-9_]/g, '-') : 'unknown';
-                    a.download = `tts-${vName}-${ts}.mp3`;
-                    document.body.appendChild(a); a.click(); document.body.removeChild(a);
-                    URL.revokeObjectURL(url); showToast('Download started.', 'success');
-                } catch (err) { console.error('Download error:', err); showToast('Download failed.', 'error'); }
+                    a.href = url;
+                    
+                    // Create a more descriptive filename
+                    const timestamp = new Date().toISOString().slice(0, -5).replace(/[T:]/g, '-');
+                    const voiceName = selectedVoice ? selectedVoice.name.replace(/[^a-zA-Z0-9]/g, '-') : 'unknown';
+                    a.download = `tts-${voiceName}-${timestamp}.mp3`;
+                    
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+                    
+                    showToast('Audio downloaded successfully', 'success');
+                } catch (error) {
+                    console.error('Download error:', error);
+                    showToast('Failed to download audio', 'error');
+                }
             }
-             function showToast(message, type = 'info', duration = 3000) {
-                document.querySelectorAll('.toast').forEach(t => t.remove());
+            
+            // Toast notifications
+            function showToast(message, type = 'success', duration = 3000) {
+                // Remove existing toasts
+                document.querySelectorAll('.toast').forEach(toast => toast.remove());
+                
                 const toast = document.createElement('div');
                 toast.className = `toast ${type}`;
                 toast.textContent = message;
                 document.body.appendChild(toast);
+                
                 setTimeout(() => {
-                    toast.style.animation = 'fadeOutToast 0.3s ease forwards';
+                    toast.style.animation = 'slideOut 0.3s ease';
                     setTimeout(() => toast.remove(), 300);
-                }, duration - 300);
+                }, duration);
             }
+            
+            // Utility function for file size formatting
             function formatFileSize(bytes) {
-                if (bytes === 0) return '0 Bytes'; const k = 1024;
+                if (bytes === 0) return '0 Bytes';
+                const k = 1024;
                 const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                 const i = Math.floor(Math.log(bytes) / Math.log(k));
                 return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
             }
-             function getVoiceTypeAndPricing(voiceName) {
-                const nameL = voiceName.toLowerCase();
-                if (nameL.includes('studio')) return { type: 'studio', name: 'Studio', rate: PRICING.studio };
-                if (nameL.includes('wavenet')) return { type: 'wavenet', name: 'WaveNet', rate: PRICING.wavenet };
-                if (nameL.includes('neural2')) return { type: 'neural2', name: 'Neural2', rate: PRICING.neural2 };
-                return { type: 'standard', name: 'Standard', rate: PRICING.standard };
+            
+            // API Key Management
+            saveKeyBtn.addEventListener('click', async () => {
+                const key = apiKeyInput.value ? apiKeyInput.value.trim() : '';
+                if (key) {
+                    saveKeyBtn.innerHTML = '<div class="loading-spinner inline-block w-4 h-4 mr-2"></div>Validating...';
+                    saveKeyBtn.disabled = true;
+                    
+                    try {
+                        const cleanApiKey = key.trim();
+                        
+                        if (!cleanApiKey || cleanApiKey.length < 10) {
+                            throw new Error('API key appears to be too short. Please verify you copied the complete key.');
+                        }
+                        
+                        if (!cleanApiKey.match(/^[A-Za-z0-9_-]+$/)) {
+                            throw new Error('API key contains invalid characters. Please copy only the key without any extra text.');
+                        }
+                        
+                        // Test API key validity
+                        const response = await fetch(`https://texttospeech.googleapis.com/v1/voices?languageCode=en-US`, {
+                            method: 'GET',
+                            headers: {
+                                'X-Goog-Api-Key': cleanApiKey,
+                                'Accept': 'application/json',
+                            },
+                            mode: 'cors',
+                            cache: 'no-cache'
+                        });
+                        
+                        if (response.ok) {
+                            apiKey = cleanApiKey;
+                            localStorage.setItem('googleTTSApiKey', cleanApiKey);
+                            showToast('API key validated and saved successfully', 'success');
+                            loadVoices();
+                        } else {
+                            throw new Error('API key validation failed. Please check the key and your Google Cloud settings.');
+                        }
+                    } catch (error) {
+                        console.error('API key validation error:', error);
+                        showToast(`Validation error: ${error.message}`, 'error', 5000);
+                    } finally {
+                        saveKeyBtn.innerHTML = '<i class="fas fa-save mr-2"></i> Save Key';
+                        saveKeyBtn.disabled = false;
+                    }
+                } else {
+                    showToast('Please enter a valid API key', 'error');
+                }
+            });
+            
+            // Load available voices from Google TTS
+            async function loadVoices() {
+                if (!apiKey) {
+                    voiceSelect.innerHTML = '<option value="">Please enter your API key</option>';
+                    return;
+                }
+                
+                voiceSelect.innerHTML = '<option value="">Loading voices...</option>';
+                
+                try {
+                    const languageCode = languageSelect.value;
+                    const response = await fetch(`https://texttospeech.googleapis.com/v1/voices?languageCode=${languageCode}`, {
+                        method: 'GET',
+                        headers: {
+                            'X-Goog-Api-Key': apiKey.trim(),
+                            'Accept': 'application/json',
+                        },
+                        mode: 'cors',
+                        cache: 'no-cache'
+                    });
+                    
+                    if (!response.ok) {
+                        throw new Error(`API error (${response.status}): Failed to load voices`);
+                    }
+                    
+                    const data = await response.json();
+                    
+                    if (!data || !data.voices) {
+                        throw new Error('Invalid response from Google TTS API - no voices returned');
+                    }
+                    
+                    // Store all voices and filter initially by standard model
+                    availableVoices = data.voices;
+                    filterVoicesByModel('standard'); // Always start with standard model
+                    
+                    showToast(`Loaded ${availableVoices.length} voices`, 'success');
+                    
+                } catch (error) {
+                    console.error('Error loading voices:', error);
+                    voiceSelect.innerHTML = '<option value="">Error loading voices</option>';
+                    showToast('Failed to load voices: ' + error.message, 'error');
+                }
+            }
+            
+            // Populate voice dropdown
+            function populateVoiceDropdown(voices) {
+                voiceSelect.innerHTML = '<option value="">Select a voice...</option>';
+                
+                voices.forEach(voice => {
+                    const option = document.createElement('option');
+                    option.value = voice.name;
+                    option.textContent = `${voice.name} (${voice.ssmlGender})`;
+                    voiceSelect.appendChild(option);
+                });
             }
-            function calculateEstimatedCost(textLength, voiceTypeInfo) {
-                if (!textLength || !voiceTypeInfo) return { cost: 0, details: '' };
-                const cost = (textLength / 1000000) * voiceTypeInfo.rate;
-                return { cost: cost, details: `${textLength.toLocaleString()} characters` };
+            
+            // Show/hide synthesis progress
+            function showSynthesisProgress(progress) {
+                synthesisProgress.classList.remove('hidden');
+                progressPercentage.textContent = `${Math.round(progress)}%`;
             }
-             function showCostBreakdownModal() { /* ... ensure this is defined or remove call if not needed ... */ }
-             async function saveApiKey() {
-                const key = apiKeyInput.value ? apiKeyInput.value.trim() : '';
-                if (!key) { showToast('Enter API key.', 'error'); return; }
-                saveKeyBtn.innerHTML = '<div class="loading-spinner inline-block w-4 h-4 mr-2"></div>Validating...';
-                saveKeyBtn.disabled = true;
+            
+            function hideSynthesisProgress() {
+                synthesisProgress.classList.add('hidden');
+            }
+            
+            // Synthesize speech with progress tracking
+            async function synthesizeSpeech(text, voice, rate = 1, pitch = 0, model = 'standard') {
+                if (!apiKey) {
+                    throw new Error('API key not provided');
+                }
+                
+                if (!text || !text.trim()) {
+                    throw new Error('No text provided for synthesis');
+                }
+                
+                const cleanApiKey = apiKey.trim();
+                
+                let voiceConfig = {
+                    languageCode: voice.languageCodes[0],
+                    name: voice.name,
+                    ssmlGender: voice.ssmlGender
+                };
+                
+                let audioConfig = {
+                    audioEncoding: 'MP3',
+                    speakingRate: Math.max(0.25, Math.min(4.0, rate)),
+                    pitch: Math.max(-20.0, Math.min(20.0, pitch)),
+                };
+                
+                if (model === 'studio' && voice.name.includes('Studio')) {
+                    audioConfig.effectsProfileId = ['telephony-class-application'];
+                }
+                
+                const request = {
+                    input: { text: text.trim() },
+                    voice: voiceConfig,
+                    audioConfig: audioConfig
+                };
+                
                 try {
-                    if (key.length < 20 || !key.match(/^[A-Za-z0-9_-]+$/)) throw new Error('Invalid API key format.');
-                    const testUrl = `https://texttospeech.googleapis.com/v1/voices?languageCode=en-US`;
-                    const res = await fetch(testUrl, { headers: { 'X-Goog-Api-Key': key, 'Accept': 'application/json' }, mode: 'cors', cache: 'no-cache' });
-                    if (res.ok) {
-                        apiKey = key; localStorage.setItem('googleTTSApiKey', key);
-                        showToast('API key saved!', 'success'); loadVoices();
-                    } else {
-                        const errData = await res.json().catch(() => null);
-                        throw new Error(`Validation failed: ${errData?.error?.message || `HTTP ${res.status}`}`);
+                    let response;
+                    try {
+                        response = await fetch(`https://texttospeech.googleapis.com/v1/text:synthesize`, {
+                            method: 'POST',
+                            headers: {
+                                'X-Goog-Api-Key': cleanApiKey,
+                                'Content-Type': 'application/json',
+                                'Accept': 'application/json',
+                            },
+                            mode: 'cors',
+                            cache: 'no-cache',
+                            body: JSON.stringify(request)
+                        });
+                    } catch (headerError) {
+                        const url = `https://texttospeech.googleapis.com/v1/text:synthesize?key=${encodeURIComponent(cleanApiKey)}`;
+                        response = await fetch(url, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Accept': 'application/json',
+                            },
+                            mode: 'cors',
+                            cache: 'no-cache',
+                            body: JSON.stringify(request)
+                        });
+                    }
+                    
+                    if (!response.ok) {
+                        let errorMessage = 'Failed to synthesize speech';
+                        let details = '';
+                        
+                        try {
+                            const errorData = await response.json();
+                            errorMessage = errorData.error?.message || errorMessage;
+                            details = errorData.error?.details ? ` (${JSON.stringify(errorData.error.details)})` : '';
+                        } catch (e) {
+                            details = ` (HTTP ${response.status}: ${response.statusText})`;
+                        }
+                        
+                        if (response.status === 400) {
+                            throw new Error('Invalid request parameters. Please check your text and settings.' + details);
+                        } else if (response.status === 403) {
+                            throw new Error('Access denied. Please check your API key and quota.' + details);
+                        } else if (response.status === 429) {
+                            throw new Error('Rate limit exceeded. Please wait a moment and try again.' + details);
+                        } else if (response.status >= 500) {
+                            throw new Error('Google Cloud service error. Please try again later.' + details);
+                        } else {
+                            throw new Error(errorMessage + details);
+                        }
+                    }
+                    
+                    const data = await response.json();
+                    
+                    if (!data || !data.audioContent) {
+                        throw new Error('Invalid response from Google TTS API - no audio content received');
                     }
-                } catch (err) {
-                    console.error('API key error:', err); showToast(err.message, 'error', 6000);
-                    apiKey = ''; localStorage.removeItem('googleTTSApiKey');
-                } finally {
-                    saveKeyBtn.innerHTML = '<i class="fas fa-save mr-2"></i> Save Key';
-                    saveKeyBtn.disabled = false; updateSynthesisActionStatus(); updateAllControlButtons();
+                    
+                    return data.audioContent;
+                } catch (error) {
+                    console.error('Synthesis error:', error);
+                    throw error;
                 }
             }
-            function startProgressTracking() {
-                if (animationFrameId) cancelAnimationFrame(animationFrameId);
-                function updateLoop() {
-                    if (!isPlaying || isPaused || !audioBuffer || !audioContext) { animationFrameId = null; return; }
-                    const elapsed = audioContext.currentTime - playbackStartTime;
-                    const currentPlaybackTime = pausedAtTime + elapsed;
-                    const duration = audioBuffer.duration;
-                    if (currentPlaybackTime >= duration) { updateProgressUI(duration, duration); animationFrameId = null; return; }
-                    updateProgressUI(currentPlaybackTime, duration);
-                    animationFrameId = requestAnimationFrame(updateLoop);
+            
+            // Play audio data
+            async function playAudioData(audioBase64) {
+                if (!audioContext) {
+                    initAudioContext();
+                }
+                
+                try {
+                    const audioData = Uint8Array.from(atob(audioBase64), c => c.charCodeAt(0));
+                    audioBuffer = await audioContext.decodeAudioData(audioData.buffer);
+                    
+                    audioSource = audioContext.createBufferSource();
+                    audioSource.buffer = audioBuffer;
+                    audioSource.connect(audioContext.destination);
+                    
+                    isPlaying = true;
+                    isPaused = false;
+                    updatePlaybackButtons();
+                    
+                    audioSource.start(0);
+                    startTime = audioContext.currentTime;
+                    
+                    startProgressTracking();
+                    
+                    audioSource.onended = () => {
+                        if (isPlaying && !isPaused) {
+                            stopPlayback();
+                        }
+                    };
+                } catch (error) {
+                    console.error('Error playing audio:', error);
+                    showToast('Failed to play audio: ' + error.message, 'error');
                 }
-                animationFrameId = requestAnimationFrame(updateLoop);
             }
-            function updateProgressUI(currentPlayTime, duration) {
-                if (isNaN(currentPlayTime) || isNaN(duration) || duration === 0) {
-                    progressBar.style.width = '0%'; currentPositionMarker.style.left = '0%'; readingProgress.style.width = '0%';
-                    currentTimeEl.textContent = formatTime(0); totalTimeEl.textContent = formatTime(0); return;
+            
+            function startProgressTracking() {
+                function updateProgress() {
+                    if (!isPlaying || isPaused || !audioSource) return;
+                    
+                    const currentTime = audioContext.currentTime - startTime;
+                    const duration = audioBuffer.duration;
+                    const progress = currentTime / duration;
+                    
+                    progressBar.style.width = (progress * 100) + '%';
+                    
+                    currentReadingPosition = Math.floor(progress * currentText.length);
+                    const readingProg = currentReadingPosition / currentText.length;
+                    readingProgress.style.width = (readingProg * 100) + '%';
+                    
+                    currentPositionMarker.style.left = (progress * 100) + '%';
+                    
+                    document.getElementById('currentTime').textContent = formatTime(Math.floor(currentTime));
+                    document.getElementById('totalTime').textContent = formatTime(Math.floor(duration));
+                    
+                    updateReadingHighlight();
+                    
+                    requestAnimationFrame(updateProgress);
                 }
-                const progPerc = (currentPlayTime / duration) * 100;
-                progressBar.style.width = `${progPerc}%`; currentPositionMarker.style.left = `${progPerc}%`;
-                currentTimeEl.textContent = formatTime(Math.floor(currentPlayTime));
-                totalTimeEl.textContent = formatTime(Math.floor(duration));
-                if (currentText.length > 0) {
-                    currentReadingPosition = Math.floor(progPerc / 100 * currentText.length);
-                    const readProgPerc = Math.min(100, (currentReadingPosition / currentText.length) * 100); // Cap at 100
-                    readingProgress.style.width = `${readProgPerc}%`; updateReadingHighlight();
-                } else { readingProgress.style.width = '0%'; }
+                
+                updateProgress();
             }
+            
             function updateReadingHighlight() {
-                documentContentEl.querySelectorAll('.reading-highlight').forEach(el => el.classList.remove('reading-highlight'));
-                if (!currentText || !audioBuffer || audioBuffer.duration === 0) return; // Ensure audio is loaded
-                const paragraphs = Array.from(documentContentEl.children);
-                let charAcc = 0;
-                // Calculate current character based on audio progress, ONLY if playing
-                let effectiveReadingPosition = currentReadingPosition;
-                if (!isPlaying && !isPaused && audioBuffer && audioBuffer.duration > 0) { // If stopped, highlight based on full text vs audio duration
-                     effectiveReadingPosition = currentText.length; // Highlight all if stopped but audio was loaded
-                } else if (!isPlaying && isPaused) {
-                    // Keep currentReadingPosition as is (where it was paused)
-                }
-
-
+                documentContent.querySelectorAll('.reading-highlight').forEach(el => {
+                    el.classList.remove('reading-highlight');
+                });
+                
+                const paragraphs = documentContent.children;
+                let pos = 0;
+                
                 for (let i = 0; i < paragraphs.length; i++) {
                     const p = paragraphs[i];
-                    const pText = p.textContent || "";
-                    const pLen = pText.length + 1;
-                    if (charAcc <= effectiveReadingPosition && effectiveReadingPosition < charAcc + pLen) {
+                    const pText = p.textContent;
+                    
+                    if (pos <= currentReadingPosition && currentReadingPosition < pos + pText.length) {
                         p.classList.add('reading-highlight');
                         break;
                     }
-                    charAcc += pLen;
+                    pos += pText.length;
                 }
             }
-            function formatTime(totalSeconds) {
-                const min = Math.floor(totalSeconds / 60); const sec = totalSeconds % 60;
-                return `${min}:${sec.toString().padStart(2, '0')}`;
+            
+            function formatTime(seconds) {
+                const minutes = Math.floor(seconds / 60);
+                const secs = seconds % 60;
+                return `${minutes}:${secs.toString().padStart(2, '0')}`;
             }
-            function setupDragAndDrop() {
-                ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
-                    dropzone.addEventListener(evt, preventDefaults, false);
-                    document.body.addEventListener(evt, preventDefaults, false);
-                });
-                ['dragenter', 'dragover'].forEach(evt => dropzone.addEventListener(evt, () => dropzone.classList.add('active'), false));
-                ['dragleave', 'drop'].forEach(evt => dropzone.addEventListener(evt, () => dropzone.classList.remove('active'), false));
-                dropzone.addEventListener('drop', (e) => { if (e.dataTransfer.files.length > 0) handleFile(e.dataTransfer.files[0]); });
+            
+            // File Handling
+            uploadBtn.addEventListener('click', () => fileInput.click());
+            
+            fileInput.addEventListener('change', (e) => {
+                if (e.target.files.length > 0) {
+                    handleFile(e.target.files[0]);
+                }
+            });
+            
+            pasteBtn.addEventListener('click', () => {
+                documentContent.innerHTML = '<p class="text-gray-500 italic">Press Ctrl+V (Cmd+V on Mac) to paste your text...</p>';
+                documentContent.focus();
+                
+                const pasteHandler = (e) => {
+                    e.preventDefault();
+                    const text = (e.clipboardData || window.clipboardData).getData('text');
+                    if (text) {
+                        setDocumentContent(text);
+                        document.removeEventListener('paste', pasteHandler);
+                    }
+                };
+                
+                document.addEventListener('paste', pasteHandler);
+            });
+            
+            // Drag and Drop
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropzone.addEventListener(eventName, preventDefaults, false);
+            });
+            
+            function preventDefaults(e) {
+                e.preventDefault();
+                e.stopPropagation();
             }
-             function handlePaste() {
-                documentContentEl.innerHTML = '';
-                const ph = document.createElement('p'); ph.className = 'text-gray-500 dark:text-gray-400 italic';
-                ph.textContent = 'Pasting...'; documentContentEl.appendChild(ph);
-                documentContentEl.contentEditable = "true"; documentContentEl.focus();
-                setTimeout(() => {
-                    const text = documentContentEl.innerText; documentContentEl.contentEditable = "false";
-                    if (text && text !== ph.textContent) { setDocumentContent(text.trim()); showToast('Pasted.', 'success'); }
-                    else { documentContentEl.innerHTML = '<p class="text-gray-500 dark:text-gray-400 italic">Paste or upload.</p>'; }
-                }, 100);
+            
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropzone.addEventListener(eventName, highlight, false);
+            });
+            
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropzone.addEventListener(eventName, unhighlight, false);
+            });
+            
+            function highlight() {
+                dropzone.classList.add('active');
             }
+            
+            function unhighlight() {
+                dropzone.classList.remove('active');
+            }
+            
+            dropzone.addEventListener('drop', (e) => {
+                const dt = e.dataTransfer;
+                const file = dt.files[0];
+                if (file) {
+                    handleFile(file);
+                }
+            });
+            
+            // Enhanced file processing
             function handleFile(file) {
-                // Call setDocumentContent which now handles stopping audio etc.
-                // setDocumentContent("", "", []); // Clear existing content and states first
-                if (file.size > 50 * 1024 * 1024) { showToast('File too large (max 50MB).', 'error'); return; }
-                const ext = file.name.toLowerCase().split('.').pop();
-                documentContentEl.innerHTML = `<div class="text-center py-8"><div class="loading-spinner mx-auto my-2"></div><p>Processing ${file.name}...</p></div>`;
+                const maxSize = 50 * 1024 * 1024; // 50MB
+                if (file.size > maxSize) {
+                    showToast('File too large. Please upload a file smaller than 50MB.', 'error');
+                    return;
+                }
+                
+                const fileExtension = file.name.toLowerCase().split('.').pop();
+                
+                documentContent.innerHTML = `
+                    <div class="text-center py-8">
+                        <div class="loading-spinner mx-auto"></div>
+                        <p class="text-gray-500 mt-2">Processing ${file.name}...</p>
+                        <p class="text-xs text-gray-400 mt-1">File size: ${formatFileSize(file.size)}</p>
+                    </div>
+                `;
+                
                 try {
-                    switch (ext) {
-                        case 'txt': readTextFile(file); break;
-                        case 'pdf': if (typeof pdfjsLib !== 'undefined') readPDFFile(file); else throw new Error('PDF lib not loaded.'); break;
-                        case 'doc': case 'docx': if (typeof mammoth !== 'undefined') readWordDocument(file); else throw new Error('Word lib not loaded.'); break;
-                        case 'html': case 'htm': readHTMLFile(file); break;
-                        default: if (file.type && file.type.startsWith('text/')) readTextFile(file); else throw new Error(`Unsupported: .${ext}`);
+                    switch (fileExtension) {
+                        case 'txt':
+                            readTextFile(file);
+                            break;
+                        case 'pdf':
+                            readPDFFile(file);
+                            break;
+                        case 'doc':
+                        case 'docx':
+                            readWordDocument(file);
+                            break;
+                        case 'rtf':
+                            readRTFFile(file);
+                            break;
+                        case 'md':
+                        case 'markdown':
+                            readMarkdownFile(file);
+                            break;
+                        case 'json':
+                            readJSONFile(file);
+                            break;
+                        case 'html':
+                        case 'htm':
+                            readHTMLFile(file);
+                            break;
+                        case 'xml':
+                            readXMLFile(file);
+                            break;
+                        case 'csv':
+                            readCSVFile(file);
+                            break;
+                        default:
+                            if (file.type.startsWith('text/')) {
+                                readTextFile(file);
+                            } else {
+                                throw new Error(`Unsupported file type: .${fileExtension}. Please upload a supported document format.`);
+                            }
                     }
-                } catch (err) {
-                    console.error('File process error:', err); showToast('File error: ' + err.message, 'error', 5000);
-                    setDocumentContent("<p>Error loading document.</p>"); // Show error in content area
+                } catch (error) {
+                    console.error('Error processing file:', error);
+                    showToast('Error processing file: ' + error.message, 'error');
+                    documentContent.innerHTML = '<p class="text-gray-500 italic">Error loading document. Please try again.</p>';
                 }
             }
+            
+            // Text file reader
             function readTextFile(file) {
                 const reader = new FileReader();
-                reader.onload = (e) => setDocumentContent(e.target.result);
-                reader.onerror = () => { showToast('Error reading file', 'error'); setDocumentContent('<p>Error reading file.</p>');};
+                reader.onload = (e) => {
+                    const text = e.target.result;
+                    setDocumentContent(text);
+                    showToast(`Loaded ${formatFileSize(file.size)} text file`, 'success');
+                };
+                reader.onerror = () => {
+                    showToast('Error reading text file', 'error');
+                };
                 reader.readAsText(file, 'UTF-8');
             }
-            async function readPDFFile(file) {
-                 const fileURL = URL.createObjectURL(file);
-                try {
-                    const loadingTask = pdfjsLib.getDocument({ url: fileURL, verbosity: 0 });
-                    const pdf = await loadingTask.promise; let fullText = ''; const numPages = pdf.numPages;
+            
+            // PDF file reader
+            function readPDFFile(file) {
+                if (typeof pdfjsLib === 'undefined') {
+                    showToast('PDF.js not loaded. Please refresh the page and try again.', 'error');
+                    documentContent.innerHTML = '<p class="text-gray-500 italic">PDF.js library not available.</p>';
+                    return;
+                }
+                
+                const fileURL = URL.createObjectURL(file);
+                
+                const loadingTask = pdfjsLib.getDocument({
+                    url: fileURL,
+                    verbosity: 0
+                });
+                
+                loadingTask.promise.then(pdf => {
+                    let text = '';
+                    const numPages = pdf.numPages;
+                    const pagePromises = [];
+                    
+                    let pagesProcessed = 0;
+                    
                     for (let i = 1; i <= numPages; i++) {
-                        const page = await pdf.getPage(i); const tc = await page.getTextContent();
-                        fullText += tc.items.map(item => item.str).join(' ') + '\n\n';
-                        const progress = (i / numPages) * 100;
-                        documentContentEl.innerHTML = `<div class="text-center py-8"><div class="loading-spinner mx-auto my-2"></div><p>Extracting PDF ${i}/${numPages}...</p><div class="w-full bg-gray-200 rounded-full h-2.5 mt-3 max-w-xs mx-auto"><div class="bg-blue-500 h-2.5 rounded-full" style="width: ${progress}%"></div></div></div>`;
+                        pagePromises.push(pdf.getPage(i).then(page => {
+                            return page.getTextContent().then(textContent => {
+                                pagesProcessed++;
+                                const progress = (pagesProcessed / numPages) * 100;
+                                documentContent.innerHTML = `
+                                    <div class="text-center py-8">
+                                        <div class="loading-spinner mx-auto"></div>
+                                        <p class="text-gray-500 mt-2">Processing PDF...</p>
+                                        <div class="w-32 bg-gray-200 rounded-full h-2 mx-auto mt-3">
+                                            <div class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: ${progress}%"></div>
+                                        </div>
+                                        <p class="text-xs text-gray-400 mt-2">${pagesProcessed}/${numPages} pages</p>
+                                    </div>
+                                `;
+                                
+                                return textContent.items.map(item => {
+                                    if (item.str) {
+                                        return item.str;
+                                    }
+                                    return '';
+                                }).join(' ');
+                            });
+                        }));
                     }
-                    setDocumentContent(fullText.trim()); showToast(`Loaded PDF: ${numPages} pages.`, 'success');
-                } catch (err) { console.error('PDF error:', err); showToast('PDF extract failed: ' + err.message, 'error'); setDocumentContent('<p>Error reading PDF.</p>');}
-                finally { URL.revokeObjectURL(fileURL); }
+                    
+                    Promise.all(pagePromises).then(pagesText => {
+                        text = pagesText.join('\n\n');
+                        setDocumentContent(text);
+                        URL.revokeObjectURL(fileURL);
+                        showToast(`Loaded PDF with ${numPages} pages`, 'success');
+                    }).catch(error => {
+                        console.error('Error extracting PDF text:', error);
+                        showToast('Failed to extract text from PDF', 'error');
+                        URL.revokeObjectURL(fileURL);
+                    });
+                }).catch(error => {
+                    console.error('Error loading PDF:', error);
+                    showToast('Failed to load PDF file: ' + error.message, 'error');
+                    URL.revokeObjectURL(fileURL);
+                });
             }
-            async function readWordDocument(file) {
+            
+            // Word document reader
+            function readWordDocument(file) {
+                if (typeof mammoth === 'undefined') {
+                    showToast('Mammoth.js not loaded. Please refresh the page and try again.', 'error');
+                    documentContent.innerHTML = '<p class="text-gray-500 italic">Mammoth.js library not available for Word documents.</p>';
+                    return;
+                }
+                
                 const reader = new FileReader();
                 reader.onload = async (e) => {
                     try {
-                        const result = await mammoth.extractRawText({ arrayBuffer: e.target.result });
-                        if (result.value && result.value.trim()) { setDocumentContent(result.value); showToast(`Loaded Word: ${file.name}`, 'success'); }
-                        else { showToast('No text in Word doc.', 'info'); setDocumentContent('<p>No text in doc.</p>'); }
-                        if (result.messages?.length) console.warn('Mammoth:', result.messages);
-                    } catch (err) { console.error('Word doc error:', err); showToast('Word doc error: ' + err.message, 'error'); setDocumentContent('<p>Error loading Word doc.</p>');}
+                        const options = {
+                            convertImage: mammoth.images.ignoreImages
+                        };
+                        
+                        const result = await mammoth.extractRawText({
+                            arrayBuffer: e.target.result
+                        }, options);
+                        
+                        if (result.value && result.value.trim()) {
+                            setDocumentContent(result.value);
+                            showToast(`Loaded Word document: ${file.name}`, 'success');
+                        } else {
+                            showToast('No text content found in Word document', 'error');
+                            documentContent.innerHTML = '<p class="text-gray-500 italic">No readable text found in document.</p>';
+                        }
+                        
+                        if (result.messages && result.messages.length > 0) {
+                            console.warn('Word processing warnings:', result.messages);
+                        }
+                    } catch (error) {
+                        console.error('Error reading Word document:', error);
+                        
+                        let errorMessage = 'Error reading Word document.';
+                        if (error.message.includes('Unsupported file format')) {
+                            errorMessage = 'Unsupported Word format. Please use .docx format.';
+                        } else if (error.message.includes('corrupted')) {
+                            errorMessage = 'Document appears to be corrupted. Please try saving it again.';
+                        }
+                        
+                        showToast(errorMessage, 'error');
+                        documentContent.innerHTML = '<p class="text-gray-500 italic">Error loading Word document. Please try a different format.</p>';
+                    }
                 };
-                reader.onerror = () => { showToast('File read error for Word.', 'error'); setDocumentContent('<p>Error reading file.</p>');};
+                
+                reader.onerror = () => {
+                    showToast('Error reading file', 'error');
+                };
+                
                 reader.readAsArrayBuffer(file);
             }
-             function readHTMLFile(file) {
-                 const reader = new FileReader();
-                 reader.onload = (e) => {
-                    const tempDiv = document.createElement('div'); tempDiv.innerHTML = e.target.result;
-                    tempDiv.querySelectorAll('script, style, link[rel="stylesheet"]').forEach(el => el.remove());
-                    let text = (tempDiv.textContent || tempDiv.innerText || "").replace(/\s\s+/g, ' ').replace(/\n\s*\n/g, '\n\n').trim();
-                    setDocumentContent(text); showToast(`Loaded HTML: ${file.name}`, 'success');
-                 };
-                 reader.onerror = () => { showToast('Error reading HTML', 'error'); setDocumentContent('<p>Error reading file.</p>');};
-                 reader.readAsText(file);
+            
+            // RTF file reader
+            function readRTFFile(file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    let rtfText = e.target.result;
+                    
+                    // Basic RTF to plain text conversion
+                    rtfText = rtfText.replace(/\\[a-z]+[0-9]*\s?/gi, '');
+                    rtfText = rtfText.replace(/[{}]/g, '');
+                    rtfText = rtfText.replace(/\\\\/g, '\\');
+                    rtfText = rtfText.replace(/\\'/g, "'");
+                    rtfText = rtfText.replace(/\\\n/g, '\n');
+                    rtfText = rtfText.replace(/\s+/g, ' ');
+                    rtfText = rtfText.trim();
+                    
+                    setDocumentContent(rtfText);
+                };
+                reader.onerror = () => {
+                    showToast('Error reading RTF file', 'error');
+                };
+                reader.readAsText(file);
             }
-            function splitTextIntoChunks(text, chunkSize) {
-                const sentences = text.match(/[^.!?]+[.!?]+(\s|$)/g) || [text];
-                const chunks = []; let currentChunk = "";
-                for (const sentence of sentences) {
-                    if (currentChunk.length + sentence.length <= chunkSize) currentChunk += sentence;
-                    else {
-                        if (currentChunk.trim()) chunks.push(currentChunk.trim());
-                        if (sentence.length > chunkSize) { for (let i = 0; i < sentence.length; i += chunkSize) chunks.push(sentence.substring(i, i + chunkSize)); }
-                        else currentChunk = sentence;
+            
+            // Markdown file reader
+            function readMarkdownFile(file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    let text = e.target.result;
+                    
+                    // Convert basic Markdown to plain text
+                    text = text.replace(/^#{1,6}\s+/gm, ''); // Headers
+                    text = text.replace(/\*\*(.*?)\*\*/g, '$1'); // Bold
+                    text = text.replace(/\*(.*?)\*/g, '$1'); // Italic
+                    text = text.replace(/_(.*?)_/g, '$1'); // Italic underscore
+                    text = text.replace(/`(.*?)`/g, '$1'); // Inline code
+                    text = text.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1'); // Links
+                    text = text.replace(/!\[([^\]]*)\]\([^)]+\)/g, ''); // Images
+                    text = text.replace(/^>\s+/gm, ''); // Blockquotes
+                    text = text.replace(/^[\s]*-\s+/gm, '• '); // Unordered lists
+                    text = text.replace(/^[\s]*\d+\.\s+/gm, ''); // Ordered lists
+                    text = text.replace(/---+/g, ''); // Horizontal rules
+                    text = text.replace(/\n{3,}/g, '\n\n'); // Multiple newlines
+                    
+                    setDocumentContent(text);
+                };
+                reader.onerror = () => {
+                    showToast('Error reading Markdown file', 'error');
+                };
+                reader.readAsText(file);
+            }
+            
+            // JSON file reader
+            function readJSONFile(file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    try {
+                        const jsonData = JSON.parse(e.target.result);
+                        
+                        let text = '';
+                        
+                        function jsonToText(obj, prefix = '') {
+                            for (const [key, value] of Object.entries(obj)) {
+                                if (typeof value === 'object' && value !== null) {
+                                    text += `${prefix}${key}:\n`;
+                                    jsonToText(value, prefix + '  ');
+                                } else {
+                                    text += `${prefix}${key}: ${value}\n`;
+                                }
+                            }
+                        }
+                        
+                        jsonToText(jsonData);
+                        setDocumentContent(text);
+                    } catch (error) {
+                        showToast('Invalid JSON file', 'error');
+                    }
+                };
+                reader.onerror = () => {
+                    showToast('Error reading JSON file', 'error');
+                };
+                reader.readAsText(file);
+            }
+            
+            // HTML file reader
+            function readHTMLFile(file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const htmlContent = e.target.result;
+                    
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = htmlContent;
+                    
+                    const scripts = tempDiv.querySelectorAll('script, style');
+                    scripts.forEach(script => script.remove());
+                    
+                    let text = tempDiv.textContent || tempDiv.innerText || '';
+                    
+                    text = text.replace(/\s+/g, ' ');
+                    text = text.replace(/\n\s*\n/g, '\n\n');
+                    text = text.trim();
+                    
+                    setDocumentContent(text);
+                };
+                reader.onerror = () => {
+                    showToast('Error reading HTML file', 'error');
+                };
+                reader.readAsText(file);
+            }
+            
+            // XML file reader
+            function readXMLFile(file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    try {
+                        const xmlContent = e.target.result;
+                        const parser = new DOMParser();
+                        const xmlDoc = parser.parseFromString(xmlContent, 'text/xml');
+                        
+                        let text = '';
+                        
+                        function extractText(node) {
+                            if (node.nodeType === Node.TEXT_NODE) {
+                                text += node.textContent + ' ';
+                            } else if (node.nodeType === Node.ELEMENT_NODE) {
+                                for (const child of node.childNodes) {
+                                    extractText(child);
+                                }
+                            }
+                        }
+                        
+                        extractText(xmlDoc.documentElement);
+                        
+                        text = text.replace(/\s+/g, ' ');
+                        text = text.trim();
+                        
+                        setDocumentContent(text);
+                    } catch (error) {
+                        showToast('Error parsing XML file', 'error');
                     }
+                };
+                reader.onerror = () => {
+                    showToast('Error reading XML file', 'error');
+                };
+                reader.readAsText(file);
+            }
+            
+            // CSV file reader
+            function readCSVFile(file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const csvContent = e.target.result;
+                    
+                    const lines = csvContent.split('\n').filter(line => line.trim());
+                    const headers = lines[0].split(',').map(h => h.trim().replace(/"/g, ''));
+                    
+                    let text = `CSV Data Summary:\n\n`;
+                    text += `Headers: ${headers.join(', ')}\n\n`;
+                    text += `Total rows: ${lines.length - 1}\n\n`;
+                    
+                    if (lines.length > 1) {
+                        text += 'First few rows:\n';
+                        for (let i = 1; i <= Math.min(5, lines.length - 1); i++) {
+                            const values = lines[i].split(',').map(v => v.trim().replace(/"/g, ''));
+                            text += `Row ${i}: ${values.join(', ')}\n`;
+                        }
+                    }
+                    
+                    setDocumentContent(text);
+                    showToast('CSV file loaded. Showing data summary for TTS.', 'success');
+                };
+                reader.onerror = () => {
+                    showToast('Error reading CSV file', 'error');
+                };
+                reader.readAsText(file);
+            }
+            
+            // Set document content
+            function setDocumentContent(text) {
+                currentText = text;
+                documentContent.innerHTML = text.split('\n').map(line => `<p>${line || '&nbsp;'}</p>`).join('');
+                charCount.textContent = `${text.length} characters`;
+                
+                if (text.length > 1000000) {
+                    showToast('Document exceeds 1,000,000 character limit. Some content may be truncated.', 'error');
                 }
-                if (currentChunk.trim()) chunks.push(currentChunk.trim());
-                return chunks.filter(c => c.length > 0);
+                
+                updateCostEstimator();
             }
-            function handleParagraphClickForBookmark(event) {
-                const pElement = event.target.closest('p[data-paragraph-index]');
-                if (!pElement) return;
-                const paragraphIndex = parseInt(pElement.dataset.paragraphIndex, 10);
-                if (isNaN(paragraphIndex)) return;
-                const iconEl = pElement.querySelector('.bookmark-icon i');
-                if (currentBookmarks.includes(paragraphIndex)) {
-                    currentBookmarks = currentBookmarks.filter(idx => idx !== paragraphIndex);
-                    pElement.classList.remove('bookmarked');
-                    if (iconEl) iconEl.className = 'fas fa-bookmark-o';
-                    showToast('Bookmark removed.', 'info', 1500);
+            
+            // Playback controls
+            playBtn.addEventListener('click', async () => {
+                if (!selectedVoice) {
+                    showToast('Please select a voice first', 'error');
+                    return;
+                }
+                
+                if (!currentText.trim()) {
+                    showToast('Please add some text to read', 'error');
+                    return;
+                }
+                
+                if (isPaused) {
+                    resumePlayback();
                 } else {
-                    currentBookmarks.push(paragraphIndex); currentBookmarks.sort((a,b) => a-b);
-                    pElement.classList.add('bookmarked');
-                    if (iconEl) iconEl.className = 'fas fa-bookmark';
-                    showToast('Bookmark added.', 'success', 1500);
+                    await startPlayback();
+                }
+            });
+            
+            pauseBtn.addEventListener('click', () => {
+                if (isPlaying && !isPaused) {
+                    pausePlayback();
+                }
+            });
+            
+            stopBtn.addEventListener('click', () => {
+                stopPlayback();
+            });
+            
+            // Playback functions with enhanced progress tracking
+            async function startPlayback() {
+                try {
+                    isPlaying = true;
+                    isPaused = false;
+                    updatePlaybackButtons();
+                    
+                    showToast('Generating speech...', 'success', 1000);
+                    
+                    const chunks = splitTextIntoChunks(currentText, MAX_CHUNK_SIZE);
+                    
+                    if (chunks.length > 1) {
+                        showToast(`Processing ${chunks.length} chunks...`, 'success', 2000);
+                    }
+                    
+                    let allAudioData = [];
+                    
+                    // Show synthesis progress
+                    showSynthesisProgress(0);
+                    
+                    for (let i = 0; i < chunks.length; i++) {
+                        if (!isPlaying || isPaused) break;
+                        
+                        const progress = (i / chunks.length) * 100;
+                        showSynthesisProgress(progress);
+                        
+                        const audioData = await synthesizeSpeech(
+                            chunks[i],
+                            selectedVoice,
+                            parseFloat(rateSelect.value),
+                            parseFloat(pitchSelect.value),
+                            modelSelect.value
+                        );
+                        
+                        allAudioData.push(audioData);
+                    }
+                    
+                    hideSynthesisProgress();
+                    
+                    if (allAudioData.length > 0 && isPlaying) {
+                        await combineAndPlayAudio(allAudioData);
+                    }
+                    
+                } catch (error) {
+                    hideSynthesisProgress();
+                    console.error('Error during playback:', error);
+                    showToast('Failed to play text: ' + error.message, 'error');
+                    stopPlayback();
                 }
             }
-            function getLibrary() { try { const libJson = localStorage.getItem(LIBRARY_STORAGE_KEY); return libJson ? JSON.parse(libJson) : []; } catch (e) { console.error("Lib parse error:", e); localStorage.removeItem(LIBRARY_STORAGE_KEY); return []; } }
-            function saveLibrary(library) { localStorage.setItem(LIBRARY_STORAGE_KEY, JSON.stringify(library)); }
-            function handleSaveToLibrary() {
-                if (!currentText.trim()) { showToast('Nothing to save.', 'info'); return; }
-                const library = getLibrary();
-                const title = currentText.substring(0, 50).replace(/\s+/g, ' ').trim() + (currentText.length > 50 ? '...' : '');
-                const newEntry = {
-                    id: `doc-${new Date().getTime()}-${Math.random().toString(36).substr(2, 5)}`, title: title, text: currentText,
-                    notes: notesTextarea.value, bookmarks: [...currentBookmarks],
-                    voiceSettings: {
-                        voiceName: selectedVoiceObject ? selectedVoiceObject.name : null,
-                        languageCode: languageSelect.value, // Save current language selection
-                        rate: parseFloat(rateSelect.value), pitch: parseFloat(pitchSelect.value), model: modelSelect.value
-                    }, savedAt: new Date().toISOString()
-                };
-                library.unshift(newEntry); saveLibrary(library);
-                showToast(`"${title}" saved!`, 'success'); renderLibraryItems();
+            
+            async function combineAndPlayAudio(audioDataArray) {
+                try {
+                    const firstAudioData = audioDataArray[0];
+                    
+                    const byteCharacters = atob(firstAudioData);
+                    const byteNumbers = new Array(byteCharacters.length);
+                    for (let i = 0; i < byteCharacters.length; i++) {
+                        byteNumbers[i] = byteCharacters.charCodeAt(i);
+                    }
+                    const byteArray = new Uint8Array(byteNumbers);
+                    currentAudioBlob = new Blob([byteArray], { type: 'audio/mpeg' });
+                    
+                    downloadBtn.disabled = false;
+                    
+                    await playAudioData(firstAudioData);
+                    
+                } catch (error) {
+                    console.error('Error combining audio:', error);
+                    showToast('Failed to process audio', 'error');
+                }
             }
-            function renderLibraryItems() {
-                const library = getLibrary(); libraryItemsUl.innerHTML = '';
-                if (library.length === 0) { libraryItemsUl.innerHTML = '<p class="text-center p-4 italic">Library is empty.</p>'; return; }
-                library.forEach(item => {
-                    const li = document.createElement('li');
-                    li.className = 'flex justify-between items-center py-3 px-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded';
-                    const titleDiv = document.createElement('div'); titleDiv.className = 'flex-grow cursor-pointer';
-                    titleDiv.innerHTML = `<span class="font-medium text-blue-600 dark:text-blue-400">${item.title}</span><span class="block text-xs text-gray-500 dark:text-gray-400">${new Date(item.savedAt).toLocaleString()}</span>`;
-                    titleDiv.onclick = () => loadFromLibrary(item.id);
-                    const delBtn = document.createElement('button');
-                    delBtn.innerHTML = '<i class="fas fa-trash-alt text-red-500 hover:text-red-700"></i>';
-                    delBtn.className = 'p-2 rounded hover:bg-red-100 dark:hover:bg-red-800'; delBtn.title = "Delete";
-                    delBtn.onclick = (e) => { e.stopPropagation(); if (confirm(`Delete "${item.title}"?`)) deleteFromLibrary(item.id); };
-                    li.appendChild(titleDiv); li.appendChild(delBtn); libraryItemsUl.appendChild(li);
+            
+            function pausePlayback() {
+                if (audioSource && isPlaying && !isPaused) {
+                    pauseTime = audioContext.currentTime;
+                    audioSource.stop();
+                    isPaused = true;
+                    updatePlaybackButtons();
+                }
+            }
+            
+            function resumePlayback() {
+                if (isPaused && audioBuffer) {
+                    const pausedDuration = pauseTime - startTime;
+                    
+                    audioSource = audioContext.createBufferSource();
+                    audioSource.buffer = audioBuffer;
+                    audioSource.connect(audioContext.destination);
+                    
+                    audioSource.start(0, pausedDuration);
+                    startTime = audioContext.currentTime - pausedDuration;
+                    isPaused = false;
+                    isPlaying = true;
+                    updatePlaybackButtons();
+                    
+                    startProgressTracking();
+                    
+                    audioSource.onended = () => {
+                        if (isPlaying && !isPaused) {
+                            stopPlayback();
+                        }
+                    };
+                }
+            }
+            
+            function stopPlayback() {
+                if (audioSource && isPlaying) {
+                    audioSource.stop();
+                }
+                
+                isPlaying = false;
+                isPaused = false;
+                startTime = 0;
+                pauseTime = 0;
+                currentReadingPosition = 0;
+                updatePlaybackButtons();
+                updateProgress(0);
+                
+                documentContent.querySelectorAll('.reading-highlight').forEach(el => {
+                    el.classList.remove('reading-highlight');
                 });
             }
-            function deleteFromLibrary(itemId) { let lib = getLibrary(); lib = lib.filter(i => i.id !== itemId); saveLibrary(lib); renderLibraryItems(); showToast('Item deleted.', 'success'); }
-            function openLibraryModal() { renderLibraryItems(); libraryModal.style.display = 'block'; const firstItem = libraryItemsUl.querySelector('li div[onclick]'); if (firstItem) firstItem.focus(); else closeLibraryModalBtn.focus(); }
-            function closeLibraryModal() { libraryModal.style.display = 'none'; }
-
+            
+            function updatePlaybackButtons() {
+                playBtn.disabled = false;
+                pauseBtn.disabled = !isPlaying || isPaused;
+                stopBtn.disabled = !isPlaying;
+                downloadBtn.disabled = !currentAudioBlob;
+                
+                if (isPlaying && !isPaused) {
+                    playBtn.innerHTML = '<i class="fas fa-pause text-lg"></i>';
+                } else {
+                    playBtn.innerHTML = '<i class="fas fa-play text-lg"></i>';
+                }
+            }
+            
+            function updateProgress(progress) {
+                progressBar.style.width = (progress * 100) + '%';
+                
+                const currentSeconds = Math.floor(progress * estimatedDuration);
+                const totalSeconds = Math.floor(estimatedDuration);
+                
+                currentTime.textContent = formatTime(currentSeconds);
+                totalTime.textContent = formatTime(totalSeconds);
+            }
+            
+            function splitTextIntoChunks(text, maxChunkSize) {
+                const sentences = text.split(/(?<=[.!?])\s+/);
+                const chunks = [];
+                let currentChunk = '';
+                
+                for (const sentence of sentences) {
+                    if (currentChunk.length + sentence.length <= maxChunkSize) {
+                        currentChunk += (currentChunk ? ' ' : '') + sentence;
+                    } else {
+                        if (currentChunk) {
+                            chunks.push(currentChunk.trim());
+                        }
+                        currentChunk = sentence;
+                    }
+                }
+                
+                if (currentChunk) {
+                    chunks.push(currentChunk.trim());
+                }
+                
+                return chunks;
+            }
+            
+            // Event listeners
+            refreshVoicesBtn.addEventListener('click', loadVoices);
+            languageSelect.addEventListener('change', loadVoices);
+            
+            // Initialize the application
+            init();
         });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
