Update customer.html

customer.html

@@ -106,6 +106,10 @@
             --vh: 1vh;
         }
 
+        * {
+            box-sizing: border-box;
+        }
+
         html {
             scroll-behavior: smooth;
             height: 100%;
@@ -122,18 +126,15 @@
             color: #f5e6d3;
             -webkit-tap-highlight-color: transparent;
             font-feature-settings: "ss01", "cv01";
-            height: 100%;
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            height: 100dvh;
             overflow: hidden;
             position: fixed;
-            inset: 0;
             width: 100%;
         }
 
-        /* Fix for iOS 100dvh */
-        @supports (height: 100dvh) {
-            body { height: 100dvh; }
-        }
-
         .bg-pattern {
             background-image: var(--pattern-url);
             background-size: 80px 80px;
@@ -148,7 +149,6 @@
             background-size: 200px 200px;
         }
 
-        /* Scrollbar */
         ::-webkit-scrollbar { width: 6px; height: 6px; }
         ::-webkit-scrollbar-track { background: transparent; }
         ::-webkit-scrollbar-thumb {
@@ -177,7 +177,6 @@
                 inset 0 1px 0 rgba(94, 234, 212, 0.1);
         }
 
-        /* دکمه میز - طرح فرش */
         .table-btn {
             position: relative;
             background: linear-gradient(145deg, rgba(139, 30, 63, 0.15), rgba(90, 16, 40, 0.25));
@@ -211,7 +210,6 @@
         }
         .table-btn:active { transform: translateY(-1px) scale(1); }
 
-        /* Ornament divider */
         .ornament-divider {
             position: relative;
             text-align: center;
@@ -228,7 +226,6 @@
         .ornament-divider::before { left: 0; }
         .ornament-divider::after { right: 0; }
 
-        /* Chat Markdown Styles */
         .chat-markdown { line-height: 1.85; word-wrap: break-word; overflow-wrap: break-word; }
         .chat-markdown > * + * { margin-top: 0.6em; }
 
@@ -356,17 +353,14 @@
             border: 2px solid rgba(201, 169, 97, 0.3);
         }
 
-        /* Table number glow */
         .table-number-glow {
             text-shadow: 0 0 10px rgba(201, 169, 97, 0.8), 0 0 20px rgba(201, 169, 97, 0.4);
         }
 
-        /* Decorative frame */
         .arch-shape {
             border-radius: 50% 50% 1rem 1rem / 35% 35% 1rem 1rem;
         }
 
