diff --git a/src/lib/common/modals/DialogModal.svelte b/src/lib/common/modals/DialogModal.svelte
index 359a53df..d4880d21 100644
--- a/src/lib/common/modals/DialogModal.svelte
+++ b/src/lib/common/modals/DialogModal.svelte
@@ -15,6 +15,7 @@
         cancel = () => {},
         close = () => {},
         disableConfirmBtn = false,
+        disableBackdropClick = false,
         children,
         titleIcon = undefined
     } = $props();
@@ -51,6 +52,9 @@
 
     /** @param {MouseEvent} e */
     function handleBackdropClick(e) {
+        if (disableBackdropClick) {
+            return;
+        }
         if (e.target === e.currentTarget) {
             toggleModal();
         }
diff --git a/src/lib/styles/pages/_chat.scss b/src/lib/styles/pages/_chat.scss
index ba3ded9b..39fbad28 100644
--- a/src/lib/styles/pages/_chat.scss
+++ b/src/lib/styles/pages/_chat.scss
@@ -1439,13 +1439,14 @@
 
 /* Scrollable thread area (replaces .chat-scrollbar.chat-content.scroll-bottom-to-top) */
 
-
 .cb-msgs-scroll {
-    display: flex;
-    flex-direction: column-reverse;
-    overflow-y: auto;
+    overflow-y: scroll;
     scrollbar-width: none;
     scroll-behavior: smooth;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
 }
 
 
@@ -1459,15 +1460,6 @@
 }
 
 
-/* Alias of .cb-msgs-scroll for clarity at the markup site */
-
-
-.cb-msgs-scroll-rev {
-    display: flex;
-    flex-direction: column-reverse;
-}
-
-
 /* Conversation container (replaces .chat-conversation.p-3) */
 
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index d651ab88..edd023cb 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { onMount, setContext, tick } from 'svelte';
+	import { onDestroy, onMount, setContext, tick } from 'svelte';
 	import { get } from 'svelte/store';
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import Viewport from 'svelte-viewport-info';
@@ -232,6 +232,10 @@
 		autoScrollToBottom: autoScrollToBottom
 	});
 
+	onDestroy(() => {
+		scrollbars.forEach(scrollbar => scrollbar?.destroy?.());
+	});
+
 	onMount(async () => {
 		disableSpeech = navigator.userAgent.includes('Firefox');
 		// @ts-ignore
@@ -268,10 +272,9 @@
 		// @ts-ignore
 		await signalr.start(page.params.conversationId);
 
-		scrollbars = [
-			document.querySelector('.cb-msgs-scroll')
-		].filter(Boolean);
-		refresh();
+		initScrollbar();
+		await refresh(true);
+		pinToBottomWhileSettling();
 
 		window.addEventListener('message', async (e) => {
 			if (e.data.action === ChatAction.Logout) {
@@ -284,6 +287,15 @@
 		});
 	});
 
+	function initScrollbar() {
+		/** @type {HTMLElement | null} */
+		const msgScrollElem = document.querySelector('.cb-msgs-scroll');
+		if (msgScrollElem) {
+			// @ts-ignore
+			scrollbars = [OverlayScrollbars(msgScrollElem, options)];
+		}
+	}
+
 	function handleLogoutAction() {
 		resetStorage(true);
 	}
@@ -443,7 +455,8 @@
 		return dialogs;
     }
 
-	async function refresh() {
+	/** @param {boolean} stopScroll */
+	async function refresh(stopScroll = false) {
 		// trigger UI render
 		dialogs = await refreshDialogs();
 		lastBotMsg = null;
@@ -454,7 +467,9 @@
 		groupedDialogs = groupDialogs(dialogs);
 		await tick();
 
-		autoScrollToBottom();
+		if (!stopScroll) {
+			autoScrollToBottom();
+		}
     }
 
 	let _autoScrollScheduled = false;
@@ -462,16 +477,54 @@
 		if (_autoScrollScheduled) return;
 		_autoScrollScheduled = true;
 		requestAnimationFrame(() => {
-			scrollbars.forEach(scrollbar => {
-				if (!scrollbar) return;
-				setTimeout(() => {
-					scrollbar.scrollTo({ top: scrollbar.scrollHeight, behavior: 'smooth' });
-				}, 150);
-			});
-			_autoScrollScheduled = false;
+			const scrollToBottom = () => {
+				scrollbars.forEach(scrollbar => {
+					if (!scrollbar) return;
+					const { viewport } = scrollbar.elements();
+					viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
+				});
+				_autoScrollScheduled = false;
+			};
+			scrollToBottom();
 		});
 	}
 
