Update customer.html

customer.html

@@ -22,47 +22,12 @@
                         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',
+                        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',
                     },
                     boxShadow: {
                         'carpet': '0 10px 40px -10px rgba(139, 30, 63, 0.35), 0 0 0 1px rgba(201, 169, 97, 0.15)',
@@ -78,22 +43,10 @@
                         'fade-in': 'fadeIn 0.35s ease-out',
                     },
                     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)' },
-                        },
-                        fadeIn: {
-                            '0%': { opacity: '0', transform: 'translateY(8px)' },
-                            '100%': { opacity: '1', transform: 'translateY(0)' },
-                        },
+                        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)' } },
+                        fadeIn: { '0%': { opacity: '0', transform: 'translateY(8px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
                     },
                 }
             }
@@ -103,21 +56,22 @@
     <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");
+            --vh: 1vh;
         }
 
         * { box-sizing: border-box; }
 
-        html {
-            scroll-behavior: smooth;
+        html, body {
             height: 100%;
             overflow: hidden;
-        }
-
-        html, body {
             overscroll-behavior: none;
             -webkit-overflow-scrolling: touch;
         }
 
+        @supports (height: 100dvh) {
+            html, body { height: 100dvh; }
+        }
+
         body {
             background-color: #1a0d07;
             color: #f5e6d3;
@@ -125,17 +79,10 @@
             font-feature-settings: "ss01", "cv01";
             margin: 0;
             padding: 0;
-            height: 100vh;
-            height: 100dvh;
             overflow: hidden;
-            position: fixed;
-            width: 100%;
         }
 
-        .bg-pattern {
-            background-image: var(--pattern-url);
-            background-size: 80px 80px;
-        }
+        .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");
@@ -152,6 +99,7 @@
             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%);
@@ -215,11 +163,8 @@
         .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;
+            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; }
@@ -235,62 +180,45 @@
         .chat-markdown em { color: #5eead4; font-style: italic; }
         .chat-markdown a { color: #2dd4bf; text-decoration: underline; text-underline-offset: 3px; }
         .chat-markdown code {
-            background: rgba(13, 148, 136, 0.18);
-            color: #5eead4;
-            padding: 0.15em 0.4em;
-            border-radius: 5px;
-            font-size: 0.88em;
+            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;
+            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;
+            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;
+            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;
+            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;
+            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);
-            display: block;
-            overflow-x: auto;
+            display: block; overflow-x: auto;
         }
         .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;
+            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;
         }
@@ -303,8 +231,7 @@
 
         .btn-primary {
             background: linear-gradient(135deg, #c9a961 0%, #9c7d3a 100%);
-            color: #1a0d07;
-            font-weight: 800;
+            color: #1a0d07; font-weight: 800;
             transition: all 0.3s ease;
             box-shadow: 0 8px 20px -5px rgba(201, 169, 97, 0.4);
         }
@@ -315,19 +242,9 @@
         }
         .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 
