Update index.html

index.html

@@ -5,708 +5,441 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Alpha TTS Nova - نسل جدید تبدیل متن به صدا</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
 
         :root {
-            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-            --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-            --glass-bg: rgba(255, 255, 255, 0.15);
-            --glass-border: rgba(255, 255, 255, 0.2);
-            --text-primary: #1a1a2e;
-            --text-secondary: #6c7293;
-            --text-light: #ffffff;
-            --shadow-glow: 0 20px 40px rgba(102, 126, 234, 0.3);
-            --shadow-card: 0 15px 35px rgba(50, 50, 93, 0.1);
-            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+            --app-font: 'Vazirmatn', sans-serif;
+            --app-bg: #F4F7FC; /* Slightly lighter and cooler */
+            --panel-bg: #FFFFFF;
+            --panel-border: #E8EEF3; /* Softer border */
+            --text-primary: #121826; /* Darker, richer black */
+            --text-secondary: #5C677D; /* Softer secondary text */
+            --accent-primary: #3B82F6; /* Brighter Blue */
+            --accent-primary-hover: #2563EB; /* Darker Blue for hover */
+            --accent-secondary: #10B981; /* Vibrant Teal/Green */
+            --accent-secondary-hover: #059669;
+            --input-bg: #F8FAFC; /* Slightly off-white for inputs */
+            --input-border-focus: var(--accent-primary);
+            
+            --radius-card: 24px; /* More rounded */
+            --radius-input: 14px; /* More rounded */
+            --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); /* Smooth transition */
         }
 
         body {
-            font-family: 'Vazirmatn', sans-serif;
+            font-family: var(--app-font);
             direction: rtl;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-            background-size: 400% 400%;
-            animation: gradientShift 15s ease infinite;
+            background-color: var(--app-bg);
             color: var(--text-primary);
+            font-size: 16px;
+            line-height: 1.8; /* Increased line-height for better readability */
+            margin: 0;
+            padding: 2.5rem 0; /* More padding */
             min-height: 100vh;
-            overflow-x: hidden;
-            position: relative;
-        }
-
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
-            pointer-events: none;
-            z-index: -1;
-        }
-
-        @keyframes gradientShift {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-
-        .floating-shapes {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: -1;
-        }
-
-        .shape {
-            position: absolute;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 50%;
-            animation: float 20s infinite linear;
-        }
-
-        .shape:nth-child(1) {
-            width: 80px;
-            height: 80px;
-            top: 20%;
-            left: 10%;
-            animation-delay: 0s;
-        }
-
-        .shape:nth-child(2) {
-            width: 120px;
-            height: 120px;
-            top: 60%;
-            left: 80%;
-            animation-delay: -5s;
-        }
-
-        .shape:nth-child(3) {
-            width: 60px;
-            height: 60px;
-            top: 80%;
-            left: 20%;
-            animation-delay: -10s;
-        }
-
-        @keyframes float {
-            0% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
-            33% { transform: translateY(-20px) rotate(120deg); opacity: 0.4; }
-            66% { transform: translateY(10px) rotate(240deg); opacity: 0.7; }
-            100% { transform: translateY(0px) rotate(360deg); opacity: 0.4; }
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
         }
 
-        .container {
-            max-width: 900px;
+        .container { 
+            max-width: 780px; /* Slightly wider */
+            width: 92%; 
             margin: 0 auto;
-            padding: 2rem;
-            position: relative;
-            z-index: 1;
         }
 
-        .app-header {
-            text-align: center;
-            margin-bottom: 3rem;
-            animation: slideInUp 1s ease-out;
+        .app-header { 
+            padding: 0.5rem 0 3rem 0; 
+            text-align: center; 
+            margin-bottom: 2rem;
         }
-
-        .app-header h1 {
-            font-size: 3.5rem;
-            font-weight: 800;
-            background: linear-gradient(135deg, #fff 0%, #f0f8ff 100%);
+        .app-header h1 { 
+            font-size: 3.2em; /* Larger */
+            font-weight: 900; /* Bolder */
+            margin:0 0 0.75rem 0; 
+            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 1rem;
-            text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
-            animation: glow 3s ease-in-out infinite alternate;
-        }
-
-        @keyframes glow {
-            from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
-            to { text-shadow: 0 0 40px rgba(255, 255, 255, 0.8); }
-        }
-
-        .app-header p {
-            font-size: 1.3rem;
-            color: rgba(255, 255, 255, 0.9);
-            font-weight: 300;
-            letter-spacing: 0.5px;
-        }
-
-        @keyframes slideInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .main-content {
-            background: var(--glass-bg);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--glass-border);
-            border-radius: 25px;
-            padding: 3rem;
-            box-shadow: var(--shadow-card);
-            animation: slideInUp 1s ease-out 0.2s both;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .main-content::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
-        }
-
-        .form-group {
-            margin-bottom: 2.5rem;
-            animation: slideInUp 0.6s ease-out both;
-        }
-
-        .form-group:nth-child(1) { animation-delay: 0.1s; }
-        .form-group:nth-child(2) { animation-delay: 0.2s; }
-        .form-group:nth-child(3) { animation-delay: 0.3s; }
-        .form-group:nth-child(4) { animation-delay: 0.4s; }
-
-        label {
-            display: block;
-            font-weight: 600;
-            color: var(--text-light);
-            font-size: 1.1rem;
-            margin-bottom: 1rem;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
-        }
-
-        textarea, input[type="text"] {
-            width: 100%;
-            padding: 1.2rem 1.5rem;
-            border: 2px solid rgba(255, 255, 255, 0.2);
-            border-radius: 15px;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            color: var(--text-light);
-            font-family: 'Vazirmatn', sans-serif;
-            font-size: 1rem;
-            transition: var(--transition);
-            resize: vertical;
-        }
-
-        textarea::placeholder, input[type="text"]::placeholder {
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        textarea:focus, input[type="text"]:focus {
-            outline: none;
-            border-color: rgba(255, 255, 255, 0.6);
-            background: rgba(255, 255, 255, 0.15);
-            box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
-            transform: translateY(-2px);
-        }
-
-        textarea {
-            min-height: 120px;
-        }
-
-        /* Speaker Selection Styles */
-        #selected-speaker-display {
-            text-align: center;
-            margin-top: 1rem;
-        }
-
-        #selected-speaker-card {
-            display: inline-flex;
-            align-items: center;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(15px);
-            border: 2px solid rgba(255, 255, 255, 0.2);
-            border-radius: 20px;
-            padding: 1rem 1.5rem;
-            transition: var(--transition);
+            letter-spacing: -1px;
+        }
+        .app-header p { 
+            font-size: 1.25em; /* Larger */
+            color: var(--text-secondary); 
+            margin-top:0; 
+            opacity: 1; 
+            font-weight: 400;
+        }
+
+        .main-content { 
+            padding: 3rem; /* More padding */
+            background-color: var(--panel-bg); 
+            border-radius: var(--radius-card); 
+            box-shadow: var(--shadow-strong); /* Stronger shadow for main panel */
+            border: 1px solid var(--panel-border);
+        }
+
+        .form-group { margin-bottom: 2.5rem; }
+        label { 
+            display: block; 
+            font-weight: 700; /* Bolder labels */
+            color: var(--text-primary); 
+            font-size: 1.1em; 
+            margin-bottom: 1rem; 
+        }
+        textarea, input[type="text"] { 
+            width: 100%; 
+            padding: 1rem 1.2rem; /* More padding */
+            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; /* Subtle inset shadow */
+            font-family: var(--app-font); 
+            font-size: 1.05rem; 
+            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 4px rgba(59, 130, 246, 0.2), var(--shadow-subtle) inset; /* Enhanced focus */
+            background-color: #fff;
+        }
+        textarea { min-height: 120px; resize: vertical; }
+
+        /* --- نمایش گوینده منتخب --- */
+        #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); /* Match card radius */
+            padding: 1rem 1.2rem; /* R L T B -- More padding */
+            box-shadow: var(--shadow-medium); 
+            border: 1px solid var(--panel-border);
+            transition: var(--transition-smooth);
             cursor: pointer;
-            position: relative;
-            overflow: hidden;
-        }
-
-        #selected-speaker-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.6s;
-        }
-
-        #selected-speaker-card:hover::before {
-            left: 100%;
+            position: relative; /* For pseudo-elements if needed */
         }
