Update index.html

index.html

@@ -16,8 +16,8 @@
   <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore-compat.js"></script>
 
   <style>
-    #chat::-webkit-scrollbar, #history-list::-webkit-scrollbar { display: none; }
-    #chat, #history-list { -ms-overflow-style: none; scrollbar-width: none; }
+    #chat::-webkit-scrollbar, #history-list::-webkit-scrollbar, #prompt::-webkit-scrollbar { display: none; }
+    #chat, #history-list, #prompt { -ms-overflow-style: none; scrollbar-width: none; }
 
     .prose-custom p { margin-bottom: 0.5rem; }
     .prose-custom p:last-child { margin-bottom: 0; }
@@ -33,7 +33,7 @@
 
   <div id="debug-banner" class="hidden fixed top-0 left-0 right-0 z-50 bg-red-600/90 text-white text-xs p-2 text-center font-mono"></div>
 
-  <!-- Menu Toggle Button -->
+  <!-- Menu Toggle -->
   <div class="fixed top-3 left-3 z-30">
     <button type="button" id="menu-btn" class="p-2.5 rounded-xl bg-zinc-900/90 backdrop-blur-md border border-zinc-800 text-zinc-300 hover:text-white active:scale-95 transition shadow-lg cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 pointer-events-none">
@@ -46,9 +46,8 @@
 
   <!-- Sidebar Drawer -->
   <aside id="drawer" style="transform: translateX(-100%); transition: transform 0.25s ease;" class="fixed inset-y-0 left-0 w-72 bg-[#18181b] border-r border-zinc-800 z-50 flex flex-col justify-between p-4 shadow-2xl">
-    <!-- Top & History Section -->
     <div class="flex-1 flex flex-col overflow-hidden">
-      <!-- Drawer Header -->
+      <!-- Header -->
       <div class="flex items-center justify-between pb-3 mb-3 border-b border-zinc-800">
         <div class="flex items-center gap-2">
           <div class="w-8 h-8 rounded-full bg-emerald-600 flex items-center justify-center font-bold text-white text-sm">अ</div>
@@ -57,6 +56,25 @@
         <button type="button" id="close-drawer" class="text-zinc-400 hover:text-white p-1 text-sm font-bold cursor-pointer">✕</button>
       </div>
 
+      <!-- Account Badge (Top Placement) -->
+      <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-3 mb-3">
+        <div class="flex items-center justify-between">
+          <div class="truncate mr-2">
+            <p id="user-display" class="text-xs font-medium text-zinc-300 truncate">Guest User</p>
+            <p id="user-plan" class="text-[11px] font-semibold text-emerald-400">Plan: Free</p>
+            <p id="sync-status" class="text-[10px] text-zinc-500">Local Session</p>
+          </div>
+          <div class="flex items-center gap-1.5 shrink-0">
+            <button type="button" id="upgrade-btn" class="px-2 py-1 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-lg text-xs transition cursor-pointer hidden">
+              Upgrade
+            </button>
+            <button type="button" id="auth-action-btn" class="px-2.5 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-medium transition cursor-pointer">
+              Login
+            </button>
+          </div>
+        </div>
+      </div>
+
       <!-- New Chat Button -->
       <button type="button" id="new-chat-btn" class="w-full flex items-center gap-2 px-3 py-2 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-xs font-medium mb-3 transition cursor-pointer">
         <svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
@@ -75,28 +93,8 @@
       </div>
     </div>
 
-    <!-- Bottom Section: Account Card & Settings -->
-    <div class="pt-3 border-t border-zinc-800 mt-2 space-y-2.5">
-      <!-- Account Badge (Moved to Bottom) -->
-      <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-3">
-        <div class="flex items-center justify-between">
-          <div class="truncate mr-2">
-            <p id="user-display" class="text-xs font-medium text-zinc-300 truncate">Guest User</p>
-            <p id="user-plan" class="text-[11px] font-semibold text-emerald-400">Plan: Free</p>
-            <p id="sync-status" class="text-[10px] text-zinc-500">Local Session</p>
-          </div>
-          <div class="flex items-center gap-1.5 shrink-0">
-            <button type="button" id="upgrade-btn" class="px-2 py-1 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-lg text-xs transition cursor-pointer hidden">
-              Upgrade
-            </button>
-            <button type="button" id="auth-action-btn" class="px-2.5 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-medium transition cursor-pointer">
-              Login
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Settings Button -->
+    <!-- Bottom Settings -->
+    <div class="pt-3 border-t border-zinc-800 mt-2">
       <button type="button" id="open-settings" class="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-zinc-300 hover:bg-zinc-800 text-xs transition cursor-pointer">
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
         Settings & Persona
