diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -7,6 +7,41 @@
     <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>
+        /* Existing styles... */
+        :root {
+            --primary-blue: #3B82F6;
+            --bg-gray: #F9FAFB;
+            --text-primary: #1F2937;
+            --border-color: #E5E7EB;
+            --card-bg: #FFFFFF;
+        }
+        
+        /* Dark mode variables */
+        [data-theme="dark"] {
+            --bg-gray: #111827;
+            --text-primary: #F9FAFB;
+            --border-color: #374151;
+            --card-bg: #1F2937;
+        }
+        
+        body {
+            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;
@@ -27,7 +62,8 @@
         }
         .voice-card {
             transition: all 0.2s ease;
-            border: 1px solid #E5E7EB;
+            border: 1px solid var(--border-color);
+            background-color: var(--card-bg);
         }
         .voice-card:hover {
             border-color: #3B82F6;
@@ -77,13 +113,131 @@
             from { transform: translateX(100%); opacity: 0; }
             to { transform: translateX(0); opacity: 1; }
         }
+        
+        .audio-library-panel, .cost-budget-panel {
+            position: fixed;
+            right: -400px;
+            top: 0;
+            height: 100vh;
+            width: 400px;
+            background: var(--card-bg);
+            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+            transition: right 0.3s ease;
+            z-index: 1000;
+            overflow-y: auto;
+        }
+        
+        .audio-library-panel.open, .cost-budget-panel.open {
+            right: 0;
+        }
+        
+        .audio-item {
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 12px;
+            background: var(--card-bg);
+            transition: border-color 0.2s;
+        }
+        
+        .audio-item:hover {
+            border-color: #3B82F6;
+        }
+        
+        .cache-indicator {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #10B981;
+        }
+        
+        .cache-indicator.miss {
+            background: #F59E0B;
+        }
+        
+        .bookmark-marker {
+            position: absolute;
+            right: -20px;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: #EAB308;
+            cursor: pointer;
+            opacity: 0.7;
+            transition: opacity 0.2s;
+        }
+        
+        .bookmark-marker:hover {
+            opacity: 1;
+        }
+        
+        .bookmark-panel {
+            position: fixed;
+            right: -300px;
+            top: 0;
+            height: 100vh;
+            width: 300px;
+            background: var(--card-bg);
+            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+            transition: right 0.3s ease;
+            z-index: 1000;
+            overflow-y: auto;
+        }
+        
+        .bookmark-panel.open {
+            right: 0;
+        }
+        
+        .bookmark-item {
+            padding: 10px;
+            border-bottom: 1px solid var(--border-color);
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        
+        .bookmark-item:hover {
+            background-color: rgba(59, 130, 246, 0.1);
+        }
+        
+        .reading-highlight {
+            background-color: rgba(34, 197, 94, 0.2);
+            border-radius: 3px;
+            padding: 0 2px;
+            transition: all 0.2s;
+        }
+        
+        /* Dark mode toggle */
+        #darkModeToggle {
+            transition: transform 0.2s;
+        }
+        
+        #darkModeToggle:hover {
+            transform: scale(1.1);
+        }
+        
+        /* Progress indicator styles */
+        #progressContainer {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        #currentPositionMarker {
+            box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <div class="container mx-auto px-4 py-8">
-        <header class="text-center mb-8">
+        <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">
+                <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">
@@ -157,7 +311,15 @@
             <div class="border-t border-gray-200 p-6">
                 <div class="flex justify-between items-center mb-4">
                     <h2 class="text-xl font-semibold text-gray-800">Document Content</h2>
-                    <div class="text-sm text-gray-500" id="charCount">0 characters</div>
+                    <div class="flex items-center gap-2">
+                        <button id="addBookmarkBtn" class="text-blue-500 hover:text-blue-700 text-sm flex items-center" title="Add Bookmark">
+                            <i class="fas fa-bookmark mr-1"></i> Bookmark
+                        </button>
+                        <button id="showBookmarksBtn" class="text-blue-500 hover:text-blue-700 text-sm flex items-center" title="Show Bookmarks">
+                            <i class="fas fa-list mr-1"></i> <span id="bookmarkCount">0</span>
+                        </button>
+                        <div class="text-sm text-gray-500" 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">
@@ -185,6 +347,31 @@
                         </button>
                     </div>
                 </div>
+                
+                <!-- Cost Estimator -->
+                <div id="costEstimator" class="mb-4 p-3 bg-blue-100 border border-blue-200 rounded-lg hidden">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <i class="fas fa-calculator text-blue-600 mr-2"></i>
+                            <span class="text-sm font-medium text-blue-800">Estimated Cost:</span>
+                        </div>
+                        <div class="text-right">
+                            <div class="text-lg font-bold text-blue-900" id="estimatedCost">$0.00</div>
+                            <div class="text-xs text-blue-600" id="costDetails">0 characters</div>
+                        </div>
+                    </div>
+                    <div class="mt-2 text-xs text-blue-600 flex justify-between items-center">
+                        <div>
+                            <span id="voiceType">Standard voice</span> • 
+                            <span id="priceRate">$4.00/million chars</span>
+                        </div>
+                        <button id="showCostBreakdown" class="text-blue-500 hover:text-blue-700 underline">
+                            <i class="fas fa-info-circle mr-1"></i>
+                            Pricing Info
+                        </button>
+                    </div>
+                </div>
+                
                 <div id="voiceGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                     <!-- Voices will be loaded dynamically -->
                     <div class="text-center py-8">
@@ -228,110 +415,1526 @@
                             </select>
                         </div>
                     </div>
