Refine line-based story scrolling

public/js/playback-coordinator-module.js

@@ -21,6 +21,7 @@ class PlaybackCoordinatorModule extends BaseModule {
             'calculateWordTimings',
             'animateWords',
             'waitForAudioStart',
+            'completeSentenceVisual',
             'fastForward',
             'stop'
         ]);
@@ -81,11 +82,25 @@ class PlaybackCoordinatorModule extends BaseModule {
             console.error('PlaybackCoordinator: Error during playback:', error);
             throw error;
         } finally {
+            this.completeSentenceVisual(sentence);
             this.isPlaying = false;
             this.currentSentence = null;
         }
     }
 
+    completeSentenceVisual(sentence) {
+        if (!sentence?.element) return;
+        sentence.element.dataset.playbackComplete = 'true';
+        sentence.element.querySelectorAll('.word').forEach(word => {
+            word.style.transition = 'none';
+            word.style.animation = 'none';
+            word.style.visibility = 'visible';
+            word.style.opacity = '1';
+            word.style.transform = 'translateY(0)';
+            word.style.clipPath = 'inset(0 0 0 0)';
+        });
+    }
+
     /**
      * Play TTS audio for a sentence
      * @param {Object} sentence - Sentence object with TTS data
@@ -307,15 +322,7 @@ class PlaybackCoordinatorModule extends BaseModule {
         }
 
         // Complete all word animations immediately
-        if (this.currentSentence.element) {
-            const wordElements = this.currentSentence.element.querySelectorAll('.word');
-            wordElements.forEach(word => {
-                word.style.animation = 'none';
-                word.style.opacity = '1';
-                word.style.transform = 'translateY(0)';
-                word.style.clipPath = 'inset(0 0 0 0)';
-            });
-        }
+        this.completeSentenceVisual(this.currentSentence);
     }
 
     /**