diff --git "a/Yek.html" "b/Yek.html"
--- "a/Yek.html"
+++ "b/Yek.html"
@@ -8,768 +8,213 @@
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
 
         :root {
+            /* --- Single Light Theme Palette --- */
             --app-font: 'Vazirmatn', sans-serif;
-            --app-bg: #F4F7FC;
+            --app-bg: #F8F9FC;
             --panel-bg: #FFFFFF;
-            --panel-border: #E8EEF3;
-            --text-primary: #121826;
-            --text-secondary: #5C677D; /* Main grey for secondary text and icons */
-            --accent-primary: #3B82F6; /* Blue for highlights */
-            --accent-primary-hover: #2563EB;
-            --accent-secondary: #10B981; /* Green for success/other highlights */
-            --accent-secondary-hover: #059669;
-            --input-bg: #F8FAFC;
-            --input-border-focus: var(--accent-primary);
-
+            --panel-border: #EAEFF7;
+            --input-bg: #F6F8FB;
+            --input-border: #E1E7EF;
+            --text-primary: #1A202C;
+            --text-secondary: #626F86;
+            --text-tertiary: #8A94A6;
+            --accent-primary: #4A6CFA;
+            --accent-primary-hover: #3553D6;
+            --accent-primary-glow: rgba(74, 108, 250, 0.25);
+            --accent-secondary: #0FD4A8;
+            --accent-secondary-hover: #0DA986;
+            --accent-secondary-glow: rgba(15, 212, 168, 0.2);
+            --waveform-color-active: var(--accent-primary);
+            --waveform-color-inactive: #D0D9E6;
+            --waveform-dashed-line-color: #E0E4E9;
+            --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
+            --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
+            --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
+            
             --radius-card: 24px;
-            --radius-input: 14px;
-            --shadow-subtle: 0 2px 8px rgba(26, 32, 44, 0.04);
-            --shadow-medium: 0 6px 16px -2px rgba(26, 32, 44, 0.08), 0 3px 8px -3px rgba(26,32,44,0.05);
-            --shadow-strong: 0 10px 25px -5px rgba(26, 32, 44, 0.12), 0 6px 15px -6px rgba(26,32,44,0.08);
-            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --radius-btn: 14px;
+            --radius-input: 12px;
+            --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
             --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-
-            /* Custom Audio Player Colors */
-            --waveform-color-active: #3B82F6; /* Blue for active part of waveform */
-            --waveform-color-inactive: #D0D9E6; /* Lighter shade for inactive part of waveform */
-            --waveform-dashed-line-color: #E0E4E9; /* Very light grey for the dashed line */
         }
 
-        @keyframes fadeInDown {
-            from { opacity: 0; transform: translateY(-20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes modalZoomIn {
-            from { opacity: 0; transform: scale(0.8) translateY(20px); }
-            to { opacity: 1; transform: scale(1) translateY(0); }
-        }
-        @keyframes modalZoomOut {
-            from { opacity: 1; transform: scale(1) translateY(0); }
-            to { opacity: 0; transform: scale(0.8) translateY(20px); }
-        }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes modalZoomIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 
-        /* Keyframe for loading spinner in button */
-        @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
+        /* --- Original Loading Animation Keyframes --- */
+        @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        @keyframes satellite-pulse-1 { from { transform: scale(0.7) translateX(-50%); opacity: 0.6; } to { transform: scale(1.1) translateX(-50%); opacity: 1; } }
+        @keyframes satellite-pulse-2 { from { transform: scale(0.7) translateY(-50%); opacity: 0.6; } to { transform: scale(1.1) translateY(-50%); opacity: 1; } }
+        @keyframes satellite-pulse-3 { from { transform: scale(0.7) translateX(50%); opacity: 0.6; } to { transform: scale(1.1) translateX(50%); opacity: 1; } }
 
+        /* --- Base Styles --- */
         body {
-            font-family: var(--app-font);
-            direction: rtl;
-            background-color: var(--app-bg);
-            color: var(--text-primary);
-            font-size: 16px;
-            line-height: 1.8;
-            margin: 0;
-            padding: 2.5rem 0;
-            min-height: 100vh;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
-            overflow-x: hidden;
-        }
-
-        .container {
-            max-width: 780px;
-            width: 92%;
-            margin: 0 auto;
-        }
-
-        .app-header {
-            padding: 0.5rem 0 2.5rem 0;
-            text-align: center;
-            margin-bottom: 1.5rem;
-            animation: fadeInDown 0.8s 0.1s ease-out backwards;
-        }
-        .app-header h1 {
-            font-size: 2.1em;
-            font-weight: 900;
-            margin:0 0 0.6rem 0;
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
-        }
-        .app-header p {
-            font-size: 1em;
-            color: var(--text-secondary);
-            margin-top:0;
-            opacity: 0.85;
-            font-weight: 400;
-            line-height: 1.6;
-        }
-
-        .main-content {
-            padding: 2.5rem;
-            background-color: var(--panel-bg);
-            border-radius: var(--radius-card);
-            box-shadow: var(--shadow-strong);
-            border: 1px solid var(--panel-border);
-            animation: fadeInUp 0.8s 0.3s ease-out backwards;
-        }
-
-        .form-group { margin-bottom: 2rem; }
-
-        .label-with-info {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            margin-bottom: 1rem;
-        }
-        .label-with-info label {
-             margin-bottom: 0;
-        }
-
-        .info-icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            background-color: var(--input-bg);
-            border: 1px solid var(--panel-border);
-            color: var(--text-secondary);
-            font-size: 0.9em;
-            font-weight: 700;
-            cursor: pointer;
-            position: relative;
-            transition: var(--transition-smooth);
-            user-select: none;
-        }
-        .info-icon:hover, .info-icon:focus {
-            background-color: var(--accent-primary);
-            color: white;
-            border-color: var(--accent-primary);
-            transform: scale(1.1);
-            outline: none;
-        }
-
-        label {
-            display: block;
-            font-weight: 700;
-            color: var(--text-primary);
-            font-size: 1.05em;
-            margin-bottom: 0.8rem;
-        }
-
-        textarea, input[type="text"] {
-            width: 100%;
-            padding: 0.9rem 1.1rem;
-            border-radius: var(--radius-input);
-            border: 1px solid var(--panel-border);
-            background-color: var(--input-bg);
-            color: var(--text-primary);
-            box-shadow: var(--shadow-subtle) inset;
-            font-family: var(--app-font);
-            font-size: 1rem;
-            box-sizing: border-box;
-            transition: var(--transition-smooth);
-        }
-        textarea:focus, input[type="text"]:focus {
-            outline: none;
-            border-color: var(--input-border-focus);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), var(--shadow-subtle) inset;
-            background-color: #fff;
-        }
-        textarea { min-height: 100px; resize: vertical; }
-
-        .char-counter-wrapper {
-            font-size: 0.85em;
-            color: var(--text-secondary);
-            text-align: left;
-            margin-top: 0.5rem;
-            padding: 0 0.2rem;
-        }
+            font-family: var(--app-font); direction: rtl; background-color: var(--app-bg);
+            color: var(--text-primary); font-size: 16px; line-height: 1.8; margin: 0;
+            padding: 2.5rem 0; min-height: 100vh; -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale; display: flex; justify-content: center;
+            align-items: flex-start; overflow-x: hidden;
+            background-image: radial-gradient(var(--text-tertiary) 0.5px, transparent 0.5px);
+            background-size: 20px 20px; background-position: -10px -10px;
+        }
+        .container { max-width: 820px; width: 92%; margin: 0 auto; }
+        
+        /* --- App Header --- */
+        .app-header { padding: 0.5rem 0 2.5rem 0; text-align: center; margin-bottom: 1.5rem; animation: fadeIn 0.8s 0.2s ease-out backwards; }
+        .app-header h1 { font-size: 2.5em; font-weight: 900; margin: 0 0 0.8rem 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; }
+        .app-header p { font-size: 1.05em; color: var(--text-secondary); margin-top: 0; opacity: 0.9; font-weight: 400; line-height: 1.7; }
+        
+        /* --- Main Content Panel --- */
+        .main-content { padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.4s ease-out backwards; }
+        .form-group { margin-bottom: 2.2rem; }
+        label { display: block; font-weight: 700; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; }
+        textarea, input[type="text"] { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); }
+        textarea:focus, input[type="text"]:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); }
+        textarea { min-height: 120px; resize: vertical; }
+        .char-counter-wrapper { font-size: 0.85em; color: var(--text-tertiary); text-align: left; margin-top: 0.75rem; padding: 0 0.2rem; }
         #char-count { font-weight: 600; color: var(--accent-primary); }
