/* ============================================
           ZAWAYA AI - GLASSMORPHIC DESIGN SYSTEM
           Premium Professional Chatbot
           Matching Admin Dashboard Style
           ============================================ */

        /* AI chat link — used by the safe markdown renderer in zawaya-main.js */
        .zw-chat-link {
            color: rgba(102, 126, 234, 1);
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px solid rgba(102, 126, 234, 0.4);
            transition: border-color 0.2s ease;
            word-break: break-word;
        }
        .zw-chat-link:hover,
        .zw-chat-link:focus-visible {
            border-bottom-color: rgba(102, 126, 234, 1);
        }

        :root {
            /* Spacing */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
            --space-12: 48px;

            /* Radius */
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --radius-2xl: 28px;
            --radius-3xl: 36px;
            --radius-full: 9999px;

            /* Typography */
            --font-sans: 'Inter', -apple-system, sans-serif;
            --font-arabic: 'Tajawal', 'Cairo', sans-serif;

            /* Transitions */
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            /* ----------------------------------------------------------------
               shadcn/ui design tokens, ported to plain CSS.

               shadcn is React + Tailwind and this frontend has no build step,
               so the component library itself cannot be installed here. What
               carries over is the part that actually defines the look: the
               semantic HSL token pairs (surface + the foreground meant to sit
               on it), the neutral-with-one-accent palette, and the radius
               scale derived from a single --radius.

               Values are stored as bare HSL triplets so they compose the way
               they do in shadcn: hsl(var(--card) / 0.6) for translucency.
               Tuned here to the existing teal accent rather than shadcn's
               default zinc, so the Guidebook matches the rest of the app.
               ---------------------------------------------------------------- */
            --background: 194 45% 5%;
            --foreground: 165 30% 96%;
            --card: 193 38% 8%;
            --card-foreground: 165 30% 96%;
            --popover: 194 42% 6%;
            --popover-foreground: 165 30% 96%;
            --primary: 165 68% 68%;
            --primary-foreground: 194 60% 7%;
            --secondary: 193 26% 15%;
            --secondary-foreground: 165 25% 92%;
            --muted: 193 22% 14%;
            --muted-foreground: 180 12% 62%;
            --accent: 165 55% 22%;
            --accent-foreground: 165 45% 92%;
            --destructive: 0 62% 52%;
            --destructive-foreground: 0 0% 98%;
            --border: 180 18% 20%;
            --input: 180 18% 20%;
            --ring: 165 68% 68%;

            /* shadcn derives its whole radius scale from one value. */
            --radius: 0.75rem;
            --radius-shadcn-lg: var(--radius);
            --radius-shadcn-md: calc(var(--radius) - 2px);
            --radius-shadcn-sm: calc(var(--radius) - 4px);
        }

        /* Dark Theme - Glassmorphic (matching admin dashboard) */
        :root[data-theme="dark"] {
            /* Base */
            --bg-app: #080f14;

            /* Glass System */
            --glass-bg: rgba(255, 255, 255, 0.04);
            --glass-bg-hover: rgba(255, 255, 255, 0.07);
            --glass-border: rgba(94, 201, 160, 0.18);
            --glass-blur: blur(60px);

            /* Hero Glass */
            --hero-glass: rgba(94, 201, 160, 0.07);
            --hero-overlay:
                radial-gradient(circle at 30% 20%, rgba(60, 160, 120, 0.2) 0%, transparent 60%),
                linear-gradient(135deg, rgba(50, 130, 100, 0.12) 0%, rgba(40, 110, 90, 0.08) 50%, rgba(20, 50, 45, 0.5) 100%);

            /* Text */
            --text-primary: #ffffff;
            --text-secondary: rgba(255, 255, 255, 0.7);
            --text-tertiary: rgba(255, 255, 255, 0.5);
            --text-muted: rgba(255, 255, 255, 0.3);

            /* Brand */
            --brand-primary: rgba(94, 201, 160, 0.95);
            --brand-secondary: rgba(78, 185, 145, 0.9);
            --brand-accent: rgba(94, 201, 160, 0.65);

            /* Gradients */
            --gradient-primary: linear-gradient(135deg, rgba(94, 201, 160, 0.25) 0%, rgba(78, 185, 145, 0.25) 100%);
            --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            --gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);

            /* Status */
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;

            /* Shadows */
            --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.15);
            --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
            --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);
        }

        /* Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* ↔️ `overflow-x: clip` لا `hidden`.
           `hidden` يُنشئ **حاوية تمرير**، والعنصر اللاصق (position:sticky) يلتصق
           بأقرب حاوية تمرير لا بنافذة العرض. وفي وضع الدليل يُرفع قفل الارتفاع
           فيتمرّر المستند، بينما الحاوية المُنشأة هنا لا تتمرّر — فيفقد الترويس
           التصاقه ويرحل مع الصفحة، ولا يعود شريط التبديل بين «المساعد» و«الدليل»
           ظاهراً حتى يسحب النزيل لأعلى.
           `clip` يقصّ الفائض أفقياً بلا إنشاء حاوية، فيبقى الالتصاق سليماً.
           السطر الأول احتياطٌ لمتصفح لا يعرف `clip` — يبقى على السلوك السابق. */
        html {
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 100%;
            overflow-x: hidden;
            overflow-x: clip;
        }

        body {
            font-family: var(--font-sans);
            background: var(--bg-app);
            color: var(--text-primary);
            line-height: 1.5;
            overflow-x: hidden;
            overflow-x: clip;
            min-height: 100vh;
            width: 100%;
            position: relative;
        }

        /* Ambient background */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(ellipse 80% 60% at 20% 20%, rgba(40, 80, 90, 0.5) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 80% 80%, rgba(30, 70, 75, 0.4) 0%, transparent 60%),
                radial-gradient(ellipse 100% 80% at 50% 50%, rgba(10, 22, 28, 0.9) 0%, transparent 100%);
            background-color: #080f14;
            z-index: -1;
        }

        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: none;
            z-index: -1;
        }

        /* ============================================
           LAYOUT
           ============================================ */

        /* HEIGHT LOCK: the chat surface must scroll inside #chatMessages, so
           the flex chain needs a bounded height. min-height alone let the
           whole document grow past the viewport — the page itself scrolled
           and the app slid up leaving a black void above the header. */
        /* ═══ ثبات الارتفاع: ثلاث طبقات، الأخيرة تفوز حيثما توفّرت ═══
           1) 100vh   — يعمل في كل مكان، لكنه على الجوال يقيس الشاشة **بشريط
                        المتصفّح مطوياً**. فأول تمرير يطوي الشريط، وترتفع
                        الصفحة فجأة: هذا هو «يكبر ويصغر» الذي يراه النزيل.
           2) 100dvh  — يتتبّع طيّ الشريط، فيعالج (1) في المتصفّحات الحديثة.
           3) --zw-vh — ارتفاع `visualViewport` الحقيقي، يضبطه JS. وهو وحده
                        الذي يعرف **لوحة المفاتيح**: dvh لا ينكمش عند فتحها في
                        iOS، فيبقى شريط الإدخال تحتها ويقفز المتصفّح ليطارده.
           انظر _zwBindViewportStability() في zawaya-main.js. */
        /* ⚠️ 4) 100svh — ويفوز على dvh هنا عن قصد.
              `dvh` يتتبّع طيّ الشريط، لكنه **يبدأ** بالقيمة الكبرى في كروم
              أندرويد: التخطيط يُرسم أطول من المساحة المرئية فعلاً وشريط
              العنوان ظاهر. ومع `body{overflow:hidden}` في وضع المحادثة لا
              يتمرّر المستند إطلاقاً — فما يُدفع فوق حافة الرؤية لا سبيل
              للوصول إليه. وأعلى التخطيط هو الترويسة، أي زرّا «المساعد /
              الدليل»: يختفيان ولا يظهران إلا بالزوم أوت، وهو ما رصده النزلاء
              على أندرويد/كروم بالضبط.

              `svh` هو الارتفاع **الأصغر** — أي والشريط ظاهر. فالتخطيط لا
              يتجاوز المرئي أبداً، ولا يُدفع شيء خارج الوصول. ثمنه فراغٌ صغير
              أسفل الشاشة حين يُطوى الشريط، وهو أهون بما لا يُقاس من ترويسة
              لا تُرى. و`--zw-vh` يبقى فوق الجميع لأنه وحده يعرف لوحة المفاتيح. */
        .app-layout {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            height: 100svh;
            height: var(--zw-vh, 100svh);
            width: 100%;
            /* انظر تعليق html أعلاه: `hidden` هنا كان يكسر التصاق الترويس. */
            overflow-x: hidden;
            overflow-x: clip;
        }

        /* 🚫 المستند نفسه لا يتمرّر في وضع المحادثة — التمرير داخل #chatMessages
              وحده. بدون هذا يتمرّر السطحان معاً («تمرير مزدوج») فيهتزّ الرأس،
              ويسمح iOS بالسحب المطّاطي فتنكشف خلفية سوداء فوق الترويسة.
              الدليل يُستثنى لأنه صفحة تحريرية طويلة تتمرّر بالمستند عمداً. */
        body:not(.guidebook-active) {
            overflow: hidden;
            overscroll-behavior: none;
        }

        /* 📏 حجزُ مكان شريط التمرير دائماً. بدونه تتغيّر عرض المحتوى بمقدار
              ~15px في اللحظة التي يتجاوز فيها المحتوى الشاشة، فيقفز كل شيء
              أفقياً — وهو الاهتزاز الذي يظهر عند فتح قائمة أو نمو الردّ. */
        #chatMessages {
            scrollbar-gutter: stable;
            overscroll-behavior: contain;
        }

        /* The Guidebook is a long editorial page that scrolls the document —
           release the viewport lock while it is the active surface. */
        body.guidebook-active .app-layout {
            height: auto;
            min-height: 100vh;
        }

        /* App header — transparent: the mode switch and the ☰ capsule float
           on their own (each carries its own pill background). */
        .app-header {
            position: sticky;
            top: 10px;
            z-index: 900;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 12px;
            margin: 10px 14px 2px;
            padding: 8px 12px;
            background: transparent;
            border: none;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .app-header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            grid-column: 3;
            justify-self: end;
        }

        /* Compact header actions (the ☰ capsule button) */
        .header-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 38px;
            padding: 0 15px;
            border-radius: 24px;
            background: rgba(15, 35, 45, 0.4);
            border: 1px solid rgba(94, 201, 160, 0.25);
            color: rgba(255, 255, 255, 0.88);
            font: inherit;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: 0.01em;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .header-chip:hover {
            background: rgba(94, 201, 160, 0.15);
            border-color: rgba(94, 201, 160, 0.5);
            color: rgba(255, 255, 255, 0.98);
        }

        .header-chip svg {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }

        .header-chip-icon {
            width: 38px;
            padding: 0;
            justify-content: center;
            position: relative;
        }

        /* The menu toggle is a bare chevron — no chip background, border,
           or ring. Just the glyph (kept as a 38px tap target). */
        #guestMenuBtn {
            background: none;
            border: none;
            box-shadow: none;
            color: rgba(255, 255, 255, 0.75);
        }

        #guestMenuBtn:hover {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 1);
        }

        /* Collapse chevron — down when the capsule is closed, up when open. */
        .menu-chevron {
            transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #guestMenuBtn .menu-chevron {
            width: 20px;
            height: 20px;
        }

        #guestMenuBtn[aria-expanded="true"] .menu-chevron {
            transform: rotate(180deg);
        }

        /* Guest menu — labelled dropdown with account & stay actions */
        .guest-menu-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1090;
            background: rgba(4, 10, 14, 0.45);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        .guest-menu-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* Guest menu — a floating vertical icon capsule that opens from ☰.
           Icons only; each label rides along as a hover/focus tooltip. */
        .guest-menu {
            position: fixed;
            top: 74px;
            inset-inline-end: 16px;
            z-index: 1100;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: auto;
            padding: 7px;
            background: rgba(10, 20, 26, 0.97);
            border: 1px solid rgba(94, 201, 160, 0.24);
            border-radius: 26px;
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            animation: guestMenuIn 0.18s ease;
        }

        /* The menu toggles via the [hidden] attribute (openGuestMenu). Guard
           it — a class-level display would otherwise beat the UA [hidden]. */
        .guest-menu[hidden] {
            display: none;
        }

        .guest-menu::-webkit-scrollbar {
            display: none;
        }

        @keyframes guestMenuIn {
            from {
                opacity: 0;
                transform: translateY(-6px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

        .guest-menu-sep {
            width: 60%;
            height: 1px;
            margin: 3px auto;
            background: rgba(255, 255, 255, 0.1);
        }

        /* Icon buttons inside the capsule */
        .nav-item {
            position: relative;
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 15px;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
            color: rgba(255, 255, 255, 0.72);
            border: 1px solid transparent;
            font: inherit;
        }

        .nav-item:focus-visible,
        .header-chip:focus-visible {
            outline: 2px solid rgba(160, 255, 228, 0.95);
            outline-offset: 2px;
            box-shadow: 0 0 0 4px rgba(112, 234, 200, 0.14);
        }

        .nav-item:hover {
            background: rgba(94, 201, 160, 0.12);
            color: rgba(255, 255, 255, 0.98);
            border-color: rgba(94, 201, 160, 0.3);
        }

        .nav-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Label → floating tooltip on the inline-start side of the capsule.
           Kept in the a11y tree (opacity, not visibility) so it still names
           each icon button for screen readers. */
        .nav-text {
            position: absolute;
            top: 50%;
            inset-inline-end: calc(100% + 10px);
            transform: translateY(-50%) translateX(6px);
            padding: 5px 10px;
            border-radius: 9px;
            background: rgba(6, 15, 20, 0.98);
            border: 1px solid rgba(94, 201, 160, 0.22);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
            color: rgba(255, 255, 255, 0.92);
            font-size: 12.5px;
            font-weight: 600;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.16s ease, transform 0.16s ease;
            z-index: 2;
        }

        [dir="rtl"] .nav-text {
            transform: translateY(-50%) translateX(-6px);
        }

        .nav-item:hover .nav-text,
        .nav-item:focus-visible .nav-text,
        .nav-item:focus-within .nav-text {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }

        /* Combined request status — corner indicator on the My Requests icon
           (count when >1, dot when 1); sized/colored by js/my-requests.js. */
        #requestsStatusBadge {
            position: absolute;
            top: 3px;
            inset-inline-end: 3px;
            align-items: center;
            justify-content: center;
            font-size: 10.5px;
            font-weight: 800;
            line-height: 1;
            pointer-events: none;
        }

        /* Main Content */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            /* Flex children default to min-height:auto and refuse to shrink
               below their content — the whole viewport-lock chain needs
               min-height:0 or #chatMessages silently overflows clipped. */
            min-height: 0;
        }

        /* Header */
        .chat-header {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-xl);
            padding: 16px 24px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: var(--shadow-sm);
        }

        .header-title {
            font-size: 20px;
            font-weight: 600;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .header-controls {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header-btn {
            width: 36px;
            height: 36px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition);
            color: var(--text-secondary);
        }

        .header-btn:hover {
            background: var(--glass-bg-hover);
            color: var(--text-primary);
            transform: translateY(-2px);
        }

        /* Chat Container */
        .chat-container {
            flex: 1;
            min-height: 0;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
            border-radius: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: none;
            position: relative;
        }

        /* Messages Area */
        .chat-messages {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 24px;
            scroll-behavior: smooth;
            transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .chat-messages.with-bottom-input {
            padding-bottom: 120px;
            /* Optimized: Enough space for input bar */
        }

        .chat-messages::-webkit-scrollbar {
            width: 8px;
        }

        .chat-messages::-webkit-scrollbar-track {
            background: transparent;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: var(--glass-border);
            border-radius: 4px;
        }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: var(--glass-bg-hover);
        }

        .messages-wrapper {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Welcome Screen - ChatGPT Style */
        .welcome-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            padding-bottom: 0;
        }

        .welcome-content {
            text-align: center;
            max-width: 600px;
            margin-bottom: 40px;
        }

        .welcome-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 12px;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .welcome-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
        }

        /* First-turn prompts keep the empty state useful without adding a
           second discovery surface to Concierge. They are deliberately
           compact, keyboard reachable, and work in both writing directions. */
        .welcome-prompts {
            width: min(100%, 720px);
            margin: 6px auto 26px;
            padding: 0 20px;
        }

        /* Eyebrow kicker — mirrors the Guidebook's .guidebook-results-kicker so
           Concierge and Guidebook read as one editorial system. */
        .welcome-prompts-heading {
            margin: 0 0 12px;
            color: rgba(145, 245, 214, 0.86);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.13em;
            line-height: 1.3;
            text-align: start;
            text-transform: uppercase;
        }

        .welcome-prompts-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        /* Guidebook-style prompt card: media tile + title + arrow, subtle
           gradient surface with an inset highlight and a hover lift. */
        .welcome-prompt {
            min-height: 62px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 14px;
            border: 1px solid rgba(112, 234, 200, 0.16);
            border-radius: 16px;
            background:
                radial-gradient(circle at 100% 0%, rgba(109, 236, 201, 0.08), transparent 60%),
                linear-gradient(150deg, rgba(23, 55, 61, 0.5), rgba(10, 22, 28, 0.72));
            color: rgba(239, 255, 249, 0.82);
            font: inherit;
            text-align: start;
            cursor: pointer;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
            transition: border-color 200ms ease, background 200ms ease, color 200ms ease,
                        transform 200ms ease, box-shadow 200ms ease;
        }

        .welcome-prompt:hover,
        .welcome-prompt:focus-visible {
            border-color: rgba(141, 245, 214, 0.5);
            color: #fff;
            outline: none;
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), 0 0 26px rgba(79, 213, 174, 0.12),
                        inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .welcome-prompt-icon {
            flex: 0 0 auto;
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(143, 246, 216, 0.24);
            border-radius: 11px;
            background: linear-gradient(145deg, rgba(129, 244, 211, 0.2), rgba(44, 141, 120, 0.1));
            color: rgba(188, 255, 231, 0.94);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
            transition: background 200ms ease, border-color 200ms ease;
        }

        .welcome-prompt-icon svg { width: 19px; height: 19px; }

        .welcome-prompt:hover .welcome-prompt-icon,
        .welcome-prompt:focus-visible .welcome-prompt-icon {
            border-color: rgba(143, 246, 216, 0.45);
            background: linear-gradient(145deg, rgba(129, 244, 211, 0.32), rgba(44, 141, 120, 0.16));
        }

        .welcome-prompt-label {
            flex: 1 1 auto;
            min-width: 0;
            font-size: 13.5px;
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: -0.01em;
        }

        .welcome-prompt-arrow {
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            color: rgba(141, 245, 214, 0.55);
            transition: color 200ms ease, transform 200ms ease;
        }

        .welcome-prompt-arrow svg { width: 15px; height: 15px; }

        .welcome-prompt:hover .welcome-prompt-arrow,
        .welcome-prompt:focus-visible .welcome-prompt-arrow {
            color: rgba(141, 245, 214, 0.95);
            transform: translate(2px, -2px);
        }

        /* Quick actions open the real panels rather than sending a chat turn,
           so they read as a distinct tier: vertical tiles, 3-up at every
           width, visually quieter than the prompt cards above them. */
        .welcome-prompts-heading-spaced { margin-top: 20px; }

        .welcome-actions-list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .welcome-action {
            min-height: 84px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 8px;
            border: 1px solid rgba(112, 234, 200, 0.13);
            border-radius: 16px;
            background: linear-gradient(150deg, rgba(23, 55, 61, 0.34), rgba(10, 22, 28, 0.56));
            color: rgba(239, 255, 249, 0.78);
            font: inherit;
            text-align: center;
            cursor: pointer;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
            transition: border-color 200ms ease, background 200ms ease, color 200ms ease,
                        transform 200ms ease, box-shadow 200ms ease;
        }

        .welcome-action:hover,
        .welcome-action:focus-visible {
            border-color: rgba(141, 245, 214, 0.44);
            color: #fff;
            outline: none;
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), 0 0 22px rgba(79, 213, 174, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .welcome-action-icon {
            flex: 0 0 auto;
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(143, 246, 216, 0.2);
            border-radius: 11px;
            background: linear-gradient(145deg, rgba(129, 244, 211, 0.16), rgba(44, 141, 120, 0.08));
            color: rgba(188, 255, 231, 0.92);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
            transition: background 200ms ease, border-color 200ms ease;
        }

        .welcome-action-icon svg { width: 18px; height: 18px; }

        .welcome-action:hover .welcome-action-icon,
        .welcome-action:focus-visible .welcome-action-icon {
            border-color: rgba(143, 246, 216, 0.42);
            background: linear-gradient(145deg, rgba(129, 244, 211, 0.28), rgba(44, 141, 120, 0.14));
        }

        .welcome-action-label {
            min-width: 0;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.25;
            letter-spacing: -0.01em;
            /* Two-word labels ("Rate your stay") must wrap inside the tile
               instead of forcing the 3-up grid to overflow on mobile. */
            overflow-wrap: anywhere;
        }

        .section-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        /* Message Bubble */
        .message {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 24px;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes msgLimitPulse {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.6; }
        }

        @keyframes pulse {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(112, 234, 200, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 0 30px rgba(112, 234, 200, 0.9), 0 6px 16px rgba(0, 0, 0, 0.5);
                transform: scale(1.05);
            }
        }

        /* Map pin pulse — box-shadow only, no transform (avoids Mapbox conflict) */
        @keyframes map-pin-pulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(94, 201, 160, 0.45), 0 0 18px rgba(94, 201, 160, 0.35), 0 4px 14px rgba(0,0,0,0.5);
            }
            50% {
                box-shadow: 0 0 0 8px rgba(94, 201, 160, 0), 0 0 28px rgba(94, 201, 160, 0.6), 0 4px 14px rgba(0,0,0,0.5);
            }
        }

        .message.user {
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        .message.ai .message-avatar {
            background: linear-gradient(145deg, rgba(129, 244, 211, 0.28), rgba(44, 141, 120, 0.16));
            border: 1px solid rgba(143, 246, 216, 0.4);
            box-shadow: 0 8px 20px rgba(4, 31, 28, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
            color: rgba(188, 255, 231, 0.96);
        }

        .message.user .message-avatar {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
        }

        .message-content {
            flex: 1;
            max-width: 70%;
        }

        .message-bubble {
            padding: 15px 19px;
            border-radius: 18px;
            line-height: 1.6;
            font-size: 15px;
            word-wrap: break-word;
        }

        /* AI bubble — echoes the Guidebook card surface: soft teal-tinted glass,
           an inset top highlight, and a quiet drop shadow. */
        .message.ai .message-bubble {
            background:
                radial-gradient(circle at 100% 0%, rgba(109, 236, 201, 0.06), transparent 62%),
                linear-gradient(150deg, rgba(23, 55, 61, 0.42), rgba(10, 22, 28, 0.6));
            border: 1px solid rgba(112, 234, 200, 0.16);
            border-start-start-radius: 6px;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .message.user .message-bubble {
            background: linear-gradient(135deg, rgba(94, 201, 160, 0.9), rgba(64, 165, 130, 0.9));
            border: 1px solid rgba(141, 245, 214, 0.28);
            border-start-end-radius: 6px;
            color: #06231c;
            font-weight: 500;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
        }

        /* Typing Indicator */
        .typing-indicator {
            display: flex;
            gap: 6px;
            padding: 16px 20px;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            background: var(--brand-primary);
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }

        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typing {

            0%,
            60%,
            100% {
                transform: translateY(0);
                opacity: 0.7;
            }

            30% {
                transform: translateY(-10px);
                opacity: 1;
            }
        }

        /* ──────────────────────────────────────────────────────────────
           Live-typing bubble — no dots, ever. From the moment the user
           sends, the bubble shows a blinking text cursor; the reply types
           itself out in front of the cursor as tokens stream in. While
           waiting for the first token (.awaiting-tokens) the bubble holds a
           small min-width so the lone caret reads as an intentional cursor.
           ──────────────────────────────────────────────────────────── */

        .stream-text {
            white-space: pre-wrap;
        }

        /* Wait status — the phase the server reports ("Thinking", "Checking
           the menu", "Writing the reply"). Shown whole, with a soft pulse so a
           long model turn never reads as a frozen screen. Only visible while
           .awaiting-tokens; removed when the reply lands. */
        .stream-status {
            display: inline;
            color: rgba(255, 255, 255, 0.55);
            font-size: 13.5px;
            letter-spacing: 0.1px;
        }
        .stream-status.held {
            animation: zwStatusPulse 1.6s ease-in-out infinite;
        }
        @keyframes zwStatusPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.55; }
        }
        @media (prefers-reduced-motion: reduce) {
            .stream-status.held { animation: none; }
        }

        /* Empty bubble (status only) — give it a little body so it doesn't
           collapse before the first character arrives. */
        .message-bubble.streaming.awaiting-tokens {
            min-width: 30px;
            min-height: 1.2em;
        }

        /* Caret — slim brand-tinted bar that blinks like a typing cursor.
           Visible the whole time the bubble streams: it sits after the
           thinking-status word while waiting, then after the reply text as
           it types out. One consistent cursor throughout. */
        .stream-caret {
            display: inline-block;
            width: 2px;
            height: 1.05em;
            margin-left: 1px;
            vertical-align: text-bottom;
            background: rgba(94, 201, 160, 0.95);
            border-radius: 1px;
            box-shadow: 0 0 6px rgba(94, 201, 160, 0.45);
            animation: zw-caret-blink 1s ease-in-out infinite;
        }
        [dir="rtl"] .stream-caret {
            margin-left: 0;
            margin-right: 1px;
        }

        @keyframes zw-caret-blink {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0.15; }
        }

        @media (prefers-reduced-motion: reduce) {
            .stream-caret { animation: none; opacity: 0.7; }
        }

        /* Place Cards */
        .places-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px;
            margin-top: 16px;
        }

        .place-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-primary);
        }

        .place-details {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .place-distance {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--gradient-cyan);
            padding: 4px 12px;
            border-radius: var(--radius-full);
            font-size: 12px;
            color: white;
            font-weight: 500;
        }

        /* ==================== Z-INDEX HIERARCHY ==================== */
        /*
         * 1-99: Content elements
         * 100-999: UI Components (input bar, buttons)
         * 1000-9999: Navigation (guest menu, overlays)
         * 10000-99999: Modals and top-level overlays
         * 100000+: System alerts (consent, errors)
         */

        /* ==================== INPUT BAR - DESKTOP (Default) ==================== */

        .chat-input-bar {
            /* Initial position - centered on screen */
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform: translate(-50%, 50%);
            width: 100%;
            max-width: 750px;
            padding: 20px;
            background: transparent;
            border: none;
            pointer-events: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: none;
            z-index: 500;
        }

        .chat-input-bar.bottom {
            /* After first message - fixed at bottom (floating, no background) */
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: auto;
            transform: none;
            max-width: none;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            padding: 24px 20px 20px 20px;
            box-shadow: none;
        }

        .chat-input-bar.bottom .input-wrapper {
            max-width: 750px;
            margin: 0 auto;
        }

        .input-wrapper {
            position: relative;
            pointer-events: auto;
        }

        /* عدّاد طول الرسالة — صامت حتى يقترب النزيل من الحدّ، ثم يتحوّل
           للتحذير عند تجاوزه. يبقى فوق الحقل فلا يزحزح الأزرار. */
        .chat-length-hint {
            margin: 0 0 6px;
            padding: 0 14px;
            font-size: 11.5px;
            line-height: 1.4;
            font-variant-numeric: tabular-nums;
            color: rgba(255, 255, 255, 0.45);
            text-align: end;
            pointer-events: none;
        }

        .chat-length-hint.is-over {
            color: #fca5a5;
            font-weight: 600;
        }

        .input-container {
            display: flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(150deg, rgba(16, 34, 40, 0.72), rgba(6, 15, 20, 0.82));
            border: 1px solid rgba(112, 234, 200, 0.18);
            border-radius: 26px;
            padding: 14px 12px 14px 20px;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            min-height: 52px;
        }

        .input-container:focus-within {
            border-color: rgba(141, 245, 214, 0.5);
            box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(79, 213, 174, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transform: translateY(-1px);
        }

        .chat-input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text-primary);
            font-size: 15px;
            font-family: inherit;
            line-height: 1.5;
            padding: 0;
            resize: none;
            min-height: 24px;
            max-height: 150px;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .chat-input::-webkit-scrollbar {
            display: none;
        }

        .chat-input::placeholder {
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
        }

        .input-actions {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-shrink: 0;
        }

        .filter-btn,
        .voice-btn,
        .send-btn,
        .action-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }

        .filter-btn {
            background: rgba(112, 234, 200, 0.15);
            border: 1.5px solid rgba(112, 234, 200, 0.3);
            box-shadow: 0 2px 10px rgba(112, 234, 200, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        }

        .filter-btn:hover {
            background: rgba(112, 234, 200, 0.25);
            border-color: rgba(112, 234, 200, 0.45);
            transform: scale(1.05);
            box-shadow: 0 4px 16px rgba(112, 234, 200, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
        }

        .filter-btn svg {
            width: 18px;
            height: 18px;
            stroke: rgba(112, 234, 200, 0.95);
            stroke-width: 2.5;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
        }

        .voice-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1.5px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        }

        .voice-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }

        .voice-btn.recording {
            background: rgba(239, 68, 68, 0.25);
            border-color: rgba(239, 68, 68, 0.5);
            transform: scale(0.95);
            animation: pulse-recording 1.5s ease-in-out infinite;
        }

        @keyframes pulse-recording {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            }

            50% {
                box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
            }
        }

        .voice-btn svg {
            width: 18px;
            height: 18px;
            stroke: rgba(255, 255, 255, 0.95);
            stroke-width: 2.5;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
        }

        .send-btn {
            background: linear-gradient(135deg,
                    rgba(112, 234, 200, 0.35) 0%,
                    rgba(94, 201, 160, 0.45) 100%);
            border: 1.5px solid rgba(112, 234, 200, 0.4);
            box-shadow: 0 4px 16px rgba(112, 234, 200, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 1px 3px rgba(0, 0, 0, 0.3);
            position: relative;
        }

        .send-btn:hover:not(:disabled) {
            background: linear-gradient(135deg,
                    rgba(112, 234, 200, 0.45) 0%,
                    rgba(94, 201, 160, 0.55) 100%);
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(112, 234, 200, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.15) inset,
                0 2px 4px rgba(0, 0, 0, 0.4);
        }

        .send-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: none;
        }

        /* Action Button (Merged Voice/Send) */
        .action-btn[data-mode="voice"] {
            background: rgba(255, 255, 255, 0.1);
            border: 1.5px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        }

        .action-btn[data-mode="voice"]:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }

        .action-btn[data-mode="voice"].recording {
            background: rgba(239, 68, 68, 0.25);
            border-color: rgba(239, 68, 68, 0.5);
            transform: scale(0.95);
            animation: pulse-recording 1.5s ease-in-out infinite;
        }

        /* Voice-input language chip (AR/EN) — shown next to the mic while
           recording; tap to switch recognition language. */
        .voice-lang-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            padding: 0 9px;
            margin-inline-end: 6px;
            border-radius: 12px;
            border: 1.5px solid rgba(239, 68, 68, 0.4);
            background: rgba(239, 68, 68, 0.14);
            color: rgba(255, 255, 255, 0.92);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.3px;
            line-height: 1;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.15s ease, transform 0.15s ease;
        }
        .voice-lang-chip:hover { background: rgba(239, 68, 68, 0.22); transform: scale(1.05); }
        .voice-lang-chip:focus-visible {
            outline: 2px solid rgba(160, 255, 228, 0.95);
            outline-offset: 2px;
        }

        /* Subtle "listening" accent on the composer while recording. */
        .chat-input-bar.is-recording .input-container {
            box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.35),
                0 0 22px rgba(239, 68, 68, 0.14);
        }

        .action-btn[data-mode="send"] {
            background: linear-gradient(135deg,
                    rgba(112, 234, 200, 0.35) 0%,
                    rgba(94, 201, 160, 0.45) 100%);
            border: 1.5px solid rgba(112, 234, 200, 0.4);
            box-shadow: 0 4px 16px rgba(112, 234, 200, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .action-btn[data-mode="send"]:hover:not(:disabled) {
            background: linear-gradient(135deg,
                    rgba(112, 234, 200, 0.45) 0%,
                    rgba(94, 201, 160, 0.55) 100%);
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(112, 234, 200, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.15) inset,
                0 2px 4px rgba(0, 0, 0, 0.4);
        }

        .action-btn[data-mode="send"]:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: none;
        }

        .action-btn .voice-icon {
            width: 18px;
            height: 18px;
            stroke: rgba(255, 255, 255, 0.95);
            stroke-width: 2.5;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .action-btn .send-icon {
            position: absolute;
            width: 18px;
            height: 18px;
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .action-btn .send-icon svg {
            width: 100%;
            height: 100%;
            stroke: rgba(255, 255, 255, 1);
            fill: none;
        }

        .action-btn .loading-icon {
            width: 20px;
            height: 20px;
        }

        .action-btn .loading-icon .logo-spinner {
            width: 100%;
            height: 100%;
        }

        /* Send Icons - ChatGPT Style */
        .send-icon {
            position: absolute;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 1;
            visibility: visible;
        }

        .send-icon.hidden {
            opacity: 0;
            visibility: hidden;
            transform: scale(0.7) rotate(180deg);
        }

        .send-icon svg {
            width: 100%;
            height: 100%;
            stroke: currentColor;
            fill: none;
        }

        /* Loading Icon - Logo Spinner */
        .logo-spinner {
            width: 20px;
            height: 20px;
            animation: logoSpin 1.5s ease-in-out infinite;
        }

        @keyframes logoSpin {

            0%,
            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }

            50% {
                opacity: 0.7;
                transform: scale(0.9) rotate(180deg);
            }
        }

        /* Map Container */
        .map-container {
            width: 100%;
            height: 400px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-top: 16px;
            border: 1px solid var(--glass-border);
        }

        #chatMap {
            width: 100%;
            height: 100%;
        }

        /* ============================================
           PROFESSIONAL MOBILE RESPONSIVE DESIGN
           ============================================ */

        /* Mobile Devices (max-width: 768px) */
        @media (max-width: 768px) {

            /* Prevent horizontal scroll */
            html,
            body {
                overflow-x: hidden !important;
                max-width: 100vw !important;
            }

            body {
                margin: 0 !important;
                padding: 0 !important;
            }

            .app-container {
                overflow-x: hidden !important;
                max-width: 100vw !important;
            }

            main {
                overflow-x: hidden !important;
                max-width: 100vw !important;
            }

            /* Header - Mobile optimized */
            .chat-header {
                border-radius: 0 !important;
                margin-bottom: 0 !important;
                padding: 12px 16px !important;
            }

            .header-title {
                font-size: 16px !important;
            }

            .header-controls {
                gap: 8px !important;
            }

            .header-btn {
                width: 36px !important;
                height: 36px !important;
                font-size: 16px !important;
            }

            #modifyFiltersBtn {
                width: 34px !important;
                height: 34px !important;
                min-width: 34px !important;
                min-height: 34px !important;
                padding: 0 !important;
            }

            /* Chat Container - Full width, no padding */
            .chat-container {
                padding: 0 !important;
                margin: 0 !important;
                border-radius: 0 !important;
                min-height: calc(100vh - 140px) !important;
                max-height: calc(100vh - 140px) !important;
                overflow-y: auto !important;
            }

            .chat-messages {
                padding: 28px 0 12px !important;
                margin: 0 !important;
            }

            /* Messages - Mobile */
            .message {
                padding: 0 14px !important;
                margin-bottom: 16px !important;
                align-items: flex-start !important;
            }

            .message .avatar,
            .message .message-avatar {
                flex-shrink: 0 !important;
                align-self: flex-start !important;
            }

            .message-content {
                flex: 1 !important;
                max-width: none !important;
                min-width: 0 !important;
            }

            .message-bubble {
                max-width: 100% !important;
                width: auto !important;
            }

            .filter-section-title {
                font-size: 15px !important;
                margin-bottom: 10px !important;
            }

            .place-name-compact {
                font-size: 14px !important;
                margin-bottom: 4px !important;
            }

            .place-details-compact {
                font-size: 12px !important;
                line-height: 1.4 !important;
            }

            /* ==================== MOBILE INPUT BAR (Premium Rebuild) ==================== */

            /* Mobile Safe Area Variables */
            :root {
                --mobile-input-height: 90px;
                --safe-area-bottom: max(20px, env(safe-area-inset-bottom, 20px));
            }

            .chat-input-bar {
                /* Override desktop - always fixed at bottom on mobile (floating, no background) */
                position: fixed !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                top: auto !important;
                transform: none !important;
                max-width: none !important;
                width: 100% !important;

                /* Fade from app bg to fully opaque */
                background: linear-gradient(to bottom, transparent 0%, var(--bg-app, #080f14) 30%) !important;

                /* No blur effect */
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;

                /* Spacing with safe area - increased padding */
                padding: 24px 16px 20px 16px !important;
                padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 20px)) !important;

                /* No shadow */
                box-shadow: none !important;

                border: none !important;
                z-index: 500 !important;

                /* Safety: Always visible and accessible */
                pointer-events: auto !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            .input-wrapper {
                display: flex !important;
                align-items: center !important;
                gap: 12px !important;
                max-width: 100% !important;
                margin: 0 !important;
            }

            .input-container {
                flex: 1 !important;
                display: flex !important;
                align-items: center !important;
                gap: 10px !important;

                background: rgba(20, 28, 36, 0.97) !important;
                border: 1px solid rgba(94, 201, 160, 0.25) !important;
                border-radius: 30px !important;
                padding: 8px 14px !important;
                min-height: 56px !important;

                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;

                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;

                transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
                position: relative !important;
            }

            /* Focus state */
            .input-container:focus-within {
                border-color: rgba(141, 245, 214, 0.5) !important;
                background: rgba(14, 24, 30, 0.98) !important;
                box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(79, 213, 174, 0.14) !important;
                transform: translateY(-2px) !important;
            }

            .chat-input {
                flex: 1 !important;
                background: transparent !important;
                border: none !important;
                outline: none !important;

                /* Typography - larger and clearer */
                color: rgba(255, 255, 255, 0.98) !important;
                font-size: 16px !important;
                font-weight: 400 !important;
                line-height: 1.5 !important;
                font-family: inherit !important;

                /* Spacing - proper padding */
                padding: 10px 8px !important;

                /* Behavior */
                resize: none !important;
                min-height: 28px !important;
                max-height: 120px !important;
                overflow-y: auto !important;

                /* Remove iOS styling */
                -webkit-appearance: none !important;
                -webkit-tap-highlight-color: transparent !important;
            }

            .chat-input::placeholder {
                color: rgba(255, 255, 255, 0.5) !important;
                font-weight: 400 !important;
            }

            /* Hide scrollbar */
            .chat-input::-webkit-scrollbar {
                display: none !important;
            }

            .input-actions {
                display: flex !important;
                gap: 8px !important;
                align-items: center !important;
                padding: 0 !important;
                flex-shrink: 0 !important;
            }

            /* ==================== MOBILE BUTTONS (Premium Circle Style) ==================== */

            .filter-btn {
                width: 34px !important;
                height: 34px !important;
                min-width: 34px !important;
                min-height: 34px !important;
                border-radius: 50% !important;
                flex-shrink: 0 !important;

                /* Subtle glassmorphic style */
                background: rgba(112, 234, 200, 0.15) !important;
                border: 1.5px solid rgba(112, 234, 200, 0.35) !important;

                /* Soft glow shadows */
                box-shadow:
                    0 2px 8px rgba(112, 234, 200, 0.2),
                    0 1px 4px rgba(0, 0, 0, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;

                /* Flexbox */
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;

                /* Behavior */
                cursor: pointer !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                position: relative !important;
                overflow: hidden !important;

                /* Remove defaults */
                -webkit-tap-highlight-color: transparent !important;
            }

            .filter-btn:active {
                transform: scale(0.9) !important;
                box-shadow: 0 1px 4px rgba(112, 234, 200, 0.3) !important;
            }

            .filter-btn svg {
                width: 14px !important;
                height: 14px !important;
                stroke: rgba(112, 234, 200, 0.9) !important;
                stroke-width: 2 !important;
                filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
            }

            .voice-btn {
                width: 42px !important;
                height: 42px !important;
                min-width: 42px !important;
                min-height: 42px !important;
                border-radius: 50% !important;
                flex-shrink: 0 !important;

                /* Subtle glassmorphic */
                background: rgba(255, 255, 255, 0.12) !important;
                border: 2px solid rgba(255, 255, 255, 0.25) !important;

                /* Soft shadows */
                box-shadow:
                    0 3px 12px rgba(0, 0, 0, 0.3),
                    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;

                /* Flexbox */
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;

                /* Behavior */
                cursor: pointer !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                position: relative !important;
                overflow: hidden !important;

                /* Remove defaults */
                -webkit-tap-highlight-color: transparent !important;
            }

            .send-btn {
                width: 42px !important;
                height: 42px !important;
                min-width: 42px !important;
                min-height: 42px !important;
                border-radius: 50% !important;
                flex-shrink: 0 !important;

                /* Premium gradient - more vibrant */
                background: linear-gradient(135deg,
                        rgba(112, 234, 200, 0.5) 0%,
                        rgba(70, 150, 120, 0.6) 50%,
                        rgba(60, 105, 90, 0.65) 100%) !important;
                border: 2px solid rgba(112, 234, 200, 0.55) !important;

                /* Strong glow effect */
                box-shadow:
                    0 6px 25px rgba(112, 234, 200, 0.45),
                    0 3px 12px rgba(0, 0, 0, 0.35),
                    0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;

                /* Flexbox */
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;

                /* Behavior */
                cursor: pointer !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                position: relative !important;
                overflow: hidden !important;

                /* Remove defaults */
                -webkit-tap-highlight-color: transparent !important;
            }

            .voice-btn:active,
            .send-btn:not(:disabled):active {
                transform: scale(0.92) !important;
                box-shadow: 0 2px 10px rgba(112, 234, 200, 0.3) !important;
            }

            .send-btn:disabled {
                opacity: 0.35 !important;
                cursor: not-allowed !important;
                transform: none !important;
            }

            .voice-btn svg {
                width: 18px !important;
                height: 18px !important;
                stroke: rgba(255, 255, 255, 0.95) !important;
                stroke-width: 2.5 !important;
                filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
            }

            .send-btn svg,
            .send-icon svg {
                width: 18px !important;
                height: 18px !important;
                stroke: rgba(255, 255, 255, 1) !important;
                stroke-width: 2.5 !important;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
            }

            .send-icon {
                width: 18px !important;
                height: 18px !important;
            }

            /* Action Button Mobile Styles */
            .action-btn {
                width: 42px !important;
                height: 42px !important;
                min-width: 42px !important;
                min-height: 42px !important;
                border-radius: 50% !important;
                flex-shrink: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                position: relative !important;
                overflow: hidden !important;
                -webkit-tap-highlight-color: transparent !important;
            }

            .action-btn[data-mode="voice"] {
                background: rgba(255, 255, 255, 0.12) !important;
                border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
                box-shadow:
                    0 2px 10px rgba(0, 0, 0, 0.25),
                    0 1px 4px rgba(0, 0, 0, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
            }

            .action-btn[data-mode="send"] {
                background: linear-gradient(135deg,
                        rgba(112, 234, 200, 0.5) 0%,
                        rgba(70, 150, 120, 0.6) 50%,
                        rgba(60, 105, 90, 0.65) 100%) !important;
                border: 2px solid rgba(112, 234, 200, 0.55) !important;
                box-shadow:
                    0 6px 25px rgba(112, 234, 200, 0.45),
                    0 3px 12px rgba(0, 0, 0, 0.35),
                    0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
            }

            .action-btn .voice-icon {
                width: 18px !important;
                height: 18px !important;
                stroke: rgba(255, 255, 255, 0.95) !important;
                stroke-width: 2.5 !important;
                filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
            }

            .action-btn .send-icon {
                width: 18px !important;
                height: 18px !important;
                position: absolute !important;
                display: none !important; /* Hidden by default */
                align-items: center !important;
                justify-content: center !important;
            }

            .action-btn .send-icon svg {
                width: 100% !important;
                height: 100% !important;
                stroke: rgba(255, 255, 255, 1) !important;
                fill: none !important;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
            }

            .action-btn .loading-icon {
                width: 20px !important;
                height: 20px !important;
            }

            .action-btn .loading-icon .logo-spinner {
                width: 100% !important;
                height: 100% !important;
            }

            .action-btn:active {
                transform: scale(0.92) !important;
            }

            .action-btn[data-mode="send"]:disabled {
                opacity: 0.35 !important;
                cursor: not-allowed !important;
                transform: none !important;
            }

            /* Adjust messages padding - Mobile optimized */
            .chat-messages {
                padding-bottom: 150px !important;
                /* Enough for input bar + safe area */
            }

            .chat-messages.with-bottom-input {
                padding-bottom: 150px !important;
            }
        }

        /* Small Mobile Devices (max-width: 480px) */
        @media (max-width: 480px) {

            /* Chat input - Compact */
            .chat-input {
                font-size: 16px !important;
                padding: 10px 14px !important;
            }
        }

        /* Mobile Modal - Professional Responsive */
        @media (max-width: 768px) {

            /* Filter Modal - Full screen on mobile */
            .qibla-modal {
                padding: 0 !important;
                align-items: flex-start !important;
            }

            /* Modal Title - Smaller on mobile */
            #filterModalTitle {
                font-size: 24px !important;
                margin-bottom: 6px !important;
            }

            #filterModalSubtitle {
                font-size: 14px !important;
                margin-bottom: 20px !important;
            }

            /* Modal Button - Full width */
            #modalApplyBtn {
                padding: 16px 20px !important;
                font-size: 15px !important;
            }

            /* Modal Close Button - Larger touch target */
            .qibla-modal-close {
                width: 36px !important;
                height: 36px !important;
                font-size: 24px !important;
                top: 12px !important;
                right: 12px !important;
            }

            /* Other Modals - Centered on mobile */
            #qibla-modal,
            #weather-modal,
            #prayer-modal {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            #qibla-modal .qibla-modal-content,
            #weather-modal .qibla-modal-content,
            #prayer-modal .qibla-modal-content {
                max-width: 95% !important;
                width: 95% !important;
                padding: 20px 16px !important;
                margin: 0 auto !important;
            }
        }

        /* Fix iOS Safari issues */
        @supports (-webkit-touch-callout: none) {

            /* iOS Safari specific fixes */
            .chat-input {
                font-size: 16px !important;
                /* Prevent zoom */
            }

            .chat-container {
                min-height: -webkit-fill-available;
            }

            body {
                min-height: -webkit-fill-available;
            }
        }

        /* Hotel Login Screen - Mobile Responsive */
        @media (max-width: 768px) {
            .hotel-login-screen .login-container {
                padding: 32px 24px !important;
                margin: 0 16px;
            }

            .hotel-login-screen .hotel-branding h1 {
                font-size: 22px !important;
            }

            .hotel-login-screen .hotel-branding .hotel-logo-placeholder {
                width: 80px !important;
                height: 80px !important;
                font-size: 32px !important;
            }

            .hotel-login-screen .login-input-group input {
                font-size: 16px !important;
                /* Prevent iOS zoom */
                padding: 14px 18px 14px 48px !important;
            }

            .hotel-login-screen .login-btn {
                font-size: 15px !important;
                padding: 14px 32px !important;
            }

            .hotel-login-screen .login-footer {
                font-size: 11px !important;
            }
        }

        @media (max-width: 480px) {
            .hotel-login-screen .login-container {
                padding: 24px 20px !important;
                margin: 0 12px;
                border-radius: 20px !important;
            }

            .hotel-login-screen .hotel-branding h1 {
                font-size: 20px !important;
            }

            .hotel-login-screen .hotel-branding .hotel-logo-placeholder {
                width: 70px !important;
                height: 70px !important;
                font-size: 28px !important;
            }

            .hotel-login-screen .demo-hint {
                font-size: 11px !important;
                padding: 8px 14px !important;
            }
        }

        /* Info Bar Hover Effects */
        .widget-info-item:hover {
            background: var(--glass-bg-hover) !important;
            transform: translateY(-2px);
        }

        .widget-info-item:active {
            transform: translateY(0);
        }

        /* Modal Animation */
        .qibla-modal.active {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .qibla-modal.active .qibla-modal-content {
            transform: scale(1);
            animation: modalFadeIn 0.3s ease-out;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* Modal Close Button Hover */
        .qibla-modal-close:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: rgba(94, 201, 160, 0.4) !important;
            color: rgba(255, 255, 255, 0.95) !important;
            transform: rotate(90deg);
        }

        /* Enable Compass Button Hover */
        #enableCompassBtn:hover {
            background: rgba(0, 0, 0, 0.6) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
            transform: translateY(-1px);
        }

        /* Modal Content Hover */
        .qibla-modal-content:hover {
            background: rgba(255, 255, 255, 0.055) !important;
            border-color: rgba(94, 201, 160, 0.32) !important;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
        }

        /* Modal positioning improvements */
        .qibla-modal {
            padding: 20px;
        }

        .qibla-modal-content {
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
        }

        /* Hide scrollbars for modals completely */
        .qibla-modal-content::-webkit-scrollbar {
            width: 0px;
            height: 0px;
            background: transparent;
        }

        .qibla-modal-content {
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE and Edge */
        }

        /* ============================================
           ANIMATED WEATHER ICONS
           ============================================ */
        @keyframes pulse-rotate {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }

            50% {
                transform: scale(1.1) rotate(180deg);
                opacity: 0.9;
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-3px);
            }
        }

        @keyframes rain-drop {
            0% {
                transform: translateY(0px);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: translateY(6px);
                opacity: 0;
            }
        }

        @keyframes flash {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.3;
            }
        }

        @keyframes wave {

            0%,
            100% {
                transform: translateX(0px);
            }

            50% {
                transform: translateX(2px);
            }
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: translateX(-5px);
            }

            20%,
            40%,
            60%,
            80% {
                transform: translateX(5px);
            }
        }

        .weather-icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .animate-pulse-rotate {
            animation: pulse-rotate 8s ease-in-out infinite;
        }

        .animate-float {
            animation: float 4s ease-in-out infinite;
        }

        .animate-rain-drop .rain-drops line {
            animation: rain-drop 1.5s ease-in-out infinite;
        }

        .animate-rain-drop .rain-drops line:nth-child(2) {
            animation-delay: 0.3s;
        }

        .animate-rain-drop .rain-drops line:nth-child(3) {
            animation-delay: 0.6s;
        }

        .animate-flash .lightning {
            animation: flash 2s ease-in-out infinite;
        }

        .animate-wave .fog-layers line {
            animation: wave 3s ease-in-out infinite;
        }

        .animate-wave .fog-layers line:nth-child(2) {
            animation-delay: 0.5s;
        }

        .animate-wave .fog-layers line:nth-child(3) {
            animation-delay: 1s;
        }

        .animate-wave .fog-layers line:nth-child(4) {
            animation-delay: 1.5s;
        }

        /* Category Icon - SVG Only */
        .pill-icon-result {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pill-icon-result svg {
            width: 100%;
            height: 100%;
            stroke: rgba(112, 234, 200, 0.9);
        }

        /* Category Name */
        .pill-category-name {
            color: rgba(255, 255, 255, 0.95);
            font-size: 14px;
            font-weight: 500;
            flex: 1;
        }

        .place-name-compact {
            font-size: 14px;
            font-weight: 700;
            color: rgba(255,255,255,0.96);
            line-height: 1.3;
            flex: 1;
            min-width: 0;
            white-space: normal;
            overflow: hidden;
            overflow-wrap: anywhere;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .place-distance-compact {
            font-size: 11px;
            font-weight: 600;
            color: rgba(94, 201, 160, 0.9);
            background: rgba(94, 201, 160, 0.08);
            border: 0.8px solid rgba(94, 201, 160, 0.2);
            border-radius: 20px;
            padding: 3px 10px;
            white-space: nowrap;
            flex-shrink: 0;
            max-width: 42%;
            text-align: center;
        }

        @media (max-width: 420px) {

            .place-distance-compact {
                max-width: 100%;
            }
        }

        /* Place Details */
        .place-details-compact {
            color: rgba(255, 255, 255, 0.6);
            font-size: 12px;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        /* Modal Scrollbar - Hide it */
        .qibla-modal-content::-webkit-scrollbar {
            width: 6px;
        }

        .qibla-modal-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .qibla-modal-content::-webkit-scrollbar-thumb {
            background: rgba(94, 201, 160, 0.3);
            border-radius: 3px;
        }

        .qibla-modal-content::-webkit-scrollbar-thumb:hover {
            background: rgba(94, 201, 160, 0.5);
        }
            @keyframes slideDown {
                from {
                    transform: translateY(-100%);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            @keyframes slideUp {
                from {
                    transform: translateY(100%);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

        /* ── Version badge ───────────────────────────────────────────── */
        .version-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 5px 10px;
            background: rgba(94, 201, 160, 0.15);
            border: 1px solid rgba(112, 234, 200, 0.2);
            border-radius: var(--radius-full);
            font-size: 11px;
            font-weight: 600;
            color: rgba(112, 234, 200, 0.65);
            letter-spacing: 0.03em;
            white-space: nowrap;
            user-select: none;
            pointer-events: none;
        }
        .version-badge span { color: rgba(112, 234, 200, 0.95); }
        @media (max-width: 380px) { .version-badge { display: none; } }

        /* ── Beta disclaimer ─────────────────────────────────────────── */
        .beta-disclaimer {
            text-align: center;
            font-size: 11px;
            color: var(--text-muted);
            padding-block: 4px;
            padding-inline: var(--space-4);
            letter-spacing: 0.01em;
            user-select: none;
            pointer-events: none;
            margin: 0;
        }


        /* ── Message limit card ──────────────────────────────────────── */
        .limit-card {
            background: rgba(10, 20, 30, 0.97);
            border: 1px solid rgba(94, 201, 160, 0.3);
            border-radius: 24px;
            padding: 36px 28px;
            max-width: 380px;
            width: 100%;
            text-align: center;
            animation: fadeInScale 0.35s ease both;
        }
        @keyframes fadeInScale {
            from { opacity: 0; transform: scale(0.92); }
            to   { opacity: 1; transform: scale(1); }
        }
        .limit-icon {
            width: 72px;
            height: 72px;
            margin: 0 auto 20px;
            background: rgba(94, 201, 160, 0.15);
            border: 1px solid rgba(112, 234, 200, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .limit-title {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            margin-block-end: 10px;
        }
        .limit-body {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.7;
            margin-block-end: 24px;
        }
        .limit-btn-primary {
            width: 100%;
            padding: 14px;
            margin-block-end: 10px;
            background: rgba(94, 201, 160, 0.8);
            border: 1px solid rgba(112, 234, 200, 0.4);
            border-radius: 12px;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            min-height: 48px;
            transition: background 0.2s ease;
        }
        .limit-btn-primary:hover { background: rgba(94, 201, 160, 1); }
        .limit-btn-secondary {
            width: 100%;
            padding: 12px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: rgba(255, 255, 255, 0.45);
            font-size: 14px;
            cursor: pointer;
            min-height: 44px;
            transition: border-color 0.2s ease;
        }
        .limit-btn-secondary:hover { border-color: rgba(255, 255, 255, 0.25); }

        .contact-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
            text-align: start;
            width: 100%;
        }
        .contact-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 0.8px solid rgba(94, 201, 160, 0.18);
            color: rgba(112, 234, 200, 0.85);
            font-size: 14px;
            text-decoration: none;
            min-height: 44px;
            transition: all 0.2s ease;
            width: 100%;
        }
        .contact-link:hover {
            background: rgba(94, 201, 160, 0.1);
            border-color: rgba(94, 201, 160, 0.35);
            color: rgba(94, 201, 160, 1);
        }

/* ═══════════════════════════════════════════════════════════════════════
   CHANGE 4 — Beta disclaimer
═══════════════════════════════════════════════════════════════════════════ */
.beta-disclaimer {
    font-size: 11px;
    color: rgba(255,255,255,0.32);
    text-align: center;
    margin: 0 0 6px 0;
    padding: 0 12px;
    line-height: 1.4;
    user-select: none;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHANGE 1 — Cookie bar
═══════════════════════════════════════════════════════════════════════════ */
/* 🍪 **شريطٌ مسطّح يأخذ سطرَه، لا زجاجٌ يطفو فوق القائمة.**
      كان ضبابيّاً شفّافاً فوق آخر ثلث الشاشة: يغطّي الأطباقَ وزرَّ السلّة في تبويب
      الطعام وحقلَ الكتابة في المحادثة، ولا شيءَ تحته يُمرَّر إلى ما بعده. الآن أرضيّةٌ
      مصمتة، و`initCookieBar` يكتب ارتفاعَه في `--zw-cookie-h` ما دام ظاهراً — فحقلُ
      الكتابة يرتفع فوقه، والمحادثةُ وقائمةُ الطعام تُضيفان ارتفاعَه إلى آخرهما. */
.cookie-bar {
    display: none;
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    max-height: 56px;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: #061018;
    border-top: 1px solid rgba(94,201,160,0.2);
    z-index: 8000;
    transition: opacity 0.3s;
}
.cookie-bar-icon { flex-shrink: 0; color: rgba(112,234,200,0.8); }
.cookie-bar-text {
    flex: 1;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cookie-policy-btn {
    background: none;
    border: none;
    color: rgba(112,234,200,0.75);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-policy-btn:hover { color: rgba(112,234,200,1); }
.cookie-bar-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cookie-accept-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: rgba(94,201,160,0.92);
    border: 1px solid rgba(112,234,200,0.45);
    border-radius: 8px;
    color: #06231a;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    min-height: 36px;
    transition: background 0.2s;
    white-space: nowrap;
}
.cookie-accept-btn:hover { background: rgba(108,214,173,1); }
.cookie-reject-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-height: 36px;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.cookie-reject-btn:hover { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.85); }

/* Cookie bar — mobile: stack text above the two action buttons */
@media (max-width: 600px) {
    .cookie-bar {
        max-height: none;
        flex-wrap: wrap;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        gap: 12px;
    }
    .cookie-bar-text {
        flex: 1 1 100%;
        font-size: 12px;
        line-height: 1.6;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .cookie-bar-actions { width: 100%; justify-content: stretch; gap: 10px; }
    .cookie-bar-actions .cookie-accept-btn,
    .cookie-bar-actions .cookie-reject-btn { flex: 1; min-height: 44px; text-align: center; }
    .cookie-bar-icon { display: none; }
}

/* 🍪 ما دام الشريطُ ظاهراً: حقلُ الكتابة فوقه، وآخرُ رسالةٍ تُمرَّر فوقهما معاً.
      `0px` حين لا شريط — فالقيمُ هي نفسُها التي كانت قبل هذه القواعد حرفاً بحرف.
   ⚠️ و`!important` على الجوّال لأن قواعدَ شريط الكتابة هناك كلَّها `!important`
      (`bottom: 0` و`padding-bottom: 150px`)؛ هذه تأتي بعدها فتفوز بالترتيب. */
.chat-input-bar.bottom { bottom: var(--zw-cookie-h, 0px); }
.chat-messages.with-bottom-input { padding-bottom: calc(120px + var(--zw-cookie-h, 0px)); }
@media (max-width: 768px) {
    .chat-input-bar { bottom: var(--zw-cookie-h, 0px) !important; }
    .chat-messages,
    .chat-messages.with-bottom-input { padding-bottom: calc(150px + var(--zw-cookie-h, 0px)) !important; }
}

/* PDPL bottom-sheet */
.pdpl-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9000;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pdpl-sheet-overlay.open .pdpl-sheet { transform: translateY(0); }
.pdpl-sheet {
    width: 100%;
    max-width: 600px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 0.8px solid rgba(94,201,160,0.22);
    border-radius: 20px 20px 0 0;
    padding: 24px 20px 32px;
    padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px));
    position: relative;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.pdpl-sheet-handle {
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin: 0 auto 20px;
}
.pdpl-close-btn {
    position: absolute;
    inset-inline-end: 16px;
    inset-block-start: 16px;
    width: 32px; height: 32px;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: background 0.2s;
}
.pdpl-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.pdpl-title { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.9); margin: 0 0 12px 0; }
.pdpl-body { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0 0 16px 0; }
.pdpl-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(112,234,200,0.8);
    text-decoration: none;
}
.pdpl-link:hover { text-decoration: underline; color: rgba(112,234,200,1); }

/* ═══════════════════════════════════════════════════════════════════════
   CHANGE 3 — Login screen redesign
═══════════════════════════════════════════════════════════════════════════ */
/* 🔑 شاشة الدخول — والقصُّ الذي كانت تُنتجه بنفسها.
 *
 * ⚠️ كانت `align-items:center` بلا `overflow`. وهي تعمل ما دامت البطاقة أقصر
 *    من الشاشة، وتنكسر **بقصّ أعلاها تحديداً** حين تطول عليها: التوسيط يوزّع
 *    الفائض على الطرفين، فيخرج نصفُه فوق الحافّة العليا — و`overflow:visible`
 *    على عنصرٍ `fixed` يعني أنه لا يُتمرَّر إليه بحال. فيرى النزيل بطاقةً
 *    مقصوصةً من رأسها ولا سبيل إلى ما فوقه إلا الزوم أوت.
 *
 *    ومتى تطول عليها؟ في كل مرّة تُفتح لوحة المفاتيح على جهازٍ متوسط الطول،
 *    وفي الوضع الأفقي، ومع تكبير الخط من إعدادات إمكانية الوصول. أي أنها
 *    الحالة الشائعة لا الطرفية.
 *
 * 🩹 والعلاج ليس `align-items:safe center` (حديثة، ولسنا مضطرّين): التوسيط
 *    بـ`margin:auto` على الابن. الهامش التلقائي يبتلع الفائض حين يوجد فراغ،
 *    ولا يصير سالباً حين لا يوجد — فيتوسّط في الشاشة الواسعة ويتمرّر في
 *    الضيّقة، بلا استعلامٍ ولا قاعدةٍ ثانية.
 *
 * 📐 والارتفاع `--zw-vh` حين يضبطه JS (لوحة المفاتيح مفتوحة): `inset:0` يقيس
 *    الإطار **التخطيطي**، وهو لا ينكمش للوحة في المتصفّحات التي لا تعرف
 *    `interactive-widget` (سفاري). فبدونه تقف البطاقة خلف اللوحة. */
.glc-screen {
    position: fixed;
    inset: 0;
    bottom: auto;
    height: 100dvh;
    height: var(--zw-vh, 100dvh);
    background:
        radial-gradient(ellipse at 50% 25%, rgba(14, 65, 52, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse at 80% 80%, rgba(6, 28, 22, 0.4) 0%, transparent 50%),
        #070d14;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    z-index: 99999;
    padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.glc-screen > .glc-card {
    margin-block: auto;
}
.glc-accent-strip {
    display: none;
}
.glc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 44px 40px;
    max-width: 420px;
    width: 100%;
    background: rgba(255, 255, 255, 0.035);
    border: 0.8px solid rgba(94, 201, 160, 0.18);
    border-radius: 24px;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow:
        0 48px 120px rgba(0, 0, 0, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* ── 🏨 منطقة هوية الفندق على شاشة الدخول ────────────────────────────────
   كانت لوحاً داخل لوح: خلفية وحدود خاصة بها داخل بطاقة زجاجية لها خلفية
   وحدود — صندوقان متداخلان يقرأهما العين تشوّشاً لا تنظيماً. وفوق ذلك
   ثلاثة أوزان نصّية متنافسة (كلمة الشعار الكبيرة، ثم عنوان أبيض عريض
   بنفس الحجم، ثم سطر باهت) بلا تسلسل: أيّها العنوان؟

   الآن: الشعار وحده هو الهوية، يجلس على زجاج البطاقة بلا صندوق، والترحيب
   سطرٌ هادئ تحته يخدمه ولا يزاحمه. فاصلٌ رقيق واحد يفصل الهوية عن النموذج. */
.glc-hotel-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 4px 0 26px;
    margin-bottom: 30px;
    border-bottom: 0.8px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}
/* 🏨 شعار الفندق على شاشة الدخول.

   كان مربّعاً أخضر 68px يحمل أيقونة مبنى عامّة — لونُ زوايا وشكلُها، لا هوية
   الفندق. الشعار الحقيقي عريض (نسبته ٢:١ تقريباً)، فحصرُه في مربّع كان
   سيصغّره حتى تختفي كلمته.

   ولا لوح أبيض تحته: الشعار يجلس على زجاج البطاقة نفسه، فتُقرأ الكثبان
   الرملية بتدرّجاتها الأصلية على الخلفية الداكنة، وكلمة الشعار تأخذ لوناً
   رمليّاً محدَّداً داخل ملف SVG (انظر img/rio-hotel-logo-*.svg). */
.glc-hotel-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 📐 القياس بالارتفاع لا بالعرض.

   النسختان مختلفتا النسبة (اللاتينية ٢.٠٦ والعربية ١.٦٦ لأن كلمتها أعرض
   حرفياً). التقييد بالعرض كان يجعل ارتفاع الشعار العربي أكبر بـ٢٥٪ من
   اللاتيني — أي أن تبديل اللغة يُقفز حجم الهوية. ومع `max-height` فوق
   `width:100%` يتصادم القيدان فيبقى في الصندوق فراغ رأسي.

   ارتفاعٌ ثابت وعرضٌ حرّ: النسختان بوزن بصريّ واحد، ولا فراغ، ولا تشويه.
   و`max-width` شبكة أمان للشاشات الضيّقة جداً. */
.glc-hotel-logo-img {
    height: 92px;
    width: auto;
    max-width: 100%;
    /* ظلٌّ محايد خفيف يُجلس الشعار على الزجاج. كان توهّجاً برتقالياً يصبغ
       الهالة حول الكلمة، فيزيد النغمة الدافئة نغمةً رابعة على بطاقة فيها
       أخضر المنصّة وعاجيّ النصّ ورمليّ الكثبان. */
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}
/* consent-en/ar الافتراضيّتان inline؛ الشعار كتلة كي تعمل max-width. */
.glc-hotel-logo .consent-en,
[dir="rtl"] .glc-hotel-logo .consent-ar { display: block; }
.glc-hotel-text {
    display: flex; flex-direction: column; gap: 7px;
    align-items: center;
}
/* الترحيب سطرٌ يخدم الشعار لا عنوانٌ ينافسه: كان 22px/700 أبيض ناصعاً بنفس
   حجم كلمة الشعار فوقه، فتصادم الوزنان وضاع التسلسل. الآن أصغر وأخفّ، ولونه
   عاجيّ دافئ من عائلة الشعار نفسها لا أبيض بارد — فتقرأ الكتلةُ نغمةً واحدة. */
.glc-hotel-name {
    font-size: 15.5px;
    font-weight: 500;
    color: rgba(240, 232, 220, 0.82);
    letter-spacing: 0.1px;
    line-height: 1.45;
}
.glc-hotel-sub {
    font-size: 11.5px;
    color: rgba(240, 232, 220, 0.36);
    letter-spacing: 0.3px;
}
/* اسم المنصّة يأخذ لونه من CSS لا من سِمة style داخل نصّ الترجمة — كان
   مكرّراً في ثلاثة مواضع (HTML ونصّان في translations) فيتباعد أيّها عُدّل.
   الأخضر يبقى لمسةً واحدة صغيرة: هو لون المنصّة، والبطاقة بطاقةُ الفندق. */
.glc-hotel-sub strong {
    color: rgba(112, 234, 200, 0.82);
    font-weight: 600;
}
.glc-input-group { width: 100%; margin-bottom: 14px; position: relative; }
.glc-input-icon {
    position: absolute;
    inset-inline-start: 18px;
    top: 50%; transform: translateY(-50%);
    pointer-events: none;
    color: rgba(94, 201, 160, 0.45);
    display: flex;
}
.glc-input {
    width: 100%;
    padding: 17px 18px 17px 52px;
    background: rgba(0, 0, 0, 0.25);
    border: 0.8px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px; font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-height: 56px;
    box-sizing: border-box;
}
[dir="rtl"] .glc-input { padding-inline-start: 52px; padding-inline-end: 18px; }
.glc-input:focus {
    border-color: rgba(94, 201, 160, 0.4);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(94, 201, 160, 0.08);
}
.glc-input::placeholder { color: rgba(255, 255, 255, 0.25); letter-spacing: 0; text-transform: none; font-size: 14px; }
/* رسالة خطأ على مستوى النموذج (تحت الحقلين، فوق الموافقة) — تحتاج هامشاً
   سفلياً حتى لا تلتصق بسطر الموافقة عند ظهورها. */
.glc-error { display: none; margin-top: 2px; margin-bottom: 12px; font-size: 13px; color: rgba(239, 68, 68, 0.9); text-align: center; }
.glc-btn {
    width: 100%;
    padding: 17px 24px;
    background: linear-gradient(135deg, rgba(94, 201, 160, 0.82) 0%, rgba(58, 168, 126, 0.78) 100%);
    border: 0.8px solid rgba(94, 201, 160, 0.45);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.97);
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px;
    letter-spacing: 0.3px;
    transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
    box-shadow: 0 6px 28px rgba(58, 168, 126, 0.3), inset 0 1px 0 rgba(255,255,255,0.12);
    margin-bottom: 16px;
}
.glc-btn:hover {
    background: linear-gradient(135deg, rgba(94, 201, 160, 0.95) 0%, rgba(58, 168, 126, 0.9) 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 40px rgba(58, 168, 126, 0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}
.glc-btn:active { transform: translateY(0); }
/* 🗑️ قواعد `.glc-demo-hint` أُزيلت مع تلميح الدخول التجريبي نفسه. */

/* ── Consent checkbox (PDPL) ─────────────────────────────── */
.glc-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    margin: 2px 0 18px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.glc-consent-box {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    margin: 0;
}
.glc-consent-check {
    flex-shrink: 0;
    width: 20px; height: 20px;
    margin-top: 1px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.25);
    display: flex; align-items: center; justify-content: center;
    color: transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.glc-consent-box:checked ~ .glc-consent-check {
    background: linear-gradient(135deg, rgba(94, 201, 160, 0.92) 0%, rgba(58, 168, 126, 0.88) 100%);
    border-color: rgba(94, 201, 160, 0.55);
    color: #ffffff;
}
.glc-consent-box:focus-visible ~ .glc-consent-check {
    box-shadow: 0 0 0 3px rgba(94, 201, 160, 0.18);
}
.glc-consent:hover .glc-consent-check {
    border-color: rgba(94, 201, 160, 0.4);
}
.glc-consent-text {
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1px;
    text-align: start;
}
/* Show one language only, based on page direction (rtl = Arabic) */
.consent-ar { display: none; }
.consent-en { display: inline; }
[dir="rtl"] .consent-ar { display: inline; }
[dir="rtl"] .consent-en { display: none; }
.glc-consent-text a {
    color: rgba(112, 234, 200, 0.78);
    text-decoration: none;
    border-bottom: 0.8px solid rgba(112, 234, 200, 0.28);
    transition: color 0.2s, border-color 0.2s;
}
.glc-consent-text a:hover {
    color: rgba(112, 234, 200, 1);
    border-color: rgba(112, 234, 200, 0.7);
}
.glc-consent-sep { color: rgba(255, 255, 255, 0.2); margin: 0 5px; }

/* Disabled Enter button — clearly inert until consent is given */
.glc-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: saturate(0.6);
    box-shadow: none;
    transform: none;
}
.glc-btn:disabled:hover {
    background: linear-gradient(135deg, rgba(94, 201, 160, 0.82) 0%, rgba(58, 168, 126, 0.78) 100%);
    transform: none;
    box-shadow: none;
}
.glc-footer { display: flex; align-items: center; gap: 10px; justify-content: center; }
.glc-lang-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 0.8px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.08em;
    min-height: 34px;
    transition: border-color 0.2s, color 0.2s;
}
.glc-lang-toggle:hover { border-color: rgba(112,234,200,0.4); color: rgba(112,234,200,0.8); }
.glc-footer-sep { color: rgba(255,255,255,0.2); font-size: 13px; }
.glc-privacy-link { font-size: 12px; color: rgba(112,234,200,0.5); text-decoration: none; }
.glc-privacy-link:hover { color: rgba(112,234,200,0.85); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
    /* ⚠️ `justify-content` يبقى `flex-start` هنا كذلك — لا يُعاد إلى `center`.
     *    التوسيط في محور التمرير هو ما كان يقصّ أعلى البطاقة حين تطول عليها
     *    (راجع القاعدة الأساسية أعلاه)؛ و`margin-block:auto` على البطاقة يعطي
     *    نفسَ المنظر بلا القصّ. وهذه الشاشة **الأضيق**، فهي أوّل من يقع فيه. */
    .glc-screen {
        padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px));
        align-items: center;
    }
    .glc-card {
        padding: 36px 24px 32px;
        border-radius: 20px;
        max-width: 100%;
        width: 100%;
    }
    /* الشعار عريض لا مربّع: على الجوال نُنقص ارتفاعه فقط (والعرض يتبعه).
       القاعدة القديمة كانت تحصره في 56px مربّعاً — وهو ما يمحو كلمته تماماً. */
    .glc-hotel-logo-img { height: 74px; }
    .glc-hotel-name { font-size: 20px; }
    .glc-hotel-zone { margin-bottom: 28px; padding-bottom: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHANGE 7 — Inline session-limit chat card
═══════════════════════════════════════════════════════════════════════════ */
.chat-limit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 32px 24px 24px;
    margin: 24px auto;
    max-width: 400px;
    background: linear-gradient(160deg, rgba(12,28,38,0.95) 0%, rgba(8,20,28,0.98) 100%);
    border: 1px solid rgba(112,234,200,0.18);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: clcEnter 0.35s cubic-bezier(0.34,1.3,0.64,1) both;
}
@keyframes clcEnter {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.clc-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(70,105,95,0.25) 0%, rgba(70,105,95,0.08) 100%);
    border: 1px solid rgba(112,234,200,0.25);
    display: flex; align-items: center; justify-content: center;
    color: rgba(112,234,200,0.85);
    margin-bottom: 4px;
    box-shadow: 0 0 20px rgba(112,234,200,0.08);
}
.clc-divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(112,234,200,0.3), transparent);
    border: none;
    border-radius: 2px;
    margin: 4px 0;
}
.clc-title {
    font-size: 17px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin: 0;
    letter-spacing: -0.01em;
}
.clc-body {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
}
.clc-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}
.clc-btn-primary {
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, rgba(70,105,95,0.85) 0%, rgba(55,90,80,0.85) 100%);
    border: 1px solid rgba(112,234,200,0.35);
    border-radius: 12px;
    color: rgba(255,255,255,0.97);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 12px rgba(70,105,95,0.25);
}
.clc-btn-primary:hover {
    background: linear-gradient(135deg, rgba(70,105,95,1) 0%, rgba(55,90,80,1) 100%);
    border-color: rgba(112,234,200,0.55);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(70,105,95,0.35);
}
.clc-btn-filter {
    width: 100%;
    padding: 12px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-height: 48px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.clc-btn-filter:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.95);
}
.clc-btn-secondary {
    background: none;
    border: none;
    color: rgba(112,234,200,0.6);
    font-size: 12px;
    cursor: pointer;
    padding: 6px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: 36px;
    transition: color 0.2s;
}
.clc-btn-secondary:hover { color: rgba(112,234,200,1); }