-                    
-                    <div class="playback-controls flex items-center gap-2">
-                        <button id="playBtn" class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition">
-                            <i class="fas fa-play"></i>
-                        </button>
-                        <button id="pauseBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
-                            <i class="fas fa-pause"></i>
-                        </button>
-                        <button id="stopBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
-                            <i class="fas fa-stop"></i>
-                        </button>
+                    
+                    <div class="playback-controls flex items-center gap-2">
+                        <button id="playBtn" class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition">
+                            <i class="fas fa-play"></i>
+                        </button>
+                        <button id="pauseBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
+                            <i class="fas fa-pause"></i>
+                        </button>
+                        <button id="stopBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-full w-12 h-12 flex items-center justify-center transition" disabled>
+                            <i class="fas fa-stop"></i>
+                        </button>
+                        <button id="downloadBtn" class="bg-green-600 hover:bg-green-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition" disabled title="Download Audio">
+                            <i class="fas fa-download"></i>
+                        </button>
+                        <button id="saveToLibraryBtn" class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition" disabled title="Save to Library">
+                            <i class="fas fa-bookmark"></i>
+                        </button>
+                        <button id="openLibraryBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition" title="Audio Library">
+                            <i class="fas fa-library"></i>
+                        </button>
+                        <button id="openBudgetBtn" class="bg-orange-600 hover:bg-orange-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition" title="Cost Budget">
+                            <i class="fas fa-dollar-sign"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <div class="progress-container">
+                    <div class="flex justify-between text-sm text-gray-600 mb-1">
+                        <span id="currentTime">0:00</span>
+                        <span id="totalTime">0:00</span>
+                    </div>
+                    <div id="progressContainer" class="w-full bg-gray-200 rounded-full h-4 flex relative cursor-pointer">
+                        <!-- Progress bar for audio -->
+                        <div id="progressBar" class="bg-blue-600 h-4 rounded-full transition-all duration-300" style="width: 0%"></div>
+                        <!-- Reading progress indicator -->
+                        <div id="readingProgress" class="absolute inset-0 bg-green-500 bg-opacity-30 h-4 rounded-full transition-all duration-300" style="width: 0%"></div>
+                        <!-- Current position marker -->
+                        <div id="currentPositionMarker" class="absolute top-0 w-1 h-4 bg-red-500 transition-all duration-100" style="left: 0%"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+            <!-- Audio Library Panel -->
+            <div id="audioLibraryPanel" class="audio-library-panel">
+                <div class="p-4 border-b border-gray-200">
+                    <div class="flex justify-between items-center">
+                        <h3 class="text-lg font-semibold">Audio Library</h3>
+                        <button id="closeAudioLibrary" class="text-gray-400 hover:text-gray-600">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="flex gap-2 mt-3">
+                        <button id="clearLibraryBtn" class="text-red-500 hover:text-red-700 text-sm">
+                            <i class="fas fa-trash mr-1"></i>Clear All
+                        </button>
+                        <button id="exportLibraryBtn" class="text-blue-500 hover:text-blue-700 text-sm">
+                            <i class="fas fa-download mr-1"></i>Export
+                        </button>
+                        <button id="importLibraryBtn" class="text-green-500 hover:text-green-700 text-sm">
+                            <i class="fas fa-upload mr-1"></i>Import
+                        </button>
+                    </div>
+                </div>
+                <div class="p-4">
+                    <div class="text-sm text-gray-600 mb-3">Total: <span id="libraryCount">0</span> audio files</div>
+                    <div id="audioLibraryList" class="space-y-3 max-h-96 overflow-y-auto">
+                        <!-- Audio items will be inserted here -->
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Cost Budget Panel -->
+            <div id="costBudgetPanel" class="cost-budget-panel">
+                <div class="p-4 border-b border-gray-200">
+                    <div class="flex justify-between items-center">
+                        <h3 class="text-lg font-semibold">Cost Budget</h3>
+                        <button id="closeBudgetPanel" class="text-gray-400 hover:text-gray-600">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="p-4">
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium mb-2">Monthly Budget ($)</label>
+                        <input type="number" id="monthlyBudget" min="0" step="0.01" 
+                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium mb-2">Alert at (%)</label>
+                        <input type="range" id="alertThreshold" min="0" max="100" value="80" 
+                               class="w-full">
+                        <div class="flex justify-between text-xs text-gray-500">
+                            <span>0%</span>
+                            <span id="alertThresholdValue">80%</span>
+                            <span>100%</span>
+                        </div>
+                    </div>
+                    
+                    <div class="border border-gray-200 rounded-lg p-3">
+                        <h4 class="font-medium mb-2">Current Month</h4>
+                        <div class="space-y-2">
+                            <div class="flex justify-between">
+                                <span>Spent:</span>
+                                <span id="currentSpent" class="font-medium">$0.00</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span>Remaining:</span>
+                                <span id="budgetRemaining" class="font-medium">$0.00</span>
+                            </div>
+                            <div class="mt-2">
+                                <div id="budgetProgressBar" class="w-full bg-gray-200 rounded-full h-2">
+                                    <div id="budgetProgress" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-4">
+                        <h4 class="font-medium mb-2">Statistics</h4>
+                        <div class="space-y-1 text-sm">
+                            <div class="flex justify-between">
+                                <span>Total characters processed:</span>
+                                <span id="totalCharsProcessed">0</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span>Average cost per 1k chars:</span>
+                                <span id="avgCostPer1k">$0.00</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span>Most used voice:</span>
+                                <span id="mostUsedVoice">-</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+    </div>
+
+    <!-- PDF.js library for PDF support -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Enhanced DOM Elements
+            const apiKeyInput = document.getElementById('apiKey');
+            const saveKeyBtn = document.getElementById('saveKeyBtn');
+            const uploadBtn = document.getElementById('uploadBtn');
+            const pasteBtn = document.getElementById('pasteBtn');
+            const dropzone = document.getElementById('dropzone');
+            const fileInput = document.getElementById('fileInput');
+            const documentContent = document.getElementById('documentContent');
+            const charCount = document.getElementById('charCount');
+            const voiceGrid = document.getElementById('voiceGrid');
+            const refreshVoicesBtn = document.getElementById('refreshVoicesBtn');
+            const languageSelect = document.getElementById('languageSelect');
+            const rateSelect = document.getElementById('rateSelect');
+            const pitchSelect = document.getElementById('pitchSelect');
+            const modelSelect = document.getElementById('modelSelect');
+            const playBtn = document.getElementById('playBtn');
+            const pauseBtn = document.getElementById('pauseBtn');
+            const stopBtn = document.getElementById('stopBtn');
+            const downloadBtn = document.getElementById('downloadBtn');
+            const currentTime = document.getElementById('currentTime');
+            const totalTime = document.getElementById('totalTime');
+            const progressContainer = document.getElementById('progressContainer');
+            const progressBar = document.getElementById('progressBar');
+            const readingProgress = document.getElementById('readingProgress');
+            const currentPositionMarker = document.getElementById('currentPositionMarker');
+            
+            // New feature elements
+            const darkModeToggle = document.getElementById('darkModeToggle');
+            const addBookmarkBtn = document.getElementById('addBookmarkBtn');
+            const showBookmarksBtn = document.getElementById('showBookmarksBtn');
+            const bookmarkCount = document.getElementById('bookmarkCount');
+            
+            // Enhanced state variables
+            let currentAudioBlob = null;
+            let bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]');
+            let currentReadingPosition = 0;
+            let totalWords = 0;
+            let wordsPerMinute = 150; // Average reading speed
+            let isBookmarkPanelOpen = false;
+            
+            // Caching & Smart Processing System
+            class TTSCache {
+                constructor() {
+                    this.dbName = 'TTSCache';
+                    this.dbVersion = 1;
+                    this.db = null;
+                    this.maxCacheSize = 100 * 1024 * 1024; // 100MB cache limit
+                    this.init();
+                }
+                
+                async init() {
+                    return new Promise((resolve, reject) => {
+                        const request = indexedDB.open(this.dbName, this.dbVersion);
+                        
+                        request.onerror = () => reject(request.error);
+                        request.onsuccess = () => {
+                            this.db = request.result;
+                            resolve();
+                        };
+                        
+                        request.onupgradeneeded = (event) => {
+                            const db = event.target.result;
+                            
+                            if (!db.objectStoreNames.contains('cache')) {
+                                const store = db.createObjectStore('cache', { keyPath: 'key' });
+                                store.createIndex('timestamp', 'timestamp', { unique: false });
+                                store.createIndex('lastAccessed', 'lastAccessed', { unique: false });
+                            }
+                        };
+                    });
+                }
+                
+                generateCacheKey(text, voice, settings) {
+                    const keyData = {
+                        text: text.trim(),
+                        voice: voice.name,
+                        rate: settings.rate,
+                        pitch: settings.pitch,
+                        model: settings.model
+                    };
+                    return this.hash(JSON.stringify(keyData));
+                }
+                
+                hash(str) {
+                    let hash = 0;
+                    for (let i = 0; i < str.length; i++) {
+                        const char = str.charCodeAt(i);
+                        hash = ((hash << 5) - hash) + char;
+                        hash = hash & hash;
+                    }
+                    return Math.abs(hash).toString(36);
+                }
+                
+                async get(text, voice, settings) {
+                    if (!this.db) await this.init();
+                    
+                    const key = this.generateCacheKey(text, voice, settings);
+                    const transaction = this.db.transaction(['cache'], 'readwrite');
+                    const store = transaction.objectStore('cache');
+                    
+                    return new Promise((resolve) => {
+                        const request = store.get(key);
+                        request.onsuccess = () => {
+                            const result = request.result;
+                            if (result) {
+                                // Update last accessed time
+                                result.lastAccessed = Date.now();
+                                store.put(result);
+                                
+                                // Show cache hit indicator
+                                this.showCacheIndicator(true);
+                                resolve(result.audioData);
+                            } else {
+                                this.showCacheIndicator(false);
+                                resolve(null);
+                            }
+                        };
+                    });
+                }
+                
+                async set(text, voice, settings, audioData, cost) {
+                    if (!this.db) await this.init();
+                    
+                    // Check cache size before adding
+                    await this.cleanupCache();
+                    
+                    const key = this.generateCacheKey(text, voice, settings);
+                    const cacheEntry = {
+                        key,
+                        text: text.substring(0, 100),
+                        voice: voice.name,
+                        settings,
+                        audioData,
+                        timestamp: Date.now(),
+                        lastAccessed: Date.now(),
+                        size: audioData.length,
+                        cost
+                    };
+                    
+                    const transaction = this.db.transaction(['cache'], 'readwrite');
+                    const store = transaction.objectStore('cache');
+                    await store.put(cacheEntry);
+                }
+                
+                async cleanupCache() {
+                    const transaction = this.db.transaction(['cache'], 'readwrite');
+                    const store = transaction.objectStore('cache');
+                    
+                    // Get all cache entries
+                    const allEntries = await new Promise((resolve) => {
+                        const request = store.getAll();
+                        request.onsuccess = () => resolve(request.result);
+                    });
+                    
+                    // Calculate total size
+                    const totalSize = allEntries.reduce((sum, entry) => sum + entry.size, 0);
+                    
+                    if (totalSize > this.maxCacheSize) {
+                        // Sort by last accessed (LRU)
+                        allEntries.sort((a, b) => a.lastAccessed - b.lastAccessed);
+                        
+                        // Remove oldest entries until under limit
+                        let currentSize = totalSize;
+                        for (const entry of allEntries) {
+                            if (currentSize <= this.maxCacheSize * 0.8) break;
+                            
+                            await store.delete(entry.key);
+                            currentSize -= entry.size;
+                        }
+                    }
+                }
+                
+                showCacheIndicator(hit) {
+                    const indicator = document.querySelector('.cache-indicator') || 
+                        document.createElement('div');
+                    
+                    indicator.className = `cache-indicator ${hit ? '' : 'miss'}`;
+                    indicator.title = hit ? 'Cache Hit' : 'Cache Miss';
+                    
+                    if (!document.querySelector('.cache-indicator')) {
+                        document.querySelector('.voice-options').appendChild(indicator);
+                    }
+                    
+                    // Show for 2 seconds
+                    indicator.style.opacity = '1';
+                    setTimeout(() => {
+                        indicator.style.opacity = '0';
+                    }, 2000);
+                }
+                
+                async getCacheStats() {
+                    const transaction = this.db.transaction(['cache'], 'readonly');
+                    const store = transaction.objectStore('cache');
+                    
+                    const allEntries = await new Promise((resolve) => {
+                        const request = store.getAll();
+                        request.onsuccess = () => resolve(request.result);
+                    });
+                    
+                    const totalSize = allEntries.reduce((sum, entry) => sum + entry.size, 0);
+                    const totalCost = allEntries.reduce((sum, entry) => sum + entry.cost, 0);
+                    
+                    return {
+                        entries: allEntries.length,
+                        totalSize,
+                        totalCost,
+                        oldestEntry: allEntries.length > 0 ? 
+                            Math.min(...allEntries.map(e => e.timestamp)) : null
+                    };
+                }
+            }
+            
+            // Smart Text Processing
+            class SmartTextProcessor {
+                static optimizeChunks(text, maxChunkSize = 5000) {
+                    // Smart chunking that respects sentence boundaries
+                    const sentences = text.split(/(?<=[.!?])\s+/);
+                    const chunks = [];
+                    let currentChunk = '';
+                    
+                    for (const sentence of sentences) {
+                        if (currentChunk.length + sentence.length <= maxChunkSize) {
+                            currentChunk += (currentChunk ? ' ' : '') + sentence;
+                        } else {
+                            if (currentChunk) {
+                                chunks.push(currentChunk.trim());
+                            }
+                            currentChunk = sentence;
+                        }
+                    }
+                    
+                    if (currentChunk) {
+                        chunks.push(currentChunk.trim());
+                    }
+                    
+                    return chunks;
+                }
+                
+                static detectLanguage(text) {
+                    // Simple language detection for future multilingual support
+                    const samples = text.substring(0, 1000).toLowerCase();
+                    
+                    // Common English words
+                    const englishWords = ['the', 'and', 'is', 'in', 'to', 'of', 'a', 'that'];
+                    const englishCount = englishWords.filter(word => samples.includes(word)).length;
+                    
+                    return englishCount > 4 ? 'en' : 'unknown';
+                }
+                
+                static preprocessText(text) {
+                    // Clean and prepare text for TTS
+                    return text
+                        .replace(/\s+/g, ' ')
+                        .replace(/([.!?])\s*([A-Z])/g, '$1 $2')
+                        .trim();
+                }
+            }
+            
+            // Cost Budget Management System
+            class CostBudgetManager {
+                constructor() {
+                    this.storageKey = 'ttsBudget';
+                    this.budgetData = this.loadBudgetData();
+                    this.currentMonth = new Date().toISOString().slice(0, 7); // YYYY-MM
+                    this.initializeBudget();
+                }
+                
+                loadBudgetData() {
+                    const saved = localStorage.getItem(this.storageKey);
+                    return saved ? JSON.parse(saved) : {
+                        monthlyBudget: 0,
+                        alertThreshold: 80,
+                        spending: {},
+                        usage: []
+                    };
+                }
+                
+                saveBudgetData() {
+                    localStorage.setItem(this.storageKey, JSON.stringify(this.budgetData));
+                }
+                
+                initializeBudget() {
+                    // Initialize current month if not exists
+                    if (!this.budgetData.spending[this.currentMonth]) {
+                        this.budgetData.spending[this.currentMonth] = 0;
+                    }
+                }
+                
+                setMonthlyBudget(amount) {
+                    this.budgetData.monthlyBudget = Math.max(0, amount);
+                    this.saveBudgetData();
+                    this.updateBudgetDisplay();
+                }
+                
+                setAlertThreshold(percentage) {
+                    this.budgetData.alertThreshold = Math.max(0, Math.min(100, percentage));
+                    this.saveBudgetData();
+                    this.updateBudgetDisplay();
+                }
+                
+                addSpending(cost, metadata) {
+                    // Add to current month spending
+                    this.budgetData.spending[this.currentMonth] = 
+                        (this.budgetData.spending[this.currentMonth] || 0) + cost;
+                    
+                    // Add usage record
+                    const usageRecord = {
+                        timestamp: new Date().toISOString(),
+                        cost,
+                        characters: metadata.characters,
+                        voice: metadata.voice,
+                        model: metadata.model
+                    };
+                    
+                    this.budgetData.usage.push(usageRecord);
+                    
+                    // Keep only last 1000 records
+                    if (this.budgetData.usage.length > 1000) {
+                        this.budgetData.usage = this.budgetData.usage.slice(-1000);
+                    }
+                    
+                    this.saveBudgetData();
+                    this.updateBudgetDisplay();
+                    this.checkBudgetAlerts();
+                }
+                
+                getCurrentSpending() {
+                    return this.budgetData.spending[this.currentMonth] || 0;
+                }
+                
+                getRemainingBudget() {
+                    return Math.max(0, this.budgetData.monthlyBudget - this.getCurrentSpending());
+                }
+                
+                getBudgetProgress() {
+                    if (this.budgetData.monthlyBudget === 0) return 0;
+                    return Math.min(100, (this.getCurrentSpending() / this.budgetData.monthlyBudget) * 100);
+                }
+                
+                checkBudgetAlerts() {
+                    const progress = this.getBudgetProgress();
+                    const threshold = this.budgetData.alertThreshold;
+                    
+                    if (progress >= 100) {
+                        showToast('⚠️ Budget exceeded! Consider stopping to avoid additional costs.', 'error', 5000);
+                    } else if (progress >= threshold) {
+                        showToast(`⚠️ ${progress.toFixed(1)}% of budget used (${threshold}% alert threshold)`, 'error', 3000);
+                    }
+                }
+                
+                getUsageStatistics() {
+                    const thisMonthUsage = this.budgetData.usage.filter(
+                        record => record.timestamp.startsWith(this.currentMonth)
+                    );
+                    
+                    const totalChars = thisMonthUsage.reduce((sum, record) => sum + record.characters, 0);
+                    const avgCostPer1k = thisMonthUsage.length > 0 ? 
+                        (this.getCurrentSpending() / (totalChars / 1000)) : 0;
+                    
+                    // Find most used voice
+                    const voiceUsage = {};
+                    thisMonthUsage.forEach(record => {
+                        voiceUsage[record.voice] = (voiceUsage[record.voice] || 0) + 1;
+                    });
+                    
+                    const mostUsedVoice = Object.entries(voiceUsage)
+                        .sort(([,a], [,b]) => b - a)[0]?.[0] || 'None';
+                    
+                    return {
+                        totalChars,
+                        avgCostPer1k,
+                        mostUsedVoice,
+                        transactionCount: thisMonthUsage.length
+                    };
+                }
+                
+                updateBudgetDisplay() {
+                    const currentSpent = this.getCurrentSpending();
+                    const remaining = this.getRemainingBudget();
+                    const progress = this.getBudgetProgress();
+                    const stats = this.getUsageStatistics();
+                    
+                    // Update UI elements
+                    const elements = {
+                        monthlyBudget: document.getElementById('monthlyBudget'),
+                        alertThreshold: document.getElementById('alertThreshold'),
+                        alertThresholdValue: document.getElementById('alertThresholdValue'),
+                        currentSpent: document.getElementById('currentSpent'),
+                        budgetRemaining: document.getElementById('budgetRemaining'),
+                        budgetProgressBar: document.getElementById('budgetProgress'),
+                        totalCharsProcessed: document.getElementById('totalCharsProcessed'),
+                        avgCostPer1k: document.getElementById('avgCostPer1k'),
+                        mostUsedVoice: document.getElementById('mostUsedVoice')
+                    };
+                    
+                    if (elements.monthlyBudget) {
+                        elements.monthlyBudget.value = this.budgetData.monthlyBudget;
+                    }
+                    
+                    if (elements.alertThreshold) {
+                        elements.alertThreshold.value = this.budgetData.alertThreshold;
+                        elements.alertThresholdValue.textContent = `${this.budgetData.alertThreshold}%`;
+                    }
+                    
+                    if (elements.currentSpent) {
+                        elements.currentSpent.textContent = `${currentSpent.toFixed(2)}`;
+                    }
+                    
+                    if (elements.budgetRemaining) {
+                        elements.budgetRemaining.textContent = `${remaining.toFixed(2)}`;
+                        elements.budgetRemaining.className = remaining < 0 ? 'font-medium text-red-600' : 'font-medium text-green-600';
+                    }
+                    
+                    if (elements.budgetProgressBar) {
+                        elements.budgetProgressBar.style.width = `${progress}%`;
+                        elements.budgetProgressBar.className = 
+                            `h-2 rounded-full transition-all duration-300 ${
+                                progress >= 100 ? 'bg-red-600' : 
+                                progress >= this.budgetData.alertThreshold ? 'bg-yellow-500' : 
+                                'bg-blue-600'
+                            }`;
+                    }
+                    
+                    if (elements.totalCharsProcessed) {
+                        elements.totalCharsProcessed.textContent = stats.totalChars.toLocaleString();
+                    }
+                    
+                    if (elements.avgCostPer1k) {
+                        elements.avgCostPer1k.textContent = `${stats.avgCostPer1k.toFixed(4)}`;
+                    }
+                    
+                    if (elements.mostUsedVoice) {
+                        elements.mostUsedVoice.textContent = stats.mostUsedVoice.split('-')[1] || stats.mostUsedVoice;
+                    }
+                }
+                
+                exportBudgetData() {
+                    const exportData = {
+                        budgetData: this.budgetData,
+                        exportDate: new Date().toISOString(),
+                        stats: this.getUsageStatistics()
+                    };
+                    
+                    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `tts-budget-${this.currentMonth}.json`;
+                    a.click();
+                    URL.revokeObjectURL(url);
+                    
+                    showToast('Budget data exported', 'success');
+                }
+                
+                resetCurrentMonth() {
+                    if (confirm('Reset current month spending? This cannot be undone.')) {
+                        this.budgetData.spending[this.currentMonth] = 0;
+                        this.saveBudgetData();
+                        this.updateBudgetDisplay();
+                        showToast('Current month spending reset', 'success');
+                    }
+                }
+            }
+            
+            // ===========================================
+            // FUTURE FEATURES - TO BE IMPLEMENTED
+            // ===========================================
+            
+            /*
+            // SSML Support - Advanced speech markup for fine control
+            class SSMLProcessor {
+                static addSSMLTags(text, settings = {}) {
+                    // Add SSML tags for enhanced speech control
+                    // Example: <speak><prosody rate="slow">Hello</prosody></speak>
+                    // 
+                    // Features to implement:
+                    // - Pause control: <break time="500ms"/>
+                    // - Speed variations: <prosody rate="slow|medium|fast">
+                    // - Emphasis: <emphasis level="strong">
+                    // - Pronunciation: <phoneme alphabet="ipa" ph="həˈloʊ">
+                    // - Voice changes: <voice name="voice-name">
+                    // - Audio effects: <audio src="audio-file.mp3">
+                    
+                    let ssmlText = text;
+                    
+                    // Add automatic pauses
+                    if (settings.autoPause) {
+                        ssmlText = ssmlText
+                            .replace(/\./g, '.<break time="500ms"/>')
+                            .replace(/,/g, ',<break time="250ms"/>')
+                            .replace(/;/g, ';<break time="300ms"/>');
+                    }
+                    
+                    // Add emphasis to capitalized words
+                    if (settings.autoEmphasis) {
+                        ssmlText = ssmlText.replace(/\b[A-Z]{2,}\b/g, '<emphasis level="strong">            // Initialize budget manager
+            const budgetManager = new CostBudgetManager();</emphasis>');
+                    }
+                    
+                    return `<speak>${ssmlText}</speak>`;
+                }
+                
+                static validateSSML(ssml) {
+                    // Validate SSML markup
+                    // Check for proper tag nesting, valid attributes, etc.
+                    try {
+                        const parser = new DOMParser();
+                        const doc = parser.parseFromString(ssml, 'application/xml');
+                        return !doc.getElementsByTagName('parsererror').length;
+                    } catch (e) {
+                        return false;
+                    }
+                }
+            }
+            */
+            
+            /*
+            // Batch Processing - Multiple documents at once
+            class BatchProcessor {
+                constructor() {
+                    this.queue = [];
+                    this.isProcessing = false;
+                    this.maxConcurrent = 3;
+                }
+                
+                async addToQueue(documents) {
+                    // Add multiple documents to processing queue
+                    // documents: Array of {text, voice, settings, name}
+                    
+                    for (const doc of documents) {
+                        this.queue.push({
+                            id: Date.now() + Math.random(),
+                            document: doc,
+                            status: 'pending', // pending, processing, completed, error
+                            progress: 0,
+                            result: null,
+                            error: null
+                        });
+                    }
+                    
+                    this.updateBatchUI();
+                    
+                    if (!this.isProcessing) {
+                        this.processBatch();
+                    }
+                }
+                
+                async processBatch() {
+                    this.isProcessing = true;
+                    const processing = [];
+                    
+                    while (this.queue.some(item => item.status === 'pending')) {
+                        // Process up to maxConcurrent items simultaneously
+                        const pending = this.queue.filter(item => item.status === 'pending');
+                        const batch = pending.slice(0, this.maxConcurrent - processing.length);
+                        
+                        for (const item of batch) {
+                            item.status = 'processing';
+                            processing.push(this.processDocument(item));
+                        }
+                        
+                        if (processing.length >= this.maxConcurrent) {
+                            await Promise.race(processing);
+                            processing.splice(0, 1);
+                        }
+                        
+                        this.updateBatchUI();
+                    }
+                    
+                    // Wait for all remaining to complete
+                    await Promise.all(processing);
+                    this.isProcessing = false;
+                    
+                    this.onBatchComplete();
+                }
+                
+                async processDocument(item) {
+                    try {
+                        const { text, voice, settings } = item.document;
+                        
+                        // Split into chunks for progress tracking
+                        const chunks = SmartTextProcessor.optimizeChunks(text);
+                        let allAudio = [];
+                        
+                        for (let i = 0; i < chunks.length; i++) {
+                            const audioData = await synthesizeSpeech(chunks[i], voice, settings.rate, settings.pitch, settings.model);
+                            allAudio.push(audioData);
+                            
+                            item.progress = ((i + 1) / chunks.length) * 100;
+                            this.updateBatchUI();
+                        }
+                        
+                        // Combine audio chunks
+                        item.result = await this.combineAudioChunks(allAudio);
+                        item.status = 'completed';
+                        
+                    } catch (error) {
+                        item.error = error.message;
+                        item.status = 'error';
+                    }
+                }
+                
+                async combineAudioChunks(audioDataArray) {
+                    // Combine multiple audio chunks into single file
+                    // This would require audio processing library
+                    // For now, return first chunk
+                    return audioDataArray[0];
+                }
+                
+                updateBatchUI() {
+                    // Update batch processing UI
+                    const container = document.getElementById('batchProgress');
+                    if (!container) return;
+                    
+                    const completed = this.queue.filter(item => item.status === 'completed').length;
+                    const total = this.queue.length;
+                    const percentage = total > 0 ? (completed / total) * 100 : 0;
+                    
+                    container.innerHTML = `
+                        <div class="mb-2">Batch Progress: ${completed}/${total}</div>
+                        <div class="w-full bg-gray-200 rounded-full h-2">
+                            <div class="bg-blue-600 h-2 rounded-full" style="width: ${percentage}%"></div>
+                        </div>
+                    `;
+                }
+                
+                onBatchComplete() {
+                    // Handle batch completion
+                    const completed = this.queue.filter(item => item.status === 'completed');
+                    const failed = this.queue.filter(item => item.status === 'error');
+                    
+                    showToast(`Batch complete: ${completed.length} succeeded, ${failed.length} failed`, 'success');
+                    
+                    // Download all completed audio files as ZIP
+                    if (completed.length > 0) {
+                        this.downloadBatchResults(completed);
+                    }
+                    
+                    // Reset queue
+                    this.queue = [];
+                }
+                
+                downloadBatchResults(completedItems) {
+                    // Create ZIP file with all audio
+                    // Requires JSZip library
+                    // Implementation would create zip file and trigger download
+                }
+            }
+            */
+            
+            /*
+            // Voice Presets - Save favorite voice configurations
+            class VoicePresetManager {
+                constructor() {
+                    this.presets = JSON.parse(localStorage.getItem('voicePresets') || '[]');
+                }
+                
+                savePreset(name, config) {
+                    // Save voice configuration as preset
+                    const preset = {
+                        id: Date.now(),
+                        name,
+                        voice: config.voice,
+                        rate: config.rate,
+                        pitch: config.pitch,
+                        model: config.model,
+                        created: new Date().toISOString()
+                    };
+                    
+                    this.presets.push(preset);
+                    this.saveToStorage();
+                    this.renderPresets();
+                    
+                    showToast(`Preset "${name}" saved`, 'success');
+                }
+                
+                loadPreset(id) {
+                    // Load and apply preset configuration
+                    const preset = this.presets.find(p => p.id === id);
+                    if (!preset) return;
+                    
+                    // Apply to UI
+                    rateSelect.value = preset.rate;
+                    pitchSelect.value = preset.pitch;
+                    modelSelect.value = preset.model;
+                    
+                    // Select voice if available
+                    const voiceCards = document.querySelectorAll('.voice-card');
+                    voiceCards.forEach(card => {
+                        if (card.dataset.voiceName === preset.voice.name) {
+                            card.click();
+                        }
+                    });
+                    
+                    showToast(`Preset "${preset.name}" loaded`, 'success');
+                }
+                
+                deletePreset(id) {
+                    // Delete preset
+                    this.presets = this.presets.filter(p => p.id !== id);
+                    this.saveToStorage();
+                    this.renderPresets();
+                    
+                    showToast('Preset deleted', 'success');
+                }
+                
+                exportPresets() {
+                    // Export presets to JSON file
+                    const blob = new Blob([JSON.stringify(this.presets, null, 2)], { type: 'application/json' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `voice-presets-${new Date().toISOString().split('T')[0]}.json`;
+                    a.click();
+                    URL.revokeObjectURL(url);
+                }
+                
+                importPresets(file) {
+                    // Import presets from JSON file
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        try {
+                            const importedPresets = JSON.parse(e.target.result);
+                            
+                            // Merge with existing presets
+                            this.presets = [...this.presets, ...importedPresets];
+                            this.saveToStorage();
+                            this.renderPresets();
+                            
+                            showToast(`Imported ${importedPresets.length} presets`, 'success');
+                        } catch (error) {
+                            showToast('Invalid preset file', 'error');
+                        }
+                    };
+                    reader.readAsText(file);
+                }
+                
+                renderPresets() {
+                    // Render preset list in UI
+                    const container = document.getElementById('presetList');
+                    if (!container) return;
+                    
+                    if (this.presets.length === 0) {
+                        container.innerHTML = '<p class="text-gray-500 text-sm">No presets saved</p>';
+                        return;
+                    }
+                    
+                    container.innerHTML = this.presets.map(preset => `
+                        <div class="preset-item p-3 border border-gray-200 rounded-lg flex justify-between items-center">
+                            <div>
+                                <h4 class="font-medium">${preset.name}</h4>
+                                <p class="text-sm text-gray-600">${preset.voice.name}</p>
+                                <p class="text-xs text-gray-500">Rate: ${preset.rate}x, Pitch: ${preset.pitch}</p>
+                            </div>
+                            <div class="flex gap-2">
+                                <button class="text-blue-500 hover:text-blue-700" onclick="voicePresets.loadPreset(${preset.id})">
+                                    <i class="fas fa-play"></i>
+                                </button>
+                                <button class="text-red-500 hover:text-red-700" onclick="voicePresets.deletePreset(${preset.id})">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </div>
+                        </div>
+                    `).join('');
+                }
+                
+                saveToStorage() {
+                    localStorage.setItem('voicePresets', JSON.stringify(this.presets));
+                }
+            }
+            
+            // Initialize voice presets (commented out for future use)
+            // const voicePresets = new VoicePresetManager();
+            */
+            
+            // Function to determine voice type and pricing
+            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 to calculate estimated cost
+            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 to update cost estimator UI
+            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);
+                
+                // Show the cost estimator
+                costEstimator.classList.remove('hidden');
+                
+                // Update the values
+                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';
+                }
+            }
+            
+            // Enhanced Initialize function
+            function init() {
+                // Load saved API key
+                if (apiKey) {
+                    apiKeyInput.value = apiKey;
+                    loadVoices();
+                }
+                
+                // Set PDF.js worker path
+                if (typeof pdfjsLib !== 'undefined') {
+                    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
+                }
+                
+                // Initialize AudioContext on user interaction
+                document.addEventListener('click', initAudioContext, { once: true });
+                
+                // API Key visibility toggle
+                const toggleKeyVisibility = document.getElementById('toggleKeyVisibility');
+                const eyeIcon = document.getElementById('eyeIcon');
+                
+                toggleKeyVisibility.addEventListener('click', () => {
+                    if (apiKeyInput.type === 'password') {
+                        apiKeyInput.type = 'text';
+                        eyeIcon.className = 'fas fa-eye-slash';
+                    } else {
+                        apiKeyInput.type = 'password';
+                        eyeIcon.className = 'fas fa-eye';
+                    }
+                });
+                
+                // Dark mode initialization
+                initDarkMode();
+                
+                // Keyboard shortcuts
+                initKeyboardShortcuts();
+                
+                // Bookmark system
+                initBookmarkSystem();
+                
+                // Progress indicator
+                initProgressIndicator();
+                
+                // Download functionality
+                initDownloadFeature();
+                
+                // Initialize Audio Library
+                document.getElementById('openLibraryBtn').addEventListener('click', () => {
+                    document.getElementById('audioLibraryPanel').classList.add('open');
+                });
+                
+                document.getElementById('closeAudioLibrary').addEventListener('click', () => {
+                    document.getElementById('audioLibraryPanel').classList.remove('open');
+                });
+                
+                document.getElementById('saveToLibraryBtn').addEventListener('click', saveToLibrary);
+                document.getElementById('clearLibraryBtn').addEventListener('click', () => {
+                    if (confirm('Clear entire audio library? This cannot be undone.')) {
+                        audioLibrary.clearLibrary();
+                        showToast('Library cleared', 'success');
+                    }
+                });
+                
+                document.getElementById('exportLibraryBtn').addEventListener('click', () => {
+                    audioLibrary.exportLibrary();
+                });
+                
+                // Initialize Budget System
+                document.getElementById('openBudgetBtn').addEventListener('click', () => {
+                    document.getElementById('costBudgetPanel').classList.add('open');
+                    budgetManager.updateBudgetDisplay();
+                });
+                
+                document.getElementById('closeBudgetPanel').addEventListener('click', () => {
+                    document.getElementById('costBudgetPanel').classList.remove('open');
+                });
+                
+                document.getElementById('monthlyBudget').addEventListener('change', (e) => {
+                    budgetManager.setMonthlyBudget(parseFloat(e.target.value) || 0);
+                });
+                
+                document.getElementById('alertThreshold').addEventListener('input', (e) => {
+                    budgetManager.setAlertThreshold(parseInt(e.target.value));
+                    document.getElementById('alertThresholdValue').textContent = `${e.target.value}%`;
+                });
+                
+                // Initialize cache system
+                ttsCache.init();
+                
+                // Update library display
+                audioLibrary.updateLibraryDisplay();
+            }
+            
+            // Dark Mode Implementation
+            function initDarkMode() {
+                // Check for saved theme preference or default to system preference
+                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);
+                } else {
+                    document.documentElement.setAttribute('data-theme', 'light');
+                    updateDarkModeIcon(false);
+                }
+                
+                darkModeToggle.addEventListener('click', toggleDarkMode);
+                
+                // Listen for system theme changes
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+                    if (!localStorage.getItem('theme')) {
+                        document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
+                        updateDarkModeIcon(e.matches);
+                    }
+                });
+            }
+            
+            function toggleDarkMode() {
+                const currentTheme = document.documentElement.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';
+            }
+            
+            // Keyboard Shortcuts Implementation
+            function initKeyboardShortcuts() {
+                let shortcutsVisible = false;
+                
+                document.addEventListener('keydown', (e) => {
+                    // Don't handle shortcuts when typing in inputs
+                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+                    
+                    switch (e.key) {
+                        case ' ':
+                        case 'Space':
+                            e.preventDefault();
+                            if (isPlaying && !isPaused) {
+                                pausePlayback();
+                            } else if (isPaused) {
+                                resumePlayback();
+                            } else {
+                                playBtn.click();
+                            }
+                            break;
+                        case 'Escape':
+                            if (isPlaying) {
+                                stopPlayback();
+                            }
+                            break;
+                        case 'ArrowLeft':
+                            e.preventDefault();
+                            seekAudio(-5); // Seek backwards 5 seconds
+                            break;
+                        case 'ArrowRight':
+                            e.preventDefault();
+                            seekAudio(5); // Seek forwards 5 seconds
+                            break;
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            adjustSpeed(0.1);
+                            break;
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            adjustSpeed(-0.1);
+                            break;
+                        case 'b':
+                        case 'B':
+                            if (e.ctrlKey || e.metaKey) {
+                                e.preventDefault();
+                                addBookmark();
+                            }
+                            break;
+                        case '?':
+                        case '/':
+                            e.preventDefault();
+                            toggleKeyboardShortcuts();
+                            break;
+                    }
+                });
+                
+                function toggleKeyboardShortcuts() {
+                    const shortcutsEl = document.querySelector('.keyboard-shortcuts');
+                    if (!shortcutsEl) {
+                        const shortcuts = document.createElement('div');
+                        shortcuts.className = 'keyboard-shortcuts';
+                        shortcuts.innerHTML = `
+                            <div class="mb-2 font-semibold">Keyboard Shortcuts:</div>
+                            <div>Space - Play/Pause</div>
+                            <div>Esc - Stop</div>
+                            <div>← → - Seek 5 seconds</div>
+                            <div>↑ ↓ - Adjust speed</div>
+                            <div>Ctrl+B - Add bookmark</div>
+                            <div>? - Show/hide shortcuts</div>
+                        `;
+                        document.body.appendChild(shortcuts);
+                    }
+                    
+                    const shortcutsEl2 = document.querySelector('.keyboard-shortcuts');
+                    shortcutsVisible = !shortcutsVisible;
+                    shortcutsEl2.style.display = shortcutsVisible ? 'block' : 'none';
+                }
+                
+                function seekAudio(seconds) {
+                    if (!audioSource || !isPlaying) return;
+                    
+                    // Calculate current position and new position
+                    const currentTime = audioContext.currentTime - startTime;
+                    const newTime = Math.max(0, Math.min(currentTime + seconds, audioBuffer.duration));
+                    
+                    // Stop current playback
+                    audioSource.stop();
+                    
+                    // Create new source and start from new position
+                    audioSource = audioContext.createBufferSource();
+                    audioSource.buffer = audioBuffer;
+                    audioSource.connect(audioContext.destination);
+                    
+                    startTime = audioContext.currentTime - newTime;
+                    audioSource.start(0, newTime);
+                    
+                    audioSource.onended = () => {
+                        if (isPlaying && !isPaused) {
+                            stopPlayback();
+                        }
+                    };
+                }
+                
+                function adjustSpeed(delta) {
+                    const currentRate = parseFloat(rateSelect.value);
+                    const newRate = Math.max(0.5, Math.min(2.0, currentRate + delta));
+                    rateSelect.value = newRate.toString();
+                    showToast(`Speed: ${newRate}x`, 'success', 1000);
+                }
+            }
+            
+            // Bookmark System Implementation
+            function initBookmarkSystem() {
+                addBookmarkBtn.addEventListener('click', addBookmark);
+                showBookmarksBtn.addEventListener('click', toggleBookmarkPanel);
+                
+                // Create bookmark panel
+                const bookmarkPanel = document.createElement('div');
+                bookmarkPanel.className = 'bookmark-panel';
+                bookmarkPanel.innerHTML = `
+                    <div class="p-4 border-b border-gray-200">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-lg font-semibold">Bookmarks</h3>
+                            <button id="closeBookmarkPanel" class="text-gray-400 hover:text-gray-600">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div id="bookmarkList" class="p-4">
+                        <!-- Bookmarks will be inserted here -->
                     </div>
-                </div>
+                `;
+                document.body.appendChild(bookmarkPanel);
                 
-                <div class="progress-container">
-                    <div class="flex justify-between text-sm text-gray-600 mb-1">
-                        <span id="currentTime">0:00</span>
-                        <span id="totalTime">0:00</span>
-                    </div>
-                    <div id="progressContainer" class="w-full bg-gray-200 rounded-full h-2 flex">
-                        <!-- Progress chunks will be added dynamically -->
-                        <div id="progressBar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
+                document.getElementById('closeBookmarkPanel').addEventListener('click', () => {
+                    bookmarkPanel.classList.remove('open');
+                    isBookmarkPanelOpen = false;
+                });
+                
+                renderBookmarks();
+            }
+            
+            function addBookmark() {
+                if (!currentText.trim()) {
+                    showToast('No document loaded to bookmark', 'error');
+                    return;
+                }
+                
+                const selection = window.getSelection();
+                let text = '';
+                let position = 0;
+                
+                if (selection.rangeCount > 0 && selection.toString().trim()) {
+                    text = selection.toString().trim();
+                    // Find position of selected text in document
+                    const range = selection.getRangeAt(0);
+                    const preCaretRange = range.cloneRange();
+                    preCaretRange.selectNodeContents(documentContent);
+                    preCaretRange.setEnd(range.startContainer, range.startOffset);
+                    position = preCaretRange.toString().length;
+                } else {
+                    // If no selection, bookmark current reading position
+                    text = 'Reading position';
+                    position = currentReadingPosition;
+                }
+                
+                const bookmark = {
+                    id: Date.now(),
+                    text: text.substring(0, 50) + (text.length > 50 ? '...' : ''),
+                    position: position,
+                    timestamp: new Date().toLocaleString()
+                };
+                
+                bookmarks.push(bookmark);
+                localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+                renderBookmarks();
+                updateBookmarkCount();
+                
+                showToast('Bookmark added', 'success', 1000);
+            }
+            
+            function toggleBookmarkPanel() {
+                const panel = document.querySelector('.bookmark-panel');
+                isBookmarkPanelOpen = !isBookmarkPanelOpen;
+                panel.classList.toggle('open', isBookmarkPanelOpen);
+            }
+            
+            function renderBookmarks() {
+                const bookmarkList = document.getElementById('bookmarkList');
+                if (!bookmarkList) return;
+                
+                if (bookmarks.length === 0) {
+                    bookmarkList.innerHTML = '<p class="text-gray-500 text-sm">No bookmarks yet</p>';
+                    return;
+                }
+                
+                bookmarkList.innerHTML = bookmarks.map(bookmark => `
+                    <div class="bookmark-item" data-position="${bookmark.position}">
+                        <div class="text-sm font-medium">${bookmark.text}</div>
+                        <div class="text-xs text-gray-500 mt-1">${bookmark.timestamp}</div>
+                        <button class="text-red-500 hover:text-red-700 text-xs mt-2" onclick="removeBookmark(${bookmark.id})">
+                            <i class="fas fa-trash mr-1"></i>Remove
+                        </button>
                     </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="mt-8 text-center text-gray-500 text-sm">
-            <p>Supports documents up to 1,000,000 characters. Requires a valid Google Cloud API key with Text-to-Speech API enabled.</p>
-        </div>
-    </div>
-
-    <!-- PDF.js library for PDF support -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
-    
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // DOM Elements
-            const apiKeyInput = document.getElementById('apiKey');
-            const saveKeyBtn = document.getElementById('saveKeyBtn');
-            const uploadBtn = document.getElementById('uploadBtn');
-            const pasteBtn = document.getElementById('pasteBtn');
-            const dropzone = document.getElementById('dropzone');
-            const fileInput = document.getElementById('fileInput');
-            const documentContent = document.getElementById('documentContent');
-            const charCount = document.getElementById('charCount');
-            const voiceGrid = document.getElementById('voiceGrid');
-            const refreshVoicesBtn = document.getElementById('refreshVoicesBtn');
-            const languageSelect = document.getElementById('languageSelect');
-            const rateSelect = document.getElementById('rateSelect');
-            const pitchSelect = document.getElementById('pitchSelect');
-            const modelSelect = document.getElementById('modelSelect');
-            const playBtn = document.getElementById('playBtn');
-            const pauseBtn = document.getElementById('pauseBtn');
-            const stopBtn = document.getElementById('stopBtn');
-            const currentTime = document.getElementById('currentTime');
-            const totalTime = document.getElementById('totalTime');
-            const progressContainer = document.getElementById('progressContainer');
-            const progressBar = document.getElementById('progressBar');
+                `).join('');
+                
+                // Add click handlers for navigation
+                bookmarkList.querySelectorAll('.bookmark-item').forEach(item => {
+                    item.addEventListener('click', (e) => {
+                        if (e.target.closest('button')) return; // Don't navigate if clicking delete
+                        const position = parseInt(item.dataset.position);
+                        navigateToPosition(position);
+                    });
+                });
+            }
             