-
         #selected-speaker-card:hover {
-            transform: translateY(-5px) scale(1.02);
-            box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
-            border-color: rgba(255, 255, 255, 0.4);
-        }
-
-        #selected-speaker-card img {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            object-fit: cover;
-            margin-left: 1.5rem;
-            border: 3px solid rgba(255, 255, 255, 0.5);
-            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
-            transition: var(--transition);
+            transform: translateY(-4px) scale(1.03);
+            box-shadow: var(--shadow-strong);
+        }
+        #selected-speaker-card img { 
+            width: 80px; height: 80px; /* Larger image */
+            border-radius: 50%; 
+            object-fit: cover; 
+            margin-left: 20px; 
+            border: 4px solid var(--accent-secondary); 
+            box-shadow: 0 0 15px -3px rgba(16, 185, 129, 0.6);
+            background-color: #e0e0e0; 
+            transition: var(--transition-smooth);
         }
-
         #selected-speaker-card:hover img {
-            transform: scale(1.1);
-            box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
-        }
-
-        #selected-speaker-info h3 {
-            margin: 0;
-            font-size: 1.4rem;
-            font-weight: 700;
-            color: var(--text-light);
-        }
-
-        #selected-speaker-info p {
-            margin: 0.5rem 0 0;
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 0.9rem;
-        }
-
-        #change-speaker-btn {
-            display: block;
-            margin: 1.5rem auto 0;
-            padding: 0.8rem 2rem;
-            border: 2px solid rgba(255, 255, 255, 0.5);
-            border-radius: 25px;
-            background: transparent;
-            color: var(--text-light);
-            cursor: pointer;
-            font-family: 'Vazirmatn', sans-serif;
-            font-weight: 600;
-            transition: var(--transition);
-            position: relative;
-            overflow: hidden;
-        }
-
-        #change-speaker-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 0;
-            height: 100%;
-            background: rgba(255, 255, 255, 0.2);
-            transition: width 0.3s ease;
-        }
-
-        #change-speaker-btn:hover::before {
-            width: 100%;
-        }
-
-        #change-speaker-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
-            border-color: rgba(255, 255, 255, 0.8);
-        }
-
-        /* Modal Styles */
-        #speaker-modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(10px);
-            display: none;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
+            transform: scale(1.05) rotate(3deg);
+        }
+        #selected-speaker-info h3 { margin: 0; font-size: 1.45em; font-weight: 800; color: var(--text-primary); }
+        #selected-speaker-info p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.9em; font-weight: 500; }
+        
+        #change-speaker-btn { /* Style updated, but will be primarily triggered by card click */
+            display: block; margin: 1.5rem auto 0; 
+            padding: 12px 28px; 
+            border-radius: var(--radius-input); 
+            background: transparent; 
+            border: 2px solid var(--accent-primary);
+            color: var(--accent-primary);
+            cursor: pointer; 
+            font-family: var(--app-font); font-weight: 700; 
+            transition: var(--transition-smooth); 
+        }
+        #change-speaker-btn:hover { 
+            background-color: var(--accent-primary); 
+            color: #fff;
+            transform: translateY(-3px) scale(1.02);
+            box-shadow: 0 6px 12px -3px rgba(59, 130, 246, 0.4);
+        }
+
+        /* --- مودال گالری گویندگان --- */
+        #speaker-modal { 
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
+            background-color: rgba(18, 24, 38, 0.6); /* Darker backdrop */
+            backdrop-filter: blur(10px) saturate(180%); 
+            display: none; align-items: center; justify-content: center; 
+            z-index: 1000; opacity: 0; 
+            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
+        }
+        #speaker-modal.visible { display: flex; opacity: 1; }
+        .modal-content { 
+            background: var(--panel-bg); 
+            padding: 2.5rem; 
+            border-radius: var(--radius-card); 
+            width: 90%; max-width: 720px; /* Wider modal */
+            max-height: 90vh; overflow-y: auto; 
+            transform: scale(0.9) translateY(30px); 
+            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s; 
+            border: 1px solid var(--panel-border);
+            box-shadow: var(--shadow-strong);
             opacity: 0;
-            transition: opacity 0.4s ease;
-        }
-
-        #speaker-modal.visible {
-            display: flex;
-            opacity: 1;
-        }
-
-        .modal-content {
-            background: rgba(255, 255, 255, 0.15);
-            backdrop-filter: blur(25px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 25px;
-            padding: 2.5rem;
-            width: 90%;
-            max-width: 800px;
-            max-height: 85vh;
-            overflow-y: auto;
-            transform: scale(0.9) translateY(50px);
-            transition: transform 0.4s ease, opacity 0.4s ease;
-            opacity: 0;
-        }
-
-        #speaker-modal.visible .modal-content {
-            transform: scale(1) translateY(0);
-            opacity: 1;
-        }
-
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2rem;
-            padding-bottom: 1rem;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .modal-header h2 {
-            margin: 0;
-            font-size: 1.8rem;
-            color: var(--text-light);
-            font-weight: 700;
-        }
-
-        .close-modal-btn {
-            background: none;
-            border: none;
-            font-size: 2rem;
-            cursor: pointer;
-            color: rgba(255, 255, 255, 0.8);
-            transition: var(--transition);
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
         }
