Improve import UX: progress overlay, pyannote fix, debug logging

- Enhanced ProgressOverlay with spinner, better styling, and z-index 9999
- Import button shows "Processing..." with pulse animation while transcribing
- Fix pyannote API: use token= instead of deprecated use_auth_token=
- Read HF_TOKEN from environment for pyannote model download
- Add console logging for click-to-seek debugging
- Add color-scheme: dark for native form controls

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/lib/components/ProgressOverlay.svelte

@@ -12,11 +12,15 @@
 {#if visible}
   <div class="overlay">
     <div class="progress-card">
-      <h3>{stage}</h3>
-      <div class="bar-track">
-        <div class="bar-fill" style="width: {percent}%"></div>
+      <div class="spinner-row">
+        <div class="spinner"></div>
+        <h3>{stage || 'Processing...'}</h3>
       </div>
-      <p>{percent}% — {message}</p>
+      <div class="bar-track">
+        <div class="bar-fill" style="width: {Math.max(percent, 2)}%"></div>
+      </div>
+      <p class="status-text">{percent}% — {message || 'Please wait...'}</p>
+      <p class="hint-text">This may take several minutes for large files</p>
     </div>
   </div>
 {/if}
@@ -25,34 +29,63 @@
   .overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1000;
+    z-index: 9999;
   }
   .progress-card {
     background: #16213e;
-    padding: 2rem;
+    padding: 2rem 2.5rem;
     border-radius: 12px;
-    min-width: 400px;
+    min-width: 420px;
     color: #e0e0e0;
+    border: 1px solid #2a3a5e;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  }
+  .spinner-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.25rem;
+  }
+  .spinner {
+    width: 20px;
+    height: 20px;
+    border: 3px solid #2a3a5e;
+    border-top-color: #e94560;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  h3 {
+    margin: 0;
+    text-transform: capitalize;
+    font-size: 1.1rem;
   }
-  h3 { margin: 0 0 1rem; text-transform: capitalize; }
   .bar-track {
-    height: 8px;
+    height: 10px;
     background: #0f3460;
-    border-radius: 4px;
+    border-radius: 5px;
     overflow: hidden;
   }
   .bar-fill {
     height: 100%;
-    background: #e94560;
+    background: linear-gradient(90deg, #e94560, #ff6b81);
     transition: width 0.3s;
+    border-radius: 5px;
   }
-  p {
+  .status-text {
+    margin: 0.75rem 0 0;
+    font-size: 0.9rem;
+    color: #b0b0b0;
+  }
+  .hint-text {
     margin: 0.5rem 0 0;
-    font-size: 0.875rem;
-    color: #999;
+    font-size: 0.75rem;
+    color: #666;
   }
 </style>

src/lib/components/WaveformPlayer.svelte

@@ -78,6 +78,7 @@
 
   /** Seek to a specific time in milliseconds. Called from transcript click-to-seek. */
   export function seekTo(timeMs: number) {
+    console.log('[voice-to-notes] seekTo called:', timeMs, 'ms, wavesurfer:', !!wavesurfer, 'duration:', wavesurfer?.getDuration());
     if (wavesurfer) {
       wavesurfer.setTime(timeMs / 1000);
       if (!wavesurfer.isPlaying()) {