Spaces:

humanvprojectceo
/

Cafe

Running

App Files Files Community

humanvprojectceo commited on about 17 hours ago

Commit

20b03c2

verified ·

1 Parent(s): 0e14eed

Update cafe.html

Browse files

Files changed (1) hide show

cafe.html +786 -298

cafe.html CHANGED Viewed

@@ -3,122 +3,561 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Cafe AI - پنل مدیریت</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Markdown parser -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     fontFamily: {
                         sans: ['Vazirmatn', 'sans-serif'],
                     },
                     colors: {
-                        tabriz: {
-                            900: '#0a1628',
-                            800: '#0f1f38',
-                            700: '#152b48',
-                            600: '#1c3a5e',
-                            500: '#254a75',
                         },
-                        turquoise: {
-                            DEFAULT: '#0891b2',
-                            light: '#22d3ee',
-                            glow: '#67e8f9',
                         },
-                        gold: {
-                            DEFAULT: '#d4af37',
-                            light: '#f0d060',
-                            dark: '#b8960f',
                         },
-                        brass: '#c5a880',
-                        emeraldMuted: '#10b981',
                     },
                     boxShadow: {
-                        'turquoise-glow': '0 0 30px rgba(8, 145, 178, 0.2)',
-                        'gold-glow': '0 0 30px rgba(212, 175, 55, 0.25)',
-                        'inner-soft': 'inset 0 2px 6px rgba(0,0,0,0.3)',
                     },
-                    backgroundImage: {
-                        'persian-geo': "url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%230891b2' stroke-width='0.4' opacity='0.08'/%3E%3Ccircle cx='30' cy='30' r='10' fill='none' stroke='%23d4af37' stroke-width='0.4' opacity='0.06'/%3E%3Cpath d='M30 10L40 30L30 50L20 30Z' fill='none' stroke='%23d4af37' stroke-width='0.3' opacity='0.05'/%3E%3C/svg%3E\")",
                     },
                 }
             }
         }
     </script>
     <style>
         body {
-            background-color: #0a1628;
-            color: #e2e8f0;
             -webkit-tap-highlight-color: transparent;
         }
-        ::-webkit-scrollbar {
-            width: 5px;
-            height: 5px;
         }