-
-
-        /* --- نمایش گوینده منتخب --- */
-        #selected-speaker-display { text-align: center; margin-top: 1rem; position: relative; }
-        #selected-speaker-card {
-            display: inline-flex;
-            align-items: center;
-            background: linear-gradient(135deg, var(--input-bg) 0%, #fff 100%);
-            border-radius: var(--radius-card);
-            padding: 1rem 1.2rem;
-            box-shadow: var(--shadow-medium);
-            border: 1px solid var(--panel-border);
-            transition: var(--transition-bounce);
-            position: relative;
-            margin-bottom: 1.2rem;
-            cursor: pointer;
-        }
-         #selected-speaker-card:hover {
-            transform: translateY(-6px) scale(1.03);
-            box-shadow: var(--shadow-strong);
-        }
-        #selected-speaker-card img {
-            width: 75px; height: 75px;
-            border-radius: 50%;
-            object-fit: cover;
-            margin-left: 18px;
-            border: 3px solid var(--accent-secondary);
-            box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.5);
-            background-color: #e0e0e0;
-            transition: var(--transition-smooth);
-        }
-        #selected-speaker-card:hover img {
-            transform: scale(1.08) rotate(3deg);
-        }
-        #selected-speaker-info h3 { margin: 0; font-size: 1.35em; font-weight: 800; color: var(--text-primary); }
-        #selected-speaker-info p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.88em; font-weight: 500; }
-
-        #change-speaker-btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 auto;
-            padding: 10px 20px;
-            border-radius: var(--radius-input);
-            background: linear-gradient(45deg, var(--accent-primary-hover), var(--accent-primary));
-            border: none;
-            color: #fff;
-            cursor: pointer;
-            font-family: var(--app-font); font-weight: 600;
-            font-size: 1em;
-            transition: var(--transition-smooth);
-            box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35), var(--shadow-subtle);
-        }
-        #change-speaker-btn:hover {
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-primary-hover));
-            transform: translateY(-3px) scale(1.05);
-            box-shadow: 0 6px 12px -3px rgba(59, 130, 246, 0.45), var(--shadow-medium);
-        }
-        #change-speaker-btn svg {
-            width: 1.1em;
-            height: 1.1em;
-            margin-right: 0.5em;
-            fill: currentColor;
-        }
-
-
-        /* --- مودال عمومی --- */
-        .modal-overlay {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background-color: rgba(18, 24, 38, 0.6);
-            backdrop-filter: blur(8px) saturate(150%);
-            display: none; /* Hidden by default */
-            align-items: center; justify-content: center;
-            z-index: 1000; opacity: 0;
-            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
+        
+        /* --- Speaker Selection Display --- */
+        #selected-speaker-display { text-align: center; margin-top: 1.5rem; }
+        #selected-speaker-card { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--input-bg) 0%, var(--panel-bg) 100%); border-radius: 50px; padding: 0.75rem 0.75rem 0.75rem 1.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); transition: var(--transition-bounce); cursor: pointer; margin-bottom: 1.5rem; }
+        #selected-speaker-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-lg); border-color: var(--accent-primary); }
+        #selected-speaker-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-left: 1rem; border: 3px solid var(--accent-secondary); box-shadow: 0 0 15px -3px var(--accent-secondary-glow); transition: var(--transition-smooth); }
+        #selected-speaker-info { text-align: right; }
+        #selected-speaker-info h3 { margin: 0; font-size: 1.25em; font-weight: 800; }
+        #selected-speaker-info p { margin: 2px 0 0; color: var(--text-secondary); font-size: 0.85em; font-weight: 500; }
+        #change-speaker-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-btn); background: var(--panel-bg); border: 1px solid var(--input-border); color: var(--text-primary); cursor: pointer; font-family: var(--app-font); font-weight: 600; font-size: 1em; transition: var(--transition-smooth); box-shadow: var(--shadow-md); }
+        #change-speaker-btn:hover { background: var(--input-bg); border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-lg); }
+
+        /* --- Modals --- */
+        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(10px) saturate(150%); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity var(--transition-smooth); }
         .modal-overlay.visible { display: flex; opacity: 1; }
-
-        .modal-dialog {
-            background: var(--panel-bg);
-            padding: 2rem;
-            border-radius: var(--radius-card);
-            width: 90%;
-            box-shadow: var(--shadow-strong);
-            border: 1px solid var(--panel-border);
-            opacity: 0; /* For animation */
-            animation-duration: 0.35s;
-            animation-fill-mode: forwards;
-        }
-        .modal-overlay.visible .modal-dialog {
-            animation-name: modalZoomIn;
-        }
-        .modal-overlay.hiding .modal-dialog {
-            animation-name: modalZoomOut;
-        }
-
-
-        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
-        .modal-header h2 { margin: 0; font-size: 1.6em; font-weight: 800; color: var(--accent-primary);}
-        .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition-smooth); line-height: 1; }
+        .modal-dialog { background: var(--panel-bg); padding: 2.5rem; border-radius: var(--radius-card); width: 90%; box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); opacity: 0; animation: modalZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--panel-border); }
+        .modal-header h2 { margin: 0; font-size: 1.8em; font-weight: 800; color: var(--accent-primary); }
+        .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-tertiary); transition: var(--transition-smooth); line-height: 1; }
         .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); }
-
-
-        /* --- مودال گالری گویندگان (اختصاصی) --- */
-        #speaker-modal .modal-dialog {
-            max-width: 700px;
-            max-height: 85vh; overflow-y: auto;
-        }
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; }
-        @media (min-width: 640px) { #speaker-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
-        .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative;}
-        .speaker-card .speaker-visual {
-            border: 3px solid transparent;
-            border-radius: var(--radius-card);
-            overflow: hidden;
-            box-shadow: var(--shadow-subtle);
-            position: relative;
-            background-color: var(--input-bg);
-            transition: var(--transition-bounce);
-            padding: 6px;
-        }
-        .speaker-card:hover .speaker-visual {
-            transform: translateY(-5px) scale(1.06);
-            box-shadow: var(--shadow-medium);
-        }
+        #speaker-modal .modal-dialog { max-width: 750px; max-height: 85vh; overflow-y: auto; }
+        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.5rem; }
+        .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative; border-radius: var(--radius-card); padding: 0.5rem; }
+        .speaker-card:hover { transform: translateY(-8px); }
         .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img {
-            width: 100%; height: 120px;
-            object-fit: cover; display: block;
-            background-color: #e0e0e0;
-            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border-radius: calc(var(--radius-card) - 12px);
-        }
-        .speaker-card:hover img { transform: scale(1.12); }
-        .speaker-card .speaker-name { padding: 0.8rem 0.4rem 0.1rem; font-weight: 600; font-size: 0.9em; color: var(--text-secondary); transition: color 0.2s; }
-        .speaker-card input[type="radio"]:checked + .speaker-visual {
-            border-color: var(--accent-secondary);
-            box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.75);
-            background: linear-gradient(135deg, var(--accent-secondary-hover), var(--accent-primary));
-            transform: scale(1.05);
-        }
-        .speaker-card input[type="radio"]:checked + .speaker-visual img {
-            border: 2px solid white;
-            transform: scale(1.05);
-        }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name {
-            color: #fff;
-            font-weight: 700;
-        }
-
-        /* --- مودال اطلاعات (اختصاصی) --- */
-        #info-modal .modal-dialog {
-            max-width: 480px; /* Smaller width for info */
-        }
-        #info-modal-content p {
-            font-size: 1em;
-            line-height: 1.7;
-            color: var(--text-secondary);
-            margin-bottom: 0.5rem;
-        }
-        #info-modal-content p strong {
-            color: var(--text-primary);
-            font-weight: 600;
-        }
-        #info-modal-content .range-info {
-            font-size: 0.9em;
-            color: var(--accent-primary);
-            font-weight: 500;
-            margin-top: 1rem;
-            display: block;
-            text-align: center;
-        }
-
-
-        /* --- Slider & Button & Output --- */
-        .slider-container { display: flex; align-items: center; gap: 1.2rem; }
-        input[type="range"] {
-            flex-grow: 1; -webkit-appearance: none; appearance: none;
-            width: 100%; height: 8px;
-            background: #EAF0F6;
-            border-radius: 4px; outline: none;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        input[type="range"]::-webkit-slider-runnable-track {
-            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
-            height: 8px;
-            border-radius: 4px;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none; appearance: none;
-            width: 22px; height: 22px;
-            background: #fff;
-            border-radius: 50%; cursor: pointer;
-            border: 3px solid var(--accent-primary);
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-            margin-top: -7px;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-         input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]:focus::-webkit-slider-thumb {
-            transform: scale(1.2);
-            box-shadow: 0 3px 8px rgba(59, 130, 246, 0.35);
-        }
-        input[type="range"]::-moz-range-thumb {
-            width: 22px; height: 22px;
-            background: #fff;
-            border-radius: 50%; cursor: pointer;
-            border: 3px solid var(--accent-primary);
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-        }
-        input[type="range"]::-moz-range-track {
-            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
-            height: 8px;
-            border-radius: 4px;
-            border: none;
-        }
-        #temperature-value {
-            font-weight: 700; background-color: var(--input-bg);
-            padding: 0.5rem 1rem;
-            border-radius: 8px;
-            border: 1px solid var(--panel-border);
-            min-width: 45px; text-align: center;
-            color: var(--accent-primary);
-            font-size: 1em;
-            box-shadow: var(--shadow-subtle);
-        }
-
-        #generate-btn {
-            width: 100%; padding: 1rem 1.5rem;
-            font-size: 1.25em; font-weight: 800;
-            font-family: var(--app-font);
-            background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
-            color: #fff;
-            border: none;
-            border-radius: var(--radius-input);
-            cursor: pointer;
-            transition: var(--transition-smooth), transform 0.15s ease-out;
-            box-shadow: 0 5px 15px -4px rgba(59, 130, 246, 0.45), 0 5px 15px -4px rgba(16, 185, 129, 0.35);
-            position: relative;
-            overflow: hidden;
-            letter-spacing: 0.5px;
-        }
-        #generate-btn::before {
-            content: ''; position: absolute;
-            top: 0; left: -180%; width: 80%; height: 100%;
-            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
-            transform: skewX(-30deg);
-            transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
-        }
-        #generate-btn:hover::before { left: 180%; }
-        #generate-btn:hover:not(:disabled) {
-            transform: translateY(-5px) scale(1.02);
-            box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.55), 0 8px 20px -4px rgba(16, 185, 129, 0.45);
-        }
-        #generate-btn:active:not(:disabled) {
-            transform: translateY(-2px) scale(0.98);
-        }
-        #generate-btn:disabled {
-            background: #B8C2CC;
-            cursor: not-allowed; box-shadow: none; color: #E8EEF3;
-            transform: none;
-        }
-        #generate-btn:disabled::before { display: none; }
-        #generate-btn svg {
-             display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em;
-             vertical-align: middle;
-        }
-
-        /* --- Output Section (now the card container for status/loading/player) --- */
-        #output-section {
-            margin-top: 3rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            min-height: 200px;
-            position: relative;
-            box-sizing: border-box;
-            padding: 2rem;
-            background-color: var(--input-bg);
-            border-radius: var(--radius-card);
-            border: 2px dashed var(--panel-border);
-            box-shadow: var(--shadow-subtle) inset;
-            transition: var(--transition-smooth);
-        }
-        #output-section.has-content {
-            background-color: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            box-shadow: var(--shadow-medium);
-            padding: 0;
-            min-height: auto;
-        }
-        #output-section.has-content #status-message,
-        #output-section.has-content #loading-animation-wrapper {
-            display: none !important;
-        }
-
+        .speaker-card .speaker-visual { border: 3px solid transparent; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); position: relative; background-color: var(--input-bg); transition: var(--transition-bounce); }
+        .speaker-card:hover .speaker-visual { box-shadow: var(--shadow-lg); }
+        .speaker-card img { width: 100%; height: 130px; object-fit: cover; display: block; background-color: #e0e0e0; border-radius: 14px; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+        .speaker-card:hover img { transform: scale(1.1); }
+        .speaker-card .speaker-name { padding: 0.8rem 0.4rem 0.2rem; font-weight: 600; font-size: 0.95em; color: var(--text-secondary); transition: color 0.2s; }
+        .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--accent-secondary); box-shadow: 0 0 25px -5px var(--accent-secondary-glow); transform: scale(1.05); }
+
+        /* --- Slider --- */
+        .label-with-info { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; }
+        .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-secondary); font-size: 0.9em; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); user-select: none; }
+        .info-icon:hover { background-color: var(--accent-primary); color: white; border-color: var(--accent-primary); transform: scale(1.1); box-shadow: 0 0 10px var(--accent-primary-glow); }
+        .slider-container { display: flex; align-items: center; gap: 1.5rem; }
+        input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--input-border); border-radius: 3px; outline: none; cursor: pointer; }
+        input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%); height: 6px; border-radius: 3px; }
+        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #fff; border-radius: 50%; cursor: pointer; border: 4px solid var(--accent-primary); box-shadow: var(--shadow-md); margin-top: -9px; transition: var(--transition-fast); }
+        input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 8px var(--accent-primary-glow); }
+        #temperature-value { font-weight: 700; background-color: var(--input-bg); padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--input-border); min-width: 45px; text-align: center; color: var(--accent-primary); font-size: 1em; box-shadow: var(--shadow-sm); }
+        
+        /* --- Generate Button --- */
+        #generate-btn { width: 100%; padding: 1.1rem 1.5rem; font-size: 1.25em; font-weight: 800; font-family: var(--app-font); background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: var(--transition-smooth), transform 0.15s ease-out; box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px var(--accent-secondary-glow); position: relative; overflow: hidden; letter-spacing: 0.5px; }
+        #generate-btn:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px var(--accent-secondary-glow); }
+        #generate-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; color: var(--text-secondary); }
+        #generate-btn svg { display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em; vertical-align: middle; }
+
+        /* --- Output Section --- */
+        #output-section { margin-top: 3rem; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 220px; position: relative; box-sizing: border-box; padding: 2rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); }
+        #output-section.has-content { background-color: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); padding: 0; min-height: auto; }
         #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; }
