Adjust detail view timeline layout and auto-update

script.js

@@ -177,6 +177,7 @@ function updateCurrentTime() {
     } else {
         updateTimeBreakdown(cobiets);
     }
+    updateDetailCurrentTime();
 }
 
 function updateTimeBreakdown(cobiets) {
@@ -701,15 +702,11 @@ function showEonstripDetail(index, startCob) {
         timeline.appendChild(block);
     }
 
-    let markerCob = manualMode ? manualCobiets : toCobiets(new Date());
-    const rel = (markerCob - startCob) / COBIE_UNITS.eonstrip;
-    if (rel >= 0 && rel <= 1) {
-        const line = document.createElement('div');
-        line.className = 'current-time-line';
-        line.style.top = (rel * 100) + '%';
-        line.textContent = formatCobieTimestamp(markerCob);
-        timeline.appendChild(line);
-    }
+    const line = document.createElement('div');
+    line.className = 'current-time-line';
+    line.id = 'detailCurrentTime';
+    timeline.appendChild(line);
+    updateDetailCurrentTime();
 
     if (Array.isArray(window.SPECIAL_EVENTS)) {
         const events = [];
@@ -777,7 +774,7 @@ function showEonstripDetail(index, startCob) {
                 elem.className = 'event-line';
             }
             elem.style.top = (displayStart * 100) + '%';
-            elem.style.left = left + '%';
+            elem.style.left = `calc(var(--scale-width) + ${left}%)`;
             elem.style.width = `calc(${width}% - 2px)`;
 
             if (elem.classList.contains('small-event') || elem.className === 'event-line') {
@@ -810,11 +807,26 @@ function showEonstripDetail(index, startCob) {
                 `End: ${endStr}<br>` +
                 `${startDate} – ${endDate}`;
             elem.appendChild(tooltip);
-            timeline.appendChild(elem);
+        timeline.appendChild(elem);
         });
     }
 }
 
+function updateDetailCurrentTime() {
+    if (currentDetailCob === null) return;
+    const line = document.getElementById('detailCurrentTime');
+    if (!line) return;
+    const nowCob = manualMode ? manualCobiets : toCobiets(new Date());
+    const rel = (nowCob - currentDetailCob) / COBIE_UNITS.eonstrip;
+    if (rel >= 0 && rel <= 1) {
+        line.style.display = 'block';
+        line.style.top = (rel * 100) + '%';
+        line.textContent = formatCobieTimestamp(nowCob);
+    } else {
+        line.style.display = 'none';
+    }
+}
+
 function detailPrev() {
     if (currentDetailCob === null) return;
     showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);