frontend

frontend/src/index.jsx

@@ -4842,6 +4842,48 @@ const AppLayout = () => {
     return ordered;
   }, [selectionOrder, documentLookup, selectedDocumentIds]);
 
+  const lastScrolledDetailDocRef = useRef(null);
+
+  useEffect(() => {
+    if (!orderedSelectedDocuments.length) {
+      lastScrolledDetailDocRef.current = null;
+      return;
+    }
+
+    let lastSelectedId = null;
+    for (let index = selectionOrder.length - 1; index >= 0; index -= 1) {
+      const key = selectionOrder[index];
+      if (isDocumentRowKey(key)) {
+        lastSelectedId = getRowId(key);
+        if (lastSelectedId) {
+          break;
+        }
+      }
+    }
+
+    if (!lastSelectedId && orderedSelectedDocuments.length) {
+      const fallbackDoc = orderedSelectedDocuments[orderedSelectedDocuments.length - 1];
+      lastSelectedId = fallbackDoc?.id || null;
+    }
+
+    if (!lastSelectedId || lastScrolledDetailDocRef.current === lastSelectedId) {
+      return;
+    }
+
+    const targetElement =
+      document.getElementById(`document-row-${lastSelectedId}`) ||
+      document.getElementById(`document-card-${lastSelectedId}`);
+
+    if (!targetElement) {
+      return;
+    }
+
+    lastScrolledDetailDocRef.current = lastSelectedId;
+    requestAnimationFrame(() => {
+      targetElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    });
+  }, [orderedSelectedDocuments, selectionOrder, documentsViewMode]);
+
   const { breadcrumbs, missingBreadcrumbAncestors } = useMemo(() => {
     const chain = [];
     const seen = new Set();

frontend/src/styles.css

@@ -1805,7 +1805,7 @@ button.danger:hover:not([disabled]) {
 }
 
 .document-card.selected .document-thumbnail-wrapper {
-  background-color: var(--accent-soft);
+  background-color: var(--selection-soft);
 }
 
 .document-card:hover .document-thumbnail-wrapper,