Reworking css

ollama_answers.py

@@ -876,8 +876,41 @@ FRONTEND_JS_TEMPLATE = r"""
     };
     const box = document.getElementById('sxng-stream-box');
     const data = document.getElementById('sxng-stream-data');
-    const wrapper = box.closest('.answer');
-    if (wrapper) wrapper.style.display = 'none';
+
+    // Move AI Overview outside #answers, place it before #results
+    (function relocateBox() {
+        const answersDiv = document.getElementById('answers');
+
+        if (!box || !answersDiv) return;
+
+        // Create our own container
+        const aiContainer = document.createElement('div');
+        aiContainer.id = 'ai-answers';
+        aiContainer.style.cssText = [
+            'background: var(--color-answer-background)',
+            'padding: 1rem',
+            'margin: 0 0 1rem 0',
+            'color: var(--color-answer-font)',
+            'border-radius: 8px',
+            'box-sizing: border-box',
+            'width: 100%'
+        ].join('; ');
+
+        // Move our box into the new container
+        aiContainer.appendChild(box);
+
+        const resultsGrid = document.getElementById('results');
+        if (resultsGrid) {
+            // Insert as first child of #results grid so grid-area:answers applies
+            resultsGrid.insertBefore(aiContainer, resultsGrid.firstChild);
+        } else {
+            answersDiv.parentNode.insertBefore(aiContainer, answersDiv);
+        }
+
+        // Hide #answers entirely since our box is now elsewhere
+        answersDiv.style.display = 'none';
+    })();
+
     let restored = false;
     let isStreaming = false;
 
@@ -947,7 +980,6 @@ FRONTEND_JS_TEMPLATE = r"""
         isStreaming = true;
         try {
             const ctx = auxContext || conversation.originalContext;
-            if (wrapper) wrapper.style.display = '';
             box.style.display = 'block';
 
             const controller = new AbortController();
@@ -1002,6 +1034,11 @@ FRONTEND_JS_TEMPLATE = r"""
                 data.appendChild(cursor);
             }
 
+            const streamContainer = document.createElement('div');
+            streamContainer.className = 'sxng-stream-container';
+            if (cursor) cursor.before(streamContainer);
+            else data.appendChild(streamContainer);
+
             let buffer = '';
             let fullText = '';
             const flushBuffer = (force = false) => {
@@ -1009,8 +1046,7 @@ FRONTEND_JS_TEMPLATE = r"""
 
                 if (force) {
                     const fragment = renderCitations(buffer, urls);
-                    if (cursor) cursor.before(fragment);
-                    else data.appendChild(fragment);
+                    streamContainer.appendChild(fragment);
                     buffer = '';
                     return;
                 }
@@ -1025,12 +1061,12 @@ FRONTEND_JS_TEMPLATE = r"""
                         const s = document.createElement('span');
                         s.className = 'sxng-chunk';
                         s.textContent = preText;
-                        cursor.before(s);
+                        streamContainer.appendChild(s);
                     }
 
                     const citationText = match[0];
                     const fragment = renderCitations(citationText, urls);
-                    cursor.before(fragment);
+                    streamContainer.appendChild(fragment);
 
                     buffer = buffer.substring(match.index + match[0].length);
                 }
@@ -1041,7 +1077,7 @@ FRONTEND_JS_TEMPLATE = r"""
                         const s = document.createElement('span');
                         s.className = 'sxng-chunk';
                         s.textContent = buffer;
-                        cursor.before(s);
+                        streamContainer.appendChild(s);
                         buffer = '';
                     }
                 } else {
@@ -1050,7 +1086,7 @@ FRONTEND_JS_TEMPLATE = r"""
                         const s = document.createElement('span');
                         s.className = 'sxng-chunk';
                         s.textContent = safeChunk;
-                        cursor.before(s);
+                        streamContainer.appendChild(s);
                     }
                     buffer = buffer.substring(openIdx);
 
@@ -1058,7 +1094,7 @@ FRONTEND_JS_TEMPLATE = r"""
                         const s = document.createElement('span');
                         s.className = 'sxng-chunk';
                         s.textContent = buffer[0];
-                        cursor.before(s);
+                        streamContainer.appendChild(s);
                         buffer = buffer.substring(1);
                     }
                 }
@@ -1120,11 +1156,9 @@ FRONTEND_JS_TEMPLATE = r"""
                 }
             }
 
+            streamContainer.remove();
             if (cursor) cursor.remove();
 
-            // Remove only the streamed chunk spans added during this stream
-            Array.from(data.querySelectorAll('.sxng-chunk')).forEach(node => node.remove());
-
             const rendered = parseMarkdown(fullText.trim());
             const mdDiv = document.createElement('div');
             mdDiv.className = 'sxng-md-content';
@@ -2028,7 +2062,7 @@ class SXNGPlugin(Plugin):
                 .replace("__JS_Q__", js_q)
 
             html_payload = f'''
-                <article id="sxng-stream-box" class="answer" style="display:none; margin-top: 0; margin-bottom: 0;">
+                <article id="sxng-stream-box" class="answer" style="display:none; margin: 0; padding: 0;">
                     <style>
                         @keyframes sxng-fade-pulse {{
                             0%, 100% {{ opacity: 0.1; }}