-
-
-        /* --- انیمیشن پردازش --- */
-        #loading-animation-wrapper {
-            display: none;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 1.8rem;
-            width: 100%;
-        }
-        .orbital-loader {
-            width: 110px;
-            height: 110px;
-            position: relative;
-            animation: rotate-loader-orbital 10s linear infinite;
-        }
-        .orbit {
-            position: absolute;
-            top: 50%; left: 50%;
-            border: 2px dashed rgba(59, 130, 246, 0.25);
-            border-radius: 50%;
-            transform-origin: center center;
-        }
+        
+        /* --- Original Loading Animation --- */
+        #loading-animation-wrapper { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; width: 100%; }
+        .orbital-loader { width: 110px; height: 110px; position: relative; animation: rotate-loader-orbital 10s linear infinite; }
+        .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(74, 108, 250, 0.35); border-radius: 50%; transform-origin: center center; }
         .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: orbit-spin 2.8s linear infinite reverse; }
         .orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; }
         .orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; }
-
-        .orbit .satellite {
-            position: absolute;
-            width: 10px; height: 10px;
-            border-radius: 50%;
-            background-color: var(--accent-primary);
-            box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary);
-        }
+        .orbit .satellite { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-primary); box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary); }
         .orbit:nth-child(1) .satellite { top: -5px; left: 50%; animation: satellite-pulse-1 1.4s ease-in-out infinite alternate; }
         .orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); animation: satellite-pulse-2 1.4s 0.2s ease-in-out infinite alternate; }
         .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;}
-
-        @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        @keyframes satellite-pulse-1 {
-            from { transform: scale(0.7) translateX(-50%); opacity: 0.6; }
-            to { transform: scale(1.1) translateX(-50%); opacity: 1; }
-        }
-        @keyframes satellite-pulse-2 {
-            from { transform: scale(0.7) translateY(-50%); opacity: 0.6; }
-            to { transform: scale(1.1) translateY(-50%); opacity: 1; }
-        }
-        @keyframes satellite-pulse-3 {
-            from { transform: scale(0.7) translateX(50%); opacity: 0.6; }
-            to { transform: scale(1.1) translateX(50%); opacity: 1; }
-        }
-        #loading-text {
-            font-size: 1.2em;
-            font-weight: 700;
-            color: var(--text-primary);
-            text-align: center;
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        /* --- Custom Audio Player Styles --- */
-        #audio-player-content {
-            display: none;
-            width: 100%;
-            padding: 1.5rem;
-            box-sizing: border-box;
-            flex-direction: column;
-            gap: 1.2rem;
-        }
-
-        .audio-waveform-container {
-            display: flex;
-            align-items: center;
-            gap: 1rem; /* Space between time labels and waveform */
-            width: 100%;
-            margin-bottom: 1rem;
-        }
-        .audio-time {
-            font-size: 0.9em;
-            color: var(--text-secondary);
-            min-width: 40px; /* Consistent width for time labels */
-            text-align: center;
-            font-variant-numeric: tabular-nums; /* Ensures numbers align vertically */
-            user-select: none; /* Prevent selection of time text */
-        }
-
-        /* Waveform Display (Canvas now) */
-        .audio-waveform {
-            flex-grow: 1;
-            height: 60px; /* Fixed height for the waveform area */
-            position: relative;
-            overflow: hidden; /* To contain dashed line */
-            display: flex; /* Flex context for canvas alignment */
-            align-items: center; /* Vertically center canvas */
-            justify-content: center; /* Horizontally center canvas */
-            margin-bottom: 0.5rem; /* Slightly less space from controls for compact feel */
-        }
-
-        #audio-waveform-canvas {
-            display: block; /* Remove extra space below canvas */
-            max-width: 100%; /* Ensure canvas doesn't overflow */
-            height: 100%; /* Canvas takes full height of its container */
-        }
-
-        .audio-waveform-dashed-line {
-            position: absolute;
-            top: 50%;
-            left: 0;
-            width: 100%;
-            height: 1px;
-            background-image: linear-gradient(to right, var(--waveform-dashed-line-color) 33%, transparent 0%);
-            background-position: center;
-            background-size: 10px 1px;
-            transform: translateY(-50%);
-            z-index: 1; /* Above the canvas */
-        }
-
-        /* Audio Controls */
-        .audio-controls-group {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 1.5rem; /* Space between play/skip buttons */
-            margin-bottom: 1rem; /* Space between main controls and utility controls */
-        }
-        .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn, .audio-speed-btn {
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 8px; /* Default padding for clickable area */
-            transition: transform 0.2s, opacity 0.2s;
-        }
-        .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn {
-            color: var(--text-secondary); /* Grey for icons */
-        }
-        .audio-skip-btn:hover, .audio-play-pause-btn-large:hover, .audio-volume-btn:hover {
-            opacity: 0.8;
-        }
-        .audio-skip-btn:active, .audio-play-pause-btn-large:active, .audio-volume-btn:active {
-            transform: scale(0.9);
-        }
-        .audio-skip-btn svg {
-            width: 28px;
-            height: 28px;
-            fill: currentColor;
-        }
-        .audio-play-pause-btn-large {
-            padding: 0; /* Remove padding for this button to control size via width/height */
-            width: 50px;
-            height: 50px;
-        }
-        .audio-play-pause-btn-large svg {
-            width: 38px;
-            height: 38px;
-            fill: currentColor;
-        }
-
-        .audio-utility-controls {
-            display: flex;
-            align-items: center;
-            justify-content: space-between; /* Volume left, Speed right */
-            width: 100%;
-        }
-        .audio-volume-btn svg {
-            width: 24px;
-            height: 24px;
-            fill: currentColor;
-        }
-        .audio-speed-btn {
-            font-family: var(--app-font);
-            font-size: 0.9em;
-            font-weight: 600;
-            background-color: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            border-radius: 8px;
-            min-width: 40px;
-            text-align: center;
-            color: var(--text-primary);
-            box-shadow: var(--shadow-subtle);
-        }
-        .audio-speed-btn:hover {
-            background-color: var(--input-bg);
-        }
-        
-        /* Hide the default audio player */
+        #loading-text { font-size: 1.2em; font-weight: 700; color: var(--text-primary); text-align: center; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+
+        /* --- Original Audio Player Styles --- */
+        #audio-player-content { display: none; width: 100%; padding: 1.5rem; box-sizing: border-box; flex-direction: column; gap: 1.2rem; }
+        .audio-waveform-container { display: flex; align-items: center; gap: 1rem; width: 100%; margin-bottom: 1rem; }
+        .audio-time { font-size: 0.9em; color: var(--text-secondary); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; user-select: none; }
+        .audio-waveform { flex-grow: 1; height: 60px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; }
+        #audio-waveform-canvas { display: block; max-width: 100%; height: 100%; }
+        .audio-waveform-dashed-line { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-image: linear-gradient(to right, var(--waveform-dashed-line-color) 33%, transparent 0%); background-position: center; background-size: 10px 1px; transform: translateY(-50%); z-index: 1; }
+        .audio-controls-group { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
+        .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn, .audio-speed-btn { background: none; border: none; cursor: pointer; padding: 8px; transition: transform 0.2s, opacity 0.2s; }
+        .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn { color: var(--text-secondary); }
+        .audio-skip-btn:hover, .audio-play-pause-btn-large:hover, .audio-volume-btn:hover { color: var(--accent-primary); opacity: 0.9; }
+        .audio-skip-btn:active, .audio-play-pause-btn-large:active, .audio-volume-btn:active { transform: scale(0.9); }
+        .audio-skip-btn svg { width: 28px; height: 28px; fill: currentColor; }
+        .audio-play-pause-btn-large { padding: 0; width: 50px; height: 50px; }
+        .audio-play-pause-btn-large svg { width: 38px; height: 38px; fill: currentColor; }
+        .audio-utility-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; }
+        .audio-volume-btn svg { width: 24px; height: 24px; fill: currentColor; }
+        .audio-speed-btn { font-family: var(--app-font); font-size: 0.9em; font-weight: 600; background-color: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; min-width: 40px; text-align: center; color: var(--text-primary); box-shadow: var(--shadow-sm); }
+        .audio-speed-btn:hover { background-color: var(--input-bg); }
         #hidden-audio-player { display: none !important; }
 
