Improve car mode news cards

- Fix sentence splitting to preserve abbreviations like U.S. and D.C.
- Make body text bold for better readability
- Add auto-scroll for long text after 10 seconds
- Increase text container height and adjust nav button spacing

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

news-app/src/main.js

@@ -52,6 +52,8 @@ const state = {
   carMode: false,
   carModeIndex: 0,
   carModeInterval: null,
+  carModeScrollTimeout: null,
+  carModeScrollInterval: null,
   aiArticleCount: 0,
   locked: !getCookie('news_feed_unlocked'),
   unlockClicks: 0,
@@ -228,9 +230,9 @@ function renderCarModeCard(group, index, total) {
           ${group.title}
         </h2>
         
-        <div class="overflow-y-auto pr-2 custom-scrollbar flex-1 min-h-0">
-          <p class="text-xl sm:text-3xl text-gray-200 leading-relaxed mb-4">
-            ${group.summary.split(/(?<=[.!?])\s+/).join('<br><br>')}
+        <div id="car-mode-scroll-container" class="overflow-y-auto pr-2 custom-scrollbar flex-1 min-h-0 max-h-[50vh] sm:max-h-[55vh]">
+          <p class="text-xl sm:text-3xl text-gray-200 leading-relaxed mb-4 font-bold">
+            ${group.summary.split(/(?<![A-Z]\.)(?<=[.!?])\s+/).join('<br><br>')}
           </p>
         </div>
       </div>
@@ -300,7 +302,7 @@ function renderCarMode() {
         ${renderCarModeCard(currentGroup, state.carModeIndex, state.groups.length)}
         
         <!-- Navigation buttons moved below card -->
-        <div class="flex items-center gap-12 mt-0 z-20">
+        <div class="flex items-center gap-12 mt-4 sm:mt-6 z-20">
           <button onclick="carModePrev()" class="p-4 text-white/70 hover:text-white hover:bg-white/10 rounded-full transition-colors backdrop-blur-sm bg-black/10" title="Previous">
             <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
@@ -620,6 +622,7 @@ function transitionCard(newIndex) {
 
 function startCarModeCycle() {
   stopCarModeCycle() // Clear any existing interval
+  startCarModeAutoScroll() // Start auto-scroll for long text
   state.carModeInterval = setInterval(() => {
     if (state.groups.length > 0 && !state.isTransitioning) {
       transitionCard((state.carModeIndex + 1) % state.groups.length)
@@ -632,6 +635,47 @@ function stopCarModeCycle() {
     clearInterval(state.carModeInterval)
     state.carModeInterval = null
   }
+  stopCarModeAutoScroll()
+}
+
+function startCarModeAutoScroll() {
+  stopCarModeAutoScroll()
+
+  // Wait 10 seconds, then check if scrolling is needed
+  state.carModeScrollTimeout = setTimeout(() => {
+    const container = document.getElementById('car-mode-scroll-container')
+    if (!container) return
+
+    const maxScroll = container.scrollHeight - container.clientHeight
+    if (maxScroll <= 5) return
+
+    // Scroll in steps over ~8 seconds
+    let scrolled = 0
+    const totalSteps = 160 // 8 seconds at 50ms intervals
+    const stepSize = maxScroll / totalSteps
+
+    state.carModeScrollInterval = setInterval(() => {
+      scrolled += stepSize
+      if (scrolled >= maxScroll) {
+        container.scrollTop = maxScroll
+        clearInterval(state.carModeScrollInterval)
+        state.carModeScrollInterval = null
+        return
+      }
+      container.scrollTop = scrolled
+    }, 50)
+  }, 10000)
+}
+
+function stopCarModeAutoScroll() {
+  if (state.carModeScrollTimeout) {
+    clearTimeout(state.carModeScrollTimeout)
+    state.carModeScrollTimeout = null
+  }
+  if (state.carModeScrollInterval) {
+    clearInterval(state.carModeScrollInterval)
+    state.carModeScrollInterval = null
+  }
 }
 
 // Keyboard support for car mode