diff --git a/config.py b/config.py
index 89e8086..63f622c 100644
--- a/config.py
+++ b/config.py
@@ -9,7 +9,7 @@ import logging
 
 log = logging.getLogger("caic")
 
-VERSION = "v0.17.17"
+VERSION = "v0.17.18"
 OLLAMA_BASE = os.environ.get("OLLAMA_BASE", "http://localhost:11434")
 LLAMA_SERVER_BASE = os.environ.get("LLAMA_SERVER_BASE", "http://192.168.50.108:8081")
 SEARXNG_BASE = "http://localhost:8888"
diff --git a/templates/index.html b/templates/index.html
index 40d7a38..6822697 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -147,7 +147,10 @@ body { font-family: var(--font-body); background: var(--bg-primary); color: var(
 .skill-risk { display:inline-block; margin-left:8px; padding:1px 6px; border-radius:10px; font-size:10px; text-transform:uppercase; border:1px solid var(--border); color:var(--text-secondary); }
 .skill-item.disabled .skill-meta { opacity:0.6; }
 
-.chat-container { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
+.chat-container { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:8px; }
+.msg-pair { display:flex; flex-direction:column; gap:8px; border-radius:var(--radius); padding:12px 12px 8px; border-left:3px solid transparent; }
+.msg-pair:nth-child(odd) { background:rgba(255,255,255,0.015); border-left-color:rgba(0,136,187,0.25); }
+.msg-pair:nth-child(even) { background:rgba(255,255,255,0.035); border-left-color:rgba(243,156,18,0.25); }
 .welcome-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); text-align:center; gap:12px; }
 .welcome-screen .logo { font-family:var(--font-mono); font-size:48px; color:var(--accent-dim); opacity:0.5; }
 .welcome-screen .welcome-logo { max-width:70%; height:auto; object-fit:contain; opacity:0.85; }
@@ -1411,8 +1414,18 @@ function appendMessage(role, content, animate, isSearch = false, afterEl = null)
     const now = new Date();
     const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
     div.innerHTML = `<div class="avatar">${role === 'user' ? 'YOU' : 'AI'}</div><div class="content"><div class="role-label">${role}${role === 'user' ? ' <span class="msg-time">' + timeStr + '</span>' : ''}</div><div class="text">${content ? renderMarkdown(content) : ''}</div>${role === 'assistant' ? '<div class="msg-toolbar"></div>' : ''}</div>`;
-    if (afterEl) {
-        afterEl.parentNode.insertBefore(div, afterEl.nextSibling);
+    if (role === 'user') {
+        const pair = document.createElement('div');
+        pair.className = 'msg-pair' + (isSearch ? ' search-pair' : '');
+        pair.appendChild(div);
+        container.prepend(pair);
+    } else if (role === 'assistant') {
+        const pair = afterEl ? afterEl.closest('.msg-pair') : container.querySelector('.msg-pair');
+        if (pair) {
+            pair.appendChild(div);
+        } else {
+            container.prepend(div);
+        }
     } else {
         container.prepend(div);
     }