UX: collapse prompt to compact bottom bar when output is displayed

When output generates, the center prompt card smoothly slides to a
compact re-prompt bar at the bottom-left. The branding caption fades
out. Users can immediately type a new prompt and generate again.
When output is reset, everything returns to the centered layout.

index.html

@@ -249,6 +249,66 @@
             flex-direction: column;
             align-items: center;
             gap: 20px;
+            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        /* --- Output Mode: compact re-prompt bar at bottom-left --- */
+        .viewport-center-trigger.output-mode {
+            top: auto;
+            bottom: 24px;
+            left: 24px;
+            transform: none;
+            width: calc(100% - 48px);
+            max-width: 560px;
+            gap: 0px;
+        }
+
+        .viewport-center-trigger.output-mode .center-prompt-card {
+            border-radius: 14px;
+            padding: 8px 12px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+            background: rgba(10, 15, 30, 0.55);
+        }
+
+        .viewport-center-trigger.output-mode .center-prompt-header {
+            display: none;
+        }
+
+        .viewport-center-trigger.output-mode .center-prompt-body textarea.prompt-textarea {
+            height: 24px;
+            font-size: 13px;
+        }
+
+        .viewport-center-trigger.output-mode .center-prompt-footer {
+            border-top: none;
+            padding-top: 4px;
+            margin-top: 0;
+        }
+
+        .viewport-center-trigger.output-mode .center-options-btn {
+            padding: 6px 12px;
+            font-size: 12px;
+        }
+
+        .viewport-center-trigger.output-mode .center-generate-btn {
+            padding: 6px 16px;
+            font-size: 12px;
+        }
+
+        .viewport-center-trigger.output-mode .quick-examples-container {
+            display: none;
+        }
+
+        /* Hide branding when output is showing */
+        .viewport-bottom.output-hidden {
+            opacity: 0;
+            pointer-events: none;
+            transform: translateY(30px);
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .viewport-bottom {
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
         .center-prompt-card {
@@ -2441,6 +2501,7 @@
                 bgDownloadLink.href = videoUrl;
                 outputActionsCard.style.display = "flex";
                 outputTextContainer.style.display = "none";
+                enterOutputMode();
                 console.log("Video output displayed:", videoUrl);
             } 
             // Output Image generated: Takes up full-screen background
@@ -2458,6 +2519,7 @@
                 bgDownloadLink.href = imageUrl;
                 outputActionsCard.style.display = "flex";
                 outputTextContainer.style.display = "none";
+                enterOutputMode();
                 console.log("Image output displayed:", imageUrl);
             } 
             // Output Text / Question answers: Rendered in styled overlay card on right
@@ -2465,6 +2527,7 @@
                 outputTextContent.textContent = textData;
                 outputTextContainer.style.display = "block";
                 outputActionsCard.style.display = "none";
+                enterOutputMode();
                 console.log("Text output displayed:", textData);
             } else {
                 console.warn("displayResult: No usable output found, resetting");
@@ -2493,8 +2556,24 @@
             outputTextContainer.style.display = "none";
             outputTextContent.textContent = "";
 
+            exitOutputMode();
             lucide.createIcons();
         }
+
+        // --- Output mode: collapse prompt to bottom, reveal full output ---
+        function enterOutputMode() {
+            const centerPanel = document.querySelector(".viewport-center-trigger");
+            const bottomPanel = document.querySelector(".viewport-bottom");
+            if (centerPanel) centerPanel.classList.add("output-mode");
+            if (bottomPanel) bottomPanel.classList.add("output-hidden");
+        }
+
+        function exitOutputMode() {
+            const centerPanel = document.querySelector(".viewport-center-trigger");
+            const bottomPanel = document.querySelector(".viewport-bottom");
+            if (centerPanel) centerPanel.classList.remove("output-mode");
+            if (bottomPanel) bottomPanel.classList.remove("output-hidden");
+        }
     </script>
 </body>
 </html>