-        ::-webkit-scrollbar-track {
-            background: #0a1628;
         }
         ::-webkit-scrollbar-thumb {
-            background: #254a75;
             border-radius: 4px;
         }
         .glass-card {
-            background: rgba(15, 31, 56, 0.65);
-            backdrop-filter: blur(16px);
-            border: 1px solid rgba(8, 145, 178, 0.12);
-            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
         }
         .glass-card:hover {
-            border-color: rgba(212, 175, 55, 0.25);
-            box-shadow: 0 10px 40px -8px rgba(212, 175, 55, 0.15);
-        }
-        /* Markdown rendered content styles */
-        .chat-markdown p { margin-bottom: 0.3em; }
-        .chat-markdown ul { list-style-type: disc; padding-right: 1.2em; margin: 0.2em 0; }
-        .chat-markdown ol { list-style-type: decimal; padding-right: 1.2em; margin: 0.2em 0; }
-        .chat-markdown li { margin-bottom: 0.1em; }
-        .chat-markdown strong { color: #f0d060; }
-        .chat-markdown em { color: #22d3ee; }
-        .chat-markdown code { background: rgba(8,145,178,0.15); padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.9em; }
     </style>
 </head>
-<body class="min-h-screen flex flex-col font-sans selection:bg-gold selection:text-black overflow-x-hidden bg-gradient-to-br from-tabriz-900 via-[#0c1426] to-[#0d1729] antialiased bg-persian-geo bg-repeat">
-    <!-- Ambient light orbs (desktop) -->
-    <div class="hidden lg:block absolute inset-0 overflow-hidden pointer-events-none z-0">
-        <div class="absolute -top-1/4 -right-1/4 w-[700px] h-[700px] rounded-full bg-turquoise/5 blur-[160px]"></div>
-        <div class="absolute -bottom-1/4 -left-1/4 w-[700px] h-[700px] rounded-full bg-gold/5 blur-[160px]"></div>
     </div>
     <!-- Header -->
-    <header class="border-b border-tabriz-700/40 bg-tabriz-800/50 backdrop-blur-xl sticky top-0 z-50 px-4 py-3 md:px-8 shadow-lg">
-        <div class="max-w-7xl mx-auto flex items-center justify-between">
             <div class="flex items-center gap-3">
-                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-turquoise/20 to-gold/10 border border-turquoise/20 flex items-center justify-center shadow-turquoise-glow">
-                    <svg class="w-6 h-6 text-gold" 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>
-                    <h1 class="text-sm font-extrabold text-white flex items-center gap-2">
-                        پنل مدیریت <span class="text-gold">Cafe AI</span>
                     </h1>
-                    <p class="text-[10px] text-turquoise/70 font-medium">پایش برخط سفارشات و منوی هوشمند</p>
                 </div>
             </div>
-            <div class="flex items-center gap-3">
-                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
-                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                     نظارت زنده
                 </span>
             </div>
@@ -127,189 +566,228 @@
     <!-- Main grid -->
     <main class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-12 gap-6 z-10 relative">
         <!-- Right column: orders + current menu + menu upload (7/12) -->
         <section class="lg:col-span-7 flex flex-col gap-6">
-            <!-- Live orders monitor -->
-            <div class="glass-card rounded-3xl p-5 md:p-6 shadow-xl">
-                <div class="flex items-center justify-between mb-4 border-b border-tabriz-700/40 pb-3">
-                    <div class="flex items-center gap-3">
-                        <div class="w-3 h-3 rounded-full bg-gold animate-pulse shadow-gold-glow"></div>
-                        <h2 class="text-sm md:text-base font-extrabold text-white flex items-center gap-2">
-                            <svg class="w-5 h-5 text-turquoise" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-                            </svg>
-                            سفارشات جدید آشپزخانه
-                        </h2>
-                    </div>
-                    <button onclick="fetchActiveOrders()" class="text-[10px] text-turquoise/70 hover:text-gold flex items-center gap-1.5 transition-all duration-300 bg-tabriz-800/30 hover:bg-tabriz-700/40 px-3 py-1.5 rounded-xl">
-                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 15H15" />
-                        </svg>
-                        بروزرسانی
-                    </button>
-                </div>
-                <div id="ordersContainer" class="space-y-4 max-h-[350px] overflow-y-auto pr-1">
-                    <div class="text-center py-12 text-xs text-turquoise/60">در حال بارگذاری لیست سفارشات جاری...</div>
-                </div>
-            </div>
-            <!-- Current Menu (NEW) -->
-            <div class="glass-card rounded-3xl p-5 md:p-6 space-y-4 shadow-xl">
-                <div class="flex items-center justify-between border-b border-tabriz-700/40 pb-3">
-                    <h2 class="text-sm md:text-base font-extrabold text-white flex items-center gap-2">
-                        <svg class="w-5 h-5 text-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-                        </svg>
-                        مدیریت منوی فعال
-                    </h2>
-                    <div class="flex gap-2">
-                        <button onclick="fetchCurrentMenu()" class="text-[10px] text-turquoise/70 hover:text-gold flex items-center gap-1 transition-all bg-tabriz-800/30 hover:bg-tabriz-700/40 px-3 py-1.5 rounded-xl">
                             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 15H15" />
                             </svg>
-                            بازنشانی
-                        </button>
-                        <button onclick="addMenuItemRow()" class="px-4 py-1.5 bg-gradient-to-r from-turquoise to-cyan-600 hover:from-cyan-500 hover:to-turquoise rounded-xl text-[10px] font-extrabold text-white transition-all flex items-center gap-1 shadow-turquoise-glow">
-                            <span>+ افزودن دستی</span>
                         </button>
                     </div>
-                </div>
-                <p class="text-[11px] text-turquoise/70 leading-relaxed">
-                    لیست تمام اقلام منوی کافه. می‌توانید هر آیتم را ویرایش، حذف یا آیتم جدید اضافه کنید. تغییرات بلافاصله روی سامانه مشتریان اعمال می‌شود.
-                </p>
-                <div class="overflow-x-auto max-h-[400px] border border-tabriz-700/40 rounded-2xl bg-tabriz-900/30">
-                    <table class="min-w-full divide-y divide-tabriz-700/40 text-[11px]" id="currentMenuTable">
-                        <thead class="bg-tabriz-800/50 sticky top-0">
-                            <tr>
-                                <th class="px-3 py-2.5 text-right font-medium text-turquoise/90">نام محصول</th>
-                                <th class="px-3 py-2.5 text-right font-medium text-turquoise/90 hidden md:table-cell">توضیحات</th>
-                                <th class="px-3 py-2.5 text-right font-medium text-turquoise/90 w-20">قیمت</th>
-                                <th class="px-3 py-2.5 text-center font-medium text-turquoise/90 w-16">موجود</th>
-                                <th class="px-3 py-2.5 text-center font-medium text-turquoise/90 w-20">عملیات</th>
-                            </tr>
-                        </thead>
-                        <tbody id="menuTableBody" class="divide-y divide-tabriz-700/30">
-                            <!-- filled by JS -->
-                        </tbody>
-                    </table>
                 </div>
             </div>
-            <!-- Menu extraction & upload (existing) -->
-            <div class="glass-card rounded-3xl p-5 md:p-6 space-y-4 shadow-xl">
-                <h2 class="text-sm md:text-base font-extrabold text-white flex items-center gap-2 border-b border-tabriz-700/40 pb-3">
-                    <svg class="w-5 h-5 text-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-                    </svg>
-                    استخراج خودکار ساختار منو با هوش مصنوعی
-                </h2>
-                <p class="text-[11px] text-turquoise/70 leading-relaxed">
-                    تصویر منو یا فاکتور جدید کافه را بارگذاری کنید. هوش مصنوعی نیلا متون و قیمت‌ها را استخراج کرده و جهت تایید نهایی برای شما ساختاربندی می‌کند.
-                </p>
-                <!-- Drag & drop zone -->
-                <div id="dropZone"
-                     class="border-2 border-dashed border-tabriz-600/50 hover:border-gold/60 rounded-2xl p-6 md:p-8 text-center cursor-pointer transition-all bg-tabriz-900/40 hover:bg-tabriz-800/30 group"
-                     onclick="document.getElementById('menuFileInput').click()"
-                     ondragover="handleDragOver(event)"
-                     ondragleave="handleDragLeave(event)"
-                     ondrop="handleDrop(event)">
-                    <input type="file" id="menuFileInput" class="hidden" accept="image/*,application/pdf" onchange="uploadMenuFile(event)">
-                    <div class="flex flex-col items-center gap-3">
-                        <svg id="uploadIcon" class="w-10 h-10 text-turquoise/60 group-hover:text-gold transition-all duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
-                        </svg>
-                        <span class="text-xs md:text-sm text-white font-medium">فایل یا تصویر منو را به این بخش بکشید یا انتخاب کنید</span>
-                        <span class="text-[9px] text-turquoise/50 uppercase tracking-wider">فرمت‌های تصویری یا PDF</span>
                     </div>
-                </div>
-                <div id="uploadLoader" class="hidden text-center py-6 bg-tabriz-900/60 rounded-2xl border border-turquoise/20 animate-pulse">
-                    <div class="inline-block animate-spin rounded-full h-7 w-7 border-t-2 border-b-2 border-gold mb-2"></div>
-                    <p class="text-[10px] text-gold font-extrabold">نیلا در حال ساختارسازی و آنالیز متون منوی جدید است...</p>
-                </div>
-                <div id="menuEditorContainer" class="hidden space-y-4 border-t border-tabriz-700/30 pt-4">
-                    <h3 class="text-xs font-bold text-gold flex items-center gap-1.5">
-                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                        </svg>
-                        بازبینی اقلام منو پیش از انتشار زنده
-                    </h3>
-                    <div class="overflow-x-auto max-h-[250px] border border-tabriz-700/40 rounded-2xl bg-tabriz-900/30">
-                        <table class="min-w-full divide-y divide-tabriz-700/40 text-[11px]">
-                            <thead class="bg-tabriz-800/50">
                                 <tr>
-                                    <th class="px-3 py-2.5 text-right font-medium text-turquoise/90">عنوان محصول</th>
-                                    <th class="px-3 py-2.5 text-right font-medium text-turquoise/90">توضیحات کوتاه</th>
-                                    <th class="px-3 py-2.5 text-right font-medium text-turquoise/90 w-24">قیمت (تومان)</th>
-                                    <th class="px-3 py-2.5 text-center font-medium text-turquoise/90 w-16">عملیات</th>
                                 </tr>
                             </thead>
-                            <tbody id="menuEditorTableBody" class="divide-y divide-tabriz-700/30">
-                                <!-- dynamic rows -->
                             </tbody>
                         </table>
                     </div>
-                    <div class="flex justify-end gap-2">
-                        <button onclick="addEmptyMenuRow()" class="px-4 py-2 border border-turquoise/30 hover:border-gold/50 rounded-xl text-[10px] text-turquoise hover:text-gold transition-all duration-300 bg-tabriz-800/40">افزودن دستی محصول جدید</button>
-                        <button onclick="saveAndPublishMenu()" class="px-5 py-2.5 bg-gradient-to-r from-turquoise to-cyan-600 hover:from-cyan-500 hover:to-turquoise rounded-xl text-[11px] font-extrabold text-white transition-all duration-300 flex items-center gap-2 shadow-turquoise-glow">ثبت و همگام‌سازی زنده منو</button>
                     </div>
                 </div>
             </div>
         </section>
         <!-- Left column: Admin chat assistant (5/12) -->
-        <section class="lg:col-span-5 flex flex-col glass-card rounded-3xl h-[630px] overflow-hidden shadow-xl">
-            <div class="px-5 py-4 border-b border-tabriz-700/40 flex items-center justify-between bg-tabriz-900/40">
                 <div class="flex items-center gap-3">
-                    <div class="w-10 h-10 rounded-xl bg-turquoise/10 border border-turquoise/20 flex items-center justify-center shadow-turquoise-glow">
-                        <svg class="w-5 h-5 text-gold" 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>
                     <div>
-                        <h3 class="text-xs font-extrabold text-white">دستیار هوشمند ادمین</h3>
-                        <p class="text-[9px] text-turquoise/70 font-medium">کنترل همگام موجودی و منو با زبان طبیعی</p>
                     </div>
                 </div>
             </div>
-            <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
                 <div class="flex gap-2.5 max-w-[85%]">
-                    <div class="w-8 h-8 rounded-xl bg-turquoise/15 border border-turquoise/20 flex items-center justify-center flex-shrink-0">
-                        <span class="text-gold font-extrabold text-[10px] font-mono">AI</span>
                     </div>
-                    <div class="bg-tabriz-900/60 border border-tabriz-700/30 text-zinc-200 text-xs rounded-2xl rounded-tr-none px-3.5 py-2.5 leading-relaxed shadow-inner-soft chat-markdown">
-                        سلام همکار گرامی! من نیلا هستم، دستیار مدیریت منوی Cafe AI. شما می‌توانید از همین‌جا اقلام منو را با گفتگوی ساده کنترل کنید؛ برای مثال بنویسید: "کروسان ساده تمام شد" یا "چای ماسالا را موجود کن" تا سریعاً تغییرات روی سیستم مشتریان نیز اعمال گردد.
                     </div>
                 </div>
             </div>
-            <div id="chatLoader" class="hidden px-4 py-2.5 flex items-center justify-between bg-tabriz-800/60 text-[9px] text-turquoise/80 font-extrabold border-t border-tabriz-700/40">
-                <div class="flex items-center gap-2">
-                    <div class="flex space-x-1 space-x-reverse">
-                        <span class="w-1.5 h-1.5 bg-gold rounded-full animate-bounce" style="animation-delay: 0.1s"></span>
-                        <span class="w-1.5 h-1.5 bg-gold rounded-full animate-bounce" style="animation-delay: 0.2s"></span>
-                        <span class="w-1.5 h-1.5 bg-gold rounded-full animate-bounce" style="animation-delay: 0.3s"></span>
                     </div>
-                    <span>نیلا در حال پردازش و اعمال دستور مدیریت...</span>
                 </div>
-                <button onclick="stopAdminChat()" class="px-2.5 py-1.5 bg-rose-950/10 border border-rose-900/30 hover:bg-rose-900/40 rounded-lg text-[9px] text-rose-400 font-bold transition-all">توقف فرآیند</button>
             </div>
-            <form id="chatForm" onsubmit="sendAdminMessage(event)" class="p-3 border-t border-tabriz-700/40 bg-tabriz-900/40 flex gap-2">
-                <input type="text" id="chatInput" placeholder="تغییر وضعیت یا ویرایش منو را به صورت متنی بنویسید..." autocomplete="off" class="flex-1 bg-tabriz-800/70 border border-tabriz-600/40 text-xs text-white placeholder-turquoise/40 rounded-lg px-3.5 py-2.5 focus:outline-none focus:border-gold/50 transition-all duration-300">
-                <button type="submit" id="sendBtn" class="bg-gradient-to-br from-gold to-amber-600 hover:from-amber-400 hover:to-gold text-tabriz-900 font-extrabold px-4 py-2.5 rounded-lg text-xs transition-all duration-300 flex items-center justify-center flex-shrink-0 shadow-gold-glow">
-                    <svg class="w-5 h-5" 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>
                 </button>
             </form>
         </section>
     </main>
-    <footer class="border-t border-tabriz-700/30 py-4 text-center text-[10px] text-turquoise/50 bg-tabriz-900/80 backdrop-blur">
         طراحی و توسعه توسط الگوریتم داده نسترن | با الهام از فرهنگ تبریز © ۲۰۲۶
     </footer>
@@ -318,7 +796,7 @@
         marked.setOptions({ sanitize: true, breaks: true });
         let chatHistory = [
-            { role: 'model', content: 'سلام همکار گرامی! من نیلا هستم، دستیار مدیریت منوی Cafe AI. شما می‌توانید از همین‌جا اقلام منو را با گفتگوی ساده کنترل کنید؛ برای مثال بنویسید: "کروسان ساده تمام شد" یا "چای ماسالا را موجود کن" تا سریعاً تغییرات روی سیستم مشتریان نیز اعمال گردد.' }
         ];
         let abortController = null;
         let isGenerating = false;
@@ -329,7 +807,7 @@
             setInterval(fetchActiveOrders, 10000);
         });
