Fix trim bar handles not visible

Bug from screenshot: trim bar visible but red handles not showing.

Causes:
1. video_duration in job is None for old jobs (was not saved on initial
   processing). Without it, fallback was endInit+60 which placed handles
   off-screen.

2. videoDuration was const, couldn't be updated when video metadata loads.

3. Handle offset was 9px but handles are now 24px wide (need 12px offset).

Fixes:
- Backend /api/transcript: fallback to last segment end time if
  video_duration missing in job
- Frontend: videoDuration is let, updated on loadedmetadata
- Handle offset 9px → 12px for 24px wide handles
- Re-render trim after metadata loads to pick up actual video.duration

templates/index.html

@@ -1011,7 +1011,7 @@
       
       const startInit = data.clip_range?.start || 0;
       const endInit = data.clip_range?.end || (startInit + 30);
-      const videoDuration = data.video_duration || endInit + 60;
+      let videoDuration = data.video_duration || endInit + 60;
       const segments = data.segments || [];
       
       const overlay = document.createElement("div");
@@ -1127,8 +1127,9 @@
         const rPct = pctOf(trimEnd);
         trimRegion.style.left = lPct + '%';
         trimRegion.style.right = (100 - rPct) + '%';
-        handleL.style.left = `calc(${lPct}% - 9px)`;
-        handleR.style.left = `calc(${rPct}% - 9px)`;
+        // Handle 24px width → offset 12px
+        handleL.style.left = `calc(${lPct}% - 12px)`;
+        handleR.style.left = `calc(${rPct}% - 12px)`;
         startVal.textContent = formatTime(trimStart);
         endVal.textContent = formatTime(trimEnd);
         durVal.textContent = (trimEnd - trimStart).toFixed(1) + "s";
@@ -1187,16 +1188,20 @@
         if (video) video.currentTime = t;
       });
       
-      // Update playhead during playback
+      // Update playhead during playback + re-render če videoDuration manjkalo
       if (video) {
         video.addEventListener("timeupdate", renderPlayhead);
         video.addEventListener("loadedmetadata", () => {
-          // Če videoDuration ni bilo podanih, vzemi iz videa
-          if (!data.video_duration && video.duration) {
-            // Recalculate render
-            renderTrim();
-            renderPlayhead();
+          // Če videoDuration ni bilo podanih iz API, vzemi iz video elementa
+          if ((!videoDuration || videoDuration < 1) && video.duration) {
+            videoDuration = video.duration;
           }
+          // Refresh end label
+          const endLabel = document.getElementById("trim-end-label");
+          if (endLabel) endLabel.textContent = formatTime(videoDuration);
+          // Re-render handles z pravilnim videoDuration
+          renderTrim();
+          renderPlayhead();
         });
       }