Update index.html

index.html

@@ -9,106 +9,100 @@
 
         :root {
             --app-font: 'Vazirmatn', sans-serif;
-            --app-bg: #F0F4F8; /* Slightly lighter app background */
+            --app-bg: #F4F7FC;
             --panel-bg: #FFFFFF;
-            --panel-border: #DEE7F0; /* Softer panel border */
-            --text-primary: #0A0F1A; /* Darker primary text for better contrast */
-            --text-secondary: #5A687F; /* Slightly adjusted secondary text */
-            --accent-primary: #3B82F6; 
-            --accent-primary-hover: #2563EB; 
-            --accent-secondary: #10B981; 
+            --panel-border: #E8EEF3;
+            --text-primary: #121826;
+            --text-secondary: #5C677D;
+            --accent-primary: #3B82F6;
+            --accent-primary-hover: #2563EB;
+            --accent-secondary: #10B981;
             --accent-secondary-hover: #059669;
-            --input-bg: #F7FAFC; /* Lighter input background */
-            --input-border: #CFD8E3;
+            --input-bg: #F8FAFC;
             --input-border-focus: var(--accent-primary);
-            
-            --radius-card: 28px; /* Slightly larger card radius */
-            --radius-input: 16px; /* Slightly larger input radius */
-            
-            --shadow-subtle: 0 2px 6px rgba(20, 26, 36, 0.03);
-            --shadow-medium: 0 5px 15px -3px rgba(20, 26, 36, 0.07), 0 3px 8px -4px rgba(20,26,36,0.04);
-            --shadow-strong: 0 10px 25px -5px rgba(20, 26, 36, 0.1), 0 8px 15px -8px rgba(20,26,36,0.06);
-            --shadow-interactive: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent);
 
-            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
-            --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            --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);
+            --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
         }
 
-        *, *::before, *::after {
-            box-sizing: border-box;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
+        @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); }
         }
 
+
         body {
             font-family: var(--app-font);
             direction: rtl;
             background-color: var(--app-bg);
             color: var(--text-primary);
             font-size: 16px;
-            line-height: 1.8; 
+            line-height: 1.8;
             margin: 0;
-            padding: 3rem 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; /* Prevent horizontal scroll from animations */
+            overflow-x: hidden; /* Prevent horizontal scrollbar from animations */
         }
 
