Update index.html

index.html

@@ -13,10 +13,10 @@
             --panel-bg: #FFFFFF;
             --panel-border: #E8EEF3;
             --text-primary: #121826;
-            --text-secondary: #5C677D;
-            --accent-primary: #3B82F6;
+            --text-secondary: #5C677D; /* Main grey for secondary text and icons */
+            --accent-primary: #3B82F6; /* Blue for highlights */
             --accent-primary-hover: #2563EB;
-            --accent-secondary: #10B981;
+            --accent-secondary: #10B981; /* Green for success/other highlights */
             --accent-secondary-hover: #059669;
             --input-bg: #F8FAFC;
             --input-border-focus: var(--accent-primary);
@@ -30,8 +30,9 @@
             --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-active: #3B82F6; /* Blue for active part of waveform */
             --waveform-color-inactive: #D0D9E6; /* Lighter shade for inactive part of waveform */
+            --waveform-dashed-line-color: #E0E4E9; /* Very light grey for the dashed line */
         }
 
         @keyframes fadeInDown {
@@ -292,7 +293,7 @@
 
 
         /* --- مودال گالری گویندگان (اختصاصی) --- */
-        #speaker-modal .modal-dialog { /* Target specific modal dialog */
+        #speaker-modal .modal-dialog {
             max-width: 700px;
             max-height: 85vh; overflow-y: auto;
         }
@@ -456,7 +457,7 @@
              vertical-align: middle;
         }
 
-        /* --- Output Section (now a container for status/loading/player) --- */
+        /* --- Output Section (now the card container for status/loading/player) --- */
         #output-section {
             margin-top: 3rem;
             display: flex;
@@ -464,28 +465,23 @@
             justify-content: center;
             flex-direction: column;
             gap: 1.5rem;
-            min-height: 200px;
+            min-height: 200px; /* Default height for empty/loading state */
             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);
+            padding: 2rem; /* Default padding for status/loading */
+            background-color: var(--input-bg); /* Default background for empty/loading */
             border-radius: var(--radius-card);
             border: 2px dashed var(--panel-border);
             box-shadow: var(--shadow-subtle) inset;
-            width: 100%;
-            box-sizing: border-box;
+            transition: var(--transition-smooth), border-color 0.5s, box-shadow 0.5s;
         }
-        /* When output section has content (the player), remove its own styling */
+        /* When output section has content (the player), remove its own styling and apply new */
         #output-section.has-content {
-            background-color: transparent;
-            border: none;
-            box-shadow: none;
-            padding: 0; /* Player wrapper will handle padding */
+            background-color: var(--panel-bg); /* Solid white background like the image */
+            border-style: solid; /* Solid border for active state */
+            border-color: var(--panel-border); /* Standard border */
+            box-shadow: var(--shadow-medium); /* Nicer shadow for active state */
+            padding: 0; /* No padding on the main output-section, inner div handles it */
             min-height: auto; /* Shrink to fit player content */
         }
         #output-section.has-content #status-message,
@@ -559,215 +555,206 @@
         }
 
         /* --- Custom Audio Player Styles --- */
-        #audio-player-wrapper {
+        #audio-player-content {
+            display: none; /* Controlled by JS */
             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;
+            padding: 1.5rem; /* Padding applied here, inside the output-section card */
+            box-sizing: border-box;
             flex-direction: column;
             gap: 1.2rem;
-            box-sizing: border-box;
         }
 