+	/**
+	 * Keep the thread pinned to the very bottom while the initial layout settles.
+	 * Async content (images, code blocks, mermaid diagrams) can grow the height
+	 * after first paint, so a fixed delay isn't enough — a ResizeObserver re-pins
+	 * on every height change using instant `scrollTop` writes (no animation, no
+	 * visible scroll). Pinning stops as soon as the user interacts with the pane,
+	 * or after a safety timeout, so it never fights manual scrolling.
+	 * @param {number} timeoutMs
+	 */
+	function pinToBottomWhileSettling(timeoutMs = 3000) {
+		const scrollbar = scrollbars[0];
+		if (!scrollbar) return;
+
+		const { viewport } = scrollbar.elements();
+		const content = viewport.firstElementChild || viewport;
+		const pin = () => { viewport.scrollTop = viewport.scrollHeight; };
+		pin();
+
+		const observer = new ResizeObserver(pin);
+		observer.observe(content);
+
+		/** @type {ReturnType<typeof setTimeout>} */
+		let timer;
+		const stop = () => {
+			observer.disconnect();
+			clearTimeout(timer);
+			viewport.removeEventListener('wheel', stop);
+			viewport.removeEventListener('pointerdown', stop);
+			viewport.removeEventListener('keydown', stop);
+		};
+		viewport.addEventListener('wheel', stop, { passive: true });
+		viewport.addEventListener('pointerdown', stop);
+		viewport.addEventListener('keydown', stop);
+		timer = setTimeout(stop, timeoutMs);
+	}
+
 	/** @param {import('$conversationTypes').ChatResponseModel[]} dialogs */
 	function assignMessageDisclaimer(dialogs) {
 		if (!dialogs) return null;
@@ -1699,6 +1752,7 @@
 	title={'Send message'}
 	size={'5xl'}
 	isOpen={isOpenBigMsgModal}
+	disableBackdropClick={true}
 	toggleModal={() => toggleBigMessageModal()}
 	confirm={() => sendBigMessage()}
 	cancel={() => toggleBigMessageModal()}
@@ -1899,17 +1953,17 @@
 						</div>
 					</div>
 
-				<StateModal
-					isOpen={isOpenUserAddStateModal}
-					inline
-					bind:states={userAddStates}
-					requireActiveRounds
-					toggleModal={() => toggleUserAddStateModal()}
-					confirm={() => handleConfirmUserAddStates()}
-					cancel={() => toggleUserAddStateModal()}
-				/>
-
-				<div class={`cb-msgs-scroll cb-msgs-content cb-msgs-scroll-rev ${!loadEditor ? 'cb-msgs-content-expand' : ''}`}>
+					<StateModal
+						isOpen={isOpenUserAddStateModal}
+						inline
+						bind:states={userAddStates}
+						requireActiveRounds
+						toggleModal={() => toggleUserAddStateModal()}
+						confirm={() => handleConfirmUserAddStates()}
+						cancel={() => toggleUserAddStateModal()}
+					/>
+
+					<div class={`cb-msgs-scroll cb-msgs-content ${!loadEditor ? 'cb-msgs-content-expand' : ''}`}>
 						<div class="cb-conv">
 							<ul class="cb-conv-list">
 								{#each Object.entries(groupedDialogs) as [createDate, dialogGroup]}
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
index 3e8ad0b8..e0f87077 100644
--- a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
@@ -68,14 +68,14 @@
 
     onMount(() => {
         // Load history, wait for Svelte to flush the new list items to the
-        // DOM, then attach OverlayScrollbars and scroll to bottom. Without
+        // DOM, then attach OverlayScrollbars and pin to the bottom. Without
         // the tick() wait, scrollHeight is read before the rows render and
         // the viewport ends up parked at the top.
         (async () => {
             await Promise.all([getChatContentLogs(), getChatStateLogs()]);
             await tick();
             initScrollbars();
-            scroll();
+            pinToBottomWhileSettling();
         })();
 
         return () => {
@@ -111,6 +111,43 @@
         });
     }
 
+    /**
+     * Keep each log panel pinned to the very bottom while the initial layout
+     * settles. Async content can grow the row heights after first paint, so a
+     * fixed delay isn't enough — a ResizeObserver re-pins on every height change
+     * using instant `scrollTop` writes (no animation, no visible scroll).
+     * Pinning stops as soon as the user interacts with a panel, or after a
+     * safety timeout, so it never fights manual scrolling.
+     * @param {number} timeoutMs
+     */
+    function pinToBottomWhileSettling(timeoutMs = 3000) {
+        scrollbars.forEach(scrollbar => {
+            if (!scrollbar) return;
+
+            const { viewport } = scrollbar.elements();
+            const content = viewport.firstElementChild || viewport;
+            const pin = () => { viewport.scrollTop = viewport.scrollHeight; };
+            pin();
+
+            const observer = new ResizeObserver(pin);
+            observer.observe(content);
+
+            /** @type {ReturnType<typeof setTimeout>} */
+            let timer;
+            const stop = () => {
+                observer.disconnect();
+                clearTimeout(timer);
+                viewport.removeEventListener('wheel', stop);
+                viewport.removeEventListener('pointerdown', stop);
+                viewport.removeEventListener('keydown', stop);
+            };
+            viewport.addEventListener('wheel', stop, { passive: true });
+            viewport.addEventListener('pointerdown', stop);
+            viewport.addEventListener('keydown', stop);
+            timer = setTimeout(stop, timeoutMs);
+        });
+    }
+
     function initScrollbars() {
         scrollbarElements.forEach(item => {
             const elem = document.querySelector(item.id);