-        .container { 
-            max-width: 780px; 
-            width: 92%; 
+        .container {
+            max-width: 780px;
+            width: 92%;
             margin: 0 auto;
-            opacity: 0;
-            transform: translateY(20px);
-            animation: fadeInSlideUp 0.6s 0.2s ease-out forwards;
         }
 
-        @keyframes fadeInSlideUp {
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .app-header { 
-            padding: 0.5rem 0 2.5rem 0; 
-            text-align: center; 
-            margin-bottom: 2.5rem;
-        }
-        .app-header h1 { 
-            font-size: 2.6em; /* Reduced size */
-            font-weight: 900; 
-            margin:0 0 0.75rem 0; 
-            background: linear-gradient(60deg, var(--accent-primary), var(--accent-secondary));
+        .app-header {
+            padding: 0.5rem 0 3rem 0;
+            text-align: center;
+            margin-bottom: 2rem;
+            animation: fadeInDown 0.8s 0.1s ease-out backwards;
+        }
+        .app-header h1 {
+            font-size: 2.8em; /* Reduced size */
+            font-weight: 900;
+            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;
-            letter-spacing: -0.8px;
+            letter-spacing: -1px;
         }
-        .app-header p { 
-            font-size: 1.15em; 
-            color: var(--text-secondary); 
-            margin-top:0; 
-            opacity: 0.9; 
+        .app-header p {
+            font-size: 1.2em; /* Slightly reduced */
+            color: var(--text-secondary);
+            margin-top:0;
+            opacity: 0.9; /* Slightly less prominent */
             font-weight: 400;
         }
 
-        .main-content { 
+        .main-content {
             padding: 2.5rem; /* Adjusted padding */
-            background-color: var(--panel-bg); 
-            border-radius: var(--radius-card); 
-            box-shadow: var(--shadow-strong); 
+            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; }
+        .form-group { margin-bottom: 2rem; } /* Adjusted margin */
+
         .label-with-info {
             display: flex;
             align-items: center;
-            justify-content: space-between; /* Align info icon to the right */
             gap: 0.5rem;
-            margin-bottom: 0.8rem; /* Reduced margin */
+            margin-bottom: 1rem;
         }
         .label-with-info label {
              margin-bottom: 0;
@@ -118,24 +112,25 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            width: 24px;
-            height: 24px;
+            width: 22px;
+            height: 22px;
             border-radius: 50%;
-            background-color: color-mix(in srgb, var(--app-bg) 50%, var(--panel-border));
+            background-color: var(--input-bg);
             border: 1px solid var(--panel-border);
             color: var(--text-secondary);
             font-size: 0.9em;
             font-weight: 700;
-            cursor: help; /* Changed cursor */
+            cursor: pointer;
             position: relative;
             transition: var(--transition-smooth);
             user-select: none;
         }
-        .info-tooltip-icon:hover, .info-tooltip-icon.active {
+        .info-tooltip-icon:hover, .info-tooltip-icon:focus {
             background-color: var(--accent-primary);
             color: white;
             border-color: var(--accent-primary);
             transform: scale(1.1);
+            outline: none;
         }
         .tooltip-text {
             visibility: hidden;
@@ -143,16 +138,16 @@
             background-color: var(--text-primary);
             color: #fff;
             text-align: right;
-            border-radius: calc(var(--radius-input) - 4px); /* Smaller radius for tooltip */
-            padding: 12px 18px;
+            border-radius: var(--radius-input);
+            padding: 10px 15px;
             position: absolute;
             z-index: 10;
-            bottom: 140%; 
+            bottom: 140%;
             left: 50%;
-            transform: translateX(-50%) translateY(10px); /* Initial position for animation */
+            transform: translateX(-50%) translateY(10px); /* Start slightly lower */
             opacity: 0;
-            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
-            font-size: 0.85em;
+            transition: opacity 0.3s, visibility 0.3s, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+            font-size: 0.88em;
             font-weight: 400;
             line-height: 1.6;
             box-shadow: var(--shadow-medium);
@@ -162,211 +157,199 @@
             position: absolute;
             top: 100%;
             left: 50%;
-            margin-left: -6px;
-            border-width: 6px;
+            margin-left: -5px;
+            border-width: 5px;
             border-style: solid;
             border-color: var(--text-primary) transparent transparent transparent;
         }
         .info-tooltip-icon.active .tooltip-text {
             visibility: visible;
             opacity: 1;
-            transform: translateX(-50%) translateY(0px);
+            transform: translateX(-50%) translateY(0); /* Animate to final position */
         }
 
 
-        label { 
-            display: block; 
-            font-weight: 700; 
-            color: var(--text-primary); 
-            font-size: 1.05em; 
-            margin-bottom: 0.8rem; 
+        label {
+            display: block;
+            font-weight: 700;
+            color: var(--text-primary);
+            font-size: 1.05em; /* Adjusted size */
+            margin-bottom: 0.8rem; /* Adjusted margin */
         }
 
-        textarea, input[type="text"] { 
-            width: 100%; 
-            padding: 0.9rem 1.1rem; 
-            border-radius: var(--radius-input); 
-            border: 1px solid var(--input-border); 
+        textarea, input[type="text"] {
+            width: 100%;
+            padding: 0.9rem 1.1rem; /* Adjusted 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; 
-            font-family: var(--app-font); 
-            font-size: 1rem; 
-            box-sizing: border-box; 
+            box-shadow: var(--shadow-subtle) inset;
+            font-family: var(--app-font);
+            font-size: 1rem; /* Adjusted size */
+            box-sizing: border-box;
             transition: var(--transition-smooth);
         }
-        textarea:focus, input[type="text"]:focus { 
-            outline: none; 
-            border-color: var(--input-border-focus); 
-            box-shadow: var(--shadow-interactive), var(--shadow-subtle) inset; 
+        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; /* Slightly adjusted focus shadow */
             background-color: #fff;
         }
-        textarea { min-height: 130px; resize: vertical; }
+        textarea { min-height: 100px; resize: vertical; } /* Adjusted min-height */
 
         .char-counter-wrapper {
             font-size: 0.85em;
             color: var(--text-secondary);
-            text-align: left; /* English numbers are LTR */
+            text-align: left; /* For LTR numbers, but RTL page */
             margin-top: 0.5rem;
             padding: 0 0.2rem;
         }
-        .char-counter-wrapper .limit-exceeded {
-            color: #E53E3E; /* Red for error */
-            font-weight: 600;
-        }
+        #char-count { font-weight: 600; color: var(--accent-primary); }
 
 
-        #selected-speaker-display { text-align: center; margin-top: 0.8rem; position: relative; }
-        #selected-speaker-card { 
-            display: inline-flex; 
-            align-items: center; 
-            background: linear-gradient(135deg, var(--input-bg) 0%, #fff 90%);
-            border-radius: var(--radius-card); 
-            padding: 0.9rem 1.1rem; 
-            box-shadow: var(--shadow-medium); 
+        /* --- نمایش گوینده منتخب --- */
+        #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); /* Use bounce transition */
-            position: relative; 
-            margin-bottom: 1rem; 
-            cursor: pointer; 
+            transition: var(--transition-bounce); /* Bouncy transition */
+            position: relative;
+            margin-bottom: 1.2rem;
+            cursor: pointer;
         }
          #selected-speaker-card:hover {
-            transform: translateY(-5px) scale(1.03);
+            transform: translateY(-6px) scale(1.03); /* More pronounced hover */
             box-shadow: var(--shadow-strong);
         }
-        #selected-speaker-card.speaker-changed { /* Animation for speaker change */
-            animation: pulseHighlight 0.7s ease-out;
-        }
-        @keyframes pulseHighlight {
-            0% { transform: scale(1); box-shadow: var(--shadow-medium); }
-            50% { transform: scale(1.05); box-shadow: 0 0 20px color-mix(in srgb, var(--accent-secondary) 40%, transparent); }
-            100% { transform: scale(1); box-shadow: var(--shadow-medium); }
-        }
-
-        #selected-speaker-card img { 
-            width: 70px; height: 70px; /* Slightly smaller */
-            border-radius: 50%; 
-            object-fit: cover; 
-            margin-left: 18px; 
-            border: 3px solid var(--accent-secondary); 
-            box-shadow: 0 0 12px -2px color-mix(in srgb, var(--accent-secondary) 50%, transparent);
-            background-color: #e0e0e0; 
+        #selected-speaker-card img {
+            width: 75px; height: 75px; /* Slightly smaller */
+            border-radius: 50%;
+            object-fit: cover;
+            margin-left: 18px; /* Adjusted margin */
+            border: 3px solid var(--accent-secondary); /* Thinner border */
+            box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.5); /* Adjusted shadow */
+            background-color: #e0e0e0;
             transition: var(--transition-smooth);
         }
         #selected-speaker-card:hover img {
-            transform: scale(1.08) rotate(3deg);
-            border-color: color-mix(in srgb, var(--accent-secondary) 70%, var(--accent-primary) 30%);
+            transform: scale(1.08) rotate(3deg); /* More dynamic image hover */
         }
-        #selected-speaker-info h3 { margin: 0; font-size: 1.3em; font-weight: 800; color: var(--text-primary); }
+        #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; 
+
+        #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), var(--accent-primary-hover));
-            border: none;
-            color: #fff; 
-            cursor: pointer; 
-            font-family: var(--app-font); font-weight: 600; 
-            font-size: 1rem;
-            transition: var(--transition-smooth), transform 0.15s ease-out; 
-            box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--accent-primary) 35%, transparent), var(--shadow-subtle);
-        }
-        #change-speaker-btn:hover { 
+            margin: 0 auto;
+            padding: 10px 20px; /* Adjusted padding */
+            border-radius: var(--radius-input);
             background: linear-gradient(45deg, var(--accent-primary-hover), var(--accent-primary));