-        .audio-player-header {
+        .audio-player-header-simple {
             display: flex;
             align-items: center;
             justify-content: flex-end; /* Align to right for RTL */
-            gap: 0.8rem;
-            padding-bottom: 0.8rem;
-            border-bottom: 1px solid var(--panel-border);
-            margin-bottom: 0.8rem;
+            gap: 0.5rem;
+            padding-bottom: 0.8rem; /* No border-bottom as in image */
+            margin-right: auto; /* Push content to left */
+            width: 100%; /* Take full width */
+            color: var(--text-secondary); /* Grey color for header text */
+            font-size: 0.95em; /* Slightly smaller text */
+            font-weight: 500;
         }
-        .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-simple span {
+            order: -1; /* Puts text first in RTL order */
+            margin-left: 0.5rem; /* Space between text and icon */
         }
-        .audio-player-header .audio-player-icons svg {
-            width: 22px;
-            height: 22px;
-            color: var(--text-secondary); /* Match the grey from image */
+        .audio-player-header-simple .icon {
+            width: 18px; /* Smaller icons */
+            height: 18px;
+            fill: currentColor;
+            stroke: currentColor;
+            stroke-width: 2;
             vertical-align: middle;
-            margin-left: 0.5rem; /* Space between icons */
-        }
-        .audio-player-header .audio-player-icons svg:last-child {
-            margin-left: 0;
-        }
-
-        #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%;
-            box-sizing: border-box;
         }
 
-        .audio-waveform-wrapper {
+        .audio-waveform-container {
             display: flex;
             align-items: center;
             gap: 0.8rem;
             width: 100%;
+            margin-bottom: 1rem; /* Space between waveform and controls */
         }
         .audio-time {
             font-size: 0.9em;
             color: var(--text-secondary);
-            min-width: 40px;
+            min-width: 40px; /* Ensure consistent width */
             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 */
+            font-variant-numeric: tabular-nums;
         }
 
-        .audio-waveform-display {
+        /* Waveform Display */
+        .audio-waveform {
             flex-grow: 1;
-            height: 60px; /* Height of the waveform area */
+            height: 60px; /* Fixed height for 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 */
-        }
-
-        .audio-progress-fill {
+            overflow: hidden; /* To clip bars */
+            border-radius: 4px; /* Slight radius on the waveform area */
+            background-color: transparent; /* No background color here */
+        }
+
+        .audio-waveform-bars-wrapper {
             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 */
-        }
-
-
-        .audio-controls-bottom {
             display: flex;
-            justify-content: space-between;
-            align-items: center;
+            justify-content: space-between; /* Distribute bars */
+            align-items: center; /* Center bars vertically */
+            z-index: 0; /* Under the dashed line */
+        }
+
+        .waveform-bar {
+            width: 4px; /* Width of each bar */
+            min-width: 2px; /* Ensure small bars are still visible */
+            background-color: var(--waveform-color-inactive); /* Default grey color */
+            border-radius: 2px; /* Rounded ends for bars */
+            transition: background-color 0.1s linear; /* Smooth color change */
+            flex-shrink: 0; /* Don't shrink bars */
+            margin: 0 1px; /* Small gap between bars */
+            transform-origin: center; /* For scaling/positioning */
+        }
+
+        .audio-waveform-dashed-line {
+            position: absolute;
+            top: 50%;
+            left: 0;
             width: 100%;
+            height: 1px; /* Height of the dashed line itself */
+            background-image: linear-gradient(to right, var(--waveform-dashed-line-color) 33%, transparent 0%);
+            background-position: center;
+            background-size: 10px 1px; /* Dash length + gap */
+            transform: translateY(-50%);
+            z-index: 1; /* Above the bars */
         }
 
-        .audio-left-group, .audio-center-group, .audio-right-group {
+        /* Audio Controls */
+        .audio-controls-group {
             display: flex;
+            justify-content: center; /* Center the main controls */
             align-items: center;
-            gap: 0.5rem;
+            gap: 1.5rem; /* Space between buttons */
+            margin-bottom: 1rem; /* Space between main controls and bottom controls */
         }
 
-        .audio-center-group {
-            gap: 1.5rem; /* More space for main controls */
+        .audio-skip-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 8px;
+            color: var(--text-secondary); /* Grey color */
+            transition: transform 0.2s;
+        }
+        .audio-skip-btn svg {
+            width: 24px;
+            height: 24px;
+            fill: currentColor;
+        }
+        .audio-skip-btn:hover {
+            transform: scale(1.1);
+        }
+        .audio-skip-btn:active {
+            transform: scale(0.9);
         }
 
-        .audio-controls-bottom button {
+        .audio-play-pause-btn-large {
             background: none;
             border: none;
             cursor: pointer;
-            padding: 8px;
+            padding: 0; /* No padding inside for icon sizing */
+            width: 60px; /* Larger circular area */
+            height: 60px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: background-color 0.2s, transform 0.2s;
-            color: var(--text-secondary);
+            color: var(--text-secondary); /* Grey color */
+            transition: transform 0.2s;
+            /* No background effect on hover as per image */
         }
-        .audio-controls-bottom button:hover {
-            background-color: var(--input-bg);
+        .audio-play-pause-btn-large:hover {
             transform: scale(1.05);
         }
-        .audio-controls-bottom button:active {
+        .audio-play-pause-btn-large:active {
             transform: scale(0.95);
         }
-
-        .audio-controls-bottom button svg {
-            width: 24px;
-            height: 24px;
+        .audio-play-pause-btn-large svg {
+            width: 36px; /* Icon size */
+            height: 36px;
             fill: currentColor;
         }
 
-        /* Specific button styling */
-        .audio-play-pause-btn {
-            width: 50px;
-            height: 50px;
-            background-color: var(--accent-primary);
-            color: #fff;
-            border-radius: 50%;
-            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
+        .audio-bottom-controls {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start; /* Volume/Speed on the left, nothing on the right */
+            width: 100%;
+            gap: 1rem; /* Space between volume and speed button */
         }
-        .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);
+
+        .audio-volume-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 8px;
+            color: var(--text-secondary);
+            transition: transform 0.2s;
         }
-        .audio-play-pause-btn:active {
-            transform: scale(0.95);
+        .audio-volume-btn svg {
+            width: 24px;
+            height: 24px;
+            fill: currentColor;
+        }
+        .audio-volume-btn:hover {
+            transform: scale(1.1);
         }
-        .audio-play-pause-btn svg {
-            width: 32px;
-            height: 32px;
+        .audio-volume-btn:active {
+            transform: scale(0.9);
         }
 
         .audio-speed-btn {
             font-family: var(--app-font);
             font-size: 0.9em;
             font-weight: 600;
-            background-color: var(--input-bg);
-            border: 1px solid var(--panel-border);
+            background-color: var(--panel-bg); /* Match the image's "1x" button background */
+            border: 1px solid var(--panel-border); /* Match the image's border */
             padding: 6px 12px;
             border-radius: 8px;
             min-width: 40px;
             text-align: center;
             color: var(--text-primary);
+            cursor: pointer;
+            transition: background-color 0.2s, border-color 0.2s;
+            box-shadow: var(--shadow-subtle); /* Add subtle shadow */
         }
         .audio-speed-btn:hover {
-            background-color: #EAF0F6;
-            border-color: var(--accent-primary);
+            background-color: var(--input-bg); /* Slightly darker on hover */
         }
 
         /* Hide the default audio player */
-        #audio-player { display: none !important; }
+        #hidden-audio-player { display: none !important; }
     </style>
 </head>
 <body>
@@ -837,44 +824,41 @@
                 </div>
 
                 <!-- 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 id="audio-player-content">
+                    <div class="audio-player-header-simple">
+                        <svg class="icon" 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"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
+                        <svg class="icon" 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"><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>
+                        <span>فایل صوتی</span>
                     </div>
-                    <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 class="audio-waveform-container">
+                        <span class="audio-time audio-current-time">0:00</span>
+                        <div class="audio-waveform">
+                            <div class="audio-waveform-bars-wrapper"></div> <!-- Bars generated here by JS -->
+                            <div class="audio-waveform-dashed-line"></div>
                         </div>
+                        <span class="audio-time audio-total-time">0:00</span>
+                    </div>
+
+                    <div class="audio-controls-group">
+                        <button class="audio-skip-btn backward">
+                            <svg viewBox="0 0 24 24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg>
+                        </button>
+                        <button class="audio-play-pause-btn-large">
+                            <svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg>
+                            <svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
+                        </button>
+                        <button class="audio-skip-btn forward">
+                            <svg viewBox="0 0 24 24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg>
+                        </button>
+                    </div>
+
+                    <div class="audio-bottom-controls">
+                        <button class="audio-volume-btn">
+                            <svg viewBox="0 0 24 24" class="volume-high-icon"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></svg>
+                            <svg viewBox="0 0 24 24" class="volume-mute-icon" style="display:none;"><path d="M7 9v6h4l5 5V4L11 9H7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zM19 12c0 .94-.23 1.82-.68 2.6L19 14.88c.45-.88.7-1.88.7-2.88 0-4.01-2.99-7.14-7-8.05v2.06c2.89.86 5 3.54 5 6.71zM4.55 4L2 6.55 9.45 14H7v6h4l5 5V14.55l4.05 4.05L22 18 12 8 4.55 4z"></path></svg>
+                        </button>
+                        <button class="audio-speed-btn">1x</button>
                     </div>
                 </div>
                 <audio id="hidden-audio-player" style="display: none;"></audio>
@@ -946,7 +930,7 @@
                 { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان" },
                 { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ" },
                 { id: "Callirrhoe", name: "نیما (مرد)", desc: "روایتگر و قصه‌گو" },
-                { id: "Autonoe", name: "هستی (زن)", desc: "طبیعی و خودمانی" },
+                { id: "Autonoe", name: "هستی (زن)", "desc": "طبیعی و خودمانی" },
                 { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم �� جدی" },
                 { id: "Iapetus", name: "ستاره (زن)", desc: "درخشان و گیرا" },
                 { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده" },
@@ -981,22 +965,23 @@
 
             // --- 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 audioPlayerContent = document.getElementById('audio-player-content'); // Main player content wrapper
+            const audioCurrentTimeSpan = audioPlayerContent.querySelector('.audio-current-time');
+            const audioTotalTimeSpan = audioPlayerContent.querySelector('.audio-total-time');
+            const audioWaveformBarsWrapper = audioPlayerContent.querySelector('.audio-waveform-bars-wrapper');
+            const playPauseBtn = audioPlayerContent.querySelector('.audio-play-pause-btn-large');
             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 skipBackwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.backward');
+            const skipForwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.forward');
+            const volumeBtn = audioPlayerContent.querySelector('.audio-volume-btn');
             const volumeHighIcon = volumeBtn.querySelector('.volume-high-icon');
             const volumeMuteIcon = volumeBtn.querySelector('.volume-mute-icon');
-            const speedBtn = audioPlayerWrapper.querySelector('.audio-speed-btn');
+            const speedBtn = audioPlayerContent.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
+            const NUM_WAVEFORM_BARS = 60; // Number of bars to display for the waveform
 
             // Character Counter
             const charCountSpan = document.getElementById('char-count');
@@ -1129,6 +1114,21 @@
 
             // --- Custom Audio Player Functionality ---
 
+            // Function to generate waveform bars
+            function generateWaveformBars() {
+                audioWaveformBarsWrapper.innerHTML = ''; // Clear existing bars
+                const maxBarHeight = 100; // Percentage of total waveform height
+                const minBarHeight = 10;
+                for (let i = 0; i < NUM_WAVEFORM_BARS; i++) {
+                    const bar = document.createElement('div');
+                    bar.classList.add('waveform-bar');
+                    // Simple randomized heights for visual variety
+                    const height = Math.random() * (maxBarHeight - minBarHeight) + minBarHeight;
+                    bar.style.height = `${height}%`;
+                    audioWaveformBarsWrapper.appendChild(bar);
+                }
+            }
+
             // Helper function to format time (e.g., 0:06)
             function formatTime(seconds) {
                 if (isNaN(seconds) || seconds < 0) return '0:00';
@@ -1154,11 +1154,24 @@
 
                 if (isFinite(duration) && duration > 0) {
                     audioTotalTimeSpan.textContent = formatTime(duration);
-                    const progress = (currentTime / duration) * 100;
-                    audioProgressFill.style.width = `${progress}%`;
+                    const progressRatio = currentTime / duration;
+                    const barsToColor = Math.floor(progressRatio * NUM_WAVEFORM_BARS);
+
+                    const bars = audioWaveformBarsWrapper.children;
+                    for (let i = 0; i < bars.length; i++) {
+                        if (i < barsToColor) {
+                            bars[i].style.backgroundColor = 'var(--waveform-color-active)';
+                        } else {
+                            bars[i].style.backgroundColor = 'var(--waveform-color-inactive)';
+                        }
+                    }
                 } else {
                     audioTotalTimeSpan.textContent = '0:00';
-                    audioProgressFill.style.width = '0%';
+                    // Reset all bars to inactive color
+                    const bars = audioWaveformBarsWrapper.children;
+                    for (let i = 0; i < bars.length; i++) {
+                        bars[i].style.backgroundColor = 'var(--waveform-color-inactive)';
+                    }
                 }
             }
 
@@ -1200,7 +1213,10 @@
 
             // Listen to hidden audio player events to update UI
             hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI);
-            hiddenAudioPlayer.addEventListener('loadedmetadata', updatePlayerUI);
+            hiddenAudioPlayer.addEventListener('loadedmetadata', () => {
+                generateWaveformBars(); // Generate bars once metadata is loaded
+                updatePlayerUI(); // Update UI with total duration and initial state
+            });
             hiddenAudioPlayer.addEventListener('play', updatePlayerUI);
             hiddenAudioPlayer.addEventListener('pause', updatePlayerUI);
             hiddenAudioPlayer.addEventListener('ended', () => {
@@ -1210,8 +1226,8 @@
 
             // --- State Management Functions ---
             function showLoadingState() {
-                audioPlayerWrapper.style.display = 'none'; // Hide custom player
-                outputSection.classList.remove('has-content'); // Remove has-content class
+                audioPlayerContent.style.display = 'none'; // Hide custom player
+                outputSection.classList.remove('has-content'); // Remove has-content class to revert output-section styling
                 statusMessage.style.display = 'none';
                 loadingAnimationWrapper.style.display = 'flex';
                 generateBtn.disabled = true;
@@ -1228,17 +1244,16 @@
                 loadingAnimationWrapper.style.display = 'none';
                 if (isSuccess) {
                     statusMessage.style.display = 'none';
-                    audioPlayerWrapper.style.display = 'flex'; // Show custom player wrapper
+                    audioPlayerContent.style.display = 'flex'; // Show custom player content
                     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();
+                    updatePlayerUI(); // Update UI with initial playback state (paused, time 0)
+                    hiddenAudioPlayer.play(); // Auto-play the audio
                 } else {
                     statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
                     statusMessage.style.display = 'block';
-                    audioPlayerWrapper.style.display = 'none'; // Hide custom player wrapper
-                    outputSection.classList.remove('has-content'); // Remove class
+                    audioPlayerContent.style.display = 'none'; // Hide custom player content
+                    outputSection.classList.remove('has-content'); // Remove class to revert output-section styling
                     hiddenAudioPlayer.pause(); // Stop any potential audio
                     hiddenAudioPlayer.src = ''; // Clear audio source
                 }
@@ -1346,7 +1361,7 @@
             form.addEventListener('submit', generateAudio);
 
             // Hide custom audio player and show status message on load
-            audioPlayerWrapper.style.display = 'none';
+            audioPlayerContent.style.display = 'none';
             statusMessage.style.display = 'block';
             loadingAnimationWrapper.style.display = 'none';
             outputSection.classList.remove('has-content'); // Ensure initial state is clean