refactor(style): align sidebar controls

frontend/public/index.html

@@ -20,13 +20,13 @@
       class="fixed top-0 left-0 right-0 z-50 flex justify-between px-4 md:px-6 pb-3 pointer-events-none"
       style="padding-top: max(1rem, env(safe-area-inset-top));"
     >
-      <div class="size-9 flex items-center justify-start pointer-events-auto">
+      <div class="size-9 flex items-center justify-start pointer-events-none">
         <button
-          x-show="$store.navigation.activeTab === 'chats'"
+          x-show="$store.navigation.activeTab === 'chats' && !$store.chatSidebar.mobileOpen"
           @click="$store.chatSidebar.toggleMobile()"
           :aria-expanded="$store.chatSidebar.mobileOpen ? 'true' : 'false'"
           aria-label="Toggle conversation list"
-          class="md:hidden p-2 rounded-md text-primary-700 hover:bg-primary-300 transition-colors cursor-pointer"
+          class="md:hidden p-2 rounded-md text-primary-700 hover:bg-primary-300 transition-colors cursor-pointer pointer-events-auto"
         >
           <svg
             x-show="!$store.chatSidebar.mobileOpen"
@@ -36,7 +36,7 @@
             viewBox="0 0 24 24"
             stroke="currentColor"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
           </svg>
           <svg
             x-show="$store.chatSidebar.mobileOpen"
@@ -46,9 +46,10 @@
             viewBox="0 0 24 24"
             stroke="currentColor"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
           </svg>
         </button>
+
       </div>
 
       <!-- Main Nav -->

frontend/public/pages/chats.html

@@ -14,12 +14,12 @@
       <template x-if="!$store.chatSidebar.collapsed">
         <div
           class="flex flex-col h-full"
-          style="padding-top: var(--nav-h);"
+          style="padding-top: max(1rem, env(safe-area-inset-top));"
         >
-          <div class="px-2 py-3 flex items-center gap-1">
+          <div class="px-2 pb-3 flex items-center gap-1">
             <button
               @click="$store.chatSidebar.toggleCollapsed()"
-              class="p-1.5 rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer flex-shrink-0"
+              class="size-9 flex items-center justify-center rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer flex-shrink-0"
               title="Collapse sidebar"
               aria-label="Collapse sidebar"
             >
@@ -29,12 +29,13 @@
             </button>
             <button
               @click="selectChat(null)"
-              class="flex-1 flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary-200/60 hover:bg-primary-200 text-primary-800 text-sm font-medium transition-colors cursor-pointer"
+              class="size-9 flex items-center justify-center rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
+              title="New conversation"
+              aria-label="New conversation"
             >
               <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
               </svg>
-              <span>New conversation</span>
             </button>
           </div>
 
@@ -94,12 +95,12 @@
       <!-- Collapsed Icon Rail -->
       <template x-if="$store.chatSidebar.collapsed">
         <div
-          class="flex flex-col items-center py-3 gap-1"
+          class="flex flex-col items-center px-2 pb-3 gap-1"
-          style="padding-top: var(--nav-h);"
+          style="padding-top: max(1rem, env(safe-area-inset-top));"
         >
           <button
             @click="$store.chatSidebar.toggleCollapsed()"
-            class="p-2 rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer"
+            class="size-9 flex items-center justify-center rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer"
             title="Expand sidebar"
             aria-label="Expand sidebar"
           >
@@ -109,7 +110,7 @@
           </button>
           <button
             @click="selectChat(null)"
-            class="p-2 rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
+            class="size-9 flex items-center justify-center rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
             title="New conversation"
             aria-label="New conversation"
           >
@@ -407,7 +408,7 @@
     x-cloak
     x-transition.opacity
     @click="$store.chatSidebar.mobileOpen = false"
-    class="md:hidden fixed inset-0 z-40 bg-black/40"
+    class="md:hidden fixed inset-0 z-60 bg-black/40"
   ></div>
   <div
     x-show="$store.chatSidebar.mobileOpen"
@@ -418,20 +419,31 @@
     x-transition:leave="transform transition-transform duration-300 ease-in"
     x-transition:leave-start="translate-x-0"
     x-transition:leave-end="-translate-x-full"
-    class="md:hidden fixed top-0 left-0 bottom-0 z-40 w-80 max-w-[85vw] bg-primary-50 shadow-2xl flex flex-col"
+    class="md:hidden fixed top-0 left-0 bottom-0 z-60 w-[calc(100vw-3.5rem)] max-w-none bg-primary-50 flex flex-col"
   >
     <div
       class="px-3 pb-3 flex items-center gap-2 border-b border-primary-200/60"
-      style="padding-top: var(--nav-h);"
+      style="padding-top: max(1rem, env(safe-area-inset-top));"
     >
+      <button
+        @click="$store.chatSidebar.mobileOpen = false"
+        class="size-9 flex items-center justify-center rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer flex-shrink-0"
+        title="Collapse sidebar"
+        aria-label="Collapse sidebar"
+      >
+        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
       <button
         @click="selectChat(null); $store.chatSidebar.mobileOpen = false"
-        class="flex-1 flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary-200/60 hover:bg-primary-200 text-primary-800 text-sm font-medium transition-colors cursor-pointer"
+        class="size-9 flex items-center justify-center rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
+        title="New conversation"
+        aria-label="New conversation"
       >
         <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
         </svg>
-        <span>New conversation</span>
       </button>
     </div>