-            transform: translateY(-3px) scale(1.04);
-            box-shadow: 0 6px 12px -3px color-mix(in srgb, var(--accent-primary) 45%, transparent), var(--shadow-medium);
+            border: none;
+            color: #fff;
+            cursor: pointer;
+            font-family: var(--app-font); font-weight: 600; /* Adjusted weight */
+            font-size: 1em; /* Adjusted size */
+            transition: var(--transition-smooth);
+            box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35), var(--shadow-subtle); /* Adjusted shadow */
+        }
+        #change-speaker-btn:hover {
+            background: linear-gradient(45deg, var(--accent-primary), var(--accent-primary-hover));
+            transform: translateY(-3px) scale(1.05); /* More lift */
+            box-shadow: 0 6px 12px -3px rgba(59, 130, 246, 0.45), var(--shadow-medium); /* Stronger shadow */
         }
         #change-speaker-btn svg {
-            width: 1.1em; 
+            width: 1.1em; /* Adjusted size */
             height: 1.1em;
-            margin-right: 0.5em; 
+            margin-right: 0.5em; /* Adjusted margin */
             fill: currentColor;
         }
 
 
         /* --- مودال گالری گویندگان --- */
-        #speaker-modal { 
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
-            background-color: rgba(10, 15, 26, 0.5); /* Darker backdrop */
-            backdrop-filter: blur(8px) saturate(160%); 
-            display: none; align-items: center; justify-content: center; 
-            z-index: 1000; opacity: 0; 
-            transition: opacity 0.3s ease; 
+        #speaker-modal {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-color: rgba(18, 24, 38, 0.7); /* Darker backdrop */
+            backdrop-filter: blur(8px) saturate(150%); /* Adjusted blur */
+            display: none; align-items: center; justify-content: center;
+            z-index: 1000; opacity: 0;
+            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Faster fade */
         }
         #speaker-modal.visible { display: flex; opacity: 1; }
-        .modal-content { 
-            background: var(--panel-bg); 
-            padding: 2rem; 
-            border-radius: var(--radius-card); 
-            width: 90%; max-width: 700px; /* Slightly narrower */
-            max-height: 85vh; overflow-y: auto; 
-            transform: scale(0.92) translateY(15px); 
-            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
+        .modal-content {
+            background: var(--panel-bg);
+            padding: 2rem; /* Adjusted padding */
+            border-radius: var(--radius-card);
+            width: 90%; max-width: 700px; /* Slightly smaller max-width */
+            max-height: 85vh; overflow-y: auto; /* Adjusted max-height */
+            transform: scale(0.95) translateY(20px); /* Start slightly smaller and lower */
+            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
             border: 1px solid var(--panel-border);
             box-shadow: var(--shadow-strong);
             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: 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; padding:0; }
-        .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); }
-        
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; }
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; 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);} /* Adjusted size */
+        .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition-smooth); line-height: 1; }
+        .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); } /* Changed rotation */
+
+        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; } /* Adjusted gap and minmax */
         @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: 2px solid transparent; /* Thinner border */
-            border-radius: calc(var(--radius-card) - 4px); 
-            overflow: hidden; 
-            box-shadow: var(--shadow-subtle); 
-            position: relative; 
-            background-color: var(--input-bg); 
-            transition: var(--transition-smooth); 
-            padding: 6px; /* Reduced padding */
-        }
-        .speaker-card:hover .speaker-visual { 
-            transform: translateY(-5px) scale(1.04); 
-            box-shadow: var(--shadow-medium); 
-            border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
+        .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); /* Bouncy transition */
+            padding: 6px; /* Adjusted padding */
+        }
+        .speaker-card:hover .speaker-visual {
+            transform: translateY(-5px) scale(1.06); /* More pop */
+            box-shadow: var(--shadow-medium);
+            border-color: rgba(var(--accent-secondary-rgb), 0.3); /* Subtle border on hover */
         }
         .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img { 
-            width: 100%; height: 115px; /* Adjusted height */
-            object-fit: cover; display: block; 
-            background-color: #e0e0e0; 
+        .speaker-card img {
+            width: 100%; height: 120px; /* Adjusted height */
+            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); 
+            border-radius: calc(var(--radius-card) - 12px); /* Adjusted inner radius */
         }