-        /* Responsive adjustments for mobile */
         @media (max-width: 600px) {
-            .container {
-                width: 95%;
-            }
-            .main-content {
-                padding: 1.5rem;
-            }
-            .app-header h1 {
-                font-size: 1.8em;
-            }
-            #audio-player-content {
-                padding: 1rem;
-                gap: 0.8rem; /* Reduce gap inside player */
-            }
-            .audio-waveform-container {
-                gap: 0.5rem; /* Reduce gap around waveform */
-            }
-            .audio-time {
-                font-size: 0.85em; /* Smaller time font */
-                min-width: 35px;
-            }
-            .audio-skip-btn svg {
-                width: 24px;
-                height: 24px;
-            }
-            .audio-play-pause-btn-large {
-                width: 44px;
-                height: 44px;
-            }
-            .audio-play-pause-btn-large svg {
-                width: 32px;
-                height: 32px;
-            }
-            .audio-controls-group {
-                gap: 1rem; /* Reduce gap between play/skip */
-            }
-            .audio-volume-btn svg {
-                width: 20px;
-                height: 20px;
-            }
-            .audio-speed-btn {
-                font-size: 0.8em;
-                padding: 5px 10px;
-            }
+            body { padding: 1.5rem 0; }
+            .main-content { padding: 1.5rem; }
+            .app-header h1 { font-size: 2em; }
+            #selected-speaker-card { flex-direction: column; padding: 1rem; border-radius: var(--radius-card); }
+            #selected-speaker-card img { margin-left: 0; margin-bottom: 1rem; }
         }
     </style>
 </head>
 <body>
+
     <div class="container">
         <header class="app-header">
-            <h1>تبدیل متن به صدا با هوش مصنوعی آلفا</h1>
-            <p>صدایی نو، تجربه‌ای نوین در تبدیل متن به گفتار با هوش مصنوعی پیشرفته</p>
+            <h1>مولد صدای هوشمند آلفا</h1>
+            <p>کیفیت استودیو، قدرت هوش مصنوعی. صدایی فراتر از انتظار خلق کنید.</p>
         </header>
 
         <main class="main-content">
             <form id="tts-form">
                 <div class="form-group">
-                    <label for="text-input">📝 متن مورد نظر شما</label>
-                    <textarea id="text-input" rows="4" placeholder="متن خود را اینجا وارد کنید..."></textarea>
+                    <label for="text-input">📝 متن اصلی</label>
+                    <textarea id="text-input" rows="5" placeholder="متن خود را برای تبدیل به گفتار اینجا وارد کنید..."></textarea>
                     <div class="char-counter-wrapper">
                         <span id="char-count">0</span> / <span id="char-max">50000</span> نویسه
                     </div>
                 </div>
+
                 <div class="form-group">
-                    <label for="prompt-input">🗣️ توصیف سبک و لحن گفتار (اختیاری)</label>
-                    <input type="text" id="prompt-input" placeholder="مثال: با لحنی رسمی و موقر، یا شاد و کودکانه">
+                    <label for="prompt-input">🗣️ توصیف لحن و احساس (اختیاری)</label>
+                    <input type="text" id="prompt-input" placeholder="مثال: با لحنی آرام و قصه‌گو، یا صدای یک گوینده خبر حرفه‌ای">
                 </div>
 
                 <div class="form-group">
-                    <label>🎤 انتخاب گوینده حرفه‌ای</label>
+                    <label>🎤 گوینده منتخب</label>
                     <div id="selected-speaker-display">
                         <div id="selected-speaker-card" title="برای تغییر گوینده کلیک کنید">
                             <img id="selected-speaker-img" src="" alt="عکس گوینده">
                             <div id="selected-speaker-info">
                                 <h3 id="selected-speaker-name"></h3>
-                                <p id="selected-speaker-desc">گوینده پیش‌فرض</p>
+                                <p id="selected-speaker-desc"></p>
                             </div>
                         </div>
-                        <button type="button" id="change-speaker-btn">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M12 2.5a5.5 5.5 0 0 1 5.5 5.5c0 1.826-.889 3.442-2.257 4.494.04.054.082.106.126.158A7.5 7.5 0 0 1 21.75 18H2.25a7.5 7.5 0 0 1 6.381-5.348c.044-.052.087-.104.127-.158A5.502 5.502 0 0 1 6.5 8a5.5 5.5 0 0 1 5.5-5.5Zm3.018 9.589A7.502 7.502 0 0 0 12 11.5a7.502 7.502 0 0 0-3.018.589C6.44 12.51 5.018 13.56 4.135 14.997a.75.75 0 0 0 .614.853A10.51 10.51 0 0 0 12 16.5a10.51 10.51 0 0 0 7.251-.65.75.75 0 0 0 .614-.853 9.998 9.998 0 0 0-4.847-2.408Z" />
-                              </svg>
-                            تغییر گوینده
-                        </button>
+                        <button type="button" id="change-speaker-btn">تغییر گوینده</button>
                     </div>
                 </div>
 
                 <div class="form-group">
                     <div class="label-with-info">
-                        <label for="temperature-slider">🌡️ میزان خلاقیت و نوآوری صدا</label>
-                        <div class="info-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!
-                        </div>
+                        <label for="temperature-slider">🌡️ خلاقیت و پویایی صدا</label>
+                        <div class="info-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!</div>
                     </div>
                     <div class="slider-container">
                         <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
@@ -777,613 +222,244 @@
                     </div>
                 </div>
 
-                <button type="submit" id="generate-btn">✨ تولید صدا با آلفا</button>
+                <button type="submit" id="generate-btn">✨ خلق صدا با آلفا</button>
             </form>
 
             <div id="output-section">
-                <div id="status-message">صدای تولید شده در اینجا نمایش داده خواهد شد.</div>
+                <div id="status-message">صدای تولید شده در اینجا ظاهر خواهد شد.</div>
                 <div id="loading-animation-wrapper">
-                     <div class="orbital-loader">
-                        <div class="orbit"><div class="satellite"></div></div>
-                        <div class="orbit"><div class="satellite"></div></div>
-                        <div class="orbit"><div class="satellite"></div></div>
-                    </div>
-                    <p id="loading-text">در حال پردازش هوشمند و تولید صدا...</p>
+                      <div class="orbital-loader">
+                         <div class="orbit"><div class="satellite"></div></div>
+                         <div class="orbit"><div class="satellite"></div></div>
+                         <div class="orbit"><div class="satellite"></div></div>
+                     </div>
+                     <p id="loading-text">در حال پردازش هوشمند و تولید صدا...</p>
                 </div>
-
-                <!-- Custom Audio Player Structure -->
+                
                 <div id="audio-player-content">
-                    <div class="audio-waveform-container">
-                        <span class="audio-time audio-current-time">0:00</span>
-                        <div class="audio-waveform">
-                            <canvas id="audio-waveform-canvas"></canvas>
-                            <div class="audio-waveform-dashed-line"></div>
-                        </div>
-                        <span class="audio-time audio-total-time">0:00</span>
-                    </div>
-
-                    <div class="audio-controls-group">
-                        <button class="audio-skip-btn backward">
-                            <svg viewBox="0 0 24 24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg>
-                        </button>
-                        <button class="audio-play-pause-btn-large">
-                            <svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg>
-                            <svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
-                        </button>
-                        <button class="audio-skip-btn forward">
-                            <svg viewBox="0 0 24 24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg>
-                        </button>
-                    </div>
-
-                    <div class="audio-utility-controls">
-                        <button class="audio-volume-btn">
-                            <svg viewBox="0 0 24 24" class="volume-high-icon"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></svg>
-                            <svg viewBox="0 0 24 24" class="volume-mute-icon" style="display:none;"><path d="M7 9v6h4l5 5V4L11 9H7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zM19 12c0 .94-.23 1.82-.68 2.6L19 14.88c.45-.88.7-1.88.7-2.88 0-4.01-2.99-7.14-7-8.05v2.06c2.89.86 5 3.54 5 6.71zM4.55 4L2 6.55 9.45 14H7v6h4l5 5V14.55l4.05 4.05L22 18 12 8 4.55 4z"></path></svg>
-                        </button>
-                        <button class="audio-speed-btn">1x</button>
-                    </div>
+                     <div class="audio-waveform-container">
+                         <span class="audio-time audio-current-time">0:00</span>
+                         <div class="audio-waveform">
+                             <canvas id="audio-waveform-canvas"></canvas>
+                             <div class="audio-waveform-dashed-line"></div>
+                         </div>
+                         <span class="audio-time audio-total-time">0:00</span>
+                     </div>
+                      <div class="audio-controls-group">
+                         <button class="audio-skip-btn backward">
+                             <svg viewBox="0 0 24 24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg>
+                         </button>
+                         <button class="audio-play-pause-btn-large">
+                             <svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg>
+                             <svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
+                         </button>
+                         <button class="audio-skip-btn forward">
+                             <svg viewBox="0 0 24 24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg>
+                         </button>
+                     </div>
+                      <div class="audio-utility-controls">
+                         <button class="audio-volume-btn">
+                             <svg viewBox="0 0 24 24" class="volume-high-icon"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></svg>
+                             <svg viewBox="0 0 24 24" class="volume-mute-icon" style="display:none;"><path d="M7 9v6h4l5 5V4L11 9H7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zM19 12c0 .94-.23 1.82-.68 2.6L19 14.88c.45-.88.7-1.88.7-2.88 0-4.01-2.99-7.14-7-8.05v2.06c2.89.86 5 3.54 5 6.71zM4.55 4L2 6.55 9.45 14H7v6h4l5 5V14.55l4.05 4.05L22 18 12 8 4.55 4z"></path></svg>
+                         </button>
+                         <button class="audio-speed-btn">1x</button>
+                     </div>
                 </div>
                 <audio id="hidden-audio-player" style="display: none;"></audio>
             </div>
         </main>
     </div>
 