-        // ==================== Order functions (unchanged) ====================
         async function fetchActiveOrders() {
             const container = document.getElementById('ordersContainer');
             try {
@@ -338,11 +816,12 @@
                 if (response.ok) {
                     if (orders.length === 0) {
                         container.innerHTML = `
-                            <div class="text-center py-16 text-turquoise/60 border border-dashed border-tabriz-600/50 rounded-2xl bg-tabriz-900/20">
-                                <svg class="w-8 h-8 text-turquoise/40 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                 </svg>
-                                در حال حاضر سفارش معلق و فعالی در صف آشپزخانه نیست.
                             </div>
                         `;
                         return;
@@ -352,27 +831,42 @@
                         let itemsHtml = '';
                         order.items.forEach(item => {
                             itemsHtml += `
-                                <div class="flex items-center justify-between text-[11px] bg-tabriz-900/60 px-3 py-2 rounded-lg border border-tabriz-700/30">
-                                    <span class="text-zinc-300 font-bold">${item.name}</span>
-                                    <span class="text-gold bg-gold/10 px-2 py-0.5 rounded-md font-extrabold text-[10px]">تعداد: ${item.quantity}</span>
                                 </div>
                             `;
                         });
                         const timeString = new Date(order.timestamp * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
                         const cardHtml = `
-                            <div class="border border-tabriz-700/30 hover:border-gold/30 rounded-2xl p-4 bg-tabriz-900/30 transition-all duration-300 flex flex-col md:flex-row justify-between items-start md:items-center gap-3">
                                 <div class="flex-1 space-y-2 w-full">
-                                    <div class="flex items-center justify-between md:justify-start gap-3 w-full">
-                                        <span class="text-xs font-bold text-white bg-turquoise/10 border border-turquoise/20 px-2.5 py-1 rounded-lg">میز شماره ${order.table}</span>
-                                        <span class="text-[9px] text-turquoise/60 font-medium">زمان ثبت: ${timeString}</span>
                                     </div>
                                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-1.5 mt-2">
                                         ${itemsHtml}
                                     </div>
                                 </div>
-                                <button onclick="completeOrder(${order.id})" class="w-full md:w-auto px-4 py-2.5 bg-tabriz-800/60 hover:bg-emerald-700 text-zinc-200 hover:text-white rounded-lg text-[10px] font-bold transition-all flex items-center justify-center gap-1.5 border border-tabriz-600/40 hover:border-emerald-600 flex-shrink-0 group">
-                                    <svg class="w-3.5 h-3.5 text-zinc-400 group-hover:text-white transition-colors" 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>
                                     تحویل نهایی شد
                                 </button>
@@ -381,10 +875,10 @@
                         container.insertAdjacentHTML('beforeend', cardHtml);
                     });
                 } else {
-                    container.innerHTML = `<div class="text-center py-6 text-rose-500 text-xs">خطا در دریافت لیست سفارشات آشپزخانه.</div>`;
                 }
             } catch (err) {
-                container.innerHTML = `<div class="text-center py-6 text-rose-500 text-xs">عدم برقراری ارتباط زنده با سرور: ${err.message}</div>`;
             }
         }
@@ -406,20 +900,20 @@
             }
         }
-        // ==================== Menu CRUD (NEW) ====================
         async function fetchCurrentMenu() {
             const tbody = document.getElementById('menuTableBody');
-            tbody.innerHTML = '<tr><td colspan="5" class="text-center py-8 text-turquoise/60">در حال بارگذاری منو...</td></tr>';
             try {
                 const res = await fetch('/api/admin/menu');
                 const menu = await res.json();
                 if (res.ok && Array.isArray(menu)) {
                     renderMenuTable(menu);
                 } else {
-                    tbody.innerHTML = '<tr><td colspan="5" class="text-center py-8 text-rose-400">خطا در بارگذاری منو</td></tr>';
                 }
             } catch (e) {
-                tbody.innerHTML = '<tr><td colspan="5" class="text-center py-8 text-rose-400">عدم اتصال به سرور</td></tr>';
             }
         }
@@ -427,46 +921,48 @@
             const tbody = document.getElementById('menuTableBody');
             tbody.innerHTML = '';
             if (menu.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="5" class="text-center py-8 text-turquoise/60">منو خالی است. آیتم جدید اضافه کنید.</td></tr>';
                 return;
             }
             menu.forEach(item => {
                 const row = document.createElement('tr');
-                row.className = 'hover:bg-tabriz-800/40 transition-colors menu-row';
                 row.dataset.id = item.id;
                 row.innerHTML = `
-                    <td class="px-2 py-1.5">
-                        <span class="view-mode font-bold text-white">${escapeHtml(item.name)}</span>
-                        <input type="text" class="edit-mode hidden w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded px-2 py-1 text-white text-[11px]" value="${escapeHtml(item.name)}" data-field="name">
                     </td>
-                    <td class="px-2 py-1.5 hidden md:table-cell">
-                        <span class="view-mode text-zinc-400 text-[10px]">${escapeHtml(item.description || '-')}</span>
-                        <input type="text" class="edit-mode hidden w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded px-2 py-1 text-white text-[11px]" value="${escapeHtml(item.description || '')}" data-field="description">
                     </td>
-                    <td class="px-2 py-1.5">
-                        <span class="view-mode text-gold font-medium">${escapeHtml(item.price || '-')}</span>
-                        <input type="text" class="edit-mode hidden w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded px-2 py-1 text-white text-[11px]" value="${escapeHtml(item.price || '')}" data-field="price">
                     </td>
-                    <td class="px-2 py-1.5 text-center">
-                        <span class="view-mode text-xs ${item.available ? 'text-emerald-400' : 'text-rose-400'}">${item.available ? 'بله' : 'خیر'}</span>
-                        <input type="checkbox" class="edit-mode hidden" data-field="available" ${item.available ? 'checked' : ''}>
                     </td>
-                    <td class="px-2 py-1.5 text-center">
                         <div class="view-mode flex gap-1 justify-center">
-                            <button onclick="editMenuItem(this)" class="p-1 text-turquoise/70 hover:text-gold transition-colors" title="ویرایش">
                                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                 </svg>
                             </button>
-                            <button onclick="deleteMenuItem(${item.id})" class="p-1 text-zinc-600 hover:text-rose-500 transition-colors" title="حذف">
                                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                 </svg>
                             </button>
                         </div>
                         <div class="edit-mode hidden flex gap-1 justify-center">
-                            <button onclick="saveMenuItem(this, ${item.id})" class="px-2 py-1 bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 rounded text-[10px]">ذخیره</button>
-                            <button onclick="cancelEdit(this)" class="px-2 py-1 bg-zinc-800 border border-zinc-600 text-zinc-400 rounded text-[10px]">لغو</button>
                         </div>
                     </td>
                 `;
@@ -491,9 +987,6 @@
         }
         function cancelEdit(btn) {
-            const row = btn.closest('tr');
-            // Reset fields to original (re-fetch from data attributes? we can just store original values in dataset)
-            // Simple: reload menu
             fetchCurrentMenu();
         }
@@ -546,26 +1039,25 @@
             }
         }
-        async function addMenuItemRow() {
-            // Create a new empty row with inputs and a save button
             const tbody = document.getElementById('menuTableBody');
             const row = document.createElement('tr');
-            row.className = 'bg-tabriz-800/40';
             row.innerHTML = `
-                <td class="px-2 py-1.5">
-                    <input type="text" class="w-full bg-tabriz-800/60 border border-turquoise/40 rounded px-2 py-1 text-white text-[11px]" placeholder="نام محصول" data-field="name">
                 </td>
-                <td class="px-2 py-1.5 hidden md:table-cell">
-                    <input type="text" class="w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded px-2 py-1 text-white text-[11px]" placeholder="توضیحات" data-field="description">
                 </td>
-                <td class="px-2 py-1.5">
-                    <input type="text" class="w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded px-2 py-1 text-white text-[11px]" placeholder="قیمت" data-field="price">
                 </td>
-                <td class="px-2 py-1.5 text-center">
                     <input type="checkbox" data-field="available" checked>
                 </td>
-                <td class="px-2 py-1.5 text-center">
-                    <button onclick="saveNewItem(this)" class="px-3 py-1 bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 rounded text-[10px]">افزودن</button>
                 </td>
             `;
             tbody.appendChild(row);
@@ -598,20 +1090,16 @@
             }
         }
-        // ==================== Menu extraction (unchanged) ====================
         function handleDragOver(e) {
             e.preventDefault();
             const dropZone = document.getElementById('dropZone');
-            const icon = document.getElementById('uploadIcon');
-            dropZone.classList.add('border-gold', 'bg-gold/5');
-            icon.classList.add('text-gold');
         }
         function handleDragLeave(e) {
             e.preventDefault();
             const dropZone = document.getElementById('dropZone');
-            const icon = document.getElementById('uploadIcon');
-            dropZone.classList.remove('border-gold', 'bg-gold/5');
-            icon.classList.remove('text-gold');
         }
         function handleDrop(e) {
             e.preventDefault();
@@ -656,20 +1144,20 @@
             tbody.innerHTML = '';
             menuItems.forEach((item, index) => {
                 const row = `
-                    <tr class="hover:bg-tabriz-800/40 transition-colors duration-200">
                         <td class="px-2 py-2">
-                            <input type="text" class="menu-name w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded-lg px-2.5 py-1.5 text-white focus:border-gold/50 focus:outline-none text-[11px]" value="${item.name || ''}">
                         </td>
                         <td class="px-2 py-2">
-                            <input type="text" class="menu-desc w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded-lg px-2.5 py-1.5 text-white focus:border-gold/50 focus:outline-none text-[11px]" value="${item.description || ''}">
                         </td>
                         <td class="px-2 py-2">
-                            <input type="text" class="menu-price w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded-lg px-2.5 py-1.5 text-white focus:border-gold/50 focus:outline-none text-[11px]" value="${item.price || ''}">
                         </td>
                         <td class="px-2 py-2 text-center">
-                            <button onclick="removeMenuRow(this)" class="p-1 text-zinc-600 hover:text-rose-500 transition-colors">
                                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                 </svg>
                             </button>
                         </td>
@@ -681,20 +1169,20 @@
         function addEmptyMenuRow() {
             const tbody = document.getElementById('menuEditorTableBody');
             const row = `
-                <tr class="hover:bg-tabriz-800/40 transition-colors duration-200">
                     <td class="px-2 py-2">
-                        <input type="text" class="menu-name w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded-lg px-2.5 py-1.5 text-white focus:border-gold/50 focus:outline-none text-[11px]" placeholder="مثال: لاته کارامل">
                     </td>
                     <td class="px-2 py-2">
-                        <input type="text" class="menu-desc w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded-lg px-2.5 py-1.5 text-white focus:border-gold/50 focus:outline-none text-[11px]" placeholder="ترکیب اسپرسو دبل، سس کارامل و فوم شیر">
                     </td>
                     <td class="px-2 py-2">
-                        <input type="text" class="menu-price w-full bg-tabriz-800/60 border border-tabriz-600/40 rounded-lg px-2.5 py-1.5 text-white focus:border-gold/50 focus:outline-none text-[11px]" placeholder="۸۵,۰۰۰">
                     </td>
                     <td class="px-2 py-2 text-center">
-                        <button onclick="removeMenuRow(this)" class="p-1 text-zinc-600 hover:text-rose-500 transition-colors">
                             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                             </svg>
                         </button>
                     </td>
@@ -729,10 +1217,10 @@
                 });
                 const data = await response.json();
                 if (response.ok && data.success) {
-                    alert("منوی جدید با موفقیت ثبت و روی وب‌سایت همگام‌سازی شد!");
                     document.getElementById('menuEditorContainer').classList.add('hidden');
-                    fetchCurrentMenu();  // refresh main menu table
-                    appendChatMessage('model', 'منوی زنده همگام‌سازی شد. سیستم سفارش‌گیری مشتریان اکنون بر مبنای آخرین لیست ویرایش‌شده کالیبره شده است.');
                 } else {
                     alert(data.error || 'بروز خطا در همگام‌سازی ساختار داده‌های جدید.');
                 }
@@ -741,7 +1229,7 @@
             }
         }
-        // ==================== Admin Chat (updated with Markdown) ====================
         async function sendAdminMessage(e) {
             e.preventDefault();
             if (isGenerating) return;
@@ -769,11 +1257,10 @@
                 isGenerating = false;
                 if (response.ok && data.success) {
-                    const botBubbleId = appendChatMessage('model', ''); // empty placeholder
                     const botBubble = document.getElementById(botBubbleId);
                     const textResponse = data.response;
                     let i = 0;
-                    // Typewriter effect with plain text
                     function typeText() {
                         if (i < textResponse.length && !abortController.signal.aborted) {
                             botBubble.textContent += textResponse.charAt(i);
@@ -781,11 +1268,9 @@
                             document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
                             setTimeout(typeText, 6);
                         } else {
-                            // Once done, replace with rendered Markdown
-                            botBubble.textContent = ''; // clear
                             botBubble.innerHTML = marked.parse(textResponse);
                             chatHistory.push({ role: 'model', content: textResponse });
-                            // After Nila might have changed menu, refresh the menu list
                             fetchCurrentMenu();
                         }
                     }
@@ -797,7 +1282,7 @@
                 toggleChatLoading(false);
                 isGenerating = false;
                 if (err.name !== 'AbortError') {
-                    appendChatMessage('model', 'عدم دریافت موفق پاسخ در بستر شبکه: ' + err.message);
                 }
             }
         }
@@ -827,26 +1312,29 @@
         function appendChatMessage(role, content) {
             const container = document.getElementById('chatMessages');
-            const bubbleId = 'bubble-admin-' + Date.now();
             let html = '';
             if (role === 'user') {
                 html = `
                     <div class="flex justify-end gap-2.5 max-w-[85%] mr-auto">
-                        <div class="bg-gold/10 border border-gold/25 text-white text-xs rounded-2xl rounded-tl-none px-3.5 py-2.5 leading-relaxed">
                             ${escapeHtml(content)}
                         </div>
                     </div>
                 `;
             } else {
-                // For model, we use innerHTML with chat-markdown class
-                // Note: content will be set later (initially empty for typewriter)
                 html = `
                     <div class="flex gap-2.5 max-w-[85%]">
-                        <div class="w-8 h-8 rounded-xl bg-turquoise/15 border border-turquoise/20 flex items-center justify-center flex-shrink-0">
-                            <span class="text-gold font-extrabold text-[10px] font-mono">AI</span>
                         </div>
-                        <div id="${bubbleId}" class="bg-tabriz-900/60 border border-tabriz-700/30 text-zinc-200 text-xs rounded-2xl rounded-tr-none px-3.5 py-2.5 leading-relaxed shadow-inner-soft chat-markdown">
                             ${content ? marked.parse(content) : ''}
                         </div>
                     </div>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Cafe AI — پنل مدیریت</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lalezar&family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     fontFamily: {
                         sans: ['Vazirmatn', 'sans-serif'],
+                        display: ['Lalezar', 'serif'],
                     },
                     colors: {
+                        bazaar: {
+                            950: '#1a0d07',
+                            900: '#2d1810',
+                            800: '#3d2418',
+                            700: '#5c3a2a',
+                            600: '#7a4e3a',
+                            500: '#9c6b4f',
+                            400: '#b8856a',
+                            300: '#d4a88c',
+                        },
+                        azure: {
+                            950: '#051a2e',
+                            900: '#0a2540',
+                            800: '#123a5e',
+                            700: '#1e4976',
+                            600: '#2d6ca8',
+                            500: '#3d8bc4',
+                            400: '#6ba7d4',
+                            300: '#a3c8e4',
+                        },
+                        turk: {
+                            DEFAULT: '#0d9488',
+                            light: '#2dd4bf',
+                            glow: '#5eead4',
+                            deep: '#134e4a',
+                        },
+                        rug: {
+                            DEFAULT: '#8b1e3f',
+                            light: '#c23d5f',
+                            dark: '#5a1028',
+                            glow: '#e85d7e',
                         },
+                        ochre: {
+                            DEFAULT: '#c9a961',
+                            light: '#e4c97a',
+                            dark: '#9c7d3a',
+                            pale: '#f0dca3',
                         },
+                        ivory: '#faf3e7',
+                        cream: '#f5e6d3',
+                        saffron: '#d97706',
+                        emerald: {
+                            DEFAULT: '#10b981',
+                            light: '#34d399',
+                            dark: '#065f46',
+                        },
+                        rose: {
+                            DEFAULT: '#e11d48',
+                            light: '#fb7185',
                         },
                     },
                     boxShadow: {
+                        'carpet': '0 10px 40px -10px rgba(139, 30, 63, 0.35), 0 0 0 1px rgba(201, 169, 97, 0.15)',
+                        'mosque': '0 10px 40px -10px rgba(13, 148, 136, 0.4), 0 0 0 1px rgba(45, 212, 191, 0.2)',
+                        'bazaar-glow': '0 0 60px rgba(201, 169, 97, 0.25), inset 0 1px 0 rgba(244, 228, 163, 0.1)',
+                        'inner-soft': 'inset 0 2px 8px rgba(0,0,0,0.35)',
+                        'inner-gold': 'inset 0 0 20px rgba(201, 169, 97, 0.15)',
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'shimmer': 'shimmer 3s ease-in-out infinite',
+                        'pulse-glow': 'pulseGlow 2.5s ease-in-out infinite',
+                        'ping-slow': 'ping 2.5s cubic-bezier(0, 0, 0.2, 1) infinite',
                     },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0px)' },
+                            '50%': { transform: 'translateY(-12px)' },
+                        },
+                        shimmer: {
+                            '0%, 100%': { opacity: '0.7' },
+                            '50%': { opacity: '1' },
+                        },
+                        pulseGlow: {
+                            '0%, 100%': { boxShadow: '0 0 20px rgba(201, 169, 97, 0.3)' },
+                            '50%': { boxShadow: '0 0 40px rgba(201, 169, 97, 0.6)' },
+                        },
                     },
                 }
             }
         }
     </script>
     <style>