-        .speaker-card:hover img { transform: scale(1.08); }
+        .speaker-card:hover img { transform: scale(1.12); } /* Slightly more zoom */
         .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 18px -4px color-mix(in srgb, var(--accent-secondary) 60%, transparent); 
-            background: linear-gradient(145deg, var(--accent-secondary), var(--accent-primary));
+        .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); /* Stronger glow */
+            background: linear-gradient(135deg, var(--accent-secondary-hover), var(--accent-primary)); /* New gradient */
+            transform: scale(1.05); /* Pop out selected */
         }
         .speaker-card input[type="radio"]:checked + .speaker-visual img {
-            border: 2px solid white; 
-            transform: scale(1.05);
+            border: 2px solid white; /* Thinner border */
+            transform: scale(1.05); /* Slight zoom for selected image */
         }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name { 
-            color: #fff; 
-            font-weight: 700; 
+        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name {
+            color: #fff;
+            font-weight: 700;
         }
 
         /* --- 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; /* Thinner slider */
-            background: color-mix(in srgb, var(--panel-border) 60%, var(--app-bg)); 
-            border-radius: 4px; outline: none; 
+        .slider-container { display: flex; align-items: center; gap: 1.2rem; } /* Adjusted gap */
+        input[type="range"] {
+            flex-grow: 1; -webkit-appearance: none; appearance: none;
+            width: 100%; height: 8px; /* Thinner track */
+            background: #EAF0F6;
+            border-radius: 4px; outline: none;
             cursor: pointer;
             transition: background 0.2s;
         }
@@ -375,25 +358,25 @@
             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; 
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none; appearance: none;
+            width: 22px; height: 22px; /* Slightly smaller thumb */
+            background: #fff;
+            border-radius: 50%; cursor: pointer;
+            border: 3px solid var(--accent-primary); /* Thinner border */
+            box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Adjusted shadow */
+            margin-top: -7px;
             transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
-         input[type="range"]::-webkit-slider-thumb:hover {
-            transform: scale(1.2);
-            box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent);
+         input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]:focus::-webkit-slider-thumb {
+            transform: scale(1.2); /* More pronounced hover/focus */
+            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); 
+        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 {
@@ -402,142 +385,154 @@
             border-radius: 4px;
             border: none;
         }
-        #temperature-value { 
-            font-weight: 700; background-color: var(--input-bg); 
-            padding: 0.5rem 1rem; 
-            border-radius: 10px; 
-            border: 1px solid var(--panel-border); 
-            min-width: 45px; text-align: center;
-            color: var(--accent-primary); 
-            font-size: 1rem;
+        #temperature-value {
+            font-weight: 700; background-color: var(--input-bg);
+            padding: 0.5rem 1rem; /* Adjusted padding */
+            border-radius: 8px; /* Adjusted radius */
+            border: 1px solid var(--panel-border);
+            min-width: 45px; text-align: center; /* Adjusted min-width */
+            color: var(--accent-primary);
+            font-size: 1em; /* Adjusted size */
             box-shadow: var(--shadow-subtle);
-            transition: var(--transition-smooth);
-        }
-        input[type="range"]:focus + #temperature-value {
-            border-color: var(--accent-primary);
-            box-shadow: var(--shadow-interactive);
         }
-        
-        #generate-btn { 
+
+        #generate-btn {
             width: 100%; padding: 1rem 1.5rem; /* Adjusted padding */
-            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 color-mix(in srgb, var(--accent-primary) 40%, transparent), 0 5px 15px -4px color-mix(in srgb, var(--accent-secondary) 30%, transparent);
+            font-size: 1.25em; font-weight: 800; /* Adjusted size */
+            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); /* Adjusted shadow */
             position: relative;
             overflow: hidden;
-            letter-spacing: 0.3px;
+            letter-spacing: 0.5px;
         }
-        #generate-btn::before { 
+        #generate-btn::before {
             content: ''; position: absolute;
-            top: 0; left: -150%; width: 60%; height: 100%;
+            top: 0; left: -180%; width: 80%; height: 100%; /* Adjusted for effect */
             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(-20deg);
-            transition: left 0.75s cubic-bezier(0.23, 1, 0.32, 1);
+            transform: skewX(-30deg); /* Steeper angle */
+            transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1); /* Slower, smoother shine */
         }
-        #generate-btn:hover::before { left: 150%; }
-        #generate-btn:hover:not(:disabled) { 
-            transform: translateY(-3px) scale(1.02); 
-            box-shadow: 0 8px 20px -5px color-mix(in srgb, var(--accent-primary) 50%, transparent), 0 8px 20px -5px color-mix(in srgb, var(--accent-secondary) 40%, transparent);
+        #generate-btn:hover::before { left: 180%; }
+        #generate-btn:hover:not(:disabled) {
+            transform: translateY(-5px) scale(1.02); /* More lift */
+            box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.55), 0 8px 20px -4px rgba(16, 185, 129, 0.45); /* Stronger shadow */
         }
         #generate-btn:active:not(:disabled) {
