fix mobile issue

next.config.ts

@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  allowedDevOrigins: ["192.168.0.117", "192.168.0.*", "192.168.1.*", "localhost", "127.0.0.1"],
   images: {
     remotePatterns: [
       {

src/features/loyaly-ai/components/Composer.tsx

@@ -33,16 +33,16 @@ import {ICONS} from '@/shared/utils/icons';
 const MAX_HEIGHT_PX = 132;
 
 const PILL = [
-  'rounded-[28px] bg-card border border-border shadow-md',
+  'rounded-[28px] bg-zinc-900/90 border border-zinc-700/80 shadow-md',
   'transition-colors duration-150',
-  'focus-within:border-border-strong',
+  'focus-within:border-zinc-500 focus-within:ring-1 focus-within:ring-zinc-500',
   'pl-4 pr-2 py-1.5',
 ].join(' ');
 
 const FIELD = [
   'flex-1 min-w-0 resize-none bg-transparent border-0 outline-none',
-  'text-sm text-primary placeholder:text-secondary',
-  'py-2 leading-6 overflow-y-auto',
+  'text-sm font-medium text-white placeholder:text-zinc-400 placeholder:font-normal',
+  'py-2 leading-6 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden',
 ].join(' ');
 
 export function Composer({

src/shared/layouts/workspace/MobileMenu.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {useRef} from 'react';
+import {useEffect, useRef} from 'react';
 import {MobileNav} from '@astryxdesign/core/MobileNav';
 import {SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav';
 import {Divider} from '@astryxdesign/core/Divider';
@@ -64,6 +64,11 @@ export function MobileMenu() {
   const {isDrawerOpen, setDrawerOpen, closeDrawer} = useSidebar();
   const touchStart = useRef<{x: number; y: number} | null>(null);
 
+  // Automatically close mobile menu on route change
+  useEffect(() => {
+    closeDrawer();
+  }, [pathname, closeDrawer]);
+
   return (
     <MobileNav
       id={NAV_DRAWER_ID}