-
-        .close-modal-btn:hover {
-            color: var(--text-light);
-            background: rgba(255, 255, 255, 0.1);
-            transform: rotate(90deg);
-        }
-
-        #speaker-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-            gap: 1.5rem;
-        }
-
-        .speaker-card {
+        #speaker-modal.visible .modal-content { transform: scale(1) translateY(0); opacity: 1;}
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1.2rem; 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.8rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition-smooth); line-height: 1; }
+        .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(180deg) scale(1.1); }
+        
+        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 1.5rem; }
+        @media (min-width: 640px) { #speaker-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /* Adjusted for better spacing */
+        .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-smooth); 
+            padding: 8px; /* Added padding around image */
+        }
+        .speaker-card:hover .speaker-visual { 
+            transform: translateY(-6px) scale(1.05); 
+            box-shadow: var(--shadow-medium); 
+        }
+        .speaker-card input[type="radio"] { display: none; }
+        .speaker-card img { 
+            width: 100%; height: 125px; /* Slightly larger */
+            object-fit: cover; display: block; 
+            background-color: #e0e0e0; 
+            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            border-radius: calc(var(--radius-card) - 8px); /* Inner radius */
+        }
+        .speaker-card:hover img { transform: scale(1.1); }
+        .speaker-card .speaker-name { padding: 1rem 0.5rem 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 20px -5px rgba(16, 185, 129, 0.7); 
+            background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary-hover));
+        }
+        .speaker-card input[type="radio"]:checked + .speaker-visual img {
+            border: 3px solid white; /* White border for selected image */
+        }
+        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name { 
+            color: #fff; /* White text on gradient */
+            font-weight: 700; 
+        }
+
+        /* --- Slider & Button & Output --- */
+        .slider-container { display: flex; align-items: center; gap: 1.5rem; }
+        input[type="range"] { 
+            flex-grow: 1; -webkit-appearance: none; appearance: none; 
+            width: 100%; height: 10px; /* Thicker track */
+            background: #EAF0F6; /* Lighter track bg */
+            border-radius: 5px; outline: none; 
             cursor: pointer;
-            transition: var(--transition);
-            text-align: center;
-            position: relative;
-        }
-
-        .speaker-card .speaker-visual {
-            border: 3px solid transparent;
-            border-radius: 20px;
-            overflow: hidden;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            transition: var(--transition);
-            position: relative;
-        }
-
-        .speaker-card:hover .speaker-visual {
-            transform: translateY(-8px) scale(1.05);
-            box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
-            border-color: rgba(255, 255, 255, 0.4);
-        }
-
-        .speaker-card input[type="radio"] {
-            display: none;
-        }
-
-        .speaker-card img {
-            width: 100%;
-            height: 140px;
-            object-fit: cover;
-            display: block;
-            transition: transform 0.3s ease;
-        }
-
-        .speaker-card:hover img {
-            transform: scale(1.1);
-        }
-
-        .speaker-card .speaker-name {
-            padding: 1rem;
-            font-weight: 600;
-            font-size: 0.95rem;
-            color: var(--text-light);
-        }
-
-        .speaker-card input[type="radio"]:checked + .speaker-visual {
-            border-color: #4facfe;
-            box-shadow: 0 0 25px rgba(79, 172, 254, 0.5);
-            background: rgba(79, 172, 254, 0.2);
-        }
-
-        /* Slider Styles */
-        .slider-container {
-            display: flex;
-            align-items: center;
-            gap: 1.5rem;
-        }
-
-        input[type="range"] {
-            flex-grow: 1;
-            -webkit-appearance: none;
-            width: 100%;
-            height: 8px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 10px;
-            outline: none;
-            cursor: pointer;
-            transition: background 0.3s;
-        }
-
-        input[type="range"]::-webkit-slider-track {
-            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
-            height: 8px;
-            border-radius: 10px;
-        }
-
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 24px;
-            height: 24px;
-            background: #fff;
-            border-radius: 50%;
-            cursor: pointer;
-            box-shadow: 0 0 15px rgba(79, 172, 254, 0.5);
-            transition: transform 0.2s ease;
-        }
-
-        input[type="range"]::-webkit-slider-thumb:hover {
-            transform: scale(1.2);
-            box-shadow: 0 0 25px rgba(79, 172, 254, 0.8);
-        }
-
-        #temperature-value {
-            font-weight: 600;
-            background: rgba(255, 255, 255, 0.2);
-            color: var(--text-light);
-            padding: 0.5rem 1rem;
-            border-radius: 15px;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            min-width: 60px;
-            text-align: center;
-            backdrop-filter: blur(10px);
-        }
-
-        /* Generate Button */
-        #generate-btn {
-            width: 100%;
-            padding: 1.5rem 2rem;
-            font-size: 1.3rem;
-            font-weight: 700;
-            font-family: 'Vazirmatn', sans-serif;
-            background: var(--accent-gradient);
-            color: var(--text-light);
+            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: 10px;
+            border-radius: 5px;
+        }
+        input[type="range"]::-webkit-slider-thumb { 
+            -webkit-appearance: none; appearance: none; 
+            width: 24px; height: 24px; /* Larger thumb */
+            background: #fff; 
+            border-radius: 50%; cursor: pointer; 
+            border: 4px solid var(--accent-primary); /* Thicker border */
+            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
+            margin-top: -7px; 
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+         input[type="range"]::-webkit-slider-thumb:hover {
+            transform: scale(1.15);
+            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
+        }
+        input[type="range"]::-moz-range-thumb { 
+            width: 24px; height: 24px; 
+            background: #fff; 
+            border-radius: 50%; cursor: pointer; 
+            border: 4px solid var(--accent-primary); 
+            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
+        }
+        input[type="range"]::-moz-range-track {
+            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
+            height: 10px;
+            border-radius: 5px;
             border: none;
-            border-radius: 20px;
-            cursor: pointer;
-            transition: var(--transition);
+        }
+        #temperature-value { 
+            font-weight: 700; background-color: var(--input-bg); 
+            padding: 0.6rem 1.2rem; 
+            border-radius: 10px; 
+            border: 1px solid var(--panel-border); 
+            min-width: 50px; text-align: center;
+            color: var(--accent-primary); /* Accent color for value */
+            font-size: 1.05em;
+            box-shadow: var(--shadow-subtle);
+        }
+        
+        #generate-btn { 
+            width: 100%; padding: 1.2rem 1.5rem; /* More padding */
+            font-size: 1.35em; font-weight: 800; /* Bolder, larger */
+            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; /* Added transform transition */
+            box-shadow: 0 6px 18px -5px rgba(59, 130, 246, 0.5), 0 6px 18px -5px rgba(16, 185, 129, 0.4);
             position: relative;
             overflow: hidden;
