/* Discover ≤1100px: bottomsheet.css + tokens. Non-discover phones only here. */ /* Floating support FAB — solid brand (global) */ #supportChatWidget { --support-chat-fab-bg: var(--color-primary-blue, #2563eb); --support-chat-fab-bg-hover: var(--color-primary-blue-hover, #1e40af); --support-chat-fab-icon: #ffffff; --support-chat-fab-badge: #ef4444; --support-chat-shell-bg: #ffffff; --support-chat-shell-border: rgba(15, 23, 42, 0.1); --support-chat-shell-shadow: 0 18px 48px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.08); /* Header + feed share a quiet warm-neutral band */ --support-chat-header-bg: #f5f7fa; --support-chat-header-ink: #0f172a; --support-chat-header-muted: #64748b; --support-chat-header-line: rgba(15, 23, 42, 0.08); --support-chat-feed-bg: #f5f7fa; --support-chat-compose-bg: #ffffff; } /* * Canonical floating FAB geometry (settings page reference). * Discover nudges slightly toward the bottom-right corner; sheet mode overrides bottom only. */ :root { --support-chat-fab-size: 3rem; --support-chat-fab-icon-size: 1.25rem; --support-chat-fab-gap: max(0.5rem, env(safe-area-inset-bottom, 0px)); --support-chat-fab-right: max(0.5rem, env(safe-area-inset-right, 0px)); --support-chat-fab-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); --support-chat-dialog-stack: 3.25rem; --support-chat-fab-opacity: 1; --support-chat-fab-opacity-hover: 1; /* Phone normal-mode height (JS maxH mirrors ~28.5rem / 456px) */ --support-chat-normal-max-height-mobile: min( 28.5rem, 58dvh, calc(100dvh - 10rem - env(safe-area-inset-bottom, 0px)) ); /* Sheet-adjacent surfaces (checkout funnel) — same bottom-corner inset as global FAB */ --support-chat-sheet-fab-bottom: max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 0.5rem)); --support-chat-sheet-dialog-bottom: max(3.75rem, calc(env(safe-area-inset-bottom, 0px) + 3.25rem)); --support-chat-sheet-large-top: max( calc(var(--discover-current-topbar-height, 4.5rem) + 0.5rem), calc(env(safe-area-inset-top, 0px) + 3.25rem) ); --support-chat-sheet-large-right: max(0.5rem, env(safe-area-inset-right, 0px)); --support-chat-sheet-large-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); --support-chat-sheet-large-left: max(0.5rem, env(safe-area-inset-left, 0px)); --support-chat-sheet-large-z: calc(var(--z-discover-control, 10050) + 25); } body:has(.checkout-container) { --support-chat-fab-right: max(0.5rem, env(safe-area-inset-right, 0px)); } /* Discover desktop: tuck FAB into bottom-right corner */ @media (min-width: 1101px) { body.discover-page:not(.chat-page) #supportChatWidget:not(.support-chat-inline-mode) { --support-chat-fab-right: max(0.75rem, env(safe-area-inset-right, 0px)); --support-chat-fab-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); } } #supportChatWidget:not(.support-chat-inline-mode) { position: fixed !important; bottom: var(--support-chat-fab-bottom) !important; right: var(--support-chat-fab-right) !important; left: auto !important; top: auto !important; transform: none !important; z-index: var(--z-support-chat); } #supportChatButton.support-chat-fab { width: var(--support-chat-fab-size) !important; height: var(--support-chat-fab-size) !important; min-width: var(--support-chat-fab-size) !important; min-height: var(--support-chat-fab-size) !important; } #supportChatButton.support-chat-fab .support-chat-fab__icon, #supportChatWidget #chatButtonIcon svg { width: var(--support-chat-fab-icon-size) !important; height: var(--support-chat-fab-icon-size) !important; } #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog:not([data-booking-page="true"]):not([data-size-mode="large"]):not(.support-chat-keyboard-fit) { bottom: calc(var(--support-chat-fab-bottom) + var(--support-chat-dialog-stack)) !important; right: var(--support-chat-fab-right) !important; } /* Calm solid blue FAB — quiet elevation, no loud glow */ #supportChatWidget #supportChatButton { background: var(--support-chat-fab-bg) !important; background-color: var(--support-chat-fab-bg) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14), 0 1px 2px rgba(37, 99, 235, 0.12) !important; color: var(--support-chat-fab-icon) !important; opacity: var(--support-chat-fab-opacity) !important; transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } #supportChatWidget #supportChatButton:hover, #supportChatWidget #supportChatButton:focus-visible { background: var(--support-chat-fab-bg-hover) !important; background-color: var(--support-chat-fab-bg-hover) !important; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(37, 99, 235, 0.16) !important; } #supportChatWidget #supportChatButton:active { transform: scale(0.97); } .dark #supportChatWidget { --support-chat-fab-bg: #3b82f6; --support-chat-fab-bg-hover: #2563eb; --support-chat-fab-icon: #ffffff; --support-chat-fab-badge: #f87171; --support-chat-shell-bg: rgb(17, 24, 39); --support-chat-shell-border: rgba(148, 163, 184, 0.18); --support-chat-shell-shadow: 0 18px 48px rgba(0, 0, 0, 0.48), 0 4px 12px rgba(0, 0, 0, 0.32); --support-chat-header-bg: #111827; --support-chat-header-ink: #f8fafc; --support-chat-header-muted: #94a3b8; --support-chat-header-line: rgba(148, 163, 184, 0.16); --support-chat-feed-bg: #0f1623; --support-chat-compose-bg: #1f2937; } .dark #supportChatWidget #supportChatButton { border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(37, 99, 235, 0.18) !important; } .dark #supportChatWidget #supportChatButton:hover, .dark #supportChatWidget #supportChatButton:focus-visible { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(37, 99, 235, 0.22) !important; } #supportChatWidget #supportChatButton svg, #supportChatWidget #supportChatButton .text-white svg, #supportChatWidget #chatButtonIcon, #supportChatWidget #chatButtonIcon svg { color: var(--support-chat-fab-icon) !important; stroke: var(--support-chat-fab-icon) !important; } #supportChatWidget #unreadBadge { background-color: var(--support-chat-fab-badge) !important; color: #ffffff !important; border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22); } /* * When mobile bottom nav is visible, lift FAB by measured offset (host/renter app pages). * :has() covers first paint; .swiftspot-bottom-nav-visible refines after JS measure. * List Spot sets the same --support-chat-fab-* tokens as Discover (listspot-support.css). */ body.swiftspot-bottom-nav-visible:not(.discover-page):not(.chat-page):not(.listspot-wizard) #supportChatWidget:not(.support-chat-inline-mode) { --support-chat-fab-bottom: calc( var(--swiftspot-mobile-bottom-nav-offset, 4.5rem) + 0.25rem ); } @media (max-width: 767px) { body:not(.discover-page):not(.chat-page):not(.listspot-wizard):has(#mobile-bottom-nav) #supportChatWidget:not(.support-chat-inline-mode) { --support-chat-fab-bottom: calc( var(--swiftspot-mobile-bottom-nav-offset, 4.5rem) + 0.25rem ); } } @media (min-width: 768px) and (max-width: 1023px) { body:not(.discover-page):not(.chat-page):not(.listspot-wizard):has(#mobile-bottom-nav.mobile-bottom-nav--host-tablet) #supportChatWidget:not(.support-chat-inline-mode) { --support-chat-fab-bottom: calc( var(--swiftspot-mobile-bottom-nav-offset, 4.5rem) + 0.25rem ); } } /* Desktop/tablet floating large: expand in place above FAB (not full-bleed sheet surfaces). */ @media (min-width: 641px) { body:not(.discover-page):not(:has(.checkout-container)) #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog[data-size-mode="large"]:not([data-booking-page="true"]):not(.support-chat-keyboard-fit) { bottom: calc(var(--support-chat-fab-bottom) + var(--support-chat-dialog-stack)) !important; right: var(--support-chat-fab-right) !important; width: 480px !important; height: min(620px, calc(100dvh - 8rem)) !important; max-width: min(480px, calc(100vw - 2rem)) !important; max-height: min(85vh, calc(100dvh - 8rem)) !important; min-height: 420px !important; } } @media (max-width: 640px) { :root { --support-chat-fab-size: 2.75rem; --support-chat-fab-icon-size: 1.125rem; --support-chat-fab-gap: max(0.5rem, env(safe-area-inset-bottom, 0px)); --support-chat-fab-right: max(0.5rem, env(safe-area-inset-right, 0px)); --support-chat-fab-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); --support-chat-dialog-stack: 3rem; } body:has(.checkout-container) { --support-chat-fab-right: max(0.5rem, env(safe-area-inset-right, 0px)); } #supportChatWidget:not(.support-chat-inline-mode) { --support-chat-large-top: max(3.25rem, calc(env(safe-area-inset-top, 0px) + 3.25rem)); --support-chat-large-right: max(0.5rem, env(safe-area-inset-right, 0px)); --support-chat-large-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); --support-chat-large-left: max(0.5rem, env(safe-area-inset-left, 0px)); } #supportChatWidget:not(.support-chat-inline-mode) { max-width: calc(100vw - max(2rem, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))) !important; } #supportChatDialog:not([data-booking-page="true"]):not([data-size-mode="large"]):not(.support-chat-keyboard-fit) { width: min(20rem, calc(100vw - 1.5rem)) !important; max-width: calc(100vw - 1.5rem) !important; max-height: var(--support-chat-normal-max-height-mobile) !important; min-height: 0 !important; } } /* * Checkout funnel (≤1100px): same sheet inset model as Discover (see bottomsheet.css). * Tokens live on :root above so both surfaces stay in sync. */ @media (max-width: 1100px) { body:has(.checkout-container) { --support-chat-fab-right: max(0.5rem, env(safe-area-inset-right, 0px)); /* ~3.5px above the shared sheet inset — sits cleanly with the sticky CTA */ --support-chat-fab-bottom: calc(var(--support-chat-sheet-fab-bottom) + 0.21875rem); --support-chat-fab-size: 2.25rem; --support-chat-fab-icon-size: 1rem; --discover-support-chat-dialog-bottom: var(--support-chat-sheet-dialog-bottom); --discover-support-chat-large-top: var(--support-chat-sheet-large-top); --discover-support-chat-large-right: var(--support-chat-sheet-large-right); --discover-support-chat-large-bottom: var(--support-chat-sheet-large-bottom); --discover-support-chat-large-left: var(--support-chat-sheet-large-left); --discover-support-chat-large-z: var(--support-chat-sheet-large-z); } body:has(.checkout-container).support-chat-open #supportChatWidget, body:has(.checkout-container).support-chat-open #supportChatDialog { z-index: var(--discover-support-chat-large-z) !important; } body:has(.checkout-container) #supportChatWidget { position: fixed !important; display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body:has(.checkout-container) #supportChatButton { visibility: visible !important; pointer-events: auto !important; } body:has(.checkout-container):not(.support-chat-open) #supportChatWidget { z-index: var(--z-support-chat) !important; } body:has(.checkout-container).support-chat-open #supportChatDialog:not([data-size-mode="large"]):not(.support-chat-keyboard-fit) { display: flex !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } /* Positioning locked; opacity still animates via --open / --closed */ body:has(.checkout-container).support-chat-open #supportChatDialog.support-chat-dialog--closed { transform: none !important; } body:has(.checkout-container) #supportChatWidget:not(.support-chat-inline-mode) { transform: none !important; } body:has(.checkout-container) #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog:not([data-booking-page="true"]):not([data-size-mode="large"]):not(.support-chat-keyboard-fit) { right: var(--support-chat-fab-right) !important; bottom: var(--discover-support-chat-dialog-bottom) !important; width: min(20rem, calc(100vw - 1.5rem)) !important; max-height: var(--support-chat-normal-max-height-mobile) !important; min-height: 0 !important; } body:has(.checkout-container) #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog[data-size-mode="large"]:not([data-booking-page="true"]):not(.support-chat-keyboard-fit) { position: fixed !important; top: var(--discover-support-chat-large-top) !important; right: var(--discover-support-chat-large-right) !important; bottom: var(--discover-support-chat-large-bottom) !important; left: var(--discover-support-chat-large-left) !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; transform: none !important; z-index: var(--discover-support-chat-large-z) !important; display: flex !important; visibility: visible !important; pointer-events: auto !important; } body:has(.checkout-container) #supportChatDialog.support-chat-keyboard-fit, body:has(.checkout-container) #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog.support-chat-keyboard-fit { inset: unset !important; top: unset !important; left: unset !important; right: auto !important; bottom: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; } body:has(.checkout-container).support-chat-keyboard-open #supportChatWidget:not(.support-chat-inline-mode) #supportChatButton { visibility: hidden; pointer-events: none; } } /* iOS-style typing indicator - reduced animation intensity */ .typing-indicator { display: flex; align-items: center; padding: 10px 16px; background: #F2F2F7; border-radius: 18px; border-bottom-left-radius: 4px; max-width: 60px; margin-right: auto; } .dark .typing-indicator { background: #2C2C2E; } .typing-dot { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; animation: typing-bounce 2s infinite ease-in-out; } .typing-dot:nth-child(1) { animation-delay: -0.32s; } .typing-dot:nth-child(2) { animation-delay: -0.16s; } .typing-dot:nth-child(3) { animation-delay: 0s; } @keyframes typing-bounce { 0%, 80%, 100% { transform: scale(0.9); opacity: 0.6; } 40% { transform: scale(1); opacity: 1; } } #supportChatWidget .support-typing-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 74%; margin-right: auto; } #supportChatWidget .support-typing-miniprompt { margin: 0; padding: 0 2px; font-size: 12px; line-height: 1.35; color: #636366; transition: opacity 0.14s ease; } .dark #supportChatWidget .support-typing-miniprompt { color: #98989d; } #supportChatWidget .support-typing-miniprompt--dim { opacity: 0.45; } #supportChatWidget .typing-indicator-container.support-chat-swoosh-out { transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important; transform: translateX(-115%) !important; opacity: 0 !important; } #supportChatWidget .message-container.support-chat-swoosh-out { transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important; } #supportChatWidget .bot-message.support-chat-swoosh-out { transform: translateX(-115%) !important; opacity: 0 !important; } #supportChatWidget .user-message.support-chat-swoosh-out { transform: translateX(115%) !important; opacity: 0 !important; } #supportChatWidget .message-container.message-swoosh-in { transform: translateY(14px); opacity: 0; } #supportChatWidget .message-container.message-swoosh-in.show { opacity: 1; transform: translateY(0); transition: opacity 0.42s ease, transform 0.48s cubic-bezier(0.25, 0.8, 0.25, 1); } @media (prefers-reduced-motion: reduce) { #supportChatWidget .message-container.support-chat-swoosh-out, #supportChatWidget .typing-indicator-container.support-chat-swoosh-out { transform: none !important; opacity: 0 !important; transition: opacity 0.2s ease !important; } #supportChatWidget .message-container.message-swoosh-in.show { transition: opacity 0.2s ease !important; } } /* Auto-growing textarea */ #chatInput { min-height: 20px; max-height: 100px; overflow-y: hidden; /* Hide by default, JS will handle showing when needed */ overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; overscroll-behavior: contain; /* Prevent scroll chaining */ } /* Only show scrollbar when content exceeds max height */ #chatInput.has-scroll { overflow-y: auto !important; } /* Ensure textarea has proper flex layout */ #chatInput { min-width: 0; /* Allow flex item to shrink */ flex: 1 1 auto; } #chatInput::-webkit-scrollbar { width: 4px; } #chatInput::-webkit-scrollbar-track { background: transparent; } #chatInput::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; } /* Smooth, native scrolling for messages. */ #chatMessages { scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; /* Native message-feed scroll; avoid parent conflicts */ } /* Inner wrapper stays passive; the scroll container owns movement. */ #chatMessages .chat-messages-inner { min-height: 100%; transform: none !important; transition: none !important; will-change: auto; } /* Viewport-safe normal-mode shell; inline, booking, and large modes override below. */ #supportChatDialog:not([data-size-mode="large"]) { min-height: 0; width: min(23rem, calc(100vw - 2rem)); height: min(560px, calc(100dvh - 6rem)); max-height: min(560px, calc(100dvh - 6rem)) !important; overscroll-behavior-x: contain; overscroll-behavior-y: auto; } #supportChatDialog { min-height: 0; overscroll-behavior-x: contain; overscroll-behavior-y: auto; } @media (max-width: 640px) { #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog[data-size-mode="normal"]:not([data-booking-page="true"]):not(.support-chat-keyboard-fit) { width: min(20rem, calc(100vw - 1.5rem)); height: var(--support-chat-normal-max-height-mobile); max-height: var(--support-chat-normal-max-height-mobile) !important; } } #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog[data-size-mode="normal"]:not([data-booking-page="true"]) { min-height: 0; width: min(23rem, calc(100vw - 2rem)); } .chat-container .chat-main.support-inline-from-feed { min-height: 0; overflow: hidden; } .chat-container .chat-main.support-inline-from-feed #support-chat-inline-slot { flex: 1 1 0%; min-height: 0; max-height: 100%; overflow: hidden; } /* Prevent horizontal scroll chaining only */ #supportChatWidget { overscroll-behavior-x: contain; overscroll-behavior-y: auto; } /* Inline slot: My Messages / Host Chat Center - widget moves here and centers where old chat feed was */ .chat-main { display: flex; flex-direction: column; } .support-chat-inline-slot { display: none; flex: 0 0 0; min-height: 0; height: 0; max-height: 0; overflow: hidden; padding: 0; margin: 0; pointer-events: none; } .support-chat-inline-slot[aria-hidden="false"] { display: flex; align-items: stretch; justify-content: flex-start; flex: 1 1 0%; min-height: 0; height: auto; max-height: 100%; overflow: hidden; position: relative; pointer-events: auto; } /* Idle slot must not reserve thread column space (beats support-inline-from-feed). */ .chat-main.support-inline-from-feed #support-chat-inline-slot[aria-hidden="true"], body.chat-spot-assistant-active .chat-main.support-inline-from-feed #support-chat-inline-slot[aria-hidden="true"], #my-bookings-page .renter-chat .chat-main.support-inline-from-feed #support-chat-inline-slot[aria-hidden="true"] { display: none !important; flex: 0 0 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; } .chat-main.support-inline-from-feed .support-chat-inline-slot #supportChatWidget, .support-chat-inline-slot #supportChatWidget { position: relative; bottom: auto; right: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; flex: 1 1 0%; height: 100%; width: 100%; max-width: 100%; display: flex; min-height: 0; } .support-chat-inline-mode #supportChatButton { display: none; } /* Spot Assistant (inline messaging embed): no idle “typically replies” subtitle. */ .support-chat-inline-mode #statusText, body.chat-spot-assistant-active #supportChatWidget #statusText { display: none !important; } /* Full Messages / Host Chat pages embed Spot Assistant inline only when selected. */ html.chat-page #supportChatWidget:not(.support-chat-inline-mode), body.chat-page #supportChatWidget:not(.support-chat-inline-mode), body.my-bookings-messaging-tab #supportChatWidget:not(.support-chat-inline-mode), body.host-inbox-messaging-tab #supportChatWidget:not(.support-chat-inline-mode) { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } html.chat-page #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog, body.chat-page #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog, body.my-bookings-messaging-tab #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog, body.host-inbox-messaging-tab #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog { display: none !important; position: static !important; bottom: auto !important; right: auto !important; transform: none !important; } .support-chat-inline-mode #chatMessages { flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; } /* Spot Assistant opened from messaging conversation list: column has stable height before widget mounts */ .chat-main.support-inline-from-feed { flex: 1 1 0%; min-height: 0; } .chat-main.support-inline-from-feed #support-chat-inline-slot { flex: 1 1 0%; min-height: 0; overflow: hidden; align-items: stretch; } .support-chat-inline-mode:not(.support-chat-animate-in) #supportChatDialog { transform: scale(0.92); opacity: 0; } .support-chat-inline-mode.support-chat-animate-in #supportChatDialog { transform: scale(1); opacity: 1; } /* Chat pages embed Spot Assistant as an inline panel. Keep it stable and avoid float-widget entrance animations that trigger extra layout/compositing work. */ html.chat-page .support-chat-inline-mode #supportChatDialog, body.chat-page .support-chat-inline-mode #supportChatDialog, body.my-bookings-messaging-tab .support-chat-inline-mode #supportChatDialog, body.host-inbox-messaging-tab .support-chat-inline-mode #supportChatDialog, .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog { transform: none !important; opacity: 1 !important; transition: none !important; } @media (max-width: 640px) { html.chat-page .support-chat-inline-mode #supportChatMinimize, body.chat-page .support-chat-inline-mode #supportChatMinimize, body.my-bookings-messaging-tab .support-chat-inline-mode #supportChatMinimize, .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatMinimize, #my-bookings-page .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatMinimize { display: none !important; visibility: hidden !important; pointer-events: none !important; } } /* Messages center inline embed: hide resize + duplicate close at all viewports */ .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatMinimize, .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatClose, #my-bookings-page .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatMinimize, #my-bookings-page .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatClose { display: none !important; visibility: hidden !important; pointer-events: none !important; } .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog > div:first-child, #my-bookings-page .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog > div:first-child { display: none !important; } .chat-main.support-inline-from-feed .support-chat-inline-mode #chatForm, #my-bookings-page .chat-main.support-inline-from-feed .support-chat-inline-mode #chatForm { display: flex !important; visibility: visible !important; flex-shrink: 0 !important; pointer-events: auto !important; } .chat-main.support-inline-from-feed .support-chat-inline-mode #quickActions, #my-bookings-page .chat-main.support-inline-from-feed .support-chat-inline-mode #quickActions { display: block !important; visibility: visible !important; flex-shrink: 0 !important; } /* Booking page specific - ensure chat is fully visible (legacy booking flows only; not checkout) */ .booking-container ~ #supportChatWidget #supportChatDialog, #supportChatDialog[data-booking-page="true"] { height: min(550px, calc(100dvh - 6rem)) !important; max-height: min(75vh, calc(100dvh - 6rem)) !important; min-height: 240px !important; } /* Mobile booking pages - compact panel above keyboard */ @media (max-width: 768px) { #supportChatDialog[data-booking-page="true"]:not(.support-chat-keyboard-fit) { height: min(28.5rem, 58dvh, calc(100dvh - 9rem)) !important; max-height: min(28.5rem, 58dvh, calc(100dvh - 9rem)) !important; min-height: 0 !important; transform: none !important; } } /* Textarea sizing */ #chatInput { min-height: 36px; max-height: 120px; overflow-x: hidden !important; pointer-events: auto; caret-color: #2563eb; /* Blue cursor for visibility */ } /* Dark mode cursor color */ @media (prefers-color-scheme: dark) { #chatInput { caret-color: #60a5fa; /* Lighter blue for dark mode */ } } /* Make cursor more visible when dark class is applied */ .dark #chatInput { caret-color: #60a5fa; } /* Ensure chat form doesn't overflow or block other elements */ #chatForm { position: relative; z-index: var(--z-base, 1); pointer-events: auto; } /* Support chat widget should only capture pointer events on itself, not block page */ #supportChatWidget { pointer-events: none; } #supportChatWidget > * { pointer-events: auto; } /* Ensure dialog is contained and doesn't overflow */ #supportChatDialog { pointer-events: auto; position: fixed !important; z-index: var(--z-support-chat) !important; } /* Compact product chrome header */ #supportChatWidget .support-chat-header { background: var(--support-chat-header-bg) !important; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.55) 0%, transparent 100% ) !important; color: var(--support-chat-header-ink) !important; border-bottom: 1px solid var(--support-chat-header-line) !important; } .dark #supportChatWidget .support-chat-header { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100% ) !important; } /* Row: title left, close/min flush right (do not grow the controls group) */ #supportChatWidget .support-chat-header > .flex { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 0.5rem !important; min-width: 0 !important; } #supportChatWidget .support-chat-header > .flex > .flex.items-center:not(.support-chat-header__controls) { flex: 1 1 auto !important; min-width: 0 !important; } #supportChatWidget .support-chat-header__controls { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; margin-left: auto !important; margin-right: 0 !important; gap: 0.125rem !important; min-width: 0 !important; position: relative !important; z-index: 2 !important; } #supportChatWidget .support-chat-header h3 { color: var(--support-chat-header-ink) !important; letter-spacing: -0.015em; } #supportChatWidget .support-chat-header #statusText { color: var(--support-chat-header-muted) !important; } #supportChatWidget .support-chat-header__avatar { background: rgba(37, 99, 235, 0.12) !important; color: var(--color-primary-blue, #2563eb) !important; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12) !important; } #supportChatWidget .support-chat-header__online { background: #22c55e !important; border: 2px solid var(--support-chat-header-bg) !important; } #supportChatWidget .support-chat-messages, #supportChatWidget #chatMessages { background: var(--support-chat-feed-bg) !important; background-image: linear-gradient( 180deg, rgba(37, 99, 235, 0.035) 0%, transparent 12rem ) !important; } .dark #supportChatWidget .support-chat-messages, .dark #supportChatWidget #chatMessages { background-image: linear-gradient( 180deg, rgba(59, 130, 246, 0.06) 0%, transparent 12rem ) !important; } #supportChatWidget .support-chat-quick-actions, #supportChatWidget #quickActions { background: var(--support-chat-feed-bg) !important; border-top: 1px solid var(--support-chat-header-line) !important; } #supportChatWidget .support-chat-compose, #supportChatWidget #chatForm { background: var(--support-chat-compose-bg) !important; border-top: 1px solid var(--support-chat-header-line) !important; box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.04); } .dark #supportChatWidget .support-chat-compose, .dark #supportChatWidget #chatForm { box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.2); } #supportChatWidget #chatInput { background: var(--support-chat-shell-bg) !important; border: 1px solid rgba(148, 163, 184, 0.55) !important; color: var(--support-chat-header-ink) !important; box-shadow: none !important; } #supportChatWidget #chatInput::placeholder { color: #94a3b8 !important; } #supportChatWidget #chatInput:focus { border-color: rgba(37, 99, 235, 0.55) !important; } .dark #supportChatWidget #chatInput { background: #111827 !important; border-color: rgba(148, 163, 184, 0.28) !important; color: #f8fafc !important; } /* Compact header + send controls (all viewports) */ #supportChatWidget .support-chat-header-btn, #supportChatWidget #supportChatMinimize, #supportChatWidget #supportChatClose { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.3125rem !important; width: 1.75rem !important; height: 1.75rem !important; min-width: 1.75rem !important; min-height: 1.75rem !important; border-radius: 9999px !important; flex-shrink: 0; color: var(--support-chat-header-muted) !important; } #supportChatWidget .support-chat-header-btn:hover, #supportChatWidget #supportChatMinimize:hover, #supportChatWidget #supportChatClose:hover { background: rgba(15, 23, 42, 0.06) !important; color: var(--support-chat-header-ink) !important; } .dark #supportChatWidget .support-chat-header-btn:hover, .dark #supportChatWidget #supportChatMinimize:hover, .dark #supportChatWidget #supportChatClose:hover { background: rgba(148, 163, 184, 0.12) !important; } #supportChatWidget .support-chat-header-btn svg, #supportChatWidget #supportChatMinimize svg, #supportChatWidget #supportChatClose svg { width: 0.9375rem !important; height: 0.9375rem !important; } #supportChatWidget .support-chat-send-btn, #supportChatWidget #chatSubmit { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.375rem !important; width: 2rem !important; height: 2rem !important; min-width: 2rem !important; min-height: 2rem !important; max-width: 2rem !important; max-height: 2rem !important; border-radius: 9999px !important; flex-shrink: 0; } #supportChatWidget .support-chat-send-btn svg, #supportChatWidget #chatSubmit svg { width: 1rem !important; height: 1rem !important; } #supportChatWidget #chatForm { gap: 0.375rem !important; } /* Additional padding for messages container to prevent content from being cut off */ #chatMessages { padding: 0.875rem 0.875rem 1rem !important; } #chatMessages::-webkit-scrollbar { width: 6px; } #chatMessages::-webkit-scrollbar-track { background: transparent; } #chatMessages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .dark #chatMessages::-webkit-scrollbar-thumb { background: #4b5563; } /* Message animation - reduced intensity */ .message-appear { animation: messageSlideIn 0.2s ease-out forwards; } @keyframes messageSlideIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* Cache banner styling */ .cache-banner { position: sticky; top: 0; z-index: var(--z-elevated, 10); background: #eff6ff; border-bottom: 1px solid #bfdbfe; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .cache-banner button { padding: 2px 8px; border-radius: 4px; transition: background-color 0.2s; } .cache-banner button:hover { background-color: rgba(59, 130, 246, 0.1); } /* Quick action pills - quiet ghost chips */ #supportChatWidget .quick-action-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 1.75rem; padding: 0.3125rem 0.7rem; background: transparent; border: 1px solid rgba(148, 163, 184, 0.55); border-radius: 999px; font-size: 0.75rem; font-weight: 500; color: #475569; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; user-select: none; white-space: nowrap; line-height: 1.2; cursor: pointer; pointer-events: auto; box-shadow: none; } #supportChatWidget .quick-action-pill:hover { background: rgba(37, 99, 235, 0.06); border-color: rgba(37, 99, 235, 0.35); color: #1d4ed8; box-shadow: none; } #supportChatWidget .quick-action-pill:active { transform: scale(0.98); } /* Ensure quick actions container is clickable */ #quickActions, #quickActionsList { pointer-events: auto !important; } /* Single row: scroll horizontally inside popup when pills overflow; hide scrollbar (still scrollable) */ #quickActionsList { -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 0.375rem; } #quickActionsList::-webkit-scrollbar { display: none; width: 0; height: 0; } #quickActionsList > * { pointer-events: auto !important; flex-shrink: 0; } /* Dark mode - scoped to support chat only */ .dark #supportChatWidget .quick-action-pill { background: transparent; border-color: rgba(148, 163, 184, 0.28); color: #cbd5e1; } .dark #supportChatWidget .quick-action-pill:hover { background: rgba(59, 130, 246, 0.12); border-color: rgba(147, 197, 253, 0.45); color: #93c5fd; } /* Clear History stays inside the chat quick-action rail. */ #supportChatWidget .quick-action-pill.clear-history-pill { background: transparent; border-color: rgba(248, 113, 113, 0.35); color: #b91c1c; } #supportChatWidget .quick-action-pill.clear-history-pill:hover { background: rgba(254, 242, 242, 0.9); border-color: rgba(248, 113, 113, 0.55); } .dark #supportChatWidget .quick-action-pill.clear-history-pill { background: transparent; border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; } .dark #supportChatWidget .quick-action-pill.clear-history-pill:hover { background: rgba(127, 29, 29, 0.28); border-color: rgba(248, 113, 113, 0.5); } /* Removed dark mode hover effects */ /* Phones + tablets (incl. Discover ≤1100px): tighter chrome, smaller action pills */ @media (max-width: 1100px) { #supportChatWidget .support-chat-header-btn, #supportChatWidget #supportChatMinimize, #supportChatWidget #supportChatClose { width: 1.625rem !important; height: 1.625rem !important; min-width: 1.625rem !important; min-height: 1.625rem !important; padding: 0.25rem !important; } #supportChatWidget .support-chat-header-btn svg, #supportChatWidget #supportChatMinimize svg, #supportChatWidget #supportChatClose svg { width: 0.875rem !important; height: 0.875rem !important; } #supportChatWidget .support-chat-send-btn, #supportChatWidget #chatSubmit { width: 1.875rem !important; height: 1.875rem !important; min-width: 1.875rem !important; min-height: 1.875rem !important; max-width: 1.875rem !important; max-height: 1.875rem !important; padding: 0.3125rem !important; } #supportChatWidget .support-chat-send-btn svg, #supportChatWidget #chatSubmit svg { width: 0.9375rem !important; height: 0.9375rem !important; } #supportChatWidget .quick-action-pill { padding: 0.3125rem 0.7rem !important; font-size: 0.75rem !important; line-height: 1.2 !important; min-height: 1.875rem !important; border-radius: 999px !important; } #supportChatWidget #quickActions { padding: 0.3125rem 0.5rem !important; } #supportChatWidget #chatForm { padding: 0.4375rem 0.5rem !important; gap: 0.3125rem !important; } #supportChatWidget #chatInput { padding: 0.4375rem 0.625rem !important; min-height: 2rem !important; font-size: 16px !important; line-height: 1.25 !important; } #supportChatWidget #chatMessages { /* Extra top pad so the first time banner is not flush under the header */ padding: 0.875rem 0.5rem 0.625rem !important; } #supportChatWidget #chatMessages .chat-messages-inner > .support-chat-timestamp:first-child { margin-top: 0.25rem; } #supportChatWidget #supportChatDialog > div:first-child > div { padding: 0.4375rem 0.5rem !important; } } /* Responsive adjustments (non-discover: discover uses bottomsheet ≤1100px) */ @media (max-width: 640px) { body:not(.discover-page):not(.chat-page) #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog:not(.support-chat-keyboard-fit) { width: calc(100vw - 1.5rem); } /* Reduce quick actions section padding */ #quickActions { padding: 0.375rem 0.625rem !important; } /* Give more space to chat messages */ #chatMessages { flex: 1 1 0% !important; min-height: 0 !important; } } @media (max-width: 520px) { body:not(.discover-page):not(:has(.checkout-container)) { --support-chat-fab-size: 2.75rem; --support-chat-fab-icon-size: 1.125rem; } /* Keep quick actions readable on small phones; scroll horizontally instead of shrinking type */ #supportChatWidget .quick-action-pill { padding: 0.3125rem 0.65rem !important; font-size: 0.75rem !important; line-height: 1.2 !important; min-height: 1.875rem !important; } /* Reduce quick actions container even more */ #quickActions { padding: 0.25rem 0.5rem !important; } /* Maximize chat messages area on small phones */ #chatMessages { min-height: 0 !important; } /* Make chat dialog properly sized for small phones */ /* REMOVED: Redundant and conflicting CSS that breaks discover page chat support container #supportChatDialog { height: calc(100vh - 18rem) !important; max-height: 55vh !important; bottom: 4rem !important; top: 4rem !important; position: fixed !important; } */ } /* Tablet dialog sizing (not Discover: sheet breakpoint 1100px uses bottomsheet) */ @media (min-width: 641px) and (max-width: 1023px) { body:not(.discover-page):not(.chat-page) #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog { width: min(23rem, calc(100vw - 2rem)) !important; height: min(560px, calc(100dvh - 6rem)) !important; max-height: min(560px, calc(100dvh - 6rem)) !important; } } /* Mobile optimizations - compact chrome, full-screen open on phones (see customerSupportChat.js) */ @media (max-width: 640px) { /* Hide collapse/expand on phones; close remains the exit control. */ #supportChatWidget #supportChatMinimize { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; min-width: 0 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } #supportChatWidget #supportChatClose { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; width: 2rem !important; height: 2rem !important; min-width: 2rem !important; min-height: 2rem !important; padding: 0.375rem !important; } #supportChatWidget #chatCsrfToken { padding: 0 !important; min-height: 0 !important; min-width: 0 !important; border: 0 !important; } #supportChatWidget #chatInput { font-size: 16px !important; } /* Title takes free width; close stays end-aligned (no mid-header gap). */ #supportChatWidget .support-chat-header > .flex { gap: 0.375rem !important; padding-right: 0.125rem; } #supportChatWidget .support-chat-header > .flex > .flex.items-center:not(.support-chat-header__controls) { flex: 1 1 auto !important; min-width: 0 !important; } #supportChatWidget .support-chat-header__controls { flex: 0 0 auto !important; margin-left: auto !important; align-self: center !important; } #supportChatWidget #supportChatClose { margin-left: 0 !important; margin-right: 0 !important; } #supportChatWidget #statusText { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #supportChatWidget .message-bubble { padding: 8px 12px; font-size: 13px; line-height: 1.45; } #supportChatWidget .message-container { margin-bottom: 10px; } #supportChatWidget .support-chat-timestamp { margin: 0.625rem auto 0.625rem; font-size: 10px; padding: 0.2rem 0.55rem; } #supportChatWidget #chatMessages .chat-messages-inner > .support-chat-timestamp:first-child { margin-top: 0.375rem; } /* Collapse/expand control is removed on phones; close remains. */ .message-bubble-user, .message-bubble-bot { max-width: 84%; font-size: 16px; /* Prevent zoom on iOS */ } #chatInput { font-size: 16px; /* Prevent zoom on iOS */ } /* Ensure chat messages get more space */ #chatMessages { flex: 1 1 0% !important; min-height: 0 !important; max-height: none !important; } /* Ensure form layout doesn't break on mobile */ #chatForm { align-items: flex-end; gap: 0.5rem; } } /* Dark mode refinements */ .dark #supportChatDialog { background: rgb(17, 24, 39); } .dark #chatMessages { background: var(--support-chat-feed-bg); } /* Focus states for accessibility - keyboard only */ #supportChatWidget #chatInput:focus, #supportChatWidget #chatSubmit:focus, #supportChatWidget #supportChatButton:focus, #supportChatWidget #supportChatMinimize:focus, #supportChatWidget #supportChatClose:focus, #supportChatWidget .quick-action-pill:focus { outline: none !important; box-shadow: none !important; --tw-ring-shadow: none !important; --tw-ring-offset-shadow: none !important; --tw-ring-color: transparent !important; } #supportChatWidget #chatInput:focus-visible { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; } #supportChatWidget #chatSubmit:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !important; } #supportChatWidget #supportChatButton:focus-visible { box-shadow: 0 4px 14px rgba(46, 42, 38, 0.2), 0 1px 3px rgba(46, 42, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 0 0 3px rgba(120, 113, 108, 0.28) !important; } #supportChatWidget #supportChatMinimize:focus-visible, #supportChatWidget #supportChatClose:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45) !important; } #supportChatWidget .quick-action-pill:focus-visible, #supportChatWidget .navigation-button-primary:focus-visible, #supportChatWidget .navigation-button-alt:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.55) !important; outline-offset: 2px !important; } /* Keep the send button visible when global blue-background dark-mode rules are present. */ #supportChatWidget #chatSubmit { background-color: #2563eb !important; color: white !important; } #supportChatWidget #chatSubmit:hover:not(:disabled) { background-color: #1d4ed8 !important; color: white !important; } #supportChatWidget #chatSubmit svg, #supportChatWidget #chatSubmit svg * { color: white !important; fill: currentColor !important; stroke: none !important; } /* Loading state - reduced intensity */ .loading-pulse { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } } /* Enhanced message formatting */ .message-container { display: flex; flex-direction: column; margin-bottom: 14px; opacity: 1; transform: translateY(0); } .message-container.animate-in, .message-container.message-swoosh-in { opacity: 0; transform: translateY(8px); transition: opacity 0.24s ease, transform 0.24s ease; } .message-container + .message-container { margin-top: 0.15rem; } #supportChatWidget .bot-message + .user-message, #supportChatWidget .user-message + .bot-message { margin-top: 0.7rem; } .message-container.animate-in.show, .message-container.message-swoosh-in.show { opacity: 1; transform: translateY(0); } .user-message { align-items: flex-end; } .bot-message { align-items: flex-start; } /* Ensure buttons stay with their message bubble */ .bot-message .navigation-buttons { align-self: flex-start; max-width: 74%; } .user-message .navigation-buttons { align-self: flex-end; max-width: 74%; } .message-bubble { max-width: 74%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; hyphens: none; position: relative; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } .message-bubble-user { background: var(--gradient-primary, linear-gradient(135deg, #007AFF 0%, #0051D0 100%)); color: white; border-bottom-right-radius: 5px; } .message-bubble-bot { background: #ffffff; color: #16181D; border: 1px solid rgba(203, 213, 225, 0.85); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .support-chat-timestamp { align-self: center; margin: 0.75rem auto 1rem; padding: 0.15rem 0.35rem; border-radius: 0; background: transparent; color: #64748B; font-size: 11px; font-weight: 500; line-height: 1.25; letter-spacing: 0.01em; box-shadow: none; } /* Emotional states: flat fill + quiet left accent (no pastel gradients) */ .message-container.emotional-sad .message-bubble-bot { background: #ffffff; border-left: 3px solid #ef4444; } .message-container.emotional-happy .message-bubble-bot { background: #ffffff; border-left: 3px solid #14b8a6; } .message-container.emotional-empathetic .message-bubble-bot { background: #ffffff; border-left: 3px solid #f59e0b; } /* Enhanced formatting for bot messages */ .message-bubble-bot strong { color: #0F5FD7; font-weight: 750; } .message-bubble-bot em { color: #4F46E5; font-style: italic; } .message-bubble .chat-inline-link { display: inline; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; transition: opacity 0.15s ease; word-break: normal; overflow-wrap: anywhere; } .message-bubble-bot .chat-inline-link { color: #0B63CE; text-decoration-thickness: 1.5px; } .message-bubble-user .chat-inline-link { color: #ffffff; } .message-bubble .chat-inline-link:hover { opacity: 0.85; } .message-bubble .chat-inline-link:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.6); outline-offset: 2px; border-radius: 4px; } .list-item { display: flex; align-items: flex-start; margin: 8px 0; gap: 8px; } .list-number { min-width: 1.45rem; height: 1.45rem; border-radius: 999px; background: #EAF2FF; color: #0F5FD7; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 750; flex-shrink: 0; margin-top: 0; } .list-text { flex: 1; } .bullet { color: #0F5FD7; font-weight: 800; flex-shrink: 0; margin-top: 1px; } /* Emotional feedback for chat widget */ #supportChatWidget.emotional-sad { animation: sadPulse 2s ease-in-out; } #supportChatWidget.emotional-happy { animation: happyBounce 1s ease-in-out; } #supportChatWidget.emotional-empathetic { animation: empatheticGlow 2s ease-in-out; } @keyframes sadPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.95); } } @keyframes happyBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes empatheticGlow { 0%, 100% { box-shadow: var(--shadow-glow); } 50% { box-shadow: 0 0 20px rgba(255, 152, 0, 0.3); } } /* Dark mode support for emotional states */ .dark .message-bubble-bot { background: linear-gradient(180deg, #1F2937 0%, #172033 100%); border-color: rgba(71, 85, 105, 0.9); color: #F8FAFC; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.2); } .dark .support-chat-timestamp { background: transparent; color: #94a3b8; box-shadow: none; } .dark .message-container.emotional-sad .message-bubble-bot { background: #1F2937; border-left-color: #ef4444; } .dark .message-container.emotional-happy .message-bubble-bot { background: #1F2937; border-left-color: #14b8a6; } .dark .message-container.emotional-empathetic .message-bubble-bot { background: #1F2937; border-left-color: #f59e0b; } .dark .message-bubble-bot strong { color: #93C5FD; } .dark .message-bubble-bot em { color: #C4B5FD; } .dark .message-bubble-bot .chat-inline-link { color: #93c5fd; } .dark .bullet { color: #93C5FD; } .dark .list-number { background: rgba(37, 99, 235, 0.22); color: #BFDBFE; } /* Navigation Buttons in Chat Messages */ .navigation-buttons { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .navigation-button-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; width: 100%; min-height: 2.5rem; padding: 0.5rem 1rem; border: none; border-radius: 0.75rem; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; font-size: 0.875rem; font-weight: 600; line-height: 1.2; cursor: pointer; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22), 0 1px 2px rgba(15, 23, 42, 0.06); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .navigation-button-primary:hover { background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28), 0 2px 4px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .navigation-button-primary:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2); } .navigation-button-primary svg { width: 1rem; height: 1rem; flex-shrink: 0; } .navigation-button-alt { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0.4375rem 0.875rem; border: 1px solid #e5e7eb; border-radius: 0.625rem; background: #f9fafb; color: #374151; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; flex: 0 1 auto; } .navigation-button-alt:hover { background: #f3f4f6; border-color: #d1d5db; color: #1f2937; transform: translateY(-1px); } .navigation-button-alt:active { transform: translateY(0); } .navigation-alternatives { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; width: 100%; } /* Dark mode adjustments */ .dark .navigation-button-alt { background: #374151; border-color: #4b5563; color: #e5e7eb; } .dark .navigation-button-alt:hover { background: #4b5563; border-color: #6b7280; color: #f9fafb; } /* Mobile responsive */ @media (max-width: 640px) { .navigation-button-primary { font-size: 0.875rem; padding: 0.5rem 1rem; } .navigation-button-alt { font-size: 0.75rem; padding: 0.375rem 0.75rem; } } /* ======================================== * LARGE MODE SUPPORT * Full-bleed phone sheet (≤640) + tablet/desktop anchored popup. * Discover ≤1100: geometry owned by bottomsheet.css using shared --discover-support-chat-* tokens. * Checkout ≤1100: sheet tokens mirrored on body:has(.checkout-container) above (same vars). * ======================================== */ /* Large mode base (non-Discover): desktop/tablet popup positioned above FAB when vars set */ body:not(.discover-page) #supportChatDialog[data-size-mode="large"]:not(.support-chat-keyboard-fit) { position: fixed !important; bottom: 2rem !important; right: 1.5rem !important; width: 480px !important; height: 600px !important; max-height: 80vh !important; max-width: min(480px, calc(100vw - 2rem)) !important; min-height: 420px !important; z-index: var(--z-support-chat) !important; } /* Phone full-bleed sheet (shared tokens; Discover/checkout override via their sheet rules) */ @media (max-width: 640px) { body:not(.discover-page) #supportChatDialog[data-size-mode="large"]:not(.support-chat-keyboard-fit) { position: fixed !important; top: var(--support-chat-large-top, max(3.25rem, calc(env(safe-area-inset-top, 0px) + 3.25rem))) !important; right: var(--support-chat-large-right, max(0.5rem, env(safe-area-inset-right, 0px))) !important; bottom: var(--support-chat-large-bottom, max(0.5rem, env(safe-area-inset-bottom, 0px))) !important; left: var(--support-chat-large-left, max(0.5rem, env(safe-area-inset-left, 0px))) !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; min-height: 0 !important; z-index: var(--z-support-chat, 10000) !important; /* Layout transform reset; entrance uses opacity/translate (see --open/--closed) */ transform: none !important; display: flex !important; visibility: visible !important; margin: 0 !important; } } /* Tablet (641px-1023px) - Compact large (exclude Discover + checkout sheet surfaces) */ @media (min-width: 641px) and (max-width: 1023px) { body:not(.discover-page):not(:has(.checkout-container)) #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog[data-size-mode="large"] { width: 420px !important; height: 520px !important; max-height: 75vh !important; display: flex !important; visibility: visible !important; position: fixed !important; z-index: var(--z-support-chat, 10000) !important; transform: none !important; } /* On booking page: different positioning */ #supportChatDialog[data-size-mode="large"][data-booking-page="true"] { bottom: 5rem !important; right: 1.5rem !important; } } /* Medium Desktop (1024px-1279px) - Standard large */ @media (min-width: 1024px) and (max-width: 1279px) { body:not(.discover-page) #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog[data-size-mode="large"] { width: 480px !important; height: 600px !important; max-height: 80vh !important; } } /* Large Desktop (1280px-1535px) - Expanded large */ @media (min-width: 1280px) and (max-width: 1535px) { #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog[data-size-mode="large"] { width: 520px !important; height: 650px !important; max-height: 85vh !important; } } /* Extra Large Desktop (1536px+) - Maximum large */ @media (min-width: 1536px) { #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog[data-size-mode="large"] { width: 560px !important; height: 700px !important; max-height: 90vh !important; } } /* * Inline messaging (host Chat Center + renter My Bookings): one cap for height. * Placed after all floating large-mode rules so position/size overrides stick. */ .support-chat-inline-mode #supportChatDialog { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; bottom: auto !important; right: auto !important; width: 100% !important; max-width: 28rem !important; margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; z-index: auto !important; flex: 0 0 auto !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; height: min(420px, calc(100dvh - 10rem)) !important; max-height: min(420px, calc(100dvh - 10rem)) !important; min-height: 0 !important; } /* Opened from messages feed: fill the thread column instead of a corner popup */ .chat-main.support-inline-from-feed .support-chat-inline-slot, #my-bookings-page .support-chat-inline-slot { flex: 1 1 0% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatWidget, #my-bookings-page .support-chat-inline-mode #supportChatWidget { flex: 1 1 0% !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; align-items: stretch !important; justify-content: flex-start !important; } .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog, #my-bookings-page .support-chat-inline-mode #supportChatDialog, body.chat-page .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; position: relative !important; inset: auto !important; top: auto !important; bottom: auto !important; right: auto !important; left: auto !important; z-index: auto !important; transform: none !important; flex: 1 1 0% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; } /* Messages thread embed: hide host/renter compose bar; Spot Assistant has its own input */ body.chat-spot-assistant-active #input-area, body.chat-spot-assistant-active #support-quick-actions, .chat-main.support-inline-from-feed #input-area, .chat-main.support-inline-from-feed #support-quick-actions { display: none !important; visibility: hidden !important; pointer-events: none !important; } body.chat-page .chat-main.support-inline-from-feed, body.my-bookings-messaging-tab .chat-main.support-inline-from-feed { padding-bottom: 0 !important; min-height: 0 !important; overflow: hidden !important; } @media (min-width: 641px) { .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog[data-size-mode="normal"], .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog[data-size-mode="large"], #my-bookings-page .support-chat-inline-mode #supportChatDialog[data-size-mode="normal"], #my-bookings-page .support-chat-inline-mode #supportChatDialog[data-size-mode="large"], body.chat-page .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog[data-size-mode="normal"], body.chat-page .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog[data-size-mode="large"] { flex: 1 1 0% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; } } @media (max-width: 640px) { .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog:not(.support-chat-keyboard-fit), #my-bookings-page .support-chat-inline-mode #supportChatDialog:not(.support-chat-keyboard-fit), body.chat-page .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog:not(.support-chat-keyboard-fit) { flex: 1 1 0% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; } } .support-chat-inline-mode #supportChatDialog[data-size-mode="large"] { height: min(560px, calc(100dvh - 11rem)) !important; max-height: min(560px, calc(100dvh - 11rem)) !important; } /* Re-assert feed-embed flex fill after generic dvh caps (expanded + normal). */ .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog, .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog[data-size-mode="large"], .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog[data-size-mode="normal"], #my-bookings-page .support-chat-inline-mode #supportChatDialog, #my-bookings-page .support-chat-inline-mode #supportChatDialog[data-size-mode="large"], #my-bookings-page .support-chat-inline-mode #supportChatDialog[data-size-mode="normal"] { flex: 1 1 0% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; } #supportChatWidget.support-chat-inline-mode #supportChatDialog[data-size-mode="large"]:not(.support-chat-keyboard-fit) { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; height: auto !important; max-height: 100% !important; } @media (max-width: 640px) { .support-chat-inline-mode #supportChatDialog:not(.support-chat-keyboard-fit) { height: min(320px, calc(100dvh - 12rem)) !important; max-height: min(320px, calc(100dvh - 12rem)) !important; } .support-chat-inline-mode #supportChatDialog[data-size-mode="large"]:not(.support-chat-keyboard-fit) { height: min(360px, calc(100dvh - 10rem)) !important; max-height: min(360px, calc(100dvh - 10rem)) !important; } /* Messages feed embed: fill thread column instead of capped popup height */ .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog:not(.support-chat-keyboard-fit), #my-bookings-page .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog:not(.support-chat-keyboard-fit) { flex: 1 1 0% !important; height: auto !important; max-height: none !important; min-height: 0 !important; } } /* iOS keyboard: JS pins floating dialog to visual viewport; keep messages scrollable */ #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog.support-chat-keyboard-fit, body.support-chat-keyboard-open #supportChatDialog.support-chat-keyboard-fit { position: fixed !important; inset: unset !important; bottom: auto !important; right: auto !important; max-width: none !important; min-height: 0 !important; transform: none !important; border-radius: 1rem; margin: 0 !important; z-index: var(--z-support-chat) !important; } /* Smooth expand when leaving keyboard-fit (mobile send / dismiss). */ #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog.support-chat-layout-animating { position: fixed !important; inset: unset !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important; z-index: var(--z-support-chat) !important; will-change: top, left, width, height, max-height; } @media (prefers-reduced-motion: reduce) { #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog.support-chat-layout-animating { will-change: auto; transition: none !important; } } #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog.support-chat-keyboard-fit[data-size-mode="large"], body.support-chat-keyboard-open #supportChatDialog.support-chat-keyboard-fit[data-size-mode="large"] { inset: unset !important; max-width: none !important; margin: 0 !important; } body.support-chat-keyboard-open #supportChatWidget:not(.support-chat-inline-mode) #supportChatButton { visibility: hidden; pointer-events: none; } #supportChatDialog.support-chat-keyboard-fit.support-chat-dialog--open, #supportChatDialog.support-chat-keyboard-fit.support-chat-dialog--closed, #supportChatDialog.support-chat-layout-animating.support-chat-dialog--open, #supportChatDialog.support-chat-layout-animating.support-chat-dialog--closed { transform: none !important; translate: 0 0 !important; scale: 1 !important; opacity: 1 !important; visibility: visible !important; } /* Keep a stable paint layer while the keyboard resizes the panel (iOS Safari). */ #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog.support-chat-keyboard-fit, #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog.support-chat-layout-animating { -webkit-backface-visibility: hidden; backface-visibility: hidden; isolation: isolate; } .support-chat-inline-mode #supportChatDialog.support-chat-keyboard-fit { left: max(0.75rem, env(safe-area-inset-left, 0px)) !important; right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; width: auto !important; max-width: 28rem !important; margin-left: auto !important; margin-right: auto !important; } body.support-chat-keyboard-open { /* Prevent page scroll fighting with chat reposition on iOS */ overflow: hidden; } /* Shell */ #supportChatDialog.support-chat-dialog-root { background: var(--support-chat-shell-bg) !important; border: 1px solid var(--support-chat-shell-border) !important; border-radius: 1rem !important; box-shadow: var(--support-chat-shell-shadow) !important; backdrop-filter: none !important; /* Entrance uses individual translate/scale so the widget's inline `transform` geometry tweens (keyboard-fit, resize) cannot override the open motion. */ transform-origin: bottom right; transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), translate 0.28s cubic-bezier(0.22, 1, 0.36, 1), scale 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: opacity, translate, scale; } .dark #supportChatDialog.support-chat-dialog-root { background: var(--support-chat-shell-bg) !important; backdrop-filter: none !important; } /* Open / close: fade + slight rise + gentle scale (anchored to the FAB corner) */ #supportChatDialog.support-chat-dialog--closed { opacity: 0 !important; translate: 0 10px !important; scale: 0.98 !important; pointer-events: none !important; } #supportChatDialog.support-chat-dialog--open { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; pointer-events: auto !important; } /* Mobile full-sheet / Discover-checkout sheet large: soft rise + fade only (no scale squeeze) */ #supportChatDialog.support-chat-dialog-root[data-size-mode="large"] { transform-origin: bottom center; } #supportChatDialog.support-chat-dialog-root[data-size-mode="large"].support-chat-dialog--closed { opacity: 0 !important; translate: 0 16px !important; scale: 1 !important; } #supportChatDialog.support-chat-dialog-root[data-size-mode="large"].support-chat-dialog--open { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; } @media (max-width: 640px) { #supportChatDialog.support-chat-dialog-root[data-size-mode="large"] { border-radius: 1.125rem !important; } } /* Placeholder welcome while /support/welcome is in flight (subtle, not empty void) */ #supportChatWidget .support-chat-welcome-placeholder .message-bubble { animation: support-chat-placeholder-pulse 2.4s ease-in-out infinite; } @keyframes support-chat-placeholder-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } } @media (prefers-reduced-motion: reduce) { #supportChatWidget .support-chat-welcome-placeholder .message-bubble { animation: none; } #supportChatDialog.support-chat-dialog-root { transition: none !important; } } /* Booking page: Use data attribute for reliable targeting */ #supportChatDialog[data-booking-page="true"].support-chat-dialog--open { opacity: 1 !important; } /* Legacy scale-0/100/95/opacity-80 aliases were never applied to the dialog (the open flow only ever removes them and adds --open/--closed; the unread badge is a separate element). Dropped to reduce redundant !important. */ /* Messages-center inline embed: always fill thread column (after popup height caps). */ .chat-main.support-inline-from-feed .support-chat-inline-slot, .chat-main.support-inline-from-feed .support-chat-inline-mode#supportChatWidget, .chat-main.support-inline-from-feed #supportChatWidget.support-chat-inline-mode { flex: 1 1 0% !important; min-height: 0 !important; height: 100% !important; width: 100% !important; max-width: 100% !important; position: relative !important; inset: auto !important; align-items: stretch !important; } .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog, .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog[data-size-mode="normal"], .chat-main.support-inline-from-feed .support-chat-inline-mode #supportChatDialog[data-size-mode="large"] { flex: 1 1 0% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .chat-main.support-inline-from-feed #messages-container { display: none !important; flex: 0 0 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } /* Discover: keep warm-stone shell tokens where they exist */ body.discover-page #supportChatDialog.support-chat-dialog-root { border-color: var(--discover-premium-line) !important; box-shadow: var(--discover-premium-shadow) !important; } body.discover-page #supportChatDialog .support-chat-header { background: var(--discover-premium-surface-soft) !important; background-image: none !important; color: var(--discover-premium-ink) !important; border-bottom: 1px solid var(--discover-premium-line) !important; } body.discover-page #supportChatDialog .support-chat-header h3 { color: var(--discover-premium-ink) !important; } body.discover-page #supportChatDialog .support-chat-header #statusText { color: var(--discover-premium-muted) !important; } body.discover-page #supportChatDialog .support-chat-header__avatar { background: var(--discover-premium-wash) !important; color: var(--discover-premium-ink-soft) !important; box-shadow: none !important; } body.discover-page #supportChatDialog .support-chat-header__online { border-color: var(--discover-premium-surface-solid, var(--discover-premium-surface-soft)) !important; } body.discover-page #supportChatDialog .support-chat-header .support-chat-header-btn, body.discover-page #supportChatDialog .support-chat-header #supportChatClose { color: var(--discover-premium-muted) !important; } body.discover-page #supportChatDialog .support-chat-header .support-chat-header-btn:hover, body.discover-page #supportChatDialog .support-chat-header #supportChatClose:hover { background: var(--discover-premium-hover) !important; color: var(--discover-premium-ink) !important; } .dark body.discover-page #supportChatDialog.support-chat-dialog-root, body.dark.discover-page #supportChatDialog.support-chat-dialog-root { border-color: var(--discover-premium-line) !important; box-shadow: var(--discover-premium-shadow) !important; } .dark body.discover-page #supportChatDialog .support-chat-header, body.dark.discover-page #supportChatDialog .support-chat-header { background: var(--discover-premium-surface-soft) !important; color: var(--discover-premium-ink) !important; border-bottom-color: var(--discover-premium-line) !important; } .dark body.discover-page #supportChatDialog .support-chat-header h3, body.dark.discover-page #supportChatDialog .support-chat-header h3 { color: var(--discover-premium-ink) !important; } .dark body.discover-page #supportChatDialog .support-chat-header #statusText, body.dark.discover-page #supportChatDialog .support-chat-header #statusText { color: var(--discover-premium-muted) !important; } .dark body.discover-page #supportChatDialog .support-chat-header__avatar, body.dark.discover-page #supportChatDialog .support-chat-header__avatar { background: var(--discover-premium-wash) !important; color: var(--discover-premium-ink-soft) !important; } /* Discover scan path: brand FAB (must load after .dark #supportChatWidget blue vars). */ body.discover-page #supportChatWidget, .dark body.discover-page #supportChatWidget, body.dark.discover-page #supportChatWidget { --support-chat-fab-bg: var(--color-brand-accent, #0f5a56); --support-chat-fab-bg-hover: var(--color-brand-accent-hover, #0c4a47); --support-chat-fab-icon: var(--color-brand-accent-text, #ffffff); } .dark body.discover-page #supportChatWidget, body.dark.discover-page #supportChatWidget { --support-chat-fab-bg: var(--color-brand-accent-on-dark, #5eead4); --support-chat-fab-bg-hover: var(--color-brand-accent-on-dark-hover, #99f6e4); --support-chat-fab-icon: #0f172a; } body.discover-page #supportChatWidget #supportChatButton { background: var(--support-chat-fab-bg) !important; background-color: var(--support-chat-fab-bg) !important; box-shadow: 0 2px 8px rgba(15, 90, 86, 0.28), 0 1px 2px rgba(15, 23, 42, 0.12) !important; } body.discover-page #supportChatWidget #supportChatButton:hover, body.discover-page #supportChatWidget #supportChatButton:focus-visible { background: var(--support-chat-fab-bg-hover) !important; background-color: var(--support-chat-fab-bg-hover) !important; }