diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -9,7 +9,7 @@
 
         :root {
             --app-font: 'Vazirmatn', sans-serif;
-            --app-bg: #F7F9FC;
+            --app-bg: #F4F7FC;
             --panel-bg: #FFFFFF;
             --panel-border: #E8EEF3;
             --text-primary: #121826;
@@ -20,11 +20,6 @@
             --accent-secondary-hover: #059669;
             --input-bg: #F8FAFC;
             --input-border-focus: var(--accent-primary);
-            --waveform-bg: #A9B9D0;
-            --waveform-progress: #3B82F6;
-            --player-control-bg: #f0f3f7;
-            --player-control-icon: #6B7A94;
-            --player-control-icon-hover: var(--accent-primary);
 
             --radius-card: 24px;
             --radius-input: 14px;
@@ -33,19 +28,39 @@
             --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);
+
+            /* Custom Audio Player Colors */
+            --waveform-color-active: #3B82F6; /* Matches accent-primary */
+            --waveform-color-inactive: #D0D9E6; /* Lighter shade for inactive part of waveform */
         }
 
-        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes modalZoomIn { from { opacity: 0; transform: scale(0.8) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
-        @keyframes modalZoomOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.8) translateY(20px); } }
+        @keyframes fadeInDown {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes modalZoomIn {
+            from { opacity: 0; transform: scale(0.8) translateY(20px); }
+            to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+        @keyframes modalZoomOut {
+            from { opacity: 1; transform: scale(1) translateY(0); }
+            to { opacity: 0; transform: scale(0.8) translateY(20px); }
+        }
+
+        /* Keyframe for loading spinner in button */
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
 
         body {
             font-family: var(--app-font);
             direction: rtl;
             background-color: var(--app-bg);
-            background-image: radial-gradient(var(--panel-border) 1px, transparent 1px);
-            background-size: 30px 30px;
             color: var(--text-primary);
             font-size: 16px;
             line-height: 1.8;
@@ -60,228 +75,699 @@
             overflow-x: hidden;
         }
 
-        .container { max-width: 780px; width: 92%; margin: 0 auto; }
-        .app-header { padding: 0.5rem 0 2.5rem 0; text-align: center; margin-bottom: 1.5rem; animation: fadeInDown 0.8s 0.1s ease-out backwards; }
-        .app-header h1 { font-size: 2.1em; font-weight: 900; margin:0 0 0.6rem 0; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }
-        .app-header p { font-size: 1em; color: var(--text-secondary); margin-top:0; opacity: 0.85; font-weight: 400; line-height: 1.6; }
-        .main-content { padding: 2.5rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-strong); border: 1px solid var(--panel-border); animation: fadeInUp 0.8s 0.3s ease-out backwards; }
+        .container {
+            max-width: 780px;
+            width: 92%;
+            margin: 0 auto;
+        }
+
+        .app-header {
+            padding: 0.5rem 0 2.5rem 0;
+            text-align: center;
+            margin-bottom: 1.5rem;
+            animation: fadeInDown 0.8s 0.1s ease-out backwards;
+        }
+        .app-header h1 {
+            font-size: 2.1em;
+            font-weight: 900;
+            margin:0 0 0.6rem 0;
+            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.5px;
+        }
+        .app-header p {
+            font-size: 1em;
+            color: var(--text-secondary);
+            margin-top:0;
+            opacity: 0.85;
+            font-weight: 400;
+            line-height: 1.6;
+        }
+
+        .main-content {
+            padding: 2.5rem;
+            background-color: var(--panel-bg);
+            border-radius: var(--radius-card);
+            box-shadow: var(--shadow-strong);
+            border: 1px solid var(--panel-border);
+            animation: fadeInUp 0.8s 0.3s ease-out backwards;
+        }
+
         .form-group { margin-bottom: 2rem; }
-        .label-with-info { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
-        .label-with-info label { margin-bottom: 0; }
-        .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background-color: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text-secondary); font-size: 0.9em; font-weight: 700; cursor: pointer; position: relative; transition: var(--transition-smooth); user-select: none; }
-        .info-icon:hover, .info-icon:focus { background-color: var(--accent-primary); color: white; border-color: var(--accent-primary); transform: scale(1.1); outline: none; }
-        label { display: block; font-weight: 700; color: var(--text-primary); font-size: 1.05em; margin-bottom: 0.8rem; }
-        textarea, input[type="text"] { width: 100%; padding: 0.9rem 1.1rem; border-radius: var(--radius-input); border: 1px solid var(--panel-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-subtle) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); }
-        textarea:focus, input[type="text"]:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), var(--shadow-subtle) inset; background-color: #fff; }
+
+        .label-with-info {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        .label-with-info label {
+             margin-bottom: 0;
+        }
+
+        .info-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            background-color: var(--input-bg);
+            border: 1px solid var(--panel-border);
+            color: var(--text-secondary);
+            font-size: 0.9em;
+            font-weight: 700;
+            cursor: pointer;
+            position: relative;
+            transition: var(--transition-smooth);
+            user-select: none;
+        }
+        .info-icon:hover, .info-icon:focus {
+            background-color: var(--accent-primary);
+            color: white;
+            border-color: var(--accent-primary);
+            transform: scale(1.1);
+            outline: none;
+        }
+
+        label {
+            display: block;
+            font-weight: 700;
+            color: var(--text-primary);
+            font-size: 1.05em;
+            margin-bottom: 0.8rem;
+        }
+
+        textarea, input[type="text"] {
+            width: 100%;
+            padding: 0.9rem 1.1rem;
+            border-radius: var(--radius-input);
+            border: 1px solid var(--panel-border);
+            background-color: var(--input-bg);
+            color: var(--text-primary);
+            box-shadow: var(--shadow-subtle) inset;
+            font-family: var(--app-font);
+            font-size: 1rem;
+            box-sizing: border-box;
+            transition: var(--transition-smooth);
+        }
+        textarea:focus, input[type="text"]:focus {
+            outline: none;
+            border-color: var(--input-border-focus);
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), var(--shadow-subtle) inset;
+            background-color: #fff;
+        }
         textarea { min-height: 100px; resize: vertical; }
-        .char-counter-wrapper { font-size: 0.85em; color: var(--text-secondary); text-align: left; margin-top: 0.5rem; padding: 0 0.2rem; }
+
+        .char-counter-wrapper {
+            font-size: 0.85em;
+            color: var(--text-secondary);
+            text-align: left;
+            margin-top: 0.5rem;
+            padding: 0 0.2rem;
+        }
         #char-count { font-weight: 600; color: var(--accent-primary); }
+
+
+        /* --- نمایش گوینده منتخب --- */
         #selected-speaker-display { text-align: center; margin-top: 1rem; position: relative; }
-        #selected-speaker-card { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--input-bg) 0%, #fff 100%); border-radius: var(--radius-card); padding: 1rem 1.2rem; box-shadow: var(--shadow-medium); border: 1px solid var(--panel-border); transition: var(--transition-bounce); position: relative; margin-bottom: 1.2rem; cursor: pointer; }
-        #selected-speaker-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-strong); }
-        #selected-speaker-card img { width: 75px; height: 75px; border-radius: 50%; object-fit: cover; margin-left: 18px; border: 3px solid var(--accent-secondary); box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.5); background-color: #e0e0e0; transition: var(--transition-smooth); }
-        #selected-speaker-card:hover img { transform: scale(1.08) rotate(3deg); }
+        #selected-speaker-card {
+            display: inline-flex;
+            align-items: center;
+            background: linear-gradient(135deg, var(--input-bg) 0%, #fff 100%);
+            border-radius: var(--radius-card);
+            padding: 1rem 1.2rem;
+            box-shadow: var(--shadow-medium);
+            border: 1px solid var(--panel-border);
+            transition: var(--transition-bounce);
+            position: relative;
+            margin-bottom: 1.2rem;
+            cursor: pointer;
+        }
+         #selected-speaker-card:hover {
+            transform: translateY(-6px) scale(1.03);
+            box-shadow: var(--shadow-strong);
+        }
+        #selected-speaker-card img {
+            width: 75px; height: 75px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-left: 18px;
+            border: 3px solid var(--accent-secondary);
+            box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.5);
+            background-color: #e0e0e0;
+            transition: var(--transition-smooth);
+        }
+        #selected-speaker-card:hover img {
+            transform: scale(1.08) rotate(3deg);
+        }
         #selected-speaker-info h3 { margin: 0; font-size: 1.35em; font-weight: 800; color: var(--text-primary); }
         #selected-speaker-info p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.88em; font-weight: 500; }