-            transform: translateY(-1px) scale(0.99); 
+            transform: translateY(-2px) scale(0.98); /* More pronounced active state */
         }
-        #generate-btn:disabled { 
-            background: #B8C2CC; 
-            cursor: not-allowed; box-shadow: none; color: #DEE7F0;
+        #generate-btn:disabled {
+            background: #B8C2CC;
+            cursor: not-allowed; box-shadow: none; color: #E8EEF3;
             transform: none;
         }
         #generate-btn:disabled::before { display: none; }
-        #generate-btn svg.loader-icon { /* Style for loader icon in button */
-             display:inline-block; margin-left: 0.5em; width:1.1em; height:1.1em;
+        #generate-btn svg {
+             display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em;
              vertical-align: middle;
-             animation: spin 1s linear infinite;
         }
-        @keyframes spin { to { transform: rotate(360deg); } }
-
 
-        #output-section { 
-            margin-top: 3rem; 
-            padding: 2rem; 
-            background-color: var(--input-bg); 
-            border-radius: var(--radius-card); 
-            min-height: 200px; 
-            display: flex; align-items: center; justify-content: center; 
-            flex-direction: column; gap: 1.2rem; 
-            border: 2px dashed var(--panel-border); 
-            transition: all 0.4s ease; 
+        #output-section {
+            margin-top: 3rem; /* Adjusted margin */
+            padding: 2rem; /* Adjusted padding */
+            background-color: var(--input-bg);
+            border-radius: var(--radius-card);
+            min-height: 200px; /* Adjusted min-height */
+            display: flex; align-items: center; justify-content: center;
+            flex-direction: column; gap: 1.5rem;
+            border: 2px dashed var(--panel-border);
+            transition: var(--transition-smooth), border-color 0.5s, box-shadow 0.5s;
             position: relative;
-            box-shadow: var(--shadow-subtle) inset; 
+            box-shadow: var(--shadow-subtle) inset;
         }
-        #output-section.has-content { 
-             background-color: #fff; 
+        #output-section.has-content {
+             background-color: #fff;
              border-style: solid;
              border-color: var(--accent-secondary);
-             box-shadow: 0 0 25px -5px color-mix(in srgb, var(--accent-secondary) 20%, transparent);
-             padding: 1.5rem; 
+             box-shadow: 0 0 30px -8px rgba(16, 185, 129, 0.25); /* Soft glow when content is present */
+             padding: 1.5rem;
         }
         #output-section.has-content #status-message,
         #output-section.has-content #loading-animation-wrapper {
-            display: none !important; 
+            display: none !important;
         }
 
-        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; }
+        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; } /* Adjusted size */
         #audio-player { width: 100%; margin-top: 0; display: none; border-radius: 10px; box-shadow: var(--shadow-medium); }
         #output-section.has-content #audio-player {
-            margin-top: 0; 
+            margin-top: 0;
         }
-        #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: color-mix(in srgb, var(--accent-primary) 10%, transparent); border-radius: 50%; margin: 5px;}
-        #audio-player::-webkit-media-controls-current-time-display, 
+        /* Customize audio player (browser-specific, may not work everywhere) */
+        #audio-player::-webkit-media-controls-panel { background-color: #fdfdff; 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: color-mix(in srgb, var(--panel-border) 70%, var(--app-bg)); border-radius: 5px; margin: 0 10px;}
+        #audio-player::-webkit-media-controls-timeline { background-color: #EAF0F6; border-radius: 5px; margin: 0 10px;}
+
 
         /* --- انیمیشن پردازش --- */
         #loading-animation-wrapper {
-            display: none; 
+            display: none;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             gap: 1.8rem; /* Adjusted gap */
             width: 100%;
-            min-height: 150px; /* Ensure enough space */
+            min-height: 150px;
         }
-        .wave-loader {
-            display: flex;
-            align-items: flex-end; /* Align to bottom for wave effect */
-            height: 60px; /* Height of the loader */
-        }
-        .wave-loader .bar {
-            width: 10px; /* Width of each bar */
-            height: 10px; /* Initial height */
-            margin: 0 4px; /* Spacing between bars */
-            border-radius: 5px; /* Rounded bars */
-            background-color: var(--accent-primary);
-            animation: wave-animate 1.2s infinite ease-in-out;
-            box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 50%, transparent);
+        .orbital-loader {
+            width: 110px; /* Slightly smaller */
+            height: 110px;
+            position: relative;
+            animation: rotate-loader-orbital 10s linear infinite; /* Faster rotation */
         }
-        .wave-loader .bar:nth-child(2) { animation-delay: 0.1s; background-color: var(--accent-secondary); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-secondary) 50%, transparent); }
-        .wave-loader .bar:nth-child(3) { animation-delay: 0.2s; }
-        .wave-loader .bar:nth-child(4) { animation-delay: 0.3s; background-color: var(--accent-secondary); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-secondary) 50%, transparent); }
-        .wave-loader .bar:nth-child(5) { animation-delay: 0.4s; }
+        .orbit {
+            position: absolute;
+            top: 50%; left: 50%;
+            border: 2px dashed rgba(59, 130, 246, 0.25); /* Lighter dash */
+            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; }
 
