style: update input bar UI with glassmorphism, refined button spacing, and icon alignment

index.html

@@ -285,18 +285,20 @@
             </div>
 
             <!-- Input Bar -->
-            <div class="input-pill rounded-[2rem] p-2 flex items-end gap-2 pr-3 shadow-2xl overflow-hidden">
-                <div class="flex items-center">
-                    <input type="file" id="file-input" class="hidden" accept="image/*,video/*" multiple>
-                    <button id="upload-trigger" class="p-4 text-white/30 hover:text-[#27D4EA] transition-colors relative group">
-                        <i data-lucide="plus" class="w-6 h-6"></i>
-                        <span id="file-count-badge" class="absolute top-2 right-2 w-4 h-4 bg-indigo-500 text-[10px] text-white rounded-full flex items-center justify-center hidden shadow-lg">0</span>
-                    </button>
-                    <textarea id="user-input" placeholder="Ask MiniCPM-V..." class="flex-1 bg-transparent border-none focus:ring-0 text-white placeholder-white/30 py-4 px-2 resize-none max-h-48 leading-relaxed font-medium" rows="1"></textarea>
-                    <button onclick="regenerate()" class="w-12 h-12 flex items-center justify-center text-white/30 hover:text-white transition-colors shrink-0 mb-1" title="Regenerate last response">
-                        <i data-lucide="refresh-cw" class="w-5 h-5"></i>
+            <div class="input-pill rounded-[2rem] p-2 flex items-end shadow-2xl overflow-hidden bg-white/5 backdrop-blur-xl border border-white/10">
+                <input type="file" id="file-input" class="hidden" accept="image/*,video/*" multiple>
+                <button id="upload-trigger" class="w-12 h-12 flex items-center justify-center text-white/50 hover:text-[#27D4EA] transition-colors relative shrink-0 mb-1">
+                    <i data-lucide="plus" class="w-6 h-6"></i>
+                    <span id="file-count-badge" class="absolute top-2 right-2 w-4 h-4 bg-indigo-500 text-[10px] text-white rounded-full flex items-center justify-center hidden shadow-lg">0</span>
+                </button>
+                
+                <textarea id="user-input" placeholder="Ask MiniCPM-V..." class="flex-1 bg-transparent border-none focus:ring-0 text-white placeholder-white/30 py-4 px-2 resize-none max-h-48 leading-relaxed font-medium" rows="1"></textarea>
+                
+                <div class="flex items-center gap-1 mb-1 pr-2">
+                    <button onclick="regenerate()" class="w-10 h-10 flex items-center justify-center text-white/30 hover:text-white transition-colors shrink-0" title="Regenerate last response">
+                        <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                     </button>
-                    <button id="send-btn" class="send-btn w-12 h-12 text-white rounded-full flex items-center justify-center disabled:opacity-20 disabled:grayscale shrink-0 mb-1">
+                    <button id="send-btn" class="send-btn w-12 h-12 text-white rounded-full flex items-center justify-center disabled:opacity-20 disabled:grayscale shrink-0">
                         <i data-lucide="arrow-up" class="w-5 h-5" id="send-icon"></i>
                         <div id="loading-icon" class="hidden"><div class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div></div>
                     </button>