-            box-shadow: 0 10px 30px rgba(79, 172, 254, 0.4);
-            margin-top: 1rem;
+            letter-spacing: 0.5px;
         }
-
-        #generate-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
-            transition: left 0.8s;
+        #generate-btn::before { 
+            content: ''; position: absolute;
+            top: 0; left: -150%; width: 70%; height: 100%;
+            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
+            transform: skewX(-25deg);
+            transition: left 0.7s cubic-bezier(0.23, 1, 0.32, 1);
         }
-
-        #generate-btn:hover::before {
-            left: 100%;
+        #generate-btn:hover::before { left: 150%; }
+        #generate-btn:hover:not(:disabled) { 
+            transform: translateY(-4px) scale(1.01); /* Enhanced hover */
+            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.6), 0 10px 25px -5px rgba(16, 185, 129, 0.5);
         }
-
-        #generate-btn:hover:not(:disabled) {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(79, 172, 254, 0.6);
+        #generate-btn:active:not(:disabled) {
+            transform: translateY(-1px) scale(0.99); /* Click feedback */
         }
-
-        #generate-btn:disabled {
-            background: rgba(255, 255, 255, 0.2);
-            cursor: not-allowed;
+        #generate-btn:disabled { 
+            background: #B8C2CC; 
+            cursor: not-allowed; box-shadow: none; color: #E8EEF3;
             transform: none;
