Update customer.html

customer.html

@@ -16,16 +16,21 @@
                         sans: ['Vazirmatn', 'sans-serif'],
                     },
                     colors: {
-                        obsidian: '#09090b',       /* مشکی تیره خالص */
-                        coal: '#121215',           /* خاکستری ذغالی */
-                        clay: '#1c1c22',           /* خاکستری روشن‌تر */
-                        brass: '#c5a880',          /* برنز گرم */
-                        brassHover: '#dcc6a8',     /* برنز روشن */
+                        obsidian: '#09090b',       /* مشکی مطلق لوکس */
+                        coal: '#111114',           /* زغالی غلیظ */
+                        clay: '#18181c',           /* دودی خاکستری */
+                        brass: '#c5a880',          /* برنز طلایی ویژه */
+                        brassHover: '#e5ca9e',     /* برنز طلایی روشن */
                         emeraldMuted: '#10b981',   /* سبز تایید نهایی */
                     },
                     boxShadow: {
-                        glow: '0 0 20px rgba(197, 168, 128, 0.15)',
-                        greenGlow: '0 0 25px rgba(16, 185, 129, 0.25)',
+                        glow: '0 0 25px rgba(197, 168, 128, 0.18)',
+                        goldRadial: '0 0 40px rgba(197, 168, 128, 0.1)',
+                        emeraldGlow: '0 0 30px rgba(16, 185, 129, 0.25)',
+                    },
+                    animation: {
+                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'bounce-slow': 'bounce 1.5s infinite',
                     }
                 }
             }
@@ -36,83 +41,132 @@
             background-color: #09090b;
             color: #f4f4f5;
             -webkit-tap-highlight-color: transparent;
+            font-feature-settings: "ss01", "ss02";
         }
-        /* افکت شیشه نیمه شفاف طلایی */
+        /* افکت شیشه‌ای پیشرفته */
         .glass-panel {
-            background: rgba(18, 18, 21, 0.7);
-            backdrop-filter: blur(16px);
-            border: 1px border rgba(197, 168, 128, 0.08);
+            background: rgba(17, 17, 20, 0.75);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid rgba(197, 168, 128, 0.08);
+        }
+        .glass-chip {
+            background: rgba(28, 28, 32, 0.65);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.04);
         }
-        /* بافت رسید کاغذی انتهای سفارش */
+        /* بافت رسید دیجیتال */
         .receipt-texture {
-            background-color: #121215;
-            background-image: radial-gradient(rgba(197, 168, 128, 0.03) 1px, transparent 0);
-            background-size: 8px 8px;
+            background-color: #111114;
+            background-image: radial-gradient(rgba(197, 168, 128, 0.04) 1px, transparent 0);
+            background-size: 10px 10px;
         }