@@ -163,24 +161,23 @@
   </div>
 
   <!-- Bottom Message Bar -->
-  <footer class="p-3 bg-[#18181b] border-t border-zinc-800/80 shrink-0 z-20">
-    <form id="chat-form" class="max-w-3xl mx-auto flex items-center gap-2">
-      <!-- Input Container with Model Switcher -->
-      <div class="flex-1 flex items-center bg-[#1c1c1f] border border-zinc-800 rounded-2xl px-3.5 py-1.5 focus-within:border-zinc-600 transition">
-        <input 
+  <footer class="p-2 sm:p-3 bg-[#18181b] border-t border-zinc-800/80 shrink-0 z-20">
+    <form id="chat-form" class="max-w-3xl mx-auto flex items-end gap-1.5 w-full">
+      <!-- Input Box Container with Auto-expanding Textarea -->
+      <div class="flex-1 min-w-0 flex items-center bg-[#1c1c1f] border border-zinc-800 rounded-2xl px-3 py-1.5 focus-within:border-zinc-600 transition">
+        <textarea 
           id="prompt" 
-          type="text" 
+          rows="1" 
           placeholder="Message Orki..." 
-          autocomplete="off"
-          class="flex-1 bg-transparent text-sm text-zinc-100 placeholder-zinc-500 outline-none pr-2"
-        />
+          class="flex-1 min-w-0 bg-transparent text-sm text-zinc-100 placeholder-zinc-500 outline-none resize-none max-h-28 py-1 leading-snug overflow-y-auto"
+        ></textarea>
 
-        <!-- Model Switcher (Upward Dropdown) -->
-        <div class="relative shrink-0">
+        <!-- Model Switcher Inside Bar -->
+        <div class="relative shrink-0 ml-1.5 mr-0.5">
           <button 
             type="button" 
             id="model-select-btn" 
-            class="flex items-center gap-1 px-2 py-1 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700/50 rounded-lg text-[11px] font-semibold text-zinc-200 transition cursor-pointer"
+            class="flex items-center gap-1 px-2 py-1 bg-zinc-800 hover:bg-zinc-700/80 border border-zinc-700/50 rounded-lg text-[10px] font-semibold text-zinc-200 transition cursor-pointer whitespace-nowrap"
           >
             <span id="current-model-display">Orki 3.0</span>
             <svg class="w-3 h-3 text-zinc-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -219,7 +216,7 @@
       <button 
         type="button" 
         id="mic-btn" 
-        class="p-2.5 rounded-full bg-zinc-800 text-zinc-300 hover:text-white transition cursor-pointer shrink-0"
+        class="p-2.5 rounded-full bg-zinc-800 text-zinc-300 hover:text-white transition cursor-pointer shrink-0 mb-0.5"
       >
         <svg class="w-4 h-4 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
@@ -230,7 +227,7 @@
       <button 
         type="submit" 
         id="send-btn" 
-        class="p-2.5 rounded-full bg-emerald-600 hover:bg-emerald-500 text-white transition cursor-pointer shrink-0"
+        class="p-2.5 rounded-full bg-emerald-600 hover:bg-emerald-500 text-white transition cursor-pointer shrink-0 mb-0.5"
       >
         <svg class="w-4 h-4 transform rotate-[-45deg] translate-x-0.5 -translate-y-0.5 pointer-events-none" viewBox="0 0 24 24" fill="currentColor">
           <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
@@ -238,7 +235,7 @@
       </button>
     </form>
 
-    <p class="text-[11px] text-zinc-500 text-center mt-2 select-none">Orki AI can make mistakes. Always double check.</p>
+    <p class="text-[11px] text-zinc-500 text-center mt-1.5 select-none">Orki AI can make mistakes. Always double check.</p>
   </footer>
 
   <!-- Upgrade Modal -->