-    <!-- مودال گالری گویندگان -->
+    <!-- Modals -->
     <div id="speaker-modal" class="modal-overlay">
         <div class="modal-dialog">
             <div class="modal-header">
-                <h2>گالری گویندگان آلفا نوا</h2>
-                <button type="button" class="close-modal-btn" data-modal-id="speaker-modal" aria-label="بستن مودال">×</button>
-            </div>
-            <div id="speaker-grid">
-                <!-- Speaker cards will be generated here by JS -->
+                <h2>گالری گویندگان آلفا</h2>
+                <button type="button" class="close-modal-btn" data-modal-id="speaker-modal">×</button>
             </div>
+            <div id="speaker-grid"></div>
         </div>
     </div>
-
-    <!-- مودال اطلاعات خلاقیت صدا -->
     <div id="info-modal" class="modal-overlay">
-        <div class="modal-dialog">
+        <div class="modal-dialog" style="max-width: 520px;">
             <div class="modal-header">
-                <h2>🌡️ خلاقیت و نوآوری صدا</h2>
-                <button type="button" class="close-modal-btn" data-modal-id="info-modal" aria-label="بستن توضیحات">×</button>
+                <h2>🌡️ خلاقیت و پویایی صدا</h2>
+                <button type="button" class="close-modal-btn" data-modal-id="info-modal">×</button>
             </div>
-            <div id="info-modal-content">
-                <p>این تنظیم مشخص می‌کند که هوش مصنوعی تا چه حد در تولید صدا <strong>خلاقیت</strong> به خرج دهد.</p>
-                <p><strong>مقادیر بالاتر:</strong> منجر به صدایی متنوع‌تر، پویاتر و گاهی اوقات غیرمنتظره‌تر می‌شود. مناسب برای زمانی که به دنبال لحنی خاص و منحصربه‌فرد هستید.</p>
-                <p><strong>مقادیر پایین‌تر:</strong> صدایی پایدارتر، قابل پیش‌بینی‌تر و نزدیک‌تر به صدای استاندارد گوینده تولید می‌کند. مناسب برای خوانش متون رسمی یا زمانی که ثبات لحن اهمیت دارد.</p>
-                <span class="range-info">محدوده پیشنهادی: ۰.۱ (پایدار) تا ۱.۵ (بسیار خلاق)</span>
+            <div>
+                 <p style="color: var(--text-secondary); line-height: 1.9;">این پارامتر، میزان "غیرقابل پیش‌بینی بودن" و تنوع در صدای خروجی را کنترل می‌کند.</p>
+                 <p><strong>مقادیر بالاتر (نزدیک به ۱.۵):</strong> صدایی بسیار متنوع، احساسی و پویا ایجاد می‌کند. ایده‌آل برای محتوای خلاقانه و هنری.</p>
+                 <p><strong>مقادیر پایین‌تر (نزدیک به ۰.۱):</strong> صدایی پایدار، یکنواخت و قابل پیش‌بینی‌تر تولید می‌کند. مناسب برای خوانش متون رسمی و خبری.</p>
             </div>
         </div>
     </div>
