/* ============================================
           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. */
        .app-layout {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            width: 100%;
            /* انظر تعليق html أعلاه: `hidden` هنا كان يكسر التصاق الترويس. */
            overflow-x: hidden;
            overflow-x: clip;
        }

        /* 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;
        }

        /* Rotating wait status — "Thinking", "Gathering", "Collecting". Calm,
           low-contrast, with a gently pulsing ellipsis. Only visible while
           .awaiting-tokens; removed the moment real text streams in. */
        /* Wait-status word that gets typed out, deleted, and replaced
           (Thinking → Gathering → Collecting). The type/delete motion is
           driven in JS; the blinking caret sits right after it. No static
           ellipsis — the typing IS the animation. */
        .stream-status {
            display: inline;
            color: rgba(255, 255, 255, 0.55);
            font-size: 13.5px;
            letter-spacing: 0.1px;
        }

        /* 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
═══════════════════════════════════════════════════════════════════════════ */
.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: rgba(255,255,255,0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 0.8px solid rgba(94,201,160,0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    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: linear-gradient(135deg, rgba(94,201,160,0.85), rgba(58,168,126,0.8));
    border: 1px solid rgba(112,234,200,0.45);
    border-radius: 8px;
    color: rgba(255,255,255,0.97);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.cookie-accept-btn:hover { background: linear-gradient(135deg, rgba(94,201,160,1), rgba(58,168,126,0.95)); transform: translateY(-1px); }
.cookie-accept-btn:active { transform: translateY(0); }
.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; text-align: center; }
    .cookie-bar-icon { display: none; }
}

/* 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
═══════════════════════════════════════════════════════════════════════════ */
.glc-screen {
    position: fixed;
    inset: 0;
    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: center;
    flex-direction: column;
    z-index: 99999;
    padding: 24px;
}
.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) {
    .glc-screen { padding: 20px 16px; align-items: center; justify-content: 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. */
html.zw-large-text { font-size: 18px; }
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;
    grid-template-columns: repeat(2, 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;
}

.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 ─────────────────────────────────────── */
.guidebook-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 8px;
    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.78);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.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-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;
    top: 78px;
    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;
}
.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; }
    .guidebook-toolbar { top: 4px; }
    .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)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .app-header {
        gap: 8px;
        padding: 8px 10px;
    }

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

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

    .guest-menu {
        top: 68px;
        inset-inline-end: 12px;
    }
}

/* 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;
}

.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 {
    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 / Complaints rows. */
#complaintsStatusBadge,
#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;
}
.guest-menu.labels-on #complaintsStatusBadge,
.guest-menu.labels-on #requestsStatusBadge {
    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 #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 {
        position: relative;
    }

    .header-chip-icon::after,
    #guestMenuBtn::after,
    .zawaya-mode-tab::after,
    #glcLangToggle::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;
    }
}