/* Arabic body font */
[lang="ar"] body,
[dir="rtl"] body {
    font-family: 'Tajawal', 'Cairo', sans-serif;
}

/* ── 🔢 جزيرة نصّ لاتيني داخل واجهة عربية ────────────────────────────────
   رفيقة window._zwLtr(). هاتف أو عنوان أو اسم شبكة يُلفّ بها فلا تُعيد
   خوارزمية bidi ترتيب داخله مع الجملة العربية المحيطة.

   `isolate` هي جوهر الإصلاح: `direction: ltr` وحدها تُصلح اتجاه القراءة
   داخل العنصر لكنها تُبقيه في مستوى اتجاه أبيه، فيظلّ ترتيب مقاطعه رهن
   الجملة. و`inline-block` تكسر التقاط النصّ الطويل عند حدّ السطر.

   ⚠️ الأرقام تبقى بأشكالها الغربية عن قصد: رقم هاتف يُطلَب بالضغط عليه
      وأرقام هندية-عربية في `tel:` لا تُطلب. */
.zw-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* رفيقة window._zwAutoDir(): عزل بلا فرض اتجاه — الاتجاه يأتي من سِمة
   dir="auto" على العنصر نفسه. لا نضع `direction` هنا: قاعدة CSS تفوز على
   السِمة، فكانت ستُبطل الاستنتاج وتُفسِد النصّ العربي. */