-
-
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
 
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
-            const JOIN_QUEUE_URL = `${HF_SPACE_URL}/gradio_api/queue/join`;
-            const GET_DATA_URL_BASE = `${HF_SPACE_URL}/gradio_api/queue/data`;
-            const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
-            const FN_INDEX = 1;
-
-            const speakers = [
-                { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا" },
-                { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین" },
-                { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی" },
-                { id: "Zubenelgenubi", name: "رویا (زن)", desc: "گرم و صمیمی" },
-                { id: "Vindemiatrix", name: "کیان (مرد)", desc: "باوقار و رسمی" },
-                { id: "Sadachbia", name: "پریسا (زن)", desc: "شاداب و پویا" },
-                { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار" },
-                { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین" },
-                { id: "Laomedeia", name: "سهیل (مرد)", desc: "دوستانه و گیرا" },
-                { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح" },
-                { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ" },
-                { id: "Schedar", name: "نگار (زن)", desc: "مهربان و شیرین" },
-                { id: "Gacrux", name: "فرید (مرد)", desc: "پخته و قابل اعتماد" },
-                { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن" },
-                { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت" },
-                { id: "Algieba", name: "آناهیتا (زن)", desc: "با اصالت و شیک" },
-                { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی" },
-                { id: "Erinome", name: "رسا (مرد)", desc: "شفاف و گویا" },
-                { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت" },
-                { id: "Rasalthgeti", name: "الهه (زن)", desc: "اسرارآمیز و فریبنده" },
-                { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان" },
-                { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ" },
-                { id: "Callirrhoe", name: "نیما (مرد)", desc: "روایتگر و قصه‌گو" },
-                { id: "Autonoe", name: "هستی (زن)", "desc": "طبیعی و خودمانی" },
-                { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی" },
-                { id: "Iapetus", name: "ستاره (زن)", desc: "درخشان و گیرا" },
-                { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده" },
-                { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش" },
-                { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک" },
-                { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار" }
-            ];
-
-            const form = document.getElementById('tts-form');
-            const textInput = document.getElementById('text-input');
-            const promptInput = document.getElementById('prompt-input');
-            const tempSlider = document.getElementById('temperature-slider');
-            const tempValueSpan = document.getElementById('temperature-value');
-            const generateBtn = document.getElementById('generate-btn');
-
-            const outputSection = document.getElementById('output-section');
-            const statusMessage = document.getElementById('status-message');
-            const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper');
-
-            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
-            const changeSpeakerBtn = document.getElementById('change-speaker-btn');
-            const selectedSpeakerCard = document.getElementById('selected-speaker-card');
-            const speakerGridInModal = document.getElementById('speaker-grid');
-            const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img');
-            const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name');
-            const selectedSpeakerDescDisplay = document.getElementById('selected-speaker-desc');
-
-            // Modal Elements
-            const speakerModal = document.getElementById('speaker-modal');
-            const infoModal = document.getElementById('info-modal');
-            const tempInfoIcon = document.getElementById('temp-info-icon');
-
-            // --- Custom Audio Player Elements ---
-            const hiddenAudioPlayer = document.getElementById('hidden-audio-player');
-            const audioPlayerContent = document.getElementById('audio-player-content');
-            const audioCurrentTimeSpan = audioPlayerContent.querySelector('.audio-current-time');
-            const audioTotalTimeSpan = audioPlayerContent.querySelector('.audio-total-time');
-            const audioWaveformCanvas = document.getElementById('audio-waveform-canvas');
-            const waveformCtx = audioWaveformCanvas.getContext('2d');
-            const playPauseBtn = audioPlayerContent.querySelector('.audio-play-pause-btn-large');
-            const playIcon = playPauseBtn.querySelector('.play-icon');
-            const pauseIcon = playPauseBtn.querySelector('.pause-icon');
-            const skipBackwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.backward');
-            const skipForwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.forward');
-            const volumeBtn = audioPlayerContent.querySelector('.audio-volume-btn');
-            const volumeHighIcon = volumeBtn.querySelector('.volume-high-icon');
-            const volumeMuteIcon = volumeBtn.querySelector('.volume-mute-icon');
-            const speedBtn = audioPlayerContent.querySelector('.audio-speed-btn');
-
-            let currentPlaybackSpeedIndex = 0;
-            const playbackSpeeds = [1.0, 1.25, 1.5, 0.75]; // Adjusted speeds as common values
+    document.addEventListener('DOMContentLoaded', () => {
+        const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
+        const JOIN_QUEUE_URL = `${HF_SPACE_URL}/gradio_api/queue/join`;
+        const GET_DATA_URL_BASE = `${HF_SPACE_URL}/gradio_api/queue/data`;
+        const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
+        const FN_INDEX = 1;
 
-            let audioPeaks = []; // Stores calculated peaks for waveform
-            let audioContext = null; // Will be initialized when needed
+        const speakers = [ { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا" }, { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین" }, { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی" }, { id: "Zubenelgenubi", name: "رویا (زن)", desc: "گرم و صمیمی" }, { id: "Vindemiatrix", name: "کیان (مرد)", desc: "باوقار و رسمی" }, { id: "Sadachbia", name: "پریسا (زن)", desc: "شاداب و پویا" }, { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار" }, { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین" }, { id: "Laomedeia", name: "سهیل (مرد)", desc: "دوستانه و گیرا" }, { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح" }, { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ" }, { id: "Schedar", name: "نگار (زن)", desc: "مهربان و شیرین" }, { id: "Gacrux", name: "فرید (مرد)", desc: "پخته و قابل اعتماد" }, { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن" }, { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت" }, { id: "Algieba", name: "آناهیتا (زن)", desc: "با اصالت و شیک" }, { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی" }, { id: "Erinome", name: "رسا (مرد)", desc: "شفاف و گویا" }, { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت" }, { id: "Rasalthgeti", name: "الهه (زن)", desc: "اسرارآمیز و فریبنده" }, { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان" }, { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ" }, { id: "Callirrhoe", name: "نیما (مرد)", desc: "روایتگر و قصه‌گو" }, { id: "Autonoe", name: "هستی (زن)", "desc": "طبیعی و خودمانی" }, { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی" }, { id: "Iapetus", name: "ستاره (زن)", desc: "درخشان و گیرا" }, { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده" }, { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش" }, { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک" }, { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار" } ];
 
+        // --- DOM Elements ---
+        const form = document.getElementById('tts-form'); const textInput = document.getElementById('text-input'); const promptInput = document.getElementById('prompt-input'); const tempSlider = document.getElementById('temperature-slider'); const tempValueSpan = document.getElementById('temperature-value'); const generateBtn = document.getElementById('generate-btn'); const outputSection = document.getElementById('output-section'); const statusMessage = document.getElementById('status-message'); const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper'); const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage'); const changeSpeakerBtn = document.getElementById('change-speaker-btn'); const selectedSpeakerCard = document.getElementById('selected-speaker-card'); const speakerGridInModal = document.getElementById('speaker-grid'); const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img'); const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name'); const selectedSpeakerDescDisplay = document.getElementById('selected-speaker-desc'); const speakerModal = document.getElementById('speaker-modal'); const infoModal = document.getElementById('info-modal'); const tempInfoIcon = document.getElementById('temp-info-icon'); const hiddenAudioPlayer = document.getElementById('hidden-audio-player'); const audioPlayerContent = document.getElementById('audio-player-content'); const audioCurrentTimeSpan = audioPlayerContent.querySelector('.audio-current-time'); const audioTotalTimeSpan = audioPlayerContent.querySelector('.audio-total-time'); const audioWaveformCanvas = document.getElementById('audio-waveform-canvas'); const waveformCtx = audioWaveformCanvas.getContext('2d'); const playPauseBtn = audioPlayerContent.querySelector('.audio-play-pause-btn-large'); const playIcon = playPauseBtn.querySelector('.play-icon'); const pauseIcon = playPauseBtn.querySelector('.pause-icon'); const skipBackwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.backward'); const skipForwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.forward'); const volumeBtn = audioPlayerContent.querySelector('.audio-volume-btn'); const volumeHighIcon = volumeBtn.querySelector('.volume-high-icon'); const volumeMuteIcon = volumeBtn.querySelector('.volume-mute-icon'); const speedBtn = audioPlayerContent.querySelector('.audio-speed-btn');
+        let currentPlaybackSpeedIndex = 0; const playbackSpeeds = [1.0, 1.25, 1.5, 0.75]; let audioPeaks = []; let audioContext = null;
 
-            // Character Counter
-            const charCountSpan = document.getElementById('char-count');
-            const charMaxSpan = document.getElementById('char-max');
-            const MAX_CHARS = 50000;
-            charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
-
-            textInput.addEventListener('input', () => {
-                const currentLength = textInput.value.length;
-                charCountSpan.textContent = currentLength.toLocaleString('fa-IR');
-                if (currentLength > MAX_CHARS) {
-                    charCountSpan.style.color = 'var(--accent-secondary-hover)';
-                } else {
-                    charCountSpan.style.color = 'var(--accent-primary)';
-                }
-            });
-
-            function getSpeakerById(id) {
-                return speakers.find(s => s.id === id) || speakers[0];
-            }
-
-            function getImageUrl(speaker, index, size = 'thumb') {
-                const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
-                const imageSeed = speaker.id.charCodeAt(0) + speaker.id.length + index;
-                const imageIndex = (imageSeed * 7 + 5) % 100;
-                let portraitSizePath = 'thumb/';
-                if (size === 'large') portraitSizePath = '';
-                return `https://randomuser.me/api/portraits/${portraitSizePath}${gender}/${imageIndex}.jpg`;
-            }
-
-            function updateSelectedSpeakerDisplay(speakerId) {
-                const speaker = getSpeakerById(speakerId);
-                const speakerIndex = speakers.findIndex(s => s.id === speaker.id);
-                selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex, 'large');
-                selectedSpeakerImgDisplay.alt = `عکس گوینده ${speaker.name}`;
-                selectedSpeakerNameDisplay.textContent = speaker.name;
-                selectedSpeakerDescDisplay.textContent = speaker.desc || "گوینده منتخب شما";
-                selectedSpeakerIdStorage.value = speaker.id;
-            }
-
-            function createSpeakerCardsInModal() {
-                speakerGridInModal.innerHTML = '';
-                speakers.forEach((speaker, index) => {
-                    const cardLabel = document.createElement('label');
-                    cardLabel.className = 'speaker-card';
-                    cardLabel.setAttribute('for', `modal-speaker-${speaker.id}`);
-                    const isChecked = speaker.id === selectedSpeakerIdStorage.value ? 'checked' : '';
-                    cardLabel.innerHTML = `
-                        <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked}>
-                        <div class="speaker-visual">
-                            <img src="${getImageUrl(speaker, index, 'thumb')}" alt="${speaker.name}" loading="lazy">
-                            <div class="speaker-name">${speaker.name}</div>
-                        </div>
-                    `;
-                    cardLabel.addEventListener('click', (e) => {
-                        if (e.target.name !== "modal_speaker_selection") {
-                             const radio = cardLabel.querySelector('input[type="radio"]');
-                             if(radio) radio.checked = true;
-                        }
-                        updateSelectedSpeakerDisplay(speaker.id);
-                        hideModal(speakerModal);
-                    });
-                    speakerGridInModal.appendChild(cardLabel);
-                });
-            }
-
-            // --- Modal Management ---
-            function showModal(modalElement) {
-                modalElement.classList.add('visible');
-                setTimeout(() => {
-                     const firstFocusable = modalElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                     if (firstFocusable) firstFocusable.focus();
-                }, 50);
-            }
-
-            function hideModal(modalElement) {
-                modalElement.classList.add('hiding');
-                modalElement.addEventListener('animationend', () => {
-                    modalElement.classList.remove('visible', 'hiding');
-                }, { once: true });
-            }
-
-            // Speaker Modal Listeners
-            changeSpeakerBtn.addEventListener('click', () => {
-                createSpeakerCardsInModal();
-                showModal(speakerModal);
-            });
-            selectedSpeakerCard.addEventListener('click', () => {
-                createSpeakerCardsInModal();
-                showModal(speakerModal);
-            });
-
-            // Info Modal Listener
-            tempInfoIcon.addEventListener('click', () => showModal(infoModal));
-            tempInfoIcon.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    showModal(infoModal);
-                }
-            });
-
-            // General Modal Close Listeners (for all modals)
-            document.querySelectorAll('.modal-overlay').forEach(overlay => {
-                overlay.addEventListener('click', (e) => {
-                    if (e.target === overlay) {
-                        hideModal(overlay);
-                    }
-                });
-            });
-            document.querySelectorAll('.close-modal-btn').forEach(button => {
-                button.addEventListener('click', () => {
-                    const modalId = button.dataset.modalId;
-                    if (modalId) {
-                        hideModal(document.getElementById(modalId));
-                    }
-                });
-            });
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') {
-                    document.querySelectorAll('.modal-overlay.visible').forEach(hideModal);
-                }
-            });
+        // --- Character Counter ---
+        const charCountSpan = document.getElementById('char-count'); const charMaxSpan = document.getElementById('char-max'); const MAX_CHARS = 50000;
+        charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
+        textInput.addEventListener('input', () => { const currentLength = textInput.value.length; charCountSpan.textContent = currentLength.toLocaleString('fa-IR'); charCountSpan.style.color = currentLength > MAX_CHARS ? 'red' : 'var(--accent-primary)'; });
 
-            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
+        // --- Speaker Logic ---
+        const getSpeakerById = (id) => speakers.find(s => s.id === id) || speakers[0]; const getImageUrl = (speaker, index, size = 'thumb') => { const gender = speaker.name.includes('(مرد)') ? 'men' : 'women'; const imageIndex = (speaker.id.charCodeAt(0) + index) % 100; return `https://randomuser.me/api/portraits/${size === 'large' ? '' : 'med/'}${gender}/${imageIndex}.jpg`; }; const updateSelectedSpeakerDisplay = (speakerId) => { const speaker = getSpeakerById(speakerId); const speakerIndex = speakers.findIndex(s => s.id === speaker.id); selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex, 'large'); selectedSpeakerNameDisplay.textContent = speaker.name; selectedSpeakerDescDisplay.textContent = speaker.desc; selectedSpeakerIdStorage.value = speaker.id; };
+        const createSpeakerCardsInModal = () => { speakerGridInModal.innerHTML = ''; speakers.forEach((speaker, index) => { const cardLabel = document.createElement('label'); cardLabel.className = 'speaker-card'; cardLabel.setAttribute('for', `modal-speaker-${speaker.id}`); const isChecked = speaker.id === selectedSpeakerIdStorage.value ? 'checked' : ''; cardLabel.innerHTML = ` <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked}> <div class="speaker-visual"> <img src="${getImageUrl(speaker, index, 'thumb')}" alt="${speaker.name}" loading="lazy"> </div> <div class="speaker-name">${speaker.name}</div> `; cardLabel.addEventListener('click', () => { updateSelectedSpeakerDisplay(speaker.id); hideModal(speakerModal); }); speakerGridInModal.appendChild(cardLabel); }); };
 
-            // --- Custom Audio Player Functions ---
+        // --- Modal Management ---
+        const showModal = (modalElement) => { modalElement.classList.add('visible'); setTimeout(() => modalElement.querySelector('button')?.focus(), 50); }; const hideModal = (modalElement) => modalElement.classList.remove('visible'); changeSpeakerBtn.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); }); selectedSpeakerCard.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); }); tempInfoIcon.addEventListener('click', () => showModal(infoModal)); document.querySelectorAll('.modal-overlay').forEach(o => o.addEventListener('click', (e) => (e.target === o) && hideModal(o))); document.querySelectorAll('.close-modal-btn').forEach(b => b.addEventListener('click', () => hideModal(document.getElementById(b.dataset.modalId)))); document.addEventListener('keydown', (e) => (e.key === 'Escape') && document.querySelectorAll('.modal-overlay.visible').forEach(hideModal)); tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
 
-            function formatTime(seconds) {
-                if (isNaN(seconds) || seconds < 0) return '0:00';
-                const minutes = Math.floor(seconds / 60);
-                const remainingSeconds = Math.floor(seconds % 60);
-                return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
-            }
-
-            // Function to draw waveform on canvas
-            function drawWaveform(progressRatio = 0) {
-                waveformCtx.clearRect(0, 0, audioWaveformCanvas.width, audioWaveformCanvas.height); // Clear canvas
-
-                const barWidth = 3; // From CSS
-                const barGap = 2; // Space between bars (adjust for visual appeal)
-                const totalBarAndGap = barWidth + barGap;
-                const numBars = Math.floor(audioWaveformCanvas.width / totalBarAndGap);
-                const offset = (audioWaveformCanvas.width - (numBars * totalBarAndGap)) / 2; // Center bars
-
-                const activeBars = Math.floor(progressRatio * numBars);
-
-                for (let i = 0; i < numBars; i++) {
-                    const peak = audioPeaks[i] || 0; // Use actual peak or 0 if data isn't enough
-                    const barHeight = peak * audioWaveformCanvas.height;
-                    
-                    waveformCtx.fillStyle = i < activeBars ? 
-                                              getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-active').trim() : 
-                                              getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-inactive').trim();
-
-                    const x = offset + i * totalBarAndGap;
-                    const y = (audioWaveformCanvas.height - barHeight) / 2; // Center vertically
-
-                    waveformCtx.fillRect(x, y, barWidth, barHeight);
-                }
-            }
-
-            // Update custom player UI (play/pause icon, time, progress)
-            function updatePlayerUI() {
-                if (hiddenAudioPlayer.paused || hiddenAudioPlayer.ended) {
-                    playIcon.style.display = 'block';
-                    pauseIcon.style.display = 'none';
-                } else {
-                    playIcon.style.display = 'none';
-                    pauseIcon.style.display = 'block';
-                }
-
-                const currentTime = hiddenAudioPlayer.currentTime;
-                const duration = hiddenAudioPlayer.duration;
-
-                audioCurrentTimeSpan.textContent = formatTime(currentTime);
-
-                if (isFinite(duration) && duration > 0) {
-                    audioTotalTimeSpan.textContent = formatTime(duration);
-                    const progressRatio = currentTime / duration;
-                    drawWaveform(progressRatio); // Redraw waveform based on progress
-                } else {
-                    audioTotalTimeSpan.textContent = '0:00';
-                    drawWaveform(0); // Draw empty waveform
+        // --- Original Audio Player Logic ---
+        const formatTime = (seconds) => { if (isNaN(seconds) || seconds < 0) return '0:00'; const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds % 60); return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; };
+        
+        function drawWaveform(progressRatio = 0) {
+             const dpr = window.devicePixelRatio || 1;
+             audioWaveformCanvas.width = audioWaveformCanvas.offsetWidth * dpr;
+             audioWaveformCanvas.height = audioWaveformCanvas.offsetHeight * dpr;
+             waveformCtx.scale(dpr, dpr);
+
+             const width = audioWaveformCanvas.offsetWidth;
+             const height = audioWaveformCanvas.offsetHeight;
+            
+             waveformCtx.clearRect(0, 0, width, height);
+
+             const barWidth = 3;
+             const barGap = 2;
+             const totalBarAndGap = barWidth + barGap;
+             const numBars = Math.floor(width / totalBarAndGap);
+             const offset = (width - (numBars * totalBarAndGap)) / 2;
+             const activeBars = Math.floor(progressRatio * numBars);
+
+             const activeColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-active').trim();
+             const inactiveColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-inactive').trim();
+
+             for (let i = 0; i < numBars; i++) {
+                 const peak = audioPeaks[i] || 0;
+                 const barHeight = peak * height;
+                 waveformCtx.fillStyle = i < activeBars ? activeColor : inactiveColor;
+                 const x = offset + i * totalBarAndGap;
+                 const y = (height - barHeight) / 2;
+                 waveformCtx.fillRect(x, y, barWidth, barHeight);
+             }
+         }
+        
+        const updatePlayerUI = () => { playIcon.style.display = hiddenAudioPlayer.paused || hiddenAudioPlayer.ended ? 'block' : 'none'; pauseIcon.style.display = !(hiddenAudioPlayer.paused || hiddenAudioPlayer.ended) ? 'block' : 'none'; const currentTime = hiddenAudioPlayer.currentTime; const duration = hiddenAudioPlayer.duration; audioCurrentTimeSpan.textContent = formatTime(currentTime); if (isFinite(duration) && duration > 0) { audioTotalTimeSpan.textContent = formatTime(duration); drawWaveform(currentTime / duration); } else { audioTotalTimeSpan.textContent = '0:00'; drawWaveform(0); } };
+        
+        async function processAudioForWaveform(audioBuffer) {
+            if (!audioBuffer) { audioPeaks = []; return; }
+            const channelData = audioBuffer.getChannelData(0);
+            const numBars = Math.floor(audioWaveformCanvas.offsetWidth / 5); // 5 = barWidth(3) + barGap(2)
+            const samplesPerBar = Math.floor(channelData.length / numBars);
+            const peaks = [];
+            for (let i = 0; i < numBars; i++) {
+                let maxPeak = 0;
+                const start = i * samplesPerBar;
+                for (let j = 0; j < samplesPerBar; j++) {
+                    const value = Math.abs(channelData[start + j]);
+                    if (value > maxPeak) maxPeak = value;
                 }
+                peaks.push(Math.min(1, Math.max(0, maxPeak * 1.5)));
             }
-
-            // Process audio data for waveform visualization
-            async function processAudioForWaveform(audioBuffer) {
-                if (!audioBuffer) {
-                    audioPeaks = [];
-                    return;
-                }
-                const channelData = audioBuffer.getChannelData(0); // Get data from first channel
-
-                // Determine number of bars based on current canvas width
-                const barWidth = 3;
-                const barGap = 2;
-                const totalBarAndGap = barWidth + barGap;
-                const numBars = Math.floor(audioWaveformCanvas.offsetWidth / totalBarAndGap);
-
-                const samplesPerBar = Math.floor(channelData.length / numBars);
-                const peaks = [];
-
-                for (let i = 0; i < numBars; i++) {
-                    let sum = 0;
-                    let maxPeak = 0;
-                    const start = i * samplesPerBar;
-                    const end = Math.min(start + samplesPerBar, channelData.length);
-
-                    for (let j = start; j < end; j++) {
-                        const value = Math.abs(channelData[j]);
-                        sum += value;
-                        if (value > maxPeak) {
-                            maxPeak = value;
-                        }
+            audioPeaks = peaks;
+            drawWaveform(0);
+        }
+        
+        playPauseBtn.addEventListener('click', () => hiddenAudioPlayer.paused ? hiddenAudioPlayer.play() : hiddenAudioPlayer.pause()); skipBackwardBtn.addEventListener('click', () => hiddenAudioPlayer.currentTime = Math.max(0, hiddenAudioPlayer.currentTime - 5)); skipForwardBtn.addEventListener('click', () => hiddenAudioPlayer.currentTime = Math.min(hiddenAudioPlayer.duration, hiddenAudioPlayer.currentTime + 5));
+        volumeBtn.addEventListener('click', () => { hiddenAudioPlayer.muted = !hiddenAudioPlayer.muted; volumeHighIcon.style.display = hiddenAudioPlayer.muted ? 'none' : 'block'; volumeMuteIcon.style.display = hiddenAudioPlayer.muted ? 'block' : 'none'; });
+        speedBtn.addEventListener('click', () => { currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length; const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex]; hiddenAudioPlayer.playbackRate = newSpeed; speedBtn.textContent = `${newSpeed}x`; });
+        hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI); hiddenAudioPlayer.addEventListener('play', updatePlayerUI); hiddenAudioPlayer.addEventListener('pause', updatePlayerUI); hiddenAudioPlayer.addEventListener('ended', () => { hiddenAudioPlayer.currentTime = 0; updatePlayerUI(); });
+        hiddenAudioPlayer.addEventListener('loadedmetadata', async () => { if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)(); try { const response = await fetch(hiddenAudioPlayer.src); const arrayBuffer = await response.arrayBuffer(); const decodedBuffer = await audioContext.decodeAudioData(arrayBuffer); await processAudioForWaveform(decodedBuffer); } catch (e) { console.error("Error decoding audio for waveform:", e); audioPeaks = []; } updatePlayerUI(); });
+        let resizeTimeout; window.addEventListener('resize', () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { if (outputSection.classList.contains('has-content') && hiddenAudioPlayer.src) { hiddenAudioPlayer.dispatchEvent(new Event('loadedmetadata')); } }, 250); });
+
+        // --- State Management Functions ---
+        const showLoadingState = () => {
+            audioPlayerContent.style.display = 'none'; outputSection.classList.remove('has-content');
+            statusMessage.style.display = 'none'; loadingAnimationWrapper.style.display = 'flex';
+            generateBtn.disabled = true;
+            generateBtn.innerHTML = ` <svg aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101" style="animation: spin 1s linear infinite;"> <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/> <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0492C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/> </svg> در حال پردازش... `;
+        };
+        const showResultState = (isSuccess, message = '') => { loadingAnimationWrapper.style.display = 'none'; if (isSuccess) { statusMessage.style.display = 'none'; audioPlayerContent.style.display = 'flex'; outputSection.classList.add('has-content'); } else { statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.'; statusMessage.style.display = 'block'; audioPlayerContent.style.display = 'none'; outputSection.classList.remove('has-content'); hiddenAudioPlayer.src = ''; audioPeaks = []; drawWaveform(0); } generateBtn.disabled = false; generateBtn.innerHTML = '✨ خلق صدا با آلفا'; };
+
+        // --- API Call ---
+        async function generateAudio(event) {
+            event.preventDefault();
+            showLoadingState();
+
+            const text = textInput.value;
+            if (!text.trim()) { showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.'); return; }
+            if (text.length > MAX_CHARS) { showResultState(false, `خطا: طول متن بیش از ${MAX_CHARS.toLocaleString('fa-IR')} نویسه است.`); return; }
+
+            const payload = {
+                fn_index: FN_INDEX,
+                data: [false, null, text, promptInput.value, selectedSpeakerIdStorage.value, parseFloat(tempSlider.value)],
+                event_data: null,
+                session_hash: Math.random().toString(36).substring(2)
+            };
+
+            try {
+                const joinQueueResponse = await fetch(JOIN_QUEUE_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
+                if (!joinQueueResponse.ok) { throw new Error(`خطا در برقراری ارتباط با سرویس آلفا (کد: ${joinQueueResponse.status}).`); }
+
+                let finalFilePath = null;
+                const startTime = Date.now();
+                const timeoutDuration = 90000;
+
+                while (Date.now() - startTime < timeoutDuration) {
+                    const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${payload.session_hash}`);
+                    if (!dataResponse.ok) { throw new Error(`خطا در دریافت داده از سرویس (کد: ${dataResponse.status})`); }
+                    const responseText = await dataResponse.text();
+                    const lines = responseText.trim().split('\n');
+
+                    for (const line of lines) {
+                        if (!line.startsWith('data:')) continue;
+                        try {
+                            const data = JSON.parse(line.substring(5));
+                            if (data.msg === 'process_completed') {
+                                if (data.success && data.output?.data?.[0] && (data.output.data[0].name || data.output.data[0].path)) {
+                                    finalFilePath = data.output.data[0].name || data.output.data[0].path;
+                                } else { throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.'); }
+                                break;
+                            } else if (data.msg === 'queue_full') {
+                                throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.');
+                            }
+                        } catch (e) { console.warn("Error parsing JSON from stream:", e, "Line:", line); }
                     }
-                    // Use max peak for sharper visualization, or average for smoother
-                    // Clamp between 0 and 1
-                    peaks.push(Math.min(1, Math.max(0, maxPeak))); 
-                }
-                audioPeaks = peaks;
-                drawWaveform(0); // Draw initial waveform
-            }
-
-            // Event Listeners for Custom Player Controls
-            playPauseBtn.addEventListener('click', () => {
-                if (hiddenAudioPlayer.paused) {
-                    hiddenAudioPlayer.play();
-                } else {
-                    hiddenAudioPlayer.pause();
-                }
-            });
-            skipBackwardBtn.addEventListener('click', () => {
-                hiddenAudioPlayer.currentTime = Math.max(0, hiddenAudioPlayer.currentTime - 5);
-            });
-            skipForwardBtn.addEventListener('click', () => {
-                hiddenAudioPlayer.currentTime = Math.min(hiddenAudioPlayer.duration, hiddenAudioPlayer.currentTime + 5);
-            });
-            volumeBtn.addEventListener('click', () => {
-                hiddenAudioPlayer.muted = !hiddenAudioPlayer.muted;
-                volumeHighIcon.style.display = hiddenAudioPlayer.muted ? 'none' : 'block';
-                volumeMuteIcon.style.display = hiddenAudioPlayer.muted ? 'block' : 'none';
-            });
-            speedBtn.addEventListener('click', () => {
-                currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length;
-                const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex];
-                hiddenAudioPlayer.playbackRate = newSpeed;
-                speedBtn.textContent = `${newSpeed}x`;
-            });
-
-            hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI);
-            hiddenAudioPlayer.addEventListener('loadedmetadata', async () => {
-                // Ensure AudioContext is available
-                if (!audioContext) {
-                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                }
-                // Fetch and decode audio to get waveform data
-                try {
-                    const response = await fetch(hiddenAudioPlayer.src);
-                    const arrayBuffer = await response.arrayBuffer();
-                    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-                    
-                    // Set canvas dimensions
-                    audioWaveformCanvas.width = audioWaveformCanvas.offsetWidth;
-                    audioWaveformCanvas.height = audioWaveformCanvas.offsetHeight;
-
-                    await processAudioForWaveform(audioBuffer);
-                } catch (e) {
-                    console.error("Error decoding audio for waveform:", e);
-                    audioPeaks = []; // Clear peaks on error
+                    if (finalFilePath) break;
+                    await new Promise(resolve => setTimeout(resolve, 1000));
                 }
-                updatePlayerUI(); // Update UI with total duration and initial state
-            });
-            hiddenAudioPlayer.addEventListener('play', updatePlayerUI);
-            hiddenAudioPlayer.addEventListener('pause', updatePlayerUI);
-            hiddenAudioPlayer.addEventListener('ended', () => {
-                hiddenAudioPlayer.currentTime = 0;
-                updatePlayerUI();
-            });
-
-            // Handle window resize for responsive waveform
-            let resizeTimeout;
-            window.addEventListener('resize', () => {
-                clearTimeout(resizeTimeout);
-                resizeTimeout = setTimeout(() => {
-                    if (outputSection.classList.contains('has-content') && hiddenAudioPlayer.src) {
-                        // Re-process audio buffer on resize to adjust number of bars
-                        // This assumes the audio buffer is still in memory or re-fetches it.
-                        // A more efficient way for real apps might be to store the AudioBuffer.
-                        // For simplicity here, we trigger the loadedmetadata logic again.
-                        hiddenAudioPlayer.dispatchEvent(new Event('loadedmetadata'));
-                    }
-                }, 250); // Debounce resize events
-            });
-
 
-            // --- State Management Functions ---
-            function showLoadingState() {
-                audioPlayerContent.style.display = 'none';
-                outputSection.classList.remove('has-content');
-                statusMessage.style.display = 'none'; // Hide initial message
-                loadingAnimationWrapper.style.display = 'flex';
-                generateBtn.disabled = true;
-                generateBtn.innerHTML = `
-                    <svg aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101" style="display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em; vertical-align: middle; animation: spin 1s linear infinite;">
-                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
-                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0492C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/>
-                    </svg>
-                    در حال پردازش...
-                `;
-            }
-
-            function showResultState(isSuccess, message = '') {
-                loadingAnimationWrapper.style.display = 'none';
-                if (isSuccess) {
-                    statusMessage.style.display = 'none';
-                    audioPlayerContent.style.display = 'flex';
-                    outputSection.classList.add('has-content');
-                    // Play is triggered by loadedmetadata listener after waveform processing
+                if (finalFilePath) {
+                    hiddenAudioPlayer.src = `${FILE_URL_BASE}${finalFilePath}`;
+                    showResultState(true);
+                } else if (Date.now() - startTime >= timeoutDuration) {
+                    throw new Error('پردازش بیش از حد طول کشید و متوقف شد.');
                 } else {
-                    statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
-                    statusMessage.style.display = 'block';
-                    audioPlayerContent.style.display = 'none';
-                    outputSection.classList.remove('has-content');
-                    hiddenAudioPlayer.pause();
-                    hiddenAudioPlayer.src = '';
-                    audioPeaks = []; // Clear waveform data
-                    drawWaveform(0); // Clear canvas
-                }
-                generateBtn.disabled = false;
-                generateBtn.innerHTML = '✨ تولید صدا با آلفا';
-            }
-
-            async function generateAudio(event) {
-                event.preventDefault();
-                showLoadingState();
-
-                const text = textInput.value;
-                if (!text.trim()) {
-                    showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
-                    return;
-                }
-                if (text.length > MAX_CHARS) {
-                    showResultState(false, `خطا: طول متن بیش از ${MAX_CHARS.toLocaleString('fa-IR')} نویسه است.`);
-                    return;
-                }
-
-                const promptVal = promptInput.value;
-                const temperatureVal = parseFloat(tempSlider.value);
-                const selectedSpeakerVal = selectedSpeakerIdStorage.value;
-                const sessionHash = Math.random().toString(36).substring(2);
-
-                const payload = {
-                    fn_index: FN_INDEX,
-                    data: [false, null, text, promptVal, selectedSpeakerVal, temperatureVal],
-                    event_data: null,
-                    session_hash: sessionHash
-                };
-
-                try {
-                    const joinQueueResponse = await fetch(JOIN_QUEUE_URL, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify(payload)
-                    });
-
-                    if (!joinQueueResponse.ok) {
-                         const errorBody = await joinQueueResponse.text();
-                         console.error("Join Queue Error Body:", errorBody);
-                         throw new Error(`خطا در برقراری ارتباط با سرویس آلفا (${joinQueueResponse.status}). لطفا لحظاتی دیگر تلاش کنید.`);
-                    }
-
-                    let finalFilePath = null;
-                    const startTime = Date.now();
-                    const timeoutDuration = 90000;
-
-                    while (Date.now() - startTime < timeoutDuration) {
-                        const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
-                        if (!dataResponse.ok) {
-                             const errorBody = await dataResponse.text();
-                             console.error("Get Data Error Body:", errorBody);
-                             throw new Error(`خطا در دریافت داده از سرویس (${dataResponse.status})`);
-                        }
-
-                        const responseText = await dataResponse.text();
-                        const lines = responseText.trim().split('\n');
-
-                        for (const line of lines) {
-                            if (!line.startsWith('data:')) continue;
-                            try {
-                                const data = JSON.parse(line.substring(5));
-                                if (data.msg === 'process_generating' || data.msg === 'process_starts') {
-                                    // console.log("Processing:", data.output?.progress_data?.[0]?.desc || data.msg);
-                                } else if (data.msg === 'process_completed') {
-                                    if (data.success && data.output.data && data.output.data[0] && (data.output.data[0].name || data.output.data[0].path)) {
-                                        finalFilePath = data.output.data[0].name || data.output.data[0].path;
-                                    } else {
-                                        console.error("Invalid server response structure or unsuccessful processing:", data);
-                                        throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.');
-                                    }
-                                    break;
-                                } else if (data.msg === 'queue_full') {
-                                    throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.');
-                                }
-                            } catch (e) {
-                                console.warn("Error parsing JSON from stream:", e, "Line:", line);
-                            }
-                        }
-                        if (finalFilePath) break;
-                        await new Promise(resolve => setTimeout(resolve, 1000));
-                    }
-
-                    if (finalFilePath) {
-                        const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
-                        hiddenAudioPlayer.src = audioUrl;
-                        showResultState(true);
-                    } else if (Date.now() - startTime >= timeoutDuration) {
-                        throw new Error('پردازش بیش از حد طول کشید و متوقف شد.');
-                    } else {
-                         throw new Error('فایل صوتی از سرور دریافت نشد یا پردازش ناموفق بود.');
-                    }
-
-                } catch (error) {
-                    console.error('خطا در فرآیند تولید صدا:', error);
-                    showResultState(false, `${error.message}`);
+                    throw new Error('فایل صوتی از سرور دریافت نشد یا پردازش ناموفق بود.');
                 }
+            } catch (error) {
+                console.error('خطا در فرآیند تولید صدا:', error);
+                showResultState(false, error.message);
             }
+        }
 
-            // Initial setup
-            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
-            form.addEventListener('submit', generateAudio);
-            statusMessage.style.display = 'block';
-            loadingAnimationWrapper.style.display = 'none';
-            audioPlayerContent.style.display = 'none';
-            outputSection.classList.remove('has-content');
-        });
+        // --- Initial Setup ---
+        updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
+        form.addEventListener('submit', generateAudio);
+        statusMessage.style.display = 'block'; loadingAnimationWrapper.style.display = 'none';
+        audioPlayerContent.style.display = 'none'; outputSection.classList.remove('has-content');
+    });
     </script>
 </body>
 </html>
\ No newline at end of file