-        #change-speaker-btn { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; padding: 10px 20px; border-radius: var(--radius-input); background: linear-gradient(45deg, var(--accent-primary-hover), var(--accent-primary)); border: none; color: #fff; cursor: pointer; font-family: var(--app-font); font-weight: 600; font-size: 1em; transition: var(--transition-smooth); box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35), var(--shadow-subtle); }
-        #change-speaker-btn:hover { background: linear-gradient(45deg, var(--accent-primary), var(--accent-primary-hover)); transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 12px -3px rgba(59, 130, 246, 0.45), var(--shadow-medium); }
-        #change-speaker-btn svg { width: 1.1em; height: 1.1em; margin-right: 0.5em; fill: currentColor; }
-        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(8px) saturate(150%); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+
+        #change-speaker-btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto;
+            padding: 10px 20px;
+            border-radius: var(--radius-input);
+            background: linear-gradient(45deg, var(--accent-primary-hover), var(--accent-primary));
+            border: none;
+            color: #fff;
+            cursor: pointer;
+            font-family: var(--app-font); font-weight: 600;
+            font-size: 1em;
+            transition: var(--transition-smooth);
+            box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35), var(--shadow-subtle);
+        }
+        #change-speaker-btn:hover {
+            background: linear-gradient(45deg, var(--accent-primary), var(--accent-primary-hover));
+            transform: translateY(-3px) scale(1.05);
+            box-shadow: 0 6px 12px -3px rgba(59, 130, 246, 0.45), var(--shadow-medium);
+        }
+        #change-speaker-btn svg {
+            width: 1.1em;
+            height: 1.1em;
+            margin-right: 0.5em;
+            fill: currentColor;
+        }
+
+
+        /* --- مودال عمومی --- */
+        .modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-color: rgba(18, 24, 38, 0.6);
+            backdrop-filter: blur(8px) saturate(150%);
+            display: none; /* Hidden by default */
+            align-items: center; justify-content: center;
+            z-index: 1000; opacity: 0;
+            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
         .modal-overlay.visible { display: flex; opacity: 1; }
-        .modal-dialog { background: var(--panel-bg); padding: 2rem; border-radius: var(--radius-card); width: 90%; box-shadow: var(--shadow-strong); border: 1px solid var(--panel-border); opacity: 0; animation-duration: 0.35s; animation-fill-mode: forwards; }
-        .modal-overlay.visible .modal-dialog { animation-name: modalZoomIn; }
-        .modal-overlay.hiding .modal-dialog { animation-name: modalZoomOut; }
+
+        .modal-dialog {
+            background: var(--panel-bg);
+            padding: 2rem;
+            border-radius: var(--radius-card);
+            width: 90%;
+            box-shadow: var(--shadow-strong);
+            border: 1px solid var(--panel-border);
+            opacity: 0; /* For animation */
+            animation-duration: 0.35s;
+            animation-fill-mode: forwards;
+        }
+        .modal-overlay.visible .modal-dialog {
+            animation-name: modalZoomIn;
+        }
+        .modal-overlay.hiding .modal-dialog {
+            animation-name: modalZoomOut;
+        }
+
+
         .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
         .modal-header h2 { margin: 0; font-size: 1.6em; font-weight: 800; color: var(--accent-primary);}
         .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition-smooth); line-height: 1; }
         .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); }
-        #speaker-modal .modal-dialog { max-width: 700px; max-height: 85vh; overflow-y: auto; }
+
+
+        /* --- مودال گالری گویندگان (اختصاصی) --- */
+        #speaker-modal .modal-dialog { /* Target specific modal dialog */
+            max-width: 700px;
+            max-height: 85vh; overflow-y: auto;
+        }
         #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; }
         @media (min-width: 640px) { #speaker-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
         .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative;}
-        .speaker-card .speaker-visual { border: 3px solid transparent; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-subtle); position: relative; background-color: var(--input-bg); transition: var(--transition-bounce); padding: 6px; }
-        .speaker-card:hover .speaker-visual { transform: translateY(-5px) scale(1.06); box-shadow: var(--shadow-medium); }
+        .speaker-card .speaker-visual {
+            border: 3px solid transparent;
+            border-radius: var(--radius-card);
+            overflow: hidden;
+            box-shadow: var(--shadow-subtle);
+            position: relative;
+            background-color: var(--input-bg);
+            transition: var(--transition-bounce);
+            padding: 6px;
+        }
+        .speaker-card:hover .speaker-visual {
+            transform: translateY(-5px) scale(1.06);
+            box-shadow: var(--shadow-medium);
+        }
         .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img { width: 100%; height: 120px; object-fit: cover; display: block; background-color: #e0e0e0; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: calc(var(--radius-card) - 12px); }
+        .speaker-card img {
+            width: 100%; height: 120px;
+            object-fit: cover; display: block;
+            background-color: #e0e0e0;
+            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            border-radius: calc(var(--radius-card) - 12px);
+        }
         .speaker-card:hover img { transform: scale(1.12); }
         .speaker-card .speaker-name { padding: 0.8rem 0.4rem 0.1rem; font-weight: 600; font-size: 0.9em; color: var(--text-secondary); transition: color 0.2s; }
-        .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--accent-secondary); box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.75); background: linear-gradient(135deg, var(--accent-secondary-hover), var(--accent-primary)); transform: scale(1.05); }
-        .speaker-card input[type="radio"]:checked + .speaker-visual img { border: 2px solid white; transform: scale(1.05); }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name { color: #fff; font-weight: 700; }
-        #info-modal .modal-dialog { max-width: 480px; }
-        #info-modal-content p { font-size: 1em; line-height: 1.7; color: var(--text-secondary); margin-bottom: 0.5rem; }
-        #info-modal-content p strong { color: var(--text-primary); font-weight: 600; }
-        #info-modal-content .range-info { font-size: 0.9em; color: var(--accent-primary); font-weight: 500; margin-top: 1rem; display: block; text-align: center; }
+        .speaker-card input[type="radio"]:checked + .speaker-visual {
+            border-color: var(--accent-secondary);
+            box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.75);
+            background: linear-gradient(135deg, var(--accent-secondary-hover), var(--accent-primary));
+            transform: scale(1.05);
+        }
+        .speaker-card input[type="radio"]:checked + .speaker-visual img {
+            border: 2px solid white;
+            transform: scale(1.05);
+        }
+        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name {
+            color: #fff;
+            font-weight: 700;
+        }
+
+        /* --- مودال اطلاعات (اختصاصی) --- */
+        #info-modal .modal-dialog {
+            max-width: 480px; /* Smaller width for info */
+        }
+        #info-modal-content p {
+            font-size: 1em;
+            line-height: 1.7;
+            color: var(--text-secondary);
+            margin-bottom: 0.5rem;
+        }
+        #info-modal-content p strong {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+        #info-modal-content .range-info {
+            font-size: 0.9em;
+            color: var(--accent-primary);
+            font-weight: 500;
+            margin-top: 1rem;
+            display: block;
+            text-align: center;
+        }
+
+
+        /* --- Slider & Button & Output --- */
         .slider-container { display: flex; align-items: center; gap: 1.2rem; }
-        input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #EAF0F6; border-radius: 4px; outline: none; cursor: pointer; transition: background 0.2s; }
-        input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%); height: 8px; border-radius: 4px; }
-        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: #fff; border-radius: 50%; cursor: pointer; border: 3px solid var(--accent-primary); box-shadow: 0 2px 6px rgba(0,0,0,0.15); margin-top: -7px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
-        input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]:focus::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 3px 8px rgba(59, 130, 246, 0.35); }
-        input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: #fff; border-radius: 50%; cursor: pointer; border: 3px solid var(--accent-primary); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
-        input[type="range"]::-moz-range-track { background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%); height: 8px; border-radius: 4px; border: none; }
-        #temperature-value { font-weight: 700; background-color: var(--input-bg); padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--panel-border); min-width: 45px; text-align: center; color: var(--accent-primary); font-size: 1em; box-shadow: var(--shadow-subtle); }
-        #generate-btn { width: 100%; padding: 1rem 1.5rem; font-size: 1.25em; font-weight: 800; font-family: var(--app-font); background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-input); cursor: pointer; transition: var(--transition-smooth), transform 0.15s ease-out; box-shadow: 0 5px 15px -4px rgba(59, 130, 246, 0.45), 0 5px 15px -4px rgba(16, 185, 129, 0.35); position: relative; overflow: hidden; letter-spacing: 0.5px; }
-        #generate-btn::before { content: ''; position: absolute; top: 0; left: -180%; width: 80%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%); transform: skewX(-30deg); transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1); }
+        input[type="range"] {
+            flex-grow: 1; -webkit-appearance: none; appearance: none;
+            width: 100%; height: 8px;
+            background: #EAF0F6;
+            border-radius: 4px; outline: none;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        input[type="range"]::-webkit-slider-runnable-track {
+            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
+            height: 8px;
+            border-radius: 4px;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none; appearance: none;
+            width: 22px; height: 22px;
+            background: #fff;
+            border-radius: 50%; cursor: pointer;
+            border: 3px solid var(--accent-primary);
+            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+            margin-top: -7px;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+         input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]:focus::-webkit-slider-thumb {
+            transform: scale(1.2);
+            box-shadow: 0 3px 8px rgba(59, 130, 246, 0.35);
+        }
+        input[type="range"]::-moz-range-thumb {
+            width: 22px; height: 22px;
+            background: #fff;
+            border-radius: 50%; cursor: pointer;
+            border: 3px solid var(--accent-primary);
+            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+        }
+        input[type="range"]::-moz-range-track {
+            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
+            height: 8px;
+            border-radius: 4px;
+            border: none;
+        }
+        #temperature-value {
+            font-weight: 700; background-color: var(--input-bg);
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            border: 1px solid var(--panel-border);
+            min-width: 45px; text-align: center;
+            color: var(--accent-primary);
+            font-size: 1em;
+            box-shadow: var(--shadow-subtle);
+        }
+
+        #generate-btn {
+            width: 100%; padding: 1rem 1.5rem;
+            font-size: 1.25em; font-weight: 800;
+            font-family: var(--app-font);
+            background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
+            color: #fff;
+            border: none;
+            border-radius: var(--radius-input);
+            cursor: pointer;
+            transition: var(--transition-smooth), transform 0.15s ease-out;
+            box-shadow: 0 5px 15px -4px rgba(59, 130, 246, 0.45), 0 5px 15px -4px rgba(16, 185, 129, 0.35);
+            position: relative;
+            overflow: hidden;
+            letter-spacing: 0.5px;
+        }
+        #generate-btn::before {
+            content: ''; position: absolute;
+            top: 0; left: -180%; width: 80%; height: 100%;
+            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
+            transform: skewX(-30deg);
+            transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
+        }
         #generate-btn:hover::before { left: 180%; }
