scroll position save fix attempt no. 1 feat. 'What happens next…?' text at bottom of scroll; buffer added to scroll, accounter for in FTs

src/templates/apps/billboard/_partials/_applet-billboard-scroll.html

@@ -7,23 +7,48 @@
     var scroll = document.getElementById('id_drama_scroll');
     if (!scroll) return;
 
-    // Restore saved position
-    scroll.scrollTop = {{ scroll_position }};
+    // Push buffer so its top aligns with the bottom of the aperture when all
+    // events fit within the viewport (no natural scrolling).  For longer scrolls
+    // the buffer top naturally appears at the aperture bottom when the last event
+    // clears the top of the visible area.
+    var buffer = scroll.querySelector('.scroll-buffer');
+    if (buffer) {
+        var eventsHeight = scroll.scrollHeight - buffer.offsetHeight;
+        var gap = scroll.clientHeight - eventsHeight;
+        if (gap > 0) {
+            buffer.style.marginTop = gap + 'px';
+        }
+    }
 
-    // Debounced save on scroll
+    // Restore: position stored is bottom-of-viewport; subtract clientHeight to align it
+    scroll.scrollTop = Math.max(0, {{ scroll_position }} - scroll.clientHeight);
+
+    // Animate "What happens next. . . ?" buffer dots — 4th span shows '?'
+    var dotsWrap = scroll.querySelector('.scroll-buffer-dots');
+    if (dotsWrap) {
+        var dots = dotsWrap.querySelectorAll('span');
+        var n = 0;
+        setInterval(function() {
+            dots.forEach(function(d, i) { d.textContent = i < n ? (i === 3 ? '?' : '.') : ''; });
+            n = (n + 1) % 5;
+        }, 400);
+    }
+
+    // Debounced save on scroll — store bottom-of-viewport so the last-read line is restored
     var saveTimer;
     scroll.addEventListener('scroll', function() {
         clearTimeout(saveTimer);
         saveTimer = setTimeout(function() {
             var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
             var token = csrfToken ? csrfToken.value : '';
+            var remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
             fetch("{% url 'billboard:save_scroll_position' room.id %}", {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/x-www-form-urlencoded',
                     'X-CSRFToken': token,
                 },
-                body: 'position=' + Math.round(scroll.scrollTop),
+                body: 'position=' + Math.round(scroll.scrollTop + scroll.clientHeight + remPx * 2.5),
             });
         }, 800);
     });