+        :root {
+            --pattern-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a961' stroke-width='0.6' opacity='0.08'%3E%3Cpath d='M40 10 L50 20 L60 10 L70 20 L60 30 L70 40 L60 50 L70 60 L60 70 L50 60 L40 70 L30 60 L20 70 L10 60 L20 50 L10 40 L20 30 L10 20 L20 10 L30 20 Z'/%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3Cpath d='M40 28 L40 52 M28 40 L52 40'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        html { scroll-behavior: smooth; }
         body {
+            background-color: #1a0d07;
+            color: #f5e6d3;
             -webkit-tap-highlight-color: transparent;
+            font-feature-settings: "ss01", "cv01";
         }
+        .bg-pattern {
+            background-image: var(--pattern-url);
+            background-size: 80px 80px;
         }
+        .bg-pattern-fine {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23c9a961' stroke-width='0.4' opacity='0.1'%3E%3Cpath d='M20 0 L20 40 M0 20 L40 20'/%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='40' cy='0' r='2'/%3E%3Ccircle cx='0' cy='40' r='2'/%3E%3Ccircle cx='40' cy='40' r='2'/%3E%3C/g%3E%3C/svg%3E");
         }
+        .bg-arch {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%230d9488' stroke-width='0.5' opacity='0.06'%3E%3Cpath d='M100 20 Q 40 40, 40 100 Q 40 180, 100 180 Q 160 180, 160 100 Q 160 40, 100 20 Z'/%3E%3Cpath d='M100 50 Q 65 65, 65 100 Q 65 155, 100 155 Q 135 155, 135 100 Q 135 65, 100 50 Z'/%3E%3Cpath d='M100 80 Q 85 90, 85 100 Q 85 130, 100 130 Q 115 130, 115 100 Q 115 90, 100 80 Z'/%3E%3C/g%3E%3C/svg%3E");
+            background-size: 200px 200px;
+        }
+        /* Scrollbar */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: #1a0d07; }
         ::-webkit-scrollbar-thumb {
+            background: linear-gradient(180deg, #c9a961, #8b1e3f);
             border-radius: 4px;
         }
+        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #e4c97a, #c23d5f); }
         .glass-card {
+            background: linear-gradient(135deg, rgba(45, 24, 16, 0.82) 0%, rgba(26, 13, 7, 0.78) 100%);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid rgba(201, 169, 97, 0.18);
+            box-shadow:
+                0 20px 50px -20px rgba(0, 0, 0, 0.6),
+                inset 0 1px 0 rgba(244, 228, 163, 0.08);
+            transition: all 0.4s ease;
         }
         .glass-card:hover {
+            border-color: rgba(201, 169, 97, 0.3);
+            box-shadow:
+                0 25px 60px -20px rgba(0, 0, 0, 0.7),
+                0 0 40px rgba(201, 169, 97, 0.1),
+                inset 0 1px 0 rgba(244, 228, 163, 0.12);
+        }
+        .glass-card-azure {
+            background: linear-gradient(135deg, rgba(10, 37, 64, 0.78) 0%, rgba(5, 26, 46, 0.82) 100%);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid rgba(45, 212, 191, 0.2);
+            box-shadow:
+                0 20px 50px -20px rgba(13, 148, 136, 0.2),
+                inset 0 1px 0 rgba(94, 234, 212, 0.1);
+        }
+        /* Ornament divider */
+        .ornament-divider {
+            position: relative;
+            text-align: center;
+        }
+        .ornament-divider::before,
+        .ornament-divider::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            width: 30%;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.5), transparent);
+        }
+        .ornament-divider::before { left: 0; }
+        .ornament-divider::after { right: 0; }
+        /* Arch shape */
+        .arch-shape {
+            border-radius: 50% 50% 1rem 1rem / 35% 35% 1rem 1rem;
+        }
+        /* Chat Markdown - پشتیبانی کامل */
+        .chat-markdown { line-height: 1.85; }
+        .chat-markdown > * + * { margin-top: 0.6em; }
+        .chat-markdown h1, .chat-markdown h2, .chat-markdown h3,
+        .chat-markdown h4, .chat-markdown h5, .chat-markdown h6 {
+            font-family: 'Lalezar', serif;
+            color: #e4c97a;
+            margin-top: 1em;
+            margin-bottom: 0.4em;
+            line-height: 1.3;
+        }
+        .chat-markdown h1 { font-size: 1.4em; }
+        .chat-markdown h2 { font-size: 1.25em; }
+        .chat-markdown h3 { font-size: 1.15em; color: #5eead4; }
+        .chat-markdown h4, .chat-markdown h5, .chat-markdown h6 { font-size: 1.05em; }
+        .chat-markdown p { margin-bottom: 0.5em; }
+        .chat-markdown ul, .chat-markdown ol {
+            padding-right: 1.4em;
+            margin: 0.4em 0;
+        }
+        .chat-markdown ul { list-style-type: '❋  '; }
+        .chat-markdown ol { list-style-type: persian; }
+        .chat-markdown li { margin-bottom: 0.3em; padding-right: 0.2em; }
+        .chat-markdown li::marker { color: #c9a961; }
+        .chat-markdown strong {
+            color: #f0dca3;
+            font-weight: 700;
+            text-shadow: 0 0 8px rgba(201, 169, 97, 0.3);
+        }
+        .chat-markdown em {
+            color: #5eead4;
+            font-style: italic;
+        }
+        .chat-markdown a {
+            color: #2dd4bf;
+            text-decoration: underline;
+            text-underline-offset: 3px;
+            transition: color 0.2s;
+        }
+        .chat-markdown a:hover { color: #5eead4; }
+        .chat-markdown code {
+            background: rgba(13, 148, 136, 0.18);
+            color: #5eead4;
+            padding: 0.15em 0.4em;
+            border-radius: 5px;
+            font-size: 0.88em;
+            border: 1px solid rgba(45, 212, 191, 0.2);
+            font-family: 'Courier New', monospace;
+            direction: ltr;
+            display: inline-block;
+        }
+        .chat-markdown pre {
+            background: rgba(5, 26, 46, 0.7);
+            border: 1px solid rgba(45, 212, 191, 0.25);
+            border-right: 3px solid #0d9488;
+            padding: 0.9em 1em;
+            border-radius: 8px;
+            overflow-x: auto;
+            margin: 0.6em 0;
+            direction: ltr;
+            text-align: left;
+        }
+        .chat-markdown pre code {
+            background: transparent;
+            border: none;
+            padding: 0;
+            color: #a3c8e4;
+            font-size: 0.85em;
+        }
+        .chat-markdown blockquote {
+            border-right: 3px solid #c9a961;
+            background: linear-gradient(90deg, rgba(201, 169, 97, 0.08), transparent);
+            padding: 0.5em 1em;
+            margin: 0.6em 0;
+            color: #f0dca3;
+            font-style: italic;
+            border-radius: 0 8px 8px 0;
+        }
+        .chat-markdown blockquote p { margin: 0; }
+        .chat-markdown hr {
+            border: none;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.5), transparent);
+            margin: 1em 0;
+        }
+        .chat-markdown table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 0.6em 0;
+            font-size: 0.92em;
+            background: rgba(45, 24, 16, 0.5);
+            border-radius: 8px;
+            overflow: hidden;
+            border: 1px solid rgba(201, 169, 97, 0.25);
+        }
+        .chat-markdown thead {
+            background: linear-gradient(90deg, rgba(139, 30, 63, 0.4), rgba(201, 169, 97, 0.2));
+        }
+        .chat-markdown th {
+            padding: 0.55em 0.8em;
+            text-align: right;
+            color: #e4c97a;
+            font-weight: 700;
+            border-bottom: 1px solid rgba(201, 169, 97, 0.3);
+            font-family: 'Lalezar', serif;
+        }
+        .chat-markdown td {
+            padding: 0.5em 0.8em;
+            border-bottom: 1px solid rgba(201, 169, 97, 0.1);
+        }
+        .chat-markdown tr:last-child td { border-bottom: none; }
+        .chat-markdown tr:hover td { background: rgba(201, 169, 97, 0.05); }
+        .chat-markdown img {
+            max-width: 100%;
+            border-radius: 10px;
+            border: 2px solid rgba(201, 169, 97, 0.3);
+        }
+        /* Typing dots */
+        .typing-dots span {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #c9a961;
+            animation: typing 1.4s infinite;
+        }
+        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
+            30% { transform: translateY(-8px); opacity: 1; }
+        }
+        /* Button styles */
+        .btn-primary {
+            background: linear-gradient(135deg, #c9a961 0%, #9c7d3a 100%);
+            color: #1a0d07;
+            font-weight: 800;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 20px -5px rgba(201, 169, 97, 0.4);
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #e4c97a 0%, #c9a961 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 12px 28px -5px rgba(201, 169, 97, 0.6);
+        }
+        .btn-primary:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .btn-ghost {
+            background: rgba(201, 169, 97, 0.08);
+            color: #f0dca3;
+            border: 1px solid rgba(201, 169, 97, 0.2);
+            transition: all 0.3s ease;
+        }
+        .btn-ghost:hover {
+            background: rgba(201, 169, 97, 0.18);
+            border-color: rgba(201, 169, 97, 0.45);
+        }
+        .btn-rug {
+            background: linear-gradient(135deg, #8b1e3f 0%, #5a1028 100%);
+            color: #f5e6d3;
+            border: 1px solid rgba(201, 169, 97, 0.3);
+            transition: all 0.3s ease;
+        }
+        .btn-rug:hover {
+            background: linear-gradient(135deg, #c23d5f 0%, #8b1e3f 100%);
+            border-color: rgba(201, 169, 97, 0.6);
+            transform: translateY(-1px);
+        }
+        .btn-turk {
+            background: linear-gradient(135deg, #0d9488 0%, #134e4a 100%);
+            color: #f5e6d3;
+            border: 1px solid rgba(45, 212, 191, 0.3);
+            transition: all 0.3s ease;
+            box-shadow: 0 6px 16px -4px rgba(13, 148, 136, 0.4);
+        }
+        .btn-turk:hover {
+            background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
+            border-color: rgba(94, 234, 212, 0.6);
+            transform: translateY(-1px);
+        }
+        /* Drop zone */
+        .drop-zone {
+            position: relative;
+            border: 2px dashed rgba(201, 169, 97, 0.3);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .drop-zone:hover, .drop-zone.drag-over {
+            border-color: rgba(201, 169, 97, 0.7);
+            background: rgba(201, 169, 97, 0.06);
+            transform: scale(1.005);
+        }
+        .drop-zone::before {
+            content: '';
+            position: absolute;
+            inset: 6px;
+            border: 1px dashed rgba(201, 169, 97, 0.15);
+            border-radius: inherit;
+            pointer-events: none;
+        }
+        /* Order cards */
+        .order-card {
+            background: linear-gradient(135deg, rgba(45, 24, 16, 0.6), rgba(26, 13, 7, 0.5));
+            border: 1px solid rgba(201, 169, 97, 0.2);
+            transition: all 0.3s ease;
+        }
+        .order-card:hover {
+            border-color: rgba(201, 169, 97, 0.5);
+            box-shadow: 0 12px 30px -10px rgba(139, 30, 63, 0.3);
+            transform: translateY(-2px);
+        }
+        /* Table rows */
+        .menu-row {
+            transition: all 0.3s ease;
+        }
+        .menu-row:hover {
+            background: rgba(201, 169, 97, 0.05);
+        }
+        /* Input focus */
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: rgba(201, 169, 97, 0.6);
+            box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
+        }
+        /* Checkbox custom */
+        input[type="checkbox"] {
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border: 2px solid rgba(201, 169, 97, 0.4);
+            border-radius: 4px;
+            background: rgba(45, 24, 16, 0.5);
+            cursor: pointer;
+            position: relative;
+            transition: all 0.2s ease;
+        }
+        input[type="checkbox"]:checked {
+            background: linear-gradient(135deg, #0d9488, #134e4a);
+            border-color: #2dd4bf;
+        }
+        input[type="checkbox"]:checked::after {
+            content: '✓';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #f5e6d3;
+            font-size: 14px;
+            font-weight: bold;
+        }
+        /* Live indicator */
+        .live-dot {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #10b981;
+            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+            animation: live-pulse 2s infinite;
+        }
+        @keyframes live-pulse {
+            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+        }
+        /* Section title */
+        .section-title {
+            font-family: 'Lalezar', serif;
+            letter-spacing: 0.02em;
+        }
+        /* Badge */
+        .badge-live {
+            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 95, 70, 0.2));
+            border: 1px solid rgba(52, 211, 153, 0.4);
+            color: #34d399;
+        }
+        .badge-table {
+            background: linear-gradient(135deg, rgba(201, 169, 97, 0.15), rgba(139, 30, 63, 0.15));
+            border: 1px solid rgba(201, 169, 97, 0.4);
+            color: #e4c97a;
+        }
+        /* Table styling */
+        .admin-table thead {
+            background: linear-gradient(90deg, rgba(139, 30, 63, 0.25), rgba(201, 169, 97, 0.15));
+        }
+        .admin-table th {
+            font-family: 'Lalezar', serif;
+            color: #e4c97a;
+            font-size: 11px;
+        }
+        .admin-table td, .admin-table th {
+            border-bottom: 1px solid rgba(201, 169, 97, 0.1);
+        }
+        /* Mobile optimizations */
+        @media (max-width: 640px) {
+            .chat-markdown { font-size: 0.92rem; }
+        }
     </style>
 </head>
+<body class="min-h-screen flex flex-col font-sans selection:bg-ochre selection:text-bazaar-950 overflow-x-hidden antialiased">
+    <!-- Ambient Background -->
+    <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
+        <div class="absolute inset-0 bg-gradient-to-br from-bazaar-950 via-bazaar-900 to-azure-950"></div>
+        <div class="absolute inset-0 bg-pattern opacity-40"></div>
+        <div class="absolute -top-40 -right-40 w-[600px] h-[600px] rounded-full bg-rug/10 blur-[140px] animate-float"></div>
+        <div class="absolute -bottom-40 -left-40 w-[600px] h-[600px] rounded-full bg-turk/10 blur-[140px] animate-float" style="animation-delay: -3s;"></div>
+        <div class="absolute top-1/3 left-1/4 w-[400px] h-[400px] rounded-full bg-ochre/8 blur-[120px] animate-shimmer"></div>
     </div>
     <!-- Header -->
+    <header class="border-b border-ochre/20 bg-bazaar-900/70 backdrop-blur-2xl sticky top-0 z-50 px-4 py-3 md:px-8 shadow-lg">
+        <div class="max-w-7xl mx-auto flex items-center justify-between gap-4">
             <div class="flex items-center gap-3">
+                <div class="relative">
+                    <div class="w-11 h-11 arch-shape bg-gradient-to-br from-rug via-rug-dark to-bazaar-900 border-2 border-ochre/50 flex items-center justify-center shadow-carpet">
+                        <svg class="w-6 h-6 text-ochre-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                            <path d="M17 8h1a4 4 0 1 1 0 8h-1" stroke-linecap="round"/>
+                            <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" stroke-linecap="round"/>
+                            <line x1="6" y1="2" x2="6" y2="4" stroke-linecap="round"/>
+                            <line x1="10" y1="2" x2="10" y2="4" stroke-linecap="round"/>
+                            <line x1="14" y1="2" x2="14" y2="4" stroke-linecap="round"/>
+                        </svg>
+                    </div>
                 </div>
                 <div>
+                    <h1 class="section-title text-base md:text-lg text-ochre-light tracking-wide flex items-center gap-2">
+                        <span class="text-rug-light">Cafe AI</span>
+                        <span class="text-cream/40">|</span>
+                        <span class="text-cream">پنل مدیریت</span>
                     </h1>
+                    <p class="text-[10px] text-turk-light/80 font-medium mt-0.5">پایش برخط سفارشات و منوی هوشمند</p>
                 </div>
             </div>
+            <div class="flex items-center gap-2">
+                <span class="badge-live inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] font-bold">
+                    <span class="live-dot"></span>
                     نظارت زنده
                 </span>
             </div>
     <!-- Main grid -->
     <main class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-12 gap-6 z-10 relative">
         <!-- Right column: orders + current menu + menu upload (7/12) -->
         <section class="lg:col-span-7 flex flex-col gap-6">
+            <!-- Live orders monitor -->
+            <div class="glass-card rounded-3xl p-5 md:p-6 shadow-xl relative overflow-hidden">
+                <div class="absolute inset-0 bg-pattern-fine opacity-20 pointer-events-none"></div>
+                <div class="relative">
+                    <div class="flex items-center justify-between mb-4 border-b border-ochre/20 pb-3">
+                        <div class="flex items-center gap-3">
+                            <div class="w-9 h-9 rounded-xl bg-rug/20 border border-rug/40 flex items-center justify-center">
+                                <svg class="w-5 h-5 text-rug-light" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
+                                </svg>
+                            </div>
+                            <div>
+                                <h2 class="section-title text-base md:text-lg text-ochre-light flex items-center gap-2">
+                                    سفارشات جدید آشپزخانه
+                                    <span class="w-2 h-2 rounded-full bg-rug-light animate-pulse"></span>
+                                </h2>
+                                <p class="text-[10px] text-cream/50 mt-0.5">لیست سفارشات در صف آماده‌سازی</p>
+                            </div>
+                        </div>
+                        <button onclick="fetchActiveOrders()" class="btn-ghost text-[10px] flex items-center gap-1.5 px-3 py-1.5 rounded-xl">
                             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 15H15"/>
                             </svg>
+                            بروزرسانی
                         </button>
                     </div>
+                    <div id="ordersContainer" class="space-y-3 max-h-[400px] overflow-y-auto pr-1">
+                        <div class="text-center py-12 text-xs text-ochre/60">در حال بارگذاری لیست سفارشات جاری...</div>
+                    </div>
                 </div>
             </div>
+            <!-- Current Menu -->
+            <div class="glass-card rounded-3xl p-5 md:p-6 space-y-4 shadow-xl relative overflow-hidden">
+                <div class="absolute inset-0 bg-arch opacity-15 pointer-events-none"></div>
+                <div class="relative">
+                    <div class="flex items-center justify-between border-b border-ochre/20 pb-3 mb-3">
+                        <div class="flex items-center gap-3">
+                            <div class="w-9 h-9 rounded-xl bg-ochre/20 border border-ochre/40 flex items-center justify-center">
+                                <svg class="w-5 h-5 text-ochre-light" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
+                                </svg>
+                            </div>
+                            <div>
+                                <h2 class="section-title text-base md:text-lg text-ochre-light">مدیریت منوی فعال</h2>
+                                <p class="text-[10px] text-cream/50 mt-0.5">کنترل و ویرایش اقلام قابل سفارش</p>
+                            </div>
+                        </div>
+                        <div class="flex gap-2">
+                            <button onclick="fetchCurrentMenu()" class="btn-ghost text-[10px] flex items-center gap-1 px-3 py-1.5 rounded-xl">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 15H15"/>
+                                </svg>
+                                بازنشانی
+                            </button>
+                            <button onclick="addMenuItemRow()" class="btn-turk px-4 py-1.5 rounded-xl text-[10px] font-extrabold flex items-center gap-1">
+                                <span>+ افزودن دستی</span>
+                            </button>
+                        </div>
                     </div>
+                    <p class="text-[11px] text-cream/70 leading-relaxed mb-4">
+                        لیست تمام اقلام منوی کافه. می‌توانید هر آیتم را ویرایش، حذف یا آیتم جدید اضافه کنید. تغییرات بلافاصله روی سامانه مشتریان اعمال می‌شود.
+                    </p>
+                    <div class="overflow-x-auto max-h-[400px] border border-ochre/20 rounded-2xl bg-bazaar-950/50">
+                        <table class="min-w-full admin-table text-[11px]" id="currentMenuTable">
+                            <thead class="sticky top-0">
                                 <tr>
+                                    <th class="px-3 py-2.5 text-right">نام محصول</th>
+                                    <th class="px-3 py-2.5 text-right hidden md:table-cell">توضیحات</th>
+                                    <th class="px-3 py-2.5 text-right w-20">قیمت</th>
+                                    <th class="px-3 py-2.5 text-center w-16">موجود</th>
+                                    <th class="px-3 py-2.5 text-center w-24">عملیات</th>
                                 </tr>
                             </thead>
+                            <tbody id="menuTableBody" class="divide-y divide-ochre/10">
+                                <!-- filled by JS -->
                             </tbody>
                         </table>
                     </div>
+                </div>
+            </div>
+            <!-- Menu extraction & upload -->
+            <div class="glass-card rounded-3xl p-5 md:p-6 space-y-4 shadow-xl relative overflow-hidden">
+                <div class="absolute inset-0 bg-pattern-fine opacity-20 pointer-events-none"></div>
+                <div class="relative">
+                    <div class="flex items-center gap-3 border-b border-ochre/20 pb-3 mb-3">
+                        <div class="w-9 h-9 rounded-xl bg-turk/20 border border-turk/40 flex items-center justify-center">
+                            <svg class="w-5 h-5 text-turk-light" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+                            </svg>
+                        </div>
+                        <div>
+                            <h2 class="section-title text-base md:text-lg text-ochre-light">استخراج خودکار منو با هوش مصنوعی</h2>
+                            <p class="text-[10px] text-cream/50 mt-0.5">بارگذاری تصویر یا فایل PDF منو</p>
+                        </div>
+                    </div>
+                    <p class="text-[11px] text-cream/70 leading-relaxed mb-4">
+                        تصویر منو یا فاکتور جدید کافه را بارگذاری کنید. هوش مصنوعی نیلا متون و قیمت‌ها را استخراج کرده و جهت تایید نهایی ساختاربندی می‌کند.
+                    </p>
+                    <!-- Drag & drop zone -->
+                    <div id="dropZone"
+                         class="drop-zone rounded-2xl p-8 md:p-10 text-center cursor-pointer"
+                         onclick="document.getElementById('menuFileInput').click()"
+                         ondragover="handleDragOver(event)"
+                         ondragleave="handleDragLeave(event)"
+                         ondrop="handleDrop(event)">
+                        <input type="file" id="menuFileInput" class="hidden" accept="image/*,application/pdf" onchange="uploadMenuFile(event)">
+                        <div class="flex flex-col items-center gap-3">
+                            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-ochre/20 to-rug/15 border border-ochre/30 flex items-center justify-center">
+                                <svg id="uploadIcon" class="w-8 h-8 text-ochre-light transition-all duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+                                </svg>
+                            </div>
+                            <span class="text-sm text-cream font-medium">فایل یا تصویر منو را بکشید یا انتخاب کنید</span>
+                            <span class="text-[10px] text-ochre/60 uppercase tracking-widest">فرمت‌های تصویری یا PDF</span>
+                        </div>
+                    </div>
+                    <div id="uploadLoader" class="hidden text-center py-6 bg-bazaar-950/70 rounded-2xl border border-turk/30 mt-4">
+                        <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-ochre mb-2"></div>
+                        <p class="text-[10px] text-ochre-light font-extrabold">نیلا در حال ساختارسازی و آنالیز متون منوی جدید...</p>
+                    </div>
+                    <div id="menuEditorContainer" class="hidden space-y-4 border-t border-ochre/15 pt-4 mt-4">
+                        <h3 class="text-xs font-bold text-ochre-light flex items-center gap-1.5 section-title">
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                            </svg>
+                            بازبینی اقلام منو پیش از انتشار زنده
+                        </h3>
+                        <div class="overflow-x-auto max-h-[250px] border border-ochre/20 rounded-2xl bg-bazaar-950/50">
+                            <table class="min-w-full admin-table text-[11px]">
+                                <thead>
+                                    <tr>
+                                        <th class="px-3 py-2.5 text-right">عنوان محصول</th>
+                                        <th class="px-3 py-2.5 text-right">توضیحات کوتاه</th>
+                                        <th class="px-3 py-2.5 text-right w-24">قیمت (تومان)</th>
+                                        <th class="px-3 py-2.5 text-center w-16">عملیات</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="menuEditorTableBody" class="divide-y divide-ochre/10">
+                                    <!-- dynamic rows -->
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="flex justify-end gap-2 flex-wrap">
+                            <button onclick="addEmptyMenuRow()" class="btn-ghost px-4 py-2 rounded-xl text-[10px]">
+                                + افزودن دستی محصول جدید
+                            </button>
+                            <button onclick="saveAndPublishMenu()" class="btn-turk px-5 py-2.5 rounded-xl text-[11px] font-extrabold flex items-center gap-2">
+                                ثبت و همگام‌سازی زنده منو
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
         </section>
         <!-- Left column: Admin chat assistant (5/12) -->
+        <section class="lg:col-span-5 flex flex-col glass-card-azure rounded-3xl h-[800px] lg:h-auto overflow-hidden shadow-xl relative">
+            <div class="absolute inset-0 bg-arch opacity-15 pointer-events-none"></div>
+            <div class="relative px-5 py-4 border-b border-turk/25 flex items-center justify-between bg-gradient-to-l from-azure-950/60 to-azure-900/40">
                 <div class="flex items-center gap-3">
+                    <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-turk/30 to-azure-700/30 border border-turk/40 flex items-center justify-center shadow-mosque">
+                        <svg class="w-6 h-6 text-turk-glow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                             <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" stroke-linecap="round"/>
                         </svg>
                     </div>
                     <div>
+                        <h3 class="section-title text-sm text-ochre-light tracking-wide">دستیار هوشمند ادمین</h3>
+                        <p class="text-[10px] text-turk-light/80 font-medium flex items-center gap-1.5">
+                            <span class="w-1.5 h-1.5 rounded-full bg-turk-light animate-pulse"></span>
+                            کنترل همگام موجودی و منو با زبان طبیعی
+                        </p>
                     </div>
                 </div>
             </div>
+            <div id="chatMessages" class="relative flex-1 overflow-y-auto p-4 space-y-4">
                 <div class="flex gap-2.5 max-w-[85%]">
+                    <div class="w-8 h-8 rounded-xl bg-gradient-to-br from-turk/20 to-azure-700/20 border border-turk/30 flex items-center justify-center flex-shrink-0">
+                        <span class="text-ochre-light font-display text-[11px]">ن</span>
                     </div>
+                    <div class="bg-bazaar-950/70 border border-ochre/20 text-cream text-xs rounded-2xl rounded-tr-none px-3.5 py-2.5 leading-relaxed shadow-inner-soft chat-markdown">
+                        سلام همکار گرامی! من <strong>نیلا</strong> هستم، دستیار مدیریت منوی <em>Cafe AI</em>. شما می‌توانید از همین‌جا اقلام منو را با گفتگوی ساده کنترل کنید؛ برای مثال بنویسید: «کروسان ساده تمام شد» یا «چای ماسالا را موجود کن» تا سریعاً تغییرات روی سیستم مشتریان نیز اعمال گردد.
                     </div>
                 </div>
             </div>
+            <div id="chatLoader" class="hidden relative px-4 py-3 flex items-center justify-between bg-azure-950/70 text-[10px] text-turk-light font-semibold border-t border-turk/20">
+                <div class="flex items-center gap-2.5">
+                    <div class="typing-dots flex gap-1">
+                        <span></span><span></span><span></span>
                     </div>
+                    <span>نیلا در حال پردازش دستور مدیریت...</span>
                 </div>
+                <button onclick="stopAdminChat()" class="px-3 py-1.5 bg-rug-dark/40 border border-rug/40 hover:bg-rug/40 rounded-lg text-[10px] text-rug-light font-bold transition-all">
+                    توقف
+                </button>
             </div>
+            <form id="chatForm" onsubmit="sendAdminMessage(event)" class="relative p-3 border-t border-turk/20 bg-bazaar-950/60 flex gap-2">
+                <input type="text" id="chatInput" placeholder="تغییر وضعیت یا ویرایش منو را متنی بنویسید..." autocomplete="off"
+                       class="flex-1 bg-azure-950/60 border border-azure-700/40 text-xs text-cream placeholder-ochre/40 rounded-xl px-4 py-3 focus:outline-none focus:border-ochre/60 transition-all duration-300">
+                <button type="submit" id="sendBtn" class="btn-primary px-4 py-3 rounded-xl text-xs flex items-center justify-center flex-shrink-0">
+                    <svg class="w-5 h-5 rotate-180" 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>
                 </button>
             </form>
         </section>
     </main>
+    <footer class="border-t border-ochre/15 py-4 text-center text-[10px] text-cream/40 bg-bazaar-950/60 backdrop-blur">
         طراحی و توسعه توسط الگوریتم داده نسترن | با الهام از فرهنگ تبریز © ۲۰۲۶
     </footer>
         marked.setOptions({ sanitize: true, breaks: true });
         let chatHistory = [
+            { role: 'model', content: 'سلام همکار گرامی! من نیلا هستم، دستیار مدیریت منوی Cafe AI. شما می‌توانید از همین‌جا اقلام منو را با گفتگوی ساده کنترل کنید؛ برای مثال بنویسید: «کروسان ساده تمام شد» یا «چای ماسالا را موجود کن» تا سریعاً تغییرات روی سیستم مشتریان نیز اعمال گردد.' }
         ];
         let abortController = null;
         let isGenerating = false;
             setInterval(fetchActiveOrders, 10000);
         });
+        // ==================== Order functions ====================
         async function fetchActiveOrders() {
             const container = document.getElementById('ordersContainer');
             try {
                 if (response.ok) {
                     if (orders.length === 0) {
                         container.innerHTML = `
+                            <div class="text-center py-16 text-ochre/60 border-2 border-dashed border-ochre/25 rounded-2xl bg-bazaar-950/30">
+                                <svg class="w-10 h-10 text-ochre/40 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                 </svg>
+                                <p class="text-sm font-medium">در حال حاضر سفارش معلقی در صف آشپزخانه نیست</p>
+                                <p class="text-[10px] text-cream/40 mt-1">سفارشات جدید به صورت خودکار به‌روزرسانی می‌شوند</p>
                             </div>
                         `;
                         return;
                         let itemsHtml = '';
                         order.items.forEach(item => {
                             itemsHtml += `
+                                <div class="flex items-center justify-between text-[11px] bg-bazaar-950/60 px-3 py-2 rounded-lg border border-ochre/20 group">
+                                    <span class="text-cream font-bold flex items-center gap-2">
+                                        <span class="w-1 h-5 bg-gradient-to-b from-rug to-ochre rounded-full"></span>
+                                        ${escapeHtml(item.name)}
+                                    </span>
+                                    <span class="text-ochre-light bg-ochre/10 px-2.5 py-0.5 rounded-md font-display text-[10px] border border-ochre/25">
+                                        ×${item.quantity}
+                                    </span>
                                 </div>
                             `;
                         });
                         const timeString = new Date(order.timestamp * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
                         const cardHtml = `
+                            <div class="order-card rounded-2xl p-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-3">
                                 <div class="flex-1 space-y-2 w-full">
+                                    <div class="flex items-center justify-between md:justify-start gap-3 w-full flex-wrap">
+                                        <span class="badge-table text-xs font-bold px-3 py-1 rounded-lg flex items-center gap-1.5">
+                                            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                                            </svg>
+                                            میز شماره ${order.table}
+                                        </span>
+                                        <span class="text-[10px] text-turk-light/70 font-medium flex items-center gap-1">
+                                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                            </svg>
+                                            ${timeString}
+                                        </span>
                                     </div>
                                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-1.5 mt-2">
                                         ${itemsHtml}
                                     </div>
                                 </div>
+                                <button onclick="completeOrder(${order.id})" class="w-full md:w-auto btn-ghost hover:bg-emerald-dark/40 hover:border-emerald-light/50 hover:text-emerald-light px-4 py-2.5 rounded-xl text-[10px] font-bold flex items-center justify-center gap-1.5 flex-shrink-0 group">
+                                    <svg class="w-4 h-4 transition-transform group-hover:scale-110" 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>
                                     تحویل نهایی شد
                                 </button>
                         container.insertAdjacentHTML('beforeend', cardHtml);
                     });
                 } else {
+                    container.innerHTML = `<div class="text-center py-6 text-rug-light text-xs">خطا در دریافت لیست سفارشات آشپزخانه.</div>`;
                 }
             } catch (err) {
+                container.innerHTML = `<div class="text-center py-6 text-rug-light text-xs">عدم برقراری ارتباط زنده با سرور: ${escapeHtml(err.message)}</div>`;
             }
         }
             }
         }
+        // ==================== Menu CRUD ====================
         async function fetchCurrentMenu() {
             const tbody = document.getElementById('menuTableBody');
+            tbody.innerHTML = '<tr><td colspan="5" class="text-center py-8 text-ochre/60 text-xs">در حال بارگذاری منو...</td></tr>';
             try {
                 const res = await fetch('/api/admin/menu');
                 const menu = await res.json();
                 if (res.ok && Array.isArray(menu)) {
                     renderMenuTable(menu);
                 } else {
+                    tbody.innerHTML = '<tr><td colspan="5" class="text-center py-8 text-rug-light text-xs">خطا در بارگذاری منو</td></tr>';
                 }
             } catch (e) {
+                tbody.innerHTML = '<tr><td colspan="5" class="text-center py-8 text-rug-light text-xs">عدم اتصال به سرور</td></tr>';
             }
         }
             const tbody = document.getElementById('menuTableBody');
             tbody.innerHTML = '';
             if (menu.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="5" class="text-center py-8 text-ochre/60 text-xs">منو خالی است. آیتم جدید اضافه کنید.</td></tr>';
                 return;
             }
             menu.forEach(item => {
                 const row = document.createElement('tr');
+                row.className = 'menu-row';
                 row.dataset.id = item.id;
                 row.innerHTML = `
+                    <td class="px-2 py-2">
+                        <span class="view-mode font-bold text-cream">${escapeHtml(item.name)}</span>
+                        <input type="text" class="edit-mode hidden w-full bg-azure-950/60 border border-azure-700/40 rounded px-2 py-1 text-cream text-[11px]" value="${escapeHtml(item.name)}" data-field="name">
                     </td>
+                    <td class="px-2 py-2 hidden md:table-cell">
+                        <span class="view-mode text-cream/60 text-[10px]">${escapeHtml(item.description || '-')}</span>
+                        <input type="text" class="edit-mode hidden w-full bg-azure-950/60 border border-azure-700/40 rounded px-2 py-1 text-cream text-[11px]" value="${escapeHtml(item.description || '')}" data-field="description">
                     </td>
+                    <td class="px-2 py-2">
+                        <span class="view-mode text-ochre-light font-medium">${escapeHtml(item.price || '-')}</span>
+                        <input type="text" class="edit-mode hidden w-full bg-azure-950/60 border border-azure-700/40 rounded px-2 py-1 text-cream text-[11px]" value="${escapeHtml(item.price || '')}" data-field="price">
                     </td>
+                    <td class="px-2 py-2 text-center">
+                        <span class="view-mode text-[10px] ${item.available ? 'text-emerald-light' : 'text-rug-light'} font-bold">${item.available ? '✓ موجود' : '✗ ناموجود'}</span>
+                        <div class="edit-mode hidden flex items-center justify-center">
+                            <input type="checkbox" data-field="available" ${item.available ? 'checked' : ''}>
+                        </div>
                     </td>
+                    <td class="px-2 py-2 text-center">
                         <div class="view-mode flex gap-1 justify-center">
+                            <button onclick="editMenuItem(this)" class="p-1.5 text-turk/70 hover:text-ochre-light transition-colors rounded-lg hover:bg-bazaar-800/50" title="ویرایش">
                                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                 </svg>
                             </button>
+                            <button onclick="deleteMenuItem(${item.id})" class="p-1.5 text-cream/30 hover:text-rug-light transition-colors rounded-lg hover:bg-bazaar-800/50" title="حذف">
                                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                 </svg>
                             </button>
                         </div>
                         <div class="edit-mode hidden flex gap-1 justify-center">
+                            <button onclick="saveMenuItem(this, ${item.id})" class="px-2.5 py-1 bg-emerald-dark/40 border border-emerald-light/40 text-emerald-light rounded-md text-[10px] font-bold hover:bg-emerald-dark/60">ذخیره</button>
+                            <button onclick="cancelEdit(this)" class="px-2.5 py-1 bg-bazaar-800 border border-ochre/20 text-cream/60 rounded-md text-[10px] hover:border-ochre/40">لغو</button>
                         </div>
                     </td>
                 `;
         }
         function cancelEdit(btn) {
             fetchCurrentMenu();
         }
             }
         }
+        function addMenuItemRow() {
             const tbody = document.getElementById('menuTableBody');
             const row = document.createElement('tr');
+            row.className = 'menu-row bg-bazaar-800/40';
             row.innerHTML = `
+                <td class="px-2 py-2">
+                    <input type="text" class="w-full bg-azure-950/60 border border-turk/40 rounded px-2 py-1 text-cream text-[11px]" placeholder="نام محصول" data-field="name">
                 </td>
+                <td class="px-2 py-2 hidden md:table-cell">
+                    <input type="text" class="w-full bg-azure-950/60 border border-azure-700/40 rounded px-2 py-1 text-cream text-[11px]" placeholder="توضیحات" data-field="description">
                 </td>
+                <td class="px-2 py-2">
+                    <input type="text" class="w-full bg-azure-950/60 border border-azure-700/40 rounded px-2 py-1 text-cream text-[11px]" placeholder="قیمت" data-field="price">
                 </td>
+                <td class="px-2 py-2 text-center">
                     <input type="checkbox" data-field="available" checked>
                 </td>
+                <td class="px-2 py-2 text-center">
+                    <button onclick="saveNewItem(this)" class="btn-turk px-3 py-1 rounded-md text-[10px]">افزودن</button>
                 </td>
             `;
             tbody.appendChild(row);
             }
         }
+        // ==================== Menu extraction ====================
         function handleDragOver(e) {
             e.preventDefault();
             const dropZone = document.getElementById('dropZone');
+            dropZone.classList.add('drag-over');
         }
         function handleDragLeave(e) {
             e.preventDefault();
             const dropZone = document.getElementById('dropZone');
+            dropZone.classList.remove('drag-over');
         }
         function handleDrop(e) {
             e.preventDefault();
             tbody.innerHTML = '';
             menuItems.forEach((item, index) => {
                 const row = `
+                    <tr class="menu-row">
                         <td class="px-2 py-2">
+                            <input type="text" class="menu-name w-full bg-azure-950/60 border border-azure-700/40 rounded-lg px-2.5 py-1.5 text-cream focus:border-ochre/50 text-[11px]" value="${escapeHtml(item.name || '')}">
                         </td>
                         <td class="px-2 py-2">
+                            <input type="text" class="menu-desc w-full bg-azure-950/60 border border-azure-700/40 rounded-lg px-2.5 py-1.5 text-cream focus:border-ochre/50 text-[11px]" value="${escapeHtml(item.description || '')}">
                         </td>
                         <td class="px-2 py-2">
+                            <input type="text" class="menu-price w-full bg-azure-950/60 border border-azure-700/40 rounded-lg px-2.5 py-1.5 text-cream focus:border-ochre/50 text-[11px]" value="${escapeHtml(item.price || '')}">
                         </td>
                         <td class="px-2 py-2 text-center">
+                            <button onclick="removeMenuRow(this)" class="p-1.5 text-cream/30 hover:text-rug-light transition-colors rounded-lg hover:bg-bazaar-800/50">
                                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                 </svg>
                             </button>
                         </td>
         function addEmptyMenuRow() {
             const tbody = document.getElementById('menuEditorTableBody');
             const row = `
+                <tr class="menu-row">
                     <td class="px-2 py-2">
+                        <input type="text" class="menu-name w-full bg-azure-950/60 border border-azure-700/40 rounded-lg px-2.5 py-1.5 text-cream focus:border-ochre/50 text-[11px]" placeholder="مثال: لاته کارامل">
                     </td>
                     <td class="px-2 py-2">
+                        <input type="text" class="menu-desc w-full bg-azure-950/60 border border-azure-700/40 rounded-lg px-2.5 py-1.5 text-cream focus:border-ochre/50 text-[11px]" placeholder="ترکیب اسپرسو دبل، سس کارامل و فوم شیر">
                     </td>
                     <td class="px-2 py-2">
+                        <input type="text" class="menu-price w-full bg-azure-950/60 border border-azure-700/40 rounded-lg px-2.5 py-1.5 text-cream focus:border-ochre/50 text-[11px]" placeholder="۸۵,۰۰۰">
                     </td>
                     <td class="px-2 py-2 text-center">
+                        <button onclick="removeMenuRow(this)" class="p-1.5 text-cream/30 hover:text-rug-light transition-colors rounded-lg hover:bg-bazaar-800/50">
                             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                             </svg>
                         </button>
                     </td>
                 });
                 const data = await response.json();
                 if (response.ok && data.success) {
+                    alert("✅ منوی جدید با موفقیت ثبت و روی وب‌سایت همگام‌سازی شد!");
                     document.getElementById('menuEditorContainer').classList.add('hidden');
+                    fetchCurrentMenu();
+                    appendChatMessage('model', '✅ **منوی زنده همگام‌سازی شد.** سیستم سفارش‌گیری مشتریان اکنون بر مبنای آخرین لیست ویرایش‌شده کالیبره شده است.');
                 } else {
                     alert(data.error || 'بروز خطا در همگام‌سازی ساختار داده‌های جدید.');
                 }
             }
         }
+        // ==================== Admin Chat ====================
         async function sendAdminMessage(e) {
             e.preventDefault();
             if (isGenerating) return;
                 isGenerating = false;
                 if (response.ok && data.success) {
+                    const botBubbleId = appendChatMessage('model', '');
                     const botBubble = document.getElementById(botBubbleId);
                     const textResponse = data.response;
                     let i = 0;
                     function typeText() {
                         if (i < textResponse.length && !abortController.signal.aborted) {
                             botBubble.textContent += textResponse.charAt(i);
                             document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
                             setTimeout(typeText, 6);
                         } else {
+                            botBubble.textContent = '';
                             botBubble.innerHTML = marked.parse(textResponse);
                             chatHistory.push({ role: 'model', content: textResponse });
                             fetchCurrentMenu();
                         }
                     }
                 toggleChatLoading(false);
                 isGenerating = false;
                 if (err.name !== 'AbortError') {
+                    appendChatMessage('model', '❌ عدم دریافت موفق پاسخ در بستر شبکه: ' + escapeHtml(err.message));
                 }
             }
         }
         function appendChatMessage(role, content) {
             const container = document.getElementById('chatMessages');
+            const bubbleId = 'bubble-admin-' + Date.now() + '-' + Math.random().toString(36).substr(2, 5);
             let html = '';
             if (role === 'user') {
                 html = `
                     <div class="flex justify-end gap-2.5 max-w-[85%] mr-auto">
+                        <div class="bg-gradient-to-br from-rug/20 to-rug-dark/30 border border-rug/30 text-cream text-xs rounded-2xl rounded-tl-none px-3.5 py-2.5 leading-relaxed shadow-inner-soft">
                             ${escapeHtml(content)}
                         </div>
+                        <div class="w-8 h-8 rounded-xl bg-gradient-to-br from-ochre/30 to-rug/20 border border-ochre/40 flex items-center justify-center flex-shrink-0">
+                            <svg class="w-4 h-4 text-ochre-light" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                            </svg>
+                        </div>
                     </div>
                 `;
             } else {
                 html = `
                     <div class="flex gap-2.5 max-w-[85%]">
+                        <div class="w-8 h-8 rounded-xl bg-gradient-to-br from-turk/20 to-azure-700/20 border border-turk/30 flex items-center justify-center flex-shrink-0">
+                            <span class="text-ochre-light font-display text-[11px]">ن</span>
                         </div>
+                        <div id="${bubbleId}" class="bg-bazaar-950/70 border border-ochre/20 text-cream text-xs rounded-2xl rounded-tr-none px-3.5 py-2.5 leading-relaxed shadow-inner-soft chat-markdown">
                             ${content ? marked.parse(content) : ''}
                         </div>
                     </div>