.zw-bidi {
    unicode-bidi: isolate;
}

/* ══════════════════════════════════════════════════════════
   AUDIT FIXES — Production Quality Pass
   ══════════════════════════════════════════════════════════ */

/* ── Design tokens (glass surfaces + brand border) ───────── */
:root {
    --glass-surface-1: rgba(15, 35, 45, 0.4);
    --glass-surface-2: rgba(0, 0, 0, 0.6);
    --brand-border: rgba(94, 201, 160, 0.22);
    --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --color-error: #ef4444;
}

/* ── Replace Inter with DM Sans ───────────────────────────── */
[dir="rtl"] body,
[lang="ar"] body {
    font-family: var(--font-arabic);
    line-height: 1.9;
}
[dir="rtl"] p,
[lang="ar"] p {
    line-height: 1.9;
}

/* ── Shake keyframe (login error) ─────────────────────────── */
@keyframes shake {
    0%,  100% { transform: translateX(0); }
    20%       { transform: translateX(-8px); }
    40%       { transform: translateX(8px); }
    60%       { transform: translateX(-5px); }
    80%       { transform: translateX(5px); }
}
.shake { animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* ── Focus visible ring ───────────────────────────────────── */
:focus-visible {
    outline: 2px solid rgba(112, 234, 200, 0.8);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 6px);
}
:focus:not(:focus-visible) {
    outline: none;
}
.chat-input:focus-visible {
    outline: none;
}

/* ── Screen-reader only utility ───────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Button press state ───────────────────────────────────── */
button:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

/* ── Safe area inset for iOS notch ───────────────────────── */
.chat-input-bar.bottom {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ── Backdrop blur fallback ───────────────────────────────── */
@supports not (backdrop-filter: blur(0)) {
    .guest-menu { background: rgba(8, 18, 24, 0.98); }
    .chat-input-bar { background: rgba(8, 18, 24, 0.95); }
}

/* ── RTL directional arrow flip ──────────────────────────── */
[dir="rtl"] .arrow-icon svg,
[dir="rtl"] .send-icon.arrow-icon svg {
    transform: scaleX(-1);
}

/* ── Modal close buttons — logical positioning ───────────── */
.qibla-modal-close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
}

/* ── Empty search state ───────────────────────────────────── */
.empty-search-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}
.empty-search-state svg {
    opacity: 0.5;
    color: var(--brand-primary);
}
.empty-search-state p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}
.empty-search-state button {
    padding: 12px 24px;
    background: var(--glass-surface-1);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-full);
    color: rgba(112, 234, 200, 0.9);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    min-height: 44px;
}
.empty-search-state button:hover {
    background: rgba(94, 201, 160, 0.2);
    border-color: rgba(94, 201, 160, 0.5);
}

/* ── Prefers reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── DM Sans applied via token ───────────────────────────── */
body {
    font-family: var(--font-sans);
}

/* Respect HTML hidden attribute — overrides display:flex */
.empty-search-state[hidden] { display: none !important; }

/* ── Session limit card — compact redesign ───────────────── */
.chat-limit-card {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    max-width: 480px !important;
    gap: 0 !important;
}
.clc-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.chat-limit-card .clc-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    margin-bottom: 0;
    background: rgba(70,105,95,0.15);
    border: 1px solid rgba(112,234,200,0.2);
    box-shadow: none;
}
.clc-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    text-align: start;
}
.chat-limit-card .clc-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.chat-limit-card .clc-body {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
    max-width: none;
}
.clc-btn-contact {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(70,105,95,0.2);
    border: 1px solid rgba(112,234,200,0.25);
    border-radius: 8px;
    color: rgba(112,234,200,0.9);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    min-height: 36px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.clc-btn-contact:hover {
    background: rgba(70,105,95,0.35);
    border-color: rgba(112,234,200,0.5);
}

/* ══════════════════════════════════════════════════════════
   MODAL REDESIGN — Full system pass
   ══════════════════════════════════════════════════════════ */

/* ── Shared overlay backdrop ─────────────────────────────── */
.qibla-modal {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 24px !important;
}

/* ── Shared modal card ───────────────────────────────────── */
.qibla-modal-content {
    background: linear-gradient(160deg, rgba(10, 24, 34, 0.97) 0%, rgba(6, 16, 24, 0.99) 100%) !important;
    border: 1px solid rgba(94, 201, 160, 0.22) !important;
    border-radius: 20px !important;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    padding: 28px 24px 24px !important;
    /* Smooth entrance */
    transform: scale(0.95) translateY(8px) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1),
                opacity 0.3s ease !important;
    /* hide scrollbar */
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.qibla-modal-content::-webkit-scrollbar { display: none !important; }

/* Active state */
.qibla-modal.active .qibla-modal-content {
    transform: scale(1) translateY(0) !important;
}

/* Remove hover border change (bad UX) */
.qibla-modal-content:hover {
    background: linear-gradient(160deg, rgba(10, 24, 34, 0.97) 0%, rgba(6, 16, 24, 0.99) 100%) !important;
    border-color: rgba(94, 201, 160, 0.28) !important;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* ── Weather & Prayer modal widths ───────────────────────── */
#weather-modal .qibla-modal-content { max-width: 440px !important; }
#prayer-modal  .qibla-modal-content { max-width: 400px !important; }

/* ── Modal heading style ─────────────────────────────────── */
.qibla-modal-content h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: -0.01em !important;
    padding-inline-end: 32px !important; /* space for close btn */
}

/* ── Close button redesign ───────────────────────────────── */
.qibla-modal-close {
    position: absolute !important;
    inset-block-start: 16px !important;
    inset-inline-end: 16px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-weight: 300 !important;
}
.qibla-modal-close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Apply button */
#modalApplyBtn {
    border-radius: 12px !important;
    font-size: 15px !important;
    padding: 15px 24px !important;
    margin-top: 4px !important;
    box-shadow: 0 4px 20px rgba(94, 201, 160, 0.3) !important;
}

/* ── Cookie bar polish ────────────────────────────────────── */
.cookie-bar {
    background: rgba(6, 16, 24, 0.98) !important;
    border-top: 1px solid rgba(94, 201, 160, 0.2) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* ── PDPL sheet polish ────────────────────────────────────── */
.pdpl-sheet {
    background: linear-gradient(180deg, rgba(10, 24, 34, 0.99) 0%, rgba(6, 16, 24, 1) 100%) !important;
    border: 1px solid rgba(94, 201, 160, 0.2) !important;
    border-bottom: none !important;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5) !important;
}
.qibla-modal-content::-webkit-scrollbar,
.pdpl-sheet::-webkit-scrollbar { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   RTL MOBILE FIXES — Arabic layout corrections on small screens
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* 2. Input wrapper: stack input + beta disclaimer vertically */
    .input-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .beta-disclaimer {
        text-align: center !important;
        order: 2 !important;
        margin: 0 !important;
        padding: 2px 8px !important;
    }
    .input-container {
        order: 1 !important;
    }

    /* 3. message-content: replace physical padding with logical */
    .message-content {
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-inline-end: 8px !important;
    }

    /* 4. RTL: flip message bubble directions */
    /* In RTL, .message.user has row-reverse which incorrectly puts avatar on left */
    [dir="rtl"] .message.user {
        flex-direction: row !important; /* RTL row = R→L: avatar right, bubble left = right-aligned ✓ */
    }
    [dir="rtl"] .message.ai {
        flex-direction: row-reverse !important; /* L→R: avatar left, bubble right = left-aligned ✓ */
    }

    /* 5. RTL: user message content padding fix */
    [dir="rtl"] .message-content {
        padding-inline-end: 0 !important;
        padding-inline-start: 8px !important;
    }

    /* 8. اتجاه حقل الكتابة — يُحسم من النصّ نفسه لا من لغة الواجهة.
       كانت القاعدة تفرض `direction: rtl !important` على الحقل متى كانت
       الواجهة عربية، فمن يكتب جملة إنجليزية يراها مبعثرة: علامة الاستفهام
       تقفز إلى أوّل السطر والأرقام تنقلب («?Where is the gym»). العربي كان
       سليماً لأن الاتجاه المفروض صادف اتجاهه.
       الآن: dir="auto" على الحقل + JS يزامنه مع أول حرف قوي (راجع
       _syncComposerDirection في zawaya-main.js)، و`text-align: start`
       يتبع الاتجاه المحسوم بدل تثبيته يميناً. */
    [dir="rtl"] .chat-input {
        text-align: start;
    }

    /* 9. Chat messages: full width, no overflow */
    .chat-messages {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* 10. Message bubbles: word wrap */
    .message-bubble {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
}


/* Guest accessibility preferences. The classes are toggled on <html> so
   panels, chat bubbles, and dynamically inserted content all inherit them. */
/* Most legacy guest controls use px.  Root font-size alone cannot scale them,
   so zoom supplies the promised visible increase without per-component drift. */
html.zw-large-text { font-size: 18px; zoom: 1.15; }
@supports not (zoom: 1) {
    html.zw-large-text { font-size: 18.4px; }
}
html.zw-large-text .message-bubble,
html.zw-large-text .chat-input,
html.zw-large-text .nav-text { font-size: 1.08em !important; }
html.zw-high-contrast {
    --text-primary: #ffffff;
    --text-secondary: #f3f4f6;
    --text-tertiary: #e5e7eb;
    --text-muted: #d1d5db;
    --glass-border: rgba(255,255,255,0.6);
}
html.zw-high-contrast .message-bubble,
html.zw-high-contrast .header-chip,
html.zw-high-contrast .nav-item { border-color: rgba(255,255,255,0.55) !important; }
html.zw-reduced-motion *,
html.zw-reduced-motion *::before,
html.zw-reduced-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

.guest-preferences-intro { margin: 0 0 12px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; }
.guest-preference-label { display: block; margin: 14px 0 7px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.guest-preference-input { width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--text-primary); background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.15); font: inherit; }
.guest-preference-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(94,201,160,0.12); }
.guest-preferences-status { min-height: 20px; margin-top: 9px; color: var(--brand-primary); font-size: 12px; }
/* 🗑️ قواعد `.guest-preferences-save` أُزيلت مع الزرّ نفسه — الحفظ صار تلقائياً. */

/* Quick-pick chips for the two free-text preference fields. They write
   canonical English values so staff read one consistent wording. */
