diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,16 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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 {<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Google TTS Document Reader (BYOK)</title>
+    <title>Google TTS Document Reader (BYOK) - Enhanced</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>
@@ -23,7 +14,7 @@
             --border-color: #E5E7EB;
             --card-bg: #FFFFFF;
         }
-        
+
         /* Dark mode variables */
         [data-theme="dark"] {
             --bg-gray: #111827;
@@ -31,51 +22,67 @@
             --border-color: #374151;
             --card-bg: #1F2937;
         }
-        
+
         body {
+            font-family: "Inter", sans-serif; /* Added a default nice font */
             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; /* Consistent rounded corners */
         }
         .dropzone.active {
             border-color: #3B82F6;
-            background-color: #EFF6FF;
+            background-color: #EFF6FF; /* Tailwind blue-50 */
+        }
+        [data-theme="dark"] .dropzone.active {
+            background-color: #1E3A8A; /* Darker blue for dark mode */
         }
+
         .document-content {
             max-height: 60vh;
             overflow-y: auto;
+            border-radius: 0.5rem; /* Consistent rounded corners */
         }
-        .highlight {
-            background-color: #FEF08A;
+        .highlight { /* For general text highlighting, not reading highlight */
+            background-color: #FEF08A; /* Tailwind yellow-200 */
             transition: background-color 0.2s;
             border-radius: 3px;
             padding: 0 2px;
         }
+        [data-theme="dark"] .highlight {
+            background-color: #FDE047; /* Tailwind yellow-400 for dark mode */
+            color: #1F2937; /* Dark text on yellow bg */
+        }
+
         .loading-spinner {
             border: 3px solid rgba(255, 255, 255, 0.3);
             border-radius: 50%;
-            border-top: 3px solid #3B82F6;
+            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; /* Lighter blue for dark mode spinner */
+        }
+
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
@@ -88,69 +95,104 @@
             border-radius: 8px;
             color: white;
             z-index: 1000;
-            animation: slideIn 0.3s ease;
+            animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
         }