-            box-shadow: none;
         }
-
-        /* Output Section */
-        #output-section {
-            margin-top: 3rem;
-            padding: 3rem;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(15px);
-            border-radius: 25px;
-            min-height: 250px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            gap: 2rem;
-            border: 2px dashed rgba(255, 255, 255, 0.3);
-            transition: var(--transition);
-            animation: slideInUp 1s ease-out 0.6s both;
+        #generate-btn:disabled::before { display: none; }
+
+        #output-section { 
+            margin-top: 3.5rem; 
+            padding: 2.5rem; 
+            background-color: var(--input-bg); /* Use input-bg for contrast */
+            border-radius: var(--radius-card); 
+            min-height: 220px; 
+            display: flex; align-items: center; justify-content: center; 
+            flex-direction: column; gap: 1.5rem; 
+            border: 2px dashed var(--panel-border); /* Slightly thicker dashed border */
+            transition: var(--transition-smooth); 
+            position: relative;
+            box-shadow: var(--shadow-subtle) inset; /* Subtle inset for empty state */
         }
-
-        #status-message {
-            font-weight: 500;
-            color: rgba(255, 255, 255, 0.9);
-            text-align: center;
-            font-size: 1.2rem;
+        #output-section.has-content { /* Style when audio is loaded */
+             background-color: #fff;
+             border-style: solid;
+             border-color: var(--accent-secondary);
+             box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.2);
         }
+        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.15em; }
+        #audio-player { width: 100%; margin-top: 1rem; display: none; border-radius: 10px; box-shadow: var(--shadow-medium); }
+        #audio-player::-webkit-media-controls-panel { background-color: #fff; border-radius: 10px; padding: 5px; box-shadow: var(--shadow-subtle) inset;}
+        #audio-player::-webkit-media-controls-play-button { color: var(--accent-primary); background-color: rgba(59, 130, 246, 0.1); border-radius: 50%; margin: 5px;}
+        #audio-player::-webkit-media-controls-current-time-display, 
+        #audio-player::-webkit-media-controls-time-remaining-display { color: var(--text-secondary); font-weight: 500; }
+        #audio-player::-webkit-media-controls-timeline { background-color: #EAF0F6; border-radius: 5px; margin: 0 10px;}
 
