Add inline media preview inside center prompt input card

- Visual inputs (images/videos) now display directly inside the input box
- Preview shows between task badge and textarea with 220px max-height
- Remove button (X) overlaid on preview to clear attachment
- Synced with file uploads, example selections, and clearSelectedFile
- Auto-hidden in output mode for clean layout

index.html

@@ -299,6 +299,10 @@
             display: none;
         }
 
+        .viewport-center-trigger.output-mode .center-inline-preview {
+            display: none;
+        }
+
         /* Hide branding when output is showing */
         .viewport-bottom.output-hidden {
             opacity: 0;
@@ -355,6 +359,67 @@
             width: 100%;
         }
 
+        /* Inline media attachment preview inside center prompt card */
+        .center-inline-preview {
+            display: none;
+            width: 100%;
+            border-radius: 10px;
+            overflow: hidden;
+            background: rgba(0, 0, 0, 0.25);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            position: relative;
+            margin-bottom: 6px;
+        }
+
+        .center-inline-preview.visible {
+            display: block;
+        }
+
+        .center-inline-preview-media {
+            width: 100%;
+            max-height: 220px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        .center-inline-preview-media img,
+        .center-inline-preview-media video {
+            width: 100%;
+            max-height: 220px;
+            object-fit: contain;
+        }
+
+        .center-inline-preview-remove {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            width: 26px;
+            height: 26px;
+            border-radius: 50%;
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: var(--transition-fast);
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+        }
+
+        .center-inline-preview-remove:hover {
+            background: rgba(239, 68, 68, 0.7);
+            border-color: rgba(239, 68, 68, 0.5);
+        }
+
+        .center-inline-preview-remove i {
+            width: 13px;
+            height: 13px;
+        }
+
         .center-prompt-body textarea.prompt-textarea {
             width: 100%;
             height: 44px;
@@ -1497,6 +1562,15 @@
                     <span class="active-task-pill" id="center-task-badge">Text to Video</span>
                 </div>
                 <div class="center-prompt-body">
+                    <!-- Inline media attachment preview -->
+                    <div class="center-inline-preview" id="center-inline-preview">
+                        <div class="center-inline-preview-media" id="center-inline-preview-media">
+                            <!-- JS injects img/video here -->
+                        </div>
+                        <button class="center-inline-preview-remove" id="center-inline-preview-remove" title="Remove attachment">
+                            <i data-lucide="x"></i>
+                        </button>
+                    </div>
                     <textarea class="prompt-textarea" id="prompt-input" placeholder="Describe what you want to generate..."></textarea>
                 </div>
                 <div class="center-prompt-footer">
@@ -2066,6 +2140,36 @@
             }
         }
 
+        // --- Inline preview element caches ---
+        const centerInlinePreview = document.getElementById("center-inline-preview");
+        const centerInlinePreviewMedia = document.getElementById("center-inline-preview-media");
+        const centerInlinePreviewRemove = document.getElementById("center-inline-preview-remove");
+
+        // Bind inline preview remove button
+        centerInlinePreviewRemove.addEventListener("click", () => clearSelectedFile());
+
+        // --- Sync inline preview inside center prompt card ---
+        function updateCenterInlinePreview(src, type) {
+            centerInlinePreviewMedia.innerHTML = "";
+            if (!src) {
+                centerInlinePreview.classList.remove("visible");
+                return;
+            }
+            if (type === "video") {
+                const video = document.createElement("video");
+                video.src = src;
+                video.muted = true;
+                video.playsInline = true;
+                video.addEventListener("loadeddata", () => { video.currentTime = 0.5; });
+                centerInlinePreviewMedia.appendChild(video);
+            } else {
+                const img = document.createElement("img");
+                img.src = src;
+                centerInlinePreviewMedia.appendChild(img);
+            }
+            centerInlinePreview.classList.add("visible");
+        }
+
         // --- Handle Uploaded Files locally ---
         function handleSelectedFile(file) {
             if (!file) return;
@@ -2078,14 +2182,16 @@
             // Build visual thumbnail preview
             previewMediaWrapper.innerHTML = "";
             const fileType = selectedFile.type;
+            const objectUrl = URL.createObjectURL(selectedFile);
             
             if (fileType.startsWith("image/")) {
                 const img = document.createElement("img");
-                img.src = URL.createObjectURL(selectedFile);
+                img.src = objectUrl;
                 previewMediaWrapper.appendChild(img);
+                updateCenterInlinePreview(objectUrl, "image");
             } else if (fileType.startsWith("video/")) {
                 const video = document.createElement("video");
-                video.src = URL.createObjectURL(selectedFile);
+                video.src = objectUrl;
                 video.muted = true;
                 video.playsInline = true;
                 previewMediaWrapper.appendChild(video);
@@ -2094,12 +2200,14 @@
                 video.addEventListener("loadeddata", () => {
                     video.currentTime = 0.5;
                 });
+                updateCenterInlinePreview(objectUrl, "video");
             } else {
                 const docIcon = document.createElement("div");
                 docIcon.style.color = "var(--text-secondary)";
                 docIcon.innerHTML = '<i data-lucide="file"></i>';
                 previewMediaWrapper.appendChild(docIcon);
                 lucide.createIcons();
+                updateCenterInlinePreview(null, null);
             }
 
             dragDropZone.style.display = "none";
@@ -2112,6 +2220,7 @@
             uploadedFileReference = null;
             fileSelector.value = "";
             filePreviewCard.style.display = "none";
+            updateCenterInlinePreview(null, null);
             
             const isEdit = activeTask === "image_edit" || activeTask === "video_edit";
             const isUnderstanding = activeTask === "x2t_video" || activeTask === "x2t_image";
@@ -2170,6 +2279,7 @@
                 filePreviewCard.style.display = "flex";
                 
                 uploadedFileReference = hasVideo;
+                updateCenterInlinePreview(hasVideo, "video");
             } else if (hasImage && (activeTask === "image_edit" || activeTask === "x2t_image")) {
                 previewFilename.textContent = hasImage.split("/").pop();
                 previewFilesize.textContent = "Example Asset";
@@ -2183,6 +2293,7 @@
                 filePreviewCard.style.display = "flex";
                 
                 uploadedFileReference = hasImage;
+                updateCenterInlinePreview(hasImage, "image");
             }
 
             // Trigger reset of viewer output