-            // Audio and state variables
-            let audioContext;
-            let audioBuffer;
-            let audioSource;
-            let currentText = '';
-            let isPlaying = false;
-            let isPaused = false;
-            let selectedVoice = null;
-            let startTime = 0;
-            let pauseTime = 0;
-            let estimatedDuration = 0;
-            let currentChunkIndex = 0;
-            const MAX_CHUNK_SIZE = 5000; // Characters per chunk (Google TTS limit)
-            let totalChunks = 0;
-            let audioQueue = [];
-            let apiKey = localStorage.getItem('googleTTSApiKey') || '';
-            
-            // Initialize
-            function init() {
-                // Load saved API key
-                if (apiKey) {
-                    apiKeyInput.value = apiKey;
-                    loadVoices();
+            function removeBookmark(id) {
+                bookmarks = bookmarks.filter(b => b.id !== id);
+                localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+                renderBookmarks();
+                updateBookmarkCount();
+                showToast('Bookmark removed', 'success', 1000);
+            }
+            
+            function updateBookmarkCount() {
+                bookmarkCount.textContent = bookmarks.length.toString();
+            }
+            
+            function navigateToPosition(position) {
+                // Scroll to position in document
+                const documentParagraphs = documentContent.children;
+                let currentPos = 0;
+                
+                for (let i = 0; i < documentParagraphs.length; i++) {
+                    const p = documentParagraphs[i];
+                    const pText = p.textContent;
+                    
+                    if (currentPos + pText.length >= position) {
+                        p.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        // Highlight the paragraph briefly
+                        p.style.backgroundColor = 'rgba(34, 197, 94, 0.2)';
+                        setTimeout(() => {
+                            p.style.backgroundColor = '';
+                        }, 2000);
+                        break;
+                    }
+                    currentPos += pText.length;
                 }
                 
-                // Set PDF.js worker path
-                if (typeof pdfjsLib !== 'undefined') {
-                    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
+                toggleBookmarkPanel(); // Close panel after navigation
+            }
+            
+            // Reading Progress Indicator Implementation
+            function initProgressIndicator() {
+                // Calculate total words for reading progress
+                updateWordCount();
+                
+                // Make progress bar clickable for seeking
+                progressContainer.addEventListener('click', (e) => {
+                    if (!audioSource || !audioBuffer) return;
+                    
+                    const rect = progressContainer.getBoundingClientRect();
+                    const clickX = e.clientX - rect.left;
+                    const percentage = clickX / rect.width;
+                    const newTime = percentage * audioBuffer.duration;
+                    
+                    // Seek to clicked position
+                    seekToTime(newTime);
+                });
+            }
+            
+            function updateWordCount() {
+                if (currentText) {
+                    totalWords = currentText.split(/\s+/).filter(word => word.length > 0).length;
+                    estimatedDuration = (totalWords / wordsPerMinute) * 60; // in seconds
                 }
+            }
+            
+            function seekToTime(time) {
+                if (!audioSource || !audioBuffer) return;
                 
-                // Initialize AudioContext on user interaction
-                document.addEventListener('click', initAudioContext, { once: true });
+                // Stop current playback
+                audioSource.stop();
                 
-                // API Key visibility toggle
-                const toggleKeyVisibility = document.getElementById('toggleKeyVisibility');
-                const eyeIcon = document.getElementById('eyeIcon');
+                // Create new source and start from new position
+                audioSource = audioContext.createBufferSource();
+                audioSource.buffer = audioBuffer;
+                audioSource.connect(audioContext.destination);
                 
-                toggleKeyVisibility.addEventListener('click', () => {
-                    if (apiKeyInput.type === 'password') {
-                        apiKeyInput.type = 'text';
-                        eyeIcon.className = 'fas fa-eye-slash';
-                    } else {
-                        apiKeyInput.type = 'password';
-                        eyeIcon.className = 'fas fa-eye';
+                startTime = audioContext.currentTime - time;
+                audioSource.start(0, time);
+                
+                audioSource.onended = () => {
+                    if (isPlaying && !isPaused) {
+                        stopPlayback();
+                    }
+                };
+            }
+            
+            // Download Feature Implementation
+            function initDownloadFeature() {
+                downloadBtn.addEventListener('click', downloadAudio);
+            }
+            
+            async function downloadAudio() {
+                if (!currentAudioBlob) {
+                    showToast('No audio available to download', 'error');
+                    return;
+                }
+                
+                try {
+                    const url = URL.createObjectURL(currentAudioBlob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `tts-audio-${new Date().toISOString().split('T')[0]}.mp3`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+                    
+                    showToast('Audio downloaded successfully', 'success');
+                } catch (error) {
+                    console.error('Download error:', error);
+                    showToast('Failed to download audio', 'error');
+                }
+            }
+            
+            // Show 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</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: ${estimatedCost.textContent}</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);
+                
+                // Close modal on background click
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) {
+                        modal.remove();
                     }
                 });
             }
@@ -727,6 +2330,9 @@
                         voiceCard.classList.add('selected');
                         voiceCard.querySelector('.selected-icon').classList.remove('hidden');
                         selectedVoice = voice;
+                        
+                        // Update cost estimator when voice changes
+                        updateCostEstimator();
                     });
                     
                     // Play sample when clicking the play button
@@ -742,7 +2348,11 @@
                 // Select first voice by default
                 if (naturalVoices.length > 0) {
                     const firstCard = voiceGrid.querySelector('.voice-card');
-                    if (firstCard) firstCard.click();
+                    if (firstCard) {
+                        firstCard.click();
+                        // Update cost estimator after voice selection
+                        updateCostEstimator();
+                    }
                 }
             }
             