-        #generate-btn:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.55), 0 8px 20px -4px rgba(16, 185, 129, 0.45); }
-        #generate-btn:active:not(:disabled) { transform: translateY(-2px) scale(0.98); }
-        #generate-btn:disabled { background: #B8C2CC; cursor: not-allowed; box-shadow: none; color: #E8EEF3; transform: none; }
+        #generate-btn:hover:not(:disabled) {
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.55), 0 8px 20px -4px rgba(16, 185, 129, 0.45);
+        }
+        #generate-btn:active:not(:disabled) {
+            transform: translateY(-2px) scale(0.98);
+        }
+        #generate-btn:disabled {
+            background: #B8C2CC;
+            cursor: not-allowed; box-shadow: none; color: #E8EEF3;
+            transform: none;
+        }
         #generate-btn:disabled::before { display: none; }
-        #generate-btn svg { display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em; vertical-align: middle; }
-        #output-section { margin-top: 3rem; background-color: #fff; border-radius: var(--radius-card); min-height: 200px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; border: 1px solid var(--panel-border); transition: var(--transition-smooth), border-color 0.5s, box-shadow 0.5s; position: relative; box-shadow: var(--shadow-medium); padding: 1.5rem; }
-        #output-section.has-content { border-color: var(--accent-secondary); box-shadow: 0 0 30px -8px rgba(16, 185, 129, 0.35); }
-        #output-section.is-empty { background-color: var(--input-bg); box-shadow: var(--shadow-subtle) inset; border: 2px dashed var(--panel-border); }
-        #output-section.is-empty #custom-player-container { display: none !important; }
-        #output-section:not(.is-empty) #status-message,
-        #output-section:not(.is-empty) #loading-animation-wrapper { display: none !important; }
+        #generate-btn svg {
+             display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em;
+             vertical-align: middle;
+        }
+
+        /* --- Output Section (now a container for status/loading/player) --- */
+        #output-section {
+            margin-top: 3rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            gap: 1.5rem;
+            min-height: 200px;
+            position: relative;
+            box-sizing: border-box;
+            padding: 1.5rem; /* Default padding for status/loading */
+        }
+        /* Style for status message and loading when visible */
+        #output-section #status-message,
+        #output-section #loading-animation-wrapper {
+            padding: 2rem;
+            background-color: var(--input-bg);
+            border-radius: var(--radius-card);
+            border: 2px dashed var(--panel-border);
+            box-shadow: var(--shadow-subtle) inset;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        /* When output section has content (the player), remove its own styling */
+        #output-section.has-content {
+            background-color: transparent;
+            border: none;
+            box-shadow: none;
+            padding: 0; /* Player wrapper will handle padding */
+            min-height: auto; /* Shrink to fit player content */
+        }
+        #output-section.has-content #status-message,
+        #output-section.has-content #loading-animation-wrapper {
+            display: none !important;
+        }
+
         #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; }
 
-        /* --- Custom Audio Player --- */
-        #custom-player-container {
+
+        /* --- انیمیشن پردازش --- */
+        #loading-animation-wrapper {
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 1.8rem;
             width: 100%;
-            padding: 1rem 1.2rem;
+            min-height: 150px;
+        }
+        .orbital-loader {
+            width: 110px;
+            height: 110px;
+            position: relative;
+            animation: rotate-loader-orbital 10s linear infinite;
+        }
+        .orbit {
+            position: absolute;
+            top: 50%; left: 50%;
+            border: 2px dashed rgba(59, 130, 246, 0.25);
+            border-radius: 50%;
+            transform-origin: center center;
+        }
+        .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: orbit-spin 2.8s linear infinite reverse; }
+        .orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; }
+        .orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; }
+
+        .orbit .satellite {
+            position: absolute;
+            width: 10px; height: 10px;
+            border-radius: 50%;
+            background-color: var(--accent-primary);
+            box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary);
+        }
+        .orbit:nth-child(1) .satellite { top: -5px; left: 50%; animation: satellite-pulse-1 1.4s ease-in-out infinite alternate; }
+        .orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); animation: satellite-pulse-2 1.4s 0.2s ease-in-out infinite alternate; }
+        .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;}
+
+        @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        @keyframes satellite-pulse-1 {
+            from { transform: scale(0.7) translateX(-50%); opacity: 0.6; }
+            to { transform: scale(1.1) translateX(-50%); opacity: 1; }
+        }
+        @keyframes satellite-pulse-2 {
+            from { transform: scale(0.7) translateY(-50%); opacity: 0.6; }
+            to { transform: scale(1.1) translateY(-50%); opacity: 1; }
+        }
+        @keyframes satellite-pulse-3 {
+            from { transform: scale(0.7) translateX(50%); opacity: 0.6; }
+            to { transform: scale(1.1) translateX(50%); opacity: 1; }
+        }
+        #loading-text {
+            font-size: 1.2em;
+            font-weight: 700;
+            color: var(--text-primary);
+            text-align: center;
+            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        /* --- Custom Audio Player Styles --- */
+        #audio-player-wrapper {
+            width: 100%;
+            background-color: var(--panel-bg);
+            border-radius: var(--radius-card);
+            box-shadow: var(--shadow-medium);
+            border: 1px solid var(--panel-border);
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1.2rem;
             box-sizing: border-box;
-            display: none; /* Hidden by default */
         }