-        .toast.success { background-color: #10B981; }
-        .toast.error { background-color: #EF4444; }
-        @keyframes slideIn {
+        .toast.success { background-color: #10B981; } /* Tailwind green-600 */
+        .toast.error { background-color: #EF4444; } /* Tailwind red-500 */
+        .toast.info { background-color: #3B82F6; } /* Tailwind blue-500 */
+
+        @keyframes slideInRight {
             from { transform: translateX(100%); opacity: 0; }
             to { transform: translateX(0); opacity: 1; }
         }
-        
+        @keyframes fadeOut {
+            from { opacity: 1; }
+            to { opacity: 0; transform: translateX(10%);}
+        }
+
         /* Progress indicator styles */
         #progressContainer {
             position: relative;
             overflow: hidden;
         }
-        
+
         #currentPositionMarker {
             box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+            border-radius: 2px; /* Slight rounding for marker */
         }
-        
+
         .reading-highlight {
-            background-color: rgba(34, 197, 94, 0.2);
+            background-color: rgba(52, 211, 153, 0.3); /* Tailwind green-400 with opacity */
             border-radius: 3px;
             padding: 0 2px;
             transition: all 0.2s;
         }
+        [data-theme="dark"] .reading-highlight {
+            background-color: rgba(16, 185, 129, 0.4); /* Tailwind green-600 with opacity for dark */
+        }
 
         /* Audio controls enhancement */
         .audio-controls {
-            background: linear-gradient(145deg, #ffffff, #f9fafb);
+            background: var(--card-bg); /* Use card-bg for consistency */
             border-radius: 16px;
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            border: 1px solid var(--border-color);
+        }
+        [data-theme="dark"] .audio-controls {
+            box-shadow: 0 8px 32px rgba(255,255,255,0.05);
         }
 
         .control-button {
             transition: all 0.2s ease;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
-
         .control-button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
         }
-
         .control-button:active {
             transform: translateY(0);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .control-button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: translateY(0);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+        [data-theme="dark"] .control-button {
+             box-shadow: 0 4px 12px rgba(255,255,255,0.08);
+        }
+         [data-theme="dark"] .control-button:hover {
+            box-shadow: 0 6px 16px rgba(255,255,255,0.12);
         }
 
         /* Enhanced progress bar */
         .progress-bar-container {
-            background: linear-gradient(145deg, #e5e7eb, #f3f4f6);
+            background: var(--border-color); /* Use border color for track */
             border-radius: 12px;
             overflow: hidden;
-            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        [data-theme="dark"] .progress-bar-container {
+             box-shadow: inset 0 1px 3px rgba(255,255,255,0.05);
         }
-
         .progress-bar {
             background: linear-gradient(45deg, #3b82f6, #6366f1);
             box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
         }
-
         .voice-status {
-            background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
-            border: 1px solid #0ea5e9;
+            background: linear-gradient(145deg, #f0f9ff, #e0f2fe); /* Tailwind blue-50 to blue-100 */
+            border: 1px solid #0ea5e9; /* Tailwind sky-500 */
+        }
+        [data-theme="dark"] .voice-status {
+            background: linear-gradient(145deg, #1e3a8a, #1c3d7a); /* Darker blues */
+            border-color: #38bdf8; /* Tailwind sky-400 */
+        }
+        /* Ensure select dropdown arrows are visible in dark mode */
+        [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");
         }
     </style>
 </head>
@@ -159,48 +201,45 @@
         <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>
-            
-            <!-- 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">
+            <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">
                 <i class="fas fa-moon text-xl"></i>
             </button>
         </header>
 
-        <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="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="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 mb-1">Google Cloud API Key</label>
+                        <label for="apiKey" class="block text-sm font-medium text-blue-800 dark:text-blue-300 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">
-                            <button type="button" id="toggleKeyVisibility" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
+                            <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">
                                 <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">
+                    <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">
                         <i class="fas fa-save mr-2"></i> Save Key
                     </button>
                 </div>
-                <div class="mt-3 text-xs text-blue-600">
+                <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"></i> Your API key is stored locally and never sent to our servers.
+                        <i class="fas fa-info-circle mr-1.5"></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">
+                        <summary class="cursor-pointer hover:text-blue-800 dark:hover:text-blue-200">Need help getting an API key? (Click to expand)</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">
                             <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">Google Cloud Console</a></li>
+                                <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>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 border border-yellow-200 rounded text-yellow-800">
+                            <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">
                                 <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>
@@ -213,107 +252,99 @@
                 </div>
             </div>
 
-            <!-- Input Section -->
-            <div class="p-6">
+            <div class="p-6 dark:bg-gray-800">
                 <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">
+                    <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">
                         <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">
+                    <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">
                         <i class="fas fa-paste mr-2"></i> Paste Text
                     </button>
-                    <div id="dropzone" class="dropzone bg-gray-50 py-3 px-4 rounded-lg flex items-center justify-center cursor-pointer">
+                    <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 class="text-center">
-                            <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>
+                            <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, 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>
 
-            <!-- Document Display -->
-            <div class="border-t border-gray-200 p-6">
+            <div class="border-t border-gray-200 dark:border-gray-700 p-6 dark:bg-gray-800">
                 <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-xl font-semibold text-gray-800">Document Content</h2>
+                    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Document Content</h2>
                     <div class="flex items-center gap-2">
-                        <div class="text-sm text-gray-500" id="charCount">0 characters</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-400" id="charCount">0 characters</div>
                     </div>
                 </div>
-                
-                <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 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>
             </div>
 
-            <!-- Voice & Settings Section -->
-            <div class="border-t border-gray-200 p-6 bg-gray-50">
+            <div class="border-t border-gray-200 dark:border-gray-700 p-6 bg-gray-50 dark:bg-gray-850"> {/* Slightly different dark bg for separation */}
                 <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-xl font-semibold text-gray-800">Voice & Settings</h2>
+                    <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" 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">
+                            <select id="languageSelect" 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">
                                 <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">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-400">
                                 <i class="fas fa-chevron-down text-xs"></i>
                             </div>
                         </div>
-                        <button id="refreshVoicesBtn" class="text-blue-500 hover:text-blue-700 text-sm flex items-center">
+                        <button id="refreshVoicesBtn" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 text-sm flex items-center">
                             <i class="fas fa-sync-alt mr-1"></i> Refresh
                         </button>
                     </div>
                 </div>
-                
-                <!-- Cost Estimator -->
-                <div id="costEstimator" class="mb-4 p-3 bg-blue-100 border border-blue-200 rounded-lg hidden">
+
+                <div id="costEstimator" class="mb-4 p-3 rounded-lg hidden">
                     <div class="flex items-center justify-between">
                         <div class="flex items-center">
-                            <i class="fas fa-calculator text-blue-600 mr-2"></i>
-                            <span class="text-sm font-medium text-blue-800">Estimated Cost:</span>
+                            <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 text-blue-900" id="estimatedCost">$0.00</div>
-                            <div class="text-xs text-blue-600" id="costDetails">0 characters</div>
+                            <div class="text-lg font-bold" id="estimatedCost">$0.00</div>
+                            <div class="text-xs" id="costDetails">0 characters</div>
                         </div>
                     </div>
-                    <div class="mt-2 text-xs text-blue-600 flex justify-between items-center">
+                    <div class="mt-2 text-xs flex justify-between items-center">
                         <div>
-                            <span id="voiceType">Standard voice</span> • 
+                            <span id="voiceType">Standard voice</span> •
                             <span id="priceRate">$4.00/million chars</span>
                         </div>
-                        <button id="showCostBreakdown" class="text-blue-500 hover:text-blue-700 underline">
+                        <button id="showCostBreakdown" 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>
                 </div>
 
-                <!-- Voice Status Display -->
                 <div id="voiceStatus" class="voice-status p-4 rounded-lg mb-6">
                     <div class="flex items-center justify-between">
                         <div class="flex items-center">
-                            <i class="fas fa-microphone text-blue-600 mr-3"></i>
+                            <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" id="currentVoiceName">Loading voices...</div>
-                                <div class="text-sm text-gray-600" id="currentVoiceDetails">Please wait while voices are loaded</div>
+                                <div class="font-medium text-gray-800 dark:text-gray-100" id="currentVoiceName">Loading voices...</div>
+                                <div class="text-sm text-gray-600 dark:text-gray-300" id="currentVoiceDetails">Please wait</div>
                             </div>
                         </div>
-                        <button id="playVoiceSample" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm transition" disabled>
-                            <i class="fas fa-play mr-1"></i> Play Sample
+                        <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>
                     </div>
                 </div>
 
-                <!-- Voice Settings Grid -->
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                     <div>
-                        <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">
+                        <label for="rateSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Speed</label>
+                        <select id="rateSelect" 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 (Slow)</option>
                             <option value="0.8">0.8x</option>
                             <option value="1" selected>1x (Normal)</option>
@@ -322,10 +353,9 @@
                             <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">
+                        <label for="pitchSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pitch</label>
+                        <select id="pitchSelect" 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="-20">Low (-20st)</option>
                             <option value="-10">Lower (-10st)</option>
                             <option value="0" selected>Normal (0st)</option>
@@ -333,10 +363,9 @@
                             <option value="20">High (+20st)</option>
                         </select>
                     </div>
-                    
                     <div>
-                        <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">
+                        <label for="modelSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Voice Model</label>
+                        <select id="modelSelect" 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 - $4.00/1M chars (Default)</option>
                             <option value="wavenet">WaveNet - $16.00/1M chars</option>
                             <option value="neural2">Neural2 - $16.00/1M chars</option>
@@ -346,22 +375,20 @@
                 </div>
             </div>
 
-            <!-- Enhanced Audio Controls -->
-            <div class="audio-controls p-6 m-4">
+            <div class="audio-controls p-6 m-4 dark:bg-gray-800">
                 <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">Ready to synthesize:</span>
-                        <span id="synthesisStatus" class="text-sm text-blue-600 font-medium">Select voice and add text</span>
+                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Status:</span>
+                        <span id="synthesisStatus" class="text-sm text-blue-600 dark:text-blue-400 font-medium">Select voice and add text</span>
                     </div>
-                    
                     <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="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>
+                        <button id="pauseBtn" 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>
                             <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>
+                        <button id="stopBtn" 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>
                             <i class="fas fa-stop"></i>
                         </button>
                         <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">
@@ -369,36 +396,31 @@
                         </button>
                     </div>
                 </div>
-                
-                <!-- Enhanced Progress Container -->
-                <div class="progress-container">
-                    <div class="flex justify-between text-sm text-gray-600 mb-2">
+
+                <div class="progress-main-container">
+                    <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-1">
                         <span id="currentTime">0:00</span>
-                        <span class="text-xs text-gray-500">
+                        <span class="text-xs text-gray-500 dark:text-gray-400">
                             <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-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="progressContainer" class="progress-bar-container w-full h-3 flex relative cursor-pointer rounded-full">
                         <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>
-                        <!-- 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 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>
                     </div>
                 </div>
             </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 selectedVoice = null;
@@ -406,49 +428,39 @@
             let isPlaying = false;
             let isPaused = false;
             let audioContext = null;
-            let audioSource = null;
-            let audioBuffer = null;
-            let startTime = 0;
-            let pauseTime = 0;
-            let currentAudioBlob = null;
-            let currentReadingPosition = 0;
-            let estimatedDuration = 0;
-            let synthesisProgressInterval = null;
-            
-            const MAX_CHUNK_SIZE = 5000;
+            let audioSource = null; // BufferSourceNode for playing audio
+            let audioBuffer = null; // Holds the decoded audio data (potentially concatenated)
+            let playbackStartTime = 0; // audioContext.currentTime when playback started/resumed
+            let pausedAtTime = 0;    // Time within the audioBuffer where pause occurred
+            let currentAudioBlob = null; // Blob of the full synthesized audio for download
+            let currentReadingPosition = 0; // Character position for reading highlight
+            // No estimatedDuration, will rely on audioBuffer.duration
+
+            const MAX_CHUNK_SIZE = 4800; // Reduced slightly for safety with UTF-8 characters (Google TTS limit is 5000 bytes)
             const PRICING = {
                 standard: 4.00,
                 wavenet: 16.00,
                 neural2: 16.00,
                 studio: 160.00
             };
-
-            // Priority list for Standard male voices
-            const defaultStandardMaleVoices = [
-                'en-US-Standard-A',
-                'en-US-Standard-B', 
-                'en-US-Standard-D',
-                'en-US-Standard-I',
-                'en-GB-Standard-A',
-                'en-GB-Standard-B',
-                'en-GB-Standard-D',
-                'en-AU-Standard-A',
-                'en-AU-Standard-B',
-                'en-AU-Standard-D'
+            const defaultStandardMaleVoices = [ // Prioritized list for default voice selection
+                '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'
             ];
-            
-            // Global error handler
+
+            // --- Global error handlers ---
             window.addEventListener('error', (e) => {
                 console.error('Global error caught:', e.error);
+                showToast(`An unexpected error occurred: ${e.message}`, 'error', 5000);
             });
-            
-            // Global unhandled promise rejection handler
             window.addEventListener('unhandledrejection', (e) => {
                 console.error('Unhandled promise rejection:', e.reason);
+                showToast(`An unhandled promise error occurred: ${e.reason.message || e.reason}`, 'error', 5000);
                 e.preventDefault();
             });
-            
-            // DOM Elements
+
+            // --- DOM Elements ---
             const apiKeyInput = document.getElementById('apiKey');
             const saveKeyBtn = document.getElementById('saveKeyBtn');
             const uploadBtn = document.getElementById('uploadBtn');
@@ -470,39 +482,42 @@
             const currentVoiceDetails = document.getElementById('currentVoiceDetails');
             const playVoiceSample = document.getElementById('playVoiceSample');
             const synthesisStatus = document.getElementById('synthesisStatus');
-            const currentTime = document.getElementById('currentTime');
-            const totalTime = document.getElementById('totalTime');
+            const currentTimeEl = document.getElementById('currentTime');
+            const totalTimeEl = document.getElementById('totalTime');
             const progressContainer = document.getElementById('progressContainer');
             const progressBar = document.getElementById('progressBar');
             const readingProgress = document.getElementById('readingProgress');
             const currentPositionMarker = document.getElementById('currentPositionMarker');
-            const synthesisProgress = document.getElementById('synthesisProgress');
-            const progressPercentage = document.getElementById('progressPercentage');
-            
-            // Dark mode elements
+            const synthesisProgressEl = document.getElementById('synthesisProgress');
+            const progressPercentageEl = document.getElementById('progressPercentage');
             const darkModeToggle = document.getElementById('darkModeToggle');
-            
-            // Initialize function
+            const toggleKeyVisibilityBtn = document.getElementById('toggleKeyVisibility');
+            const eyeIcon = document.getElementById('eyeIcon');
+
+
+            // --- Initialization ---
             function init() {
-                // Load saved API key
                 if (apiKey) {
                     apiKeyInput.value = apiKey;
-                    loadVoices();
+                    loadVoices(); // Attempt to load voices if API key exists
                 }
-                
-                // 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 library not found. PDF processing will not be available.');
+                }
+                 if (typeof mammoth === 'undefined') {
+                    console.warn('mammoth.js library not found. DOCX processing will not be available.');
                 }
-                
-                // 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', () => {
+
+
+                // Initialize AudioContext on first user interaction to comply with autoplay policies
+                document.body.addEventListener('click', initAudioContext, { once: true });
+                document.body.addEventListener('keydown', initAudioContext, { once: true });
+
+
+                toggleKeyVisibilityBtn.addEventListener('click', () => {
                     if (apiKeyInput.type === 'password') {
                         apiKeyInput.type = 'text';
                         eyeIcon.className = 'fas fa-eye-slash';
@@ -511,360 +526,174 @@
                         eyeIcon.className = 'fas fa-eye';
                     }
                 });
-                
-                // Dark mode initialization
+
                 initDarkMode();
-                
-                // Initialize progress indicator
                 initProgressIndicator();
-                
-                // Initialize download feature
                 initDownloadFeature();
-                
-                // Event listeners to update cost estimates
+
                 modelSelect.addEventListener('change', (e) => {
                     updateCostEstimator();
                     autoSelectVoiceForModel(e.target.value);
                 });
-                
                 rateSelect.addEventListener('change', updateCostEstimator);
                 pitchSelect.addEventListener('change', updateCostEstimator);
-                
+                languageSelect.addEventListener('change', loadVoices); // Reload voices on language change
+
                 document.getElementById('showCostBreakdown')?.addEventListener('click', showCostBreakdownModal);
-                
-                // Play voice sample event
                 playVoiceSample.addEventListener('click', () => {
-                    if (selectedVoice) {
-                        playSample(selectedVoice);
-                    }
+                    if (selectedVoice) playSample(selectedVoice);
+                    else showToast('Please select a voice first.', 'info');
                 });
-            }
-            
-            // 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 {
-                    return { type: 'standard', name: 'Standard', rate: PRICING.standard };
-                }
-            }
-            
-            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 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;
-                }
-                
-                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 {
-                    costEstimator.className = 'mb-4 p-3 bg-red-100 border border-red-200 rounded-lg';
-                    estimatedCost.className = 'text-lg font-bold text-red-900';
-                }
-            }
-            
-            // Find and select default STANDARD male voice
-            function selectDefaultStandardMaleVoice() {
-                if (!availableVoices.length) return;
-                
-                // Only look for Standard voices
-                const standardVoices = availableVoices.filter(v => v.name.includes('Standard'));
-                
-                // Try to find preferred male voices in order
-                for (const preferredVoice of defaultStandardMaleVoices) {
-                    const voice = standardVoices.find(v => v.name === preferredVoice);
-                    if (voice) {
-                        selectVoice(voice);
-                        return voice;
-                    }
-                }
-                
-                // Fallback to first standard male voice
-                const standardMaleVoice = standardVoices.find(v => v.ssmlGender === 'MALE');
-                if (standardMaleVoice) {
-                    selectVoice(standardMaleVoice);
-                    return standardMaleVoice;
-                }
-                
-                // Final fallback to any standard voice
-                if (standardVoices.length > 0) {
-                    selectVoice(standardVoices[0]);
-                    return standardVoices[0];
-                }
-                
-                return null;
-            }
-            
-            // Auto select voice for model
-            function autoSelectVoiceForModel(model) {
-                if (!availableVoices.length) return;
-                
-                let preferredVoices = [];
-                
-                switch (model) {
-                    case 'studio':
-                        preferredVoices = availableVoices.filter(v => v.name.includes('Studio'));
-                        break;
-                    case 'wavenet':
-                        preferredVoices = availableVoices.filter(v => v.name.includes('Wavenet'));
-                        break;
-                    case 'neural2':
-                        preferredVoices = availableVoices.filter(v => v.name.includes('Neural2'));
-                        break;
-                    case 'standard':
-                        preferredVoices = availableVoices.filter(v => v.name.includes('Standard'));
-                        break;
-                }
-                
-                if (preferredVoices.length > 0) {
-                    // Prefer male voices if available
-                    const maleVoice = preferredVoices.find(v => v.ssmlGender === 'MALE');
-                    const voiceToSelect = maleVoice || preferredVoices[0];
-                    selectVoice(voiceToSelect);
-                    showToast(`Voice changed to ${voiceToSelect.name} for ${model} model`, 'success', 2000);
-                }
-            }
-            
-            // 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();
-                    }
+
+                // Setup main playback controls
+                playBtn.addEventListener('click', handlePlayPause);
+                pauseBtn.addEventListener('click', pausePlayback);
+                stopBtn.addEventListener('click', stopPlayback);
+
+                // File handling listeners
+                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);
+
+                updatePlaybackButtons(); // Initial state
+                updateSynthesisStatus(); // Initial state
             }
-            
+
+            // --- Audio Context ---
             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');
+                if (!audioContext) {
+                    try {
+                        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                        if (audioContext.state === 'suspended') {
+                             audioContext.resume();
+                        }
+                        console.log('AudioContext initialized.');
+                    } catch (e) {
+                        console.error('Web Audio API not supported or could not be initialized.', e);
+                        showToast('Your browser does not support the Web Audio API. Playback may not work.', 'error', 5000);
+                    }
                 }
+                 return audioContext;
             }
-            
-            // Dark Mode Implementation
+
+
+            // --- Dark Mode ---
             function initDarkMode() {
                 const savedTheme = localStorage.getItem('theme');
                 const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                
-                if (savedTheme) {
-                    document.documentElement.setAttribute('data-theme', savedTheme);
-                    updateDarkModeIcon(savedTheme === 'dark');
-                } else if (systemPrefersDark) {
-                    document.documentElement.setAttribute('data-theme', 'dark');
-                    updateDarkModeIcon(true);
+                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';
                 } else {
-                    document.documentElement.setAttribute('data-theme', 'light');
-                    updateDarkModeIcon(false);
+                    root.setAttribute('data-theme', 'light');
+                    icon.className = 'fas fa-moon text-xl';
                 }
-                
                 darkModeToggle.addEventListener('click', toggleDarkMode);
             }
-            
+
             function toggleDarkMode() {
-                const currentTheme = document.documentElement.getAttribute('data-theme');
+                const root = document.documentElement;
+                const currentTheme = root.getAttribute('data-theme');
                 const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-                
-                document.documentElement.setAttribute('data-theme', newTheme);
-                localStorage.setItem('theme', newTheme);
-                updateDarkModeIcon(newTheme === 'dark');
-            }
-            
-            function updateDarkModeIcon(isDark) {
                 const icon = darkModeToggle.querySelector('i');
-                icon.className = isDark ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl';
+
+                root.setAttribute('data-theme', newTheme);
+                localStorage.setItem('theme', newTheme);
+                icon.className = newTheme === 'dark' ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl';
             }
-            
-            // Progress indicator initialization
+
+            // --- Progress Indicator & Seeking ---
             function initProgressIndicator() {
                 progressContainer.addEventListener('click', (e) => {
-                    if (!audioSource || !audioBuffer) return;
-                    
+                    if (!audioBuffer || !isPlaying) return; // Only seek if playing and buffer exists
+
                     const rect = progressContainer.getBoundingClientRect();
                     const clickX = e.clientX - rect.left;
-                    const percentage = clickX / rect.width;
+                    const percentage = Math.max(0, Math.min(1, clickX / rect.width)); // Clamp between 0 and 1
                     const newTime = percentage * audioBuffer.duration;
-                    
+
                     seekToTime(newTime);
                 });
             }
-            
+
             function seekToTime(time) {
-                if (!audioSource || !audioBuffer) return;
-                
+                if (!audioContext || !audioSource || !audioBuffer || !isPlaying) return;
+
+                // Stop current playback
+                audioSource.onended = null; // Prevent stopPlayback from being called
                 audioSource.stop();
-                
+
+                // Create new source and start from new time
                 audioSource = audioContext.createBufferSource();
                 audioSource.buffer = audioBuffer;
                 audioSource.connect(audioContext.destination);
-                
-                startTime = audioContext.currentTime - time;
-                audioSource.start(0, time);
-                
-                audioSource.onended = () => {
-                    if (isPlaying && !isPaused) {
+
+                pausedAtTime = time; // Store the seeked time
+                playbackStartTime = audioContext.currentTime - pausedAtTime; // Adjust playbackStartTime
+
+                audioSource.start(0, pausedAtTime);
+
+                audioSource.onended = () => { // Re-attach onended handler
+                    if (isPlaying && !isPaused) { // If it naturally ends
                         stopPlayback();
                     }
                 };
+                // Update UI immediately
+                updateProgressUI(pausedAtTime, audioBuffer.duration);
             }
-            
-            // Download feature initialization
+
+            // --- Download ---
             function initDownloadFeature() {
-                downloadBtn.addEventListener('click', downloadAudio);
+                downloadBtn.addEventListener('click', downloadCurrentAudio);
             }
-            
-            async function downloadAudio() {
+
+            async function downloadCurrentAudio() {
                 if (!currentAudioBlob) {
-                    showToast('No audio available to download', 'error');
+                    showToast('No audio available to download. Synthesize first.', 'info');
                     return;
                 }
-                
                 try {
                     const url = URL.createObjectURL(currentAudioBlob);
                     const a = document.createElement('a');
+                    a.style.display = 'none';
                     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`;
-                    
+                    const timestamp = new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-');
+                    const voiceNameSafe = selectedVoice ? selectedVoice.name.replace(/[^a-zA-Z0-9_]/g, '-') : 'unknown-voice';
+                    a.download = `tts-audio-${voiceNameSafe}-${timestamp}.mp3`;
                     document.body.appendChild(a);
                     a.click();
                     document.body.removeChild(a);
                     URL.revokeObjectURL(url);
-                    
-                    showToast('Audio downloaded successfully', 'success');
+                    showToast('Audio download started.', 'success');
                 } catch (error) {
                     console.error('Download error:', error);
-                    showToast('Failed to download audio', 'error');
+                    showToast('Failed to download audio: ' + error.message, 'error');
                 }
             }
-            
-            // Toast notifications
-            function showToast(message, type = 'success', duration = 3000) {
-                // Remove existing toasts
-                document.querySelectorAll('.toast').forEach(toast => toast.remove());
-                
+
+            // --- Toast Notifications ---
+            function showToast(message, type = 'info', duration = 3000) {
+                document.querySelectorAll('.toast').forEach(toast => toast.remove()); // Remove existing
                 const toast = document.createElement('div');
                 toast.className = `toast ${type}`;
                 toast.textContent = message;
                 document.body.appendChild(toast);
-                
                 setTimeout(() => {
-                    toast.style.animation = 'slideOut 0.3s ease';
+                    toast.style.animation = 'fadeOut 0.3s ease forwards';
                     setTimeout(() => toast.remove(), 300);
-                }, duration);
+                }, duration - 300);
             }
-            
-            // Utility function for file size formatting
+
+            // --- File Utilities ---
             function formatFileSize(bytes) {
                 if (bytes === 0) return '0 Bytes';
                 const k = 1024;
@@ -872,1015 +701,1045 @@
                 const i = Math.floor(Math.log(bytes) / Math.log(k));
                 return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
             }
-            
-            // Update synthesis status
+
+            // --- UI Updates (Status, Cost) ---
             function updateSynthesisStatus() {
+                if (!apiKey) {
+                     synthesisStatus.textContent = 'API key needed'; return;
+                }
                 if (!selectedVoice) {
-                    synthesisStatus.textContent = 'Please select an API key to load voices';
-                    return;
+                    synthesisStatus.textContent = 'Loading/Select voice'; return;
                 }
-                
                 if (!currentText.trim()) {
-                    synthesisStatus.textContent = 'Add text to synthesize';
+                    synthesisStatus.textContent = 'Add text to synthesize'; return;
+                }
+                const voiceTypeInfo = getVoiceTypeAndPricing(selectedVoice.name);
+                const estimation = calculateEstimatedCost(currentText.length, voiceTypeInfo);
+                synthesisStatus.textContent = `Ready (${currentText.length.toLocaleString()} chars, ~$${estimation.cost.toFixed(4)})`;
+            }
+
+            function getVoiceTypeAndPricing(voiceName) {
+                const nameLower = voiceName.toLowerCase();
+                if (nameLower.includes('studio')) return { type: 'studio', name: 'Studio', rate: PRICING.studio };
+                if (nameLower.includes('wavenet')) return { type: 'wavenet', name: 'WaveNet', rate: PRICING.wavenet };
+                if (nameLower.includes('neural2')) return { type: 'neural2', name: 'Neural2', rate: PRICING.neural2 };
+                return { type: 'standard', name: 'Standard', rate: PRICING.standard };
+            }
+
+            function calculateEstimatedCost(textLength, voiceTypeInfo) {
+                if (!textLength || !voiceTypeInfo) return { cost: 0, details: '' };
+                const cost = (textLength / 1000000) * voiceTypeInfo.rate;
+                return { cost: cost, details: `${textLength.toLocaleString()} characters` };
+            }
+
+            function updateCostEstimator() {
+                const estimatorEl = document.getElementById('costEstimator');
+                const costEl = document.getElementById('estimatedCost');
+                const detailsEl = document.getElementById('costDetails');
+                const voiceTypeDisplayEl = document.getElementById('voiceType');
+                const priceRateDisplayEl = document.getElementById('priceRate');
+
+                if (!selectedVoice || !currentText.trim()) {
+                    estimatorEl.classList.add('hidden');
                     return;
                 }
-                
-                const voiceType = getVoiceTypeAndPricing(selectedVoice.name);
-                const estimation = calculateEstimatedCost(currentText.length, voiceType);
-                synthesisStatus.textContent = `Ready (${currentText.length} chars, ~$${estimation.cost.toFixed(4)})`;
+
+                const voiceTypeInfo = getVoiceTypeAndPricing(selectedVoice.name);
+                const estimation = calculateEstimatedCost(currentText.length, voiceTypeInfo);
+
+                estimatorEl.classList.remove('hidden');
+                costEl.textContent = `$${estimation.cost.toFixed(4)}`;
+                detailsEl.textContent = estimation.details;
+                voiceTypeDisplayEl.textContent = `${voiceTypeInfo.name} voice`;
+                priceRateDisplayEl.textContent = `$${voiceTypeInfo.rate.toFixed(2)}/million chars`;
+
+                // Reset classes then apply new ones for color coding
+                estimatorEl.className = 'mb-4 p-3 rounded-lg'; // Base classes
+                let colorClasses = 'bg-blue-100 border border-blue-200 text-blue-800 dark:bg-blue-900 dark:border-blue-700 dark:text-blue-200';
+                let costColor = 'text-blue-900 dark:text-blue-100';
+
+                if (estimation.cost < 0.01) { // Adjusted threshold for green
+                    colorClasses = 'bg-green-100 border border-green-200 text-green-800 dark:bg-green-900 dark:border-green-700 dark:text-green-200';
+                    costColor = 'text-green-900 dark:text-green-100';
+                } else if (estimation.cost >= 1.00 && estimation.cost < 5.00) {
+                    colorClasses = 'bg-yellow-100 border border-yellow-200 text-yellow-800 dark:bg-yellow-900 dark:border-yellow-700 dark:text-yellow-200';
+                    costColor = 'text-yellow-900 dark:text-yellow-100';
+                } else if (estimation.cost >= 5.00) {
+                    colorClasses = 'bg-red-100 border border-red-200 text-red-800 dark:bg-red-900 dark:border-red-700 dark:text-red-200';
+                    costColor = 'text-red-900 dark:text-red-100';
+                }
+                estimatorEl.classList.add(...colorClasses.split(' '));
+                costEl.className = `text-lg font-bold ${costColor}`;
+                // Ensure child elements also get dark mode text colors if not covered by parent
+                detailsEl.className = `text-xs ${colorClasses.split(' ').filter(c => c.startsWith('text-') || c.startsWith('dark:text-')).join(' ')}`;
+                voiceTypeDisplayEl.parentElement.className = `text-xs ${colorClasses.split(' ').filter(c => c.startsWith('text-') || c.startsWith('dark:text-')).join(' ')}`;
             }
-            
-            // 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.');
+
+
+            function showCostBreakdownModal() {
+                const modalId = 'costBreakdownModal';
+                if (document.getElementById(modalId)) return; // Prevent multiple modals
+
+                const modal = document.createElement('div');
+                modal.id = modalId;
+                modal.className = 'fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 p-4';
+                const voiceTypeInfo = selectedVoice ? getVoiceTypeAndPricing(selectedVoice.name) : null;
+                const estimation = (currentText && voiceTypeInfo) ? calculateEstimatedCost(currentText.length, voiceTypeInfo) : null;
+
+                modal.innerHTML = `
+                    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-lg w-full mx-auto shadow-xl transform transition-all scale-95 opacity-0 animate-modalEnter">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Google TTS Pricing</h3>
+                            <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" data-close-modal>
+                                <i class="fas fa-times text-2xl"></i>
+                            </button>
+                        </div>
+                        <div class="space-y-3 text-sm">
+                            ${Object.entries(PRICING).map(([key, value]) => `
+                                <div class="bg-gray-50 dark:bg-gray-700 p-3 rounded border border-gray-200 dark:border-gray-600">
+                                    <div class="flex justify-between items-center">
+                                        <span class="font-medium text-gray-700 dark:text-gray-200">${key.charAt(0).toUpperCase() + key.slice(1)} Voices ${key === 'standard' ? '(Default)' : ''}</span>
+                                        <span class="text-gray-900 dark:text-gray-50 font-bold">$${value.toFixed(2)}</span>
+                                    </div>
+                                    <div class="text-xs text-gray-500 dark:text-gray-400">per million characters</div>
+                                </div>
+                            `).join('')}
+                        </div>
+                        ${currentText ? `
+                        <div class="mt-4 p-3 bg-gray-100 dark:bg-gray-750 rounded border border-gray-200 dark:border-gray-600">
+                            <h4 class="font-medium text-gray-800 dark:text-gray-200 mb-2">Current Estimate:</h4>
+                            <div class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                                <div>Document: ${currentText.length.toLocaleString()} characters</div>
+                                ${selectedVoice && voiceTypeInfo ? `
+                                    <div>Voice Type: ${voiceTypeInfo.name}</div>
+                                    <div>Rate: $${voiceTypeInfo.rate.toFixed(2)}/million chars</div>
+                                    <div class="font-semibold mt-1">Estimated Total: $${estimation ? estimation.cost.toFixed(4) : 'N/A'}</div>
+                                ` : '<div>No voice selected for precise estimation.</div>'}
+                            </div>
+                        </div>` : '<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">Load a document to see a specific cost estimate.</div>'}
+                        <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
+                            <p>* Prices are based on Google Cloud Text-to-Speech API. Actual costs may vary.</p>
+                            <p>* Always check your Google Cloud Console for the most current pricing information.</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 shadow hover:shadow-md" data-close-modal>
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                    <style>
+                        @keyframes modalEnter {
+                            to { transform: scale(1); opacity: 1; }
                         }
-                        
-                        // 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.');
+                    </style>
+                `;
+                document.body.appendChild(modal);
+                // Animate in
+                setTimeout(() => {
+                    const modalContent = modal.querySelector('.bg-white');
+                    if (modalContent) {
+                         modalContent.classList.remove('scale-95', 'opacity-0');
+                    }
+                }, 10);
+
+
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal || e.target.closest('[data-close-modal]')) {
+                        const modalContent = modal.querySelector('.bg-white');
+                        if (modalContent) {
+                            modalContent.style.transform = 'scale(0.95)';
+                            modalContent.style.opacity = '0';
                         }
-                    } 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;
+                        setTimeout(() => modal.remove(), 200);
                     }
-                } else {
-                    showToast('Please enter a valid API key', 'error');
+                });
+            }
+
+
+            // --- API Key Management ---
+            async function saveApiKey() {
+                const key = apiKeyInput.value ? apiKeyInput.value.trim() : '';
+                if (!key) {
+                    showToast('Please enter a valid API key.', 'error');
+                    return;
                 }
-            });
-            
-            // Load available voices from Google TTS
+
+                saveKeyBtn.innerHTML = '<div class="loading-spinner inline-block w-4 h-4 mr-2"></div>Validating...';
+                saveKeyBtn.disabled = true;
+
+                try {
+                    if (key.length < 20 || !key.match(/^[A-Za-z0-9_-]+$/)) { // Basic sanity check
+                        throw new Error('Invalid API key format. Please check your key.');
+                    }
+
+                    // Test API key by trying to fetch voices (a light, authenticated request)
+                    const testUrl = `https://texttospeech.googleapis.com/v1/voices?languageCode=en-US`;
+                    const response = await fetch(testUrl, {
+                        method: 'GET',
+                        headers: { 'X-Goog-Api-Key': key, 'Accept': 'application/json' },
+                        mode: 'cors', cache: 'no-cache'
+                    });
+
+                    if (response.ok) {
+                        apiKey = key;
+                        localStorage.setItem('googleTTSApiKey', key);
+                        showToast('API key validated and saved successfully!', 'success');
+                        loadVoices(); // Load voices with the new key
+                    } else {
+                        const errorData = await response.json().catch(() => null);
+                        const message = errorData?.error?.message || `Validation failed (HTTP ${response.status})`;
+                        throw new Error(`API key validation failed: ${message}. Check key and Cloud settings.`);
+                    }
+                } catch (error) {
+                    console.error('API key validation error:', error);
+                    showToast(error.message, 'error', 6000);
+                    apiKey = ''; // Clear invalid key
+                    localStorage.removeItem('googleTTSApiKey');
+                } finally {
+                    saveKeyBtn.innerHTML = '<i class="fas fa-save mr-2"></i> Save Key';
+                    saveKeyBtn.disabled = false;
+                    updateSynthesisStatus();
+                }
+            }
+
+            // --- Voice Loading & Selection ---
             async function loadVoices() {
                 if (!apiKey) {
-                    currentVoiceName.textContent = 'No API key provided';
-                    currentVoiceDetails.textContent = 'Please enter your Google Cloud API key above';
+                    currentVoiceName.textContent = 'No API key';
+                    currentVoiceDetails.textContent = 'Enter API key to load voices.';
                     playVoiceSample.disabled = true;
+                    availableVoices = [];
+                    selectedVoice = null;
+                    updatePlaybackButtons();
+                    updateSynthesisStatus();
                     return;
                 }
-                
+
                 currentVoiceName.textContent = 'Loading voices...';
-                currentVoiceDetails.textContent = 'Please wait while voices are loaded';
+                currentVoiceDetails.textContent = '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.trim(),
-                            'Accept': 'application/json',
-                        },
-                        mode: 'cors',
-                        cache: 'no-cache'
+                        headers: { 'X-Goog-Api-Key': apiKey, 'Accept': 'application/json' },
+                        mode: 'cors', cache: 'no-cache'
                     });
-                    
+
                     if (!response.ok) {
-                        throw new Error(`API error (${response.status}): Failed to load voices`);
+                        const errorData = await response.json().catch(() => null);
+                        const message = errorData?.error?.message || `API error (${response.status})`;
+                        throw new Error(`Failed to load voices: ${message}`);
                     }
-                    
                     const data = await response.json();
-                    
-                    if (!data || !data.voices) {
-                        throw new Error('Invalid response from Google TTS API - no voices returned');
+                    if (!data || !data.voices || data.voices.length === 0) {
+                        throw new Error('No voices returned for the selected language.');
                     }
-                    
-                    // Store all voices for model switching
+
                     availableVoices = data.voices;
-                    
-                    // Always start with Standard voices (as per user request)
-                    selectDefaultStandardMaleVoice();
-                    updateCostEstimator();
-                    updateSynthesisStatus();
-                    
-                    showToast(`Loaded ${availableVoices.length} voices successfully`, 'success');
-                    
+                    showToast(`Loaded ${availableVoices.length} voices for ${languageCode}.`, 'success');
+                    // Attempt to select a default voice based on current model preference
+                    autoSelectVoiceForModel(modelSelect.value, true); // true to force selection even if current exists
+
                 } catch (error) {
                     console.error('Error loading voices:', error);
                     currentVoiceName.textContent = 'Error loading voices';
-                    currentVoiceDetails.textContent = error.message;
-                    showToast('Failed to load voices: ' + error.message, 'error');
+                    currentVoiceDetails.textContent = error.message.substring(0, 100); // Keep it brief
+                    showToast(error.message, 'error', 5000);
+                    availableVoices = [];
+                    selectedVoice = null;
+                } finally {
+                    playVoiceSample.disabled = !selectedVoice;
+                    refreshVoicesBtn.disabled = false;
+                    if (loadingIcon) loadingIcon.classList.remove('fa-spin');
+                    updateSynthesisStatus();
+                    updateCostEstimator();
+                }
+            }
+
+            function selectDefaultStandardMaleVoice() {
+                if (!availableVoices.length) return null;
+                const standardVoices = availableVoices.filter(v => v.name.toLowerCase().includes('standard'));
+                for (const preferredName of defaultStandardMaleVoices) {
+                    const voice = standardVoices.find(v => v.name === preferredName && v.languageCodes.includes(languageSelect.value));
+                    if (voice) return selectVoice(voice);
+                }
+                const anyStandardMale = standardVoices.find(v => v.ssmlGender === 'MALE' && v.languageCodes.includes(languageSelect.value));
+                if (anyStandardMale) return selectVoice(anyStandardMale);
+                const anyStandard = standardVoices.find(v => v.languageCodes.includes(languageSelect.value));
+                if (anyStandard) return selectVoice(anyStandard);
+                // If still no standard, pick first available for language
+                const firstAvailable = availableVoices.find(v => v.languageCodes.includes(languageSelect.value));
+                return firstAvailable ? selectVoice(firstAvailable) : null;
+            }
+
+            function autoSelectVoiceForModel(modelType, forceSelection = false) {
+                if (!availableVoices.length) {
+                    selectDefaultStandardMaleVoice(); // Try to pick a general default if no voices for model
+                    return;
+                }
+
+                // If a voice is already selected and it matches the model type, and not forcing, keep it.
+                if (selectedVoice && !forceSelection) {
+                    const currentVoiceModel = getVoiceTypeAndPricing(selectedVoice.name).type.toLowerCase();
+                    if (currentVoiceModel === modelType.toLowerCase() || (modelType.toLowerCase() === 'standard' && !currentVoiceModel.match(/wavenet|neural2|studio/))) {
+                         // Ensure it matches current language too
+                        if (selectedVoice.languageCodes.includes(languageSelect.value)) {
+                            console.log(`Keeping current voice ${selectedVoice.name} for model ${modelType}`);
+                            selectVoice(selectedVoice); // Re-select to update UI if needed
+                            return;
+                        }
+                    }
+                }
+
+
+                const modelKeyword = modelType === 'standard' ? 'Standard' : modelType.charAt(0).toUpperCase() + modelType.slice(1);
+                let candidates = availableVoices.filter(v =>
+                    v.name.includes(modelKeyword) && v.languageCodes.includes(languageSelect.value)
+                );
+
+                if (modelType === 'standard' && candidates.length === 0) { // Broader match for standard if no "Standard" keyword found
+                    candidates = availableVoices.filter(v =>
+                        !v.name.match(/Wavenet|Neural2|Studio/i) && v.languageCodes.includes(languageSelect.value)
+                    );
+                }
+
+
+                if (candidates.length > 0) {
+                    // Prefer male, then female, then any
+                    let voiceToSelect = candidates.find(v => v.ssmlGender === 'MALE');
+                    if (!voiceToSelect) voiceToSelect = candidates.find(v => v.ssmlGender === 'FEMALE');
+                    if (!voiceToSelect) voiceToSelect = candidates[0];
+                    selectVoice(voiceToSelect);
+                    showToast(`Auto-selected ${voiceToSelect.name} for ${modelType} model.`, 'info', 2000);
+                } else {
+                    showToast(`No ${modelKeyword} voices found for ${languageSelect.value}. Trying default.`, 'info', 2500);
+                    selectDefaultStandardMaleVoice(); // Fallback to general default
                 }
             }
-            
+
+
             function selectVoice(voice) {
+                if (!voice) {
+                    console.warn("Attempted to select a null voice.");
+                    selectedVoice = null;
+                    currentVoiceName.textContent = 'No voice selected';
+                    currentVoiceDetails.textContent = 'Please choose a voice.';
+                    playVoiceSample.disabled = true;
+                    return null;
+                }
                 selectedVoice = voice;
-                
-                // Update voice display
-                const displayName = voice.name.replace(/en-US-|en-GB-|en-AU-/, '').replace(/-/g, ' ');
+                const displayName = voice.name.replace(`${languageSelect.value}-`, '').replace(/-/g, ' ');
                 currentVoiceName.textContent = displayName;
-                
-                const voiceType = getVoiceTypeAndPricing(voice.name);
-                const genderIcon = voice.ssmlGender === 'MALE' ? '♂' : voice.ssmlGender === 'FEMALE' ? '♀' : '○';
-                currentVoiceDetails.textContent = `${genderIcon} ${voice.ssmlGender} • ${voiceType.name} Voice • $${voiceType.rate}/1M chars`;
-                
+                const voiceTypeInfo = getVoiceTypeAndPricing(voice.name);
+                const genderIcon = voice.ssmlGender === 'MALE' ? '♂ Male' : voice.ssmlGender === 'FEMALE' ? '♀ Female' : 'Neutral';
+                currentVoiceDetails.textContent = `${genderIcon} • ${voiceTypeInfo.name} • $${voiceTypeInfo.rate.toFixed(2)}/M chars`;
                 playVoiceSample.disabled = false;
                 updateCostEstimator();
                 updateSynthesisStatus();
-                
-                showToast(`Selected: ${voice.name}`, 'success', 1500);
+                // Do not show toast here, autoSelectVoiceForModel or manual selection should handle it.
+                return voice;
             }
-            
-            // Play voice sample
+
+            // --- TTS Synthesis & Playback Sample ---
             async function playSample(voice) {
-                if (!apiKey) {
-                    showToast('Please enter your API key first', 'error');
-                    return;
-                }
-                
-                if (isPlaying) {
-                    stopPlayback();
-                }
-                
+                if (!apiKey) { showToast('API key required for sample.', 'error'); return; }
+                if (isPlaying) stopPlayback(); // Stop any ongoing main playback
+
+                const sampleButtonOriginalText = playVoiceSample.innerHTML;
+                playVoiceSample.innerHTML = '<div class="loading-spinner inline-block w-3 h-3"></div>';
+                playVoiceSample.disabled = true;
+
                 try {
-                    showSynthesisProgress(0);
                     const sampleText = "Hello, this is a sample of my voice. I can read your documents with natural sounding speech.";
-                    const audioData = await synthesizeSpeech(sampleText, voice, 1, 0, modelSelect.value);
-                    hideSynthesisProgress();
-                    playAudioData(audioData);
+                    // Use current settings for rate/pitch but always standard model for quick sample
+                    const audioBase64 = await synthesizeSpeech(sampleText, voice,
+                        parseFloat(rateSelect.value),
+                        parseFloat(pitchSelect.value),
+                        getVoiceTypeAndPricing(voice.name).type // Use actual model of selected voice
+                    );
+                    await playSingleAudioChunk(audioBase64, true); // true for isSample
                 } catch (error) {
-                    hideSynthesisProgress();
                     console.error('Error playing sample:', error);
                     showToast('Failed to play sample: ' + error.message, 'error');
+                } finally {
+                    playVoiceSample.innerHTML = sampleButtonOriginalText;
+                    playVoiceSample.disabled = false;
                 }
             }
-            
-            // Show/hide synthesis progress
+
             function showSynthesisProgress(progress) {
-                synthesisProgress.classList.remove('hidden');
-                progressPercentage.textContent = `${Math.round(progress)}%`;
+                synthesisProgressEl.classList.remove('hidden');
+                progressPercentageEl.textContent = `${Math.round(progress)}%`;
             }
-            
             function hideSynthesisProgress() {
-                synthesisProgress.classList.add('hidden');
+                synthesisProgressEl.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 = {
+
+            async function synthesizeSpeech(text, voiceConfig, rate = 1, pitch = 0, model = 'standard') {
+                if (!apiKey) throw new Error('API key not provided.');
+                if (!text || !text.trim()) throw new Error('No text for synthesis.');
+                if (!voiceConfig) throw new Error('Voice configuration not provided.');
+
+                const requestBody = {
                     input: { text: text.trim() },
-                    voice: voiceConfig,
-                    audioConfig: audioConfig
+                    voice: {
+                        languageCode: voiceConfig.languageCodes[0], // Use first lang code of selected voice
+                        name: voiceConfig.name,
+                        // ssmlGender: voiceConfig.ssmlGender // Not always needed if name is specific
+                    },
+                    audioConfig: {
+                        audioEncoding: 'MP3',
+                        speakingRate: Math.max(0.25, Math.min(4.0, rate)),
+                        pitch: Math.max(-20.0, Math.min(20.0, pitch)),
+                    }
                 };
-                
+                // Add effectsProfileId for Studio voices if applicable
+                if (model.toLowerCase() === 'studio' && voiceConfig.name.toLowerCase().includes('studio')) {
+                    // Example effect, check Google Docs for valid profiles for your voice
+                    // requestBody.audioConfig.effectsProfileId = ['telephony-class-application'];
+                    console.log("Studio voice detected, consider effectsProfileId if needed.");
+                }
+
+
+                const url = `https://texttospeech.googleapis.com/v1/text:synthesize`;
+                let response;
                 try {
-                    let response;
+                     response = await fetch(url, {
+                        method: 'POST',
+                        headers: { 'X-Goog-Api-Key': apiKey, 'Content-Type': 'application/json', 'Accept': 'application/json' },
+                        body: JSON.stringify(requestBody),
+                        mode: 'cors', cache: 'no-cache'
+                    });
+                } catch (networkOrCorsError) {
+                     // Fallback attempt with key in URL (less secure, for specific restrictive environments)
+                     console.warn("Primary API call failed, attempting fallback with key in URL:", networkOrCorsError);
+                     const fallbackUrl = `https://texttospeech.googleapis.com/v1/text:synthesize?key=${encodeURIComponent(apiKey)}`;
+                     response = await fetch(fallbackUrl, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+                        body: JSON.stringify(requestBody),
+                        mode: 'cors', cache: 'no-cache'
+                    });
+                }
+
+
+                if (!response.ok) {
+                    let errorMessage = `Failed to synthesize speech (HTTP ${response.status})`;
                     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 errorData = await response.json();
+                        errorMessage = errorData.error?.message || errorMessage;
+                        if (errorData.error?.details) errorMessage += ` Details: ${JSON.stringify(errorData.error.details)}`;
+                    } catch (e) { /* Ignore if error response is not JSON */ }
+                    throw new Error(errorMessage);
+                }
+
+                const data = await response.json();
+                if (!data || !data.audioContent) {
+                    throw new Error('Invalid response from TTS API: no audio content.');
+                }
+                return data.audioContent; // This is a base64 encoded string
+            }
+
+
+            // --- Main Playback Logic (Handling single or multiple chunks) ---
+
+            /**
+             * Plays a single chunk of audio (base64 encoded).
+             * Used for voice samples or if text is very short (single chunk).
+             * @param {string} audioBase64 - The base64 encoded audio data.
+             * @param {boolean} isSample - True if this is for a voice sample (affects button states).
+             */
+            async function playSingleAudioChunk(audioBase64, isSample = false) {
+                if (!initAudioContext()) { showToast("Audio system not ready.", "error"); return; }
+
+                try {
+                    const audioBytes = Uint8Array.from(atob(audioBase64), c => c.charCodeAt(0));
+                    // Important: Pass a copy of the buffer for decodeAudioData
+                    const bufferToDecode = audioBytes.buffer.slice(0);
+                    audioBuffer = await audioContext.decodeAudioData(bufferToDecode);
+
+                    if (!isSample) { // For main playback, create blob for download
+                        currentAudioBlob = new Blob([audioBytes], { type: 'audio/mpeg' });
                     }
-                    
-                    const data = await response.json();
-                    
-                    if (!data || !data.audioContent) {
-                        throw new Error('Invalid response from Google TTS API - no audio content received');
+
+                    if (audioSource) audioSource.stop(); // Stop any previous
+                    audioSource = audioContext.createBufferSource();
+                    audioSource.buffer = audioBuffer;
+                    audioSource.connect(audioContext.destination);
+
+                    if (!isSample) {
+                        isPlaying = true;
+                        isPaused = false;
+                        updatePlaybackButtons();
                     }
-                    
-                    return data.audioContent;
+
+                    audioSource.start(0);
+                    playbackStartTime = audioContext.currentTime;
+                    pausedAtTime = 0;
+
+                    startProgressTracking();
+
+                    audioSource.onended = () => {
+                        if (isSample) return; // Samples don't trigger full stopPlayback
+                        if (isPlaying && !isPaused) { // Natural end
+                            stopPlayback();
+                        }
+                    };
                 } catch (error) {
-                    console.error('Synthesis error:', error);
-                    throw error;
+                    console.error('Error playing single audio chunk:', error);
+                    showToast('Failed to play audio: ' + error.message, 'error');
+                    if (!isSample) stopPlayback();
                 }
             }
-            
-            // Play audio data
-            async function playAudioData(audioBase64) {
-                if (!audioContext) {
-                    initAudioContext();
+
+            /**
+             * Decodes and concatenates multiple base64 audio chunks, then plays them.
+             * @param {string[]} audioBase64Array - Array of base64 encoded audio data strings.
+             */
+            async function playCombinedAudioChunks(audioBase64Array) {
+                if (!initAudioContext()) { showToast("Audio system not ready.", "error"); return; }
+                if (!audioBase64Array || audioBase64Array.length === 0) {
+                    showToast("No audio data to play.", "info");
+                    return;
                 }
-                
+
                 try {
-                    const audioData = Uint8Array.from(atob(audioBase64), c => c.charCodeAt(0));
-                    audioBuffer = await audioContext.decodeAudioData(audioData.buffer);
-                    
+                    // 1. Create full MP3 blob for download from all chunks
+                    const allByteArrays = audioBase64Array.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' });
+
+                    // 2. Decode all individual audio chunks into AudioBuffers
+                    // Pass copies of ArrayBuffers to decodeAudioData
+                    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.");
+                    }
+
+                    // 3. Concatenate AudioBuffers
+                    const totalLength = decodedBuffers.reduce((sum, buffer) => sum + buffer.length, 0);
+                    const numChannels = decodedBuffers[0].numberOfChannels; // Assume all same
+                    const sampleRate = decodedBuffers[0].sampleRate;     // Assume all same
+
+                    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);
+                        }
+                        currentBufferOffset += buffer.length;
+                    }
+                    audioBuffer = concatenatedBuffer; // This is now the full audio
+
+                    // 4. Play the concatenated buffer
+                    if (audioSource) audioSource.stop();
                     audioSource = audioContext.createBufferSource();
                     audioSource.buffer = audioBuffer;
                     audioSource.connect(audioContext.destination);
-                    
+
                     isPlaying = true;
                     isPaused = false;
                     updatePlaybackButtons();
-                    
+
                     audioSource.start(0);
-                    startTime = audioContext.currentTime;
-                    
+                    playbackStartTime = audioContext.currentTime;
+                    pausedAtTime = 0;
+
                     startProgressTracking();
-                    
+
                     audioSource.onended = () => {
-                        if (isPlaying && !isPaused) {
+                        if (isPlaying && !isPaused) { // Natural end
                             stopPlayback();
                         }
                     };
+
                 } catch (error) {
-                    console.error('Error playing audio:', error);
-                    showToast('Failed to play audio: ' + error.message, 'error');
+                    console.error('Error playing combined audio:', error);
+                    showToast('Failed to process or play combined audio: ' + error.message, 'error', 5000);
+                    stopPlayback();
                 }
             }
-            
+
+
+            // --- Progress Tracking & UI Update ---
+            let animationFrameId = null;
             function startProgressTracking() {
-                function updateProgress() {
-                    if (!isPlaying || isPaused || !audioSource) return;
-                    
-                    const currentTime = audioContext.currentTime - startTime;
+                if (animationFrameId) cancelAnimationFrame(animationFrameId); // Clear previous frame
+
+                function updateLoop() {
+                    if (!isPlaying || isPaused || !audioBuffer || !audioContext) {
+                        animationFrameId = null;
+                        return;
+                    }
+
+                    const elapsed = audioContext.currentTime - playbackStartTime;
+                    const currentPlaybackTime = pausedAtTime + elapsed;
                     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));
-                    
+
+                    if (currentPlaybackTime >= duration) {
+                        // Playback likely ended or is about to, onended will handle stop.
+                        // Ensure UI shows full progress.
+                        updateProgressUI(duration, duration);
+                        animationFrameId = null;
+                        return;
+                    }
+
+                    updateProgressUI(currentPlaybackTime, duration);
+                    animationFrameId = requestAnimationFrame(updateLoop);
+                }
+                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;
+                }
+
+                const progressPercent = (currentPlayTime / duration) * 100;
+                progressBar.style.width = `${progressPercent}%`;
+                currentPositionMarker.style.left = `${progressPercent}%`;
+
+                currentTimeEl.textContent = formatTime(Math.floor(currentPlayTime));
+                totalTimeEl.textContent = formatTime(Math.floor(duration));
+
+                // Update reading highlight based on text length and audio progress
+                if (currentText.length > 0) {
+                    currentReadingPosition = Math.floor(progressPercent / 100 * currentText.length);
+                    const readingProgPercent = (currentReadingPosition / currentText.length) * 100;
+                    readingProgress.style.width = `${readingProgPercent}%`;
                     updateReadingHighlight();
-                    
-                    requestAnimationFrame(updateProgress);
+                } else {
+                    readingProgress.style.width = '0%';
                 }
-                
-                updateProgress();
             }
-            
+
+
             function updateReadingHighlight() {
                 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;
-                    
-                    if (pos <= currentReadingPosition && currentReadingPosition < pos + pText.length) {
+                if (!currentText) return;
+
+                const paragraphs = Array.from(documentContent.children);
+                let charAccumulator = 0;
+                for (const p of paragraphs) {
+                    const pText = p.textContent || "";
+                    const pLength = pText.length + 1; // +1 for newline/paragraph break
+
+                    if (charAccumulator <= currentReadingPosition && currentReadingPosition < charAccumulator + pLength) {
                         p.classList.add('reading-highlight');
+                        // Optional: scroll into view
+                        // p.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                         break;
                     }
-                    pos += pText.length;
+                    charAccumulator += pLength;
                 }
             }
-            
-            function formatTime(seconds) {
-                const minutes = Math.floor(seconds / 60);
-                const secs = seconds % 60;
-                return `${minutes}:${secs.toString().padStart(2, '0')}`;
+
+            function formatTime(totalSeconds) {
+                const minutes = Math.floor(totalSeconds / 60);
+                const seconds = totalSeconds % 60;
+                return `${minutes}:${seconds.toString().padStart(2, '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);
+
+            // --- File Input & Processing ---
+            function setupDragAndDrop() {
+                ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                    dropzone.addEventListener(eventName, preventDefaults, false);
+                    document.body.addEventListener(eventName, preventDefaults, false); // Prevent browser default for whole page
+                });
+                ['dragenter', 'dragover'].forEach(eventName => {
+                    dropzone.addEventListener(eventName, () => dropzone.classList.add('active'), false);
+                });
+                ['dragleave', 'drop'].forEach(eventName => {
+                    dropzone.addEventListener(eventName, () => dropzone.classList.remove('active'), false);
+                });
+                dropzone.addEventListener('drop', (e) => {
+                    const dt = e.dataTransfer;
+                    if (dt.files && dt.files.length > 0) {
+                        handleFile(dt.files[0]);
                     }
-                };
-                
-                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();
-            }
-            
-            ['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');
+            function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); }
+
+            function handlePaste() {
+                documentContent.innerHTML = ''; // Clear previous
+                const placeholder = document.createElement('p');
+                placeholder.className = 'text-gray-500 dark:text-gray-400 italic';
+                placeholder.textContent = 'Pasting... Press Ctrl+V (Cmd+V on Mac) or right-click paste.';
+                documentContent.appendChild(placeholder);
+                documentContent.contentEditable = "true"; // Make it editable for paste
+                documentContent.focus();
+
+                // Use a timeout to allow paste to happen, then grab content
+                setTimeout(() => {
+                    const text = documentContent.innerText; // Use innerText to get rendered text
+                    documentContent.contentEditable = "false"; // Disable editing
+                    if (text && text !== placeholder.textContent) {
+                         setDocumentContent(text.trim());
+                         showToast('Text pasted successfully.', 'success');
+                    } else {
+                        documentContent.innerHTML = '<p class="text-gray-500 dark:text-gray-400 italic">Paste text here or upload a file.</p>';
+                        // showToast('Paste cancelled or no text pasted.', 'info');
+                    }
+                }, 100); // Small delay for paste action
             }
-            
-            dropzone.addEventListener('drop', (e) => {
-                const dt = e.dataTransfer;
-                const file = dt.files[0];
-                if (file) {
-                    handleFile(file);
-                }
-            });
-            
-            // Enhanced file processing
+
+
             function handleFile(file) {
+                stopPlayback(); // Stop any current playback before loading new file
                 const maxSize = 50 * 1024 * 1024; // 50MB
                 if (file.size > maxSize) {
-                    showToast('File too large. Please upload a file smaller than 50MB.', 'error');
+                    showToast(`File too large (max ${formatFileSize(maxSize)}).`, '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>
-                `;
-                
+                        <div class="loading-spinner mx-auto my-2"></div>
+                        <p class="text-gray-500 dark:text-gray-400 mt-2">Processing ${file.name}...</p>
+                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Size: ${formatFileSize(file.size)}</p>
+                    </div>`;
+
                 try {
                     switch (fileExtension) {
-                        case 'txt':
-                            readTextFile(file);
-                            break;
+                        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);
+                            if (typeof pdfjsLib !== 'undefined') readPDFFile(file);
+                            else throw new Error('PDF library (pdf.js) not loaded.');
                             break;
-                        case 'xml':
-                            readXMLFile(file);
-                            break;
-                        case 'csv':
-                            readCSVFile(file);
+                        case 'doc': case 'docx':
+                            if (typeof mammoth !== 'undefined') readWordDocument(file);
+                            else throw new Error('Word library (mammoth.js) not loaded.');
                             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);
+                            if (file.type && file.type.startsWith('text/')) {
+                                readTextFile(file); // Treat unknown text/* as plain text
                             } else {
-                                throw new Error(`Unsupported file type: .${fileExtension}. Please upload a supported document format.`);
+                                throw new Error(`Unsupported file type: .${fileExtension}`);
                             }
                     }
                 } 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>';
+                    showToast('Error processing file: ' + error.message, 'error', 5000);
+                    documentContent.innerHTML = '<p class="text-gray-500 dark:text-gray-400 italic">Error loading document. Please try another file or format.</p>';
                 }
             }
-            
-            // Text file reader
+
             function readTextFile(file) {
                 const reader = new FileReader();
-                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.onload = (e) => { setDocumentContent(e.target.result); showToast(`Loaded ${file.name}`, 'success'); };
+                reader.onerror = () => { showToast('Error reading text file', 'error'); documentContent.innerHTML = '<p>Error reading file.</p>';};
                 reader.readAsText(file, 'UTF-8');
             }
-            
-            // 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;
-                }
-                
+
+            async function readPDFFile(file) {
                 const fileURL = URL.createObjectURL(file);
-                
-                const loadingTask = pdfjsLib.getDocument({
-                    url: fileURL,
-                    verbosity: 0
-                });
-                
-                loadingTask.promise.then(pdf => {
-                    let text = '';
+                try {
+                    const loadingTask = pdfjsLib.getDocument({ url: fileURL, verbosity: 0 });
+                    const pdf = await loadingTask.promise;
+                    let fullText = '';
                     const numPages = pdf.numPages;
-                    const pagePromises = [];
-                    
-                    let pagesProcessed = 0;
-                    
+
                     for (let i = 1; i <= numPages; i++) {
-                        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(' ');
-                            });
-                        }));
+                        const page = await pdf.getPage(i);
+                        const textContent = await page.getTextContent();
+                        fullText += textContent.items.map(item => item.str).join(' ') + '\n\n'; // Add space and paragraph break
+                        // Update progress in UI
+                        const progress = (i / numPages) * 100;
+                        documentContent.innerHTML = `
+                            <div class="text-center py-8">
+                                <div class="loading-spinner mx-auto my-2"></div>
+                                <p class="text-gray-500 dark:text-gray-400 mt-2">Extracting PDF Text...</p>
+                                <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5 mt-3 max-w-xs mx-auto">
+                                    <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-300" style="width: ${progress}%"></div>
+                                </div>
+                                <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">${i}/${numPages} pages</p>
+                            </div>`;
                     }
-                    
-                    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');
+                    setDocumentContent(fullText.trim());
+                    showToast(`Loaded PDF: ${numPages} pages extracted.`, 'success');
+                } catch (error) {
+                    console.error('Error reading PDF:', error);
+                    showToast('Failed to extract text from PDF: ' + error.message, 'error');
+                    documentContent.innerHTML = '<p>Error reading PDF.</p>';
+                } finally {
                     URL.revokeObjectURL(fileURL);
-                });
-            }
-            
-            // 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;
                 }
-                
+            }
+
+            async function readWordDocument(file) {
                 const reader = new FileReader();
                 reader.onload = async (e) => {
                     try {
-                        const options = {
-                            convertImage: mammoth.images.ignoreImages
-                        };
-                        
-                        const result = await mammoth.extractRawText({
-                            arrayBuffer: e.target.result
-                        }, options);
-                        
+                        const result = await mammoth.extractRawText({ arrayBuffer: e.target.result });
                         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>';
+                            showToast('No text content found in Word document.', 'info');
+                            documentContent.innerHTML = '<p>No readable text in document.</p>';
                         }
-                        
                         if (result.messages && result.messages.length > 0) {
-                            console.warn('Word processing warnings:', result.messages);
+                            console.warn('Mammoth.js messages:', result.messages);
+                            result.messages.forEach(msg => showToast(`Processing note: ${msg.message}`, 'info', 4000));
                         }
                     } 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>';
+                        console.error('Error reading Word doc:', error);
+                        showToast('Error processing Word document: ' + error.message, 'error');
+                        documentContent.innerHTML = '<p>Error loading Word document.</p>';
                     }
                 };
-                
-                reader.onerror = () => {
-                    showToast('Error reading file', 'error');
-                };
-                
+                reader.onerror = () => { showToast('Error reading file for Word processing.', 'error'); documentContent.innerHTML = '<p>Error reading file.</p>';};
                 reader.readAsArrayBuffer(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);
-            }
-            
-            // 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
+
+            // Basic parsers for other formats (could be improved with dedicated libraries if needed)
+            function readRTFFile(file) { /* Basic implementation */ readTextFile(file); showToast('RTF treated as text. Formatting may be lost.', 'info'); }
+            function readMarkdownFile(file) { /* Basic implementation */ readTextFile(file); showToast('Markdown treated as text. Formatting may be lost.', 'info'); }
+            function readJSONFile(file) { /* Basic implementation */ readTextFile(file); showToast('JSON treated as text.', 'info'); }
             function readHTMLFile(file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    const htmlContent = e.target.result;
-                    
+                 const reader = new FileReader();
+                 reader.onload = (e) => {
                     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`;
-                        </div>
-                    }
-                    
+                    tempDiv.innerHTML = e.target.result;
+                    // Remove script and style tags
+                    tempDiv.querySelectorAll('script, style, link[rel="stylesheet"]').forEach(el => el.remove());
+                    let text = tempDiv.textContent || tempDiv.innerText || "";
+                    text = text.replace(/\s\s+/g, ' ').replace(/\n\s*\n/g, '\n\n').trim(); // Clean up whitespace
                     setDocumentContent(text);
-                    showToast('CSV file loaded. Showing data summary for TTS.', 'success');
-                };
-                reader.onerror = () => {
-                    showToast('Error reading CSV file', 'error');
-                };
-                reader.readAsText(file);
+                    showToast(`Loaded HTML file: ${file.name}`, 'success');
+                 };
+                 reader.onerror = () => { showToast('Error reading HTML file', 'error'); documentContent.innerHTML = '<p>Error reading file.</p>';};
+                 reader.readAsText(file);
             }
