fix(AudioPlayback): improve wave progress bar smoothness and sizing (#3094)

### 🎯 Goal

The wave progress bar indicator jumps between positions during playback
and the waveform stops growing after a certain width, making the audio
player feel janky.

### 🛠 Implementation details

- **Smooth playback transitions:** Added 250ms linear CSS transitions on
the progress indicator (`inset-inline-start`) and amplitude bars
(`background`). The 250ms duration matches the browser's `timeupdate`
firing interval, so the indicator glides continuously between updates.
- **Instant drag response:** Added a `--dragging` modifier class toggled
via `useInteractiveProgressBar`. While active, transitions are disabled
so the handle tracks the pointer without lag.
- **Wave bar sizing:** Added `flex: 1` to the `__metadata` container so
the wave bar fills all available space instead of being capped at
content width.

### 🎨 UI Changes

- Progress indicator glides smoothly during playback instead of jumping
bar-to-bar
- Amplitude bar colors fade smoothly between active/inactive states
- Wave bar now stretches to fill the full width of the voice recording
widget
- Dragging the handle remains instant with no transition lag

Author: oliverlaz

src/components/Attachment/styling/Attachment.scss

@@ -2,9 +2,9 @@
 
 .str-chat {
   /* The margin applied to every attachment in the attachment list */
-  --str-chat__attachment-margin: var(--space-2)
-    /* The border radius used for the borders of the component */
-    --str-chat__attachment-list-border-radius: 0;
+  --str-chat__attachment-margin: var(--space-2);
+  /* The border radius used for the borders of the component */
+  --str-chat__attachment-list-border-radius: 0;
 
   /* The text/icon color of the component */
   --str-chat__attachment-list-color: var(--str-chat__text-color);
@@ -425,6 +425,7 @@
     }
 
     .str-chat__message-attachment__voice-recording-widget__metadata {
+      flex: 1;
       min-width: 180px;
       padding-inline: var(--spacing-xs);
 

src/components/AudioPlayback/components/useInteractiveProgressBar.ts

@@ -51,6 +51,7 @@ export const useInteractiveProgressBar = ({
 
     isDragging.current = true;
     progressIndicator.style.cursor = 'grabbing';
+    root?.classList.add('str-chat__wave-progress-bar__track--dragging');
   };
 
   const handleDrag: PointerEventHandler<HTMLDivElement> = (e) => {
@@ -64,7 +65,8 @@ export const useInteractiveProgressBar = ({
 
     isDragging.current = false;
     progressIndicator.style.removeProperty('cursor');
-  }, [progressIndicator]);
+    root?.classList.remove('str-chat__wave-progress-bar__track--dragging');
+  }, [progressIndicator, root]);
 
   useEffect(() => {
     document.addEventListener('pointerup', handleDragStop);

src/components/AudioPlayback/styling/WaveProgressBar.scss

@@ -42,18 +42,30 @@
       width: 14px;
       border-radius: var(--radius-max);
       cursor: grab;
+      transition: inset-inline-start 250ms linear;
     }
   }
 
   .str-chat__wave-progress-bar__amplitude-bar {
     background: var(--chat-waveform-bar);
     border-radius: var(--radius-max);
+    transition: background 250ms linear;
   }
 
   .str-chat__wave-progress-bar__amplitude-bar--active {
     background: var(--chat-waveform-bar-playing);
   }
 
+  .str-chat__wave-progress-bar__track--dragging {
+    .str-chat__wave-progress-bar__progress-indicator {
+      transition: none;
+    }
+
+    .str-chat__wave-progress-bar__amplitude-bar {
+      transition: none;
+    }
+  }
+
   .str-chat__wave-progress-bar__track--playback-initiated {
     .str-chat__wave-progress-bar__progress-indicator {
       background: var(--accent-primary);