@@ -766,7 +2376,7 @@
                 }
             }
             
-            // Synthesize speech using Google TTS API
+            // Enhanced synthesize speech with caching and budget tracking
             async function synthesizeSpeech(text, voice, rate = 1, pitch = 0, model = 'standard') {
                 if (!apiKey) {
                     throw new Error('API key not provided');
@@ -776,8 +2386,15 @@
                     throw new Error('No text provided for synthesis');
                 }
                 
-                // Clean the API key
                 const cleanApiKey = apiKey.trim();
+                const settings = { rate, pitch, model };
+                
+                // Check cache first
+                const cachedAudio = await ttsCache.get(text, voice, settings);
+                if (cachedAudio) {
+                    console.log('Cache hit for text chunk');
+                    return cachedAudio;
+                }
                 
                 // Prepare voice configuration
                 let voiceConfig = {
@@ -789,8 +2406,8 @@
                 // Prepare audio configuration
                 let audioConfig = {
                     audioEncoding: 'MP3',
-                    speakingRate: Math.max(0.25, Math.min(4.0, rate)), // Clamp between 0.25 and 4.0
-                    pitch: Math.max(-20.0, Math.min(20.0, pitch)), // Clamp between -20 and 20
+                    speakingRate: Math.max(0.25, Math.min(4.0, rate)),
+                    pitch: Math.max(-20.0, Math.min(20.0, pitch)),
                 };
                 
                 // Add effects profile for studio quality
@@ -865,6 +2482,20 @@
                         throw new Error('Invalid response from Google TTS API - no audio content received');
                     }
                     
+                    // Calculate cost for this request
+                    const voiceType = getVoiceTypeAndPricing(voice.name);
+                    const cost = (text.length / 1000000) * voiceType.rate;
+                    
+                    // Add to budget tracking
+                    budgetManager.addSpending(cost, {
+                        characters: text.length,
+                        voice: voice.name,
+                        model: model
+                    });
+                    
+                    // Cache the result
+                    await ttsCache.set(text, voice, settings, data.audioContent, cost);
+                    
                     return data.audioContent;
                 } catch (error) {
                     console.error('Synthesis error:', error);
@@ -872,6 +2503,38 @@
                 }
             }
             