-        /* حاشیه دندانه‌دار پایین فاکتور */
+        /* حاشیه دندانه‌دار فاکتور حرارتی */
         .jagged-edge {
-            background-image: linear-gradient(-135deg, #121215 4px, transparent 0), linear-gradient(135deg, #121215 4px, transparent 0);
+            background-image: linear-gradient(-135deg, #111114 4px, transparent 0), linear-gradient(135deg, #111114 4px, transparent 0);
             background-position: left top;
             background-repeat: repeat-x;
             background-size: 8px 8px;
         }
+        /* سفارشی‌سازی اسکرول‌بار مخفی و ظریف */
+        ::-webkit-scrollbar {
+            width: 3px;
+            height: 3px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(197, 168, 128, 0.2);
+            border-radius: 10px;
+        }
+        /* انیمیشن لودر صوتی تفکر */
+        .wave-bar {
+            animation: wave 1.2s ease-in-out infinite;
+        }
+        @keyframes wave {
+            0%, 100% { height: 4px; }
+            50% { height: 18px; }
+        }
     </style>
 </head>
-<body class="min-h-screen flex items-center justify-center font-sans overflow-x-hidden antialiased bg-gradient-to-tr from-obsidian via-[#0d0e12] to-[#120f0a]">
+<body class="min-h-screen flex items-center justify-center font-sans overflow-x-hidden antialiased bg-gradient-to-tr from-obsidian via-[#0c0d11] to-[#14110b] p-0 sm:p-4">
 
-    <!-- تصویر زمینه تزئینی هاله‌های نوری در دسکتاپ -->
-    <div class="hidden lg:block absolute inset-0 overflow-hidden pointer-events-none z-0">
-        <div class="absolute -top-[20%] -left-[10%] w-[500px] h-[500px] rounded-full bg-brass/5 blur-[120px]"></div>
-        <div class="absolute -bottom-[20%] -right-[10%] w-[500px] h-[500px] rounded-full bg-brass/3 blur-[120px]"></div>
+    <!-- هاله‌های نوری شناور بک‌گراند در حالت دسکتاپ -->
+    <div class="hidden md:block absolute inset-0 overflow-hidden pointer-events-none z-0">
+        <div class="absolute top-[10%] left-[15%] w-[450px] h-[450px] rounded-full bg-brass/3 blur-[120px] animate-pulse-slow"></div>
+        <div class="absolute bottom-[10%] right-[15%] w-[450px] h-[450px] rounded-full bg-brass/2 blur-[140px] animate-pulse-slow" style="animation-delay: 1.5s"></div>
     </div>
 
-    <!-- فریم اصلی برنامه (در دسکتاپ به صورت گوشی موبایل هوشمند و در موبایل تمام‌صفحه لود می‌شود) -->
-    <div class="w-full h-screen lg:h-[880px] lg:max-w-[430px] lg:rounded-[40px] lg:border-4 lg:border-[#202025] lg:shadow-[0_0_80px_rgba(0,0,0,0.8)] lg:relative overflow-hidden flex flex-col bg-obsidian z-10 transition-all duration-300">
+    <!-- فریم موبایل شبیه‌سازی‌شده لوکس (در موبایل کاملاً تمام‌صفحه و در دسکتاپ به شکل بدنه گوشی لود می‌شود) -->
+    <div class="w-full h-screen sm:h-[840px] sm:max-w-[410px] sm:rounded-[48px] sm:border-[6px] sm:border-[#1d1d22] sm:shadow-[0_25px_60px_-15px_rgba(0,0,0,0.9)] sm:relative overflow-hidden flex flex-col bg-obsidian z-10 transition-all duration-500 border-none">
 
-        <!-- لایه نهایی ثبت موفقیت‌آمیز سفارش -->
-        <div id="successOverlay" class="hidden absolute inset-0 bg-obsidian/95 z-50 flex flex-col items-center justify-center p-8 text-center space-y-6 transition-all duration-500 opacity-0">
-            <div class="w-20 h-20 rounded-full bg-emeraldMuted/10 border border-emeraldMuted/20 flex items-center justify-center animate-pulse shadow-greenGlow">
-                <svg class="w-10 h-10 text-emeraldMuted" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+        <!-- لایه نهایی انیمیشن فیدبک ثبت موفقیت‌آمیز سفارش -->
+        <div id="successOverlay" class="hidden absolute inset-0 bg-obsidian/98 z-50 flex flex-col items-center justify-center p-8 text-center space-y-6 transition-all duration-500 opacity-0">
+            <div class="w-24 h-24 rounded-full bg-emeraldMuted/10 border border-emeraldMuted/20 flex items-center justify-center animate-pulse shadow-emeraldGlow">
+                <svg class="w-12 h-12 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                 </svg>
             </div>
-            <div class="space-y-2">
-                <h2 class="text-lg font-bold text-white tracking-wide">سفارش ثبت نهایی شد</h2>
-                <p class="text-xs text-zinc-400 max-w-xs leading-relaxed mx-auto">فاکتور شما به سیستم آشپزخانه ارسال گردید. گفتگو با نیلا و حافظه این سشن با موفقیت آزاد و ریست شد.</p>
+            <div class="space-y-3">
+                <h2 class="text-xl font-black text-white tracking-wide">سفارش شما ارسال شد</h2>
+                <p class="text-xs text-zinc-400 max-w-xs leading-relaxed mx-auto">فاکتور انتخابی با موفقیت در صف آشپزخانه ثبت گردید. میز شما جهت ثبت سفارشات بعدی آماده و پاکسازی شد.</p>
             </div>
+            <div class="w-16 h-[1px] bg-brass/20"></div>
+            <div class="text-[10px] text-brass/70 tracking-widest uppercase font-mono">CAFE AI SMART SYSTEM</div>
         </div>
 
-        <!-- صفحه اول: گام انتخاب شماره میز -->
-        <div id="tableSelectorScreen" class="flex-1 flex flex-col items-center justify-between p-6 transition-all duration-500 ease-out z-10">
-            <div class="w-full flex-1 flex flex-col justify-center space-y-8">
+        <!-- نوار وضعیت بالای گوشی شبیه‌سازی شده لوکس (Status Bar) -->
+        <div class="w-full bg-[#0c0d11]/80 backdrop-blur-md px-6 py-3 flex justify-between items-center z-40 border-b border-zinc-900/40 text-[11px] font-medium text-zinc-400">
+            <div id="statusBarClock" class="font-bold tracking-tight">۱۲:۰۰</div>
+            <!-- ناچ یا شکاف بالای صفحه گوشی دسکتاپ -->
+            <div class="hidden sm:block w-24 h-4 bg-black rounded-full absolute left-1/2 transform -translate-x-1/2 top-1.5 border border-zinc-800/20"></div>
+            <div class="flex items-center gap-1.5">
+                <span>5G</span>
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.284 16.284A3 3 0 0012 21a3 3 0 003.716-4.716m-7.432 0A11.963 11.963 0 0112 3c3.12 0 5.964 1.192 8.135 3.135m-16.27 0L21 21" />
+                </svg>
+                <div class="w-5 h-2.5 border border-zinc-500 rounded-[3px] p-[1px] flex items-center">
+                    <div class="w-full h-full bg-zinc-300 rounded-[1px]"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- صفحه اول: گام لوکس انتخاب شماره میز (Table Selector) -->
+        <div id="tableSelectorScreen" class="flex-1 flex flex-col items-center justify-between p-6 pb-8 transition-all duration-500 ease-out z-10">
+            
+            <div class="w-full flex-1 flex flex-col justify-center space-y-10">
                 
-                <!-- لوگو و برند هدر بخش اول -->
-                <div class="text-center space-y-3">
-                    <div class="inline-flex w-14 h-14 rounded-2xl bg-brass/10 border border-brass/20 items-center justify-center mb-1">
-                        <svg class="w-7 h-7 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M17 8h1a4 4 0 1 1 0 8h-1" />
-                            <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" />
-                            <line x1="6" y1="2" x2="6" y2="4" />
-                            <line x1="10" y1="2" x2="10" y2="4" />
-                            <line x1="14" y1="2" x2="14" y2="4" />
-                        </svg>
+                <!-- لوگو تایپ و معرفی برند -->
+                <div class="text-center space-y-4">
+                    <div class="relative inline-flex">
+                        <div class="absolute inset-0 bg-brass/20 rounded-2xl blur-lg animate-pulse-slow"></div>
+                        <div class="relative w-16 h-16 rounded-2xl bg-gradient-to-br from-brass/20 to-brass/5 border border-brass/30 flex items-center justify-center shadow-glow">
+                            <svg class="w-8 h-8 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M17 8h1a4 4 0 1 1 0 8h-1" />
+                                <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" />
+                                <line x1="6" y1="2" x2="6" y2="4" />
+                                <line x1="10" y1="2" x2="10" y2="4" />
+                                <line x1="14" y1="2" x2="14" y2="4" />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="space-y-1">
+                        <h1 class="text-xl font-extrabold tracking-tight text-white">سفارش هوشمند <span class="text-brass">Cafe AI</span></h1>
+                        <p class="text-[11px] text-zinc-500 leading-relaxed max-w-[260px] mx-auto">به دنیای پذیرایی اختصاصی خوش آمدید. لطفا ابتدا شماره میز خود را تایید نمایید.</p>
                     </div>
-                    <h1 class="text-xl font-extrabold text-white tracking-tight">سفارش هوشمند <span class="text-brass">Cafe AI</span></h1>
-                    <p class="text-[11px] text-zinc-500 leading-relaxed max-w-xs mx-auto">لطفاً ابتدا میز خود را فعال کنید تا ارتباط امن گفتگو آغاز گردد.</p>
                 </div>
 
-                <!-- استایل گرید شماره میزها -->
-                <div class="space-y-3">
-                    <div class="text-[10px] text-zinc-500 font-bold uppercase tracking-wider text-center">انتخاب شماره میز</div>
-                    <div class="grid grid-cols-5 gap-2.5">
+                <!-- گرید دایره‌ای میزها -->
+                <div class="space-y-4">
+                    <div class="text-[10px] text-zinc-500 font-extrabold tracking-wider uppercase text-center">انتخاب موقعیت استقرار شما</div>
+                    <div class="grid grid-cols-4 gap-3 max-w-[290px] mx-auto">
                         <script>
-                            for (let i = 1; i <= 5; i++) {
+                            for (let i = 1; i <= 8; i++) {
                                 document.write(`
-                                    <button onclick="selectTable(${i})" id="tableBtn-${i}" class="table-btn aspect-square rounded-xl border border-cafeBorder bg-coal/30 hover:border-brass/40 hover:bg-brass/5 text-zinc-300 font-extrabold text-sm transition-all duration-300 flex flex-col items-center justify-center gap-1">
-                                        <span class="text-xs">${i}</span>
-                                        <svg class="w-3.5 h-3.5 opacity-40 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                                        </svg>
+                                    <button onclick="selectTable(${i})" id="tableBtn-${i}" class="table-btn aspect-square rounded-xl border border-zinc-800 bg-coal/40 hover:border-brass/30 text-zinc-300 font-extrabold text-xs transition-all duration-300 flex flex-col items-center justify-center gap-1 shadow-inner">
+                                        <span class="text-[10px] text-zinc-500 font-medium">میز</span>
+                                        <span class="text-sm font-black">${i}</span>
                                     </button>
                                 `);
                             }
@@ -122,91 +176,128 @@
 
             </div>
 
-            <!-- دکمه تایید ورود به چت -->
-            <button id="confirmTableBtn" disabled onclick="confirmTableSelection()" class="w-full py-4 bg-zinc-800 text-zinc-500 font-bold rounded-2xl text-xs transition-all duration-300 flex items-center justify-center gap-2 cursor-not-allowed">
-                فعالسازی میز و شروع سفارش
+            <!-- دکمه فعالسازی و شروع ارتباط -->
+            <button id="confirmTableBtn" disabled onclick="confirmTableSelection()" class="w-full py-4 bg-zinc-800 text-zinc-500 font-bold rounded-2xl text-xs transition-all duration-300 flex items-center justify-center gap-2 cursor-not-allowed shadow-inner">
+                ثبت موقعیت و شروع گفتگو
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                </svg>
             </button>
         </div>
 
-        <!-- صفحه دوم: محیط چت هوشمند با دستیار هوشمند نیلا -->
-        <div id="chatScreen" class="hidden flex-1 flex flex-col h-full bg-obsidian transition-all duration-500 opacity-0 transform translate-y-6 z-10">
+        <!-- صفحه دوم: محیط چت هوشمند و مدرن با دستیار هوشمند نیلا -->
+        <div id="chatScreen" class="hidden flex-1 flex flex-col h-full bg-obsidian transition-all duration-500 opacity-0 transform translate-y-6 z-10 overflow-hidden">
             
-            <!-- هدر چت صوتی/متنی -->
-            <header class="px-5 py-4 border-b border-cafeBorder bg-coal/40 backdrop-blur-md flex items-center justify-between">
+            <!-- هدر چت متنی / صوتی نیلا -->
+            <header class="px-5 py-4 border-b border-zinc-900/60 bg-[#0c0d11]/90 backdrop-blur-md flex items-center justify-between relative">
                 <div class="flex items-center gap-3">
-                    <div class="w-10 h-10 rounded-xl bg-brass/10 border border-brass/20 flex items-center justify-center">
-                        <svg class="w-5 h-5 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12A10 10 0 0 1 12 2z"/>
-                            <path d="M12 8v4l3 3"/>
-                        </svg>
+                    <div class="relative flex-shrink-0">
+                        <div class="absolute inset-0 bg-brass/30 rounded-full blur-sm animate-pulse"></div>
+                        <div class="relative w-10 h-10 rounded-xl bg-gradient-to-br from-brass/20 to-brass/5 border border-brass/30 flex items-center justify-center">
+                            <span class="font-bold text-brass text-sm">N</span>
+                        </div>
                     </div>
                     <div>
-                        <h2 class="text-xs font-extrabold text-white">دستیار صوتی و متنی (Nila)</h2>
-                        <p class="text-[9px] text-zinc-500 font-medium">سشن اختصاصی میز شماره <span id="activeTableLabel" class="text-brass font-bold">-</span></p>
+                        <h2 class="text-xs font-extrabold text-white">دستیار سفارش‌گیر نیلا (Nila)</h2>
+                        <p class="text-[9px] text-zinc-500 font-medium flex items-center gap-1">
+                            <span>سشن اختصاصی</span>
+                            <span class="w-1 h-1 rounded-full bg-brass/50"></span>
+                            <span>میز شماره <span id="activeTableLabel" class="text-brass font-bold">-</span></span>
+                        </p>
                     </div>
                 </div>
                 
-                <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20">
+                <!-- ویجت نشانگر پایداری زنده شبکه -->
+                <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-[9px] text-emerald-400 font-black tracking-wider">
                     <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
-                    <span class="text-[9px] text-emerald-400 font-bold uppercase tracking-wider">آماده</span>
+                    <span>آنلاین</span>
                 </div>
             </header>
 
-            <!-- باکس چت اصلی حاوی پیام‌ها -->
+            <!-- باکس چت اصلی حاوی کل پیام‌ها -->
             <div id="messagesContainer" class="flex-1 overflow-y-auto p-5 space-y-4">
-                <!-- المان‌های چت از طریق JS تزریق می‌شوند -->
+                <!-- پیام‌های چت به صورت داینامیک از JS تزریق می‌شوند -->
+            </div>
+
+            <!-- بخش تراشه‌ها (Prompt Suggestions) جهت سفارش‌گیری سریع -->
+            <div id="suggestionRow" class="px-5 py-2.5 bg-obsidian border-t border-zinc-900/40 flex gap-2 overflow-x-auto whitespace-nowrap scrollbar-none z-20">
+                <button onclick="sendQuickPrompt('یک فنجان لاته گرم به همراه کیک شکلاتی')" class="glass-chip px-3 py-1.5 rounded-full text-[10px] text-zinc-300 hover:text-brass hover:border-brass/30 transition-all duration-300">
+                    ☕ لاته + کیک شکلاتی
+                </button>
+                <button onclick="sendQuickPrompt('منوی کامل نوشیدنی‌های سرد شما چیست؟')" class="glass-chip px-3 py-1.5 rounded-full text-[10px] text-zinc-300 hover:text-brass hover:border-brass/30 transition-all duration-300">
+                    🥤 منوی نوشیدنی سرد
+                </button>
+                <button onclick="sendQuickPrompt('پیشنهاد ویژه نیلا امروز چیست؟')" class="glass-chip px-3 py-1.5 rounded-full text-[10px] text-zinc-300 hover:text-brass hover:border-brass/30 transition-all duration-300">
+                    ✨ پیشنهاد ویژه نیلا
+                </button>
+                <button onclick="sendQuickPrompt('کروسان ساده به همراه چای ماسالا')" class="glass-chip px-3 py-1.5 rounded-full text-[10px] text-zinc-300 hover:text-brass hover:border-brass/30 transition-all duration-300">
+                    🥐 کروسان + چای ماسالا
+                </button>
             </div>
 
-            <!-- پنل لوکس صورت‌حساب دندانه‌دار کشویی (thermal receipt look) -->
-            <div id="draftOrderContainer" class="hidden border-t border-brass/20 bg-coal/90 backdrop-blur-lg transform transition-all duration-500 ease-in-out">
+            <!-- فاکتور صورت‌حساب کشویی (Sleek Holographic Thermal Receipt) -->
+            <div id="draftOrderContainer" class="hidden border-t border-brass/10 bg-[#0e0e11]/95 backdrop-blur-xl transform transition-all duration-500 ease-in-out z-30">
                 <div class="jagged-edge h-2 w-full -mt-2"></div>
                 <div class="p-5 space-y-4 receipt-texture">
                     
-                    <div class="flex items-center justify-between border-b border-cafeBorder pb-2">
-                        <span class="text-xs font-bold text-brass flex items-center gap-1.5">
-                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <div class="flex items-center justify-between border-b border-zinc-800 pb-3">
+                        <span class="text-xs font-extrabold text-brass flex items-center gap-1.5">
+                            <svg class="w-4 h-4 text-brass" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                             </svg>
-                            صورت‌حساب موقت صادر شده
+                            پیش‌نویس صورت‌حساب میز
                         </span>
-                        <span class="text-[9px] text-zinc-500 font-medium">نیاز به تایید ادمین دارد</span>
+                        <span class="text-[9px] font-mono text-zinc-500">ID: #0582</span>
                     </div>
                     
-                    <!-- لیست خطوط صورت‌حساب -->
-                    <div id="draftItemsList" class="space-y-2 max-h-[120px] overflow-y-auto pr-1">
-                        <!-- اقلام لیست -->
+                    <!-- لیست خطوط پیش‌نویس سفارش -->
+                    <div id="draftItemsList" class="space-y-2 max-h-[140px] overflow-y-auto pr-1">
+                        <!-- آیتم‌ها به صورت اتوماتیک تزریق خواهند شد -->
+                    </div>
+
+                    <!-- بارکد دکوراتیو جهت افزایش حس تکنولوژیک فاکتور -->
+                    <div class="pt-2 pb-1 flex flex-col items-center justify-center opacity-45">
+                        <div class="flex space-x-[1.5px] space-x-reverse h-7 w-2/3 bg-transparent">
+                            <div class="w-1 h-full bg-zinc-300"></div><div class="w-[1.5px] h-full bg-zinc-300"></div><div class="w-2 h-full bg-zinc-300"></div><div class="w-[1px] h-full bg-zinc-300"></div><div class="w-1.5 h-full bg-zinc-300"></div><div class="w-3 h-full bg-zinc-300"></div><div class="w-[1px] h-full bg-zinc-300"></div><div class="w-1 h-full bg-zinc-300"></div><div class="w-2 h-full bg-zinc-300"></div><div class="w-[1.5px] h-full bg-zinc-300"></div>
+                        </div>
+                        <span class="text-[7px] text-zinc-500 font-mono tracking-widest mt-1">NILLA DIGITAL SYSTEM INTEGRATION</span>
                     </div>
 
-                    <!-- دکمه تایید و بستن کشو -->
-                    <button onclick="submitFinalOrder()" class="w-full py-3.5 bg-emerald-600 hover:bg-emerald-500 text-white font-extrabold rounded-xl text-xs transition-all duration-300 flex items-center justify-center gap-2 shadow-greenGlow">
-                        تایید و ارسال نهایی به آشپزخانه
+                    <!-- دکمه تایید نهایی سفارش و ارسال به داشبورد ادمین -->
+                    <button onclick="submitFinalOrder()" class="w-full py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-extrabold rounded-xl text-xs transition-all duration-300 flex items-center justify-center gap-2 shadow-emeraldGlow">
+                        تایید نهایی و ارسال به آشپزخانه
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                        </svg>
                     </button>
                 </div>
             </div>
 
-            <!-- بخش کنترلر انیمیشن نوشتن کلمات و دکمه قطع ارتباط -->
-            <div id="streamingController" class="hidden px-5 py-2.5 border-t border-cafeBorder/40 bg-coal/30 flex items-center justify-between">
-                <div class="flex items-center gap-2 text-[10px] text-zinc-500 font-medium">
-                    <div class="flex space-x-1 space-x-reverse">
-                        <span class="w-1.5 h-1.5 bg-brass rounded-full animate-bounce" style="animation-delay: 0.1s"></span>
-                        <span class="w-1.5 h-1.5 bg-brass rounded-full animate-bounce" style="animation-delay: 0.2s"></span>
-                        <span class="w-1.5 h-1.5 bg-brass rounded-full animate-bounce" style="animation-delay: 0.3s"></span>
+            <!-- بخش افکت لودینگ و کنترل استریمینگ (Waveform Indicator) -->
+            <div id="streamingController" class="hidden px-5 py-3 border-t border-zinc-900/40 bg-[#0c0d11]/80 flex items-center justify-between z-20">
+                <div class="flex items-center gap-3">
+                    <!-- لودر موج صوتی هوش مصنوعی -->
+                    <div class="flex items-end gap-[2px] h-[18px]">
+                        <div class="wave-bar w-[2px] bg-brass rounded-full" style="animation-delay: 0.1s"></div>
+                        <div class="wave-bar w-[2px] bg-brass rounded-full" style="animation-delay: 0.3s"></div>
+                        <div class="wave-bar w-[2px] bg-brass rounded-full" style="animation-delay: 0.5s"></div>
+                        <div class="wave-bar w-[2px] bg-brass rounded-full" style="animation-delay: 0.2s"></div>
                     </div>
-                    <span>نیلا در حال پردازش جریان کلمات...</span>
+                    <span class="text-[10px] text-zinc-400 font-medium">نیلا در حال پردازش داده...</span>
                 </div>
                 
-                <button onclick="stopStreaming()" class="flex items-center gap-1 px-3 py-1 bg-rose-950/20 border border-rose-800/30 hover:bg-rose-900/40 rounded-lg text-[9px] text-rose-400 font-bold transition-all">
+                <button onclick="stopStreaming()" class="flex items-center gap-1.5 px-3 py-1.5 bg-rose-950/10 border border-rose-900/30 hover:bg-rose-900/30 rounded-lg text-[9px] text-rose-400 font-bold transition-all">
                     <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
                         <rect x="4" y="4" width="16" height="16" rx="2" />
                     </svg>
-                    توقف پاسخ
+                    توقف تولید پاسخ
                 </button>
             </div>
 
-            <!-- فیلد پایینی چت و دکمه ارسال پیام -->
-            <form id="customerChatForm" onsubmit="sendCustomerMessage(event)" class="p-3 border-t border-cafeBorder bg-coal/30 flex gap-2">
-                <input type="text" id="customerChatInput" placeholder="چه طعم و نوشیدنی خاصی مد نظرتان است؟..." autocomplete="off" class="flex-1 bg-coal border border-cafeBorder text-xs text-zinc-100 placeholder-zinc-600 rounded-xl px-4 py-3.5 focus:outline-none focus:border-brass/40 transition-all duration-300">
-                <button type="submit" id="sendBtn" class="bg-brass hover:bg-brassHover text-obsidian font-extrabold px-5 py-3.5 rounded-xl text-xs transition-all duration-300 flex items-center justify-center flex-shrink-0 shadow-glow">
+            <!-- فرم پایینی چت به همراه فیلد متنی و دکمه ارسال پیام -->
+            <form id="customerChatForm" onsubmit="sendCustomerMessage(event)" class="p-3.5 border-t border-zinc-900/60 bg-[#0c0d11]/90 flex gap-2.5 z-20">
+                <input type="text" id="customerChatInput" placeholder="مایل به سفارش چه مواردی هستید؟..." autocomplete="off" class="flex-1 bg-coal border border-zinc-800 text-xs text-zinc-100 placeholder-zinc-600 rounded-xl px-4 py-3.5 focus:outline-none focus:border-brass/30 focus:bg-coal/80 transition-all duration-300 shadow-inner">
+                <button type="submit" id="sendBtn" class="bg-brass hover:bg-brassHover text-obsidian font-black px-5 py-3.5 rounded-xl text-xs transition-all duration-300 flex items-center justify-center flex-shrink-0 shadow-glow">
                     <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                     </svg>
@@ -217,51 +308,62 @@
 
     </div>
 
-    <!-- اسکریپت کنترلر منطق وب‌اپ کلاینت -->
+    <!-- کلاینت جاوا اسکریپت پیشرفته و داینامیک وب‌اپ مشتری -->
     <script>
-        // آدرس‌دهی هوشمند بر اساس ورودی مستقیم Flask
-        const initialTableNumber = "{{ table_number }}";
-
+        // دریافت داینامیک شماره میز از سرور Flask
+        const rawTableNumber = "{{ table_number }}";
+        const initialTableNumber = (rawTableNumber && rawTableNumber !== "None" && rawTableNumber !== "") ? parseInt(rawTableNumber) : null;
+        
         let selectedTableNumber = null;
         let abortController = null;
         let isGenerating = false;
         let currentDraftItems = null;
 
-        // بارگذاری اولیه: بای‌پاس صفحه انتخاب در صورت تعریف شماره میز در روت url
+        // مدیریت زنده زمان در بالای گوشی شبیه‌سازی‌شده
+        function updateClock() {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
+            document.getElementById('statusBarClock').innerText = timeString;
+        }
+        setInterval(updateClock, 1000);
+        updateClock();
+
+        // بررسی بارگذاری مستقیم از روی URL
         window.addEventListener('DOMContentLoaded', () => {
-            if (initialTableNumber && initialTableNumber !== "" && initialTableNumber !== "None" && !isNaN(initialTableNumber)) {
-                selectedTableNumber = parseInt(initialTableNumber);
+            if (initialTableNumber && !isNaN(initialTableNumber)) {
+                selectedTableNumber = initialTableNumber;
                 bypassTableSelector();
             }
         });
 
+        // انتخاب شماره میز در صفحه اول
         function selectTable(num) {
             document.querySelectorAll('.table-btn').forEach(btn => {
                 btn.classList.remove('border-brass', 'bg-brass/10', 'text-brass', 'shadow-glow');
-                btn.classList.add('border-cafeBorder', 'bg-coal/30', 'text-zinc-300');
+                btn.classList.add('border-zinc-800', 'bg-coal/40', 'text-zinc-300');
             });
-
             const activeBtn = document.getElementById(`tableBtn-${num}`);
-            activeBtn.classList.remove('border-cafeBorder', 'bg-coal/30', 'text-zinc-300');
+            activeBtn.classList.remove('border-zinc-800', 'bg-coal/40', 'text-zinc-300');
             activeBtn.classList.add('border-brass', 'bg-brass/10', 'text-brass', 'shadow-glow');
-
+            
             selectedTableNumber = num;
-
             const confirmBtn = document.getElementById('confirmTableBtn');
             confirmBtn.disabled = false;
             confirmBtn.classList.remove('bg-zinc-800', 'text-zinc-500', 'cursor-not-allowed');
-            confirmBtn.classList.add('bg-brass', 'text-obsidian', 'hover:bg-brassHover');
+            confirmBtn.classList.add('bg-brass', 'text-obsidian', 'hover:bg-brassHover', 'shadow-glow');
         }
 
+        // تایید انتخاب میز و هدایت به آدرس اختصاصی میز
         function confirmTableSelection() {
             if (!selectedTableNumber) return;
-            bypassTableSelector();
+            // ریدایرکت مرورگر به آدرس داینامیک میز انتخاب شده
+            window.location.href = `/customer/${selectedTableNumber}`;
         }
 
+        // عبور شیک از لایه انتخاب میز به محیط چت هوش مصنوعی
         function bypassTableSelector() {
             const screen1 = document.getElementById('tableSelectorScreen');
             const screen2 = document.getElementById('chatScreen');
-
             screen1.classList.add('opacity-0', 'scale-95');
             setTimeout(() => {
                 screen1.classList.add('hidden');
@@ -274,41 +376,40 @@
             }, 300);
         }
 
-
-        // --- هندلر استریمینگ و جریان پاسخگویی نیلا (SSE Client Engine) ---
-
+        // فراخوانی پیام شروع بکار خودکار نیلا
         async function triggerNilaGreeting() {
-            // ساخت پیام شروع گفتگو به منظور معرفی خودکار نیلا
-            await fetchNilaStream("سلام. من روی صندلی خودم نشستم. خوش آمدگویی کن و بگو چطور می‌توانی کمکم کنی.");
+            await fetchNilaStream("سلام. من روی صندلی خودم نشستم. خوش آمدگویی کن و منوی فعال امروز را معرفی کن.");
         }
 
+        // ارسال از طریق چیپست‌های آماده (تراشه پیشنهاد سریع)
+        async function sendQuickPrompt(text) {
+            if (isGenerating) return;
+            appendChatBubble('user', text);
+            await fetchNilaStream(text);
+        }
+
+        // ارسال پیام جدید متنی مشتری
         async function sendCustomerMessage(e) {
             e.preventDefault();
             if (isGenerating) return;
-
             const input = document.getElementById('customerChatInput');
             const userText = input.value.trim();
             if (!userText) return;
-
             appendChatBubble('user', userText);
             input.value = '';
-
             await fetchNilaStream(userText);
         }
 
+        // هسته مرکزی موتور پردازش استریم کلاینت (SSE Parser Engine)
         async function fetchNilaStream(userText) {
             if (isGenerating) return;
-
             isGenerating = true;
             toggleInputs(true);
-
-            // ایجاد نمونه جدید آبورت کنترلر برای لغو عملیات
+            
             abortController = new AbortController();
-
-            // تزریق حباب پیام خالی جدید برای شروع کلمات استریم
             const botBubbleId = appendChatBubble('model', '');
             const botBubble = document.getElementById(botBubbleId);
-
+            
             try {
                 const response = await fetch(`/api/customer/chat_stream/${selectedTableNumber}`, {
                     method: 'POST',
@@ -316,21 +417,19 @@
                     body: JSON.stringify({ message: userText }),
                     signal: abortController.signal
                 });
-
-                if (!response.ok) throw new Error("قطع ارتباط سرور مرکزی");
-
+                if (!response.ok) throw new Error("پایگاه داده ارتباط موقت سرور قطع شد.");
+                
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder("utf-8");
                 let buffer = "";
-
+                
                 while (true) {
                     const { value, done } = await reader.read();
                     if (done) break;
-
                     buffer += decoder.decode(value, { stream: true });
                     const lines = buffer.split("\n");
-                    buffer = lines.pop(); // بافرینگ بخش ناقص سطر آخر
-
+                    buffer = lines.pop(); 
+                    
                     for (const line of lines) {
                         if (!line.trim() || !line.startsWith("data: ")) continue;
                         
@@ -339,44 +438,38 @@
                             const data = JSON.parse(jsonStr);
                             
                             if (data.type === 'text') {
-                                // چسباندن کاراکترها به انتهای حباب
                                 botBubble.textContent += data.content;
                             } else if (data.type === 'draft') {
-                                // بالا آمدن کشوی صورت‌حساب دندانه‌دار
                                 showReceipt(data.items);
                             } else if (data.type === 'error') {
                                 botBubble.textContent = data.content;
                             }
                         } catch (e) {
-                            console.error("خطا در پارس استریم داده:", e);
+                            console.error("خطا در ساختار استریم:", e);
                         }
                     }
                     
-                    // اسکرول نرم به پایین حین افزایش طول متن
                     const container = document.getElementById('messagesContainer');
                     container.scrollTop = container.scrollHeight;
                 }
-
                 finalizeStreamTurn();
-
             } catch (err) {
                 if (err.name === 'AbortError') {
-                    botBubble.textContent += ' [جریان پاسخ توسط کاربر لغو گردید]';
+                    botBubble.textContent += ' [مکالمه توسط کاربر لغو گردید]';
                 } else {
-                    botBubble.textContent = "بروز اختلال در شبکه: " + err.message;
+                    botBubble.textContent = "بروز خطا در اتصال مرکزی: " + err.message;
                 }
                 finalizeStreamTurn();
             }
         }
 
+        // قطع جریان استریم لایو
         async function stopStreaming() {
             if (abortController) {
                 abortController.abort();
             }
             isGenerating = false;
             toggleInputs(false);
-
-            // فراخوانی API قطع ارتباط سرور
             try {
                 await fetch(`/api/customer/stop/${selectedTableNumber}`, { method: 'POST' });
             } catch (e) {
@@ -393,78 +486,80 @@
             const input = document.getElementById('customerChatInput');
             const sendBtn = document.getElementById('sendBtn');
             const streamController = document.getElementById('streamingController');
-
+            const sugRow = document.getElementById('suggestionRow');
+            
             if (generating) {
                 input.disabled = true;
                 sendBtn.disabled = true;
                 sendBtn.classList.add('opacity-40', 'cursor-not-allowed');
                 streamController.classList.remove('hidden');
+                sugRow.classList.add('opacity-40', 'pointer-events-none');
             } else {
                 input.disabled = false;
                 sendBtn.disabled = false;
                 sendBtn.classList.remove('opacity-40', 'cursor-not-allowed');
                 streamController.classList.add('hidden');
+                sugRow.classList.remove('opacity-40', 'pointer-events-none');
             }
         }
 
+        // تزریق ساختار پیام‌های چت به جعبه گفتگو
         function appendChatBubble(role, content) {
             const container = document.getElementById('messagesContainer');
             const bubbleId = 'bubble-' + Date.now();
-
             let bubbleHtml = '';
+            
             if (role === 'user') {
                 bubbleHtml = `
-                    <div class="flex justify-end gap-2.5 max-w-[85%] mr-auto">
-                        <div class="bg-brass/10 border border-brass/20 text-zinc-100 text-xs rounded-2xl rounded-tl-none px-4 py-3.5 leading-relaxed">
+                    <div class="flex justify-end gap-2.5 max-w-[85%] mr-auto animate-fadeIn">
+                        <div class="bg-brass/15 border border-brass/30 text-zinc-100 text-xs rounded-2xl rounded-tl-none px-4 py-3.5 leading-relaxed shadow-sm">
                             ${content}
                         </div>
                     </div>
                 `;
             } else {
                 bubbleHtml = `
-                    <div class="flex gap-2.5 max-w-[85%] animate-fadeIn">
-                        <div class="w-8 h-8 rounded-xl bg-brass/10 border border-brass/20 flex items-center justify-center flex-shrink-0">
-                            <svg class="w-4 h-4 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <circle cx="12" cy="12" r="10"/>
-                                <path d="M12 8v4l3 3"/>
-                            </svg>
+                    <div class="flex gap-2.5 max-w-[88%] animate-fadeIn">
+                        <div class="w-8 h-8 rounded-xl bg-brass/10 border border-brass/25 flex items-center justify-center flex-shrink-0 shadow-inner">
+                            <span class="text-brass font-bold text-xs font-mono">AI</span>
                         </div>
-                        <div id="${bubbleId}" class="bg-coal border border-cafeBorder text-zinc-200 text-xs rounded-2xl rounded-tr-none px-4 py-3.5 leading-relaxed">
+                        <div id="${bubbleId}" class="bg-coal border border-zinc-800/80 text-zinc-200 text-xs rounded-2xl rounded-tr-none px-4 py-3.5 leading-relaxed shadow-inner">
                             ${content}
                         </div>
                     </div>
                 `;
             }
-
             container.insertAdjacentHTML('beforeend', bubbleHtml);
             container.scrollTop = container.scrollHeight;
             return bubbleId;
         }
 
-
-        // --- فاکتور صورت‌حساب کشویی (Sleek Thermal Receipt Modal) ---
-
+        // نمایش صورت‌حساب دندانه‌دار شکیل روی صفحه مشتری
         function showReceipt(items) {
             currentDraftItems = items;
             const container = document.getElementById('draftOrderContainer');
             const list = document.getElementById('draftItemsList');
-
             list.innerHTML = '';
+            
             items.forEach(item => {
                 list.insertAdjacentHTML('beforeend', `
-                    <div class="flex items-center justify-between text-xs bg-obsidian/60 px-3.5 py-2.5 rounded-lg border border-cafeBorder">
+                    <div class="flex items-center justify-between text-xs bg-coal/80 px-4 py-3 rounded-xl border border-zinc-800/60 shadow-inner">
                         <span class="text-zinc-300 font-bold">${item.name}</span>
-                        <span class="text-brass font-bold">${item.quantity} عدد</span>
+                        <span class="text-brass bg-brass/10 px-2.5 py-1 rounded-lg font-black text-[10px] border border-brass/15">${item.quantity} عدد</span>
                     </div>
                 `);
             });
-
             container.classList.remove('hidden');
+            // اسکرول انتهای جعبه چت برای نمایش کامل فاکتور کشویی
+            setTimeout(() => {
+                const chatContainer = document.getElementById('messagesContainer');
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }, 100);
         }
 
+        // نهایی‌سازی سفارش و فرستادن اطلاعات به ادمین داشبورد
         async function submitFinalOrder() {
             if (!currentDraftItems) return;
-
             try {
                 const response = await fetch('/api/confirm_order', {
                     method: 'POST',
@@ -474,72 +569,47 @@
                         items: currentDraftItems
                     })
                 });
-
                 const result = await response.json();
                 if (response.ok && result.success) {
                     document.getElementById('draftOrderContainer').classList.add('hidden');
                     showSuccessTransition();
                 } else {
-                    alert(result.error || "خطایی در فرآیند ثبت نهایی صورت گرفت.");
+                    alert(result.error || "تاییدیه فاکتور ناموفق بود.");
                 }
             } catch (err) {
-                alert("قطع اتصال به سرور جهت ثبت سفارش: " + err.message);
+                alert("قطع ارتباط زنده پایگاه داده با سیستم مرکزی: " + err.message);
             }
         }
 
+        // انیمیشن ترانزیشن ثبت موفقیت‌آمیز سفارش
         function showSuccessTransition() {
             const overlay = document.getElementById('successOverlay');
             overlay.classList.remove('hidden');
             setTimeout(() => {
                 overlay.classList.remove('opacity-0');
             }, 50);
-
-            // ریست کل چرخه جهت پذیرایی مشتریان بعدی روی همین میز بعد از ۴ ثانیه
+            
+            // چرخه کامل بازسازی صفحه کلاینت بعد از ۵ ثانیه تایید نهایی
             setTimeout(() => {
                 overlay.classList.add('opacity-0');
                 setTimeout(() => {
                     overlay.classList.add('hidden');
-                    resetSesssionAndRestart();
+                    resetSessionAndRestart();
                 }, 500);
-            }, 4000);
+            }, 4500);
         }
 
