ui: widen layout and give media its own dedicated canvas zone

index.html

@@ -223,7 +223,7 @@
 
     <!-- NVIDIA Brand Navigation Header (Transparent dark blur) -->
     <nav class="bg-black/40 backdrop-blur-md sticky top-0 z-50 px-6 py-3.5 border-b border-white/5 shadow-lg">
-        <div class="max-w-7xl mx-auto flex items-center justify-between">
+        <div class="max-w-[1600px] mx-auto flex items-center justify-between">
             <!-- Official Styled NVIDIA Brand Text Logo -->
             <a href="#" class="flex items-center gap-1.5 select-none group">
                 <svg class="h-6 w-6 text-nvidia-brand transition-transform duration-500 group-hover:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
@@ -242,13 +242,13 @@
     </nav>
 
     <!-- MAIN MINIMAL LAYOUT CONTAINER -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 lg:pt-10 space-y-8">
+    <main class="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 pt-8 lg:pt-10 space-y-8">
         
         <!-- Giant Showcase Container (SAM 3 Full-Bleed Style) -->
         <div class="relative w-full rounded-[32px] overflow-hidden border border-white/5 bg-[#080a0e] shadow-2xl h-[580px] lg:h-[640px] flex select-none">
             
-            <!-- 1. Background Media Canvas (Coverage Layer) -->
-            <div class="absolute inset-0 z-0 flex items-center justify-center bg-black/40">
+            <!-- 1. Dedicated Media Canvas (offset right of the control panel on desktop) -->
+            <div class="absolute inset-y-0 right-0 left-0 lg:left-[440px] z-0 flex items-center justify-center bg-black/40 lg:border-l lg:border-white/10">
                 <!-- Drop Zone (Initially shown) -->
                 <div id="drop-zone" class="absolute inset-0 border-none rounded-none bg-transparent flex flex-col items-center justify-center p-4 text-center cursor-pointer transition-all z-10">
                     <div id="upload-prompt" class="space-y-3 opacity-60 hover:opacity-100 transition-opacity">
@@ -291,8 +291,8 @@
                 </div>
             </div>
 
-            <!-- 2. Left Floating Overlay Panel (Title, simple selectors, accordion, and action buttons) -->
-            <div class="absolute left-6 lg:left-12 top-8 bottom-8 z-30 flex flex-col justify-between max-w-sm sm:max-w-md pointer-events-none">
+            <!-- 2. Left Control Panel (Title, simple selectors, accordion, and action buttons) -->
+            <div class="absolute left-6 top-8 bottom-8 z-30 flex flex-col justify-between w-[380px] max-w-[calc(100%-3rem)] pointer-events-none">
                 
                 <!-- Main Header Overlay text -->
                 <div class="space-y-3 pt-4 pointer-events-auto bg-gradient-to-b from-[#080a0e]/90 via-[#080a0e]/60 to-transparent p-4 rounded-2xl">
@@ -432,9 +432,9 @@
 
             </div>
 
-            <!-- 3. Floating Categories Search Bar Overlay (Right/Center side, extremely clean glass box) -->
-            <div class="absolute top-1/2 right-6 lg:right-16 -translate-y-1/2 z-30 flex flex-col items-end gap-2 pointer-events-none w-full max-w-xs">
-                <div class="sam-input-bar rounded-2xl px-3.5 py-2.5 flex items-center gap-2 w-full pointer-events-auto">
+            <!-- 3. Floating Categories Search Bar (bottom-center of the dedicated image zone) -->
+            <div class="absolute bottom-6 left-0 right-0 lg:left-[440px] z-30 flex flex-col items-center gap-2 px-6 pointer-events-none">
+                <div class="sam-input-bar rounded-2xl px-3.5 py-2.5 flex items-center gap-2 w-full max-w-md pointer-events-auto">
                     <svg class="h-4 w-4 text-nvidia-brand shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                     </svg>
@@ -445,13 +445,13 @@
                         </svg>
                     </button>
                 </div>
-                <p class="text-[9px] text-slate-500 text-right leading-relaxed pointer-events-none px-1 max-w-full">
+                <p class="text-[9px] text-slate-500 text-center leading-relaxed pointer-events-none px-1 max-w-md">
                     Comma-separated targets · supports English &amp; Chinese · press <span class="text-slate-400">Enter</span> to run
                 </p>
             </div>
 
-            <!-- Floating Workspace Status -->
-            <div class="absolute bottom-4 right-4 z-30 bg-black/60 backdrop-blur px-2.5 py-1 rounded-lg border border-white/10 text-[9px] text-slate-400 font-mono select-none pointer-events-none">
+            <!-- Floating Workspace Status (top-right of the image zone) -->
+            <div class="absolute top-4 right-4 z-30 bg-black/60 backdrop-blur px-2.5 py-1 rounded-lg border border-white/10 text-[9px] text-slate-400 font-mono select-none pointer-events-none">
                 status: <span id="workspace-status" class="text-slate-200 font-semibold">No Media Loaded</span>
             </div>