-        @keyframes wave-animate {
-            0%, 100% { height: 10px; opacity: 0.6; }
-            50% { height: 50px; opacity: 1; }
+        .orbit .satellite {
+            position: absolute;
+            width: 10px; height: 10px; /* Smaller satellites */
+            border-radius: 50%;
+            background-color: var(--accent-primary);
+            box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary); /* Adjusted shadow */
         }
+        .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; } /* Added delay */
+        .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;} /* Added delay */
 
-        #loading-text { 
-            font-size: 1.2em; 
-            font-weight: 700; 
-            color: var(--text-primary); 
+        @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; /* Adjusted size */
+            font-weight: 700;
+            color: var(--text-primary);
             text-align: center;
-            background: linear-gradient(60deg, var(--accent-primary), var(--accent-secondary));
+            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
@@ -547,22 +542,22 @@
 <body>
     <div class="container">
         <header class="app-header">
-            <h1>آلفا TTS: صدای هوشمند شما</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="5" placeholder="متن خود را اینجا وارد کنید..."></textarea>
+                    <textarea id="text-input" rows="4" placeholder="متن خود را اینجا وارد کنید..."></textarea>
                     <div class="char-counter-wrapper">
-                        <span id="char-count">0</span> / <span id="max-char-count">1500</span>
+                        <span id="char-count">0</span> / <span id="char-max">1000</span> نویسه
                     </div>
                 </div>
                 <div class="form-group">
                     <label for="prompt-input">🗣️ توصیف سبک و لحن گفتار (اختیاری)</label>
-                    <input type="text" id="prompt-input" value="با صدای طبیعی و روان." placeholder="مثال: با لحنی رسمی و موقر، یا شاد و کودکانه">
+                    <input type="text" id="prompt-input" placeholder="مثال: با لحنی رسمی و موقر، یا شاد و کودکانه">
                 </div>
 
                 <div class="form-group">
@@ -578,22 +573,22 @@
                         <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>                                                       
+                              </svg>
                             تغییر گوینده
                         </button>
                     </div>
                 </div>
-                
+
                 <div class="form-group">
                     <div class="label-with-info">
-                        <label for="temperature-slider">🌡️ میزان خلاقیت صدا</label>
+                        <label for="temperature-slider">🌡️ میزان خلاقیت و نوآوری صدا</label>
                         <div class="info-tooltip-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!
                             <span class="tooltip-text" id="temp-tooltip-text">مقادیر بالاتر منجر به صدایی متنوع‌تر و گاهی غیرمنتظره‌تر می‌شود، در حالی که مقادیر پایین‌تر صدایی پایدارتر و قابل پیش‌بینی‌تر تولید می‌کنند. (محدوده: 0.1 تا 1.5)</span>
                         </div>
                     </div>
                     <div class="slider-container">
-                        <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9" aria-describedby="temperature-value">
-                        <span id="temperature-value" role="status" aria-live="polite">0.9</span>
+                        <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
+                        <span id="temperature-value">0.9</span>
                     </div>
                 </div>
 
@@ -603,12 +598,10 @@
             <div id="output-section">
                 <div id="status-message">صدای تولید شده در اینجا نمایش داده خواهد شد.</div>
                 <div id="loading-animation-wrapper">
-                    <div class="wave-loader">
-                        <div class="bar"></div>
-                        <div class="bar"></div>
-                        <div class="bar"></div>
-                        <div class="bar"></div>
-                        <div class="bar"></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>
@@ -620,74 +613,73 @@
     <div id="speaker-modal">
         <div class="modal-content">
             <div class="modal-header">
-                <h2>گالری گویندگان آلفا</h2>
+                <h2>گالری گویندگان آلفا نوا</h2>
                 <button type="button" class="close-modal-btn" aria-label="بستن مودال">×</button>
             </div>
-            <div id="speaker-grid"></div>
+            <div id="speaker-grid">
+                <!-- Speaker cards will be generated here by JS -->
+            </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 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 MAX_TEXT_CHARS = 1500;
 
             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: "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 charCountSpan = document.getElementById('char-count');
-            const maxCharSpan = document.getElementById('max-char-count');
             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'); 
+            const changeSpeakerBtn = document.getElementById('change-speaker-btn');
             const selectedSpeakerCard = document.getElementById('selected-speaker-card');
             const closeModalBtn = document.querySelector('.close-modal-btn');
             const speakerGridInModal = document.getElementById('speaker-grid');
@@ -697,48 +689,46 @@
             const tempInfoIcon = document.getElementById('temp-info-icon');
 
             // Character Counter