-        #audio-player {
-            width: 100%;
-            margin-top: 1rem;
-            display: none;
-            border-radius: 15px;
-            background: rgba(255, 255, 255, 0.1);
-        }
 
-        /* Enhanced Loading Animation */
+        /* --- انیمیشن پردازش جدید: مدار هوشمند --- */
         #loading-animation-wrapper {
-            display: none;
+            display: none; 
             flex-direction: column;
             align-items: center;
             justify-content: center;
             gap: 2rem;
             width: 100%;
-            min-height: 200px;
+            min-height: 150px;
         }
 
-        .neural-network-loader {
-            width: 120px;
+        .orbital-loader {
+            width: 120px; /* Larger */
             height: 120px;
             position: relative;
-            animation: rotate-network 8s linear infinite;
+            animation: rotate-loader-orbital 12s linear infinite;
         }
-
-        .neural-node {
+        
+        .orbit {
             position: absolute;
-            width: 12px;
-            height: 12px;
+            top: 50%; left: 50%;
+            border: 2px dashed rgba(59, 130, 246, 0.3); /* Dashed orbit lines */
             border-radius: 50%;
-            background: #4facfe;
-            box-shadow: 0 0 15px #4facfe, 0 0 30px #00f2fe;
-            animation: node-pulse 2s ease-in-out infinite;
+            transform-origin: center center;
         }
 
-        .neural-node:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
-        .neural-node:nth-child(2) { top: 15%; right: 15%; animation-delay: -0.25s; background: #00f2fe; }
-        .neural-node:nth-child(3) { top: 50%; right: 0; transform: translateY(-50%); animation-delay: -0.5s; }
-        .neural-node:nth-child(4) { bottom: 15%; right: 15%; animation-delay: -0.75s; background: #00f2fe; }
-        .neural-node:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: -1s; }
-        .neural-node:nth-child(6) { bottom: 15%; left: 15%; animation-delay: -1.25s; background: #00f2fe; }
-        .neural-node:nth-child(7) { top: 50%; left: 0; transform: translateY(-50%); animation-delay: -1.5s; }
-        .neural-node:nth-child(8) { top: 15%; left: 15%; animation-delay: -1.75s; background: #00f2fe; }
+        .orbit:nth-child(1) { width: 40px; height: 40px; margin: -20px 0 0 -20px; animation: orbit-spin 3s linear infinite reverse; }
+        .orbit:nth-child(2) { width: 70px; height: 70px; margin: -35px 0 0 -35px; animation: orbit-spin 4s linear infinite; }
+        .orbit:nth-child(3) { width: 100px; height: 100px; margin: -50px 0 0 -50px; animation: orbit-spin 5s linear infinite reverse; }
 
-        .neural-connection {
+        .orbit .satellite {
             position: absolute;
-            height: 1px;
-            background: linear-gradient(90deg, transparent, #4facfe, transparent);
-            transform-origin: left center;
-            animation: connection-flow 3s ease-in-out infinite;
+            width: 12px; height: 12px;
+            border-radius: 50%;
+            background-color: var(--accent-primary);
+            box-shadow: 0 0 10px var(--accent-primary), 0 0 15px var(--accent-secondary);
+            animation: satellite-pulse 1.5s ease-in-out infinite alternate;
         }
 
-        @keyframes rotate-network {
+        .orbit:nth-child(1) .satellite { top: -6px; left: 50%; transform: translateX(-50%); }
+        .orbit:nth-child(2) .satellite { top: 50%; left: -6px; transform: translateY(-50%); background-color: var(--accent-secondary); }
+        .orbit:nth-child(3) .satellite { bottom: -6px; right: 50%; transform: translateX(50%); }
+
+
+        @keyframes rotate-loader-orbital {
             from { transform: rotate(0deg); }
             to { transform: rotate(360deg); }
         }
-
-        @keyframes node-pulse {
-            0%, 100% { transform: scale(0.8); opacity: 0.6; }
-            50% { transform: scale(1.4); opacity: 1; }
+        @keyframes orbit-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
         }
-
-        @keyframes connection-flow {
-            0%, 100% { opacity: 0; }
-            50% { opacity: 0.8; }
+        @keyframes satellite-pulse {
+            from { transform: scale(0.8) translate(-50%, -50%) ; opacity: 0.7; } /* Adjust translate based on initial positioning if needed */
+            to { transform: scale(1.2) translate(-50%, -50%); opacity: 1; }
         }
-
-        #loading-text {
-            font-size: 1.3rem;
-            font-weight: 600;
-            color: var(--text-light);
-            text-align: center;
-            animation: text-glow 2s ease-in-out infinite alternate;
+         /* Correcting pulse for satellites not centered initially */
+        .orbit:nth-child(1) .satellite { animation-name: satellite-pulse-1; }
+        @keyframes satellite-pulse-1 { 
+            from { transform: scale(0.8) translateX(-50%); opacity: 0.7; }
+            to { transform: scale(1.2) translateX(-50%); opacity: 1; }
         }
-
-        @keyframes text-glow {
-            from { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
-            to { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); }
+        .orbit:nth-child(2) .satellite { animation-name: satellite-pulse-2; }
+        @keyframes satellite-pulse-2 { 
+            from { transform: scale(0.8) translateY(-50%); opacity: 0.7; }
+            to { transform: scale(1.2) translateY(-50%); opacity: 1; }
+        }
+         .orbit:nth-child(3) .satellite { animation-name: satellite-pulse-3; }
+        @keyframes satellite-pulse-3 { 
+            from { transform: scale(0.8) translateX(50%); opacity: 0.7; }
+            to { transform: scale(1.2) translateX(50%); opacity: 1; }
         }
 
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
-            }
-
-            .app-header h1 {
-                font-size: 2.5rem;
-            }
 
-            .main-content {
-                padding: 2rem;
-            }
-
-            #speaker-grid {
-                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-                gap: 1rem;
-            }
+        #loading-text { 
+            font-size: 1.25em; 
+            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;
         }
+
     </style>
 </head>
 <body>
-    <div class="floating-shapes">
-        <div class="shape"></div>
-        <div class="shape"></div>
-        <div class="shape"></div>
-    </div>
-
     <div class="container">
         <header class="app-header">
             <h1>آلفا TTS Nova</h1>
-            <p>صدایی نو، تجربه‌ای نوین در تبدیل متن به گفتار</p>
+            <p>صدایی نو، تجربه‌ای نوین در تبدیل متن به گفتار با هوش مصنوعی پیشرفته</p>
         </header>
 
         <main class="main-content">
@@ -715,9 +448,8 @@
                     <label for="text-input">📝 متن مورد نظر شما</label>
                     <textarea id="text-input" rows="4" placeholder="متن خود را اینجا وارد کنید...">سلام دنیا! این یک نمونه متن برای آزمایش نسل جدید تبدیل متن به صدا آلفا نوا است. امیدوارم از کیفیت آن لذت ببرید.</textarea>
                 </div>
-                
                 <div class="form-group">
-                    <label for="prompt-input">🗣️ سبک و لحن گفتار (اختیاری)</label>
+                    <label for="prompt-input">🗣️ توصیف سبک و لحن گفتار (اختیاری)</label>
                     <input type="text" id="prompt-input" value="با صدایی شفاف، دوستانه و پرانرژی." placeholder="مثال: با لحنی رسمی و موقر، یا شاد و کودکانه">
                 </div>
 
@@ -728,10 +460,10 @@
                             <img id="selected-speaker-img" src="" alt="عکس گوینده">
                             <div id="selected-speaker-info">
                                 <h3 id="selected-speaker-name"></h3>
-                                <p>گوینده پیش‌فرض</p>
+                                <p id="selected-speaker-desc">گوینده پیش‌فرض</p>
                             </div>
                         </div>
-                        <button type="button" id="change-speaker-btn">مشاهده همه گویندگان</button>
+                        <!-- دکمه مشاهده همه گویندگان حذف شد، عملکرد به کارت منتقل شد -->
                     </div>
                 </div>
                 
@@ -749,15 +481,16 @@
             <div id="output-section">
                 <div id="status-message">صدای تولید شده در اینجا نمایش داده خواهد شد.</div>
                 <div id="loading-animation-wrapper">
-                    <div class="neural-network-loader">
-                        <div class="neural-node"></div>
-                        <div class="neural-node"></div>
-                        <div class="neural-node"></div>
-                        <div class="neural-node"></div>
-                        <div class="neural-node"></div>
-                        <div class="neural-node"></div>
-                        <div class="neural-node"></div>
-                        <div class="neural-node"></div>
+                     <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>
@@ -770,7 +503,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h2>گالری گویندگان آلفا نوا</h2>
-                <button type="button" class="close-modal-btn">×</button>
+                <button type="button" class="close-modal-btn" aria-label="بستن مودال">×</button>
             </div>
             <div id="speaker-grid"></div>
         </div>
@@ -780,5 +513,286 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
-            const JOIN_QUEUE_
+            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 audioPlayer = document.getElementById('audio-player');
+            const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper');
+            
+            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
+            const speakerModal = document.getElementById('speaker-modal');
+            // const changeSpeakerBtn = document.getElementById('change-speaker-btn'); // No longer needed
+            const closeModalBtn = document.querySelector('.close-modal-btn');
+            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 selectedSpeakerCard = document.getElementById('selected-speaker-card');
+            
+            function getSpeakerById(id) {
+                return speakers.find(s => s.id === id) || speakers[0]; // Fallback to first speaker
+            }
+            
+            function getImageUrl(speaker, index, size = 'medium') {
+                const gender = speaker.name.includes('(مرد)') ? 'men' : (speaker.name.includes('(زن)') ? 'women' : 'lego');
+                const imageIndex = (index * 13 + 7 + speaker.id.length) % 100; // More variation
+                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>
+                    `;
+                    
+                    // Event listener on the label itself
+                    cardLabel.addEventListener('click', (e) => {
+                        // Check if the click was on the input or something inside, 
+                        // as the input itself will trigger its own change/click
+                        if (e.target.name !== "modal_speaker_selection") {
+                             const radio = cardLabel.querySelector('input[type="radio"]');
+                             if(radio) radio.checked = true; // Manually check if not already
+                        }
+                        updateSelectedSpeakerDisplay(speaker.id);
+                        setTimeout(() => speakerModal.classList.remove('visible'), 250); // Slight delay for visual feedback
+                    });
+                    
+                    speakerGridInModal.appendChild(cardLabel);
+                });
+            }
+            
+            function openSpeakerModal() {
+                createSpeakerCardsInModal(); // Refresh cards each time in case selection changed elsewhere
+                speakerModal.classList.add('visible');
+                // Focus on the first selectable item or the modal itself for accessibility
+                setTimeout(() => { // Timeout for transition
+                    const firstFocusable = speakerModal.querySelector('input[type="radio"], .close-modal-btn');
+                    if (firstFocusable) firstFocusable.focus();
+                    else closeModalBtn.focus();
+                }, 50); 
+            }
+
+            // changeSpeakerBtn.addEventListener('click', openSpeakerModal); // Removed
+            selectedSpeakerCard.addEventListener('click', openSpeakerModal); 
+
+            closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
+            speakerModal.addEventListener('click', (e) => {
+                if (e.target === speakerModal) { 
+                    speakerModal.classList.remove('visible');
+                }
+            });
+            // Keyboard accessibility for modal
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && speakerModal.classList.contains('visible')) {
+                    speakerModal.classList.remove('visible');
+                }
+            });
+
+            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
+
+            function showLoadingState() {
+                statusMessage.style.display = 'none';
+                audioPlayer.style.display = 'none';
+                audioPlayer.src = '';
+                outputSection.classList.remove('has-content');
+                loadingAnimationWrapper.style.display = 'flex';
+                generateBtn.disabled = true;
+                generateBtn.innerHTML = `
+                    <svg aria-hidden="true" style="display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em;" role="status" fill="currentColor" viewBox="0 0 100 101">
+                        <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';
+                    audioPlayer.style.display = 'block';
+                    outputSection.classList.add('has-content');
+                     // audioPlayer.play(); // Consider UX for autoplay
+                } else {
+                    statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
+                    statusMessage.style.display = 'block';
+                    audioPlayer.style.display = 'none';
+                    outputSection.classList.remove('has-content');
+                }
+                generateBtn.disabled = false;
+                generateBtn.textContent = '🚀 تولید صدا با آلفا نوا';
+            }
+
+            async function generateAudio(event) {
+                event.preventDefault();
+                showLoadingState();
+
+                const text = textInput.value;
+                if (!text.trim()) {
+                    showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
+                    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}). لطفا لحظاتی دیگر تلاش کنید.`);
+                    }
+                    
+                    // Start polling for data
+                    let finalFilePath = null;
+                    const startTime = Date.now();
+                    const timeoutDuration = 90000; // 90 seconds timeout for the whole process
+
+                    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') {
+                                    // Optionally update loading text here if server provides progress
+                                    // 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("ساختار داده پاسخ سرور معتبر نیست یا پردازش ناموفق بود:", data); 
+                                        throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.');
+                                    }
+                                    break; // Exit inner loop
+                                } else if (data.msg === 'queue_full') {
+                                    throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.');
+                                }
+                            } catch (e) { 
+                                console.warn("خطا در تجزیه JSON از stream:", e, "Line:", line);
+                            }
+                        }
+                        if (finalFilePath) break; // Exit outer loop
+                        await new Promise(resolve => setTimeout(resolve, 1000)); // Poll every 1 second
+                    }
+                    
+                    if (finalFilePath) {
+                        const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
+                        audioPlayer.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}`);
+                }
+            }
+            
+            // Initial setup
+            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id); // Ensure a default is set
+            form.addEventListener('submit', generateAudio);
+
+            statusMessage.style.display = 'block';
+            loadingAnimationWrapper.style.display = 'none';
+            audioPlayer.style.display = 'none';
+            outputSection.classList.remove('has-content');
+        });
+    </script>
+</body>
+</html>