feat: Add mobile chat button to Navbar for authenticated users

- Introduce a mobile chat button in the Navbar that is only visible to authenticated users, enhancing accessibility to chat features on mobile devices.
- Include a notification badge to display the count of unread messages, improving user engagement and awareness of new messages.

src/components/layout/Navbar.vue

@@ -175,6 +175,17 @@ const handleLogout = async () => {
           <LanguageSwitcher />
         </div>
 
+        <!-- Mobile Chat Button (only show when authenticated) -->
+        <router-link v-if="auth.isAuthenticated.value" to="/chat" 
+          class="md:hidden relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors">
+          <span class="sr-only">Chat</span>
+          <MessageSquare class="h-5 w-5" />
+          <Badge v-if="totalUnreadMessages > 0" 
+                 class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-red-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
+            {{ totalUnreadMessages > 99 ? '99+' : totalUnreadMessages }}
+          </Badge>
+        </router-link>
+
         <!-- Mobile menu button -->
         <Button variant="ghost" size="icon" @click="toggleMenu"
           class="md:hidden text-foreground hover:text-foreground/90 hover:bg-accent">