-        function resetSesssionAndRestart() {
+        // پاکسازی کامل نشست گفتگو و برگشت به فرم انتخاب میز
+        function resetSessionAndRestart() {
             abortController = null;
             isGenerating = false;
             currentDraftItems = null;
-
-            // شستشوی کامل سوابق کلاینت
+            
             document.getElementById('messagesContainer').innerHTML = '';
             document.getElementById('draftOrderContainer').classList.add('hidden');
-
-            // اگر کاربر از ابتدا مستقیم با آدرس میز لود شده بود، ارتباط مجدد با نیلا آغاز شود
-            if (initialTableNumber && initialTableNumber !== "" && initialTableNumber !== "None" && !isNaN(initialTableNumber)) {
-                triggerNilaGreeting();
-            } else {
-                selectedTableNumber = null;
-                const screen1 = document.getElementById('tableSelectorScreen');
-                const screen2 = document.getElementById('chatScreen');
-
-                document.querySelectorAll('.table-btn').forEach(btn => {
-                    btn.classList.remove('border-brass', 'bg-brass/10', 'text-brass', 'shadow-glow');
-                    btn.classList.add('border-cafeBorder', 'bg-coal/30', 'text-zinc-300');
-                });
-
-                const confirmBtn = document.getElementById('confirmTableBtn');
-                confirmBtn.disabled = true;
-                confirmBtn.classList.add('bg-zinc-800', 'text-zinc-500', 'cursor-not-allowed');
-                confirmBtn.classList.remove('bg-brass', 'text-obsidian', 'hover:bg-brassHover');
-
-                screen2.classList.add('opacity-0', 'translate-y-6');
-                setTimeout(() => {
-                    screen2.classList.add('hidden');
-                    screen1.classList.remove('hidden');
-                    setTimeout(() => {
-                        screen1.classList.remove('opacity-0', 'scale-95');
-                    }, 50);
-                }, 300);
-            }
+            
+            // هدایت خودکار کاربر به صفحه اصلی جهت تایید موقعیت جدید
+            window.location.href = '/';
         }
     </script>
 </body>