-        .player-header {
+
+        .audio-player-header {
             display: flex;
             align-items: center;
+            justify-content: flex-end; /* Align to right for RTL */
             gap: 0.8rem;
-            margin-bottom: 1.2rem;
-            border: 1px solid var(--panel-border);
-            padding: 0.5rem 0.8rem;
-            border-radius: 12px;
-            background-color: var(--input-bg);
+            padding-bottom: 0.8rem;
+            border-bottom: 1px solid var(--panel-border);
+            margin-bottom: 0.8rem;
         }
-        .player-header .icon {
-            color: var(--text-secondary);
+        .audio-player-header .audio-player-title {
+            font-size: 1.1em;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-right: auto; /* Pushes icons to the right */
+        }
+        .audio-player-header .audio-player-icons svg {
             width: 22px;
             height: 22px;
+            color: var(--text-secondary); /* Match the grey from image */
+            vertical-align: middle;
+            margin-left: 0.5rem; /* Space between icons */
         }
-        .player-header .title {
-            font-weight: 600;
-            color: var(--text-primary);
-            font-size: 1em;
+        .audio-player-header .audio-player-icons svg:last-child {
+            margin-left: 0;
         }
-        .waveform-container {
-            position: relative;
+
+        #custom-audio-player {
+            background-color: transparent;
+            border: none;
+            box-shadow: none;
+            padding: 0;
+            border-radius: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 1.2rem;
             width: 100%;
-            height: 70px;
-            cursor: pointer;
+            box-sizing: border-box;
+        }
+
+        .audio-waveform-wrapper {
             display: flex;
             align-items: center;
-            gap: 2px;
+            gap: 0.8rem;
+            width: 100%;
+        }
+        .audio-time {
+            font-size: 0.9em;
+            color: var(--text-secondary);
+            min-width: 40px;
+            text-align: center;
+            font-variant-numeric: tabular-nums; /* Align numbers */
+        }
+        .audio-current-time {
+            text-align: right; /* Time on the left of waveform for RTL */
+        }
+        .audio-total-time {
+            text-align: left; /* Time on the right of waveform for RTL */
+        }
+
+        .audio-waveform-display {
+            flex-grow: 1;
+            height: 60px; /* Height of the waveform area */
+            position: relative;
+            border-radius: 4px;
+            overflow: hidden; /* To contain the progress fill */
+            /* Static background to mimic waveform bars */
+            background-image:
+                linear-gradient(to top, var(--waveform-color-inactive) 20%, transparent 20%),
+                linear-gradient(to top, var(--waveform-color-inactive) 60%, transparent 60%),
+                linear-gradient(to top, var(--waveform-color-inactive) 40%, transparent 40%),
+                linear-gradient(to top, var(--waveform-color-inactive) 80%, transparent 80%),
+                linear-gradient(to top, var(--waveform-color-inactive) 30%, transparent 30%),
+                linear-gradient(to top, var(--waveform-color-inactive) 70%, transparent 70%),
+                linear-gradient(to top, var(--waveform-color-inactive) 50%, transparent 50%),
+                linear-gradient(to top, var(--waveform-color-inactive) 90%, transparent 90%),
+                linear-gradient(to top, var(--waveform-color-inactive) 25%, transparent 25%),
+                linear-gradient(to top, var(--waveform-color-inactive) 65%, transparent 65%),
+                linear-gradient(to top, var(--waveform-color-inactive) 45%, transparent 45%),
+                linear-gradient(to top, var(--waveform-color-inactive) 85%, transparent 85%);
+            background-size: 4px 100%; /* Width of each bar */
+            background-repeat: repeat-x;
+            background-position: 0 0;
+            border: 1px dashed var(--waveform-color-inactive); /* Dashed line effect */
         }
-        #waveform-canvas {
+
+        .audio-progress-fill {
             position: absolute;
             top: 0;
             left: 0;
-            width: 100%;
             height: 100%;
+            width: 0%; /* Will be updated by JS */
+            /* Active background to fill waveform bars as progress */
+            background-image:
+                linear-gradient(to top, var(--waveform-color-active) 20%, transparent 20%),
+                linear-gradient(to top, var(--waveform-color-active) 60%, transparent 60%),
+                linear-gradient(to top, var(--waveform-color-active) 40%, transparent 40%),
+                linear-gradient(to top, var(--waveform-color-active) 80%, transparent 80%),
+                linear-gradient(to top, var(--waveform-color-active) 30%, transparent 30%),
+                linear-gradient(to top, var(--waveform-color-active) 70%, transparent 70%),
+                linear-gradient(to top, var(--waveform-color-active) 50%, transparent 50%),
+                linear-gradient(to top, var(--waveform-color-active) 90%, transparent 90%),
+                linear-gradient(to top, var(--waveform-color-active) 25%, transparent 25%),
+                linear-gradient(to top, var(--waveform-color-active) 65%, transparent 65%),
+                linear-gradient(to top, var(--waveform-color-active) 45%, transparent 45%),
+                linear-gradient(to top, var(--waveform-color-active) 85%, transparent 85%);
+            background-size: 4px 100%;
+            background-repeat: repeat-x;
+            background-position: 0 0;
+            transition: width 0.1s linear; /* Smooth progress animation */
         }
-        .player-timestamps {
+
+
+        .audio-controls-bottom {
             display: flex;
             justify-content: space-between;
-            font-size: 0.85em;
-            color: var(--text-secondary);
-            font-weight: 500;
-            margin-top: 0.5rem;
-            padding: 0 0.2rem;
+            align-items: center;
+            width: 100%;
         }
-        .player-controls {
+
+        .audio-left-group, .audio-center-group, .audio-right-group {
             display: flex;
-            justify-content: center;
             align-items: center;
-            gap: 0.8rem;
-            margin-top: 1.5rem;
+            gap: 0.5rem;
         }
-        .player-controls .ctrl-button {
-            background: var(--player-control-bg);
-            border: 1px solid var(--panel-border);
+
+        .audio-center-group {
+            gap: 1.5rem; /* More space for main controls */
+        }
+
+        .audio-controls-bottom button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 8px;
             border-radius: 50%;
-            width: 50px;
-            height: 50px;
             display: flex;
             align-items: center;
             justify-content: center;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            color: var(--player-control-icon);
+            transition: background-color 0.2s, transform 0.2s;
+            color: var(--text-secondary);
         }
-        .player-controls .ctrl-button:hover {
-            background-color: var(--accent-primary);
-            color: #fff;
-            border-color: var(--accent-primary);
-            transform: scale(1.1);
+        .audio-controls-bottom button:hover {
+            background-color: var(--input-bg);
+            transform: scale(1.05);
+        }
+        .audio-controls-bottom button:active {
+            transform: scale(0.95);
         }
-        .player-controls .ctrl-button.play-pause {
-            width: 60px;
-            height: 60px;
+
+        .audio-controls-bottom button svg {
+            width: 24px;
+            height: 24px;
+            fill: currentColor;
+        }
+
+        /* Specific button styling */
+        .audio-play-pause-btn {
+            width: 50px;
+            height: 50px;
             background-color: var(--accent-primary);
             color: #fff;
-            border-color: var(--accent-primary-hover);
+            border-radius: 50%;
+            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
         }
-        .player-controls .ctrl-button.play-pause:hover {
+        .audio-play-pause-btn:hover {
             background-color: var(--accent-primary-hover);
+            transform: scale(1.08);
+            box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
         }
-        .player-controls .ctrl-button svg {
-            width: 24px;
-            height: 24px;
-        }
-        .player-controls .play-pause svg {
-            width: 30px;
-            height: 30px;
+        .audio-play-pause-btn:active {
+            transform: scale(0.95);
         }
-        #play-icon { display: block; }
-        #pause-icon { display: none; }
-        .player-settings {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            position: absolute;
-            left: 2rem;
+        .audio-play-pause-btn svg {
+            width: 32px;
+            height: 32px;
         }
-        .setting-button {
-            background-color: var(--player-control-bg);
-            border: 1px solid var(--panel-border);
-            color: var(--player-control-icon);
-            padding: 0.4rem 0.8rem;
-            border-radius: 20px;
-            font-size: 0.85em;
+
+        .audio-speed-btn {
+            font-family: var(--app-font);
+            font-size: 0.9em;
             font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.3rem;
-        }
-        .setting-button:hover {
-            background-color: var(--player-control-icon);
-            color: #fff;
+            background-color: var(--input-bg);
+            border: 1px solid var(--panel-border);
+            padding: 6px 12px;
+            border-radius: 8px;
+            min-width: 40px;
+            text-align: center;
+            color: var(--text-primary);
         }
-        .setting-button svg {
-            width: 18px;
-            height: 18px;
+        .audio-speed-btn:hover {
+            background-color: #EAF0F6;
+            border-color: var(--accent-primary);
         }
 
-        /* --- انیمیشن پردازش --- */
-        #loading-animation-wrapper { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; width: 100%; min-height: 150px; }
-        .orbital-loader { width: 110px; height: 110px; position: relative; animation: rotate-loader-orbital 10s linear infinite; }
-        .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(59, 130, 246, 0.25); border-radius: 50%; transform-origin: center center; }
-        .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: orbit-spin 2.8s linear infinite reverse; }
-        .orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; }
-        .orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; }
-        .orbit .satellite { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-primary); box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary); }
-        .orbit:nth-child(1) .satellite { top: -5px; left: 50%; animation: satellite-pulse-1 1.4s ease-in-out infinite alternate; }
-        .orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); animation: satellite-pulse-2 1.4s 0.2s ease-in-out infinite alternate; }
-        .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;}
-        @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        @keyframes satellite-pulse-1 { from { transform: scale(0.7) translateX(-50%); opacity: 0.6; } to { transform: scale(1.1) translateX(-50%); opacity: 1; } }
-        @keyframes satellite-pulse-2 { from { transform: scale(0.7) translateY(-50%); opacity: 0.6; } to { transform: scale(1.1) translateY(-50%); opacity: 1; } }
-        @keyframes satellite-pulse-3 { from { transform: scale(0.7) translateX(50%); opacity: 0.6; } to { transform: scale(1.1) translateX(50%); opacity: 1; } }
-        #loading-text { font-size: 1.2em; font-weight: 700; color: var(--text-primary); text-align: center; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-
+        /* Hide the default audio player */
+        #audio-player { display: none !important; }
     </style>
 </head>
 <body>
@@ -293,7 +779,6 @@
 
         <main class="main-content">
             <form id="tts-form">
-                <!-- Form fields from original code -->
                 <div class="form-group">
                     <label for="text-input">📝 متن مورد نظر شما</label>
                     <textarea id="text-input" rows="4" placeholder="متن خود را اینجا وارد کنید..."></textarea>
@@ -305,6 +790,7 @@
                     <label for="prompt-input">🗣️ توصیف سبک و لحن گفتار (اختیاری)</label>
                     <input type="text" id="prompt-input" placeholder="مثال: با لحنی رسمی و موقر، یا شاد و کودکانه">
                 </div>
+
                 <div class="form-group">
                     <label>🎤 انتخاب گوینده حرفه‌ای</label>
                     <div id="selected-speaker-display">
@@ -323,20 +809,23 @@
                         </button>
                     </div>
                 </div>
+
                 <div class="form-group">
                     <div class="label-with-info">
                         <label for="temperature-slider">🌡️ میزان خلاقیت و نوآوری صدا</label>
-                        <div class="info-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!</div>
+                        <div class="info-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!
+                        </div>
                     </div>
                     <div class="slider-container">
                         <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
                         <span id="temperature-value">0.9</span>
                     </div>
                 </div>
+
                 <button type="submit" id="generate-btn">✨ تولید صدا با آلفا</button>
             </form>
 
-            <div id="output-section" class="is-empty">
+            <div id="output-section">
                 <div id="status-message">صدای تولید شده در اینجا نمایش داده خواهد شد.</div>
                 <div id="loading-animation-wrapper">
                      <div class="orbital-loader">
@@ -346,73 +835,137 @@
                     </div>
                     <p id="loading-text">در حال پردازش هوشمند و تولید صدا...</p>
                 </div>
-                
-                <!-- NEW CUSTOM AUDIO PLAYER -->
-                <div id="custom-player-container">
-                    <div class="player-header">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V6.75A2.25 2.25 0 0 1 5.25 4.5h13.5A2.25 2.25 0 0 1 21 6.75v10.5A2.25 2.25 0 0 1 18.75 19.5H5.25A2.25 2.25 0 0 1 3 17.25ZM5.25 6A.75.75 0 0 0 4.5 6.75v10.5c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75V6.75a.75.75 0 0 0-.75-.75H5.25Z" /><path d="M9 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.5-4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm10.5 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.5-4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" /></svg>
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5a6 6 0 0 0-12 0v1.5a6 6 0 0 0 6 6Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M12 12.75v6.75a6.75 6.75 0 0 0 6.75-6.75V12a6.75 6.75 0 0 0-13.5 0v.75a6.75 6.75 0 0 0 6.75 6.75Z" /></svg>
-                        <span class="title">فایل صوتی</span>
-                    </div>
-                    <div class="waveform-container" id="waveform-container">
-                        <canvas id="waveform-canvas"></canvas>
-                    </div>
-                    <div class="player-timestamps">
-                        <span id="current-time">0:00</span>
-                        <span id="total-duration">0:00</span>
+
+                <!-- Custom Audio Player Structure -->
+                <div id="audio-player-wrapper" style="display: none;">
+                    <div class="audio-player-header">
+                        <div class="audio-player-icons">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-headphones"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
+                        </div>
+                        <span class="audio-player-title">فایل صوتی</span>
                     </div>
-                    <div class="player-controls">
-                        <div class="player-settings">
-                            <button class="setting-button" id="volume-btn" aria-label="قطع و وصل صدا">
-                                <svg id="volume-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.66 1.905H6.44l4.5 4.5c.944.945 2.56.276 2.56-1.06V4.06Z" /></svg>
-                                <svg id="mute-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="display: none;"><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.66 1.905H6.44l4.5 4.5c.944.945 2.56.276 2.56-1.06V4.06ZM17.28 12a.75.75 0 0 1 0 1.06l-2.12 2.12a.75.75 0 1 1-1.06-1.06l2.12-2.12 2.12 2.12a.75.75 0 1 1-1.06 1.06L17.28 12l-2.12 2.12a.75.75 0 0 1-1.06-1.06l2.12-2.12-2.12-2.12a.75.75 0 1 1 1.06-1.06l2.12 2.12Z" /></svg>
-                            </button>
-                            <button class="setting-button" id="speed-btn" aria-label="تغییر سرعت پخش">1x</button>
+                    <div id="custom-audio-player">
+                        <div class="audio-waveform-wrapper">
+                            <span class="audio-time audio-current-time">0:00</span>
+                            <div class="audio-waveform-display">
+                                <div class="audio-progress-fill"></div>
+                            </div>
+                            <span class="audio-time audio-total-time">0:00</span>
+                        </div>
+                        <div class="audio-controls-bottom">
+                            <div class="audio-left-group">
+                                <button class="audio-volume-btn">
+                                    <svg viewBox="0 0 24 24" class="volume-high-icon"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></svg>
+                                    <svg viewBox="0 0 24 24" class="volume-mute-icon" style="display:none;"><path d="M7 9v6h4l5 5V4L11 9H7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zM19 12c0 .94-.23 1.82-.68 2.6L19 14.88c.45-.88.7-1.88.7-2.88 0-4.01-2.99-7.14-7-8.05v2.06c2.89.86 5 3.54 5 6.71zM4.55 4L2 6.55 9.45 14H7v6h4l5 5V14.55l4.05 4.05L22 18 12 8 4.55 4z"></path></svg>
+                                </button>
+                                <button class="audio-speed-btn">1x</button>
+                            </div>
+                            <div class="audio-center-group">
+                                <button class="audio-skip-backward-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg>
+                                </button>
+                                <button class="audio-play-pause-btn">
+                                    <svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg>
+                                    <svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
+                                </button>
+                                <button class="audio-skip-forward-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg>
+                                </button>
+                            </div>
+                            <div class="audio-right-group"></div>
                         </div>
-
-                        <button class="ctrl-button" id="rewind-btn" aria-label="۵ ثانیه عقب">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.53 2.47a.75.75 0 0 1 0 1.06L4.81 8.25H15a6.75 6.75 0 0 1 0 13.5h-3a.75.75 0 0 1 0-1.5h3a5.25 5.25 0 1 0 0-10.5H4.81l4.72 4.72a.75.75 0 1 1-1.06 1.06l-6-6a.75.75 0 0 1 0-1.06l6-6a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" /></svg>
-                        </button>
-                        <button class="ctrl-button play-pause" id="play-pause-btn" aria-label="پخش">
-                            <svg id="play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.647c1.295.748 1.295 2.536 0 3.284L7.279 20.99c-1.25.72-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>
-                            <svg id="pause-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75Zm9 0a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" /></svg>
-                        </button>
-                        <button class="ctrl-button" id="forward-btn" aria-label="۵ ثانیه جلو">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M14.47 2.47a.75.75 0 0 1 1.06 0l6 6a.75.75 0 0 1 0 1.06l-6 6a.75.75 0 1 1-1.06-1.06L19.19 8.25H9a6.75 6.75 0 0 0 0 13.5h3a.75.75 0 0 1 0 1.5H9a5.25 5.25 0 0 1 0-10.5h10.19l-4.72 4.72a.75.75 0 1 1-1.06-1.06l6-6Z" clip-rule="evenodd" /></svg>
-                        </button>
                     </div>
                 </div>
-                <audio id="audio-player" style="display: none;"></audio>
+                <audio id="hidden-audio-player" style="display: none;"></audio>
             </div>
         </main>
     </div>
 
-    <!-- Modals from original code -->
-    <div id="speaker-modal" class="modal-overlay"> <div class="modal-dialog"> <div class="modal-header"> <h2>گالری گویندگان آلفا نوا</h2> <button type="button" class="close-modal-btn" data-modal-id="speaker-modal" aria-label="بستن مودال">×</button> </div> <div id="speaker-grid"></div> </div> </div>
-    <div id="info-modal" class="modal-overlay"> <div class="modal-dialog"> <div class="modal-header"> <h2>🌡️ خلاقیت و نوآوری صدا</h2> <button type="button" class="close-modal-btn" data-modal-id="info-modal" aria-label="بستن توضیحات">×</button> </div> <div id="info-modal-content"> <p>این تنظیم مشخص می‌کند که هوش مصنوعی تا چه حد در تولید صدا <strong>خلاقیت</strong> به خرج دهد.</p> <p><strong>مقادیر بالاتر:</strong> منجر به صدایی متنوع‌تر، پویاتر و گاهی اوقات غیرمنتظره‌تر می‌شود. مناسب برای زمانی که به دنبال لحنی خاص و منحصربه‌فرد هستید.</p> <p><strong>مقادیر پایین‌تر:</strong> صدایی پایدارتر، قابل پیش‌بینی‌تر و نزدیک‌تر به صدای استاندارد گوینده تولید می‌کند. مناسب برای خوانش متون رسمی یا زمانی که ثبات لحن اهمیت دارد.</p> <span class="range-info">محدوده پیشنهادی: ۰.۱ (پایدار) تا ۱.۵ (بسیار خلاق)</span> </div> </div> </div>
+    <!-- مودال گالری گویندگان -->
+    <div id="speaker-modal" class="modal-overlay">
+        <div class="modal-dialog">
+            <div class="modal-header">
+                <h2>گالری گویندگان آلفا نوا</h2>
+                <button type="button" class="close-modal-btn" data-modal-id="speaker-modal" aria-label="بستن مودال">×</button>
+            </div>
+            <div id="speaker-grid">
+                <!-- Speaker cards will be generated here by JS -->
+            </div>
+        </div>
+    </div>
+
+    <!-- مودال اطلاعات خلاقیت صدا -->
+    <div id="info-modal" class="modal-overlay">
+        <div class="modal-dialog">
+            <div class="modal-header">
+                <h2>🌡️ خلاقیت و نوآوری صدا</h2>
+                <button type="button" class="close-modal-btn" data-modal-id="info-modal" aria-label="بس��ن توضیحات">×</button>
+            </div>
+            <div id="info-modal-content">
+                <p>این تنظیم مشخص می‌کند که هوش مصنوعی تا چه حد در تولید صدا <strong>خلاقیت</strong> به خرج دهد.</p>
+                <p><strong>مقادیر بالاتر:</strong> منجر به صدایی متنوع‌تر، پویاتر و گاهی اوقات غیرمنتظره‌تر می‌شود. مناسب برای زمانی که به دنبال لحنی خاص و منحصربه‌فرد هستید.</p>
+                <p><strong>مقادیر پایین‌تر:</strong> صدایی پایدارتر، قابل پیش‌بینی‌تر و نزدیک‌تر به صدای استاندارد گوینده تولید می‌کند. مناسب برای خوانش متون رسمی یا زمانی که ثبات لحن اهمیت دارد.</p>
+                <span class="range-info">محدوده پیشنهادی: ۰.۱ (پایدار) تا ۱.۵ (بسیار خلاق)</span>
+            </div>
+        </div>
+    </div>
+
+
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
 
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // --- CONSTANTS AND CONFIG ---
             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_CHARS = 50000;
-            const speakers = [ { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا" }, { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین" }, { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی" }, { id: "Zubenelgenubi", name: "رویا (زن)", desc: "گرم و صمیمی" }, { id: "Vindemiatrix", name: "کیان (مرد)", desc: "باوقار و رسمی" }, { id: "Sadachbia", name: "پریسا (زن)", desc: "شاداب و پویا" }, { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار" }, { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین" }, { id: "Laomedeia", name: "سهیل (مرد)", desc: "دوستانه و گیرا" }, { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح" }, { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ" }, { id: "Schedar", name: "نگار (زن)", desc: "مهربان و شیرین" }, { id: "Gacrux", name: "فرید (مرد)", desc: "پخته و قابل اعتماد" }, { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن" }, { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت" }, { id: "Algieba", name: "آناهیتا (زن)", desc: "با اصالت و شیک" }, { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی" }, { id: "Erinome", name: "رسا (مرد)", desc: "شفاف و گویا" }, { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت" }, { id: "Rasalthgeti", name: "الهه (زن)", desc: "اسرارآمیز و فریبنده" }, { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان" }, { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ" }, { id: "Callirrhoe", name: "نیما (مرد)", desc: "روایتگر و قصه‌گو" }, { id: "Autonoe", name: "هستی (زن)", desc: "طبیعی و خودمانی" }, { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی" }, { id: "Iapetus", name: "ستاره (زن)", desc: "درخشان و گیرا" }, { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده" }, { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش" }, { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک" }, { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار" } ];
-            
-            // --- DOM ELEMENTS ---
+
+            const speakers = [
+                { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا" },
+                { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین" },
+                { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی" },
+                { id: "Zubenelgenubi", name: "رویا (زن)", desc: "گرم و صمیمی" },
+                { id: "Vindemiatrix", name: "کیان (مرد)", desc: "باوقار و رسمی" },
+                { id: "Sadachbia", name: "پریسا (زن)", desc: "شاداب و پویا" },
+                { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار" },
+                { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین" },
+                { id: "Laomedeia", name: "سهیل (مرد)", desc: "دوستانه و گیرا" },
+                { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح" },
+                { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ" },
+                { id: "Schedar", name: "نگار (زن)", desc: "مهربان و شیرین" },
+                { id: "Gacrux", name: "فرید (مرد)", desc: "پخته و قابل اعتماد" },
+                { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن" },
+                { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت" },
+                { id: "Algieba", name: "آناهیتا (زن)", desc: "با اصالت و شیک" },
+                { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی" },
+                { id: "Erinome", name: "رسا (مرد)", desc: "شفاف و گویا" },
+                { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت" },
+                { id: "Rasalthgeti", name: "الهه (زن)", desc: "اسرارآمیز و فریبنده" },
+                { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان" },
+                { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ" },
+                { id: "Callirrhoe", name: "نیما (مرد)", desc: "روایتگر و قصه‌گو" },
+                { id: "Autonoe", name: "هستی (زن)", desc: "طبیعی و خودمانی" },
+                { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی" },
+                { id: "Iapetus", name: "ستاره (زن)", desc: "درخشان و گیرا" },
+                { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده" },
+                { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش" },
+                { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک" },
+                { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار" }
+            ];
+
             const form = document.getElementById('tts-form');
             const textInput = document.getElementById('text-input');
             const promptInput = document.getElementById('prompt-input');
             const tempSlider = document.getElementById('temperature-slider');
             const tempValueSpan = document.getElementById('temperature-value');
             const generateBtn = document.getElementById('generate-btn');
+
             const outputSection = document.getElementById('output-section');
             const statusMessage = document.getElementById('status-message');
             const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper');
+
             const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
             const changeSpeakerBtn = document.getElementById('change-speaker-btn');
             const selectedSpeakerCard = document.getElementById('selected-speaker-card');
@@ -420,56 +973,62 @@
             const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img');
             const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name');
             const selectedSpeakerDescDisplay = document.getElementById('selected-speaker-desc');
-            const charCountSpan = document.getElementById('char-count');
-            const charMaxSpan = document.getElementById('char-max');
 
             // Modal Elements
             const speakerModal = document.getElementById('speaker-modal');
             const infoModal = document.getElementById('info-modal');
             const tempInfoIcon = document.getElementById('temp-info-icon');
 
-            // --- NEW CUSTOM PLAYER ELEMENTS ---
-            const customPlayerContainer = document.getElementById('custom-player-container');
-            const audioPlayer = document.getElementById('audio-player');
-            const waveformCanvas = document.getElementById('waveform-canvas');
-            const waveformContainer = document.getElementById('waveform-container');
-            const playPauseBtn = document.getElementById('play-pause-btn');
-            const playIcon = document.getElementById('play-icon');
-            const pauseIcon = document.getElementById('pause-icon');
-            const currentTimeEl = document.getElementById('current-time');
-            const totalDurationEl = document.getElementById('total-duration');
-            const rewindBtn = document.getElementById('rewind-btn');
-            const forwardBtn = document.getElementById('forward-btn');
-            const volumeBtn = document.getElementById('volume-btn');
-            const volumeIcon = document.getElementById('volume-icon');
-            const muteIcon = document.getElementById('mute-icon');
-            const speedBtn = document.getElementById('speed-btn');
-
-            // --- PLAYER STATE ---
-            let audioContext;
-            let waveformData = [];
-            const playbackSpeeds = [1, 1.5, 2];
-            let currentSpeedIndex = 0;
-
-            // --- INITIALIZATION & EVENT LISTENERS ---
-            
+            // --- Custom Audio Player Elements ---
+            const hiddenAudioPlayer = document.getElementById('hidden-audio-player');
+            const audioPlayerWrapper = document.getElementById('audio-player-wrapper'); // New wrapper for header + player
+            const audioCurrentTimeSpan = audioPlayerWrapper.querySelector('.audio-current-time');
+            const audioTotalTimeSpan = audioPlayerWrapper.querySelector('.audio-total-time');
+            const audioProgressFill = audioPlayerWrapper.querySelector('.audio-progress-fill');
+            const playPauseBtn = audioPlayerWrapper.querySelector('.audio-play-pause-btn');
+            const playIcon = playPauseBtn.querySelector('.play-icon');
+            const pauseIcon = playPauseBtn.querySelector('.pause-icon');
+            const skipBackwardBtn = audioPlayerWrapper.querySelector('.audio-skip-backward-btn');
+            const skipForwardBtn = audioPlayerWrapper.querySelector('.audio-skip-forward-btn');
+            const volumeBtn = audioPlayerWrapper.querySelector('.audio-volume-btn');
+            const volumeHighIcon = volumeBtn.querySelector('.volume-high-icon');
+            const volumeMuteIcon = volumeBtn.querySelector('.volume-mute-icon');
+            const speedBtn = audioPlayerWrapper.querySelector('.audio-speed-btn');
+
+            let currentPlaybackSpeedIndex = 0;
+            const playbackSpeeds = [1.0, 1.25, 1.5, 1.75, 2.0, 0.75, 0.5]; // Common speeds
+
             // Character Counter
+            const charCountSpan = document.getElementById('char-count');
+            const charMaxSpan = document.getElementById('char-max');
+            const MAX_CHARS = 50000;
             charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
+
             textInput.addEventListener('input', () => {
                 const currentLength = textInput.value.length;
                 charCountSpan.textContent = currentLength.toLocaleString('fa-IR');
-                charCountSpan.style.color = currentLength > MAX_CHARS ? 'var(--accent-secondary-hover)' : 'var(--accent-primary)';
+                if (currentLength > MAX_CHARS) {
+                    charCountSpan.style.color = 'var(--accent-secondary-hover)';
+                } else {
+                    charCountSpan.style.color = 'var(--accent-primary)';
+                }
             });
 
-            // --- SPEAKER SELECTION LOGIC ---
-            function getSpeakerById(id) { return speakers.find(s => s.id === id) || speakers[0]; }
+
+            function getSpeakerById(id) {
+                return speakers.find(s => s.id === id) || speakers[0];
+            }
+
             function getImageUrl(speaker, index, size = 'thumb') {
                 const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
-                const imageIndex = (index * 7 + speaker.id.length * 3 + 5) % 100;
+                // A more deterministic way to get images while still being "random-like" for examples
+                const imageSeed = speaker.id.charCodeAt(0) + speaker.id.length + index;
+                const imageIndex = (imageSeed * 7 + 5) % 100;
                 let portraitSizePath = 'thumb/';
                 if (size === 'large') portraitSizePath = '';
                 return `https://randomuser.me/api/portraits/${portraitSizePath}${gender}/${imageIndex}.jpg`;
             }
+
             function updateSelectedSpeakerDisplay(speakerId) {
                 const speaker = getSpeakerById(speakerId);
                 const speakerIndex = speakers.findIndex(s => s.id === speaker.id);
@@ -479,6 +1038,7 @@
                 selectedSpeakerDescDisplay.textContent = speaker.desc || "گوینده منتخب شما";
                 selectedSpeakerIdStorage.value = speaker.id;
             }
+
             function createSpeakerCardsInModal() {
                 speakerGridInModal.innerHTML = '';
                 speakers.forEach((speaker, index) => {
@@ -495,8 +1055,8 @@
                     `;
                     cardLabel.addEventListener('click', (e) => {
                         if (e.target.name !== "modal_speaker_selection") {
-                            const radio = cardLabel.querySelector('input[type="radio"]');
-                            if(radio) radio.checked = true;
+                             const radio = cardLabel.querySelector('input[type="radio"]');
+                             if(radio) radio.checked = true;
                         }
                         updateSelectedSpeakerDisplay(speaker.id);
                         hideModal(speakerModal);
@@ -505,190 +1065,187 @@
                 });
             }
 
-            // --- MODAL MANAGEMENT ---
+            // --- Modal Management ---
             function showModal(modalElement) {
                 modalElement.classList.add('visible');
                 setTimeout(() => {
-                    const firstFocusable = modalElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                    if (firstFocusable) firstFocusable.focus();
+                     const firstFocusable = modalElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                     if (firstFocusable) firstFocusable.focus();
                 }, 50);
             }
+
             function hideModal(modalElement) {
                 modalElement.classList.add('hiding');
                 modalElement.addEventListener('animationend', () => {
                     modalElement.classList.remove('visible', 'hiding');
                 }, { once: true });
             }
-            changeSpeakerBtn.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); });
-            selectedSpeakerCard.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); });
-            tempInfoIcon.addEventListener('click', () => showModal(info-modal));
-            tempInfoIcon.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); showModal(infoModal); } });
-            document.querySelectorAll('.modal-overlay').forEach(overlay => { overlay.addEventListener('click', (e) => { if (e.target === overlay) { hideModal(overlay); } }); });
-            document.querySelectorAll('.close-modal-btn').forEach(button => { button.addEventListener('click', () => { const modalId = button.dataset.modalId; if (modalId) { hideModal(document.getElementById(modalId)); } }); });
-            document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { document.querySelectorAll('.modal-overlay.visible').forEach(hideModal); } });
-            
-            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
 
-            // --- UI STATE MANAGEMENT ---
-            function showLoadingState() {
-                outputSection.classList.remove('has-content', 'is-empty');
-                statusMessage.style.display = 'none';
-                customPlayerContainer.style.display = 'none';
-                loadingAnimationWrapper.style.display = 'flex';
-                generateBtn.disabled = true;
-                generateBtn.innerHTML = `
-                    <svg aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101" style="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>
-                    در حال پردازش...
-                `;
-            }
+            // Speaker Modal Listeners
+            changeSpeakerBtn.addEventListener('click', () => {
+                createSpeakerCardsInModal();
+                showModal(speakerModal);
+            });
+            selectedSpeakerCard.addEventListener('click', () => {
+                createSpeakerCardsInModal();
+                showModal(speakerModal);
+            });
 
-            function showResultState(isSuccess, message = '') {
-                loadingAnimationWrapper.style.display = 'none';
-                if (isSuccess) {
-                    customPlayerContainer.style.display = 'block';
-                    outputSection.classList.add('has-content');
-                    outputSection.classList.remove('is-empty');
-                } else {
-                    statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
-                    statusMessage.style.display = 'block';
-                    outputSection.classList.remove('has-content');
-                    outputSection.classList.add('is-empty');
+            // Info Modal Listener
+            tempInfoIcon.addEventListener('click', () => showModal(infoModal));
+            tempInfoIcon.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    showModal(infoModal);
                 }
-                generateBtn.disabled = false;
-                generateBtn.innerHTML = '✨ تولید صدا با آلفا';
-            }
+            });
+
+
+            // General Modal Close Listeners (for all modals)
+            document.querySelectorAll('.modal-overlay').forEach(overlay => {
+                overlay.addEventListener('click', (e) => {
+                    if (e.target === overlay) {
+                        hideModal(overlay);
+                    }
+                });
+            });
+            document.querySelectorAll('.close-modal-btn').forEach(button => {
+                button.addEventListener('click', () => {
+                    const modalId = button.dataset.modalId;
+                    if (modalId) {
+                        hideModal(document.getElementById(modalId));
+                    }
+                });
+            });
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    document.querySelectorAll('.modal-overlay.visible').forEach(hideModal);
+                }
+            });
+
+
+            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
+
+
+            // --- Custom Audio Player Functionality ---
 
-            // --- AUDIO PROCESSING & WAVEFORM DRAWING ---
+            // Helper function to format time (e.g., 0:06)
             function formatTime(seconds) {
+                if (isNaN(seconds) || seconds < 0) return '0:00';
                 const minutes = Math.floor(seconds / 60);
-                const secs = Math.floor(seconds % 60);
-                return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
+                const remainingSeconds = Math.floor(seconds % 60);
+                return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
             }
 
-            async function processAudioForWaveform(url) {
-                if (!window.AudioContext) {
-                    console.warn("Web Audio API not supported. Cannot draw waveform.");
-                    return;
-                }
-                audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                try {
-                    const response = await fetch(url);
-                    const arrayBuffer = await response.arrayBuffer();
-                    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-                    
-                    const rawData = audioBuffer.getChannelData(0);
-                    const samples = 120; // Number of bars in waveform
-                    const blockSize = Math.floor(rawData.length / samples);
-                    const filteredData = [];
-                    for (let i = 0; i < samples; i++) {
-                        let blockStart = blockSize * i;
-                        let sum = 0;
-                        for (let j = 0; j < blockSize; j++) {
-                            sum += Math.abs(rawData[blockStart + j]);
-                        }
-                        filteredData.push(sum / blockSize);
-                    }
-                    
-                    const multiplier = Math.pow(Math.max(...filteredData), -1);
-                    waveformData = filteredData.map(n => n * multiplier);
-                    
-                    drawWaveform();
-                } catch (error) {
-                    console.error("Error processing audio for waveform:", error);
-                    waveformData = []; // Clear data on error
+            // Update custom player UI (play/pause icon, time, progress)
+            function updatePlayerUI() {
+                if (hiddenAudioPlayer.paused || hiddenAudioPlayer.ended) {
+                    playIcon.style.display = 'block';
+                    pauseIcon.style.display = 'none';
+                } else {
+                    playIcon.style.display = 'none';
+                    pauseIcon.style.display = 'block';
                 }
-            }
 
-            function drawWaveform() {
-                const canvas = waveformCanvas;
-                const ctx = canvas.getContext('2d');
-                const dpr = window.devicePixelRatio || 1;
-                const rect = canvas.getBoundingClientRect();
-
-                canvas.width = rect.width * dpr;
-                canvas.height = rect.height * dpr;
-                ctx.scale(dpr, dpr);
-
-                const width = canvas.width / dpr;
-                const height = canvas.height / dpr;
-                const barWidth = 3;
-                const gap = 2;
-                const numBars = Math.floor(width / (barWidth + gap));
-
-                ctx.clearRect(0, 0, width, height);
-
-                const progress = audioPlayer.currentTime / audioPlayer.duration;
-                const progressIndex = Math.floor(waveformData.length * progress);
-                
-                waveformData.forEach((value, i) => {
-                    const barHeight = value * height * 0.9;
-                    const x = i * (barWidth + gap);
-                    const y = (height - barHeight) / 2;
-
-                    ctx.fillStyle = i < progressIndex ? 'var(--waveform-progress)' : 'var(--waveform-bg)';
-                    ctx.fillRect(x, y, barWidth, barHeight);
-                });
-            }
+                const currentTime = hiddenAudioPlayer.currentTime;
+                const duration = hiddenAudioPlayer.duration;
 
+                audioCurrentTimeSpan.textContent = formatTime(currentTime);
 
-            // --- CUSTOM PLAYER CONTROLS ---
-            playPauseBtn.addEventListener('click', () => {
-                if (audioPlayer.paused) {
-                    audioPlayer.play();
+                if (isFinite(duration) && duration > 0) {
+                    audioTotalTimeSpan.textContent = formatTime(duration);
+                    const progress = (currentTime / duration) * 100;
+                    audioProgressFill.style.width = `${progress}%`;
                 } else {
-                    audioPlayer.pause();
+                    audioTotalTimeSpan.textContent = '0:00';
+                    audioProgressFill.style.width = '0%';
                 }
-            });
-
-            audioPlayer.addEventListener('play', () => {
-                playIcon.style.display = 'none';
-                pauseIcon.style.display = 'block';
-                playPauseBtn.setAttribute('aria-label', 'توقف');
-            });
-            
-            audioPlayer.addEventListener('pause', () => {
-                playIcon.style.display = 'block';
-                pauseIcon.style.display = 'none';
-                playPauseBtn.setAttribute('aria-label', 'پخش');
-            });
+            }
 
-            audioPlayer.addEventListener('timeupdate', () => {
-                currentTimeEl.textContent = formatTime(audioPlayer.currentTime);
-                if (waveformData.length > 0) {
-                    requestAnimationFrame(drawWaveform);
+            // Event Listeners for Custom Player Controls
+            playPauseBtn.addEventListener('click', () => {
+                if (hiddenAudioPlayer.paused) {
+                    hiddenAudioPlayer.play();
+                } else {
+                    hiddenAudioPlayer.pause();
                 }
             });
 
-            audioPlayer.addEventListener('loadedmetadata', () => {
-                totalDurationEl.textContent = formatTime(audioPlayer.duration);
+            skipBackwardBtn.addEventListener('click', () => {
+                hiddenAudioPlayer.currentTime = Math.max(0, hiddenAudioPlayer.currentTime - 10); // Skip 10 seconds back
             });
-            
-            waveformContainer.addEventListener('click', (e) => {
-                const rect = waveformContainer.getBoundingClientRect();
-                const clickPosition = (e.clientX - rect.left) / rect.width;
-                audioPlayer.currentTime = clickPosition * audioPlayer.duration;
+
+            skipForwardBtn.addEventListener('click', () => {
+                hiddenAudioPlayer.currentTime = Math.min(hiddenAudioPlayer.duration, hiddenAudioPlayer.currentTime + 10); // Skip 10 seconds forward
             });
-            
-            rewindBtn.addEventListener('click', () => { audioPlayer.currentTime -= 5; });
-            forwardBtn.addEventListener('click', () => { audioPlayer.currentTime += 5; });
 
             volumeBtn.addEventListener('click', () => {
-                audioPlayer.muted = !audioPlayer.muted;
-                volumeIcon.style.display = audioPlayer.muted ? 'none' : 'block';
-                muteIcon.style.display = audioPlayer.muted ? 'block' : 'none';
+                if (hiddenAudioPlayer.muted) {
+                    hiddenAudioPlayer.muted = false;
+                    volumeHighIcon.style.display = 'block';
+                    volumeMuteIcon.style.display = 'none';
+                } else {
+                    hiddenAudioPlayer.muted = true;
+                    volumeHighIcon.style.display = 'none';
+                    volumeMuteIcon.style.display = 'block';
+                }
             });
-            
+
             speedBtn.addEventListener('click', () => {
-                currentSpeedIndex = (currentSpeedIndex + 1) % playbackSpeeds.length;
-                const newSpeed = playbackSpeeds[currentSpeedIndex];
-                audioPlayer.playbackRate = newSpeed;
+                currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length;
+                const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex];
+                hiddenAudioPlayer.playbackRate = newSpeed;
                 speedBtn.textContent = `${newSpeed}x`;
             });
-            
-            // --- MAIN GENERATION LOGIC ---
+
+            // Listen to hidden audio player events to update UI
+            hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI);
+            hiddenAudioPlayer.addEventListener('loadedmetadata', updatePlayerUI);
+            hiddenAudioPlayer.addEventListener('play', updatePlayerUI);
+            hiddenAudioPlayer.addEventListener('pause', updatePlayerUI);
+            hiddenAudioPlayer.addEventListener('ended', () => {
+                hiddenAudioPlayer.currentTime = 0; // Reset to start
+                updatePlayerUI();
+            });
+
+            // --- State Management Functions ---
+            function showLoadingState() {
+                audioPlayerWrapper.style.display = 'none'; // Hide custom player
+                outputSection.classList.remove('has-content'); // Remove has-content class
+                statusMessage.style.display = 'none';
+                loadingAnimationWrapper.style.display = 'flex';
+                generateBtn.disabled = true;
+                generateBtn.innerHTML = `
+                    <svg aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101" style="display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em; vertical-align: middle; animation: spin 1s linear infinite;">
+                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
+                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0492C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/>
+                    </svg>
+                    در حال پردازش...
+                `;
+            }
+
+            function showResultState(isSuccess, message = '') {
+                loadingAnimationWrapper.style.display = 'none';
+                if (isSuccess) {
+                    statusMessage.style.display = 'none';
+                    audioPlayerWrapper.style.display = 'flex'; // Show custom player wrapper
+                    outputSection.classList.add('has-content'); // Add class to output section parent
+
+                    // Ensure play/pause button is in correct state, and audio starts playing
+                    updatePlayerUI();
+                    hiddenAudioPlayer.play();
+                } else {
+                    statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
+                    statusMessage.style.display = 'block';
+                    audioPlayerWrapper.style.display = 'none'; // Hide custom player wrapper
+                    outputSection.classList.remove('has-content'); // Remove class
+                    hiddenAudioPlayer.pause(); // Stop any potential audio
+                    hiddenAudioPlayer.src = ''; // Clear audio source
+                }
+                generateBtn.disabled = false;
+                generateBtn.innerHTML = '✨ تولید صدا با آلفا';
+            }
+
             async function generateAudio(event) {
                 event.preventDefault();
                 showLoadingState();
@@ -703,41 +1260,65 @@
                     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, promptInput.value, selectedSpeakerIdStorage.value, parseFloat(tempSlider.value)],
+                    data: [false, null, text, promptVal, selectedSpeakerVal, temperatureVal],
                     event_data: null,
-                    session_hash: Math.random().toString(36).substring(2)
+                    session_hash: sessionHash
                 };
 
                 try {
                     const joinQueueResponse = await fetch(JOIN_QUEUE_URL, {
-                        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify(payload)
                     });
-                    if (!joinQueueResponse.ok) throw new Error(`خطا در ارتباط با سرویس (${joinQueueResponse.status})`);
-                    
+
+                    if (!joinQueueResponse.ok) {
+                         const errorBody = await joinQueueResponse.text();
+                         console.error("Join Queue Error Body:", errorBody);
+                         throw new Error(`خطا در برقراری ارتباط با سرویس آلفا (${joinQueueResponse.status}). لطفا لحظاتی دیگر تلاش کنید.`);
+                    }
+
                     let finalFilePath = null;
                     const startTime = Date.now();
                     const timeoutDuration = 90000;
 
                     while (Date.now() - startTime < timeoutDuration) {
-                        const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${payload.session_hash}`);
-                        if (!dataResponse.ok) throw new Error(`خطا در دریافت داده (${dataResponse.status})`);
+                        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;
-                            const data = JSON.parse(line.substring(5));
-                            if (data.msg === 'process_completed') {
-                                if (data.success && data.output.data?.[0]?.path) {
-                                    finalFilePath = data.output.data[0].path;
-                                } else {
-                                    throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.');
+                            try {
+                                const data = JSON.parse(line.substring(5));
+                                if (data.msg === 'process_generating' || data.msg === 'process_starts') {
+                                    // console.log("Processing:", data.output?.progress_data?.[0]?.desc || data.msg);
+                                } else if (data.msg === 'process_completed') {
+                                    if (data.success && data.output.data && data.output.data[0] && (data.output.data[0].name || data.output.data[0].path)) {
+                                        finalFilePath = data.output.data[0].name || data.output.data[0].path;
+                                    } else {
+                                        console.error("Invalid server response structure or unsuccessful processing:", data);
+                                        throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.');
+                                    }
+                                    break;
+                                } else if (data.msg === 'queue_full') {
+                                    throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.');
                                 }
-                                break;
-                            } else if (data.msg === 'queue_full') {
-                                throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.');
+                            } catch (e) {
+                                console.warn("Error parsing JSON from stream:", e, "Line:", line);
                             }
                         }
                         if (finalFilePath) break;
@@ -746,13 +1327,12 @@
 
                     if (finalFilePath) {
                         const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
-                        audioPlayer.src = audioUrl;
-                        await processAudioForWaveform(audioUrl); // Process for waveform
+                        hiddenAudioPlayer.src = audioUrl;
                         showResultState(true);
                     } else if (Date.now() - startTime >= timeoutDuration) {
                         throw new Error('پردازش بیش از حد طول کشید و متوقف شد.');
                     } else {
-                        throw new Error('فایل صوتی از سرور دریافت نشد.');
+                         throw new Error('فایل صوتی از سرور دریافت نشد یا پردازش ناموفق بود.');
                     }
 
                 } catch (error) {
@@ -760,15 +1340,16 @@
                     showResultState(false, `${error.message}`);
                 }
             }
-            
-            // --- FINAL SETUP ---
+
+            // Initial setup
             updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
             form.addEventListener('submit', generateAudio);
-            window.addEventListener('resize', () => { if (waveformData.length > 0) drawWaveform(); });
-            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);
+
+            // Hide custom audio player and show status message on load
+            audioPlayerWrapper.style.display = 'none';
+            statusMessage.style.display = 'block';
+            loadingAnimationWrapper.style.display = 'none';
+            outputSection.classList.remove('has-content'); // Ensure initial state is clean
         });
     </script>
 </body>