-        .btn-rug {
-            background: linear-gradient(135deg, #8b1e3f 0%, #5a1028 100%);
-            color: #f5e6d3;
-            border: 1px solid rgba(201, 169, 97, 0.3);
-        }
-        .btn-rug:hover { background: linear-gradient(135deg, #c23d5f 0%, #8b1e3f 100%); border-color: rgba(201, 169, 97, 0.6); }
-
         .typing-dots span {
-            display: inline-block;
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: #c9a961;
+            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; }
@@ -366,8 +283,7 @@
 
         button, .no-select { -webkit-user-select: none; user-select: none; }
 
-        /* ============ FOOTER FIX ============ */
-        /* فوتر به صورت ثابت در پایین view قرار می‌گیرد و هرگز روی محتوا نمی‌افتد */
+        /* ============ FOOTER ============ */
         .app-footer {
             flex-shrink: 0;
             position: relative;
@@ -378,42 +294,100 @@
             border-top: 1px solid rgba(201, 169, 97, 0.15);
         }
 
-        /* Mobile First */
+        /* ============ CHAT COLUMN - KEY FIX ============ */
+        .chat-column {
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        .chat-messages-container {
+            flex: 1;
+            min-height: 0;
+            overflow-y: auto;
+            overflow-x: hidden;
+            overscroll-behavior: contain;
+            -webkit-overflow-scrolling: touch;
+        }
+
+        .chat-header-box,
+        .chat-loader-box,
+        .chat-input-box {
+            flex-shrink: 0;
+        }
+
+        /* ============ RESPONSIVE HEIGHTS ============ */
+
+        /* Mobile (< 640px) */
         @media (max-width: 639px) {
             .hero-title { font-size: 2.5rem !important; }
             .hero-logo { width: 70px !important; height: 70px !important; }
             .tables-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 0.5rem !important; }
             .table-btn span { font-size: 1.5rem !important; }
             .info-cards { grid-template-columns: 1fr !important; }
-            .chat-input-area { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important; }
+            .chat-column {
+                height: 65vh;
+                height: calc(var(--vh, 1vh) * 65);
+                min-height: 380px;
+                max-height: 550px;
+                flex-shrink: 0;
+            }
+            .chat-input-area {
+                padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
+            }
         }
 
+        /* Tablet (640px - 1023px) */
         @media (min-width: 640px) and (max-width: 1023px) {
             .hero-title { font-size: 3.5rem !important; }
             .hero-logo { width: 90px !important; height: 90px !important; }
             .tables-grid { grid-template-columns: repeat(5, 1fr) !important; }
             .info-cards { grid-template-columns: repeat(2, 1fr) !important; }
+            .chat-column {
+                height: 70vh;
+                height: calc(var(--vh, 1vh) * 70);
+                min-height: 420px;
+                max-height: 620px;
+                flex-shrink: 0;
+            }
         }
 
+        /* Desktop (>= 1024px) - چت کل ارتفاع را می‌گیرد */
         @media (min-width: 1024px) {
             .hero-title { font-size: 4.5rem !important; }
             .hero-logo { width: 100px !important; height: 100px !important; }
             .tables-grid { grid-template-columns: repeat(10, 1fr) !important; }
             .info-cards { grid-template-columns: repeat(3, 1fr) !important; }
+            .chat-column {
+                height: 100%;
+                max-height: 100%;
+            }
         }
 
+        /* Landscape mobile */
         @media (max-height: 500px) and (orientation: landscape) {
             .hero-title { font-size: 2rem !important; }
             .hero-logo { width: 50px !important; height: 50px !important; }
             .hero-header { padding-top: 0.5rem !important; padding-bottom: 0.25rem !important; }
-            .chat-column { min-height: 280px !important; }
+            .chat-column {
+                height: 75vh !important;
+                min-height: 280px !important;
+            }
         }
 
+        /* Small mobile */
         @media (max-width: 380px) {
             .tables-grid { grid-template-columns: repeat(4, 1fr) !important; }
             .table-btn { padding: 0.375rem !important; }
             .table-btn span { font-size: 1.25rem !important; }
             .hero-title { font-size: 2rem !important; }
+            .chat-column {
+                height: 60vh;
+                height: calc(var(--vh, 1vh) * 60);
+                min-height: 340px;
+                max-height: 500px;
+            }
         }
 
         @supports (padding-bottom: env(safe-area-inset-bottom)) {
@@ -427,7 +401,6 @@
     <!-- ============ VIEW 1: TABLE SELECTION ============ -->
     <section id="view-table-selection" class="view-container view-visible">
 
-        <!-- Ambient Background (fixed) -->
         <div class="absolute 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>
@@ -436,10 +409,8 @@
             <div class="absolute top-1/3 left-1/4 w-[400px] h-[400px] rounded-full bg-ochre/8 blur-[120px] animate-shimmer"></div>
         </div>
 
-        <!-- Scrollable wrapper (فقط header و main، بدون footer) -->
         <div class="scroll-area flex-1 min-h-0 relative z-10">
 
-            <!-- Hero Header -->
             <header class="hero-header px-4 pt-6 pb-3 md:pt-10 md:pb-4 text-center relative flex-shrink-0">
                 <div class="max-w-4xl mx-auto">
                     <div class="inline-flex items-center gap-4 mb-4 animate-float">
@@ -469,7 +440,6 @@
                 </div>
             </header>
 
-            <!-- Main content -->
             <main class="px-4 md:px-8 pb-8 relative">
                 <div class="max-w-5xl mx-auto">
 
@@ -509,7 +479,6 @@
                         </div>
                     </div>
 
-                    <!-- Info Cards -->
                     <div class="info-cards grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
                         <div class="glass-card rounded-2xl p-4 relative overflow-hidden group">
                             <div class="absolute top-0 right-0 w-20 h-20 bg-rug/15 rounded-full blur-2xl group-hover:bg-rug/25 transition-all"></div>
@@ -554,17 +523,15 @@
             </main>
         </div>
 
-        <!-- Footer (خارج از scroll-area، در پایین view-container) -->
         <footer class="app-footer py-3 text-center text-[10px] text-cream/40 safe-top safe-bottom">
             طراحی و توسعه توسط الگوریتم داده نسترن | با الهام از فرهنگ تبریز © ۲۰۲۶
         </footer>
     </section>
 
 
-    <!-- ============ VIEW 2: CHAT (بدون فوتر) ============ -->
+    <!-- ============ VIEW 2: CHAT ============ -->
     <section id="view-chat" class="view-container view-hidden">
 
-        <!-- Ambient Background -->
         <div class="absolute 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-30"></div>
@@ -604,11 +571,16 @@
                         <span class="text-[10px] text-cream/60">میز</span>
                         <span id="tableNumberDisplay" class="text-base md:text-lg font-display text-ochre-light table-number-glow">---</span>
                     </div>
+                    <button onclick="backToTables()" class="p-1.5 text-turk/60 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
+                        </svg>
+                    </button>
                 </div>
             </div>
         </header>
 
-        <!-- Main content -->
+        <!-- Main content with controlled height -->
         <main class="flex-1 flex flex-col min-h-0 p-2.5 md:p-4 lg:p-6 z-10 relative gap-3 overflow-hidden">
             <div class="max-w-5xl w-full mx-auto flex-1 flex flex-col min-h-0 gap-3">
 
@@ -635,11 +607,12 @@
                     </div>
                 </div>
 
-                <!-- Chat card -->
-                <div class="chat-column flex-1 flex flex-col glass-card-azure rounded-2xl md:rounded-3xl overflow-hidden shadow-xl min-h-0 relative">
+                <!-- Chat column (fixed height controlled by CSS) -->
+                <div class="chat-column glass-card-azure rounded-2xl md:rounded-3xl shadow-xl relative">
                     <div class="absolute inset-0 bg-arch opacity-20 pointer-events-none"></div>
 
-                    <div class="relative flex-shrink-0 px-3.5 py-2.5 md:px-5 md:py-3 border-b border-turk/25 flex items-center gap-2.5 bg-gradient-to-l from-azure-950/60 to-azure-900/40">
+                    <!-- Chat header (flex-shrink-0) -->
+                    <div class="chat-header-box relative px-3.5 md:px-5 py-2.5 md:py-3 border-b border-turk/25 flex items-center gap-2.5 bg-gradient-to-l from-azure-950/60 to-azure-900/40">
                         <div class="w-9 h-9 md:w-10 md:h-10 rounded-xl bg-gradient-to-br from-turk/30 to-azure-700/30 border border-turk/40 flex items-center justify-center shadow-mosque flex-shrink-0">
                             <svg class="w-5 h-5 md:w-6 md:h-6 text-turk-glow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                 <circle cx="12" cy="8" r="4"/>
@@ -647,7 +620,7 @@
                                 <path d="M9 10l2 2 4-4" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
                             </svg>
                         </div>
-                        <div class="min-w-0">
+                        <div class="min-w-0 flex-1">
                             <h3 class="text-xs md:text-sm font-display text-ochre-light tracking-wide">نیلا، دستیار کافه</h3>
                             <p class="text-[9px] md: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>
@@ -656,19 +629,21 @@
                         </div>
                     </div>
 
-                    <div id="chatMessages" class="relative flex-1 overflow-y-auto scroll-area p-3 md:p-4 space-y-3 min-h-0">
-                        <div class="flex gap-2.5 max-w-[88%]">
+                    <!-- Chat messages (SCROLLABLE - key fix) -->
+                    <div id="chatMessages" class="chat-messages-container p-3 md:p-4 space-y-3 relative">
+                        <div class="flex gap-2 md:gap-2.5 max-w-[88%]">
                             <div class="w-7 h-7 md:w-8 md: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-[10px] md:text-[11px]">ن</span>
                             </div>
-                            <div class="bg-bazaar-950/70 border border-ochre/20 text-cream text-xs md:text-sm rounded-2xl rounded-tr-none px-3 py-2 md:px-3.5 md:py-2.5 leading-relaxed shadow-inner-soft chat-markdown">
+                            <div class="bg-bazaar-950/70 border border-ochre/20 text-cream text-xs md:text-sm rounded-2xl rounded-tr-none px-3 py-2 md:px-3.5 md:py-2.5 leading-relaxed shadow-inner-soft chat-markdown break-words" style="flex: 1; max-width: calc(100% - 2.5rem);">
                                 سلام! من <strong>نیلا</strong> هستم، دستیار هوشمند کافه آی. به میزتون خوش اومدید 🌸<br>
                                 چه نوشیدنی، غذا یا شیرینی‌ای می‌پسندید؟ <em>منوی امروز</em> رو می‌تونم براتون بگم. 😊
                             </div>
                         </div>
                     </div>
 
-                    <div id="chatLoader" class="hidden relative flex-shrink-0 px-3 py-2 md:px-4 md:py-2.5 flex items-center justify-between bg-azure-950/70 text-[9px] md:text-[10px] text-turk-light font-semibold border-t border-turk/20">
+                    <!-- Chat loader (flex-shrink-0) -->
+                    <div id="chatLoader" class="chat-loader-box hidden relative px-3 py-2 md:px-4 md:py-2.5 flex items-center justify-between bg-azure-950/70 text-[9px] md:text-[10px] text-turk-light font-semibold border-t border-turk/20">
                         <div class="flex items-center gap-2">
                             <div class="typing-dots flex gap-1">
                                 <span></span><span></span><span></span>
@@ -678,7 +653,8 @@
                         <button onclick="stopGeneration()" class="px-2.5 py-1 md:px-3 md:py-1.5 bg-rug-dark/40 border border-rug/40 hover:bg-rug/40 rounded-lg text-[9px] md:text-[10px] text-rug-light font-bold transition-all">توقف</button>
                     </div>
 
-                    <form id="chatForm" onsubmit="sendCustomerMessage(event)" class="relative flex-shrink-0 p-2 md:p-3 border-t border-turk/20 bg-bazaar-950/60 flex gap-2 chat-input-area safe-bottom">
+                    <!-- Chat input (flex-shrink-0) -->
+                    <form id="chatForm" onsubmit="sendCustomerMessage(event)" class="chat-input-box relative p-2 md:p-3 border-t border-turk/20 bg-bazaar-950/60 flex gap-2 chat-input-area safe-bottom">
                         <input type="text" id="chatInput" placeholder="پیام خود را بنویسید..." autocomplete="off"
                                class="flex-1 min-w-0 bg-azure-950/60 border border-azure-700/40 text-xs md:text-sm text-cream placeholder-ochre/40 rounded-xl px-3.5 py-2.5 md:py-3 focus:outline-none focus:border-ochre/60 transition-all duration-300">
                         <button type="submit" id="sendBtn" class="btn-primary px-3.5 md:px-4 py-2.5 md:py-3 rounded-xl text-xs flex items-center justify-center flex-shrink-0">
@@ -693,6 +669,7 @@
     </section>
 
     <script>
+        // ============ VIEWPORT HEIGHT FIX ============
         function setVh() {
             const vh = window.innerHeight * 0.01;
             document.documentElement.style.setProperty('--vh', `${vh}px`);
@@ -701,6 +678,24 @@
         window.addEventListener('resize', setVh);
         window.addEventListener('orientationchange', () => setTimeout(setVh, 100));
 
+        // ============ AUTO SCROLL HELPER ============
+        function scrollChatToBottom(smooth = true) {
+            const chatScroll = document.getElementById('chatMessages');
+            if (chatScroll) {
+                if (smooth) {
+                    chatScroll.scrollTo({ top: chatScroll.scrollHeight, behavior: 'smooth' });
+                } else {
+                    chatScroll.scrollTop = chatScroll.scrollHeight;
+                }
+            }
+        }
+
+        window.addEventListener('resize', () => {
+            setVh();
+            setTimeout(scrollChatToBottom, 150);
+        });
+
+        // ============ CONFIG ============
         let currentTable = "{{ table_number }}" !== "None" && "{{ table_number }}" !== "" ? "{{ table_number }}" : null;
         let abortController = null;
         let isGenerating = false;
@@ -714,14 +709,16 @@
             if (currentTable && currentTable.trim() !== '') {
                 enterChatView(currentTable, false);
             }
+            setTimeout(scrollChatToBottom, 100);
         });
 
         document.addEventListener('touchmove', function(e) {
-            if (!e.target.closest('.scroll-area')) {
+            if (!e.target.closest('.scroll-area') && !e.target.closest('.chat-messages-container')) {
                 e.preventDefault();
             }
         }, { passive: false });
 
+        // ============ VIEW MANAGEMENT ============
         function switchView(targetView) {
             const sel = document.getElementById('view-table-selection');
             const chat = document.getElementById('view-chat');
@@ -741,9 +738,8 @@
             window.scrollTo(0, 0);
             const tablesScroll = sel.querySelector('.scroll-area');
             if (tablesScroll) tablesScroll.scrollTop = 0;
-            const chatScroll = document.getElementById('chatMessages');
-            if (chatScroll && targetView === 'chat') {
-                setTimeout(() => { chatScroll.scrollTop = chatScroll.scrollHeight; }, 100);
+            if (targetView === 'chat') {
+                setTimeout(scrollChatToBottom, 100);
             }
         }
 
@@ -768,6 +764,7 @@
             document.getElementById('draftOrderPanel').classList.add('hidden');
         }
 
+        // ============ TABLES GRID ============
         function renderTablesGrid() {
             const grid = document.getElementById('tablesGrid');
             grid.innerHTML = '';
@@ -800,23 +797,26 @@
             currentDraft = null;
             stopGeneration();
             if (currentTable) fetch(`/api/customer/stop/${currentTable}`, { method: 'POST' }).catch(() => {});
+            setTimeout(scrollChatToBottom, 100);
         }
 
         function appendInitialGreeting() {
             const container = document.getElementById('chatMessages');
             container.innerHTML = `
-                <div class="flex gap-2.5 max-w-[88%]">
+                <div class="flex gap-2 md:gap-2.5 max-w-[88%]">
                     <div class="w-7 h-7 md:w-8 md: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-[10px] md:text-[11px]">ن</span>
                     </div>
-                    <div class="bg-bazaar-950/70 border border-ochre/20 text-cream text-xs md:text-sm rounded-2xl rounded-tr-none px-3 py-2 md:px-3.5 md:py-2.5 leading-relaxed shadow-inner-soft chat-markdown">
+                    <div class="bg-bazaar-950/70 border border-ochre/20 text-cream text-xs md:text-sm rounded-2xl rounded-tr-none px-3 py-2 md:px-3.5 md:py-2.5 leading-relaxed shadow-inner-soft chat-markdown break-words" style="flex: 1; max-width: calc(100% - 2.5rem);">
                         سلام! من <strong>نیلا</strong> هستم، دستیار هوشمند کافه آی. به میزتون خوش اومدید 🌸<br>
                         چه نوشیدنی، غذا یا شیرینی‌ای می‌پسندید؟ <em>منوی امروز</em> رو می‌تونم براتون بگم. 😊
                     </div>
                 </div>
             `;
+            setTimeout(scrollChatToBottom, 50);
         }
 
+        // ============ CHAT FUNCTIONS ============
         async function sendCustomerMessage(e) {
             e.preventDefault();
             if (isGenerating) return;
@@ -867,13 +867,13 @@
                                 if (data.type === 'text') {
                                     fullText += data.content;
                                     botBubble.textContent = fullText;
-                                    const chatScroll = document.getElementById('chatMessages');
-                                    chatScroll.scrollTop = chatScroll.scrollHeight;
+                                    scrollChatToBottom(false);
                                 } else if (data.type === 'draft') {
                                     currentDraft = data.items;
                                     showDraftPanel(currentDraft);
                                 } else if (data.type === 'error') {
                                     botBubble.textContent = '⚠️ ' + data.content;
+                                    scrollChatToBottom(false);
                                 }
                             } catch (parseErr) {}
                         }
@@ -882,8 +882,7 @@
 
                 botBubble.textContent = '';
                 botBubble.innerHTML = marked.parse(fullText);
-                const chatScroll = document.getElementById('chatMessages');
-                chatScroll.scrollTop = chatScroll.scrollHeight;
+                scrollChatToBottom(true);
 
             } catch (err) {
                 if (err.name !== 'AbortError') {
@@ -928,8 +927,8 @@
             draftItems.innerHTML = '';
             items.forEach(item => {
                 draftItems.innerHTML += `
-                    <div class="flex items-center justify-between text-[11px] md:text-xs bg-bazaar-900/70 px-2.5 py-2 rounded-lg border border-ochre/20 group">
-                        <span class="text-cream font-bold flex items-center gap-2">
+                    <div class="flex items-center justify-between text-[11px] md:text-xs bg-bazaar-900/70 px-2.5 py-2 rounded-lg border border-ochre/20">
+                        <span class="text-cream font-bold flex items-center gap-2 min-w-0">
                             <span class="w-1 h-5 bg-gradient-to-b from-rug to-ochre rounded-full flex-shrink-0"></span>
                             <span class="truncate">${escapeHtml(item.name)}</span>
                         </span>
@@ -974,8 +973,8 @@
 
             if (role === 'user') {
                 html = `
-                    <div class="flex justify-end gap-2 max-w-[88%] mr-auto">
-                        <div class="bg-gradient-to-br from-rug/20 to-rug-dark/30 border border-rug/30 text-cream text-xs md:text-sm rounded-2xl rounded-tl-none px-3 py-2 md:px-3.5 md:py-2.5 leading-relaxed shadow-inner-soft break-words">
+                    <div class="flex justify-end gap-2 md:gap-2.5 max-w-[88%] mr-auto">
+                        <div class="bg-gradient-to-br from-rug/20 to-rug-dark/30 border border-rug/30 text-cream text-xs md:text-sm rounded-2xl rounded-tl-none px-3 py-2 md:px-3.5 md:py-2.5 leading-relaxed shadow-inner-soft break-words" style="flex: 1; max-width: calc(100% - 2.5rem);">
                             ${escapeHtml(content)}
                         </div>
                         <div class="w-7 h-7 md:w-8 md: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">
@@ -987,7 +986,7 @@
                 `;
             } else {
                 html = `
-                    <div class="flex gap-2.5 max-w-[88%]">
+                    <div class="flex gap-2 md:gap-2.5 max-w-[88%]">
                         <div class="w-7 h-7 md:w-8 md: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-[10px] md:text-[11px]">ن</span>
                         </div>
@@ -999,7 +998,8 @@
             }
 
             container.insertAdjacentHTML('beforeend', html);
-            container.scrollTop = container.scrollHeight;
+            // Always scroll to bottom after adding message
+            scrollChatToBottom(true);
             return bubbleId;
         }
 
@@ -1007,23 +1007,14 @@
             return String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
         }
 
+        // Mobile keyboard handling
         const chatInput = document.getElementById('chatInput');
         if (chatInput) {
             chatInput.addEventListener('focus', () => {
-                setTimeout(() => {
-                    const chatScroll = document.getElementById('chatMessages');
-                    if (chatScroll) chatScroll.scrollTop = chatScroll.scrollHeight;
-                }, 300);
+                setTimeout(scrollChatToBottom, 300);
+                setTimeout(scrollChatToBottom, 600);
             });
         }
-
-        window.addEventListener('resize', () => {
-            setVh();
-            const chatScroll = document.getElementById('chatMessages');
-            if (chatScroll && document.getElementById('view-chat').classList.contains('view-visible')) {
-                setTimeout(() => { chatScroll.scrollTop = chatScroll.scrollHeight; }, 100);
-            }
-        });
     </script>
 </body>
 </html>