-            
-            // Set document content
+            function readXMLFile(file) { /* Basic implementation */ readTextFile(file); showToast('XML treated as text.', 'info'); }
+            function readCSVFile(file) { /* Basic implementation */ readTextFile(file); showToast('CSV treated as text.', 'info'); }
+
+
             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');
+                currentText = text.trim(); // Store trimmed text
+                // Split by newlines and create <p> tags. Ensure non-empty paragraphs for spacing.
+                documentContent.innerHTML = currentText.split(/\r\n|\r|\n/)
+                    .map(line => `<p>${line.trim() || '&nbsp;'}</p>`) // Use &nbsp; for empty lines to maintain height
+                    .join('');
+                charCount.textContent = `${currentText.length.toLocaleString()} characters`;
+
+                if (currentText.length > 1000000) { // Google's general recommendation for single requests
+                    showToast('Warning: Document is very long (>1M chars). Consider splitting for best performance.', 'info', 5000);
                 }
-                
                 updateCostEstimator();
                 updateSynthesisStatus();
+                stopPlayback(); // Reset playback state for new content
             }
-            
-            // Playback controls
-            playBtn.addEventListener('click', async () => {
-                if (!selectedVoice) {
-                    showToast('Please wait for voices to load or check your API key', 'error');
-                    return;
-                }
-                
-                if (!currentText.trim()) {
-                    showToast('Please add some text to read', 'error');
-                    return;
-                }
-                
-                if (isPaused) {
-                    resumePlayback();
-                } else {
-                    await startPlayback();
-                }
-            });
-            
-            pauseBtn.addEventListener('click', () => {
-                if (isPlaying && !isPaused) {
+
+            // --- Playback Controls & State Management ---
+            async function handlePlayPause() {
+                if (!initAudioContext()) { showToast("Audio system not ready.", "error"); return; }
+
+                if (isPlaying && !isPaused) { // Currently playing, so pause
                     pausePlayback();
+                } else if (isPaused) { // Currently paused, so resume
+                    resumePlayback();
+                } else { // Not playing, so start
+                    await startFullPlayback();
                 }
-            });
-            
-            stopBtn.addEventListener('click', () => {
-                stopPlayback();
-            });
-            
-            // Playback functions with enhanced progress tracking
-            async function startPlayback() {
+            }
+
+
+            async function startFullPlayback() {
+                if (!selectedVoice) { showToast('Please select a voice first.', 'info'); return; }
+                if (!currentText.trim()) { showToast('No document content to play.', 'info'); return; }
+                if (isPlaying) stopPlayback(); // Stop if somehow already playing
+
+                playBtn.innerHTML = '<div class="loading-spinner inline-block w-5 h-5"></div>'; // Show loading in play button
+                playBtn.disabled = true;
+
                 try {
-                    isPlaying = true;
-                    isPaused = false;
-                    updatePlaybackButtons();
-                    
-                    showToast('Generating speech...', 'success', 1000);
-                    
+                    showToast('Synthesizing speech...', 'info', 1500);
                     const chunks = splitTextIntoChunks(currentText, MAX_CHUNK_SIZE);
-                    
-                    if (chunks.length > 1) {
-                        showToast(`Processing ${chunks.length} chunks...`, 'success', 2000);
+                    if (chunks.length === 0) {
+                        showToast('Nothing to synthesize.', 'info');
+                        return;
                     }
-                    
-                    let allAudioData = [];
-                    
-                    // Show synthesis progress
-                    showSynthesisProgress(0);
-                    
+
+                    showSynthesisProgress(0); // Show 0% initially
+                    const allAudioBase64Data = [];
                     for (let i = 0; i < chunks.length; i++) {
-                        if (!isPlaying || isPaused) break;
-                        
-                        const progress = (i / chunks.length) * 100;
-                        showSynthesisProgress(progress);
-                        
+                        if (isPaused || !isPlaying) { // Check if stop was called during synthesis
+                             console.log("Synthesis interrupted by stop/pause.");
+                             hideSynthesisProgress();
+                             updatePlaybackButtons(); // Reset play button
+                             return; // Exit synthesis loop
+                        }
+                        const chunkText = chunks[i];
                         const audioData = await synthesizeSpeech(
-                            chunks[i],
-                            selectedVoice,
-                            parseFloat(rateSelect.value),
-                            parseFloat(pitchSelect.value),
+                            chunkText, selectedVoice,
+                            parseFloat(rateSelect.value), parseFloat(pitchSelect.value),
                             modelSelect.value
                         );
-                        
-                        allAudioData.push(audioData);
+                        allAudioBase64Data.push(audioData);
+                        showSynthesisProgress(((i + 1) / chunks.length) * 100); // Update progress
                     }
-                    
                     hideSynthesisProgress();
-                    
-                    if (allAudioData.length > 0 && isPlaying) {
-                        await combineAndPlayAudio(allAudioData);
+
+                    if (allAudioBase64Data.length > 0) {
+                         if (allAudioBase64Data.length === 1) {
+                            await playSingleAudioChunk(allAudioBase64Data[0]);
+                        } else {
+                            await playCombinedAudioChunks(allAudioBase64Data);
+                        }
+                    } else if (isPlaying) { // If synthesis produced nothing but was "playing"
+                        stopPlayback(); // Clean up state
+                        showToast('Synthesis completed but no audio data was generated.', 'info');
                     }
-                    
+
                 } catch (error) {
                     hideSynthesisProgress();
-                    console.error('Error during playback:', error);
-                    showToast('Failed to play text: ' + error.message, 'error');
-                    stopPlayback();
-                }
-            }
-            
-            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);
+                    console.error('Error during full playback:', error);
+                    showToast('Playback error: ' + error.message, 'error', 5000);
+                    stopPlayback(); // Ensure UI and state are reset
+                } finally {
+                    // updatePlaybackButtons will be called by playSingle/Combined or stopPlayback
+                    // but ensure playBtn is re-enabled if it was disabled and no playback started
+                    if (playBtn.disabled && !isPlaying) {
+                        updatePlaybackButtons();
                     }
-                    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 pausePlayback() {
-                if (audioSource && isPlaying && !isPaused) {
-                    pauseTime = audioContext.currentTime;
-                    audioSource.stop();
+                if (!audioContext || !audioSource || !isPlaying || isPaused) return;
+                audioContext.suspend().then(() => { // Gracefully suspend context
+                    pausedAtTime += audioContext.currentTime - playbackStartTime; // Accumulate played duration before pause
                     isPaused = true;
+                    if (animationFrameId) cancelAnimationFrame(animationFrameId);
                     updatePlaybackButtons();
-                }
+                    showToast('Playback paused.', 'info', 1500);
+                });
             }
-            
+
             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;
+                if (!audioContext || !audioSource || !isPlaying || !isPaused) return;
+                 audioContext.resume().then(() => {
+                    playbackStartTime = audioContext.currentTime; // Reset start time for elapsed calculation
                     isPaused = false;
-                    isPlaying = true;
+                    startProgressTracking(); // Restart UI updates
                     updatePlaybackButtons();
-                    
-                    startProgressTracking();
-                    
-                    audioSource.onended = () => {
-                        if (isPlaying && !isPaused) {
-                            stopPlayback();
-                        }
-                    };
-                }
+                    showToast('Playback resumed.', 'info', 1500);
+                });
             }
-            
+
             function stopPlayback() {
-                if (audioSource && isPlaying) {
-                    audioSource.stop();
+                if (audioSource) {
+                    audioSource.onended = null; // Remove onended to prevent recursion if stop is called from onended
+                    try { audioSource.stop(); } catch (e) { /* ignore if already stopped */ }
+                    audioSource = null;
+                }
+                if (animationFrameId) {
+                    cancelAnimationFrame(animationFrameId);
+                    animationFrameId = null;
                 }
-                
+
                 isPlaying = false;
                 isPaused = false;
-                startTime = 0;
-                pauseTime = 0;
-                currentReadingPosition = 0;
+                playbackStartTime = 0;
+                pausedAtTime = 0;
+                // currentAudioBlob = null; // Keep blob for download unless new content is loaded
+                audioBuffer = null; // Clear decoded buffer
+
                 updatePlaybackButtons();
-                updateProgress(0);
-                
-                documentContent.querySelectorAll('.reading-highlight').forEach(el => {
-                    el.classList.remove('reading-highlight');
-                });
+                updateProgressUI(0, 0); // Reset progress bar and times
+                documentContent.querySelectorAll('.reading-highlight').forEach(el => el.classList.remove('reading-highlight'));
+                currentReadingPosition = 0;
+                readingProgress.style.width = '0%';
+
+                // showToast('Playback stopped.', 'info', 1500); // Can be a bit noisy
             }
-            
+
             function updatePlaybackButtons() {
-                playBtn.disabled = false;
-                pauseBtn.disabled = !isPlaying || isPaused;
-                stopBtn.disabled = !isPlaying;
-                downloadBtn.disabled = !currentAudioBlob;
-                
-                if (isPlaying && !isPaused) {
+                if (isPlaying && !isPaused) { // Playing
                     playBtn.innerHTML = '<i class="fas fa-pause text-lg"></i>';
-                } else {
+                    playBtn.title = "Pause";
+                    playBtn.disabled = false;
+                    pauseBtn.disabled = false; // This button is now part of playBtn logic
+                    stopBtn.disabled = false;
+                } else if (isPaused) { // Paused
                     playBtn.innerHTML = '<i class="fas fa-play text-lg"></i>';
+                    playBtn.title = "Resume";
+                    playBtn.disabled = false;
+                    pauseBtn.disabled = true;
+                    stopBtn.disabled = false;
+                } else { // Stopped or initial state
+                    playBtn.innerHTML = '<i class="fas fa-play text-lg"></i>';
+                    playBtn.title = "Play";
+                    playBtn.disabled = !currentText.trim() || !selectedVoice; // Disabled if no text/voice
+                    pauseBtn.disabled = true;
+                    stopBtn.disabled = true;
                 }
+                downloadBtn.disabled = !currentAudioBlob;
             }
-            
-            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+/);
+
+
+            function splitTextIntoChunks(text, chunkSize) {
+                const sentences = text.match(/[^.!?]+[.!?]+(\s|$)/g) || [text]; // Split by sentences, fallback to whole text
                 const chunks = [];
-                let currentChunk = '';
-                
+                let currentChunk = "";
+
                 for (const sentence of sentences) {
-                    if (currentChunk.length + sentence.length <= maxChunkSize) {
-                        currentChunk += (currentChunk ? ' ' : '') + sentence;
+                    if (currentChunk.length + sentence.length <= chunkSize) {
+                        currentChunk += sentence;
                     } else {
-                        if (currentChunk) {
-                            chunks.push(currentChunk.trim());
+                        // If currentChunk is not empty, push it
+                        if (currentChunk.trim()) chunks.push(currentChunk.trim());
+                        // If sentence itself is larger than chunkSize, split it hard
+                        if (sentence.length > chunkSize) {
+                            for (let i = 0; i < sentence.length; i += chunkSize) {
+                                chunks.push(sentence.substring(i, i + chunkSize));
+                            }
+                        } else {
+                            currentChunk = sentence; // Start new chunk with this sentence
                         }
-                        currentChunk = sentence;
                     }
                 }
-                
-                if (currentChunk) {
-                    chunks.push(currentChunk.trim());
-                }
-                
-                return chunks;
+                if (currentChunk.trim()) chunks.push(currentChunk.trim()); // Push the last chunk
+                return chunks.filter(chunk => chunk.length > 0); // Ensure no empty chunks
             }
-            
-            // Event listeners
-            refreshVoicesBtn.addEventListener('click', loadVoices);
-            languageSelect.addEventListener('change', loadVoices);
-            
-            // Initialize the application
+
+            // --- Initialize the application ---
             init();
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