.pref-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.pref-chip {
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.pref-chip:hover { border-color: rgba(94, 201, 160, 0.45); color: var(--text-primary); }
.pref-chip:focus-visible { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(94, 201, 160, 0.14); }
.pref-chip.is-active {
    border-color: var(--brand-primary);
    background: rgba(94, 201, 160, 0.16);
    color: var(--text-primary);
}
/* Read-only stay facts the guest would otherwise have to ask for. No counts,
   budgets or quotas are surfaced here — the guest is never shown a limit. */
.stay-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.stay-summary-item {
    padding: 11px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.24);
    text-align: center;
}
.stay-summary-label { display: block; margin-bottom: 4px; color: var(--text-secondary); font-size: 10.5px; font-weight: 600; }
.stay-summary-value { display: block; color: var(--text-primary); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.stay-summary-sub { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 10.5px; font-weight: 600; }
.stay-summary-sub:empty { display: none; }

.zw-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── AI reply "Report an issue" button (human oversight / SDAIA) ── */
.ai-report-btn {
    margin-top: 6px;
    margin-inline-start: 2px;
    padding: 3px 10px;
    background: transparent;
    border: 0.8px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s, color 0.2s, border-color 0.2s, background 0.2s;
}
.message:hover .ai-report-btn,
.ai-report-btn:focus-visible { opacity: 1; }
.ai-report-btn:hover {
    color: rgba(239, 138, 138, 0.9);
    border-color: rgba(239, 138, 138, 0.35);
    background: rgba(239, 138, 138, 0.06);
}
.ai-report-btn.reported {
    opacity: 1;
    color: rgba(94, 201, 160, 0.9);
    border-color: rgba(94, 201, 160, 0.3);
    cursor: default;
}
/* On touch devices there's no hover — keep it faintly visible */
@media (hover: none) {
    .ai-report-btn { opacity: 0.6; }
}

/* ── AI report modal (matches Zawaya design) ───────────────────── */
.air-overlay {
    position: fixed; inset: 0;
    background: rgba(2, 6, 12, 0.72);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 11000; padding: 20px;
    animation: airFade 0.18s ease;
}
@keyframes airFade { from { opacity: 0; } to { opacity: 1; } }
.air-modal {
    width: 100%; max-width: 440px;
    background: #0d1117;
    border: 0.8px solid rgba(94, 201, 160, 0.2);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    animation: airRise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes airRise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.air-title {
    margin: 0 0 18px; font-size: 18px; font-weight: 700;
    color: rgba(255, 255, 255, 0.95); letter-spacing: -0.2px;
}
.air-label {
    display: block; margin: 0 0 7px;
    font-size: 12.5px; color: rgba(255, 255, 255, 0.55); font-weight: 500;
}
.air-select-wrap { position: relative; margin-bottom: 18px; }
.air-select, .air-textarea {
    width: 100%; box-sizing: border-box;
    background: rgba(0, 0, 0, 0.28);
    border: 0.8px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px; font-family: inherit;
    padding: 12px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.air-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.air-select-wrap::after {
    content: ''; position: absolute; top: 50%; inset-inline-end: 14px;
    width: 8px; height: 8px; pointer-events: none;
    border-inline-end: 2px solid rgba(255,255,255,0.4);
    border-bottom: 2px solid rgba(255,255,255,0.4);
    transform: translateY(-65%) rotate(45deg);
}
.air-textarea { min-height: 90px; resize: vertical; margin-bottom: 20px; line-height: 1.5; }
.air-select:focus, .air-textarea:focus {
    outline: none;
    border-color: rgba(94, 201, 160, 0.5);
    box-shadow: 0 0 0 3px rgba(94, 201, 160, 0.12);
}
.air-select option { background: #0d1117; color: #fff; }
.air-actions { display: flex; gap: 10px; justify-content: flex-end; }
.air-btn-cancel, .air-btn-submit {
    padding: 10px 20px; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, opacity 0.2s;
}
.air-btn-cancel {
    background: transparent;
    border: 0.8px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.65);
}
.air-btn-cancel:hover { border-color: rgba(255,255,255,0.32); color: rgba(255,255,255,0.9); }
.air-btn-submit {
    background: linear-gradient(135deg, rgba(94, 201, 160, 0.9), rgba(58, 168, 126, 0.85));
    border: 0.8px solid rgba(112, 234, 200, 0.4);
    color: #fff;
}
.air-btn-submit:hover:not(:disabled) { transform: translateY(-1px); }
.air-btn-submit:disabled { opacity: 0.55; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════
   CURATED GUIDEBOOK — R10

   This surface deliberately has its own visual language and class namespace.
   Concierge remains a quiet, conversation-first canvas; Guidebook is a
   tactile editorial surface for hotel-curated places and events.  Keep these
   rules scoped to guidebook-* / zawaya-mode-* so legacy chat components cannot
   inherit card, map, or drawer styling by accident.
═══════════════════════════════════════════════════════════════════════ */

/* ── Mode switch ─────────────────────────────────────────────────────── */
.zawaya-mode-switch {
    --mode-border: rgba(112, 234, 200, 0.2);
    display: grid;
    /* ⚠️ لا عددَ مكتوب هنا. كان `repeat(2, …)` وقد صارت الأوضاع ثلاثة —
       وثالثُها **يظهر ويختفي** بحسب تفعيل الفندق لمنفذه. عمودان ثابتان كانا
       يدفعان التبويب الثالث إلى سطرٍ ثانٍ داخل شريطٍ ارتفاعُه سطر. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    /* Pin to the header's centre column — with the brand gone, auto-placement
       would otherwise drop the switch into the empty left column. */
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    margin: 0;
    padding: 3px;
    background: rgba(5, 13, 18, 0.74);
    border: 1px solid var(--mode-border);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    position: relative;
    z-index: 30;
}

.zawaya-mode-tab {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: rgba(255, 255, 255, 0.54);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

/* ⚠️ `display: inline-flex` أعلاه يفوز على `hidden` الافتراضيّة، فتبويبُ
   الطعام في فندقٍ بلا مطعم كان سيبقى ظاهراً رغم السِمة. */
.zawaya-mode-tab[hidden] { display: none !important; }

.zawaya-mode-tab:hover {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.045);
}

.zawaya-mode-tab.is-active {
    color: #071813;
    background: linear-gradient(135deg, rgba(112, 234, 200, 0.98), rgba(73, 190, 148, 0.92));
    border-color: rgba(178, 255, 227, 0.48);
    box-shadow: 0 5px 16px rgba(59, 190, 148, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.zawaya-mode-icon {
    width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: currentColor;
    font-size: 15px;
    line-height: 1;
}

.zawaya-mode-tab:not(.is-active) .zawaya-mode-icon {
    color: rgba(112, 234, 200, 0.88);
    background: rgba(112, 234, 200, 0.08);
}

/* Guidebook is a sibling of the chat surface.  A flex basis here keeps the
   map/list area usable on short laptop screens without forcing the chat to
   inherit an overflow rule. */
.guidebook-surface {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: visible;
    color: var(--text-primary);
}

.guidebook-surface[hidden],
#chatSurface[hidden] {
    display: none !important;
}

body.guidebook-active .main-content {
    min-height: 100vh;
}

body.guidebook-detail-open {
    overflow: hidden;
}

/* ── Surface shell + editorial hero ─────────────────────────────────── */
.guidebook-shell {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 0 4px 52px;
}

.guidebook-hero {
    min-height: 188px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: 18px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 28px clamp(22px, 4vw, 52px);
    border: 1px solid rgba(112, 234, 200, 0.19);
    border-radius: 24px;
    background:
        radial-gradient(circle at 80% 12%, rgba(109, 236, 201, 0.16), transparent 28%),
        radial-gradient(circle at 14% 100%, rgba(56, 125, 140, 0.2), transparent 42%),
        linear-gradient(135deg, rgba(23, 55, 61, 0.78), rgba(8, 20, 27, 0.96));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.guidebook-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.32;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(153, 255, 225, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(153, 255, 225, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(110deg, black, transparent 72%);
    -webkit-mask-image: linear-gradient(110deg, black, transparent 72%);
}

.guidebook-hero-copy {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.guidebook-eyebrow,
.guidebook-results-kicker,
.guidebook-card-eyebrow,
.guidebook-detail-eyebrow,
.guidebook-promo-kicker {
    display: block;
    color: rgba(145, 245, 214, 0.86);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.3;
    text-transform: uppercase;
}

.guidebook-hero h1 {
    max-width: 760px;
    margin: 9px 0 8px;
    color: rgba(255, 255, 255, 0.97);
    font-size: clamp(26px, 3.3vw, 47px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.05;
    text-wrap: balance;
}

.guidebook-hero-copy > p {
    max-width: 640px;
    margin: 0;
    color: rgba(232, 247, 243, 0.68);
    font-size: clamp(13px, 1.35vw, 16px);
    line-height: 1.65;
}

.guidebook-hero-mark {
    width: 156px;
    height: 156px;
    justify-self: end;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(143, 246, 216, 0.24);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 232, 197, 0.16), rgba(24, 73, 73, 0.08) 58%, transparent 60%);
    box-shadow: 0 0 0 14px rgba(112, 234, 200, 0.025), 0 0 42px rgba(79, 213, 174, 0.16);
}

.guidebook-hero-glyph {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(188, 255, 231, 0.5);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(129, 244, 211, 0.28), rgba(44, 141, 120, 0.16));
    color: rgba(188, 255, 231, 0.96);
    font-size: 29px;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(4, 31, 28, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.guidebook-orbit {
    position: absolute;
    border: 1px solid rgba(141, 245, 214, 0.2);
    border-radius: 50%;
    pointer-events: none;
}

.guidebook-orbit::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    top: 6px;
    inset-inline-end: 22%;
    border-radius: 50%;
    background: #8bf3d0;
    box-shadow: 0 0 12px rgba(139, 243, 208, 0.9);
}

.guidebook-orbit.orbit-one {
    inset: 19px 29px;
    transform: rotate(32deg);
    animation: zw-guidebook-orbit 12s linear infinite;
}

.guidebook-orbit.orbit-two {
    inset: 32px 15px;
    transform: rotate(-41deg);
    border-color: rgba(141, 205, 245, 0.17);
    animation: zw-guidebook-orbit 16s linear reverse infinite;
}

@keyframes zw-guidebook-orbit {
    to { transform: rotate(392deg); }
}

/* ── Search + category controls ─────────────────────────────────────── */
/* 🧲 شريطان لاصقان كانا يلتصقان في **نفس المكان**.
 *
 * الترويسة `sticky; top:10px; z-index:900` تشغل 10..71، وهذا الشريط
 * `sticky; top:8px; z-index:20` يشغل 8..62 — أي تداخلٌ بمقدار 63 بكسل من
 * أصل 54. فما إن ينزل الزائر في الدليل حتى يجلس زرّا «المساعد/الدليل» فوق
 * حقل البحث وزرّ الفئات مباشرة، ويغطّيانهما لأن z-index أعلى بكثير. وهو ما
 * وصفه الزائر: «ينزل فيتداخل بشكل مزعج».
 *
 * الحلّ أن يلتصق هذا الشريط **تحت** الترويسة لا معها. الارتفاع يُقرأ من
 * `--zw-header-h` الذي يقيسه ResizeObserver، فلا يتقادم رقمٌ مكتوب بيدٍ حين
 * تلتفّ الترويسة بلغةٍ أطول أو بخطٍّ أكبر. و18px = إزاحة الالتصاق (10) +
 * فاصل (8).
 *
 * 📱 الجوال مستثنى عمداً: هناك الترويسة `fixed` خارج التدفّق، والدليل يتمرّر
 *    داخل سطحه — فحاوية الالتصاق تبدأ أصلاً تحت الترويسة، و`top:8px` صحيح. */
/* ══════════════════════════════════════════════════════════════════════════
   🔎 شريط أدوات الدليل — الشريطُ الملتصق، ولماذا صار يلتصق بالحافّة تماماً
   ──────────────────────────────────────────────────────────────────────────
   الشكوى: «بار البحث يتداخل مع البطاقات». وهي دقيقة، والسبب ليس الشفافية
   وحدها بل **الشقّ فوقه**:

   كان `top: 8px` — أي أنه يرسو على بُعد ثمانية بكسلات من حافّة المتصفّح.
   فبين الحافّة والشريط ثمانيةُ بكسلاتٍ **مكشوفةٍ تماماً** تمرّ فيها البطاقات
   ظاهرةً بلا أي غطاء، ثم تدخل خلف زجاجٍ شفّافيتُه ٢٢٪ فتُرى منه. فيقرأ
   المستخدم شريطاً يطفو فوق محتوًى متحرّك يظهر من فوقه ومن خلفه معاً — وهو
   بالضبط «التداخل».

   والعلاج ثلاثة أجزاء، ولا يكفي أحدها وحده:
     ١) `top: 0` — يرسو على الحافّة، فلا يبقى شقٌّ مكشوف.
     ٢) رفٌّ معتم (`::before`) بلون الصفحة نفسه، يتجاوز هامشي الغلاف ويمتدّ
        قليلاً فوق الشريط وتحته. ولأنه **بلون الصفحة بالضبط** فهو غير مرئيّ
        وسط الصفحة، ويصير حاجزاً معتماً حين يرسو.
     ٣) رفعُ عتامة الزجاج نفسه: زجاجٌ فوق محتوًى ثابت مقروء، وفوق محتوًى
        يتحرّك تحتَه ضجيج.
   ══════════════════════════════════════════════════════════════════════ */
.guidebook-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 11px;
    padding: 4px;
    border: 1px solid rgba(112, 234, 200, 0.13);
    border-radius: 15px;
    background: rgba(8, 18, 24, 0.92);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

/* 🧱 الرفّ المعتم. `z-index:-1` يضعه خلف خلفيّة الشريط نفسها وأمام كل ما
   خارج سياق التكديس — فيحجب البطاقات المارّة ولا يحجب الشريط.
   والامتداد أفقياً يعبر حشوة `.guidebook-shell` كي لا يتسرّب المحتوى من
   جانبي الحبّة المدوّرة. */
.guidebook-toolbar::before {
    content: '';
    position: absolute;
    inset-inline: -10px;
    top: -12px;
    bottom: -9px;
    background: var(--zw-page-bg, rgb(8, 15, 20));
    z-index: -1;
    pointer-events: none;
}


.guidebook-search {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(221, 249, 241, 0.58);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.guidebook-search:focus-within {
    border-color: rgba(112, 234, 200, 0.52);
    background: rgba(112, 234, 200, 0.075);
    box-shadow: 0 0 0 3px rgba(112, 234, 200, 0.1);
}

.guidebook-search svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: rgba(137, 238, 207, 0.76);
}

.guidebook-search input {
    min-width: 0;
    flex: 1 1 auto;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}

.guidebook-search input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.guidebook-search kbd {
    min-width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.42);
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
}

.guidebook-filter-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid rgba(112, 234, 200, 0.2);
    border-radius: 11px;
    background: rgba(112, 234, 200, 0.07);
    color: rgba(220, 250, 241, 0.8);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.guidebook-filter-button svg {
    width: 17px;
    height: 17px;
    color: rgba(137, 238, 207, 0.9);
}

.guidebook-filter-button:hover,
.guidebook-filter-button[aria-expanded="true"] {
    border-color: rgba(112, 234, 200, 0.55);
    background: rgba(112, 234, 200, 0.15);
    color: #fff;
}

.guidebook-map-toggle {
    display: none;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 11px;
    border: 1px solid rgba(112, 234, 200, 0.2);
    border-radius: 11px;
    background: rgba(112, 234, 200, 0.07);
    color: rgba(220, 250, 241, 0.8);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.guidebook-map-toggle:hover,
.guidebook-map-toggle[aria-expanded="true"] {
    border-color: rgba(112, 234, 200, 0.55);
    background: rgba(112, 234, 200, 0.15);
    color: #fff;
}

/* 📏 ترتيب القائمة — يطابق حجم زرّ الخريطة وحدوده ليقرأ الشريط كصفٍّ واحد. */
.guidebook-sort {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
    border: 1px solid rgba(112, 234, 200, 0.2);
    border-radius: 11px;
    background: rgba(112, 234, 200, 0.07);
    transition: border-color 180ms ease, background 180ms ease;
}

.guidebook-sort:hover,
.guidebook-sort:focus-within {
    border-color: rgba(112, 234, 200, 0.55);
    background: rgba(112, 234, 200, 0.15);
}

.guidebook-sort select {
    min-height: 42px;
    /* مساحة للسهم الأصلي على الجانبين — الواجهة تنقلب في العربية. */
    padding: 0 8px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: rgba(220, 250, 241, 0.85);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    /* 🎨 قائمة النظام المنسدلة تُرسم بألوان النظام لا بألوان الصفحة، فتظهر
       خياراتها بيضاء على أبيض في السمة الداكنة على بعض المتصفّحات. */
    color-scheme: dark;
}

.guidebook-sort select:focus-visible {
    outline: 2px solid rgba(112, 234, 200, 0.65);
    outline-offset: 2px;
}

.guidebook-sort select option {
    background: #10201c;
    color: #eafaf4;
}

/* المسافة عن الفندق — أبرز ما في سطر البيانات، فتُلوَّن كالمُتحقَّق منه. */
.guidebook-distance {
    color: rgba(136, 237, 202, 0.85);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.guidebook-categories {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    margin: 0 0 16px;
    padding: 2px 1px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(112, 234, 200, 0.28) transparent;
}

.guidebook-categories.is-emphasized {
    margin-block: -2px 14px;
    padding: 9px 10px 10px;
    border: 1px solid rgba(112, 234, 200, 0.2);
    border-radius: 13px;
    background: rgba(112, 234, 200, 0.045);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.guidebook-categories::-webkit-scrollbar { height: 4px; }
.guidebook-categories::-webkit-scrollbar-track { background: transparent; }
.guidebook-categories::-webkit-scrollbar-thumb { background: rgba(112, 234, 200, 0.24); border-radius: 99px; }

.guidebook-category-chip {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.62);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.guidebook-category-chip:hover,
.guidebook-categories.is-emphasized .guidebook-category-chip:hover {
    color: rgba(255, 255, 255, 0.94);
    border-color: rgba(112, 234, 200, 0.42);
    background: rgba(112, 234, 200, 0.09);
}

.guidebook-category-chip.is-active {
    color: #061813;
    border-color: rgba(173, 255, 230, 0.62);
    background: linear-gradient(135deg, rgba(128, 242, 210, 0.98), rgba(81, 198, 157, 0.92));
    box-shadow: 0 5px 14px rgba(56, 177, 137, 0.18);
}

.guidebook-category-icon {
    display: inline-grid;
    min-width: 16px;
    place-items: center;
    color: hsl(var(--primary) / 0.85);
    line-height: 1;
}

/* Lucide icons are stroked 24x24 line art; 16px with a 1.75 stroke is the size
   shadcn uses inside buttons and reads correctly next to 13-14px chip text. */
.guidebook-category-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
}

.guidebook-category-chip.is-active .guidebook-category-icon { color: currentColor; }

/* Map pins and the card/detail fallback glyph share the icon set. */
.guidebook-marker svg,
.guidebook-detail-glyph svg {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

/* A district-level pin is honest about being district-level: a dashed edge
   reads as "around here" rather than "at this door". It still renders — only
   provider centroids (locationApproximate) are withheld entirely. The shadow
   is left to the base rule so the category hue is not overwritten. */
.guidebook-marker.is-approximate {
    border-style: dashed;
    border-color: hsl(0 0% 100% / 0.78);
}

.guidebook-card-media-glyph svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.5;
}

/* ── Map + result layout ────────────────────────────────────────────── */
/* The list is the primary surface and the map supports it, so the split favours
   the list and the map holds a stable aspect instead of a fixed pixel height.
   On a wide desktop the old `clamp(470px, 67vh, 700px)` left the map floating
   in a short column with dead space beside the cards. */
.guidebook-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.92fr);
    align-items: start;
    gap: 20px;
}

@media (min-width: 1240px) {
    .guidebook-layout {
        grid-template-columns: minmax(0, 1fr) minmax(460px, 1fr);
        gap: 24px;
    }
}

/* Above this the map stops growing with the viewport and simply centres, so an
   ultrawide monitor does not get a 1000px-tall map nobody asked for. */
@media (min-width: 1600px) {
    .guidebook-layout {
        grid-template-columns: minmax(0, 1fr) minmax(520px, 0.95fr);
    }
}

.guidebook-map-panel {
    min-width: 0;
    /* Sticky offset + a breath at the bottom, capped so it never exceeds the
       viewport and starts clipping its own controls. */
    height: clamp(460px, calc(100vh - 150px), 780px);
    position: sticky;
    /* 📐 يرسو **تحت شريط الأدوات**، لا على رقمٍ مكتوبٍ باليد.
       كان `78px` — وهو ٨ (رسوّ الشريط) + ٥٤ (ارتفاعه) + ١٦، ثلاثةُ أرقامٍ
       صحيحةٍ في لحظةٍ واحدة. وأولُ ما يلتفّ فيه الشريط سطرين — نافذةٌ ضيّقة،
       أو خطٌّ أكبر من إعدادات إمكانية الوصول، أو تسميةٌ عربية أطول — يصير
       الرقم أقصر من الشريط فتنزلق الخريطة تحته. `--zw-gb-toolbar-h` يقيسه
       ResizeObserver في guidebook.js، والقيمة الاحتياطية للمتصفّح الذي لا
       يملكه. */
    top: calc(var(--zw-gb-toolbar-h, 54px) + 16px);
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.9);
    border-radius: var(--radius-shadcn-lg);
    background: hsl(var(--card));
    box-shadow:
        0 24px 56px -12px rgb(0 0 0 / 0.55),
        0 0 0 1px hsl(var(--background) / 0.6) inset;
    isolation: isolate;
}

.guidebook-map {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 35% 28%, hsl(var(--primary) / 0.10), transparent 30%),
        linear-gradient(145deg, hsl(var(--secondary)), hsl(var(--background)) 72%);
}

/* Mapbox's dark-v11 still renders warmer than this palette. A light touch of
   correction seats it in the surrounding UI without washing out the labels. */
.guidebook-map .mapboxgl-canvas {
    filter: saturate(0.82) contrast(1.04) brightness(0.94);
}

/* Vignette so pins near the panel edge stay legible against bright map areas. */
.guidebook-map-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: 0 0 90px 24px hsl(var(--background) / 0.55) inset;
}

.guidebook-map.is-unavailable { opacity: 0.2; filter: saturate(0.5); }

.guidebook-map-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 13px;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.guidebook-map-panel.has-fallback .guidebook-map-overlay {
    opacity: 0;
    visibility: hidden;
}

.guidebook-map-badge {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(5, 17, 21, 0.76);
    color: rgba(245, 255, 251, 0.86);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.guidebook-map-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #8df4d2;
    box-shadow: 0 0 0 4px rgba(141, 244, 210, 0.12), 0 0 12px rgba(141, 244, 210, 0.78);
}

.guidebook-map-control {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(5, 17, 21, 0.8);
    color: rgba(240, 255, 249, 0.9);
    font: inherit;
    font-size: 19px;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.guidebook-map-control:hover {
    border-color: rgba(141, 244, 210, 0.58);
    background: rgba(48, 129, 110, 0.74);
    color: #fff;
}

.guidebook-map-fallback {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    background: linear-gradient(145deg, rgba(8, 24, 30, 0.95), rgba(8, 15, 20, 0.98));
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.guidebook-map-fallback[hidden] { display: none !important; }

.guidebook-fallback-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 5px;
    border: 1px solid rgba(112, 234, 200, 0.28);
    border-radius: 18px;
    background: rgba(112, 234, 200, 0.08);
    color: rgba(139, 243, 208, 0.86);
    font-size: 28px;
}

.guidebook-map-fallback strong { color: rgba(255, 255, 255, 0.95); font-size: 15px; }
.guidebook-map-fallback p { max-width: 280px; margin: 0; color: rgba(255, 255, 255, 0.56); font-size: 12px; line-height: 1.55; }

.guidebook-map-fallback button {
    min-height: 40px;
    margin-top: 7px;
    padding: 8px 14px;
    border: 1px solid rgba(112, 234, 200, 0.35);
    border-radius: 10px;
    background: rgba(112, 234, 200, 0.12);
    color: rgba(172, 255, 229, 0.92);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.guidebook-map-fallback button:hover { background: rgba(112, 234, 200, 0.2); }

/* Mapbox's own controls stay visible for attribution/compliance, but match
   the dark surface. Do not hide `.mapboxgl-ctrl-attrib`. */
.guidebook-map .mapboxgl-ctrl-group {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    background: rgba(5, 17, 21, 0.78);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25);
}

.guidebook-map .mapboxgl-ctrl-group button {
    width: 34px;
    height: 34px;
    background-color: transparent;
    filter: invert(1) saturate(0) brightness(1.8);
}

.guidebook-map .mapboxgl-ctrl-group button + button { border-top-color: rgba(255, 255, 255, 0.12); }
.guidebook-map .mapboxgl-ctrl-attrib {
    margin: 0 5px 5px 0;
    border-radius: 6px;
    background: rgba(5, 17, 21, 0.72);
    color: rgba(255, 255, 255, 0.7);
    font-size: 9px;
}

.guidebook-map .mapboxgl-ctrl-attrib a { color: rgba(190, 255, 233, 0.9); }

/* ── Results heading, cards, and empty/loading states ───────────────── */
.guidebook-results-column { min-width: 0; }

.guidebook-results-heading {
    min-height: 70px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 4px 2px 0;
}

.guidebook-results-heading h2 {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.96);
    font-size: clamp(20px, 2.1vw, 27px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.guidebook-results-count {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(112, 234, 200, 0.16);
    border-radius: 8px;
    background: rgba(112, 234, 200, 0.06);
    color: rgba(163, 247, 220, 0.76);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.guidebook-results-count:empty { display: none; }

.guidebook-status {
    min-height: 21px;
    margin: -3px 2px 9px;
    color: rgba(210, 239, 232, 0.64);
    font-size: 12px;
    line-height: 1.5;
}

.guidebook-status:empty { min-height: 0; margin-block: 0; }
.guidebook-status.is-error { color: #ffaaa8; }

.guidebook-live-events-note {
    min-height: 0;
    margin: -1px 2px 11px;
    color: rgba(179, 231, 218, 0.58);
    font-size: 10.5px;
    line-height: 1.5;
}

.guidebook-live-events-note[hidden] { display: none; }

.guidebook-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    min-width: 0;
}

.guidebook-card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.105);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(21, 38, 44, 0.78), rgba(10, 22, 29, 0.86));
    box-shadow: 0 9px 25px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.guidebook-card:hover {
    border-color: rgba(112, 234, 200, 0.4);
    background: linear-gradient(135deg, rgba(24, 51, 56, 0.88), rgba(10, 25, 31, 0.94));
    box-shadow: 0 15px 31px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(112, 234, 200, 0.05) inset;
}

.guidebook-card-open {
    width: 100%;
    min-height: 144px;
    display: grid;
    grid-template-columns: minmax(122px, 35%) minmax(0, 1fr) 25px;
    align-items: stretch;
    gap: 14px;
    padding: 9px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    font: inherit;
    cursor: pointer;
}

.guidebook-card-open:focus-visible {
    outline: 2px solid rgba(150, 255, 225, 0.95);
    outline-offset: -3px;
    border-radius: 14px;
}

.guidebook-card-media {
    min-width: 0;
    min-height: 124px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(141, 243, 211, 0.14);
    border-radius: 12px;
    background:
        radial-gradient(circle at 70% 22%, rgba(139, 243, 208, 0.23), transparent 25%),
        linear-gradient(145deg, #1c5352, #10262f 70%);
}

.guidebook-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.08), transparent 62%);
    opacity: 0.35;
}

.guidebook-card-media img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 420ms ease, filter 220ms ease;
}

.guidebook-card-open:hover .guidebook-card-media img { transform: scale(1.045); }
.guidebook-card-media img[alt=""] { opacity: 0.01; }
.guidebook-card-media.is-image-missing img { display: none; }

.guidebook-card-media-glyph {
    position: relative;
    z-index: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(183, 255, 231, 0.25);
    border-radius: 16px;
    background: rgba(4, 25, 27, 0.2);
    color: rgba(184, 255, 231, 0.9);
    font-size: 25px;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(4, 28, 25, 0.24);
}

.guidebook-card-media img ~ .guidebook-card-media-glyph { opacity: 0; }
.guidebook-card-media.is-image-missing .guidebook-card-media-glyph { opacity: 1; }

.guidebook-card-media.is-history,
.guidebook-card-media.is-historical,
.guidebook-card-media.is-culture { background: linear-gradient(145deg, #4b3d37, #1e2c32 72%); }
.guidebook-card-media.is-restaurants,
.guidebook-card-media.is-restaurant { background: linear-gradient(145deg, #5c3a2f, #1e2930 72%); }
.guidebook-card-media.is-coffee { background: linear-gradient(145deg, #493a2f, #1b2930 72%); }
.guidebook-card-media.is-events,
.guidebook-card-media.is-event { background: linear-gradient(145deg, #33406a, #182b39 72%); }

.guidebook-card-badges {
    position: absolute;
    z-index: 3;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: calc(100% - 16px);
}

.guidebook-badge {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7px;
    background: rgba(5, 16, 20, 0.72);
    color: rgba(246, 255, 251, 0.88);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.guidebook-badge.is-sponsored {
    border-color: rgba(246, 190, 95, 0.52);
    background: rgba(93, 59, 25, 0.78);
    color: #ffd994;
}

/* Keep provider attribution readable on the 94px mobile card artwork instead
   of truncating the provider name. The detail sheet retains the same wording. */
.guidebook-card-badges .guidebook-badge.is-provider {
    justify-content: center;
    overflow: visible;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
}

.guidebook-card-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 4px 0;
}

.guidebook-card-eyebrow {
    overflow: hidden;
    color: rgba(142, 241, 210, 0.69);
    font-size: 9px;
    letter-spacing: 0.09em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guidebook-card-title {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.96);
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guidebook-card-tagline {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(230, 245, 241, 0.62);
    font-size: 12px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.guidebook-card-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 9px;
    color: rgba(223, 243, 237, 0.5);
    font-size: 10px;
    line-height: 1.35;
}

.guidebook-card-meta > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guidebook-verified-inline {
    color: rgba(136, 237, 202, 0.72);
}

.guidebook-card-promotion {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: #f4cc7d;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guidebook-card-promotion > span:last-child { overflow: hidden; text-overflow: ellipsis; }

.guidebook-card-arrow {
    align-self: center;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(112, 234, 200, 0.15);
    border-radius: 8px;
    background: rgba(112, 234, 200, 0.055);
    color: rgba(168, 250, 224, 0.75);
    font-size: 21px;
    line-height: 1;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.guidebook-card-open:hover .guidebook-card-arrow {
    border-color: rgba(112, 234, 200, 0.42);
    background: rgba(112, 234, 200, 0.14);
    color: #fff;
}

.guidebook-empty {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px;
    border: 1px dashed rgba(112, 234, 200, 0.2);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.58);
    text-align: center;
}

.guidebook-empty-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    border-radius: 14px;
    background: rgba(112, 234, 200, 0.08);
    color: rgba(139, 243, 208, 0.78);
    font-size: 22px;
}

.guidebook-empty strong { color: rgba(255, 255, 255, 0.88); font-size: 14px; }
.guidebook-empty p { max-width: 310px; margin: 0; font-size: 12px; line-height: 1.55; }
.guidebook-empty button {
    min-height: 40px;
    margin-top: 4px;
    padding: 8px 14px;
    border: 1px solid rgba(112, 234, 200, 0.34);
    border-radius: 10px;
    background: rgba(112, 234, 200, 0.1);
    color: rgba(180, 255, 232, 0.9);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Skeleton state uses a contained shimmer so it does not flash over the
   entire page while the authenticated catalog/API handshake is in flight. */
.guidebook-card-skeleton {
    min-height: 144px;
    display: grid;
    grid-template-columns: minmax(122px, 35%) minmax(0, 1fr);
    gap: 14px;
    padding: 9px;
}

.guidebook-skeleton-media,
.guidebook-skeleton-copy i {
    display: block;
    border-radius: 10px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.045) 20%, rgba(148, 248, 219, 0.12) 42%, rgba(255, 255, 255, 0.045) 64%);
    background-size: 220% 100%;
    animation: zw-guidebook-shimmer 1.6s ease-in-out infinite;
}

.guidebook-skeleton-media { min-height: 124px; }
.guidebook-skeleton-copy { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.guidebook-skeleton-copy i { height: 11px; width: 88%; }
.guidebook-skeleton-copy i:nth-child(2) { width: 68%; height: 17px; }
.guidebook-skeleton-copy i:nth-child(3) { width: 96%; }

@keyframes zw-guidebook-shimmer { to { background-position: -220% 0; } }

/* ── Reusable loading skeleton (modals + side panels) ───────────────────
   Replaces the old plain "Loading…" text with an on-brand shimmer so waits
   feel intentional. Reuses zw-guidebook-shimmer. JS swaps in real content. */
.zw-loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0 4px;
}
.zw-skel {
    display: block;
    height: 14px;
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.045) 20%, rgba(148, 248, 219, 0.12) 42%, rgba(255, 255, 255, 0.045) 64%);
    background-size: 220% 100%;
    animation: zw-guidebook-shimmer 1.6s ease-in-out infinite;
}
.zw-skel.zw-skel-block { height: 78px; border-radius: 14px; }
.zw-skel.zw-skel-tall { height: 56px; border-radius: 12px; }
.zw-skel.w-40 { width: 40%; }
.zw-skel.w-55 { width: 55%; }
.zw-skel.w-70 { width: 70%; }
.zw-skel.w-85 { width: 85%; }
.zw-loading-row { display: flex; align-items: center; gap: 12px; }
.zw-loading-row .zw-skel-dot {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.045) 20%, rgba(148, 248, 219, 0.12) 42%, rgba(255, 255, 255, 0.045) 64%);
    background-size: 220% 100%;
    animation: zw-guidebook-shimmer 1.6s ease-in-out infinite;
}
.zw-loading-row .zw-skel-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
html.zw-reduced-motion .zw-skel,
html.zw-reduced-motion .zw-loading-row .zw-skel-dot { animation: none; }

/* ── Guest review funnel (in-chat rating → public review / private feedback) ── */
.zw-review-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}
.zw-review-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid rgba(112, 234, 200, 0.22);
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(23, 55, 61, 0.5), rgba(10, 22, 28, 0.72));
    color: rgba(239, 255, 249, 0.9);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: start;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.zw-review-btn:hover,
.zw-review-btn:focus-visible {
    outline: none;
    transform: translateY(-1px);
    border-color: rgba(141, 245, 214, 0.55);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 0 20px rgba(79, 213, 174, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.zw-review-ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}
.zw-review-arrow {
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: grid;
    place-items: center;
    color: rgba(141, 245, 214, 0.6);
    transition: color 180ms ease, transform 180ms ease;
}
.zw-review-btn:hover .zw-review-arrow { color: rgba(141, 245, 214, 0.95); transform: translate(2px, -2px); }
[dir="rtl"] .zw-review-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .zw-review-btn:hover .zw-review-arrow { transform: translate(-2px, -2px); }
/* Per-platform accents */
.zw-review-google .zw-review-ic  { background: rgba(66, 133, 244, 0.16); color: #7fb0ff; }
.zw-review-booking .zw-review-ic { background: rgba(0, 113, 194, 0.18); color: #6ab7ff; }
.zw-review-tripadvisor .zw-review-ic { background: rgba(52, 224, 161, 0.14); color: #4fe0a1; }
.zw-review-private {
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.82);
}
.zw-review-private:hover,
.zw-review-private:focus-visible { border-color: rgba(255, 255, 255, 0.22); box-shadow: none; }

/* ── Map markers ────────────────────────────────────────────────────── */
/* Mapbox positions marker elements with an inline transform. Never set a
   transform on the marker itself; the small tail uses a pseudo-element. */
/* ── Map pins ────────────────────────────────────────────────────────────
   Every pin used to be the same green circle, so 23 of them on a dark map
   read as noise — you could not tell a museum from a go-kart track without
   clicking. Each category now carries its own hue via --pin, and the pin is
   smaller and tighter so overlapping clusters stay legible.

   --pin is the fill; --pin-ink is the glyph colour that sits on it. Both are
   set by the .is-<category> rules below and inherited by ::after, so a new
   category needs one rule, not four. */
.guidebook-marker,
.guidebook-hotel-marker {
    --pin: #2f9e79;
    --pin-ink: #04211a;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    position: relative;
    border: 2px solid hsl(0 0% 100% / 0.92);
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    background: var(--pin);
    color: var(--pin-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        0 3px 10px rgb(0 0 0 / 0.5),
        0 0 0 3px color-mix(in srgb, var(--pin) 26%, transparent);
    isolation: isolate;
    transition: transform 160ms cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 160ms ease, border-color 160ms ease;
}

/* Tail. Inherits --pin, and is masked to a triangle rather than a rotated
   square so it meets the circle cleanly instead of showing corner seams. */
.guidebook-marker::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 11px;
    height: 8px;
    inset-block-end: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pin);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    filter: drop-shadow(0 1px 0 hsl(0 0% 100% / 0.55));
}

/* Category hues. Chosen to stay distinct against Mapbox dark-v11 and to keep
   contrast with --pin-ink above 4.5:1 for the glyph. */
.guidebook-marker.is-landmarks     { --pin: #e0a44a; --pin-ink: #2a1803; }
.guidebook-marker.is-culture       { --pin: #a98bf5; --pin-ink: #170a33; }
.guidebook-marker.is-eat-shop      { --pin: #f2836f; --pin-ink: #33100a; }
.guidebook-marker.is-outdoors      { --pin: #55cf7f; --pin-ink: #062615; }
.guidebook-marker.is-entertainment { --pin: #46b6e8; --pin-ink: #04202e; }

/* Hover/focus lifts the pin and brings it above its neighbours — essential
   where the central Riyadh cluster overlaps. */
.guidebook-marker:hover,
.guidebook-marker:focus-visible {
    z-index: 5;
    border-color: #fff;
    transform: translateY(-3px) scale(1.09);
    box-shadow:
        0 8px 18px rgb(0 0 0 / 0.55),
        0 0 0 6px color-mix(in srgb, var(--pin) 34%, transparent);
}

/* A featured place earns a slightly larger pin rather than a different colour,
   so the category hue stays the one thing colour encodes. */
.guidebook-marker.is-featured {
    width: 37px;
    height: 37px;
}

@media (prefers-reduced-motion: reduce) {
    .guidebook-marker { transition: box-shadow 160ms ease, border-color 160ms ease; }
    .guidebook-marker:hover,
    .guidebook-marker:focus-visible { transform: none; }
}

/* Sponsored and provider pins override the category hue on purpose: "who is
   telling you this" outranks "what kind of place it is". They go through --pin
   so the tail, halo and hover state follow automatically. */
.guidebook-marker.is-sponsored {
    --pin: #e0a44a;
    --pin-ink: #291607;
    border-color: #ffe2a0;
}

.guidebook-marker.is-provider {
    --pin: #6ba6f2;
    --pin-ink: #071a32;
    border-color: #b3d5ff;
}

/* ── 📍 دبوس «أنت هنا» ───────────────────────────────────────────────────
   كان مربّعاً يحمل حرف «H»: لا يقول إنه فندقك، ولا إنه موقعك، والحرف اللاتيني
   المفرد لا يعني شيئاً لقارئ عربي. الآن أيقونة موقع + لصيقة دائمة باسم الفندق،
   والحلقة النابضة هي العرف المتّفق عليه لـ«أنت هنا».

   ⚠️ Mapbox يضع تحويلاً (transform) داخليّاً على عنصر الدبوس — فلا transform
      هنا إطلاقاً، واللصيقة تُوضَع بالتموضع المطلق لا بالإزاحة. */
.guidebook-hotel-marker {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg, #f7d58d, #ba7a38);
    color: #27180b;
    box-shadow: 0 0 0 5px rgba(247, 213, 141, 0.18), 0 8px 20px rgba(0, 0, 0, 0.42);
    /* اللصيقة تخرج من حدود الدبوس عمداً؛ overflow المرئي شرطُ ظهورها. */
    overflow: visible;
    /* The property pin is a primary control, not map decoration. Mapbox puts
       all markers in one pane, so give it a stable layer above venue pins. */
    z-index: 10;
}
.guidebook-hotel-pin {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
}
.guidebook-hotel-pin svg { width: 21px; height: 21px; }

.guidebook-hotel-tag {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 50%;
    /* التمركز الأفقي باستعمال هامش سالب لا translateX: التحويل محجوز لـMapbox
       على العنصر الأب، وأي تحويل على اللصيقة نفسها آمن — لكن نُبقيها بلا
       تحويل كي تظلّ الحدود قابلة للحساب مع النصّ متغيّر الطول. */
    transform: translateX(-50%);
    max-width: 168px;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(9, 17, 24, 0.92);
    border: 0.8px solid rgba(247, 213, 141, 0.34);
    color: rgba(255, 240, 220, 0.95);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
/* اسم الفندق قد يكون لاتينياً في واجهة عربية — نعزله بيديّاً. */
.guidebook-hotel-tag { unicode-bidi: isolate; }

.guidebook-hotel-marker::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(247, 213, 141, 0.48);
    border-radius: 18px;
    animation: zw-guidebook-hotel-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .guidebook-hotel-marker::after { animation: none; opacity: 0.75; }
}

@keyframes zw-guidebook-hotel-pulse {
    0%, 100% { opacity: 0.8; transform: scale(0.88); }
    65% { opacity: 0; transform: scale(1.18); }
}

/* ── 📍 نافذة «أنت هنا» فوق دبوس الفندق ─────────────────────────────────
   نافذة Mapbox الافتراضية بيضاء بحوافّ حادّة — نقيضُ كلّ شيء آخر في هذا
   السطح. نُلبسها زجاج المنصّة نفسه ونُلوّن السهم معها، وإلا ظهر مثلّث
   أبيض معلَّقاً تحت لوح داكن. */
.guidebook-here-popup-shell .mapboxgl-popup-content {
    padding: 13px 15px;
    border-radius: 14px;
    background: rgba(9, 17, 24, 0.94);
    border: 0.8px solid rgba(247, 213, 141, 0.28);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.guidebook-here-popup-shell .mapboxgl-popup-tip {
    border-top-color: rgba(9, 17, 24, 0.94);
    border-bottom-color: rgba(9, 17, 24, 0.94);
    border-left-color: rgba(9, 17, 24, 0.94);
    border-right-color: rgba(9, 17, 24, 0.94);
}
.guidebook-here-popup-shell .mapboxgl-popup-close-button {
    color: rgba(255, 255, 255, 0.5);
    font-size: 17px;
    padding: 2px 7px 4px;
    background: none;
}
.guidebook-here-popup-shell .mapboxgl-popup-close-button:hover {
    color: rgba(255, 255, 255, 0.9);
    background: none;
}
.guidebook-here-popup {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.guidebook-here-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: rgba(247, 213, 141, 0.9);
}
.guidebook-here-title {
    font-size: 14.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1.25;
}
.guidebook-here-address {
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.52);
}
/* عنوان لاتيني داخل واجهة عربية: العزل البيديّ يمنع قفز رقم المبنى إلى
   آخر السطر، والمحاذاة تبقى مع اتجاه النافذة. */
[dir="rtl"] .guidebook-here-address {
    unicode-bidi: isolate;
    text-align: right;
}

/* ── Detail drawer / mobile bottom sheet ────────────────────────────── */
.guidebook-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    background: rgba(0, 5, 9, 0.72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.guidebook-detail-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.guidebook-detail-sheet {
    width: min(610px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-inline-start: 1px solid rgba(112, 234, 200, 0.24);
    background: linear-gradient(160deg, #13282e 0%, #0a151d 47%, #081118 100%);
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.035);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.guidebook-detail-overlay.is-open .guidebook-detail-sheet { transform: translateX(0); }

.guidebook-detail-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 4;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(4, 14, 18, 0.72);
    color: rgba(255, 255, 255, 0.86);
    font: inherit;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 180ms ease, border-color 180ms ease;
}

.guidebook-detail-close:hover { border-color: rgba(141, 244, 210, 0.6); background: rgba(45, 133, 113, 0.74); }

.guidebook-detail-media {
    height: 270px;
    min-height: 270px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #1a4c4d, #112934 70%);
}

.guidebook-detail-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3, 11, 15, 0.04) 30%, rgba(3, 11, 15, 0.84) 100%);
}

.guidebook-detail-image-wrap {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 70% 20%, rgba(139, 243, 208, 0.2), transparent 27%),
        linear-gradient(145deg, #1a4c4d, #0c202b 72%);
}

.guidebook-detail-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.guidebook-detail-image-wrap img + .guidebook-detail-image-glyph { opacity: 0; }
.guidebook-detail-image-wrap.is-image-missing img { display: none; }
.guidebook-detail-image-wrap.is-image-missing .guidebook-detail-image-glyph { opacity: 1; }

.guidebook-detail-image-glyph {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(190, 255, 233, 0.28);
    border-radius: 22px;
    background: rgba(6, 25, 28, 0.26);
    color: rgba(190, 255, 233, 0.9);
    font-size: 35px;
}

.guidebook-detail-badges {
    position: absolute;
    z-index: 2;
    inset-block-end: 18px;
    inset-inline-start: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 80px);
}

.guidebook-detail-content {
    min-width: 0;
    padding: 25px clamp(20px, 4vw, 36px) 42px;
}

.guidebook-detail-content h2 {
    margin: 7px 0 5px;
    color: rgba(255, 255, 255, 0.98);
    font-size: clamp(25px, 3vw, 35px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.guidebook-detail-tagline {
    margin: 0;
    color: rgba(226, 245, 239, 0.68);
    font-size: 14px;
    line-height: 1.6;
}

.guidebook-detail-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 17px 0 19px;
    padding: 9px 11px;
    border: 1px solid rgba(112, 234, 200, 0.17);
    border-radius: 10px;
    background: rgba(112, 234, 200, 0.055);
    color: rgba(175, 247, 224, 0.76);
    font-size: 11px;
    line-height: 1.4;
}

.guidebook-detail-trust > span:first-child {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(112, 234, 200, 0.16);
    color: #9af5d6;
    font-size: 12px;
    font-weight: 900;
}

.guidebook-detail-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 20px;
}

.guidebook-detail-facts > div {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.032);
}

.guidebook-detail-facts > div > span {
    flex: 0 0 auto;
    color: rgba(139, 243, 208, 0.84);
    font-size: 15px;
    line-height: 1.2;
}

.guidebook-detail-facts p { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.guidebook-detail-facts small { color: rgba(255, 255, 255, 0.44); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.guidebook-detail-facts strong { overflow: hidden; color: rgba(245, 255, 251, 0.84); font-size: 11px; font-weight: 600; line-height: 1.45; text-overflow: ellipsis; }

.guidebook-detail-promotion {
    margin: 0 0 19px;
    padding: 15px 16px;
    border: 1px solid rgba(247, 205, 120, 0.35);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(104, 71, 31, 0.34), rgba(83, 53, 26, 0.14));
    box-shadow: inset 0 1px 0 rgba(255, 230, 167, 0.08);
}

.guidebook-detail-promotion .guidebook-promo-kicker { color: #f5d28b; }
.guidebook-detail-promotion strong { display: block; margin-top: 6px; color: #ffe3a6; font-size: 15px; }
.guidebook-detail-promotion p { margin: 4px 0 0; color: rgba(255, 237, 196, 0.68); font-size: 12px; line-height: 1.5; }
.guidebook-detail-promotion code { display: inline-block; margin-top: 10px; padding: 5px 8px; border: 1px dashed rgba(255, 220, 145, 0.45); border-radius: 7px; color: #ffdf99; font-size: 11px; letter-spacing: 0.08em; }

.guidebook-detail-description {
    color: rgba(234, 248, 243, 0.74);
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-line;
}

.guidebook-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 17px 0 20px;
}

.guidebook-detail-tags[hidden] { display: none; }
.guidebook-detail-tags span { padding: 6px 9px; border: 1px solid rgba(112, 234, 200, 0.17); border-radius: 999px; background: rgba(112, 234, 200, 0.055); color: rgba(170, 248, 224, 0.72); font-size: 10px; }

.guidebook-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.guidebook-ask-button,
.guidebook-secondary-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 13px;
    border-radius: 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.guidebook-ask-button {
    flex: 1 1 210px;
    border: 1px solid rgba(176, 255, 230, 0.55);
    background: linear-gradient(135deg, rgba(112, 234, 200, 0.96), rgba(63, 184, 142, 0.9));
    color: #062018;
    box-shadow: 0 8px 20px rgba(40, 171, 130, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.guidebook-ask-button:hover { background: linear-gradient(135deg, #9af6d7, #58ca9e); box-shadow: 0 10px 24px rgba(40, 171, 130, 0.28); }
.guidebook-secondary-action { flex: 0 1 auto; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: rgba(238, 252, 247, 0.76); }
.guidebook-secondary-action:hover { border-color: rgba(112, 234, 200, 0.42); background: rgba(112, 234, 200, 0.09); color: #fff; }
.guidebook-secondary-action[hidden] { display: none; }

.guidebook-sponsored-note {
    margin: 18px 0 0;
    color: rgba(255, 216, 151, 0.62);
    font-size: 10px;
    line-height: 1.5;
}

.guidebook-sponsored-note[hidden] { display: none; }

.guidebook-provider-note {
    margin: 15px 0 0;
    padding: 9px 11px;
    border-inline-start: 2px solid rgba(131, 181, 245, 0.58);
    border-radius: 0 8px 8px 0;
    background: rgba(72, 123, 191, 0.08);
    color: rgba(190, 218, 250, 0.68);
    font-size: 10.5px;
    line-height: 1.55;
}

.guidebook-provider-note[hidden] { display: none; }

/* ── Grounded Guidebook AI prompt ───────────────────────────────────── */
.guidebook-ai-panel {
    display: block;
    margin-top: 22px;
    padding: 15px;
    border: 1px solid rgba(112, 234, 200, 0.22);
    border-radius: 15px;
    background:
        radial-gradient(circle at 94% 0%, rgba(112, 234, 200, 0.11), transparent 36%),
        rgba(112, 234, 200, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.guidebook-ai-panel[hidden] { display: none !important; }

.guidebook-ai-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.guidebook-ai-heading > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(143, 246, 216, 0.36);
    border-radius: 9px;
    background: rgba(112, 234, 200, 0.1);
    color: rgba(174, 255, 229, 0.9);
    font-size: 15px;
    line-height: 1;
}

.guidebook-ai-heading p {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.guidebook-ai-heading strong {
    color: rgba(242, 255, 250, 0.94);
    font-size: 13px;
    line-height: 1.25;
}

.guidebook-ai-heading small {
    color: rgba(212, 241, 232, 0.53);
    font-size: 10.5px;
    line-height: 1.45;
}

.guidebook-ai-input-row {
    display: flex;
    align-items: stretch;
    gap: 7px;
}

.guidebook-ai-input {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    outline: 0;
    background: rgba(0, 0, 0, 0.24);
    color: rgba(255, 255, 255, 0.92);
    font: inherit;
    font-size: 12px;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.guidebook-ai-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.guidebook-ai-input:focus { border-color: rgba(112, 234, 200, 0.58); background: rgba(0, 0, 0, 0.34); box-shadow: 0 0 0 3px rgba(112, 234, 200, 0.1); }

.guidebook-ai-submit {
    min-width: 62px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(174, 255, 229, 0.48);
    border-radius: 10px;
    background: rgba(112, 234, 200, 0.2);
    color: rgba(191, 255, 234, 0.94);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.guidebook-ai-submit:hover:not(:disabled) { border-color: rgba(174, 255, 229, 0.78); background: rgba(112, 234, 200, 0.34); }
.guidebook-ai-submit:disabled { cursor: wait; opacity: 0.5; }

.guidebook-ai-answer {
    display: none;
    margin-top: 11px;
    padding: 10px 11px;
    border-inline-start: 2px solid rgba(112, 234, 200, 0.55);
    border-radius: 0 9px 9px 0;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(237, 252, 246, 0.82);
    font-size: 12px;
    line-height: 1.65;
    white-space: pre-line;
}

.guidebook-ai-answer:not(:empty) { display: block; }
.guidebook-ai-answer.is-loading { color: rgba(169, 247, 222, 0.68); }
.guidebook-ai-answer.is-error { border-inline-start-color: rgba(255, 137, 137, 0.66); color: #ffb2b2; }

/* ── Helpful feedback ───────────────────────────────────────────────── */
.guidebook-feedback-prompt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 24px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(220, 241, 235, 0.54);
    font-size: 11px;
    line-height: 1.4;
}

.guidebook-feedback-prompt > div {
    display: inline-flex;
    gap: 5px;
    margin-inline-start: auto;
}

.guidebook-feedback-prompt button {
    width: 34px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(228, 250, 242, 0.75);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.guidebook-feedback-prompt button:hover:not(:disabled),
.guidebook-feedback-prompt.is-complete button {
    border-color: rgba(112, 234, 200, 0.42);
    background: rgba(112, 234, 200, 0.1);
    color: rgba(175, 255, 229, 0.95);
}

.guidebook-feedback-prompt button:disabled { cursor: default; opacity: 0.46; }
.guidebook-feedback-prompt small { flex: 1 0 100%; color: rgba(146, 241, 207, 0.7); font-size: 10px; }

@media (max-width: 520px) {
    .guidebook-ai-input-row { flex-direction: column; }
    .guidebook-ai-submit { width: 100%; }
    .guidebook-feedback-prompt > div { margin-inline-start: 0; }
}

/* ── Trust footer ───────────────────────────────────────────────────── */
.guidebook-trust-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 900px;
    margin: 20px auto 0;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    color: rgba(216, 239, 233, 0.48);
    font-size: 10px;
    line-height: 1.55;
    text-align: center;
}

.guidebook-trust-icon {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(112, 234, 200, 0.1);
    color: rgba(139, 243, 208, 0.82);
    font-size: 11px;
    font-weight: 900;
}

/* ── Responsive layout ──────────────────────────────────────────────── */
@media (max-width: 1120px) {
    .guidebook-layout { grid-template-columns: 1fr; }
    .guidebook-map-panel {
        position: relative;
        top: auto;
        height: clamp(330px, 48vw, 455px);
    }
    .guidebook-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .welcome-prompts {
        margin-bottom: 18px;
        padding: 0 14px;
    }
    .welcome-prompts-list { grid-template-columns: 1fr; gap: 8px; }
    .welcome-prompt { min-height: 56px; padding: 11px 12px; gap: 11px; }
    .welcome-prompt-icon { width: 34px; height: 34px; border-radius: 10px; }
    .welcome-prompt-icon svg { width: 17px; height: 17px; }
    .welcome-prompt-label { font-size: 13px; }
    /* Actions stay 3-up on mobile — they are the discovery payload of the
       empty state and must be reachable without scrolling. */
    .welcome-prompts-heading-spaced { margin-top: 16px; }
    .welcome-actions-list { gap: 8px; }
    .welcome-action { min-height: 76px; padding: 10px 6px; gap: 7px; }
    .welcome-action-icon { width: 30px; height: 30px; border-radius: 10px; }
    .welcome-action-icon svg { width: 16px; height: 16px; }
    .welcome-action-label { font-size: 11px; }
    .zawaya-mode-tab { min-height: 34px; padding-inline: 9px; font-size: 12px; }
    .zawaya-mode-icon { width: 18px; height: 18px; font-size: 13px; }
    .guidebook-shell { padding: 0 10px 38px; }
    .guidebook-hero {
        min-height: 175px;
        grid-template-columns: minmax(0, 1fr) 92px;
        gap: 8px;
        padding: 23px 18px;
        border-radius: 19px;
    }
    .guidebook-hero h1 { font-size: clamp(24px, 7vw, 34px); }
    .guidebook-hero-copy > p { font-size: 12px; line-height: 1.55; }
    .guidebook-hero-mark { width: 90px; height: 90px; }
    .guidebook-hero-glyph { width: 36px; height: 36px; border-radius: 11px; font-size: 21px; }
    .guidebook-orbit.orbit-one { inset: 12px 17px; }
    .guidebook-orbit.orbit-two { inset: 20px 7px; }
    /* 📱 وعلى الجوال كذلك يرسو على الحافّة. الشقّ هنا كان أوسع: السطح يبدأ
       تحت الترويسة المثبّتة بعشرة بكسلات، و`top:4px` تضيف أربعة — فأربعةَ
       عشرَ بكسلاً من المحتوى تمرّ ظاهرةً بين طبقتَي زجاج. الرفّ أعلاه
       (`::before`, top:-12px) يبتلعها. */
    .guidebook-toolbar { top: 0; }
    .guidebook-filter-button { width: 44px; padding: 0; }
    .guidebook-filter-button .consent-en,
    .guidebook-filter-button .consent-ar { display: none; }
    .guidebook-map-toggle { display: inline-flex; }
    .guidebook-map-panel { display: none; }
    .guidebook-map-panel.is-mobile-open { display: block; }
    .guidebook-map-panel { height: clamp(235px, 62vw, 320px); min-height: 235px; border-radius: 17px; }
    .guidebook-list { grid-template-columns: 1fr; }
    .guidebook-card-open { grid-template-columns: 112px minmax(0, 1fr) 24px; gap: 11px; min-height: 132px; padding: 8px; }
    .guidebook-card-media { min-height: 114px; border-radius: 10px; }
    .guidebook-card-title { font-size: 15px; }
    .guidebook-card-tagline { font-size: 11px; }
    .guidebook-card-meta { font-size: 9px; }
    .guidebook-card-promotion { font-size: 9.5px; }
    .guidebook-detail-sheet {
        width: 100%;
        height: auto;
        max-height: 94dvh;
        border-inline-start: 0;
        border-block-start: 1px solid rgba(112, 234, 200, 0.25);
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }
    .guidebook-detail-overlay { align-items: flex-end; justify-content: center; }
    .guidebook-detail-overlay.is-open .guidebook-detail-sheet { transform: translateY(0); }
    .guidebook-detail-media { height: min(230px, 54vw); min-height: 190px; }
    .guidebook-detail-content { padding: 21px 18px 34px; }
    .guidebook-detail-content h2 { font-size: 27px; }
    .guidebook-detail-facts { grid-template-columns: 1fr; gap: 7px; }
    .guidebook-detail-facts > div { padding: 9px 10px; }
    .guidebook-detail-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .guidebook-ask-button { grid-column: 1 / -1; }
    .guidebook-secondary-action { width: 100%; }
    .guidebook-trust-footer { align-items: flex-start; text-align: start; }
}

@media (max-width: 420px) {
    .guidebook-hero { grid-template-columns: 1fr; }
    .guidebook-hero-mark { display: none; }
    .guidebook-search kbd { display: none; }
    .guidebook-card-open { grid-template-columns: 94px minmax(0, 1fr) 22px; gap: 9px; }
    .guidebook-card-media { min-height: 108px; }
    .guidebook-badge { font-size: 8px; padding-inline: 5px; }
    .guidebook-card-meta > span:first-child { max-width: 100%; }
}

/* ── RTL + accessibility ───────────────────────────────────────────── */
[dir="rtl"] .guidebook-hero h1,
[dir="rtl"] .guidebook-hero-copy > p,
[dir="rtl"] .guidebook-results-heading,
[dir="rtl"] .guidebook-detail-content,
[dir="rtl"] .guidebook-card-open { text-align: right; }

[dir="rtl"] .guidebook-card-arrow { transform: scaleX(-1); }
[dir="rtl"] .welcome-prompt-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .welcome-prompt:hover .welcome-prompt-arrow,
[dir="rtl"] .welcome-prompt:focus-visible .welcome-prompt-arrow { transform: translate(-2px, -2px); }
[dir="rtl"] .guidebook-detail-sheet { transform: translateX(-100%); }
[dir="rtl"] .guidebook-detail-overlay.is-open .guidebook-detail-sheet { transform: translateX(0); }
[dir="rtl"] .guidebook-detail-sheet { box-shadow: 24px 0 70px rgba(0, 0, 0, 0.4), inset -1px 0 0 rgba(255, 255, 255, 0.035); }

/* The mobile sheet slides vertically in both writing directions.  Keep the
   RTL desktop off-canvas rule above from overriding that bottom-sheet motion. */
@media (max-width: 760px) {
    [dir="ltr"] .guidebook-detail-sheet,
    [dir="rtl"] .guidebook-detail-sheet { transform: translateY(100%); }
    [dir="ltr"] .guidebook-detail-overlay.is-open .guidebook-detail-sheet,
    [dir="rtl"] .guidebook-detail-overlay.is-open .guidebook-detail-sheet { transform: translateY(0); }
    [dir="rtl"] .guidebook-detail-sheet { box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.035); }
}

[dir="rtl"] .guidebook-card-eyebrow,
[dir="rtl"] .guidebook-results-kicker,
[dir="rtl"] .guidebook-detail-eyebrow,
[dir="rtl"] .guidebook-promo-kicker { letter-spacing: 0; }
[dir="rtl"] .guidebook-ai-answer { border-radius: 9px 0 0 9px; }

[dir="rtl"] .guidebook-map .mapboxgl-ctrl-attrib { margin-inline: 0 5px; }

html.zw-large-text .guidebook-surface { font-size: 1.08em; }
html.zw-high-contrast .zawaya-mode-switch,
html.zw-high-contrast .guidebook-card,
html.zw-high-contrast .guidebook-map-panel,
html.zw-high-contrast .guidebook-detail-sheet { border-color: rgba(255, 255, 255, 0.55); }
html.zw-high-contrast .guidebook-card-tagline,
html.zw-high-contrast .guidebook-card-meta,
html.zw-high-contrast .guidebook-detail-tagline,
html.zw-high-contrast .guidebook-detail-description { color: rgba(255, 255, 255, 0.84); }

@media (prefers-reduced-motion: reduce) {
    .guidebook-surface *,
    .guidebook-surface *::before,
    .guidebook-surface *::after,
    .guidebook-detail-overlay,
    .guidebook-detail-sheet { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

html.zw-reduced-motion .guidebook-surface *,
html.zw-reduced-motion .guidebook-surface *::before,
html.zw-reduced-motion .guidebook-surface *::after,
html.zw-reduced-motion .guidebook-detail-overlay,
html.zw-reduced-motion .guidebook-detail-sheet { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }

@media (forced-colors: active) {
    .zawaya-mode-tab,
    .guidebook-category-chip,
    .guidebook-card,
    .guidebook-filter-button,
    .guidebook-map-control,
    .guidebook-detail-close,
    .guidebook-ask-button,
    .guidebook-secondary-action { border: 1px solid ButtonText; }
    .zawaya-mode-tab.is-active,
    .guidebook-category-chip.is-active { background: Highlight; color: HighlightText; }
    .guidebook-card-open:focus-visible { outline: 2px solid Highlight; }
}

/* ════════════════════════════════════════════════════════════════════
   R10.9 chat composer & message UX
   — Stop-generation control, copy action, jump-to-latest pill, and the
     desktop input-bar fade (mobile already had one).
   ════════════════════════════════════════════════════════════════════ */

/* Stop control — the action button while a reply is generating */
.action-btn[data-mode="stop"] {
    background: rgba(239, 68, 68, 0.16);
    border: 1.5px solid rgba(239, 68, 68, 0.42);
    animation: zw-stop-breathe 1.8s ease-in-out infinite;
}

.action-btn[data-mode="stop"]:hover {
    background: rgba(239, 68, 68, 0.28);
    transform: scale(1.05);
}

/* The stop glyph is a filled square — beat the generic
   `.action-btn .send-icon svg { stroke: currentColor; fill: none; }` rule. */
.action-btn .send-icon.stop-icon svg {
    fill: rgba(255, 255, 255, 0.95);
    stroke: none;
}

@keyframes zw-stop-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Copy + report action row under AI replies */
.ai-msg-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Copy shares the report pill look but hovers teal, not red */
.ai-copy-btn:hover {
    color: rgba(94, 201, 160, 0.9);
    border-color: rgba(94, 201, 160, 0.35);
    background: rgba(94, 201, 160, 0.06);
}

/* Jump-to-latest pill — appears when the guest scrolls up mid-reply.
   Anchored inside the fixed input bar's wrapper, floating just above it. */
.jump-to-latest {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(8px);
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(112, 234, 200, 0.35);
    background: rgba(10, 24, 28, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.92);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 12px rgba(112, 234, 200, 0.12);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.jump-to-latest.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.jump-to-latest:hover {
    border-color: rgba(112, 234, 200, 0.6);
    background: rgba(14, 32, 36, 0.96);
}

.jump-to-latest svg {
    width: 14px;
    height: 14px;
}


/* Desktop input-bar fade: messages scrolling under the floating input bar
   used to collide with the beta disclaimer text on a fully transparent
   background (mobile already fades). Same app background, zero → opaque. */
.chat-input-bar.bottom {
    background: linear-gradient(to bottom,
        rgba(8, 15, 20, 0) 0%,
        rgba(8, 15, 20, 0.82) 42%,
        rgba(8, 15, 20, 0.96) 100%);
}

/* ══════════════════════════════════════════════════════════════
   APP HEADER — responsive tuning (brand → logo → chips collapse)
═══════════════════════════════════════════════════════════════ */
/* 📌 على الجوال: الترويسة **مثبّتة**، لا لاصقة.
 *
 * شريط «المساعد / الدليل» هو تنقّل التطبيق كلّه. وكان `position: sticky`،
 * وهو التصاقٌ **مشروط**: يلتصق بأقرب حاوية تمرير، ويعمل ما دامت أطوال
 * التخطيط متطابقة مع المرئي. وعلى جوالٍ حقيقي ينكسر الشرطان معاً:
 *
 *   • `body{overflow:hidden}` في وضع المحادثة يجعل الجسم حاوية تمرير (لأن
 *     `html` عليه `overflow-x: clip` فلا يُنقل تدبيره إلى نافذة العرض).
 *     فمرجع الالتصاق يصير الجسمَ لا الشاشة.
 *   • ثم يُمرّر المتصفّح نفسُه الصفحةَ ليلاحق حقلَ الإدخال عند فتح لوحة
 *     المفاتيح — وهو تمريرٌ لا يملكه المستخدم ولا يستطيع التراجع عنه، لأن
 *     `overflow:hidden` منعه من السحب.
 *
 * النتيجة كما وصفها النزلاء: الشريط يختفي فوق حافة الشاشة، ولا سبيل لرؤيته
 * إلا بالزوم أوت. وقد شُحنت من قبل معالجةُ ارتفاعٍ (`100svh`) على فرض أن
 * السبب طولُ التخطيط وحده، فلم تُنهِ العطل.
 *
 * `fixed` تُسقط الشرطين معاً: لا مرجع تمرير تفقده، ولا تخطيط يدفعها. أياً
 * كان ما يمرّر الصفحة، يبقى الشريط في مكانه.
 *
 * ثلاثة تفاصيل تجعلها صحيحة لا مجرّد «مثبّتة»:
 *   1. `--zw-header-h` يحجز ارتفاعها في `.app-layout` كي لا تغطّي أول رسالة
 *      (يقيسه ResizeObserver — الارتفاع يتغيّر بتبديل اللغة وحجم الخط).
 *   2. `--zw-header-top` يتبع `visualViewport.offsetTop`: في iOS تُثبَّت
 *      العناصر على الإطار **التخطيطي**، فإن رفع المتصفّح الصفحة للوحة
 *      المفاتيح ارتفعت الترويسة معها خارج الرؤية. الإزاحة تُعيدها.
 *   3. تدرّجٌ يخفت لأسفل بدل حافّة صلبة، و`pointer-events` تمرّ من الفراغ
 *      إلى الرسائل تحته — فالشريط لا يسرق لمسةً ليست له.
 */
@media (max-width: 768px) {
    .app-header {
        position: fixed;
        top: var(--zw-header-top, 0px);
        inset-inline: 0;
        margin: 0;
        gap: 8px;
        /* ⚠️ والحشوة الجانبية تحترم النتوء الآن فعلاً.
         *
         *    `env(safe-area-inset-*)` كانت مكتوبةً هنا منذ البداية وتُحلّ إلى
         *    **صفر دائماً**: الوسم لم يكن يحمل `viewport-fit=cover`، وبدونه
         *    لا يُعطي المتصفّح هذه القيم أصلاً. فكانت المعالجة موجودةً في
         *    الشيفرة وغائبةً عن الشاشة.
         *
         *    وبعد أن صارت تعمل، الجانبان يلزمان مع الأعلى: في الوضع الأفقي
         *    على جهازٍ ذي قصّة، الصفر الجانبي يضع «المساعد/الدليل» تحتها. */
        padding: calc(env(safe-area-inset-top, 0px) + 9px)
                 max(12px, env(safe-area-inset-right, 0px))
                 10px
                 max(12px, env(safe-area-inset-left, 0px));
        z-index: 1000;
        /* 🩹 الشريط **معتم بطوله**، والتدرّج تحته لا داخله.
         *
         *    أول صياغة جعلت خلفيته تدرّجاً يخفت إلى الشفافية الكاملة عند حافّته
         *    السفلى — أي أن أسفل الشريط، حيث يجلس زرّا «المساعد/الدليل» تحديداً،
         *    كان شفّافاً. فالمحتوى المارّ تحته يظهر نصفَ ظاهر خلف الأزرار، فتُقرأ
         *    الشاشة كأن أعلى الصفحة **مقصوص**. وهي الشكوى حرفياً.
         *
         *    الآن: لونٌ صلب (مع الضبابية) يغطّي صندوق الشريط كاملاً، ثم `::after`
         *    يضع التدرّج **أسفله** ليُلطّف انزلاق المحتوى — فلا شيء يُرى نصفه. */
        /* 🩹 والعتامة **كاملة**، لا ٩٢٪.
         *
         *    الثمانية بالمئة الباقية هي «مقصوصة من فوق» حرفياً: الرسالة المارّة
         *    تحت الشريط تُرى منه شبحاً، فيقرأ النزيل سطراً نصفَه ظاهرٌ خلف
         *    الأزرار ونصفَه مقطوع. والزجاجُ هنا لا يشتري شيئاً أصلاً — خلفية
         *    الصفحة لونٌ مصمتٌ واحد (rgb(8,15,20))، فالشريط المعتم بنفس اللون
         *    لا يُفرّق عنها بالعين، ويُفرّق كثيراً عمّا يمرّ تحته. */
        background: rgb(8, 15, 20);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        /* الفراغ حول الحبّتين يمرّر اللمس للرسائل تحته. */
        pointer-events: none;
    }

    .app-header::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        top: 100%;
        height: 14px;
        /* ⚠️ يبدأ من المصمت لا من ٩٢٪: بدايةٌ شفّافةٌ جزئياً تترك أوّل بكسلات
         *    التدرّج تكشف ما تحتها، وهي الحافّة التي تُقرأ «قصّاً». */
        background: linear-gradient(to bottom,
            rgb(8, 15, 20),
            rgba(8, 15, 20, 0));
        pointer-events: none;
    }

    .app-header > * {
        pointer-events: auto;
    }

    /* حجز المكان: `box-sizing: border-box` من الإعادة العامّة يجعل الحشوة
       داخل الارتفاع المقفول، فتنكمش مساحة المحتوى بالقدر الصحيح.
       + متنفّسٌ صغير: الحجز بمقدار الارتفاع وحده كان يُلصق أول بطاقة بالشريط
       بلا فاصل (قِيس صفر بكسل في وضع الدليل)، فتبدو مقتطعة من أعلاها. */
    .app-layout {
        padding-top: calc(var(--zw-header-h, 58px) + 10px);
    }

    .header-chip {
        min-height: 36px;
        padding: 0 10px;
    }

    .header-chip-icon {
        width: 36px;
        padding: 0;
    }

    /* القائمة تتبع الترويسة بدل رقمٍ ثابت كان يتداخل معها حين يكبر الخط. */
    .guest-menu {
        top: calc(var(--zw-header-top, 0px) + var(--zw-header-h, 58px) + 6px);
        inset-inline-end: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   📱 «مثل التطبيق»: المستند لا يتمرّر أبداً على الجوال
═══════════════════════════════════════════════════════════════ */
/* الشكوى: «الصفحة تكبر وتصغر وتتغيّر مهما سويت».
 *
 * السبب ليس تخطيطاً مضطرباً، بل شريطُ عنوان المتصفّح. كروم أندرويد وسفاري
 * يطويان الشريط عند تمرير **المستند** ويعيدانه عند التمرير عكسياً — وفي كل
 * مرّة يتغيّر ارتفاع الإطار المرئي فيُعاد تخطيط الصفحة كاملة. المحادثة كانت
 * محميّة من هذا (`body{overflow:hidden}` وتمريرٌ داخل `#chatMessages` وحده)،
 * أمّا الدليل فكان يُحرّر القفل عمداً ويتمرّر بالمستند — فهو السطح الذي
 * «يكبر ويصغر».
 *
 * التطبيقات الأصلية لا تفعل هذا لأنها لا تملك شريط عنوان. نُحاكيها: على
 * الجوال يبقى القفل في الوضعين، ويتمرّر الدليل **داخل** سطحه. فلا يطوى
 * الشريط، ولا يتغيّر الارتفاع، ولا يقفز شيء.
 *
 * على الشاشات الأكبر يبقى الدليل صفحةً تحريرية تتمرّر بالمستند كما كان —
 * لا شريط عنوان يُطوى هناك، فلا مشكلة تُحلّ. */
@media (max-width: 768px) {
    body.guidebook-active {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.guidebook-active .app-layout {
        height: 100svh;
        height: var(--zw-vh, 100svh);
        min-height: 0;
    }

    body.guidebook-active .main-content {
        min-height: 0;
    }

    /* المتمرّر الآن. `min-height:0` شرطٌ لا زينة: ابن الفليكس يرفض الانكماش
       تحت محتواه بدونه، فيتضخّم السطح ويعود المستند للتمرّر من جديد. */
    .guidebook-surface {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* 🧹 الدليل على الشاشات الكبيرة: شريطٌ لاصقٌ واحد، لا اثنان.
 *
 * الترويسة كانت لاصقة في كل الأوضاع، وشريط أدوات الدليل لاصقٌ أيضاً — فكانا
 * يتزاحمان على أعلى الشاشة نفسها: الترويسة تشغل 10..71 وz-index 900، والشريط
 * 8..62 وz-index 20. فما إن ينزل الزائر حتى يجلس زرّا «المساعد/الدليل» فوق
 * حقل البحث وزرّ الفئات ويغطّياهما.
 *
 * جُرِّب إنزال شريط الأدوات تحت الترويسة وإعطاؤها خلفية. النتيجة شريطان
 * عائمان فوق بعضهما يأكلان أعلى الشاشة، والمحتوى يمرّ خلفهما — «مزعج» بحقّ.
 *
 * فالأصحّ أن يبقى لاصقٌ **واحد**. الدليل صفحة تصفّح: أدواته (البحث والفئات)
 * هي ما يُحتاج أثناء النزول، أمّا التبديل بين السطحين فقرارٌ يُتّخذ مرّة عند
 * أعلى الصفحة. فتعود الترويسة إلى التدفّق هنا وتمضي مع المحتوى، ويبقى شريط
 * الأدوات وحده معلّقاً في مكانه الأصلي (`top: 8px`) بلا إزاحةٍ ولا خلفيةٍ
 * إضافية. ولا تزاحم أصلاً حتى تُعالَج.
 *
 * 📱 الجوال لا يشمله: هناك الترويسة `fixed` بطلبٍ صريح — شريط التبديل كان
 *    يختفي فوق حافة الشاشة ولا يُرى إلا بالزوم أوت. والدليل يتمرّر داخل سطحه
 *    فلا يمرّ شيء تحتها. */
@media (min-width: 769px) {
    body.guidebook-active .app-header {
        position: static;
    }
}

/* Small screens: brand yields, the tabs stretch, chips go icon-only */
@media (max-width: 600px) {
    .app-header {
        display: flex;
    }

    .zawaya-mode-switch {
        flex: 1;
        min-width: 0;
    }

    .zawaya-mode-icon {
        display: none;
    }

    .zawaya-mode-tab {
        padding-inline: 8px;
    }

    .app-header-actions {
        flex-shrink: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   HUB SHEETS — Hotel / My Requests / Settings (one presentation)
═══════════════════════════════════════════════════════════════ */
/* 📱 اللوحات تتوسّط الشاشة على كل المقاسات.
   كانت ملتصقة بالأسفل على الجوال (`align-items:flex-end`) وتتوسّط من 640px
   فقط. الالتصاق بالأسفل يضع المحتوى فوق منطقة الإبهام مباشرة، ويصطدم بشريط
   المتصفح السفلي على iOS، ويترك فراغاً أسود كبيراً فوق اللوحة القصيرة —
   فتقرأ الصفحة كأنها نصف محمّلة. التوسيط يعالج الثلاثة. */
.zw-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    /* هوامش آمنة: تحترم النتوء والشريط السفلي على الأجهزة الحديثة. */
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
}

.zw-sheet {
    width: 100%;
    max-width: 560px;
    /* الارتفاع محسوب من الحاوية لا من الشاشة، وإلا تجاوزت اللوحة الهوامش
       الآمنة أعلاه وقُصّ رأسها. */
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;   /* لا يمرّر التمرير للصفحة خلفها */
    -webkit-overflow-scrolling: touch;
    background: #0d1117;
    border: 0.8px solid rgba(94, 201, 160, 0.18);
    border-radius: 20px;
    padding: 0 0 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: zwSheetIn 0.26s cubic-bezier(0.32, 0.72, 0.25, 1);
}

.zw-sheet::-webkit-scrollbar {
    display: none;
}

/* لوحة متوسّطة تظهر بتكبير خفيف — الانزلاق من الأسفل يخصّ اللوحة السفلية. */
@keyframes zwSheetIn {
    from {
        transform: scale(0.97);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zw-sheet { animation: none; }
}

@media (min-width: 640px) {
    .zw-sheet-overlay {
        padding: 20px;
    }
}

.zw-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 14px 0 0;
    margin-bottom: 4px;
}

/* مقبض السحب أُخفي مع توسيط اللوحة: الشريط الصغير أعلى اللوحة السفلية يَعِد
   بإيماءة سحب لأسفل، واللوحة المتوسّطة لا تُسحب — فيصير وعداً كاذباً. نُبقي
   الحيّز كمسافة علوية فقط. */
.zw-sheet-handle span {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: transparent;
}

/* 📌 رأس اللوح يبقى في مكانه أثناء التمرير.
   كان يتمرّر مع المحتوى، فالنزيل الذي ينزل ليرى بقيّة الخدمات يفقد زرّ
   الإغلاق من الشاشة. وكان مخرجه الوحيد حينها هو السحب لأسفل — وهي نفسها
   حركة العودة لأعلى، فيُغلق اللوح وهو يحاول التصفّح فقط («يطردني من
   الصفحة»). بعد أن صار السحب لا يُغلق إلا والمحتوى في أعلاه، لولا هذا
   التثبيت لبقي من نزل إلى الأسفل بلا مخرجٍ ظاهر إطلاقاً.
   الخلفية صريحة لأن الشفّاف يجعل النصّ يمرّ تحته فيُقرأ مزدوجاً. */
.zw-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px 14px;
    position: sticky;
    top: 0;
    z-index: 3;
    background: #0d1117;
}

.zw-sheet-head-id {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zw-sheet-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(94, 201, 160, 0.1);
    border: 0.8px solid rgba(94, 201, 160, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(94, 201, 160, 0.85);
    flex-shrink: 0;
}

.zw-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    letter-spacing: -0.2px;
}

.zw-sheet-close {
    background: rgba(255, 255, 255, 0.05);
    border: 0.8px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zw-sheet-close:hover {
    background: rgba(94, 201, 160, 0.12);
    border-color: rgba(94, 201, 160, 0.35);
    color: rgba(255, 255, 255, 0.9);
}

.zw-sheet-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 0 22px 6px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.035);
    border: 0.8px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}

.zw-sheet-tab {
    min-height: 38px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.zw-sheet-tab:hover {
    color: rgba(255, 255, 255, 0.85);
}

.zw-sheet-tab.is-active {
    background: rgba(94, 201, 160, 0.14);
    color: rgba(148, 255, 215, 0.95);
    box-shadow: inset 0 0 0 0.8px rgba(94, 201, 160, 0.3);
}

.zw-sheet-body {
    padding: 16px 22px 0;
}

/* Settings rows */
.settings-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(94, 201, 160, 0.7);
    margin: 18px 0 9px;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 0.8px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font: inherit;
    text-align: start;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.settings-row:hover {
    border-color: rgba(94, 201, 160, 0.3);
    background: rgba(94, 201, 160, 0.06);
}

.settings-row-label {
    flex: 1;
    font-size: 13.5px;
    font-weight: 500;
}

.settings-row-value {
    font-size: 13px;
    font-weight: 700;
    color: rgba(94, 201, 160, 0.85);
}

.settings-danger-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 0.8px solid rgba(239, 138, 138, 0.25);
    background: rgba(239, 68, 68, 0.06);
    color: rgba(239, 138, 138, 0.9);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.settings-danger-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS — switch toggles + logout
═══════════════════════════════════════════════════════════════ */
.pref-toggle-list {
    margin-bottom: 16px;
}

.pref-toggle-group {
    margin: 14px 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

.pref-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.pref-toggle-row:last-child {
    border-bottom: none;
}

.pref-toggle-label {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.82);
}

/* iOS-style switch; the real checkbox stays for guest-preferences.js */
.zw-switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.zw-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.zw-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: background 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
}

.zw-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s cubic-bezier(0.3, 0.9, 0.4, 1);
}

.zw-switch input:checked ~ .zw-switch-track {
    background: rgba(94, 201, 160, 0.85);
    border-color: rgba(94, 201, 160, 0.5);
}

.zw-switch input:checked ~ .zw-switch-track::after {
    transform: translateX(18px);
    background: #07130f;
}

[dir="rtl"] .zw-switch input:checked ~ .zw-switch-track::after {
    transform: translateX(-18px);
}

.zw-switch input:focus-visible ~ .zw-switch-track {
    outline: 2px solid rgba(160, 255, 228, 0.95);
    outline-offset: 2px;
}

.settings-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 0.8px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(239, 138, 138, 0.9);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.settings-logout-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ══════════════════════════════════════════════════════════════
   Label toggle — the capsule is icon-only by default; this control
   reveals inline labels (remembered across opens) so the text isn't
   always taking space.  Adding `.labels-on` switches to row view.
═══════════════════════════════════════════════════════════════ */
.menu-label-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 11px;
    background: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.menu-label-toggle:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.menu-label-toggle:focus-visible {
    outline: 2px solid rgba(160, 255, 228, 0.95);
    outline-offset: 2px;
}

.menu-label-toggle-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.menu-label-toggle-text {
    display: none;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

/* Chevron points toward where the labels grow; flips when open (RTL-aware). */
[dir="rtl"] .menu-label-toggle-icon { transform: rotate(180deg); }
.guest-menu.labels-on .menu-label-toggle-icon { transform: rotate(180deg); }
[dir="rtl"] .guest-menu.labels-on .menu-label-toggle-icon { transform: rotate(0deg); }

/* ── Expanded state: icon + label rows ─────────────────────────── */
.guest-menu.labels-on {
    align-items: stretch;
    width: min(266px, calc(100vw - 24px));
    border-radius: 18px;
}

.guest-menu.labels-on .menu-label-toggle {
    width: 100%;
    height: 40px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
}

.guest-menu.labels-on .menu-label-toggle-text {
    display: inline;
}

.guest-menu.labels-on .nav-item {
    width: 100%;
    height: auto;
    min-height: 48px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    border-radius: 12px;
}

.guest-menu.labels-on .nav-icon {
    width: 24px;
    flex-shrink: 0;
}

.guest-menu.labels-on .nav-text,
.guest-menu.labels-on .nav-item:hover .nav-text,
.guest-menu.labels-on .nav-item:focus-within .nav-text,
.guest-menu.labels-on .nav-item:focus-visible .nav-text {
    position: static;
    transform: none;
    opacity: 1;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
}

.guest-menu.labels-on .guest-menu-sep {
    width: calc(100% - 16px);
    margin: 4px auto;
}

.guest-menu.labels-on #requestsStatusBadge,
.guest-menu.labels-on #foodOrdersStatusBadge {
    top: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
}

/* ── Guest-menu: flat item list (Hotel Info · Room Service · Complaints ·
   Rate your stay · Settings) ───────────────────────────────────────────── */
/* [hidden] must beat .nav-item's display:flex (mirrors .guest-menu[hidden]). */
.nav-item[hidden] { display: none !important; }

/* Pending-item dots on the Room Requests / Food orders / Complaints rows. */
#complaintsStatusBadge,
#requestsStatusBadge,
#foodOrdersStatusBadge {
    position: absolute;
    top: 3px;
    inset-inline-end: 3px;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
}
.guest-menu.labels-on #complaintsStatusBadge,
.guest-menu.labels-on #requestsStatusBadge,
.guest-menu.labels-on #foodOrdersStatusBadge {
    top: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
}

/* Change 14: in Guidebook mode the capsule hides Concierge service rows;
   only universal rows (Hotel Info, Settings) remain. */
body.guidebook-active #roomRequestsNavItem,
body.guidebook-active #foodOrdersNavItem,
body.guidebook-active #complaintsNavItem,
body.guidebook-active #rateStayNavItem { display: none !important; }

/* Change 7: room-service time-picker options readable on the dark sheet. */
.rc-time-select option { background: #0d1117; color: rgba(255, 255, 255, 0.85); }
.rc-time-select:focus { border-color: rgba(94, 201, 160, 0.5); }
/* Deterministic stay-journey prompts: compact, dismissible, and visually
   distinct from AI replies so guests know this is a hotel lifecycle update. */
.stay-journey-nudges {
    display: grid;
    gap: 10px;
    margin: 12px 14px 18px;
}

.stay-journey-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(94, 201, 160, 0.25);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(94, 201, 160, 0.10), rgba(8, 23, 31, 0.92));
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.15);
}

.stay-journey-icon { font-size: 24px; }
.stay-journey-copy { min-width: 0; }
.stay-journey-copy strong { display: block; color: rgba(255,255,255,.94); font-size: 13px; }
.stay-journey-copy p { margin: 4px 0 0; color: rgba(255,255,255,.62); font-size: 11.5px; line-height: 1.45; }
.stay-journey-actions { display: flex; gap: 7px; align-items: center; }
.stay-journey-action,
.stay-journey-dismiss {
    border-radius: 9px;
    padding: 8px 10px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.stay-journey-action { border: 0; background: #5ec9a0; color: #071219; }
.stay-journey-dismiss { border: 1px solid rgba(255,255,255,.13); background: transparent; color: rgba(255,255,255,.62); }

@media (max-width: 620px) {
    .stay-journey-card { grid-template-columns: auto minmax(0, 1fr); }
    .stay-journey-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ── Concierge final review: conversation first, one calm approval card ── */
.concierge-brief-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid rgba(251,191,36,.2);
    border-radius: 999px;
    background: rgba(251,191,36,.08);
    color: rgba(253,224,135,.9);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .15px;
    white-space: nowrap;
}

.concierge-brief-status.is-ready {
    border-color: rgba(94,201,160,.22);
    background: rgba(94,201,160,.1);
    color: #98e5c5;
}

.concierge-brief-form {
    display: grid;
    gap: 16px;
    margin: 0 17px 14px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 15px;
    background: rgba(2, 11, 16, .36);
}

.concierge-brief-intro {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 11.5px;
    line-height: 1.55;
}

.concierge-brief-field {
    display: grid;
    gap: 9px;
}

.concierge-brief-field + .concierge-brief-field {
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.concierge-brief-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.concierge-brief-label {
    color: rgba(255,255,255,.84);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05px;
}

.concierge-brief-optional {
    color: rgba(255,255,255,.34);
    font-size: 9.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.concierge-brief-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.concierge-choice-chip {
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.105);
    border-radius: 999px;
    outline: none;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.69);
    font: inherit;
    font-size: 11.5px;
    font-weight: 620;
    line-height: 1.15;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease,
        background .15s ease, transform .15s ease;
}

.concierge-choice-chip:hover:not(:disabled) {
    color: rgba(255,255,255,.92);
    border-color: rgba(94,201,160,.3);
    background: rgba(94,201,160,.065);
}

.concierge-choice-chip:active:not(:disabled) {
    transform: translateY(1px);
}

.concierge-choice-chip:focus-visible {
    box-shadow: 0 0 0 3px rgba(94,201,160,.13);
    border-color: rgba(94,201,160,.62);
}

.concierge-choice-chip.is-selected {
    border-color: rgba(94,201,160,.42);
    background: rgba(94,201,160,.15);
    color: #a9ead1;
}

.concierge-choice-chip.is-selected::before {
    content: '✓';
    margin-inline-end: 5px;
    font-size: 10px;
}

.concierge-choice-custom {
    border-style: dashed;
}

.concierge-brief-custom[hidden] {
    display: none !important;
}

.concierge-brief-control {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 10px 11px;
    border: 1px solid rgba(94,201,160,.24);
    border-radius: 11px;
    outline: none;
    background: rgba(94,201,160,.045);
    color: rgba(255,255,255,.94);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

textarea.concierge-brief-control {
    min-height: 64px;
    resize: vertical;
}

.concierge-brief-control::placeholder {
    color: rgba(255,255,255,.31);
}

.concierge-brief-control:focus-visible {
    border-color: rgba(94,201,160,.72);
    background: rgba(94,201,160,.065);
    box-shadow: 0 0 0 3px rgba(94,201,160,.12);
}

.concierge-brief-field.is-invalid .concierge-brief-label {
    color: rgba(253,224,135,.95);
}

.concierge-brief-field.is-invalid .concierge-brief-choices {
    padding: 5px;
    margin: -5px;
    border-radius: 12px;
    background: rgba(251,191,36,.035);
}

.concierge-brief-required-hint {
    margin-top: -4px;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(251,191,36,.07);
    color: rgba(253,224,135,.88);
    font-size: 10.5px;
    line-height: 1.4;
}

.concierge-brief-review {
    display: grid;
    gap: 8px;
    padding: 11px;
    border-radius: 11px;
    background: rgba(255,255,255,.028);
}

.concierge-brief-review[hidden] {
    display: none !important;
}

.concierge-brief-review-title {
    color: rgba(255,255,255,.36);
    font-size: 9.5px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.concierge-brief-review-list {
    display: grid;
    gap: 6px;
}

.concierge-brief-review-row {
    display: grid;
    grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr);
    gap: 10px;
    align-items: start;
}

.concierge-brief-review-key {
    color: rgba(255,255,255,.42);
    font-size: 10.5px;
}

.concierge-brief-review-value {
    color: rgba(255,255,255,.83);
    font-size: 10.8px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.concierge-final-review {
    padding: 13px;
    border: 1px solid rgba(255,255,255,.055);
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
}

.concierge-approval-chat-hint {
    margin: -3px 2px 0;
    color: rgba(255,255,255,.46);
    font-size: 10.5px;
    line-height: 1.55;
}

.concierge-approval-card button:disabled {
    cursor: not-allowed !important;
    opacity: .48 !important;
}

.concierge-approval-card .concierge-brief-control:disabled,
.concierge-approval-card .concierge-choice-chip:disabled {
    cursor: default;
}

@media (max-width: 480px) {
    .concierge-brief-form {
        margin-inline: 12px;
        padding: 13px;
    }

    .concierge-choice-chip {
        min-height: 35px;
        padding-inline: 10px;
        font-size: 11px;
    }

    .concierge-brief-review-row {
        grid-template-columns: minmax(82px, .75fr) minmax(0, 1.25fr);
    }
}

/* ══════════════════════════════════════════════════════════════
   📱 أهداف اللمس — توسعة غير مرئية إلى 44px
   ══════════════════════════════════════════════════════════════
   عدة أزرار حقيقية في رأس الصفحة وشريط الأوضاع كانت 32–36px. الحجم البصري
   مقصود ولا نريد تكبيره — لكن مساحة اللمس شيء آخر: إصبع بالغ ~9مم (≈44px)،
   وأي هدف أصغر يُخطئه المستخدم فيضغط ما بجانبه. نوسّع منطقة الالتقاط بعنصر
   زائف شفّاف فوق الزرّ: الشكل يبقى كما هو والإصابة تصير مضمونة.

   الشرط مزدوج عمداً: `pointer: coarse` يغطّي الأجهزة اللمسية، والعرض الضيّق
   يغطّي كل الهواتف مهما أبلغ متصفّحها عن نوع المؤشر (وبعضها يبلّغ خطأً).
   على شاشة عريضة بفأرة لا تُطبَّق — المؤشر دقيق، ومناطق الالتقاط المتداخلة
   هناك تحجب ما حولها بلا فائدة.  */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {

    .header-chip-icon,
    #guestMenuBtn,
    .zawaya-mode-tab,
    #glcLangToggle,
    /* 📏 وثلاثةٌ كانت خارج هذه القائمة، وهي الأصغرُ في التطبيق كلِّه:
       «نسخ» ٤٨×٢٠ (و٣٦×٢٠ بالعربية)، و«الإبلاغ عن خطأ» ٩٩×٢٠ (٧٨ بالعربية)،
       ورابطُ «سياسة الخصوصية» في شريط الكوكيز — ارتفاعُه **١٢px**. قيست
       بالمتصفّح: ضغطةٌ ٤٤×٤٤ على مركز أيٍّ منها تُخطئ ستّاً من تسع نقاط
       (وثماني نقاط في حالة «نسخ» العربية). والزرّان الأوّلان يعيشان تحت
       فقاعة المساعد مباشرةً، فيُضغط ما فوقهما بدلاً منهما.
       والارتفاعُ وحده هو العطل هنا — لذلك لا يزداد العرض (`max(100%,44px)`
       يساوي عرضَها الأصلي في الثلاثة)، فلا يبتلع زرٌّ جارَه. */
    .ai-report-btn,
    .cookie-policy-btn {
        position: relative;
    }

    .header-chip-icon::after,
    #guestMenuBtn::after,
    .zawaya-mode-tab::after,
    #glcLangToggle::after,
    .ai-report-btn::after,
    .cookie-policy-btn::after {
        content: "";
        position: absolute;
        /* يمدّ الحدّ إلى 44px كحدّ أدنى دون أن يزيح شيئاً في التخطيط. */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: max(100%, 44px);
        height: max(100%, 44px);
        /* لا يرسم شيئاً ولا يحجب الأيقونة — يلتقط اللمس فقط. */
        background: transparent;
        pointer-events: auto;
    }

    /* الأيقونة يجب أن تبقى فوق منطقة الالتقاط حتى لا تُحجب بصرياً. */
    .header-chip-icon > *,
    #guestMenuBtn > *,
    .zawaya-mode-tab > * {
        position: relative;
        z-index: 1;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   💬 المحادثة تحت الطلب، واعتذار عدم التوفّر — جانب النزيل
   ────────────────────────────────────────────────────────────────────────
   الحرص هنا أعلى منه في اللوحة: هذه شاشة نزيلٍ في غرفته على جواله. المحادثة
   تبقى **مطويّة** حتى يفتحها أو تصله رسالة، فلا تُزاحم ما جاء من أجله. ولا
   تشبه محادثة الوكيل: هذه سطران تحت طلبٍ بعينه، لا نافذة دردشة ثانية.
   ════════════════════════════════════════════════════════════════════════ */
.zw-thread{margin-top:12px;padding-top:12px;border-top:0.8px solid rgba(255,255,255,0.07)}
.zw-thread-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;border-radius:10px;
  border:0.8px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.62);
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;text-align:start}
.zw-thread-btn:hover{background:rgba(255,255,255,0.045)}
.zw-thread-btn .zw-dot{width:7px;height:7px;border-radius:50%;background:rgba(112,234,200,0.95);flex-shrink:0;
  box-shadow:0 0 7px rgba(112,234,200,0.6)}
.zw-thread-body{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.zw-msgs{display:flex;flex-direction:column;gap:7px;max-height:240px;overflow-y:auto}

/* ═══ 🫥 شريطُ التمرير يُخفى داخل اللوحات — ولا يُلغى التمرير ═══════════════
 *
 * `.zw-sheet` كانت تُخفيه، وما بداخلها لا. فيظهر شريطٌ رماديٌّ فاتحٌ داخل
 * لوحةٍ داكنة (خيطُ المحادثة أوضحُ مثال): عنصرٌ من طقم النظام لم يمرّ على أي
 * قرار تصميمٍ في هذا السطح، ويقصّ حافّة الفقاعة التي بجانبه.
 *
 * ⚠️ والإخفاء بصريٌّ فقط: `overflow-y:auto` باقٍ، فالعجلة واللمس والمفاتيح
 *    وقارئ الشاشة كما هي. حذفُ التمرير نفسه كان سيبتر الرسائل القديمة.
 *
 * ⚠️ ويُكتب في القاعدتين معاً — `scrollbar-width` لفَيَرفُكس، والزائفة لِوبكِت
 *    (سفاري وكروم). واحدةٌ بلا الأخرى تُخفيه على نصف الأجهزة، وهو أسوأ من
 *    إبقائه: يصير الفرقُ بين جهازٍ وجهاز عطلاً يُبلَّغ عنه.
 */
.zw-msgs,
.zw-thread-body,
.zw-sheet-body,
.guest-menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.zw-msgs::-webkit-scrollbar,
.zw-thread-body::-webkit-scrollbar,
.zw-sheet-body::-webkit-scrollbar,
.guest-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.zw-msg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.6;word-break:break-word}
.zw-msg.hotel{align-self:flex-start;background:rgba(112,234,200,0.09);border:0.8px solid rgba(112,234,200,0.2);
  color:rgba(255,255,255,0.88);border-start-start-radius:5px}
.zw-msg.mine{align-self:flex-end;background:rgba(255,255,255,0.06);border:0.8px solid rgba(255,255,255,0.09);
  color:rgba(255,255,255,0.86);border-start-end-radius:5px}
.zw-msg-who{font-size:9.5px;font-weight:700;opacity:.55;margin-bottom:3px;letter-spacing:.3px}
.zw-msg-at{font-size:9.5px;opacity:.4;margin-top:4px}
.zw-compose{display:flex;gap:7px;align-items:flex-end}
.zw-compose textarea{flex:1;min-height:40px;max-height:110px;resize:none;padding:10px 12px;border-radius:11px;
  border:0.8px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.88);
  font-size:13px;font-family:inherit;outline:none}
.zw-compose textarea:focus{border-color:rgba(112,234,200,0.35)}
.zw-compose button{height:40px;padding:0 15px;border-radius:11px;border:none;font-family:inherit;
  background:linear-gradient(135deg,rgba(94,201,160,0.85),rgba(58,168,126,0.8));color:#fff;font-size:12.5px;
  font-weight:700;cursor:pointer;flex-shrink:0}
.zw-compose button:disabled{opacity:.55;cursor:default}

/* ── اعتذار عدم التوفّر ───────────────────────────────────────────────────
   طلبٌ أُغلق بلا تنفيذ أسوأ لحظةٍ في التجربة كلّها. البطاقة تعتذر أولاً،
   ثم تنقل كلام الفندق كما كُتب، ثم تفتح باباً بديلاً — بدل كلمة «مرفوض». */
.zw-apology{margin-top:12px;padding:14px;border-radius:13px;
  background:linear-gradient(135deg,rgba(251,191,36,0.07),rgba(251,191,36,0.02));
  border:0.8px solid rgba(251,191,36,0.22);
  display:flex;flex-direction:column;gap:9px}
.zw-apology-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:rgba(251,191,36,0.95);line-height:1.35}
.zw-apology-h svg{flex-shrink:0}
.zw-apology-b{font-size:12.5px;color:rgba(255,255,255,0.72);line-height:1.6}
/* 🗣️ كلامُ الفندق كما كُتب — مقتبساً لا مندمجاً في نصّنا. النزيل يجب أن يعرف
   أي جملةٍ قالها الفندق وأيّها قالها النظام. */
.zw-apology-quote{padding:10px 12px;border-radius:10px;background:rgba(0,0,0,0.20);
  border-inline-start:2px solid rgba(251,191,36,0.45);
  font-size:12.5px;color:rgba(255,255,255,0.88);line-height:1.6;word-break:break-word}
/* 🌐 وسم «مترجَم آلياً»: النصّ وصل بلغة الموظّف وتُرجم للنزيل. قولُ ذلك يمنع
   أن تُقرأ ركاكةُ الترجمة على أنها ركاكةُ الفندق. */
.zw-apology-mt{font-size:10px;font-weight:600;color:rgba(255,255,255,0.42);
  display:inline-flex;align-items:center;gap:4px;margin-top:6px}

/* ── أزرار الاعتذار ─────────────────────────────────────────────────────
   ⚠️ كانا زرّين متساويين في صفٍّ واحد بلا ترتيبٍ ولا مساحة: «اطلب بديلاً»
      يتمدّد و«حسناً» ينكمش، فينكسر النصّ العربي الطويل سطرين داخل زرٍّ
      ارتفاعُه سطر — وهو ما ظهر في الشاشة. الآن شبكةٌ من عمودين متساويين
      على الشاشات الواسعة، وعمودٌ واحد على الجوال حيث لا يتّسع سطرٌ لاثنين. */
.zw-apology-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.zw-apology-cta{min-height:42px;padding:10px 12px;border-radius:10px;
  border:0.8px solid rgba(112,234,200,0.3);background:rgba(112,234,200,0.08);
  color:rgba(112,234,200,0.95);font-size:12.5px;font-weight:700;line-height:1.35;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;
  gap:6px;text-align:center;transition:background .15s,border-color .15s}
.zw-apology-cta:hover{background:rgba(112,234,200,0.14)}
.zw-apology-cta.quiet{border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.62)}
.zw-apology-cta.quiet:hover{background:rgba(255,255,255,0.07)}
@media(max-width:420px){.zw-apology-acts{grid-template-columns:1fr}}

/* 🔒 إقرارُ الشكوى الموجَّهة للمدير — بديلُ شريط المتابعة لا زينةٌ فوقه.
   لا فلو يجري عليها (لا تُسند ولا تُوجَّه)، فشريطٌ يقف عند نقطته الأولى
   يُقرأ إهمالاً بينما هو الوعدُ نفسه الذي طلبه النزيل. */
.zw-private-ack{margin:11px 0 2px;padding:11px 13px;border-radius:11px;
  background:rgba(192,132,252,0.07);border:0.8px solid rgba(192,132,252,0.20);
  font-size:12.5px;line-height:1.65;color:rgba(233,213,255,0.86)}

/* 🔒 وسم «لمدير الفندق وحده» */
.zw-private{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;
  background:rgba(192,132,252,0.12);border:0.8px solid rgba(192,132,252,0.28);
  font-size:10.5px;font-weight:700;color:rgba(216,180,254,0.95)}
.zw-private-row{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:11px;
  background:rgba(192,132,252,0.06);border:0.8px solid rgba(192,132,252,0.2);margin-bottom:11px;cursor:pointer}
.zw-private-row.on{background:rgba(192,132,252,0.12);border-color:rgba(192,132,252,0.42)}
.zw-private-box{width:18px;height:18px;border-radius:5px;border:1.6px solid rgba(192,132,252,0.55);
  flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center}
.zw-private-row.on .zw-private-box{background:rgba(192,132,252,0.9);border-color:rgba(192,132,252,0.9)}

/* الجوال: أهدافُ لمسٍ لا تقلّ عن ٤٤ بكسل — شاشة النزيل تُستعمل بإبهامٍ واحد
   وهو واقفٌ في غرفته، لا بفأرة. وحقلُ الكتابة يتّسع لأن الاعتذار عن رسالةٍ
   لم تُرسل أغلى من بضعة بكسلات. */
@media(max-width:480px){
  .zw-thread-btn{padding:12px 12px}
  .zw-compose textarea{min-height:44px;font-size:16px}   /* 16px يمنع تكبير iOS التلقائي */
  .zw-compose button{height:44px;padding:0 17px}
  .zw-msg{max-width:92%}
  .zw-apology-cta{min-height:46px;padding:12px}
  .zw-private-row{padding:12px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   🔑 حقل كود الدخول
   ═══════════════════════════════════════════════════════════════════════════
   بدأ أربع خاناتٍ منفصلة وصار حقلاً واحداً. الخانات كانت أسهل قراءةً من ورقة،
   لكنها **تُعلن طول السرّ**: من فتح الشاشة عرف أنه أربعة أرقام قبل أن يجرّب
   شيئاً. والحقل الواحد لا يقول شيئاً، ويشبه خانة رقم الغرفة فوقه — فتُقرأ
   الشاشة سطرين متشابهين لا نموذجاً من نوعين.
   ─────────────────────────────────────────────────────────────────────── */
.glc-input-code { padding-inline-end: 48px; letter-spacing: 3px; }
.glc-input-code::placeholder { letter-spacing: 0; }
.glc-eye {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%; transform: translateY(-50%);
    background: none; border: 0; padding: 6px; cursor: pointer;
    color: rgba(255, 255, 255, 0.28);
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: color 0.15s;
}
.glc-eye:hover { color: rgba(255, 255, 255, 0.6); }
.glc-eye.is-on { color: rgba(94, 201, 160, 0.85); }

/* ── 💬 «كيف أحصل على الكود؟» ─────────────────────────────────────────────
   المخرج الوحيد لمن ضاعت ورقته، فلا يصحّ أن يكون مخفيّاً — ولا أن يزاحم
   الفعل الأساسي. رابطٌ هادئ، وفقاعةٌ تُفتح بالضغط. */
.glc-help-row { position: relative; margin: -4px 0 14px; text-align: center; }
.glc-help-link {
    background: none; border: 0; padding: 4px 6px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 500;
    color: rgba(94, 201, 160, 0.72);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 0.8px;
}
.glc-help-link:hover { color: rgba(94, 201, 160, 0.95); }
.glc-help-pop {
    position: absolute; z-index: 40;
    inset-inline-start: 50%; transform: translateX(-50%);
    top: calc(100% + 9px);
    width: min(300px, 88vw);
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 14px;
    background: rgba(16, 24, 32, 0.97);
    border: 0.8px solid rgba(94, 201, 160, 0.26);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
    text-align: start;
    animation: gncPop 0.16s ease-out;
}
[dir="rtl"] .glc-help-pop { transform: translateX(50%); }
.glc-help-pop[hidden] { display: none; }
@keyframes gncPop { from { opacity: 0; transform: translate(-50%, -5px); } }
[dir="rtl"] @keyframes gncPop { from { opacity: 0; transform: translate(50%, -5px); } }
/* القرص «٠» أيقونةٌ لا زخرفة: النزيل يبحث عن الرقم على هاتف الغرفة، فنعرضه
   له بحجمٍ يُقرأ من طرف العين قبل أن يقرأ الجملة. */
.glc-help-dial {
    flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(94, 201, 160, 0.14);
    border: 1px solid rgba(94, 201, 160, 0.32);
    color: rgba(94, 201, 160, 0.95);
    font-size: 17px; font-weight: 800; line-height: 1;
}
.glc-help-text {
    margin: 0; font-size: 12.5px; line-height: 1.65;
    color: rgba(255, 255, 255, 0.62);
}
.glc-help-text b { color: rgba(255, 255, 255, 0.92); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   🙋 مربّع الاسم — فوق التطبيق، لا بدلاً منه
   ═══════════════════════════════════════════════════════════════════════════
   كان شاشةً كاملةً ثانية، فبدا للنزيل أنه ما زال يسجّل دخوله وأن أمامه خطواتٍ
   لا يعرف عددها. الآن يرى تطبيقه خلف الزجاج: دخلتَ، وبقي سطرٌ واحد.
   ─────────────────────────────────────────────────────────────────────── */
.main-content.zw-name-gate > *:not(#guestNameScreen) {
    filter: blur(7px) saturate(0.85);
    transition: filter 0.3s ease;
    pointer-events: none;
    user-select: none;
}
/* 🙋 شاشة الاسم — نفس علاج شاشة الدخول ولنفس السبب حرفياً.
 *
 * وهي **أشدّ عرضةً له**: تُفتح وفيها حقلُ نصٍّ يُركَّز عليه فوراً، أي أن لوحة
 * المفاتيح تظهر معها دائماً لا أحياناً. فمع `align-items:center` بلا تمرير
 * كان أعلى البطاقة — وفيه العنوان الذي يشرح ما المطلوب — يخرج فوق الحافّة.
 * التوسيط بـ`margin:auto` يعطي نفس المنظر ولا يقصّ أبداً.
 *
 * 🧭 و`flex-direction: column` **ليست تجميلاً هنا، هي ما يجعل المحورين
 *    صحيحين**. الحاوية كانت صفّاً (الافتراض)، فقرأ المتصفّح القاعدتين على
 *    عكس ما تقولان: `justify-content:flex-start` صارت أفقيةً فألصقت البطاقة
 *    بحافّة البداية — وهي **اليمين في العربية** — و`align-items:center`
 *    صارت رأسية. فظهرت البطاقة على طرف الشاشة لا في وسطها.
 *
 *    وشاشةُ الدخول (`.glc-screen`) لم تقع فيه لأنها عمودٌ أصلاً: نفس
 *    القاعدتين حرفياً، ونتيجةٌ مختلفة تماماً. فالسطر المفقود هو الفرق. */
.gns-overlay {
    position: fixed; inset: 0; bottom: auto; z-index: 3000;
    height: 100dvh;
    height: var(--zw-vh, 100dvh);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: max(22px, env(safe-area-inset-top, 0px)) 22px max(22px, env(safe-area-inset-bottom, 0px));
    background: rgba(6, 11, 16, 0.55);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: gnsFade 0.25s ease-out;
}
.gns-overlay > .gns-card { margin-block: auto; }
.gns-overlay.is-leaving { animation: gnsFade 0.25s ease-in reverse; }
@keyframes gnsFade { from { opacity: 0; } }
.gns-card {
    width: 100%; max-width: 380px;
    padding: 26px 24px 22px;
    background: rgba(18, 26, 35, 0.98);
    border: 0.8px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
    animation: gnsRise 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.gns-overlay.is-leaving .gns-card { animation: gnsRise 0.22s ease-in reverse; }
@keyframes gnsRise { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.gns-avatar {
    width: 46px; height: 46px; border-radius: 15px; margin: 0 auto 15px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(94, 201, 160, 0.22), rgba(94, 201, 160, 0.06));
    border: 1px solid rgba(94, 201, 160, 0.28);
    color: rgba(94, 201, 160, 0.9);
}
.gns-title {
    margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.35;
    color: rgba(255, 255, 255, 0.95); text-align: center;
}
.gns-sub {
    margin: 0 0 20px; font-size: 13px; line-height: 1.65;
    color: rgba(255, 255, 255, 0.48); text-align: center;
}
/* اسمُ شخصٍ ليس رمزاً: لا تكبيرَ للحروف ولا تباعد. */
#guestNameInput { text-transform: none; letter-spacing: 0.2px; }

@media (prefers-reduced-motion: reduce) {
    .gns-overlay, .gns-card, .glc-help-pop { animation: none; }
    .main-content.zw-name-gate > *:not(#guestNameScreen) { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   🍽️  DINING — قائمةُ المنفذ وسلّتُه، وبطاقاتُها داخل المحادثة
   ───────────────────────────────────────────────────────────────────────
   كلُّ القواعد هنا داخل `dining-*` كي لا ترث مكوّناتُ المحادثة القديمة شيئاً
   منها بالخطأ — نفسُ قرار `guidebook-*` أعلاه.

   ⚠️ والألوانُ والحوافُّ مأخوذةٌ من سطح الدليل حرفاً بحرف: السطحان جاران في
      نفس المبدّل، ونظامان بصريّان متجاوران يُقرآن تطبيقين لا واحداً.
═══════════════════════════════════════════════════════════════════════ */

.dining-surface {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: visible;
    color: var(--text-primary);
}
.dining-surface[hidden] { display: none !important; }
body.dining-active .main-content { min-height: 100vh; }

/* 🍪 `--zw-cookie-h` يكتبه `initCookieBar` ما دام شريطُ الموافقة ظاهراً: آخرُ طبقٍ
      وزرُّ السلّة يُمرَّران فوقه لا تحته. */
.dining-shell {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 0 4px calc(52px + var(--zw-cookie-h, 0px));
}

/* ── الترويسة ────────────────────────────────────────────────────────── */
/* 🎯 الترويسةُ تقول ثلاثةَ أشياء في سطرين: أين أنا (المنفذ)، وهل يستقبل الآن،
      وكم ينتظر الطبق. كانت بطاقةً بتدرّجين وحبّةِ حالةٍ كبيرة تجذب العينَ قبل أيّ
      طبق، وتدفع — مع المبدّلات تحتها — أوّلَ صنفٍ تحت حافّة شاشة الجوّال.
      مسطّحةٌ ومضغوطةٌ الآن: لا تدرّجات (معيارُ المشروع)، ولونٌ واحدٌ للحالة. */
.dining-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 14px;
    margin-bottom: 12px;
    padding: 16px clamp(16px, 3vw, 28px);
    border: 1px solid rgba(112, 234, 200, 0.14);
    border-radius: 18px;
    background: rgba(13, 26, 32, 0.92);
}
.dining-hero-copy { min-width: 0; }
.dining-eyebrow {
    display: block;
    font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
    color: rgba(112, 234, 200, 0.72);
    margin-bottom: 2px;
}
.dining-hero h1 {
    margin: 0; font-size: clamp(19px, 2.6vw, 26px); font-weight: 750; line-height: 1.3;
    color: rgba(255, 255, 255, 0.96);
    overflow-wrap: anywhere;
}
.dining-hero p {
    margin: 2px 0 0; font-size: 12.5px; line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
}
.dining-hero p:empty { display: none; }
/* 🚦 حالةُ الاستقبال — نقطةٌ وكلمات، لا زرٌّ ضخم. أخضرُ حين يستقبل، وكهرمانيٌّ
      حين لا: «مغلقٌ الآن» حالةٌ يُتصرَّف بها، لا خطأٌ أحمر. */
.dining-ordering-pill {
    display: inline-flex; align-items: center; gap: 7px;
    justify-self: end;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(94, 201, 160, 0.28);
    background: rgba(94, 201, 160, 0.08);
    color: rgba(148, 240, 204, 0.95);
    font-size: 11.5px; font-weight: 700; line-height: 1.4;
}
.dining-ordering-pill::before {
    content: '';
    flex: 0 0 auto;
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(94, 201, 160, 0.95);
    box-shadow: 0 0 0 3px rgba(94, 201, 160, 0.18);
}
.dining-ordering-pill:empty { display: none; }
.dining-ordering-pill.is-closed {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.08);
    color: rgba(253, 224, 150, 0.96);
}
.dining-ordering-pill.is-closed::before {
    background: rgba(251, 191, 36, 0.95);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.16);
}
/* 📱 الترويسةُ على الجوّال عمودان كذلك: الاسمُ وحالةُ الاستقبال على سطرٍ واحد.
      كانت الحبّةُ تنزل إلى سطرها وحدها فتصير الترويسةُ ٢٨٥px يسكنها قرصُ حالةٍ واحد
      (قياسُ المالك: «مساحةٌ ميّتة») ويبدأ أوّلُ طبقٍ تحت منتصف الشاشة. */
@media (max-width: 480px) {
    .dining-hero { padding: 12px 14px; gap: 4px 10px; margin-bottom: 10px; }
    .dining-hero h1 { font-size: 19px; }
    .dining-ordering-pill { align-self: start; max-width: 46vw; white-space: normal; text-align: start; }
    .dining-eyebrow { margin-bottom: 0; }
}

/* ── المنافذ: مبدّلٌ واحد بخيارين متساويين ──────────────────────────────── */
/* ⚠️ `display` هنا يفوز على سِمة `hidden` — ومنفذٌ واحد يُخفي المبدّل. */
.dining-outlet-switch[hidden], .dining-categories[hidden] { display: none !important; }
.dining-outlet-switch {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}
.dining-outlet-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 0; min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.66);
    font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.dining-outlet-chip:hover { color: rgba(255, 255, 255, 0.92); }
.dining-outlet-chip.is-active {
    background: rgba(94, 201, 160, 0.16);
    color: rgba(178, 255, 227, 0.98);
    box-shadow: inset 0 0 0 1px rgba(112, 234, 200, 0.35);
}

/* ── القائمة / طلبات الطعام: شريطُ تبويبٍ بخطٍّ تحت المختار ───────────────── */
/* شكلٌ غيرُ شكل مبدّل المنافذ عمداً: ذاك «أيُّ مطبخ»، وهذا «أيُّ صفحة». */
.dining-panes {
    display: flex; gap: 20px;
    margin: 2px 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dining-pane-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    font: inherit; font-size: 13.5px; font-weight: 700;
    cursor: pointer;
}
.dining-pane-tab:hover { color: rgba(255, 255, 255, 0.9); }
.dining-pane-tab.is-active { color: rgba(178, 255, 227, 0.98); }
.dining-pane-tab.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: rgba(94, 201, 160, 0.95);
}

/* ── الأقسام: سطرٌ واحد يُسحب جانباً، لا أسطرٌ تدفع الأطباق إلى الأسفل ──────── */
.dining-categories {
    display: flex; flex-wrap: nowrap; gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.dining-categories::-webkit-scrollbar { display: none; }
.dining-chip {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 15px;
    scroll-snap-align: start;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.7);
    font: inherit; font-size: 12.5px; font-weight: 650;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.dining-chip:hover { background: rgba(94, 201, 160, 0.08); color: rgba(255, 255, 255, 0.92); }
.dining-chip.is-active {
    border-color: rgba(112, 234, 200, 0.5);
    background: rgba(94, 201, 160, 0.16);
    color: rgba(178, 255, 227, 0.98);
}

.dining-pane-badge, .zawaya-mode-badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-grid; place-items: center;
    border-radius: 999px;
    background: rgba(94, 201, 160, 0.9);
    color: #06231a;
    font-size: 10.5px; font-weight: 800;
}
.zawaya-mode-tab.is-active .zawaya-mode-badge {
    background: rgba(6, 35, 26, 0.82);
    color: rgba(178, 255, 227, 0.98);
}
/* ⚠️ `display: inline-grid` أعلاه يفوز على سِمة `hidden` — فكانت الشارةُ الفارغة
      تُرسم نقطةً خضراء بلا رقم بجانب «الطعام» و«طلبات الطعام»، يقرؤها النزيل
      «عندك شيءٌ ينتظر» وليس عنده شيء. نفسُ صنف `.zawaya-mode-tab[hidden]`. */
.dining-pane-badge[hidden], .zawaya-mode-badge[hidden], .dining-outlet-count[hidden] { display: none !important; }

/* 🔢 عددُ سطور سلّة كلّ منفذٍ على شارته. */
.dining-outlet-count {
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-grid; place-items: center;
    border-radius: 999px;
    background: rgba(94, 201, 160, 0.9);
    color: #06231a;
    font-size: 10.5px; font-weight: 800;
}
/* 👉 سطرُ السلّة الأخرى في لوحة السلّة — بمجموعها هي، بلا جمعٍ مع هذه. */
.dining-other-cart {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(112, 234, 200, 0.28);
    background: transparent;
    color: rgba(178, 255, 227, 0.9);
    font: inherit; font-size: 12.5px; font-weight: 700;
    text-align: start;
    cursor: pointer;
}
.dining-other-cart:hover { background: rgba(94, 201, 160, 0.08); }

.dining-status {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(248, 113, 113, 0.24);
    background: rgba(248, 113, 113, 0.07);
    color: rgba(252, 200, 200, 0.92);
    font-size: 12.5px; line-height: 1.6;
}

/* ── القائمةُ والسلّة جنباً إلى جنب ───────────────────────────────────── */
.dining-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 16px;
    align-items: start;
}
.dining-layout[hidden] { display: none !important; }
@media (max-width: 900px) {
    .dining-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ── البحثُ وبابُ التصفية ────────────────────────────────────────────── */
/* 🔎 سطرٌ واحد فوق الأقسام: حقلُ بحثٍ وزرٌّ واحد لكلّ المرشِّحات (ورقة). والزرّان
      بارتفاع ٤٤ — نفسُ ارتفاع الشارات تحتهما، فالسطران يُقرآن شريطَ أدواتٍ واحداً. */
.dining-toolbar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.dining-toolbar[hidden], .dining-filter-summary[hidden],
.dining-search-clear[hidden], .dining-filter-count[hidden] { display: none !important; }
.dining-search {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    min-height: 44px;
    padding-inline: 12px 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    cursor: text;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.dining-search:focus-within { border-color: rgba(112, 234, 200, 0.5); background: rgba(94, 201, 160, 0.05); }
.dining-search-icon {
    flex: 0 0 auto; width: 18px; height: 18px;
    fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.8; stroke-linecap: round;
}
.dining-search input {
    flex: 1 1 auto; min-width: 0;
    height: 42px;
    border: 0; outline: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font: inherit; font-size: 14px;
}
.dining-search input::placeholder { color: rgba(255, 255, 255, 0.42); }
/* زرُّ المسح مرسومٌ في الحقل — والأصليُّ في WebKit يُرسم فوقه ثانياً. */
.dining-search input::-webkit-search-cancel-button,
.dining-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.dining-search-clear {
    position: relative;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}
/* 👍 هدفُ اللمس ٤٤ حول زرٍّ مرسومٍ بـ٣٦. */
.dining-search-clear::after { content: ''; position: absolute; inset: -4px; }
.dining-search-clear:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.9); }
.dining-search-clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dining-filter-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.dining-filter-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dining-filter-btn:hover { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.95); }
.dining-filter-btn.is-active {
    border-color: rgba(112, 234, 200, 0.45);
    background: rgba(94, 201, 160, 0.1);
    color: rgba(178, 255, 227, 0.98);
}
.dining-filter-count {
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-grid; place-items: center;
    border-radius: 999px;
    background: rgba(94, 201, 160, 0.9);
    color: #06231a;
    font-size: 10.5px; font-weight: 800;
}
/* 📱 ١٦px على الجوّال: متصفّحُ iOS يُكبّر الصفحةَ كلَّها عند التركيز على حقلٍ أصغر. */
@media (max-width: 600px) {
    .dining-search input { font-size: 16px; }
}

/* 🔢 حالةٌ مطبّقة: العددُ أولاً، ثمّ ما اختاره النزيل، ثمّ مسحٌ واحد ظاهر. */
.dining-filter-summary {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 5px 14px;
    margin: 0 0 12px; padding: 12px 14px;
    border: 1px solid rgba(112, 234, 200, 0.24);
    border-radius: 12px;
    background: rgba(94, 201, 160, 0.06);
    font-size: 12px; line-height: 1.55;
    color: rgba(255, 255, 255, 0.76);
}
.dining-filter-count-text { grid-column: 1; font-size: 15px; font-weight: 800; color: rgba(255, 255, 255, 0.95); }
.dining-filter-details { grid-column: 1; display: flex; flex-wrap: wrap; gap: 5px 8px; min-width: 0; }
.dining-filter-detail { padding: 3px 8px; border-radius: 7px; background: rgba(94, 201, 160, 0.12); color: rgba(178, 255, 227, 0.96); overflow-wrap: anywhere; }
.dining-filter-near, .dining-filter-cart { grid-column: 1 / -1; }
.dining-filter-cart { font-weight: 650; color: rgba(253, 224, 150, 0.95); }
.dining-link {
    grid-column: 2; grid-row: 1 / span 2;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(112, 234, 200, 0.28);
    border-radius: 9px;
    background: rgba(94, 201, 160, 0.08);
    color: rgba(148, 240, 204, 0.95);
    font: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer;
}
.dining-link:hover { background: rgba(94, 201, 160, 0.16); }
@media (max-width: 600px) {
    .dining-filter-summary { grid-template-columns: minmax(0, 1fr); }
    .dining-link { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* 🫙 «ما فيه صنف يطابق» — حالةٌ ثالثة غيرُ «فارغة» وغيرُ «تعذّرت»، ومعها مخرجُها. */
.dining-filter-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 30px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    text-align: center;
}
.dining-filter-empty-title { margin: 0; font-size: 14.5px; font-weight: 750; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.dining-filter-empty-hint { margin: 0; max-width: 44ch; font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.6); }
.dining-filter-reset { margin-top: 6px; }

/* ── ورقةُ التصفية ─────────────────────────────────────────────────────── */
.dining-filter-sheet { gap: 18px; }
.dining-filter-group { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dining-filter-heading { margin: 0; font-size: 12px; font-weight: 750; color: rgba(255, 255, 255, 0.62); }
/* 🎚️ الترتيبُ مقطعٌ بثلاثة خيارات — واحدٌ مختارٌ دائماً، فلا يُقرأ «بلا ترتيب». */
.dining-segment {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}
.dining-segment-option {
    min-height: 44px;
    padding: 4px 6px;
    border: 0; border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, 0.66);
    font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.3;
    cursor: pointer;
}
.dining-segment-option:hover { color: rgba(255, 255, 255, 0.92); }
.dining-segment-option.is-active {
    background: rgba(94, 201, 160, 0.16);
    color: rgba(178, 255, 227, 0.98);
    box-shadow: inset 0 0 0 1px rgba(112, 234, 200, 0.35);
}
.dining-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dining-filter-none { margin: 0; font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.5); }
.dining-filter-caution { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(253, 224, 150, 0.9); }
/* 🧾 الجملةُ الصادقة على الورقة نفسِها — ما يفعله المرشِّح، ولماذا غابت أصناف. */
.dining-filter-honest {
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dining-filter-honest > p { margin: 0; font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, 0.62); }
.dining-filter-honest > .dining-filter-availability { font-size: 11.5px; color: rgba(255, 255, 255, 0.45); }
.dining-switch {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px;
    font-size: 13px; font-weight: 650; line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
}
.dining-switch input { cursor: inherit; }
.dining-switch.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* ── الطبق — بطاقةٌ واحدة، وعمودُ القائمة وحده يقرّر عددَ الأعمدة ─────────── */
/* 🍽️ **الشكلُ واحدٌ في كلّ عرض، والذي يتغيّر عددُ الأعمدة وحده.**
      كان الصفُّ صورةً جانبيّةً صغيرة (٩٦×٧٢) على الجوّال وصورةً فوق بطاقةٍ
      (٢٦٢×١٩٧) على الحاسوب — طبقٌ واحد بمنتجين، قاسهما المالكُ بالعين. الآن
      البطاقةُ نفسُها في كلّ مكان (`dishCard` في `js/dining.js`): عمودُ نصٍّ (الاسم،
      الوصف، ما أُعلن، السعر) وعمودٌ جانبيّ (الصورةُ ٤:٣ وتحتها «أضف»). عمودٌ واحد
      تحت 600px من عرض القائمة، وعمودان فوقه.

      ⚠️ والاستعلامُ على **عمود القائمة** لا على `.dining-dishes` ولا على الشاشة:
      قاعدةٌ داخل `@container` تصيب أبناءَ الحاوية وحدهم، فحاويةٌ لا تضبط أعمدتَها
      هي — الحاويةُ أبوها. وعلى الحاسوب القائمةُ بجانب السلّة، فعرضُها هو الذي
      يقرّر لا عرضُ الشاشة.

   📏 **ولا بطاقةَ أطولُ من جارتها** (قرارُ المالك). `grid-auto-rows: 1fr` يجعل كلَّ
      صفٍّ بطولِ أطولها، والاسمُ والوصفُ يُقصّان عند سطرين، وسطرُ ما أُعلن عند
      سطر، وسطرُ الحالة محجوزٌ وإن سكت — فإضافةُ طبقٍ إلى السلّة لا تُطيل بطاقتَه
      ولا تقفز بالقائمة. والسعرُ و«أضف» في أسفل كلّ بطاقة، على خطٍّ واحد.
      `tests/production/dining-shots.mjs` يقيس الارتفاعات مجموعةً مجموعة. */
.dining-menu-column {
    min-width: 0;
    container: dining-menu / inline-size;
}
.dining-dishes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
}
@container dining-menu (width >= 600px) {
    .dining-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.dining-item-price {
    flex: 0 0 auto;
    font-size: 14px; font-weight: 800; line-height: 1.5;
    color: rgba(148, 240, 204, 0.95);
    white-space: nowrap;
    unicode-bidi: isolate;
}

/* 🖼️ **وسائطُ الطبق — معالجةٌ واحدة في الصفّ والبطاقة الصغيرة ورأس الورقة.**
      نسبةٌ واحدة (٤:٣)، وقصٌّ واحد (`cover`)، ومرساةٌ واحدة: **المنتصف**. صورةُ
      الطعام تُلتقط والطبقُ في وسط الإطار، فالمنتصفُ هو ما يُبقيه في القصّ: صورةٌ
      طوليّة ٩:١٦ تفقد أعلاها وأسفلها (الطاولة والخلفيّة)، وبانوراما تفقد جانبيها.
      ومرساةٌ لكلّ نسبة كانت ستعني طبقاً يتحرّك بين سطحٍ وآخر. تُصوَّر النسبُ الثلاث
      على المقاسين في `dining-shots.mjs`.
      والحافّةُ الشعريّة (`::after`) **فوق** الصورة لا تحتها: صورةٌ داكنة على بطاقةٍ
      داكنة كانت تذوب حوافُّها في الأرضيّة. */
.dining-item-media {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.dining-item-media::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.dining-item-media img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
/* 👍 إبهامٌ واحد: هدفُ اللمس ٤٤ على الأقلّ لكلّ زرٍّ في العائلة — كان زرّا ذيل
      بطاقة المحادثة ٣٢px، أصغرَ ما في الشاشة وأكثرَ ما يُضغط فيها. */
.dining-btn, .dining-btn-ghost {
    min-height: 44px;
    font: inherit; cursor: pointer;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13px; font-weight: 700;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.dining-btn:focus-visible, .dining-btn-ghost:focus-visible,
.dining-chip:focus-visible, .dining-segment-option:focus-visible, .dining-filter-btn:focus-visible,
.dining-link:focus-visible, .dining-search-clear:focus-visible {
    outline: 2px solid rgba(112, 234, 200, 0.75);
    outline-offset: 2px;
}
.dining-btn {
    border: none;
    background: rgba(94, 201, 160, 0.92);
    color: #06231a;
}
.dining-btn:hover:not(:disabled) { background: rgba(108, 214, 173, 1); }
.dining-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dining-btn-ghost {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.66);
}
.dining-btn-ghost:hover { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); }
.dining-btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── السلّة ──────────────────────────────────────────────────────────── */
.dining-cart {
    position: sticky; top: 12px;
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    border: 1px solid rgba(112, 234, 200, 0.18);
    border-radius: 18px;
    background: rgba(8, 20, 27, 0.82);
}
@media (max-width: 900px) { .dining-cart { position: static; } }
.dining-cart-title { margin: 0; font-size: 14px; font-weight: 750; color: rgba(255, 255, 255, 0.9); }
.dining-cart-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* 📱 لوحةُ سلّةٍ ضيّقة (جوّال): الأزرارُ سطرٌ تحت الاسم — ثلاثةُ أهدافٍ بـ44
      بجانب الاسم كانت تتركه عموداً بعرض كلمتين. */
.dining-cart { container: dining-cart / inline-size; }
@container dining-cart (width < 420px) {
    .dining-cart-line:not(.is-readonly) {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "text total" "controls controls";
        row-gap: 8px;
    }
    .dining-cart-line:not(.is-readonly) .dining-cart-line-text { grid-area: text; }
    .dining-cart-line:not(.is-readonly) .dining-cart-line-total { grid-area: total; }
    .dining-cart-line:not(.is-readonly) .dining-cart-line-controls { grid-area: controls; justify-self: start; }
}
.dining-cart-line.is-broken { opacity: 0.75; }
/* السطرُ نفسُه في بطاقة المحادثة — بلا عمود أزرار التحرير. */
.dining-cart-line.is-readonly { grid-template-columns: minmax(0, 1fr) auto; }
.dining-cart-line-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dining-cart-line-name { font-size: 13px; font-weight: 650; color: rgba(255, 255, 255, 0.88); }
.dining-cart-line-options, .dining-cart-line-note {
    font-size: 11px; color: rgba(255, 255, 255, 0.42); line-height: 1.5;
}
.dining-cart-line-warn { font-size: 11px; font-weight: 700; color: rgba(252, 165, 165, 0.95); }
.dining-cart-line-controls { display: inline-flex; align-items: center; gap: 8px; }
.dining-step {
    position: relative;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font: inherit; font-size: 15px; line-height: 1;
    cursor: pointer;
}
/* 👍 هدفُ اللمس 44×44 حول زرٍّ مرسومٍ بـ36، والفجوةُ 8px فلا يتداخل هدفان:
      ضغطةٌ بين «−» و«+» لا تصيب الجارَ الخطأ. */
.dining-step::after { content: ''; position: absolute; inset: -4px; }
.dining-step:hover { background: rgba(94, 201, 160, 0.1); color: rgba(178, 255, 227, 0.95); }
.dining-step-remove:hover { background: rgba(248, 113, 113, 0.12); color: rgba(252, 165, 165, 0.95); }
.dining-step-count { min-width: 18px; text-align: center; font-size: 12.5px; font-weight: 750; }
.dining-cart-line-total { font-size: 12.5px; font-weight: 750; color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
.dining-cart-total {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px;
    font-size: 14px; font-weight: 800;
    color: rgba(148, 240, 204, 0.95);
}
.dining-cart-warn {
    margin: 0; font-size: 12px; line-height: 1.6; font-weight: 650;
    color: rgba(252, 165, 165, 0.92);
}
.dining-cart-note {
    margin: 0; font-size: 11.5px; line-height: 1.6;
    color: rgba(251, 191, 36, 0.8);
}
.dining-empty {
    margin: 0; padding: 14px 0;
    font-size: 12.5px; line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}
/* ⏳ «جارٍ» و«فارغ» و«تعذّر» تمتدّ على عرض القائمة كلّه، لا في خانة طبقٍ واحد. */
.dining-dishes > .dining-empty,
.dining-dishes > .dining-state-error,
.dining-dishes > .dining-retry,
.dining-dishes > .dining-filter-empty { grid-column: 1 / -1; }
.dining-retry { justify-self: start; align-self: flex-start; }

/* ── الأوراقُ المنبثقة: الخيارات والمراجعة والمحادثة ─────────────────── */
/* ستارةٌ مصمتة بلا ضباب — لا زجاجَ في هذا النظام البصريّ. */
.dining-sheet-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.72);
}
.dining-sheet {
    width: min(460px, 100%);
    max-height: min(86vh, 720px);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px;
    border: 1px solid rgba(112, 234, 200, 0.2);
    border-radius: 20px;
    background: #0d1117;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    /* عناصرُ النموذج الأصليّة (الدوائر والمربّعات وحقلُ الكمّيّة) بلونها الداكن —
       كانت دوائرَ بيضاء على ورقةٍ سوداء. */
    color-scheme: dark;
    accent-color: rgb(94, 201, 160);
}
.dining-sheet-title { margin: 0; font-size: 16px; font-weight: 750; color: rgba(255, 255, 255, 0.94); }
/* 📌 **فعلُ الورقة في متناول الإبهام دائماً.** ورقةُ طبقٍ بصورةٍ وخيارات، وورقةُ
      تصفيةٍ بثلاث مجموعات، تطولان عن الشاشة — و«أضف للسلّة» أو «اعرض N» كانا
      تحت الحافّة. السطرُ يلتصق بأسفل الورقة، والهامشُ السالب يمدّ أرضيّتَه إلى
      حافّتيها ويُبقي موضعَه عند نهاية التمرير هو موضعُه ملتصقاً.
   ⚠️ و`bottom` سالبٌ بقدر حشوة الورقة: المتصفّحُ يُلصق العنصرَ داخل حاوية التمرير
      **منقوصةً حشوتُها**، فكان `bottom: 0` يقف ٢٠px فوق حافّة الورقة ويمرّ حقلُ
      الكمّيّة تحته ظاهراً — قيس في لقطة الجوّال. */
.dining-sheet > .dining-sheet-actions {
    position: sticky; bottom: -20px; z-index: 1;
    margin: 0 -20px -20px;
    padding: 12px 20px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d1117;
}
.dining-optgroup {
    margin: 0; padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}
.dining-optgroup legend { padding: 0 6px; font-size: 12px; font-weight: 750; color: rgba(178, 255, 227, 0.9); }
.dining-option {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 2px;
    font-size: 13px; color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}
/* ◉ دوائرُ الخيارات ومربّعاتُها من النظام الداكن نفسه؛ chrome المتصفّح الأبيض
      يُقرأ كعنصرٍ من تطبيقٍ آخر فوق الورقة السوداء. */
.dining-option input[type="radio"], .dining-option input[type="checkbox"],
.dining-switch input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    display: grid; place-items: center;
    flex: 0 0 20px; width: 20px; height: 20px; margin: 0;
    border: 1.5px solid rgba(178, 255, 227, 0.55);
    background: #0d1117;
    cursor: inherit;
}
.dining-option input[type="radio"] { border-radius: 50%; }
.dining-option input[type="checkbox"], .dining-switch input[type="checkbox"] { border-radius: 5px; }
.dining-option input[type="radio"]::after {
    content: ''; width: 9px; height: 9px; border-radius: 50%; background: #5ec9a0;
    transform: scale(0);
}
.dining-option input[type="checkbox"]::after, .dining-switch input[type="checkbox"]::after {
    content: ''; width: 5px; height: 10px;
    border: solid #06231a; border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
}
.dining-option input:checked, .dining-switch input:checked { border-color: #5ec9a0; }
.dining-option input[type="checkbox"]:checked, .dining-switch input[type="checkbox"]:checked { background: #5ec9a0; }
.dining-option input[type="radio"]:checked::after { transform: scale(1); }
.dining-option input[type="checkbox"]:checked::after, .dining-switch input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.dining-option input:focus-visible, .dining-switch input:focus-visible { outline: 2px solid #94f0cc; outline-offset: 3px; }
.dining-option input:disabled, .dining-switch input:disabled { border-color: rgba(255, 255, 255, 0.28); opacity: 0.55; cursor: not-allowed; }
.dining-option-price { margin-inline-start: auto; font-size: 12px; color: rgba(148, 240, 204, 0.85); }
.dining-qty-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.dining-qty, .dining-note {
    flex: 1 1 auto; min-width: 0;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.9);
    font: inherit; font-size: 13px;
}
.dining-qty { flex: 0 0 90px; }
.dining-sheet-status { margin: 0; min-height: 16px; font-size: 12px; color: rgba(251, 191, 36, 0.9); }
.dining-sheet-actions { display: flex; gap: 8px; }
.dining-sheet-actions .dining-btn { flex: 1; }

/* ── الطلبات ─────────────────────────────────────────────────────────── */
.dining-orders { display: flex; flex-direction: column; gap: 12px; }
#diningOrdersList { display: flex; flex-direction: column; gap: 12px; }
.dining-order {
    display: flex; flex-direction: column; gap: 9px;
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}
.dining-order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dining-order-title { font-size: 14px; font-weight: 750; color: rgba(255, 255, 255, 0.9); }
.dining-order-state {
    padding: 5px 11px; border-radius: 999px;
    border: 1px solid rgba(94, 201, 160, 0.28);
    background: rgba(94, 201, 160, 0.09);
    color: rgba(148, 240, 204, 0.95);
    font-size: 11.5px; font-weight: 700;
}
.dining-order-state.is-cancelled, .dining-order-state.is-declined,
.dining-order-state.is-unknown, .dining-order-state.is-closed {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
}
.dining-order-lines { display: flex; flex-direction: column; gap: 5px; }
.dining-order-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 12.5px; color: rgba(255, 255, 255, 0.72);
}
.dining-order-total {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 13.5px; font-weight: 800; color: rgba(148, 240, 204, 0.92);
}
/* 💳 كيف يُدفع الطلب — ثمّ تنبيهُ وضع الغرفة بإطاره، لأنه خبرٌ عن فاتورة النزيل. */
.dining-order-pay { margin: -2px 0 0; font-size: 12px; line-height: 1.6; font-weight: 650; color: rgba(255, 255, 255, 0.62); }
.dining-order-notice {
    margin: 0; padding: 8px 10px; border-radius: 10px;
    border: 1px solid rgba(94, 201, 160, 0.28); background: rgba(94, 201, 160, 0.08);
    font-size: 12px; line-height: 1.7; font-weight: 650; color: rgba(148, 240, 204, 0.92);
}
.dining-order-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dining-order-thread { align-self: flex-start; }
.dining-thread { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.dining-msg {
    padding: 9px 12px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.dining-msg.is-guest { background: rgba(94, 201, 160, 0.08); border-color: rgba(94, 201, 160, 0.2); }
.dining-msg-who { display: block; font-size: 10.5px; font-weight: 750; color: rgba(255, 255, 255, 0.42); margin-bottom: 3px; }
.dining-msg p { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); word-break: break-word; }
.dining-composer { display: flex; gap: 8px; }
.dining-msg.is-reminder {
    background: rgba(251, 191, 36, 0.07); border-color: rgba(251, 191, 36, 0.24);
    align-self: center; padding: 6px 12px;
}
.dining-msg.is-reminder p { font-size: 11.5px; color: rgba(253, 224, 150, 0.92); }
.dining-msg-original {
    display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.5;
    color: rgba(255, 255, 255, 0.42); unicode-bidi: plaintext;
}
.dining-order-remind { align-self: flex-start; }

/* 📶 شريطُ المراحل — نقاطٌ على خطّ، والخطُّ يمتلئ حتى الطلب.
   العددُ من الخادم (`--dining-progress-steps`) لا من هنا: شريطٌ بستّ خاناتٍ
   ثابتة كان سيكسر نفسَه في أوّل مرحلةٍ تُضاف إلى الآلة. */
.dining-progress {
    list-style: none; margin: 2px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(var(--dining-progress-steps, 6), minmax(0, 1fr));
    gap: 0;
}
.dining-progress-step {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
    min-width: 0;
}
.dining-progress-step::before {
    content: ''; position: absolute; top: 5px; inset-inline-start: -50%; width: 100%; height: 2px;
    background: rgba(255, 255, 255, 0.10);
}
.dining-progress-step:first-child::before { display: none; }
.dining-progress-step.is-reached::before { background: rgba(94, 201, 160, 0.65); }
.dining-progress-dot {
    position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(8, 15, 20, 1);
}
.dining-progress-step.is-reached .dining-progress-dot {
    border-color: rgba(94, 201, 160, 0.9); background: rgba(94, 201, 160, 0.9);
}
.dining-progress-step.is-current .dining-progress-dot {
    box-shadow: 0 0 0 4px rgba(94, 201, 160, 0.18);
}
.dining-progress-label {
    font-size: 10px; line-height: 1.3; text-align: center;
    color: rgba(255, 255, 255, 0.42);
    max-width: 100%; overflow-wrap: anywhere;
}
.zw-session-candidate #hotelLoginScreen { visibility: hidden; }
.dining-progress-step.is-reached .dining-progress-label { color: rgba(255, 255, 255, 0.72); }
.dining-progress-step.is-current .dining-progress-label { color: rgba(148, 240, 204, 0.98); font-weight: 750; }
.dining-progress.is-terminal { opacity: 0.45; }

/* 📏 شريطٌ ضيّق: الكلمةُ كاملةً، لا مقطوعةً في منتصفها (sweep-A A5 §5).
   على ٣٢٠ بكسل تصير الخانةُ ٣٩–٤٣ بكسلاً و«Confirmed» تحتاج ٤٩، فكان
   `overflow-wrap:anywhere` يكسرها «Confirme|d». تصغيرُ الخطّ حتى تتّسع
   يعني ٨٫٥ بكسل — نصٌّ لا يُقرأ. فحين يضيق الشريطُ تتناوب التسمياتُ فوق
   الخطّ وتحته، فتأخذ كلُّ تسميةٍ عرضَ خانتين (~٧٨ بكسلاً) وتبقى سطراً واحداً.
   والعتبةُ **عرضُ الشريط لا عرضُ الشاشة**: الشريطُ نفسُه يعيش في بطاقة
   المحادثة وفي تبويب الطعام بعرضين مختلفين. وفوقها (٣٩٠ وما فوق) لا يتغيّر
   شيء. الأولى تُحاذى إلى البداية والأخيرة إلى النهاية كي لا تتجاوزا الشريط. */
.dining-progress { container: dining-progress / inline-size; }
@container dining-progress (width < 300px) {
    .dining-progress-step {
        display: grid; grid-template-rows: 13px 12px 13px; row-gap: 4px;
        justify-items: center; align-items: center;
    }
    .dining-progress-step::before { top: calc(13px + 4px + 5px); }
    .dining-progress-dot { grid-row: 2; }
    /* مطلقةٌ لا عنصرَ شبكة: عنصرٌ أعرضُ من خانته يُحاذى «بأمان» إلى البداية
       مهما طُلب منه (`center`/`end` تسقطان إلى `start` في كروم) — فخرجت
       «Delivered» عن الشريط. الموضعُ هنا صريح: وسطُ الخانة، والطرفان إلى طرفيهما. */
    .dining-progress-label {
        position: absolute; bottom: 0; inset-inline-start: 50%; transform: translateX(-50%);
        width: max-content; max-width: none;
        white-space: nowrap; overflow-wrap: normal; line-height: 13px;
    }
    [dir="rtl"] .dining-progress-label { transform: translateX(50%); }
    .dining-progress-step:nth-child(even) .dining-progress-label { top: 0; bottom: auto; }
    .dining-progress-step:first-child .dining-progress-label { inset-inline-start: 0; transform: none; }
    .dining-progress-step:last-child .dining-progress-label {
        inset-inline-start: auto; inset-inline-end: 0; transform: none;
    }
}

.dining-trust-footer {
    display: block;
    margin-top: 22px; padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 11.5px; line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
}

/* ── بطاقاتُ المحادثة ────────────────────────────────────────────────── */
/* 🍽️ **عائلةٌ واحدة: الأطباق، والمجموعة، والاعتذار، والسلّة، والطلب.**
      نفسُ العرض ونفسُ الرأس ونفسُ الذيل ونفسُ المسافات — البطاقاتُ تختلف فيما
      تحمله لا في شكلها. ونفسُ مفردات سطح الطعام: النزيلُ يتنقّل بين الاثنين في
      ثوانٍ، وبطاقةٌ بلغةٍ بصريّة ثانية تُقرأ تطبيقاً آخر.

   📐 **وتقف في عمود رسالة المساعد، لا بعرض المحادثة كلّها.** كانت ٨٦٠px على
      الحاسوب تحت فقاعةٍ عرضُها ٦٠٢: بطاقةُ «ما عندنا» سطرٌ وثلاثُ شارات في مساحةٍ
      تتّسع لعشرة. الآن تبدأ حيث يبدأ نصُّ الفقاعة (الصورةُ الرمزيّة ٤٠ + الفجوة ١٦)
      وتنتهي حيث تنتهي (`.message-content` ٧٠٪). وعلى الجوّال السطرُ كلُّه — كبطاقة
      الموافقة — لأن عمودَ الفقاعة هناك ٢٥٨px لا يتّسع لطبقين.
      ⚠️ `container` يحجب عرضَ المحتوى عن الحساب، فالعرضُ هنا صريحٌ دائماً: بطاقةٌ
      بعرضٍ «على قدر محتواها» داخل حاويةِ استعلامٍ تنكمش إلى صفر. */
.dining-chat-card {
    container: dining-chat / inline-size;
    align-self: stretch;
    width: 100%;
    margin: 4px 0 16px;
    padding: 14px;
    border: 1px solid rgba(112, 234, 200, 0.18);
    border-radius: 18px;
    background: rgba(8, 20, 27, 0.82);
    display: flex; flex-direction: column; gap: 12px;
    color: var(--text-primary);
}
/* 🍽️ البطاقةُ المشتركة (`css/food-card.css`) ترسم إطارَها بنفسها وارتفاعَها المقيس
      (٦٤ مطويّةً)، فيُنزع إطارُ الحاوية وحده. **والعرضُ عرضُ الحاوية**: حشوةُ المحادثة
      هي الهامش على الجوّال، وقاعدةُ الحاسوب أدناه تُزيحها عن الصورة الرمزيّة. كان هنا
      هامشٌ ثانٍ بـ٢٨px فوق الأوّل — بطاقةٌ بعرض ٢١٦ على شاشة ٣٢٠، فالتفّت الأسماءُ
      وتراكب زرُّ «راجع الطلب» على مجموع الصينيّة. */
.dining-chat-card:has(> .fc) {
    container: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 0;
}

/* 🗒️ صفُّ التبويب هو صفُّ البطاقة نفسُه، وتحته وحده «أضف مع ملاحظة» (انحرافٌ
      مقبول: صفُّ المحادثة فيه «+» والصحنُ والاسمُ يفتحان الورقة). */
.dining-list:has(.fc-board) { display: block; }
.dining-list .fc-board { max-width: 100%; }
.dining-list .fc-row .fc-row-extra { flex: 1 0 100%; padding-inline-start: 46px; margin-block: 0 8px; }
.dining-list .fc-row .dining-note-add {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #2c6b56;
    border-radius: 12px;
    background: #0f2a22;
    color: #8fe3c1;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}
/* 👆 أهدافُ لمسٍ بـ٤٤ على الجوّال (M6، DINING-01 G-5): تبويبُ اللوحة كان ٤١ والبحثُ ٤٢. */
@media (max-width: 480px) {
    .dining-pane-tab { min-width: 44px; }
    .dining-search input { height: 44px; }
}
@media (min-width: 769px) {
    .dining-chat-card {
        align-self: flex-start;
        width: calc(100% - 56px);
        max-width: 70%;
        margin-inline-start: 56px;
    }
}
.dining-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.dining-chat-title { font-size: 13.5px; font-weight: 750; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
/* ⏳ سطرُ الحالة في البطاقة بلا حشوة القائمة: كانت ١٤px فوقه وتحته تفصله عن الرأس
      بـ٣٨ — «مساحةٌ ميّتة» في كلّ بطاقة اعتذار. */
.dining-chat-card > .dining-empty { padding: 0; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.dining-chat-card .dining-send { align-self: stretch; }
/* 🧾 الطلبُ داخل البطاقة بلا إطارٍ ثانٍ: صندوقٌ في صندوق يُقرأ بطاقتين. */
.dining-chat-card > .dining-order { padding: 0; border: 0; border-radius: 0; background: transparent; }

/* 📄 **رأسُ ورقة الطبق** — الصورةُ بعرض الورقة بالنسبة والقصّ نفسيهما، ثمّ الاسمُ
      كاملاً والسعر. وطبقٌ بلا صورة لا يُحجز له مستطيل: الورقةُ تفاصيل، ومساحةٌ تقول
      «لا شيء» لا تفصيلَ فيها. */
.dining-sheet-dish { display: flex; flex-direction: column; gap: 12px; }
.dining-sheet-dish .dining-item-media { border-radius: 14px; }
.dining-sheet-dish-text {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px;
    min-width: 0;
}
.dining-sheet-dish .dining-sheet-title { flex: 1 1 12em; line-height: 1.45; overflow-wrap: anywhere; }
.dining-sheet-dish .dining-item-price { font-size: 15px; }
.dining-sheet-desc { margin: 0; font-size: 13px; line-height: 1.75; color: rgba(255, 255, 255, 0.66); }
/* 🧾 ما أعلنه المطبخ — مسبِّباتُ الحساسيّة مكتوبةٌ دائماً، معلنةً أو «ما أعلن». */
.dining-sheet-facts {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}
.dining-fact {
    display: grid; grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr); gap: 12px;
    margin: 0;
    font-size: 12.5px; line-height: 1.6;
}
.dining-fact-key { color: rgba(255, 255, 255, 0.5); font-weight: 650; }
.dining-fact-value { color: rgba(255, 255, 255, 0.86); overflow-wrap: anywhere; }
.dining-fact.is-warning .dining-fact-value { color: rgba(253, 224, 150, 0.95); font-weight: 650; }
.dining-fact.is-undeclared .dining-fact-value { color: rgba(255, 255, 255, 0.62); }

/* 📱 **على الجوّال الأوراقُ تصعد من الأسفل** — حيث الإبهام، وكما تُفتح كلُّ ورقةٍ في
      تطبيقات الطعام. والحشوةُ السفلى تحترم شريطَ الإيماءات.
   ⚠️ ولا `.dining-hero` هنا: كانت `padding: 18px 16px` في هذه الكتلة تأتي **بعد**
      قاعدة الجوّال (480px) فتفوز عليها بالترتيب، فتعود الترويسةُ ٢٨٥px يسكنها قرصُ
      حالةٍ واحد — «المساحةُ الميّتة» التي قاسها المالك، مُصلَحةً ومنقوضةً في ملفٍّ واحد. */
@media (max-width: 600px) {
    .dining-shell { padding: 0 10px calc(38px + var(--zw-cookie-h, 0px)); }
    .dining-sheet-overlay { align-items: flex-end; padding: 0; }
    .dining-sheet {
        width: 100%;
        max-height: 88vh;
        max-height: 88dvh;
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .dining-sheet > .dining-sheet-actions {
        bottom: calc(-20px - env(safe-area-inset-bottom, 0px));
        margin-bottom: calc(-20px - env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

html.zw-large-text .dining-surface { font-size: 1.08em; }
@media (prefers-reduced-motion: reduce) {
    .dining-btn, .dining-btn-ghost,
    .dining-chip, .dining-outlet-chip { transition: none; }
}