+            // Save current audio to library
+            async function saveToLibrary() {
+                if (!currentAudioBlob || !selectedVoice || !currentText) {
+                    showToast('No audio available to save', 'error');
+                    return;
+                }
+                
+                const name = prompt('Enter a name for this audio:') || audioLibrary.generateName({
+                    voice: selectedVoice,
+                    text: currentText
+                });
+                
+                if (!name) return;
+                
+                const voiceType = getVoiceTypeAndPricing(selectedVoice.name);
+                const cost = (currentText.length / 1000000) * voiceType.rate;
+                
+                const metadata = {
+                    name,
+                    text: currentText,
+                    voice: selectedVoice,
+                    rate: parseFloat(rateSelect.value),
+                    pitch: parseFloat(pitchSelect.value),
+                    model: modelSelect.value,
+                    duration: audioBuffer ? audioBuffer.duration : 0,
+                    cost
+                };
+                
+                await audioLibrary.saveAudio(currentAudioBlob, metadata);
+                showToast('Audio saved to library', 'success');
+            }
+            
             // Play audio data
             async function playAudioData(audioBase64) {
                 if (!audioContext) {
@@ -1040,6 +2703,9 @@
                 if (text.length > 1000000) {
                     showToast('Document exceeds 1,000,000 character limit. Some content may be truncated.', 'error');
                 }
+                
+                // Update cost estimator when document content changes
+                updateCostEstimator();
             }
             
             // Playback controls
@@ -1073,6 +2739,7 @@
                 stopPlayback();
             });
             
