feat(video): show filled white track left of the volume slider thumb

Add a hard-stop linear-gradient background to the volume <input> so the
portion of the track left of the thumb is solid white while the right
portion stays at the previous translucent white. The user can now see
at a glance how loud the level is set, instead of only inferring it
from the thumb position.

src/components/messageStream/MessageInlineVideo.tsx

@@ -409,7 +409,9 @@ export function MessageInlineVideo({
             )}
           </button>
           {/* Always-visible inline straight-line volume slider (desktop only;
-              on touch devices users rely on the mute toggle + system volume). */}
+              on touch devices users rely on the mute toggle + system volume).
+              The left portion of the track is filled white via a hard-stop
+              gradient so the user can see the current level at a glance. */}
           <input
             type="range"
             min={0}
@@ -420,7 +422,14 @@ export function MessageInlineVideo({
             onClick={(e) => e.stopPropagation()}
             onPointerDown={(e) => e.stopPropagation()}
             aria-label="Volume"
-            className="hidden h-1 w-20 cursor-pointer appearance-none rounded-full bg-white/30 accent-white md:block"
+            style={{
+              backgroundImage: `linear-gradient(to right, #ffffff 0%, #ffffff ${
+                (isMuted ? 0 : volume) * 100
+              }%, rgba(255,255,255,0.3) ${
+                (isMuted ? 0 : volume) * 100
+              }%, rgba(255,255,255,0.3) 100%)`,
+            }}
+            className="hidden h-1 w-20 cursor-pointer appearance-none rounded-full accent-white md:block"
           />
         </div>