-            if (maxCharSpan) maxCharSpan.textContent = MAX_TEXT_CHARS;
+            const charCountSpan = document.getElementById('char-count');
+            const charMaxSpan = document.getElementById('char-max');
+            const MAX_CHARS = 1000; // You can change this
+            // textInput.maxLength = MAX_CHARS; // Optional: Enforce limit in HTML
+            charMaxSpan.textContent = MAX_CHARS;
+
             textInput.addEventListener('input', () => {
                 const currentLength = textInput.value.length;
                 charCountSpan.textContent = currentLength;
-                if (currentLength > MAX_TEXT_CHARS) {
-                    charCountSpan.classList.add('limit-exceeded');
-                    textInput.setAttribute('aria-invalid', 'true');
+                if (currentLength > MAX_CHARS) {
+                    charCountSpan.style.color = 'var(--accent-secondary-hover)'; // Or some error color
                 } else {
-                    charCountSpan.classList.remove('limit-exceeded');
-                    textInput.setAttribute('aria-invalid', 'false');
+                    charCountSpan.style.color = 'var(--accent-primary)';
                 }
             });
-            
+
+
             function getSpeakerById(id) {
-                return speakers.find(s => s.id === id) || speakers[0]; 
+                return speakers.find(s => s.id === id) || speakers[0];
             }
-            
-            function getImageUrl(speaker, index, size = 'thumb') { 
+
+            function getImageUrl(speaker, index, size = 'thumb') {
                 const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
-                const imageIndex = (index * 7 + speaker.id.length * 3 + 5) % 100; 
-                let portraitSizePath = 'thumb/'; 
-                if (size === 'large') portraitSizePath = ''; 
+                // A simple way to get somewhat varied images based on index and ID length
+                const imageIndex = (index * 7 + speaker.id.length * 3 + 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); 
+                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;
-
-                // Add animation class if it's not the initial load
-                if (updateSelectedSpeakerDisplay.hasRunOnce) {
-                    selectedSpeakerCard.classList.add('speaker-changed');
-                    setTimeout(() => selectedSpeakerCard.classList.remove('speaker-changed'), 700);
-                }
-                updateSelectedSpeakerDisplay.hasRunOnce = true;
             }
-            updateSelectedSpeakerDisplay.hasRunOnce = false; // Initialize flag
 
             function createSpeakerCardsInModal() {
                 speakerGridInModal.innerHTML = '';
@@ -747,7 +737,7 @@
                     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">
@@ -755,81 +745,77 @@
                             <div class="speaker-name">${speaker.name}</div>
                         </div>
                     `;
-                    
+
                     cardLabel.addEventListener('click', (e) => {
+                        // Ensure radio gets checked even if label's child is clicked
                         if (e.target.name !== "modal_speaker_selection") {
                              const radio = cardLabel.querySelector('input[type="radio"]');
-                             if(radio) radio.checked = true; 
+                             if(radio) radio.checked = true;
                         }
                         updateSelectedSpeakerDisplay(speaker.id);
-                        setTimeout(() => speakerModal.classList.remove('visible'), 200); 
+                        // Add a slight delay for visual feedback before closing
+                        setTimeout(() => speakerModal.classList.remove('visible'), 200);
                     });
+
                     speakerGridInModal.appendChild(cardLabel);
                 });
             }
-            
+
             function openSpeakerModal() {
-                createSpeakerCardsInModal(); 
+                createSpeakerCardsInModal();
                 speakerModal.classList.add('visible');
-                document.body.style.overflow = 'hidden'; // Prevent background scroll
-                setTimeout(() => { 
+                // Focus management for accessibility
+                setTimeout(() => {
                     const firstFocusable = speakerModal.querySelector('input[type="radio"]:checked, input[type="radio"], .close-modal-btn');
                     if (firstFocusable) firstFocusable.focus();
-                    else closeModalBtn.focus();
-                }, 50); 
-            }
-            function closeSpeakerModal() {
-                speakerModal.classList.remove('visible');
-                document.body.style.overflow = ''; // Restore background scroll
+                    else closeModalBtn.focus(); // Fallback
+                }, 50); // Allow modal transition to start
             }
 
-            changeSpeakerBtn.addEventListener('click', openSpeakerModal); 
+            changeSpeakerBtn.addEventListener('click', openSpeakerModal);
             selectedSpeakerCard.addEventListener('click', openSpeakerModal);
 
-            closeModalBtn.addEventListener('click', closeSpeakerModal);
+            closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
             speakerModal.addEventListener('click', (e) => {
-                if (e.target === speakerModal) { 
-                    closeSpeakerModal();
+                if (e.target === speakerModal) { // Click on backdrop
+                    speakerModal.classList.remove('visible');
                 }
             });
             document.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape' && speakerModal.classList.contains('visible')) {
-                    closeSpeakerModal();
+                    speakerModal.classList.remove('visible');
                 }
             });
 
-            tempSlider.addEventListener('input', () => { 
-                tempValueSpan.textContent = tempSlider.value; 
-            });
+            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
 
+            // Tooltip functionality
             tempInfoIcon.addEventListener('click', (e) => {
                 e.stopPropagation();
                 tempInfoIcon.classList.toggle('active');
-                tempInfoIcon.setAttribute('aria-expanded', tempInfoIcon.classList.contains('active').toString());
             });
-            tempInfoIcon.addEventListener('keydown', (e) => {
+             tempInfoIcon.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     tempInfoIcon.classList.toggle('active');
-                    tempInfoIcon.setAttribute('aria-expanded', tempInfoIcon.classList.contains('active').toString());
                 }
             });
             document.addEventListener('click', (e) => {
                 if (!tempInfoIcon.contains(e.target) && tempInfoIcon.classList.contains('active')) {
                     tempInfoIcon.classList.remove('active');
-                    tempInfoIcon.setAttribute('aria-expanded', 'false');
                 }
             });
 
+
             function showLoadingState() {
-                outputSection.classList.remove('has-content'); 
-                statusMessage.style.display = 'none'; 
+                outputSection.classList.remove('has-content');
+                statusMessage.style.display = 'none';
                 audioPlayer.style.display = 'none';
                 audioPlayer.src = '';
                 loadingAnimationWrapper.style.display = 'flex';
                 generateBtn.disabled = true;
                 generateBtn.innerHTML = `
-                    <svg class="loader-icon" aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101">
+                    <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>
@@ -838,39 +824,35 @@
             }
 
             function showResultState(isSuccess, message = '') {
-                loadingAnimationWrapper.style.display = 'none'; 
+                loadingAnimationWrapper.style.display = 'none';
                 if (isSuccess) {
                     statusMessage.style.display = 'none';
                     audioPlayer.style.display = 'block';
-                    outputSection.classList.add('has-content'); 
-                    audioPlayer.focus(); // Focus on player when ready
+                    outputSection.classList.add('has-content');
                 } else {
                     statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
                     statusMessage.style.display = 'block';
                     audioPlayer.style.display = 'none';
-                    outputSection.classList.remove('has-content'); 
+                    outputSection.classList.remove('has-content');
                 }
                 generateBtn.disabled = false;
-                generateBtn.innerHTML = '✨ تولید صدا با آلفا';
+                generateBtn.innerHTML = '✨ تولید صدا با آلفا'; // Restored original text
             }
 
             async function generateAudio(event) {
                 event.preventDefault();
-                
-                const text = textInput.value.trim();
-                if (!text) {
+                showLoadingState();
+
+                const text = textInput.value;
+                if (!text.trim()) {
                     showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
-                    textInput.focus();
                     return;
                 }
-                if (text.length > MAX_TEXT_CHARS) {
-                    showResultState(false, `خطا: طول متن بیش از حد مجاز (${MAX_TEXT_CHARS} کاراکتر) است.`);
-                    textInput.focus();
+                if (text.length > MAX_CHARS) {
+                    showResultState(false, `خطا: طول متن بیش از ${MAX_CHARS} نویسه است.`);
                     return;
                 }
-                
-                showLoadingState();
-                
+
                 const promptVal = promptInput.value;
                 const temperatureVal = parseFloat(tempSlider.value);
                 const selectedSpeakerVal = selectedSpeakerIdStorage.value;
@@ -895,10 +877,10 @@
                          console.error("Join Queue Error Body:", errorBody);
                          throw new Error(`خطا در برقراری ارتباط با سرویس آلفا (${joinQueueResponse.status}). لطفا لحظاتی دیگر تلاش کنید.`);
                     }
-                    
+
                     let finalFilePath = null;
                     const startTime = Date.now();
-                    const timeoutDuration = 90000; // 90 seconds
+                    const timeoutDuration = 90000; // 90 seconds timeout
 
                     while (Date.now() - startTime < timeoutDuration) {
                         const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
@@ -907,7 +889,7 @@
                              console.error("Get Data Error Body:", errorBody);
                              throw new Error(`خطا در دریافت داده از سرویس (${dataResponse.status})`);
                         }
-                        
+
                         const responseText = await dataResponse.text();
                         const lines = responseText.trim().split('\n');
 
@@ -916,28 +898,28 @@
                             try {
                                 const data = JSON.parse(line.substring(5));
                                 if (data.msg === 'process_generating' || data.msg === 'process_starts') {
-                                    // console.log("Processing:", data.msg, data.output?.progress_data?.[0]?.desc);
+                                    // 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); 
+                                    } else {
+                                        console.error("Invalid server response structure or unsuccessful processing:", data);
                                         throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.');
                                     }
-                                    break; 
+                                    break; // Exit inner loop once completed
                                 } else if (data.msg === 'queue_full') {
                                     throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.');
                                 }
-                            } catch (e) { 
+                            } catch (e) {
                                 console.warn("Error parsing JSON from stream:", e, "Line:", line);
                             }
                         }
-                        if (finalFilePath) break; 
-                        await new Promise(resolve => setTimeout(resolve, 1000)); 
+                        if (finalFilePath) break; // Exit outer loop if file path is found
+                        await new Promise(resolve => setTimeout(resolve, 1000)); // Poll every second
                     }
-                    
+
                     if (finalFilePath) {
-                        const audioUrl = `${FILE_URL_BASE}${finalFilePath.replace(/\\/g, '/')}`; // Ensure forward slashes
+                        const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
                         audioPlayer.src = audioUrl;
                         showResultState(true);
                     } else if (Date.now() - startTime >= timeoutDuration) {
@@ -951,8 +933,9 @@
                     showResultState(false, `${error.message}`);
                 }
             }
-            
-            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id); 
+
+            // Initial setup
+            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
             form.addEventListener('submit', generateAudio);
 
             // Initial state for output section
@@ -960,6 +943,12 @@
             loadingAnimationWrapper.style.display = 'none';
             audioPlayer.style.display = 'none';
             outputSection.classList.remove('has-content');
+
+            // Add a keyframe for the spinner SVG in JS to keep it local
+            const styleSheet = document.createElement("style")
+            styleSheet.type = "text/css"
+            styleSheet.innerText = `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`;
+            document.head.appendChild(styleSheet);
         });
     </script>
 </body>