+            // Enhanced playback functions with progress tracking
             async function startPlayback() {
                 try {
                     isPlaying = true;
@@ -1089,7 +2756,9 @@
                         showToast(`Processing ${chunks.length} chunks...`, 'success', 2000);
                     }
                     
-                    // Process all chunks
+                    // Process all chunks and combine them
+                    let allAudioData = [];
+                    
                     for (let i = 0; i < chunks.length; i++) {
                         if (!isPlaying || isPaused) break;
                         
@@ -1102,13 +2771,12 @@
                             modelSelect.value
                         );
                         
-                        if (i === 0) {
-                            // Start playing first chunk immediately
-                            await playAudioData(audioData);
-                        } else {
-                            // Queue other chunks
-                            audioQueue.push(audioData);
-                        }
+                        allAudioData.push(audioData);
+                    }
+                    
+                    if (allAudioData.length > 0 && isPlaying) {
+                        // Convert all audio data to blobs and combine
+                        await combineAndPlayAudio(allAudioData);
                     }
                     
                 } catch (error) {
@@ -1118,36 +2786,128 @@
                 }
             }
             
-            function pausePlayback() {
-                if (audioSource && isPlaying && !isPaused) {
-                    audioSource.stop();
-                    pauseTime = audioContext.currentTime - startTime;
-                    isPaused = true;
-                    updatePlaybackButtons();
+            async function combineAndPlayAudio(audioDataArray) {
+                try {
+                    // For now, play the first chunk
+                    // In a more advanced implementation, we'd combine all chunks
+                    const firstAudioData = audioDataArray[0];
+                    
+                    // Convert base64 to blob for download
+                    const byteCharacters = atob(firstAudioData);
+                    const byteNumbers = new Array(byteCharacters.length);
+                    for (let i = 0; i < byteCharacters.length; i++) {
+                        byteNumbers[i] = byteCharacters.charCodeAt(i);
+                    }
+                    const byteArray = new Uint8Array(byteNumbers);
+                    currentAudioBlob = new Blob([byteArray], { type: 'audio/mpeg' });
+                    
+                    // Enable download button
+                    downloadBtn.disabled = false;
+                    
+                    // Play the audio
+                    await playAudioData(firstAudioData);
+                    
+                } catch (error) {
+                    console.error('Error combining audio:', error);
+                    showToast('Failed to process audio', 'error');
                 }
             }
             
-            function resumePlayback() {
-                if (isPaused && audioBuffer) {
-                    // Create new source for resume
+            // Enhanced play audio data with reading progress
+            async function playAudioData(audioBase64) {
+                if (!audioContext) {
+                    initAudioContext();
+                }
+                
+                try {
+                    // Decode base64 audio
+                    const audioData = Uint8Array.from(atob(audioBase64), c => c.charCodeAt(0));
+                    audioBuffer = await audioContext.decodeAudioData(audioData.buffer);
+                    
+                    // Create and play audio source
                     audioSource = audioContext.createBufferSource();
                     audioSource.buffer = audioBuffer;
                     audioSource.connect(audioContext.destination);
                     
-                    // Resume from pause point
-                    audioSource.start(0, pauseTime);
-                    startTime = audioContext.currentTime - pauseTime;
+                    // Set up playback state
+                    isPlaying = true;
                     isPaused = false;
                     updatePlaybackButtons();
                     
+                    // Start playback
+                    audioSource.start(0);
+                    startTime = audioContext.currentTime;
+                    
+                    // Start progress tracking
+                    startProgressTracking();
+                    
+                    // Handle playback end
                     audioSource.onended = () => {
                         if (isPlaying && !isPaused) {
                             stopPlayback();
                         }
                     };
+                } catch (error) {
+                    console.error('Error playing audio:', error);
+                    showToast('Failed to play audio: ' + error.message, 'error');
+                }
+            }
+            
+            function startProgressTracking() {
+                function updateProgress() {
+                    if (!isPlaying || isPaused || !audioSource) return;
+                    
+                    const currentTime = audioContext.currentTime - startTime;
+                    const duration = audioBuffer.duration;
+                    const progress = currentTime / duration;
+                    
+                    // Update audio progress bar
+                    progressBar.style.width = (progress * 100) + '%';
+                    
+                    // Update reading progress (estimated)
+                    currentReadingPosition = Math.floor(progress * currentText.length);
+                    const readingProgress = currentReadingPosition / currentText.length;
+                    document.getElementById('readingProgress').style.width = (readingProgress * 100) + '%';
+                    
+                    // Update current position marker
+                    currentPositionMarker.style.left = (progress * 100) + '%';
+                    
+                    // Update time displays
+                    document.getElementById('currentTime').textContent = formatTime(Math.floor(currentTime));
+                    document.getElementById('totalTime').textContent = formatTime(Math.floor(duration));
+                    
+                    // Highlight current reading position in document
+                    updateReadingHighlight();
+                    
+                    requestAnimationFrame(updateProgress);
+                }
+                
+                updateProgress();
+            }
+            
+            function updateReadingHighlight() {
+                // Remove previous highlights
+                documentContent.querySelectorAll('.reading-highlight').forEach(el => {
+                    el.classList.remove('reading-highlight');
+                });
+                
+                // Find and highlight current paragraph
+                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) {
+                        p.classList.add('reading-highlight');
+                        break;
+                    }
+                    pos += pText.length;
                 }
             }
             
+            // Enhanced stop playback
             function stopPlayback() {
                 if (audioSource && isPlaying) {
                     audioSource.stop();
@@ -1159,14 +2919,21 @@
                 pauseTime = 0;
                 currentChunkIndex = 0;
                 audioQueue = [];
+                currentReadingPosition = 0;
                 updatePlaybackButtons();
                 updateProgress(0);
+                
+                // Clear reading highlight
+                documentContent.querySelectorAll('.reading-highlight').forEach(el => {
+                    el.classList.remove('reading-highlight');
+                });
             }
             
             function updatePlaybackButtons() {
                 playBtn.disabled = isPlaying && !isPaused;
                 pauseBtn.disabled = !isPlaying || isPaused;
                 stopBtn.disabled = !isPlaying;
+                downloadBtn.disabled = !currentAudioBlob;
                 
                 if (isPlaying && !isPaused) {
                     playBtn.innerHTML = '<i class="fas fa-pause"></i>';
@@ -1192,27 +2959,8 @@
             }
             
             function splitTextIntoChunks(text, maxChunkSize) {
-                const chunks = [];
-                const sentences = text.split(/[.!?]+/).filter(s => s.trim());
-                
-                let currentChunk = '';
-                
-                for (const sentence of sentences) {
-                    if (currentChunk.length + sentence.length <= maxChunkSize) {
-                        currentChunk += sentence + '.';
-                    } else {
-                        if (currentChunk) {
-                            chunks.push(currentChunk.trim());
-                        }
-                        currentChunk = sentence + '.';
-                    }
-                }
-                
-                if (currentChunk) {
-                    chunks.push(currentChunk.trim());
-                }
-                
-                return chunks;
+                // Use smart text processor for optimized chunking
+                return SmartTextProcessor.optimizeChunks(text, maxChunkSize);
             }
             
             // Event listeners