-        /* Button primary */
         .btn-primary {
             background: linear-gradient(135deg, #c9a961 0%, #9c7d3a 100%);
             color: #1a0d07;
@@ -395,7 +389,6 @@
             border-color: rgba(201, 169, 97, 0.6);
         }
 
-        /* Typing dots */
         .typing-dots span {
             display: inline-block;
             width: 6px;
@@ -411,28 +404,32 @@
             30% { transform: translateY(-8px); opacity: 1; }
         }
 
-        /* Input focus */
         input:focus {
             outline: none;
             border-color: rgba(201, 169, 97, 0.6) !important;
             box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
         }
 
-        /* Safe area padding for iOS */
-        .safe-bottom {
-            padding-bottom: env(safe-area-inset-bottom);
+        .view-hidden {
+            display: none !important;
+        }
+
+        .view-visible {
+            display: flex !important;
+            animation: fadeIn 0.35s ease-out;
         }
 
-        /* View container */
         .view-container {
             position: fixed;
             inset: 0;
             display: flex;
             flex-direction: column;
             overflow: hidden;
+            width: 100%;
+            height: 100vh;
+            height: 100dvh;
         }
 
-        /* Scrollable areas */
         .scroll-area {
             overflow-y: auto;
             overflow-x: hidden;
@@ -440,42 +437,64 @@
             -webkit-overflow-scrolling: touch;
         }
 
-        /* Mobile chat input adjustments */
-        @media (max-width: 640px) {
+        button, .no-select {
+            -webkit-user-select: none;
+            user-select: none;
+        }
+
+        /* ============ RESPONSIVE BREAKPOINTS ============ */
+
+        /* Mobile First (< 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));
+                padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
             }
-            .chat-markdown { font-size: 0.95rem; }
         }
 
-        /* Landscape mobile */
-        @media (max-height: 500px) and (orientation: landscape) {
-            .hero-title { font-size: 2.5rem !important; }
-            .hero-logo { width: 60px !important; height: 60px !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; }
         }
 
-        /* Prevent text selection on buttons */
-        button, .no-select {
-            -webkit-user-select: none;
-            user-select: none;
+        /* 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; }
         }
 
-        /* Hide view cleanly */
-        .view-hidden {
-            display: none !important;
+        /* 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; }
         }
 
-        /* Show view with animation */
-        .view-visible {
-            display: flex !important;
-            animation: fadeIn 0.35s ease-out;
+        /* Extra 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; }
         }
 
-        /* Small mobile tables grid */
-        @media (max-width: 480px) {
-            .tables-grid-mobile {
-                grid-template-columns: repeat(4, 1fr);
-                gap: 0.5rem;
+        /* iOS Safe Area */
+        @supports (padding-bottom: env(safe-area-inset-bottom)) {
+            .safe-bottom {
+                padding-bottom: env(safe-area-inset-bottom);
+            }
+            .safe-top {
+                padding-top: env(safe-area-inset-top);
             }
         }
     </style>
@@ -498,13 +517,13 @@
         <div class="scroll-area flex-1 relative z-10 flex flex-col min-h-0">
 
             <!-- Hero Header -->
-            <header class="px-4 pt-6 pb-3 md:pt-10 md:pb-4 text-center relative flex-shrink-0">
+            <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">
                         <div class="relative">
-                            <div class="hero-logo w-16 h-16 md:w-20 md:h-20 arch-shape bg-gradient-to-br from-rug via-rug-dark to-bazaar-900 border-2 border-ochre/60 flex items-center justify-center shadow-carpet">
-                                <svg class="w-8 h-8 md:w-10 md:h-10 text-ochre-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                            <div class="hero-logo w-20 h-20 md:w-24 md:h-24 arch-shape bg-gradient-to-br from-rug via-rug-dark to-bazaar-900 border-2 border-ochre/60 flex items-center justify-center shadow-carpet">
+                                <svg class="w-10 h-10 md:w-12 md:h-12 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"/>
@@ -557,7 +576,7 @@
                             </div>
 
                             <!-- 20 Tables Grid -->
-                            <div id="tablesGrid" class="tables-grid-mobile grid grid-cols-4 sm:grid-cols-5 md:grid-cols-5 lg:grid-cols-10 gap-2 md:gap-3"></div>
+                            <div id="tablesGrid" class="tables-grid grid grid-cols-4 sm:grid-cols-5 md:grid-cols-5 lg:grid-cols-10 gap-2 md:gap-3"></div>
 
                             <div class="mt-4 pt-3 border-t border-ochre/15 flex items-center justify-between text-[10px] text-cream/50 flex-wrap gap-1.5">
                                 <span class="flex items-center gap-1.5">
@@ -572,7 +591,7 @@
                     </div>
 
                     <!-- Info Cards -->
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+                    <div class="info-cards grid grid-cols-1 md:grid-cols-3 gap-3">
                         <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>
                             <div class="relative">
@@ -622,7 +641,7 @@
     </section>
 
 
-    <!-- ============ VIEW 2: CHAT ============ -->
+    <!-- ============ VIEW 2: CHAT (بدون فوتر) ============ -->
     <section id="view-chat" class="view-container view-hidden">
 
         <!-- Ambient Background -->
@@ -634,7 +653,7 @@
         </div>
 
         <!-- Header -->
-        <header class="flex-shrink-0 border-b border-ochre/20 bg-bazaar-900/70 backdrop-blur-2xl z-20 px-3 py-2.5 md:px-6 md:py-3 shadow-lg">
+        <header class="flex-shrink-0 border-b border-ochre/20 bg-bazaar-900/70 backdrop-blur-2xl z-20 px-3 py-2.5 md:px-6 md:py-3 shadow-lg safe-top">
             <div class="max-w-5xl mx-auto flex items-center justify-between gap-2">
                 <div class="flex items-center gap-2 min-w-0">
                     <button onclick="backToTables()" class="p-2 text-ochre/70 hover:text-ochre-light transition-colors rounded-lg hover:bg-bazaar-800/50 flex-shrink-0"
@@ -702,7 +721,7 @@
                 </div>
 
                 <!-- Chat card -->
-                <div class="flex-1 flex flex-col glass-card-azure rounded-2xl md:rounded-3xl overflow-hidden shadow-xl min-h-0 relative">
+                <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">
                     <!-- Decorative pattern -->
                     <div class="absolute inset-0 bg-arch opacity-20 pointer-events-none"></div>
 
@@ -766,7 +785,7 @@
     </section>
 
     <script>
-        // ------------------- Viewport Height Fix (iOS) -------------------
+        // ------------------- Viewport Height Fix -------------------
         function setVh() {
             const vh = window.innerHeight * 0.01;
             document.documentElement.style.setProperty('--vh', `${vh}px`);
@@ -787,12 +806,11 @@
         window.addEventListener('DOMContentLoaded', () => {
             renderTablesGrid();
             if (currentTable && currentTable.trim() !== '') {
-                // Direct URL access with table number
                 enterChatView(currentTable, false);
             }
         });
 
-        // Prevent body scroll bounce on iOS
+        // Prevent body scroll bounce
         document.addEventListener('touchmove', function(e) {
             if (!e.target.closest('.scroll-area')) {
                 e.preventDefault();
@@ -816,13 +834,11 @@
                 sel.classList.add('view-visible');
             }
 
-            // Reset scroll positions
             window.scrollTo(0, 0);
             const tablesScroll = sel.querySelector('.scroll-area');
             if (tablesScroll) tablesScroll.scrollTop = 0;
             const chatScroll = document.getElementById('chatMessages');
             if (chatScroll && targetView === 'chat') {
-                // Scroll chat to bottom when entering
                 setTimeout(() => {
                     chatScroll.scrollTop = chatScroll.scrollHeight;
                 }, 100);
@@ -871,11 +887,6 @@
             }
         }
 
-        // ------------------- Table number management -------------------
-        function changeTableNumber() {
-            backToTables();
-        }
-
         function updateTableNumberDisplay(number) {
             document.getElementById('tableNumberDisplay').textContent = number;
         }
@@ -973,12 +984,11 @@
                                 } else if (data.type === 'error') {
                                     botBubble.textContent = '⚠️ ' + data.content;
                                 }
-                            } catch (parseErr) { /* ignore malformed */ }
+                            } catch (parseErr) { /* ignore */ }
                         }
                     }
                 }
 
-                // After stream ends, convert to rendered Markdown
                 botBubble.textContent = '';
                 botBubble.innerHTML = marked.parse(fullText);
                 const chatScroll = document.getElementById('chatMessages');
@@ -1021,7 +1031,6 @@
             }
         }
 
-        // ------------------- Draft order panel -------------------
         function showDraftPanel(items) {
             const panel = document.getElementById('draftOrderPanel');
             const draftItems = document.getElementById('draftItems');
@@ -1042,7 +1051,6 @@
                 `;
             });
             panel.classList.remove('hidden');
-            // Don't scroll body - we're in flex layout
         }
 
         async function confirmOrder() {
@@ -1072,7 +1080,6 @@
             }
         }
 
-        // ------------------- Message helpers -------------------
         function appendChatMessage(role, content) {
             const container = document.getElementById('chatMessages');
             const bubbleId = 'bubble-' + Date.now() + '-' + Math.random().toString(36).substr(2, 5);
@@ -1113,7 +1120,7 @@
             return String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
         }
 
-        // Handle mobile keyboard - scroll input into view
+        // Handle mobile keyboard
         const chatInput = document.getElementById('chatInput');
         if (chatInput) {
             chatInput.addEventListener('focus', () => {
@@ -1127,8 +1134,6 @@
             });
         }
 
-        // Handle viewport resize (e.g., keyboard show/hide on mobile)
-        let initialHeight = window.innerHeight;
         window.addEventListener('resize', () => {
             setVh();
             const chatScroll = document.getElementById('chatMessages');