/* CSS Variables */ :root { /* Brand color - set dynamically by JS from Shopify metafields */ --chat-primary: #1f2937; /* Buttons, CTAs, highlights */ --chat-primary-rgb: 31, 41, 55; /* RGB for rgba() - set by JS */ /* Typography - set dynamically by JS from Shopify metafields */ --chat-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --chat-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --chat-font-body-weight: 400; --chat-font-heading-weight: 700; --chat-font-base-size: 16px; /* Fixed backgrounds */ --chat-bg: #ffffff; /* Main background: white */ --chat-bg-muted: #f8fafc; /* Input, secondary backgrounds */ --chat-bg-dark: #f3f4f6; /* Cards, product-question surfaces (no longer bot bubbles — those are flat) */ /* Fixed text colors */ --chat-text: #000000; /* Main text: black */ --chat-text-muted: #4b5563; /* Secondary/muted text */ --chat-text-light: #94a3b8; /* Placeholders, timestamps */ --chat-text-inverse: #ffffff; /* Text on primary buttons */ /* Fixed UI */ --chat-bubble-user: #1f2937; /* User bubble: dark gray */ --chat-border: rgba(0, 0, 0, 0.1); --chat-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.12); --chat-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Conversation column cap on wide screens. Was 37.5em and referenced nowhere — someone intended a measure cap and never wired it up. Now 60em (960px) and actually applied, per the rendered comparison of 600 / 960 / uncapped. */ --chat-max-width: 60em; --purands-z-base: 2147483647; --chat-primary-hover: #374151; } /* Purands widget isolation - prevent customer CSS from overriding */ [class*="purands-"] *, [class*="purands-"] { box-sizing: border-box !important; } [class*="purands-"] svg { display: inline-block !important; vertical-align: middle !important; overflow: visible !important; flex-shrink: 0 !important; max-width: none !important; max-height: none !important; } [class*="purands-"] svg path, [class*="purands-"] svg circle, [class*="purands-"] svg rect, [class*="purands-"] svg line, [class*="purands-"] svg polyline, [class*="purands-"] svg polygon, [class*="purands-"] svg ellipse { vector-effect: non-scaling-stroke !important; } /* Reset SVG fill and stroke - don't force inherit as it breaks icons */ [class*="purands-"] button { font-family: var(--chat-font-body) !important; cursor: pointer !important; line-height: normal !important; text-align: center !important; } [class*="purands-"] a { text-decoration: none !important; } [class*="purands-"] img { display: block !important; border: none !important; } /* Prevent overscroll bounce when chat is open. NOTE: overflow:hidden and touch-action:none are intentionally NOT set on body — they break IntersectionObserver-based animations in customer themes (e.g. Canopy cc-animate). The chat container handles its own scroll independently via overflow-y:auto. */ body.pw-chat-open { overscroll-behavior: none !important; } @media (max-width: 768px) { body.pw-chat-open { overflow: hidden !important; position: fixed !important; width: 100% !important; touch-action: none !important; } /* A store cart drawer (Shopflo, GoKwik, …) mounts on , so it sits inside the lock above. touch-action is intersected down the ancestor chain — a descendant cannot re-enable what an ancestor disabled — so `none` here makes the drawer physically unscrollable on mobile. Relax only that for as long as the drawer is up: unsetting position:fixed would jump the page's scroll, and a fixed drawer with its own scroller doesn't care about the body's overflow. */ body.pw-chat-open.pw-store-cart-open { touch-action: auto !important; } } /* The cart/wishlist/orders/quick-view modals mount straight onto , outside .purands-chat-container, so the descendant selector above never reaches them. Without naming them here they inherit the host theme's font — which is why their *-modal-title read in the brand font while their body copy did not. */ .purands-chat-button, .purands-chat-container, .purands-chat-container *, .purands-chat-modal-overlay, .purands-cart-modal, .purands-wishlist-modal, .purands-orders-modal, .purands-quick-view-modal { font-family: var(--chat-font-body) !important; } /* Isolate widget font sizing from the Shopify theme's root font-size. Many themes set html { font-size: 62.5% } (10px) which would shrink all em values. By setting a fixed base here and using em units, we get consistent sizing across all themes. The body-mounted modals need pinning for the same reason: unpinned they inherit the theme's body font-size (e.g. Minimalist's 15px), shrinking every em inside them. */ .purands-chat-button, .purands-notif-popup, .purands-chat-container, .purands-chat-modal-overlay, .purands-cart-modal, .purands-wishlist-modal, .purands-orders-modal, .purands-quick-view-modal { font-size: var(--chat-font-base-size) !important; /* Pinning the base size is only half the job on iOS. Safari's text autosizing ("text boosting") inflates font sizes in blocks it considers wide, which fires on rotation and can persist after rotating back to portrait — the reported "went landscape, came back, text stayed big". It is heuristic, hence intermittent. text-size-adjust is an inherited property, so declaring it on these roots covers everything inside them. Both spellings: WebKit still needs the prefix, other engines take the standard one. */ -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } /* Heading font override */ .purands-chat-container h1, .purands-chat-container h2, .purands-chat-container h3, .purands-chat-container h4, .purands-chat-container h5, .purands-chat-container h6, .purands-chat-window-title, .purands-chat-header-title, .purands-cart-modal-title, .purands-wishlist-modal-title, .purands-orders-modal-title, .purands-quick-view-title { font-family: var(--chat-font-heading) !important; font-weight: var(--chat-font-heading-weight) !important; } /* ═══════════════════════════════════════════════════════════ FROSTED GLASS PILL LAUNCHER (centered bottom) ═══════════════════════════════════════════════════════════ */ /* Glass theme variables for pill & notification only */ [data-chat-theme="dark-glass"] { --pill-bg: rgba(30, 30, 30, 0.55); --pill-bg-hover: rgba(30, 30, 30, 0.65); --pill-border: rgba(255, 255, 255, 0.12); --pill-blur: blur(40px) saturate(180%); --pill-text: #ffffff; --pill-text-muted: rgba(255, 255, 255, 0.75); --pill-shadow: 0 8px 32px rgba(0, 0, 0, 0.30); } [data-chat-theme="light-glass"] { --pill-bg: rgba(255, 255, 255, 0.12); --pill-bg-hover: rgba(255, 255, 255, 0.18); --pill-border: rgba(255, 255, 255, 0.22); --pill-blur: blur(40px) saturate(200%); --pill-text: #ffffff; --pill-text-muted: rgba(255, 255, 255, 0.75); --pill-shadow: 0 8px 32px rgba(0, 0, 0, 0.20); } .purands-chat-button { position: fixed; bottom: 28px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: fit-content; z-index: var(--purands-z-base); display: flex; align-items: center; padding: 8px 16px 8px 8px; gap: 0; cursor: pointer; -webkit-user-select: none; user-select: none; background: var(--pill-bg); -webkit-backdrop-filter: var(--pill-blur); backdrop-filter: var(--pill-blur); border: 1px solid var(--pill-border); border-radius: 999px; box-shadow: var(--pill-shadow), 0 2px 8px rgba(0, 0, 0, 0.1); transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.22s ease, transform 0.22s ease; max-width: calc(100vw - 2rem); } @media (max-width: 480px) { .purands-chat-button { bottom: 16px; padding: 7px 12px 7px 7px; } .purands-chat-button-icon { width: 24px; height: 24px; margin-right: 6px; } .purands-chat-button-icon svg { width: 12px !important; height: 12px !important; } .purands-chat-button-text { font-size: 12px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .purands-chat-button-badge { width: 16px; height: 16px; font-size: 9px; } } .purands-chat-button:hover { background: var(--pill-bg-hover); box-shadow: var(--pill-shadow), 0 4px 12px rgba(0, 0, 0, 0.15); } .purands-chat-button:focus { outline: none; } .purands-chat-button:focus-visible { outline: 3px solid var(--chat-primary); outline-offset: 2px; } /* Pill icon circle */ .purands-chat-button-icon { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 8px; } .purands-chat-button-icon svg { width: 14px !important; height: 14px !important; fill: #fff !important; stroke: none !important; } /* Custom uploaded icon image fills the launcher circle (pill and icon-only modes both size the circle; percentages track it). Sized here rather than per-mode so the same rule covers the mobile media query too. */ .purands-chat-button-icon .purands-chat-icon-image { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; } /* Pill text label */ .purands-chat-button-text { font-size: 13px; font-weight: 600; color: var(--pill-text); letter-spacing: 0.1px; margin-right: 8px; white-space: nowrap; } /* Pill notification badge */ .purands-chat-button-badge { width: 20px; height: 20px; background: #ff4757; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: badgePulse 2s infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.5); } 50% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(255, 71, 87, 0); } } /* Pill SVG styling */ .purands-chat-button svg { display: block; } /* ═══════════════════════════════════════════════════════════ ICON-ONLY LAUNCHER MODE (solid circle FAB) ═══════════════════════════════════════════════════════════ */ .purands-chat-button.purands-chat-button--icon-only { padding: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--purands-primary, #1f2937); -webkit-backdrop-filter: none; backdrop-filter: none; border: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); justify-content: center; } .purands-chat-button--icon-only .purands-chat-button-icon { margin: 0; width: 52px; height: 52px; background: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .purands-chat-button--icon-only .purands-chat-button-icon svg { width: 24px !important; height: 24px !important; color: #fff; } .purands-chat-button--icon-only .purands-chat-button-badge { position: absolute; top: -2px; right: -2px; } @media (max-width: 480px) { .purands-chat-button.purands-chat-button--icon-only { width: 52px; height: 52px; } .purands-chat-button--icon-only .purands-chat-button-icon { width: 52px; height: 52px; } } /* ═══════════════════════════════════════════════════════════ NOTIFICATION POPUP (above the pill) ═══════════════════════════════════════════════════════════ */ .purands-notif-popup { position: fixed; bottom: 90px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: fit-content; transform: translateY(12px); z-index: var(--purands-z-base); max-width: min(400px, calc(100vw - 48px)); opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1); } .purands-notif-popup.visible { opacity: 1; pointer-events: all; transform: translateY(0); } .purands-notif-popup.hiding { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .purands-notif-card { display: flex; align-items: center; padding: 10px 20px; background: var(--pill-bg, rgba(255, 255, 255, 0.13)); -webkit-backdrop-filter: var(--pill-blur, blur(40px) saturate(200%)); backdrop-filter: var(--pill-blur, blur(40px) saturate(200%)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); cursor: pointer; position: relative; overflow: visible; will-change: background; } /* Animated border progress indicator */ .purands-notif-card::before { content: ''; position: absolute; inset: -1px; border-radius: 999px; background: conic-gradient( from 0deg, rgba(255, 255, 255, 0.55) calc(var(--border-progress, 100) * 1%), transparent calc(var(--border-progress, 100) * 1%) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; pointer-events: none; z-index: 1; } .purands-notif-card:hover { background: var(--pill-bg-hover, rgba(255, 255, 255, 0.18)); } .purands-notif-text { font-size: 13.5px; font-weight: 500; color: var(--pill-text, #fff); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ═══════════════════════════════════════════════════════════ PILL & NUDGE POSITION VARIANTS (left / center / right) ═══════════════════════════════════════════════════════════ */ /* Bottom-left */ .purands-chat-button[data-chat-position="bottom-left"] { left: 20px; right: auto; margin-left: 0; margin-right: 0; } /* Nudge beside button on the right: ⬤ → nudge */ .purands-notif-popup[data-chat-position="bottom-left"] { left: 76px; right: auto; margin-left: 0; margin-right: 0; transform: translateX(-12px); } .purands-notif-popup[data-chat-position="bottom-left"].visible { transform: translateX(0); } .purands-notif-popup[data-chat-position="bottom-left"].hiding { transform: translateX(-8px); } /* Bottom-right */ .purands-chat-button[data-chat-position="bottom-right"] { right: 20px; left: auto; margin-left: 0; margin-right: 0; } /* Nudge beside button on the left: nudge ← ⬤ */ .purands-notif-popup[data-chat-position="bottom-right"] { right: 76px; left: auto; margin-left: 0; margin-right: 0; transform: translateX(12px); } .purands-notif-popup[data-chat-position="bottom-right"].visible { transform: translateX(0); } .purands-notif-popup[data-chat-position="bottom-right"].hiding { transform: translateX(8px); } /* Bottom-center is the default (left:0, right:0, margin auto) — no override needed */ /* ═══════════════════════════════════════════════════════════ MOBILE OPTIMIZATIONS ═══════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .purands-notif-popup { bottom: 70px; max-width: calc(100vw - 32px); } .purands-notif-card { padding: 8px 16px; } .purands-notif-text { font-size: 12.5px; } .purands-chat-button[data-chat-position="bottom-left"] { left: 16px; } .purands-notif-popup[data-chat-position="bottom-left"] { left: 76px; } .purands-chat-button[data-chat-position="bottom-right"] { right: 16px; } .purands-notif-popup[data-chat-position="bottom-right"] { right: 76px; } } /* Full-width bottom sheet container */ .purands-chat-container { width: 100%; height: 100%; display: none; flex-direction: column; background: white; overflow: hidden; contain: layout style paint; -webkit-font-smoothing: antialiased; } .purands-chat-container.show { /* CSS Grid is unambiguous about row sizing — no percentage-height gotchas, no flex-basis-vs-content fights. Three rows: messages takes everything left over (minmax(0, 1fr) so it can shrink and let overflow-y: auto scroll), input and footer stay at their natural heights. `height: 100%` (from base) needs an explicit parent height to resolve — modal-body provides this via `flex: 1 1 0`. We force it to be definite via min-height: 100% as a Safari/iOS fallback. `grid-template-columns: minmax(0, 1fr)` is critical: without it, grid defaults to min-content sizing which makes the column expand to fit the widest child's intrinsic content (input + buttons + footer text). On mobile this overflows the viewport. minmax(0, 1fr) forces the column to shrink with the parent. */ display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; height: 100% !important; min-height: 100% !important; width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; overflow-x: hidden; } .purands-chat-header-logo { flex: 1 1 0; min-width: 0; overflow: hidden; } .purands-chat-logo { max-height: 2.5em; max-width: 100%; object-fit: contain; display: block; } .purands-chat-close-btn { width: 2em; height: 2em; border: none; border-radius: 50%; background: transparent; color: var(--chat-text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5em; transition: var(--chat-transition); padding: 0; } .purands-chat-close-btn:focus, .purands-chat-close-btn:hover { background: rgba(0, 0, 0, 0.05) !important; color: var(--chat-text) !important; outline: none !important; } .purands-chat-close-btn svg { fill: none !important; stroke: currentColor !important; display: block !important; width: 20px !important; height: 20px !important; } /* Header actions container (cart + close) */ .purands-chat-header-actions { display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; } /* Cart button */ .purands-chat-cart-btn { position: relative; width: 2em; height: 2em; border-radius: 50%; border: none; background: transparent; color: var(--chat-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; } .purands-chat-cart-btn:hover, .purands-chat-cart-btn:focus { background: rgba(0, 0, 0, 0.05) !important; transform: scale(1.05) !important; color: var(--chat-text) !important; outline: none !important; } .purands-chat-cart-btn svg { width: 20px; height: 20px; display: block !important; } /* fill:none + stroke:currentColor suits our stroke-drawn built-ins, but would make a *filled* merchant icon (chat.cart_icon) invisible — CSS beats an SVG's presentation attributes, so the icon could never paint itself. Scope the forcing to the built-in; a custom icon controls its own paint and should use currentColor to follow the header. Sizing still applies to both. */ .purands-chat-cart-btn:not(.purands-icon--custom) svg { fill: none !important; stroke: currentColor !important; } /* Cart count badge */ .purands-cart-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; background: var(--chat-primary); color: var(--chat-text-inverse); border-radius: 9px; font-size: 0.7em; font-weight: 700; display: none; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; font-family: var(--chat-font-body) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Wishlist header button */ .purands-chat-wishlist-header-btn { position: relative; width: 2em; height: 2em; border-radius: 50%; border: none; background: transparent; color: var(--chat-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; } .purands-chat-wishlist-header-btn:hover, .purands-chat-wishlist-header-btn:focus { background: rgba(0, 0, 0, 0.05) !important; transform: scale(1.05) !important; color: var(--chat-text) !important; outline: none !important; } .purands-chat-wishlist-header-btn svg { width: 20px; height: 20px; display: block !important; } /* See the cart button above: colour forcing is scoped to the built-in icon so a filled merchant icon (chat.wishlist_icon) isn't painted out of existence. */ .purands-chat-wishlist-header-btn:not(.purands-icon--custom) svg { fill: none !important; stroke: currentColor !important; } /* Wishlist count badge */ .purands-wishlist-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; background: var(--chat-primary); color: var(--chat-text-inverse); border-radius: 9px; font-size: 0.7em; font-weight: 700; display: none; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; font-family: var(--chat-font-body) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .purands-wishlist-count.show { display: flex !important; } /* Wishlist Modal */ /* Cart Modal */ .purands-cart-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: var(--purands-z-base); display: flex; align-items: center; justify-content: center; padding: 1em; opacity: 0; transition: opacity 0.3s ease; } .purands-cart-modal.visible { opacity: 1; } .purands-cart-modal-content { background: var(--chat-bg); border-radius: 1em; max-width: 600px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; transform: scale(0.95); transition: transform 0.3s ease; } .purands-cart-modal.visible .purands-cart-modal-content { transform: scale(1); } .purands-cart-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5em; border-bottom: 1px solid #e5e7eb; } .purands-cart-modal-title { font-size: 1.5em; font-weight: 700; color: var(--chat-text); margin: 0; } .purands-cart-modal-close { width: 44px; height: 44px; border-radius: 50%; background: #f1f1f1; border: none; font-size: 1.5em; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; color: var(--chat-text) !important; } .purands-cart-modal-close:hover, .purands-cart-modal-close:focus { background: #e0e0e0 !important; color: var(--chat-text) !important; outline: none !important; } .purands-cart-modal-close svg { fill: none !important; stroke: currentColor !important; } .purands-cart-modal-items { flex: 1; overflow-y: auto; padding: 1em 1.5em; display: flex; flex-direction: column; gap: 1em; } .purands-cart-empty { text-align: center; padding: 3em 1em; color: var(--chat-text-muted); } .purands-cart-empty svg { margin-bottom: 1em; opacity: 0.5; } .purands-cart-empty h3 { font-size: 1.25em; font-weight: 600; color: var(--chat-text); margin: 0 0 0.5em 0; } .purands-cart-empty p { margin: 0; font-size: 0.95em; } /* Modal Loading States */ .purands-loading-state, .purands-cart-loading, .purands-wishlist-loading, .purands-quick-view-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3em 1.5em; gap: 1em; min-height: 200px; } .purands-loading-state .purands-spinner, .purands-cart-loading .purands-spinner, .purands-wishlist-loading .purands-spinner, .purands-quick-view-loading .purands-spinner { width: 40px; height: 40px; border: 3px solid #e5e7eb; border-top-color: var(--chat-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .purands-loading-state p, .purands-cart-loading p, .purands-wishlist-loading p, .purands-quick-view-loading p { margin: 0; color: var(--chat-text-muted); font-size: 0.875em; } /* Error States */ .purands-error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3em 1.5em; text-align: center; color: var(--chat-text-muted); } .purands-error-state svg { margin-bottom: 1em; opacity: 0.5; color: #ef4444; } .purands-error-state h3 { font-size: 1.125em; font-weight: 600; color: var(--chat-text); margin: 0 0 0.5em 0; } .purands-error-state p { margin: 0; font-size: 0.875em; } .purands-cart-item { display: flex; align-items: center; gap: 1em; padding: 1em; border: 1px solid #e5e7eb; border-radius: 0.75em; transition: box-shadow 0.2s ease; } .purands-cart-item:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .purands-cart-item-image { width: 80px; height: 80px; border-radius: 0.5em; overflow: hidden; background: #f9fafb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .purands-cart-item-image img { width: 100%; height: 100%; object-fit: cover; } .purands-cart-item-image svg { opacity: 0.3; } .purands-cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 0.25em; min-width: 0; } .purands-cart-item-title { font-weight: 600; color: var(--chat-text); font-size: 0.95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .purands-cart-item-variant { font-size: 0.85em; color: var(--chat-text-muted); } .purands-cart-item-price { font-size: 0.95em; color: var(--chat-primary); font-weight: 600; margin-top: 0.25em; } .purands-cart-quantity-wrapper { display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; } .purands-cart-item-remove { width: 36px; height: 36px; border-radius: 50%; background: #fee; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .purands-cart-item-remove:hover, .purands-cart-item-remove:focus { background: #fcc; transform: scale(1.1); outline: none !important; } .purands-cart-item-remove svg { width: 18px; height: 18px; stroke: #e74c3c; } .purands-cart-modal-footer { border-top: 1px solid #e5e7eb; padding: 1.5em; display: flex; flex-direction: column; gap: 1em; } .purands-cart-subtotal { display: flex; justify-content: space-between; align-items: center; font-size: 1.125em; } .purands-cart-subtotal-label { font-weight: 600; color: var(--chat-text); } .purands-cart-subtotal-value { font-weight: 700; color: var(--chat-primary); font-size: 1.25em; } .purands-cart-view-btn { width: 100%; padding: 1em; background: var(--chat-primary); color: white !important; border: none; border-radius: 0.5em; font-size: 1em; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .purands-cart-view-btn:hover, .purands-cart-view-btn:focus { background: var(--chat-primary-hover) !important; color: white !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3) !important; outline: none !important; } /* Wishlist Modal */ .purands-wishlist-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: var(--purands-z-base); display: flex; align-items: center; justify-content: center; padding: 1em; opacity: 0; transition: opacity 0.3s ease; } .purands-wishlist-modal.visible { opacity: 1; } .purands-wishlist-modal-content { background: var(--chat-bg); border-radius: 1em; max-width: 600px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; transform: scale(0.95); transition: transform 0.3s ease; } .purands-wishlist-modal.visible .purands-wishlist-modal-content { transform: scale(1); } .purands-wishlist-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5em; border-bottom: 1px solid #e5e7eb; } .purands-wishlist-modal-title { font-size: 1.5em; font-weight: 700; color: var(--chat-text); margin: 0; } .purands-wishlist-modal-close { width: 44px; height: 44px; border-radius: 50%; background: #f1f1f1; border: none; font-size: 1.5em; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; color: var(--chat-text) !important; } .purands-wishlist-modal-close:hover, .purands-wishlist-modal-close:focus { background: #e0e0e0 !important; color: var(--chat-text) !important; outline: none !important; } .purands-wishlist-modal-close svg { fill: none !important; stroke: currentColor !important; display: block !important; width: 20px !important; height: 20px !important; } .purands-wishlist-modal-items { flex: 1; overflow-y: auto; padding: 1.5em; } .purands-wishlist-item { display: flex; align-items: center; gap: 1em; padding: 1em; border: 1px solid #e5e7eb; border-radius: 0.5em; margin-bottom: 0.75em; transition: all 0.2s ease; background: var(--chat-bg); } .purands-wishlist-item:hover { border-color: var(--chat-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .purands-wishlist-item-image { width: 80px; height: 80px; flex-shrink: 0; border-radius: 0.5em; overflow: hidden; background: #f5f5f5; display: flex; align-items: center; justify-content: center; } .purands-wishlist-item-image img { width: 100%; height: 100%; object-fit: cover; } .purands-wishlist-item-image svg { opacity: 0.3; } .purands-wishlist-item-info { flex: 1; display: flex; flex-direction: column; gap: 0.25em; min-width: 0; } .purands-wishlist-item-title { font-size: 1em; font-weight: 500; color: var(--chat-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; } .purands-wishlist-item-price { font-size: 0.875em; color: var(--chat-primary); font-weight: 600; } .purands-wishlist-item-actions { display: flex; gap: 0.5em; flex-shrink: 0; align-items: center; flex-wrap: wrap; } .purands-wishlist-quantity-wrapper { display: flex; align-items: center; gap: 0.5em; } .purands-wishlist-item-add-to-cart { padding: 0.5em 1em; background: var(--chat-primary); color: white; border: none; border-radius: 0.375em; font-size: 0.875em; font-weight: 500; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .purands-wishlist-item-add-to-cart:hover, .purands-wishlist-item-add-to-cart:focus { background: var(--chat-primary-hover); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); outline: none !important; } .purands-wishlist-item-remove { width: 36px; height: 36px; border-radius: 50%; background: #fee; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .purands-wishlist-item-remove:hover, .purands-wishlist-item-remove:focus { background: #fcc; transform: scale(1.1); outline: none !important; } .purands-wishlist-item-remove svg { width: 18px; height: 18px; stroke: #e74c3c; } /* Mobile responsive */ @media (max-width: 600px) { .purands-wishlist-item { flex-wrap: wrap; } .purands-wishlist-item-image { width: 60px; height: 60px; } .purands-wishlist-item-actions { width: 100%; margin-top: 0.5em; } .purands-wishlist-item-add-to-cart { flex: 1; } } .purands-wishlist-empty { text-align: center; padding: 3em 1em; color: var(--chat-text-muted); } .purands-wishlist-empty svg { margin-bottom: 1em; opacity: 0.3; } .purands-wishlist-empty h3 { font-size: 1.25em; color: var(--chat-text); margin: 1em 0 0.5em; } .purands-wishlist-empty p { margin: 0; } /* Variant Selector */ .purands-variant-selector { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5em; padding: 1em; margin: 0.5em 0; animation: slideDown 0.2s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .purands-variant-selector-header { font-weight: 600; color: var(--chat-text); margin-bottom: 0.75em; font-size: 0.875em; } .purands-variant-options { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: 0.75em; } .purands-variant-option { display: flex; justify-content: space-between; align-items: center; padding: 0.75em; background: var(--chat-bg); border: 2px solid #e5e7eb; border-radius: 0.375em; cursor: pointer; transition: all 0.2s ease; font-size: 0.875em; font-weight: 500; color: var(--chat-text); } .purands-variant-option:hover { border-color: var(--chat-primary); background: rgba(var(--chat-primary-rgb), 0.05); } .purands-variant-option:disabled { opacity: 0.6; cursor: not-allowed; } .purands-variant-price { color: var(--chat-primary); font-weight: 600; margin-left: auto; padding-left: 1em; } .purands-variant-cancel { width: 100%; padding: 0.5em; background: transparent; border: 1px solid #d1d5db; border-radius: 0.375em; color: var(--chat-text-muted); font-size: 0.875em; cursor: pointer; transition: all 0.2s ease; } .purands-variant-cancel:hover { background: #f3f4f6; border-color: var(--chat-text-muted); } /* Login / Profile Buttons in Header */ .purands-chat-profile-btn, .purands-chat-login-btn { display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; padding: 0; border-radius: 50%; border: none; background: transparent; color: var(--chat-text); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .purands-chat-profile-btn span, .purands-chat-login-btn span { display: none; } .purands-chat-profile-btn:hover, .purands-chat-profile-btn:focus, .purands-chat-login-btn:hover, .purands-chat-login-btn:focus { background: rgba(0, 0, 0, 0.05) !important; color: var(--chat-text) !important; outline: none !important; } .purands-chat-profile-btn svg, .purands-chat-login-btn svg { width: 20px; height: 20px; display: block !important; } /* See the cart button above: colour forcing is scoped to the built-in icon so a filled merchant icon (chat.profile_icon) isn't painted out of existence. */ .purands-chat-profile-btn:not(.purands-icon--custom) svg, .purands-chat-login-btn svg { fill: none !important; stroke: currentColor !important; } .purands-profile-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Login Modal - Removed (login now redirects to /account/login) */ /* Profile Dropdown */ .purands-profile-dropdown { position: absolute; background: var(--chat-bg); border-radius: 0.75em; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); min-width: 250px; z-index: var(--purands-z-base); overflow: hidden; animation: dropdownFadeIn 0.2s ease; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .purands-profile-dropdown-header { padding: 1em 1.25em; border-bottom: 1px solid #e5e7eb; background: #f9fafb; } .purands-profile-dropdown-name { font-size: 1em; font-weight: 600; color: var(--chat-text); margin-bottom: 0.25em; } .purands-profile-dropdown-email { font-size: 0.875em; color: var(--chat-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .purands-profile-dropdown-menu { padding: 0.5em; } .purands-profile-dropdown-item { display: flex; align-items: center; gap: 0.75em; padding: 0.75em; border-radius: 0.5em; color: var(--chat-text); text-decoration: none; transition: all 0.2s ease; cursor: pointer; } .purands-profile-dropdown-item:hover { background: #f3f4f6; } .purands-profile-dropdown-item svg { width: 18px; height: 18px; } /* See the header cart button: stroke forcing is scoped to the built-in icons so a filled merchant icon (chat.orders_icon etc.) keeps its own paint. */ .purands-profile-dropdown-item:not(.purands-icon--custom) svg { stroke: var(--chat-text-muted); } .purands-profile-dropdown-item span { font-size: 0.9375em; font-weight: 500; } .purands-profile-dropdown-divider { height: 1px; background: #e5e7eb; margin: 0.5em 0; } /* Orders Modal Styles */ .purands-orders-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: var(--purands-z-base); display: flex; align-items: center; justify-content: center; padding: 1em; opacity: 0; transition: opacity 0.3s ease; } .purands-orders-modal.visible { opacity: 1; } .purands-orders-modal-content { background: var(--chat-bg); border-radius: 1em; width: 100%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: modalSlideUp 0.3s ease; } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .purands-orders-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5em; border-bottom: 1px solid #e5e7eb; } .purands-orders-modal-title { font-size: 1.25em; font-weight: 600; color: var(--chat-text); margin: 0; } .purands-orders-modal-close { background: transparent; border: none; width: 2em; height: 2em; border-radius: 0.5em; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--chat-text-muted); transition: all 0.2s ease; } .purands-orders-modal-close:hover { background: #f3f4f6; color: var(--chat-text); } .purands-orders-modal-content-body { flex: 1; overflow-y: auto; padding: 1.5em; } /* Loading State */ .purands-orders-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3em 1.5em; gap: 1em; } .purands-loading-spinner { width: 40px; height: 40px; border: 3px solid #e5e7eb; border-top-color: var(--chat-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .purands-orders-loading p { margin: 0; color: var(--chat-text-muted); font-size: 0.875em; } /* Empty State */ .purands-orders-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3em 1.5em; text-align: center; gap: 1em; } .purands-orders-empty svg { width: 64px; height: 64px; color: var(--chat-text-muted); margin-bottom: 0.5em; } .purands-orders-empty h3 { margin: 0; font-size: 1.125em; font-weight: 600; color: var(--chat-text); } .purands-orders-empty p { margin: 0; color: var(--chat-text-muted); font-size: 0.875em; } /* Order Cards */ .purands-order-card { background: var(--chat-bg); border: 1px solid #e5e7eb; border-radius: 0.75em; padding: 1.25em; margin-bottom: 1em; transition: all 0.2s ease; } .purands-order-card:hover { border-color: var(--chat-text-muted); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .purands-order-card:last-child { margin-bottom: 0; } .purands-order-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; padding-bottom: 0.75em; border-bottom: 1px solid #f3f4f6; } .purands-order-header-left { display: flex; flex-direction: column; gap: 0.25em; } .purands-order-number { font-size: 1em; font-weight: 600; color: var(--chat-text); margin: 0; } .purands-order-date { font-size: 0.875em; color: var(--chat-text-muted); margin: 0; } .purands-order-status { display: inline-flex; align-items: center; gap: 0.375em; padding: 0.375em 0.75em; border-radius: 9999px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; } /* Status Badge Colors */ .purands-order-status.status-delivered { background: #d1fae5; color: #065f46; } .purands-order-status.status-out-for-delivery { background: #dbeafe; color: #1e40af; } .purands-order-status.status-in-transit, .purands-order-status.status-shipped { background: #e0e7ff; color: #4338ca; } .purands-order-status.status-processing, .purands-order-status.status-confirmed { background: #fef3c7; color: #92400e; } .purands-order-status.status-cancelled, .purands-order-status.status-failed { background: #fee2e2; color: #991b1b; } .purands-order-status.status-pending { background: #f3f4f6; color: #374151; } .purands-order-status svg { width: 12px; height: 12px; } /* Order Items */ .purands-order-items { margin: 1em 0; } .purands-order-item { display: flex; align-items: center; gap: 0.75em; padding: 0.625em 0; } .purands-order-item:not(:last-child) { border-bottom: 1px solid #f3f4f6; } .purands-order-item-image { width: 48px; height: 48px; border-radius: 0.5em; object-fit: cover; background: #f9fafb; flex-shrink: 0; } .purands-order-item-details { flex: 1; min-width: 0; } .purands-order-item-title { font-size: 0.875em; font-weight: 500; color: var(--chat-text); margin: 0 0 0.25em 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .purands-order-item-variant { font-size: 0.75em; color: var(--chat-text-muted); margin: 0; } .purands-order-item-qty { font-size: 0.875em; color: var(--chat-text-muted); flex-shrink: 0; } /* Order Footer */ .purands-order-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1em; padding-top: 1em; border-top: 1px solid #f3f4f6; flex-wrap: wrap; gap: 0.75em; } .purands-order-price { font-size: 1.125em; font-weight: 600; color: var(--chat-text); margin: 0; } .purands-order-actions { display: flex; gap: 0.5em; flex-wrap: wrap; } .purands-order-track-btn, .purands-order-view-btn { padding: 0.5em 1em; border-radius: 0.5em; font-size: 0.875em; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 0.375em; border: none; } .purands-order-track-btn { background: var(--chat-primary); color: white; } .purands-order-track-btn:hover { background: var(--chat-primary); opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .purands-order-view-btn { background: var(--chat-bg); color: var(--chat-text); border: 1px solid #e5e7eb; } .purands-order-view-btn:hover { background: #f9fafb; border-color: var(--chat-text-muted); } .purands-order-track-btn svg, .purands-order-view-btn svg { width: 14px; height: 14px; } /* Delivery Journey Timeline */ .purands-delivery-journeys { margin: 1em 0; } .purands-delivery-journey { background: #f9fafb; border-radius: 0.5em; padding: 1em; margin-bottom: 1em; } .purands-delivery-journey:last-child { margin-bottom: 0; } .purands-journey-title { display: flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--chat-text); margin-bottom: 1em; font-size: 0.95em; } .purands-journey-title svg { flex-shrink: 0; color: var(--chat-primary); } .purands-carrier-name { margin-left: auto; font-size: 0.875em; font-weight: 500; color: var(--chat-primary); background: var(--chat-bg); padding: 0.25em 0.75em; border-radius: 1em; } .purands-journey-timeline { position: relative; padding: 0.5em 0; } .purands-journey-step { display: flex; gap: 0.75em; position: relative; padding-bottom: 1.5em; } .purands-journey-step:last-child { padding-bottom: 0; } .purands-journey-indicator { flex-shrink: 0; width: 2em; height: 2em; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 1em; z-index: 2; position: relative; } .purands-journey-step.completed .purands-journey-indicator { background: #10b981; color: white; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); } .purands-journey-step.failed .purands-journey-indicator { background: #ef4444; color: white; } .purands-journey-connector { position: absolute; left: 1em; top: 2em; width: 2px; height: calc(100% - 0.5em); background: #e5e7eb; z-index: 1; } .purands-journey-connector.completed { background: #10b981; } .purands-journey-step-content { flex: 1; padding-top: 0.25em; } .purands-journey-step-label { font-weight: 500; color: var(--chat-text); font-size: 0.9em; margin-bottom: 0.25em; } .purands-journey-step.completed .purands-journey-step-label { color: #10b981; font-weight: 600; } .purands-journey-step.failed .purands-journey-step-label { color: #ef4444; } .purands-journey-step-date { font-size: 0.875em; color: var(--chat-text-muted); } .purands-journey-step-date.pending { color: var(--chat-text-muted); font-style: italic; } .purands-tracking-info { display: flex; align-items: center; gap: 0.5em; margin-top: 1em; padding: 0.75em; background: var(--chat-bg); border-radius: 0.5em; font-size: 0.875em; } .purands-tracking-label { font-weight: 500; color: var(--chat-text-muted); } .purands-tracking-number { font-family: 'Courier New', monospace; color: var(--chat-text); font-weight: 600; user-select: all; -webkit-user-select: all; } .purands-package-items { margin-top: 1em; padding: 0.75em; background: var(--chat-bg); border-radius: 0.5em; } .purands-package-items-title { font-weight: 600; font-size: 0.875em; color: var(--chat-text); margin-bottom: 0.5em; } .purands-package-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5em 0; font-size: 0.875em; border-bottom: 1px solid #f3f4f6; } .purands-package-item:last-child { border-bottom: none; } .purands-package-item-name { color: var(--chat-text); flex: 1; } .purands-package-item-qty { color: var(--chat-text-muted); font-weight: 500; } /* Mobile Responsive */ @media (max-width: 640px) { .purands-orders-modal-content { max-width: 100%; max-height: 100vh; border-radius: 0; } .purands-orders-modal-header { padding: 1em; } .purands-orders-modal-title { font-size: 1.125em; } .purands-orders-modal-content-body { padding: 1em; } .purands-order-card { padding: 1em; } .purands-order-header { flex-direction: column; align-items: flex-start; gap: 0.5em; } .purands-order-footer { flex-direction: column; align-items: stretch; } .purands-order-actions { width: 100%; } .purands-order-track-btn, .purands-order-view-btn { flex: 1; justify-content: center; } .purands-order-item-title { font-size: 0.8125em; } } /* Messages area with improved scrollbar and performance optimizations */ /* Cap and centre the conversation column. Maximised on a wide monitor the panel fills the screen and nothing constrained the thread, so an answer ran the full width — around 190 characters per line at 1400px, against a comfortable measure of 60-75. The panel itself stays full-bleed; only the column inside it is capped. The composer below carries the same cap, since messagesArea, inputWrapper and footer are SIBLINGS — capping the thread alone would leave a centred 960px conversation above a full-width composer. The cap is NOT on this element, deliberately: this is the scroll container, and capping it puts the scrollbar on the column's right edge, floating in the middle of a wide panel instead of at the panel edge where it belongs. The scroller stays full width and the ROWS inside it are capped and centred instead. */ .purands-chat-messages { flex: 1 1 0; padding: 1em; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; /* Wider than a bubbled thread needs: the bot bubble's surface used to be the only thing separating consecutive AI answers, so without it they run together at 0.75em. */ gap: 1.25em; /* min-height: 0 (not 100px / min-content) is critical: lets the flex parent constrain this area so overflow-y: auto can scroll instead of pushing the input/footer out of the visible modal. flex-basis: 0 + grow: 1 = takes all remaining space after fixed siblings, no more, no less. */ min-height: 0; /* Performance optimizations - using layout paint instead of strict to avoid size collapse */ contain: layout paint; overflow-anchor: none; transform: translateZ(0); will-change: scroll-position; -webkit-overflow-scrolling: touch; scroll-behavior: auto; /* Disable smooth scroll for better performance */ } .purands-chat-messages::-webkit-scrollbar { width: 6px; } .purands-chat-messages::-webkit-scrollbar-track { background: transparent; } .purands-chat-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; transition: background 0.2s; } .purands-chat-messages::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Hidden messages (pin-to-top: previous messages hidden when user sends a question) */ .purands-msg-hidden { display: none !important; } /* Enhanced message bubbles */ .purands-chat-message { display: flex; gap: 0.75em; align-items: flex-start; /* The conversation's column cap lives HERE, on each row, rather than on the scrolling .purands-chat-messages parent. Capping the scroller would drag its scrollbar inward to the column's edge, leaving it floating mid-panel on a wide screen; capping the rows keeps the scroller full width so the scrollbar stays at the panel edge, and the content still reads as one centred column. min() so the row never exceeds its parent on a narrow popup panel. */ width: 100%; max-width: min(100%, var(--chat-max-width)); margin-left: auto; margin-right: auto; animation: messageSlideIn 0.3s ease-out; } @keyframes messageSlideIn { from { opacity: 0; transform: translateY(10px) translateZ(0); } to { opacity: 1; transform: translateY(0) translateZ(0); } } .purands-chat-message-user { justify-content: flex-end; } .purands-chat-message-content { display: flex; flex-direction: column; gap: 0.25em; max-width: 90%; min-width: 0; /* Prevent wider children (carousel, followup pills) from stretching narrower siblings (bubble, timestamp, feedback buttons). */ align-items: flex-start; } .purands-chat-message-user .purands-chat-message-content { align-items: flex-end; } .purands-chat-bubble { display: block; position: relative; border-radius: 1.25em; padding: 0.75em; font-size: 0.95em; line-height: 1.5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; width: fit-content; align-self: flex-start; transition: transform 0.2s ease; } .purands-chat-message-user .purands-chat-bubble { align-self: flex-end; } .purands-chat-bubble p { margin: 0; padding: 0; } /* Only the USER bubble lifts on hover — it still has a surface for a shadow to belong to. AI answers are flat now (transparent, no padding, no radius), so this rule drew a shadow around an invisible box: a phantom card outline appearing under the cursor with nothing to outline. It survived the flat change because `:hover` is (0,2,0) and beat the flat `.purands-chat-bubble-bot` at (0,1,0), quietly restoring the box-shadow the flat rule had removed. */ .purands-chat-message-user .purands-chat-bubble:hover { transform: translateY(-1px) translateZ(0); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .purands-chat-bubble-user { background: var(--chat-bubble-user); border-bottom-right-radius: 0.25em; } /* ═══ AI answers render without a bubble surface ═══ Only the user gets a bubble; the answer is plain text on the panel. Motivated by our own DOM: carousels, profile forms, discount codes and follow-ups are already SIBLINGS of the bubble, so it wrapped the prose and nothing else — a product reply rendered as a grey slab followed by full-width cards, making the bubble the odd element out in its own message. The bubble ELEMENT is kept and only its surface removed, so every text rule attached to it still applies: the descendant colour hardening against host themes, and the markdown list/heading styles. box-shadow must be cleared explicitly — a shadow still paints on a transparent box. */ .purands-chat-bubble-bot { background: transparent; padding: 0; box-shadow: none; border-radius: 0; width: 100%; } /* Prose uses the full measure now there's no bubble padding, with a small gutter back so it isn't flush against the panel edge and lopsided against the inset user bubble. User messages keep their 90% so the bubble stays a distinct, right-aligned block. */ .purands-chat-message-ai .purands-chat-message-content { max-width: 100%; padding-left: 0.25em; } /* `.purands-chat-bubble p { margin: 0 }` is right INSIDE a bubble, where the container's padding does the spacing and answers are short. With no bubble, consecutive paragraphs collapse into one block and a multi-paragraph answer reads as a run-on — exactly the long answer this layout exists to serve. Last paragraph stays flush so nothing trails. */ .purands-chat-bubble-bot p { margin: 0 0 0.75em; } .purands-chat-bubble-bot p:last-child { margin-bottom: 0; } /* One timestamp per exchange: the question drops its own, the answer keeps it. A question and its answer land seconds apart, so two times is noise — and the single one belongs on the answer, the thing you scroll back to find, where it pairs with the feedback buttons as one meta row. */ .purands-chat-message-user .purands-chat-timestamp { display: none; } /* Message text colour must be declared on the DESCENDANTS, not just the bubble. marked.parse() wraps message text in

, and an inherited colour always loses to a rule that matches the element directly — specificity never enters into it, so a host theme's plain `p { color: … }` beat the bubble's own colour. On the dark user bubble that rendered dark-on-dark and the message vanished entirely (KebabSmith). The bot bubble was equally unprotected; it just happened to look right because the leaked colour was dark on a light background. !important so a theme's own !important can't win either. Same class of leak as the product-fit score bars. `a` is deliberately excluded — links keep their own colour rules below. */ .purands-chat-bubble-user, .purands-chat-bubble-user p, .purands-chat-bubble-user li, .purands-chat-bubble-user span, .purands-chat-bubble-user strong, .purands-chat-bubble-user em, .purands-chat-bubble-user code, .purands-chat-bubble-user blockquote, .purands-chat-bubble-user h1, .purands-chat-bubble-user h2, .purands-chat-bubble-user h3, .purands-chat-bubble-user h4, .purands-chat-bubble-user h5, .purands-chat-bubble-user h6 { color: var(--chat-text-inverse) !important; } .purands-chat-bubble-bot, .purands-chat-bubble-bot p, .purands-chat-bubble-bot li, .purands-chat-bubble-bot span, .purands-chat-bubble-bot strong, .purands-chat-bubble-bot em, .purands-chat-bubble-bot code, .purands-chat-bubble-bot blockquote, .purands-chat-bubble-bot h1, .purands-chat-bubble-bot h2, .purands-chat-bubble-bot h3, .purands-chat-bubble-bot h4, .purands-chat-bubble-bot h5, .purands-chat-bubble-bot h6 { color: var(--chat-text) !important; } /* Links in chat messages */ .purands-chat-bubble a { color: var(--chat-primary) !important; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 500; } .purands-chat-bubble-user a { color: var(--chat-text-inverse) !important; text-decoration: underline; cursor: pointer; } .purands-chat-bubble-bot a { color: var(--chat-primary) !important; text-decoration: underline; cursor: pointer; } .purands-chat-bubble a:hover { text-decoration: underline; opacity: 0.8; } .purands-chat-timestamp { font-size: 0.7em; color: var(--chat-text-muted); padding: 0 0.75em; opacity: 0.8; } /* Thumbs + time share one row on AI replies. They are separate children of the message's flex COLUMN, so without this wrapper each claimed its own line and every answer ended with two rows of chrome. align-self, NOT justify-content: the parent sets `align-items: flex-start`, so this row shrink-wraps to its content and justify-content would have nothing to distribute. align-self moves the wrapped row itself to the trailing edge. */ .purands-chat-meta { display: flex; align-items: center; align-self: flex-end; } /* The base spacing was tuned for the old time-then-thumbs order: the timestamp carried padding on both sides and the feedback container a left margin. With the order swapped, the thumbs no longer have anything before them, and the time needs its gap on the left and nothing on the right — so it finishes flush with the panel's right gutter, the same edge the user bubble ends on. */ .purands-chat-meta .purands-feedback-container { margin-left: 0; } .purands-chat-meta .purands-chat-timestamp { padding: 0 0 0 0.75em; } /* Feedback buttons for AI messages */ .purands-feedback-container { display: inline-flex; gap: 0.25em; margin-left: 0.5em; opacity: 0.6; transition: opacity 0.2s ease; } .purands-chat-message-ai:hover .purands-feedback-container { opacity: 1; } .purands-feedback-btn { background: transparent; border: none; padding: 0.25em; cursor: pointer; border-radius: 4px; color: var(--chat-text-muted); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .purands-feedback-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); } .purands-feedback-btn:disabled { cursor: default; opacity: 0.5; } .purands-feedback-up.purands-feedback-selected { color: #10b981; opacity: 1; } .purands-feedback-down.purands-feedback-selected { color: #ef4444; opacity: 1; } .purands-feedback-submitted .purands-feedback-btn:not(.purands-feedback-selected) { opacity: 0.3; } .purands-typing-inline { display: inline-flex; align-items: center; gap: 0.5em; font-style: italic; color: var(--chat-text-muted); } /* Enhanced typing indicator */ .purands-typing-indicator { display: inline-flex; gap: 0.3em; align-items: center; contain: layout style paint; /* will-change: contents; */ } .purands-typing-dot { width: 0.25em; height: 0.25em; background: var(--chat-text-muted); border-radius: 50%; animation: typing-bounce 1.4s ease-in-out infinite; align-self: center; margin: auto 0; vertical-align: middle; } .purands-typing-dot:nth-child(1) { animation-delay: -0.32s; } .purands-typing-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-0.75em); opacity: 1; } } /* Enhanced input area */ .purands-chat-input-wrapper { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-top: 1px solid #e5e7eb; padding: 1em 1.25em; flex-shrink: 0; position: relative; width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* Belt-and-suspenders: never allow horizontal overflow on the input row, even if a focused theme rule expands the input or a long word is typed. */ overflow-x: hidden !important; box-sizing: border-box !important; padding-bottom: 0px; background-clip: padding-box; z-index: 10; } .purands-widget-input-container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.75em !important; background: var(--chat-bg) !important; /* Resting border — defines the input as the primary action against the white container background. Brand color appears on focus below. */ border: 1.5px solid rgba(0, 0, 0, 0.10) !important; border-radius: 2em !important; padding: 0.625em 0.875em !important; transition: var(--chat-transition) !important; min-height: unset !important; height: auto !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); /* Allow flex children to shrink and prevent overflow. max-width is safer than width:100% — if any ancestor computes wider than viewport, width:100% would inherit that excess; max-width caps to parent. box-sizing border-box keeps padding inside the constraint. min() of both constraints, not either alone: --chat-max-width matches the conversation column so the composer lines up with the thread on a wide screen, while the 100% keeps the original guarantee that it never exceeds its parent — 60em on its own would overflow a 420px popup panel. The cap sits on this inner container rather than .purands-chat-input-wrapper because the wrapper carries the background and the border-top divider: capping the wrapper would shrink that rule to 960px and leave the composer floating as a card instead of sitting on a line that spans the panel. */ min-width: 0 !important; max-width: min(100%, var(--chat-max-width)) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .purands-widget-input-container:focus-within { border-color: var(--chat-primary) !important; box-shadow: 0 0 0 3px rgba(var(--chat-primary-rgb), 0.12); } .purands-chat-input-field { /* flex: 1 + min-width: 0 + max-width: 100% with !important — critical for mobile. Some Shopify themes (Paula's Choice) have `input:focus` rules that set width: 100% or similar, which without !important would push our mic/send buttons off-screen when the input is focused. */ flex: 1 1 0 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; background: transparent !important; background-image: none !important; background-color: transparent !important; border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; outline: none !important; color: var(--chat-text) !important; /* 16px in absolute units (not 1em) — iOS Safari triggers auto-zoom on focus when an input's COMPUTED font-size is < 16px. `em` resolves against the parent, so a theme overriding any ancestor's font-size could push us below 16px. Pixel value guarantees no zoom regardless of cascade. */ font-size: 16px !important; padding: 0.5em !important; height: auto !important; min-height: unset !important; max-height: unset !important; line-height: 1.4 !important; margin: 0 !important; box-shadow: none !important; /* Aggressive defenses against Shopify themes that style native elements (Paula's Choice was painting a black bar in the middle of our pill — likely a theme rule like `input { border-bottom }`, `input { background: linear-gradient(...) }`, or `input::placeholder { background }` that we need to neutralize at every angle). */ text-decoration: none !important; text-decoration-line: none !important; text-decoration-color: transparent !important; text-shadow: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; border-radius: 0 !important; filter: none !important; backdrop-filter: none !important; } .purands-chat-input-field::before, .purands-chat-input-field::after { content: none !important; display: none !important; background: none !important; } .purands-chat-input-field::placeholder { color: var(--chat-text-muted); } .purands-chat-input-field:hover { background: transparent; box-shadow: none; } .purands-chat-input-field:focus { box-shadow: none; } .purands-chat-send-button { /* width/height + flex-shrink: 0 with !important so theme rules on focused siblings can't squeeze the button to zero width on mobile. */ width: 2.75em !important; height: 2.75em !important; min-width: 2.75em !important; flex-shrink: 0 !important; border: none; border-radius: 50%; background: var(--chat-primary); color: var(--chat-text-inverse); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--chat-transition); padding: 0; position: relative; overflow: hidden; } .purands-chat-send-button::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent); opacity: 0; transform: scale(0); transition: transform 0.3s ease, opacity 0.3s ease; } .purands-chat-send-button:hover:not(:disabled)::before { opacity: 1; transform: scale(1); } .purands-chat-send-button:hover:not(:disabled) { background: var(--chat-primary-hover); transform: scale(1.1); } .purands-chat-send-button:active:not(:disabled) { transform: scale(0.95); } .purands-chat-send-button:disabled { /* Disabled = light gray fill (distinct color), enabled = brand color. Visually obvious "ready to send" transition even when brand primary itself is a neutral. */ background: rgba(0, 0, 0, 0.08) !important; color: rgba(0, 0, 0, 0.35) !important; opacity: 1; cursor: not-allowed; } .purands-chat-send-button svg { width: 1.25em; height: 1.25em; transition: transform 0.2s ease; fill: none; } .purands-chat-send-button:focus { outline: none; box-shadow: none; } .purands-chat-send-button:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; } .purands-chat-send-button:hover:not(:disabled) svg { transform: translateX(2px); } /* Microphone button for speech-to-text */ .purands-chat-mic-button { /* Same defense as send button — guarantees the mic stays visible on mobile when the focused input would otherwise squeeze it to nothing. */ width: 2.25em !important; height: 2.25em !important; min-width: 2.25em !important; flex-shrink: 0 !important; border: none; border-radius: 50%; background: transparent; /* Muted at rest — the input text + send button are primary; mic is secondary and shouldn't compete for attention. Picks up the brand color on hover/focus. */ color: rgba(0, 0, 0, 0.45); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; margin-right: 0.25em; } .purands-chat-mic-button:hover { background: rgba(var(--chat-primary-rgb), 0.1); color: var(--chat-primary); transform: scale(1.05); } .purands-chat-mic-button:active { transform: scale(0.95); } .purands-chat-mic-button:focus { outline: none; box-shadow: none; } .purands-chat-mic-button:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; } .purands-chat-mic-button.recording { background: var(--chat-primary); color: var(--chat-text-inverse); animation: pulse-recording 1.5s infinite; } @keyframes pulse-recording { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--chat-primary-rgb), 0.7); } 50% { opacity: 0.9; box-shadow: 0 0 0 8px rgba(var(--chat-primary-rgb), 0); } } .purands-chat-mic-button svg { width: 1.125em; height: 1.125em; fill: none; /* Inherit from button color (muted at rest, brand on hover, white when recording). Was hardcoded black, which made it dominate the input. */ stroke: currentColor; stroke-width: 1.75; } .purands-chat-mic-button:disabled { opacity: 0.4; cursor: not-allowed; } /* Voice mode - hide input field and show listening animation */ .purands-widget-input-container.voice-active .purands-chat-input-field { display: none; } .purands-widget-input-container.voice-active .purands-chat-send-button { display: none; } .purands-voice-listening-text { /* !important — Shopify themes (e.g. Paula's Choice) override generic `display: none` with `div { display: block !important }` style resets, which makes this voice-only UI bleed into the input pill as a horizontal bar even when voice mode is off. */ display: none !important; flex: 1; color: var(--chat-text); font-size: 0.95em; align-items: center; justify-content: center; gap: 0.5em; padding: 0 0.5em; } .purands-widget-input-container.voice-active .purands-voice-listening-text { display: flex !important; } .purands-voice-listening-text .purands-voice-status { display: flex; align-items: center; gap: 0.5em; } .purands-voice-listening-text.has-transcript .purands-voice-status { display: none; } .purands-voice-listening-text .purands-transcript { color: var(--chat-text); } .purands-voice-listening-text .purands-listening-dots { display: flex; gap: 0.25em; align-items: center; } .purands-voice-listening-text .purands-listening-dot { width: 0.375em; height: 0.375em; background: var(--chat-primary); border-radius: 50%; animation: listening-bounce 1.4s ease-in-out infinite; } .purands-voice-listening-text .purands-listening-dot:nth-child(1) { animation-delay: -0.32s; } .purands-voice-listening-text .purands-listening-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes listening-bounce { 0%, 60%, 100% { transform: scale(1); opacity: 0.4; } 30% { transform: scale(1.5); opacity: 1; } } /* Enhanced carousel */ .purands-chat-carousel { display: flex; align-items: stretch; /* Parent column uses align-items: flex-start so siblings (bubble, timestamp, feedback) don't stretch; carousel needs the full column width for horizontal scrolling, so it explicitly opts back into stretch via align-self + width 100%. */ align-self: stretch; width: 100%; gap: 1em; overflow-x: auto; padding: 0; margin: 0; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .purands-chat-carousel::-webkit-scrollbar { display: none; } /* Carousel wrapper + explicit scroll arrows */ .purands-carousel-wrapper { position: relative !important; align-self: stretch !important; width: 100% !important; } .purands-carousel-arrow { position: absolute !important; top: 6em !important; /* roughly vertically centred on the image area */ transform: translateY(-50%) !important; z-index: 5 !important; width: 2.25em !important; height: 2.25em !important; border-radius: 50% !important; border: 1px solid #e5e5e5 !important; background: var(--chat-bg, #fff) !important; color: var(--chat-text, #222) !important; display: none; /* toggled to flex by JS when scrollable */ align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important; transition: background 0.2s ease, transform 0.2s ease !important; } .purands-carousel-arrow:hover, .purands-carousel-arrow:focus { background: var(--chat-primary) !important; color: var(--chat-text-inverse, #fff) !important; outline: none !important; } .purands-carousel-arrow-prev { left: 0.25em !important; } .purands-carousel-arrow-next { right: 0.25em !important; } .purands-carousel-arrow svg { fill: none !important; stroke: currentColor !important; } /* Rating pill overlay on card image */ .purands-card-rating-pill { position: absolute !important; bottom: 0.5em !important; left: 0.5em !important; z-index: 3 !important; display: flex !important; align-items: center !important; gap: 0.25em !important; padding: 0.2em 0.5em !important; border-radius: 1em !important; background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important; font-size: 0.85em !important; font-weight: 700 !important; color: #1f2937 !important; pointer-events: none !important; } .purands-card-rating-star { color: #f59e0b !important; flex-shrink: 0 !important; } /* Product badge (top-left) — label + colors come inline from upstream product_badge {name, text, background}, so no color rules here */ .purands-card-product-badge { position: absolute !important; top: 0.5em !important; left: 0.5em !important; z-index: 3 !important; padding: 0.25em 0.6em !important; border-radius: 1em !important; font-size: 0.72em !important; font-weight: 700 !important; letter-spacing: 0.02em !important; pointer-events: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important; } /* Show-more reveals keep a dashed border, tying back to the "Show more" card */ .purands-chat-card-from-show-more { border: 1px dashed #c0c0c0 !important; } /* Slim labeled divider that replaces the "Show more" card after expansion; clickable — collapses the revealed items back behind "Show more" */ .purands-carousel-group-divider { flex: 0 0 auto !important; position: relative !important; width: 2em !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } .purands-carousel-group-divider:hover span, .purands-carousel-group-divider:focus-visible span { color: var(--chat-primary) !important; } .purands-carousel-group-divider:focus { outline: none !important; } .purands-carousel-group-divider::before { content: '' !important; position: absolute !important; top: 6% !important; bottom: 6% !important; left: 50% !important; width: 1px !important; background: #d8d8d8 !important; } .purands-carousel-group-divider span { position: relative !important; z-index: 1 !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; background: var(--chat-bg, #fff) !important; padding: 0.6em 0 !important; font-size: 0.72em !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--chat-text-muted, #6b7280) !important; white-space: nowrap !important; } /* PLP-style variant chips. Row (vertical) gap is larger than the column gap to leave room for the savings badge overhang on wrapped lines — STATIC on purpose, so spacing never changes with discounts present. */ .purands-variant-chips { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 0.5em 0.4em !important; width: 100% !important; margin-bottom: 0.6em !important; } .purands-variant-chips-disabled { opacity: 0.55 !important; pointer-events: none !important; } /* Option-dimension picker: one labelled chip row per option (Size, Pack). Row gap must stay clearly larger than the 0.4em intra-row wrap gap so unlabeled rows (title-split fallback) still read as separate groups. */ .purands-variant-picker { display: flex !important; flex-direction: column !important; gap: 0.75em !important; width: 100% !important; margin-bottom: 0.6em !important; } .purands-variant-picker .purands-variant-chips { margin-bottom: 0 !important; } .purands-option-row-label { font-size: 0.68em !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--chat-text-muted, #6b7280) !important; } /* Chip = fixed-height label pill. The savings badge is NOT in the layout flow — it's an absolutely-positioned overlay pinned to the chip's bottom edge (see .purands-variant-chip-badge), so a discount on one chip can never change any chip's height. overflow stays visible so the badge can hang past the border. */ .purands-variant-chip { position: relative !important; display: inline-flex !important; flex-direction: column !important; align-items: stretch !important; padding: 0 !important; /* Wide enough that the attached "NN% off" band (inset 0.55em per side) always sits WITHIN the pill — short labels (oil, 5ML) otherwise leave the band poking past the rounded edges */ min-width: 5.4em !important; /* flex gap owns all picker spacing — beat the card's '.purands-chat-card-buttons button { margin-bottom: 5px }' rule */ margin: 0 !important; overflow: visible !important; background: var(--chat-bg, #fff) !important; border: 1.5px solid #d1d5db !important; border-radius: 0.6em !important; color: var(--chat-text, #222) !important; /* 0.8em is relative to the widget's pinned --chat-font-base-size, so chip text already scales with the brand's Base Font Size — the em keeps the deliberate size step down from body copy. */ font-size: 0.8em !important; /* Unselected chips are body copy: only the chosen one earns emphasis, so the row reads as one selected option rather than four competing bold labels. */ font-weight: var(--chat-font-body-weight) !important; line-height: 1.1 !important; cursor: pointer !important; /* Deliberately no font-weight transition: it is discrete for non-variable fonts and animating it reflows the label's width on every selection. */ transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important; } .purands-variant-chip:hover { border-color: var(--chat-primary) !important; } .purands-variant-chip.selected { border-color: var(--chat-primary) !important; background: rgba(var(--chat-primary-rgb), 0.08) !important; color: var(--chat-primary) !important; /* The brand's own emphasis weight — the only "bolder than body" value branding gives us. HUFT resolves to 500 (a real self-hosted Rubik Medium cut); Minimalist to 700. */ font-weight: var(--chat-font-heading-weight) !important; } /* Fixed label box: uniform height with centered content — the discount band is an addition below, inside a consistent footprint */ .purands-variant-chip-label { /* Grid (not flex) so the visible text and the width-reserving copy below can share one cell and stack instead of sitting side by side. */ display: grid !important; grid-template-areas: "label" !important; place-items: center !important; min-height: 1.35em !important; padding: 0.4em 0.7em !important; text-align: center !important; } /* Reserve the selected width. .purands-variant-chips is flex-wrap, and chips are content-sized, so bolding the selected chip would widen it and shift every chip after it — occasionally re-wrapping the row. An invisible copy of the label at the emphasis weight occupies the same grid cell, so the cell is always sized for the heaviest state and selection changes nothing about the layout. Both children are placed explicitly: relying on grid auto-placement would drop the text into an implicit second row instead of stacking. */ .purands-variant-chip-label-text, .purands-variant-chip-label::after { grid-area: label !important; } .purands-variant-chip-label::after { content: attr(data-label) !important; font-weight: var(--chat-font-heading-weight) !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } /* First dimension = the "variant" row: pill-shaped to read differently from its member rows (boxes) below. Chips are always label-height now (the badge overlays, never stacks), so 1.1em ≈ half the chip height and renders as a full pill. */ .purands-option-row--primary .purands-variant-chip { border-radius: 1.1em !important; } .purands-option-row--primary .purands-variant-chip-label { padding: 0.4em 0.95em !important; } /* Members of unselected variants: hidden until their variant is picked. Must carry !important — the chip base display is inline-flex !important, which would override a plain inline style. */ .purands-variant-chip.purands-chip-hidden { display: none !important; } /* Savings band: a full-width strip ATTACHED under the chip (PDP-style "5% off"), absolutely positioned so it takes NO layout space — chip boxes stay one fixed height with or without a discount. Rows that show bands add bottom room via .purands-option-row--banded (toggled by the picker) so the hanging band never overlaps the next row. Brand primary (from the store's metafields), never a fixed color. */ .purands-variant-chip-badge { position: absolute !important; top: calc(100% - 1px) !important; /* Inset within the chip silhouette — the chip is always wider than the band, so it never pokes past the rounded corners */ left: 0.55em !important; right: 0.55em !important; z-index: 1 !important; display: block !important; margin: 0 !important; padding: 0.14em 0.4em !important; border-radius: 0 0 0.55em 0.55em !important; background: var(--chat-primary) !important; color: var(--chat-text-inverse, #fff) !important; font-size: 0.72em !important; /* Brand emphasis weight, not a hardcoded 700 — but deliberately NOT the body weight: this is small white text on a saturated fill, where 400 loses perceived contrast. HUFT resolves to a real Rubik Medium cut, which also stops the band out-weighing the label it hangs from. */ font-weight: var(--chat-font-heading-weight) !important; line-height: 1.3 !important; white-space: nowrap !important; text-align: center !important; } /* Room for the attached bands: larger vertical wrap gap inside the row, plus bottom margin before whatever follows. Inside the multi-row picker the picker's own 0.75em gap supplies part of the clearance. */ .purands-variant-chips.purands-option-row--banded { gap: 1.2em 0.4em !important; margin-bottom: 1.35em !important; } .purands-variant-picker .purands-variant-chips.purands-option-row--banded { margin-bottom: 0.55em !important; } /* Discounted price display: struck-through compare price + green "% OFF" stacked BELOW the current price — keeps the bottom row narrow so the Add button has room. The row's min-height already reserves the second line, so discounted and non-discounted cards stay the same height. */ .purands-price-current { display: block !important; line-height: 1.2 !important; } /* The compare-at price and the "N% OFF" badge may wrap onto separate lines when the row is tight. They could not before, and the parent price cell clips with overflow: hidden — so once an item was added to cart and the wider quantity stepper replaced the narrow "Add" button, the space left for the price shrank and "5% OFF" was cut mid-word ("5% O…"). The two tokens still never break internally — see the rule below — so this wraps between them rather than inside a price. */ .purands-price-strike-row { /* flex-wrap, not white-space. renderPriceFor concatenates the two spans with NO whitespace between them, so `white-space: normal` alone permits wrapping but leaves nothing to wrap AT — the visible gap is margin, which is spacing, not a break opportunity. As flex items they wrap without needing a text node. */ display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; column-gap: 0.35em !important; row-gap: 0 !important; line-height: 1.2 !important; white-space: normal !important; } /* Neither token may break internally — a price split across lines ("₹599.\n00") or a severed "5% \nOFF" is worse than the wrap this allows between them. */ .purands-price-compare, .purands-price-off { white-space: nowrap !important; } .purands-price-compare { font-size: 0.78em !important; font-weight: 500 !important; color: var(--chat-text-muted, #6b7280) !important; text-decoration: line-through !important; } .purands-price-off { font-size: 0.78em !important; font-weight: 700 !important; color: var(--chat-primary) !important; /* Spacing comes from the strike row's column-gap now. Keeping margin-left here would double it to 0.7em, and it would still apply on the wrapped line where the badge starts the row. */ margin-left: 0 !important; } /* Enhanced product cards */ .purands-chat-card { background: var(--chat-bg) !important; border: 1px solid #e5e5e5 !important; border-radius: 1em !important; min-width: 15em !important; max-width: 15em !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; cursor: pointer !important; } .purands-chat-card-buttons button { margin-bottom: 5px; } .purands-chat-card-show-more { background: var(--chat-bg) !important; border: 1px dashed #c0c0c0 !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 8em !important; max-width: 8em !important; cursor: pointer !important; transition: background 0.2s ease, border-color 0.2s ease !important; /* Extra gap so the divider line below has room to breathe */ margin-left: 1em !important; position: relative !important; } /* Vertical divider in the gap, separating product cards from "Show more" (sits in the margin so the card's own dashed border stays intact) */ .purands-chat-card-show-more::before { content: '' !important; position: absolute !important; left: -0.5em !important; top: 12% !important; bottom: 12% !important; width: 1px !important; background: #d8d8d8 !important; } .purands-chat-card-show-more:hover, .purands-chat-card-show-more:focus { background: #f5f5f5 !important; border-color: #909090 !important; outline: none !important; } .purands-chat-card-show-more-content { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.5em !important; padding: 1em !important; text-align: center !important; } .purands-chat-card-show-more-icon { width: 2.5em !important; height: 2.5em !important; border-radius: 50% !important; background: #f0f0f0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.5em !important; font-weight: 300 !important; color: #555 !important; } .purands-chat-card-show-more-text { font-size: 0.875em !important; color: #555 !important; font-weight: 500 !important; } .purands-chat-card-image-container { position: relative !important; width: 100% !important; height: 12em !important; background: #f5f5f5 !important; overflow: hidden !important; flex-shrink: 0 !important; } .purands-chat-card-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .purands-chat-card-image-link { width: 100%; height: 100%; cursor: pointer; display: block; } .purands-chat-card-image-wrapper { width: 100%; height: 100%; } .purands-chat-card:hover .purands-chat-card-image { transform: scale(1.05); } .purands-chat-card-no-image { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8f9fa; color: #8e8e93; } /* Wishlist/Save button */ .purands-wishlist-btn { position: absolute !important; top: 0.75em !important; right: 0.75em !important; left: auto !important; width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; min-height: 36px !important; max-height: 36px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.95) !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; z-index: 10 !important; padding: 0 !important; margin: 0 !important; color: #333 !important; -webkit-appearance: none !important; appearance: none !important; font-family: inherit !important; font-size: 1em !important; line-height: 1 !important; font-weight: 400 !important; text-align: center !important; vertical-align: middle !important; } .purands-wishlist-btn:hover, .purands-wishlist-btn:focus { transform: scale(1.1) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; background: rgba(255, 255, 255, 0.95) !important; outline: none !important; } .purands-wishlist-btn .purands-heart-icon, .purands-wishlist-btn svg.purands-heart-icon, button.purands-wishlist-btn .purands-heart-icon { transition: all 0.3s ease !important; fill: none !important; stroke: currentColor !important; } .purands-wishlist-btn.active .purands-heart-icon, .purands-wishlist-btn.active svg.purands-heart-icon, button.purands-wishlist-btn.active .purands-heart-icon { fill: var(--chat-primary) !important; stroke: var(--chat-primary) !important; } /* Additional specificity for heart icon path */ .purands-wishlist-btn .purands-heart-icon path, .purands-wishlist-btn svg.purands-heart-icon path { fill: none !important; stroke: currentColor !important; } .purands-wishlist-btn.active .purands-heart-icon path, .purands-wishlist-btn.active svg.purands-heart-icon path { fill: var(--chat-primary) !important; stroke: var(--chat-primary) !important; } .purands-wishlist-btn.animated { animation: heartbeat 0.6s ease; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.3); } 50% { transform: scale(1.1); } 75% { transform: scale(1.2); } } .purands-chat-card-content { padding: 1.25em !important; flex: 1 !important; display: flex !important; flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; position: relative !important; } .purands-chat-card-title { color: var(--chat-text) !important; margin-bottom: 0.75em !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; height: 2.8em !important; flex-shrink: 0 !important; /* A product name is body copy, not a heading — both brands' own product titles render at 400 (HUFT's `p`, Minimalist's `.product-item__text > a`), and both store brand_body_weight: 400. The hardcoded 700 here was what actually made the title bold; the the markdown renderer emitted was redundant. */ font-weight: var(--chat-font-body-weight) !important; font-size: 1em !important; } .purands-chat-card-title p { margin: 0; padding: 0; } .purands-chat-card-price { font-size: 1.25em; font-weight: 700; color: var(--chat-primary); margin-bottom: 0.5em; margin-top: -0.25em; flex-shrink: 0; } .purands-price-label { font-size: 0.75em; font-weight: 500; color: var(--chat-text-muted); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.25em; } .purands-chat-card-description { font-size: 0.95em; color: var(--chat-text-muted); line-height: 1.5; margin-bottom: 1em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; height: 6em; flex-shrink: 0; position: relative; display: none; } /* Fade effect for truncated descriptions */ .purands-chat-card-description.has-more::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2em; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); pointer-events: none; display: none; } /* Clickable description indicator */ .purands-chat-card-description.has-more { transition: color 0.2s ease; } .purands-chat-card-description.has-more:hover { color: var(--chat-primary); } /* Description tooltip for showing full text */ .purands-description-tooltip { position: fixed; background: rgba(0, 0, 0, 0.9); color: var(--chat-text-inverse); padding: 0.75em 1em; border-radius: 0.5em; font-size: 0.875em; line-height: 1.5; z-index: var(--purands-z-base); max-width: 300px; word-wrap: break-word; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(-5px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .purands-description-tooltip.visible { opacity: 1; transform: translateY(0); } .purands-chat-card-details-actions { margin-top: auto; flex-shrink: 0; } .purands-chat-card-buttons { display: flex; flex-direction: column; gap: 0.5em; width: 100%; } .purands-chat-card-button { width: 100%; padding: 0.75em; background: transparent; border: 2px solid var(--chat-primary); border-radius: 2em; color: var(--chat-primary); font-size: 0.9em; font-weight: 500; cursor: pointer; transition: var(--chat-transition); display: flex; align-items: center; justify-content: center; gap: 0.5em; text-decoration: none; margin-top: auto; } .purands-chat-card-button:hover, .purands-chat-card-button:focus { background: var(--chat-primary) !important; color: var(--chat-text-inverse) !important; border-color: var(--chat-primary) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3) !important; outline: none !important; } .purands-chat-card-button svg { fill: none !important; stroke: currentColor !important; } /* Variant and cart wrapper - displays selector, quantity, and button in same row */ /* Cart controls wrapper - contains quantity and add to cart button */ /* Fixed height prevents layout shift when toggling between Add to Cart ↔ quantity controls */ .purands-cart-controls-wrapper { display: flex; gap: 0.5em; width: 100%; min-height: 42px; } /* Variant selector dropdown - now full width */ .purands-variant-select { width: 100%; margin-bottom: 0.5em; padding: 0.75em 2.5em 0.75em 1em; background: var(--chat-bg); border: 2px solid #e5e7eb; border-radius: 0.75em; color: var(--chat-text); font-size: 0.9em; font-weight: 500; cursor: pointer; transition: var(--chat-transition); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%234b5563' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75em center; font-family: var(--chat-font-body) !important; } .purands-variant-select:hover { border-color: var(--chat-primary); background-color: #f9fafb; } .purands-variant-select:disabled { opacity: 0.6; cursor: not-allowed; background-color: #f3f4f6; border-color: var(--chat-text-muted); } .purands-variant-select:disabled:hover { border-color: var(--chat-text-muted); background-color: #f3f4f6; } .purands-variant-select:focus { outline: none; border-color: var(--chat-primary); box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.1); } .purands-variant-select:disabled { opacity: 0.6; cursor: not-allowed; background-color: #f3f4f6; border-color: var(--chat-text-muted); } /* Quantity controls */ .purands-quantity-wrapper { display: flex; align-items: center; gap: 0.25em; border: 2px solid #e5e7eb; border-radius: 0.75em; padding: 0.25em; background: var(--chat-bg); transition: var(--chat-transition); flex: 1 1 auto; justify-content: center; box-sizing: border-box; } .purands-quantity-wrapper:hover { border-color: var(--chat-primary); } .purands-quantity-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 0.5em; color: var(--chat-primary); font-size: 1.25em; font-weight: 600; cursor: pointer; transition: var(--chat-transition); line-height: 1; padding: 0; } .purands-quantity-btn:hover, .purands-quantity-btn:focus { background: rgba(var(--chat-primary-rgb), 0.1) !important; color: var(--chat-primary) !important; outline: none !important; } .purands-quantity-btn:active { transform: scale(0.95) !important; } .purands-quantity-input { width: 45px; height: 32px; border: none; text-align: center; font-size: 0.95em; font-weight: 600; color: var(--chat-text); background: transparent; appearance: textfield; -moz-appearance: textfield; } .purands-quantity-input::-webkit-outer-spin-button, .purands-quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .purands-quantity-input:focus { outline: none; } /* Bottom price + Add row (PLP style): price left, compact cart controls right. Fixed min-height keeps discounted and non-discounted cards the same height. */ .purands-price-cart-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; width: 100%; min-height: 2.6em; } .purands-price-cart-row .purands-chat-card-price { margin: 0; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .purands-price-cart-row button { margin-bottom: 0; } .purands-price-cart-row .purands-cart-controls-wrapper { width: auto; min-height: 0; flex: 0 0 auto; } .purands-price-cart-row .purands-cart-controls-wrapper .purands-chat-add-to-cart-button { flex: 0 0 auto; min-width: 0; margin-top: 0; padding: 0.5em 1.2em; font-size: 0.85em; background: var(--chat-primary); color: var(--chat-text-inverse); } /* Compact quantity stepper that fits the row slot. Hard minimums + no-shrink: the number input is a flex item and would otherwise get squeezed until the digit clips when the row is tight on mobile. */ .purands-price-cart-row .purands-quantity-wrapper { flex: 0 0 auto; padding: 0.15em; gap: 0.15em; } .purands-price-cart-row .purands-quantity-btn { width: 26px; min-width: 26px; height: 26px; font-size: 1em; flex: 0 0 auto; } .purands-price-cart-row .purands-quantity-input { width: 32px; min-width: 32px; height: 26px; font-size: 0.85em; flex: 0 0 auto; padding: 0; } /* Cart controls: Add to Cart button sizing — match quantity wrapper height */ .purands-cart-controls-wrapper .purands-chat-add-to-cart-button { flex: 1 1 auto; min-width: 120px; padding: 0.75em 1.25em; box-sizing: border-box; } /* When quantity wrapper is visible, button shares space */ .purands-cart-controls-wrapper .purands-quantity-wrapper:not([style*="display: none"]) { flex: 1 1 auto; } .purands-cart-controls-wrapper .purands-quantity-wrapper:not([style*="display: none"])~.purands-chat-add-to-cart-button { flex: 1 1 auto; min-width: 100px; } /* Follow-up questions container */ .purands-followup-questions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.75em; padding: 0; } /* Inline retry row — bubble + Retry pill side-by-side */ .purands-chat-bubble-retry-row { display: flex; flex-direction: row; align-items: center; gap: 0.5em; flex-wrap: wrap; align-self: flex-start; max-width: 100%; } .purands-retry-inline { margin-top: 0 !important; } /* Fade-in animation for followup pills arriving after main response */ @keyframes purands-followup-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .purands-followup-animate-in .purands-followup-pill { animation: purands-followup-fade-in 0.4s ease-out both; } .purands-followup-animate-in .purands-followup-pill:nth-child(1) { animation-delay: 0s; } .purands-followup-animate-in .purands-followup-pill:nth-child(2) { animation-delay: 0.1s; } .purands-followup-animate-in .purands-followup-pill:nth-child(3) { animation-delay: 0.2s; } .purands-followup-animate-in .purands-followup-pill:nth-child(4) { animation-delay: 0.3s; } /* Show More: staggered reveal animation for newly appended carousel cards */ .purands-chat-card-revealed { animation: purands-card-reveal 0.4s ease-out both; } @keyframes purands-card-reveal { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* Follow-up question pill */ .purands-followup-pill { display: inline-flex; align-items: center; padding: 0.5em 1em; background: rgba(var(--chat-primary-rgb), 0.1); border: 1.5px solid rgba(var(--chat-primary-rgb), 0.3); border-radius: 1.5em; color: var(--chat-primary); font-size: 0.875em; /* Brand body weight, not a hardcoded 500. A suggestion is an offer, not an emphasis — the brand-tinted fill and border already carry the affordance. This was 500 here while the SAME component was explicitly dropped to 400 in the hero, so follow-ups after an answer read heavier than the hero chips. One rule now, so the two surfaces cannot drift apart again. */ font-weight: var(--chat-font-body-weight); cursor: pointer; transition: all 0.2s ease; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; text-align: left; font-family: var(--chat-font-body) !important; } .purands-followup-pill:hover { background: var(--chat-primary); color: var(--chat-text-inverse); border-color: var(--chat-primary); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(var(--chat-primary-rgb), 0.3); } .purands-followup-pill:active { transform: translateY(0); } /* Reference link badges — inline source citations */ .purands-ref-badge { display: inline-flex; align-items: center; padding: 0.15em 0.5em; background: rgba(var(--chat-primary-rgb), 0.08); border: 1px solid rgba(var(--chat-primary-rgb), 0.2); border-radius: 0.75em; color: var(--chat-primary) !important; font-size: 0.75em; /* Supporting metadata — "here is where that came from". At 500 it was the heaviest thing in the reply, inverting the hierarchy against the answer it exists to support. The border and brand tint already signal it is tappable. */ font-weight: var(--chat-font-body-weight); cursor: pointer; text-decoration: none !important; transition: all 0.2s ease; white-space: nowrap; vertical-align: middle; margin-left: 0.25em; font-family: var(--chat-font-body) !important; } .purands-ref-badge:hover { background: var(--chat-primary); color: var(--chat-text-inverse) !important; border-color: var(--chat-primary); text-decoration: none !important; } /* Mobile optimization for follow-up pills */ @media (max-width: 768px) { .purands-followup-pill { font-size: 0.8em; padding: 0.4em 0.875em; max-width: calc(100vw - 4em); line-height: 1.3; } } @media (max-width: 480px) { .purands-followup-pill { font-size: 0.75em; padding: 0.375em 0.75em; max-width: calc(100vw - 3em); line-height: 1.3; } } /* Nudge chips — bottom-aligned welcome-state question pills. Reuses .purands-followup-pill for the pill visuals; container styles differ by mode (widget chat window vs. page-takeover hero). */ .purands-nudge-chips { display: flex; flex-wrap: wrap; gap: 0.5em; } .purands-nudge-chips--widget { padding: 0.5em 1.25em 0.75em; justify-content: flex-end; flex-shrink: 0; } .purands-nudge-chips--page { padding: 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.625em; max-width: clamp(20em, 80vw, 36em); margin: 0 auto; } /* Page-mode pills: content-sized + consistent styling with widget mode so both surfaces look like the same product. */ .purands-nudge-chips--page .purands-followup-pill { width: auto; max-width: 100%; text-align: center; justify-content: center; background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 0, 0, 0.10); color: var(--chat-text); /* font-weight intentionally NOT set: the base .purands-followup-pill now uses var(--chat-font-body-weight). Re-declaring 400 here is what let the hero and the in-conversation pills drift apart in the first place. */ padding: 0.625em 1.125em; } .purands-nudge-chips--page .purands-followup-pill:hover { background: rgba(var(--chat-primary-rgb), 0.08); border-color: rgba(var(--chat-primary-rgb), 0.3); color: var(--chat-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .purands-nudge-chips--page .purands-followup-pill:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } @media (max-width: 480px) { .purands-nudge-chips--widget { padding: 0.5em 0.875em 0.5em; } } /* ============================================================ Empty-state hero layout for the chat window. Activated by ChatWidget when there's no history: greeting + input + chips render as a centered "what should we ask?" hero rather than the default header-messages-input-at-bottom layout. Removed automatically when the first message is added. ============================================================ */ /* The container uses CSS Grid (see .purands-chat-container.show). We override the template with six rows: 1fr — top spacer (grows equally with row 5) auto — greeting auto — input auto — chips (natural content height; 0 until chips arrive) 1fr — bottom spacer (grows equally with row 1) auto — footer Two `1fr` spacers around the hero group keep it vertically centered. When chips arrive in row 4, both spacers shrink equally (by chips_h/2), producing a small symmetric shift rather than the input jumping from the bottom of the window. Horizontal: hero elements are capped via max-width below so they stay readable when the user maximizes the chat to fullscreen. */ .purands-chat-container.purands-chat-container--empty { grid-template-rows: 1fr auto auto auto 1fr auto !important; } /* Very short viewports — in practice phone landscape (~915x412), which every width-only breakpoint in this file misses because 915 > 768. Rows 1 and 5 are the flexible spacers that vertically centre the hero. With ~412px to hold logo + greeting + subtitle + input + chips + footer there is nothing left to centre with, so the spacers just squeeze the content: the distortion reported on Android landscape. Collapse the two spacers and hand the free space to row 2 (the messages area) so it scrolls instead. Deliberately resizes rows ONLY — every existing grid-row assignment (2 messages / 3 input / 4 chips / 6 footer) stays valid, which keeps this revertible by deleting the block. */ @media (max-height: 520px) { .purands-chat-container.purands-chat-container--empty { grid-template-rows: 0 minmax(0, 1fr) auto auto 0 auto !important; } .purands-chat-container--empty .purands-chat-messages { overflow-y: auto !important; justify-content: flex-start !important; } /* The brand logo is the most expendable ~3em when height is the constraint. */ .purands-chat-container--empty .purands-hero-logo, .purands-chat-container--empty .purands-hero-avatar { display: none !important; } } .purands-chat-container--empty .purands-chat-messages { grid-row: 2; display: flex; flex-direction: column; align-items: center; padding: 0 1.5em 0.5em; text-align: center; overflow: visible; } /* Brand anchor — full brand logo (or fallback icon avatar) above the greeting. Hidden in active-conversation state. The selector is scoped to `.purands-chat-container` (specificity 0,2,0) so it beats the generic `[class*="purands-"] img` rule (0,1,1) earlier in the file that forces all chat images to display:block !important. */ .purands-chat-container .purands-hero-avatar, .purands-chat-container .purands-hero-logo, .purands-chat-container .purands-chat-window-title, .purands-chat-container .purands-chat-window-subtitle { display: none !important; } /* Preferred: full brand logo image */ .purands-chat-container--empty .purands-hero-logo { display: block !important; max-width: 10em; max-height: 3em; width: auto; height: auto; object-fit: contain; margin: 0 auto 1em; } /* Fallback: icon circle when no logoUrl configured */ .purands-chat-container--empty .purands-hero-avatar { display: flex !important; align-items: center; justify-content: center; width: 3.25em; height: 3.25em; border-radius: 50%; background: var(--chat-primary); color: var(--chat-text-inverse, #fff); margin: 0 auto 0.875em; flex-shrink: 0; box-shadow: 0 4px 12px rgba(var(--chat-primary-rgb), 0.18); } .purands-chat-container--empty .purands-hero-avatar svg { width: 1.5em; height: 1.5em; display: block; } /* Custom uploaded icon image fills the avatar circle */ .purands-chat-container--empty .purands-hero-avatar .purands-chat-icon-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .purands-chat-container--empty .purands-chat-window-title { display: block !important; font-size: 1.4em !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 !important; text-align: center !important; max-width: 28em !important; color: var(--chat-text) !important; } /* Second greeting line, rendered only when the merchant has set a Header — the Header becomes the heading above and SubText drops to this supporting line. Muted neutral + body weight so it reads as support, not a competing heading. */ .purands-chat-container--empty .purands-chat-window-subtitle { display: block !important; font-size: 1em !important; font-weight: var(--chat-font-body-weight) !important; line-height: 1.4 !important; margin: 0.4em 0 0 !important; text-align: center !important; max-width: 28em !important; color: var(--chat-text-muted) !important; } .purands-chat-container--empty .purands-chat-input-wrapper { grid-row: 3; width: 100% !important; max-width: 36em !important; margin: 0 auto !important; background: transparent; backdrop-filter: none; border-top: none !important; padding: 0.25em 1.5em 1.5em; box-sizing: border-box; } /* Not enough vertical room for the hero: drop the chips so the greeting and the composer survive, and collapse their grid row so no gap is left behind. Chips are the right sacrifice — tallest block in the hero, and the composer directly above already invites the same input. Pure media queries. This was JS-measured at first, on the reasoning that popup mode makes the panel 70dvh of an unknown window — but the panel height is a deterministic function of the viewport, so CSS can predict it after all, and the measurement bought nothing except timing bugs (running before the chips existed, reading the one element that landscape guarantees never overflows, needing a re-entrancy guard, and being wrong until the first rotation). The hero needs ~455px of container: logo 48 + greeting 29 + subtitle 45 + composer 56 + footer 42 ≈ 260, plus a four-pill stack ≈ 195. Container is the panel minus the ~85px header, so the two thresholds below are that 540px panel requirement expressed in viewport terms for each sizing mode. Only `display: none` is needed — row 4 is `auto` and, per the hero grid comment above, sits at 0 until chips arrive, so hiding them collapses the row by itself. Overriding grid-template-rows here would also have been a no-op: this selector is (0,1,0) against the base hero grid's (0,2,0), which wins even against !important, and it would have fought the landscape rule that makes the messages row scrollable. */ /* Fullscreen (mobile, and popup forced fullscreen ≤768px): panel = 100dvh. */ @media (max-width: 768px) and (max-height: 540px) { .purands-chat-container--empty .purands-nudge-chips--widget { display: none !important; } } /* Popup (>768px): panel = 70dvh, so the same 540px of panel needs ~770px of viewport. min-height:400px means below ~570px of viewport the panel stops shrinking and is always too short, which this range covers too. */ @media (min-width: 769px) and (max-height: 780px) { .purands-chat-container--empty .purands-nudge-chips--widget { display: none !important; } } .purands-chat-container--empty .purands-nudge-chips--widget { grid-row: 4; width: 100%; max-width: 36em; margin: 0 auto; flex-direction: column; /* center-align each chip so content-sized pills sit centered, not stretched edge-to-edge */ align-items: center; justify-content: flex-start; padding: 0 1.5em 1em; gap: 0.625em; box-sizing: border-box; /* Reserved minimum height so swapping skeletons → real chips doesn't shift the input. Tuned to fit 3 pills + gaps + bottom padding; pills overflow naturally beyond this for 4+ chips. */ min-height: 11em; box-sizing: border-box; } .purands-chat-container--empty .purands-nudge-chips--widget .purands-followup-pill { /* Content-sized rather than full-width — each chip's background + border hugs its text, like aidebate's suggestion pills. */ width: auto; max-width: 100%; text-align: center; justify-content: center; background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 0, 0, 0.10); color: var(--chat-text); /* font-weight intentionally NOT set: the base .purands-followup-pill now uses var(--chat-font-body-weight). Re-declaring 400 here is what let the hero and the in-conversation pills drift apart in the first place. */ padding: 0.625em 1.125em; } .purands-chat-container--empty .purands-nudge-chips--widget .purands-followup-pill:hover { background: rgba(var(--chat-primary-rgb), 0.08); border-color: rgba(var(--chat-primary-rgb), 0.3); color: var(--chat-primary); /* Subtle lift signals tappability, especially on desktop where there's no native hover-feedback from the touch target. */ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .purands-chat-container--empty .purands-nudge-chips--widget .purands-followup-pill:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } /* (Skeleton sizing now lives on the base .purands-nudge-pill--skeleton rule so widget mode + page mode render the loading state identically.) */ .purands-chat-container--empty .purands-chat-footer { grid-row: 6; } /* Empty-state entrance stagger — each element fades in with a slight upward translate, sequenced ~80ms apart, so the hero assembles intentionally rather than snapping in all at once. Skip if user prefers reduced motion. */ @keyframes purands-hero-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .purands-chat-container--empty .purands-hero-logo, .purands-chat-container--empty .purands-hero-avatar, .purands-chat-container--empty .purands-chat-window-title, .purands-chat-container--empty .purands-chat-window-subtitle, .purands-chat-container--empty .purands-chat-input-wrapper, .purands-chat-container--empty .purands-nudge-chips--widget { animation: purands-hero-fade-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } .purands-chat-container--empty .purands-hero-logo, .purands-chat-container--empty .purands-hero-avatar { animation-delay: 0s; } .purands-chat-container--empty .purands-chat-window-title { animation-delay: 0.08s; } .purands-chat-container--empty .purands-chat-window-subtitle { animation-delay: 0.12s; } .purands-chat-container--empty .purands-chat-input-wrapper { animation-delay: 0.16s; } .purands-chat-container--empty .purands-nudge-chips--widget { animation-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .purands-chat-container--empty .purands-hero-logo, .purands-chat-container--empty .purands-hero-avatar, .purands-chat-container--empty .purands-chat-window-title, .purands-chat-container--empty .purands-chat-input-wrapper, .purands-chat-container--empty .purands-nudge-chips--widget { animation: none; } } /* Skeleton placeholder pills — shown in the chip slot while nudges are in flight. Universal sizing so widget mode + page-takeover mode look identical during the loading state. */ .purands-nudge-pill--skeleton { background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0.06) 100%) !important; background-size: 200% 100% !important; animation: purands-nudge-skeleton 1.6s ease-in-out infinite !important; border-color: transparent !important; color: transparent !important; cursor: default !important; pointer-events: none !important; min-height: 2.5em; width: auto !important; min-width: 18em; max-width: 100%; user-select: none; } .purands-nudge-pill--skeleton:hover { background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0.06) 100%) !important; border-color: transparent !important; color: transparent !important; transform: none !important; box-shadow: none !important; } @keyframes purands-nudge-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .purands-nudge-pill--skeleton { animation: none !important; } } /* Textarea: multi-line auto-growing input. Caps height at ~5 lines then scrolls internally. Overrides defaults applied to single-line inputs. `height: 1.4em` (no !important) locks the initial render to a single line so wrapping placeholders on ultra-narrow viewports (Samsung Fold outer display, foldable preview, etc.) don't make the empty textarea render two lines tall. The JS autoResize handler sets inline `style.height = scrollHeight` on input, which overrides this default and grows the textarea naturally as the user types. */ textarea.purands-chat-input-field { resize: none !important; overflow-y: auto !important; overflow-x: hidden !important; height: 1.4em; min-height: 1.4em !important; max-height: 7em !important; /* ~5 lines at line-height 1.4 */ line-height: 1.4 !important; white-space: pre-wrap; word-wrap: break-word; /* Match alignment with mic/send buttons in the row */ display: block; width: 100%; box-sizing: border-box; } @media (max-width: 480px) { .purands-chat-container--empty .purands-chat-messages { padding: 1em 1em 0.25em; } .purands-chat-container--empty .purands-chat-window-title { font-size: 1.25em !important; } .purands-chat-container--empty .purands-chat-input-wrapper { padding: 0.25em 1em 0.5em; } .purands-chat-container--empty .purands-nudge-chips--widget { padding: 0.25em 1em 1em; } } /* Discount code container */ .purands-discount-code-container { margin: 0.75em 0; padding: 1em; background: linear-gradient(135deg, rgba(var(--chat-primary-rgb), 0.1), rgba(var(--chat-primary-rgb), 0.05)); border: 2px dashed var(--chat-primary); border-radius: 0.75em; display: flex; flex-direction: column; gap: 0.75em; } .purands-discount-info { display: flex; flex-direction: column; gap: 0.25em; } .purands-discount-percentage { font-size: 1.25em; font-weight: 700; color: var(--chat-primary); font-family: var(--chat-font-body) !important; } .purands-discount-type { font-size: 0.875em; color: var(--chat-text-muted); font-family: var(--chat-font-body) !important; } .purands-discount-code-wrapper { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; padding: 0.75em 1em; background: var(--chat-bg); border-radius: 0.5em; border: 1px solid #e5e7eb; } .purands-discount-code { flex: 1 1 0; min-width: 0; font-size: 1.125em; font-weight: 600; font-family: 'Courier New', monospace; color: var(--chat-text); letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .purands-discount-copy-btn { display: flex; align-items: center; gap: 0.375em; padding: 0.5em 1em; background: var(--chat-primary); color: white; border: none; border-radius: 0.375em; font-size: 0.875em; font-weight: 500; cursor: pointer; transition: all 0.2s ease; font-family: var(--chat-font-body) !important; white-space: nowrap; } .purands-discount-copy-btn:hover { background: color-mix(in srgb, var(--chat-primary) 90%, black); transform: translateY(-1px); } .purands-discount-copy-btn:active { transform: translateY(0); } .purands-discount-copy-btn.copied { background: var(--chat-primary); } .purands-discount-copy-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; } .purands-discount-copy-btn:focus { outline: none; box-shadow: none; } .purands-discount-copy-btn:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; } /* Discount expiration date */ .purands-discount-expiry { display: flex; align-items: center; gap: 0.5em; margin-top: 0.75em; padding-top: 0.75em; border-top: 1px solid rgba(var(--chat-primary-rgb), 0.2); font-size: 0.875em; color: var(--chat-text-muted); } .purands-discount-expiry-icon svg { width: 14px; height: 14px; opacity: 0.7; fill: none; } .purands-discount-expiry-text.urgent { color: #e74c3c; font-weight: 600; } .purands-discount-expiry-text.soon { color: #f39c12; font-weight: 500; } .purands-discount-expiry-text.expired { color: #95a5a6; text-decoration: line-through; } /* Quick View Modal */ .purands-quick-view-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: var(--purands-z-base); display: flex; align-items: center; justify-content: center; padding: 1em; opacity: 0; transition: opacity 0.3s ease; } .purands-quick-view-modal.visible { opacity: 1; } .purands-quick-view-content { background: var(--chat-bg); border-radius: 1em; max-width: 1200px; width: 95%; max-height: 95vh; overflow: hidden; position: relative; display: flex; flex-direction: column; padding: 2em; transform: scale(0.95); transition: transform 0.3s ease; } .purands-quick-view-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; margin-bottom: 1.5em; padding-bottom: 1em; border-bottom: 2px solid rgba(var(--chat-primary-rgb), 0.15); } .purands-quick-view-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; flex: 1; overflow: hidden; } .purands-quick-view-right { overflow-y: auto; padding-right: 0.5em; } .purands-quick-view-right::-webkit-scrollbar { width: 6px; } .purands-quick-view-right::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .purands-quick-view-right::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .purands-quick-view-right::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .purands-quick-view-modal.visible .purands-quick-view-content { transform: scale(1); } .purands-quick-view-close { position: absolute; top: 1em; right: 1em; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); font-size: 1.25em; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 10; padding: 0; color: var(--chat-text-muted) !important; } .purands-quick-view-close svg { display: block; fill: none !important; stroke: currentColor !important; pointer-events: none; } .purands-quick-view-close:hover, .purands-quick-view-close:focus { background: rgba(255, 255, 255, 1) !important; color: #374151 !important; outline: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transform: scale(1.05); } .purands-quick-view-left { display: flex; flex-direction: column; gap: 1em; overflow: auto; } .purands-quick-view-image { position: relative !important; background: transparent !important; width: 100% !important; height: 54vh !important; overflow: hidden !important; border-radius: 0.75em !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0; } .purands-quick-view-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } .purands-quick-view-wishlist-icon { position: absolute !important; top: 1em !important; right: 1em !important; left: auto !important; width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; min-height: 40px !important; max-height: 40px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 4 !important; transition: all 0.2s ease !important; padding: 0 !important; margin: 0 !important; -webkit-appearance: none !important; appearance: none !important; font-family: inherit !important; font-size: 1em !important; line-height: 1 !important; font-weight: 400 !important; text-align: center !important; vertical-align: middle !important; color: #333 !important; } .purands-quick-view-wishlist-icon:hover, .purands-quick-view-wishlist-icon:focus { background: rgba(255, 255, 255, 1); transform: scale(1.05); outline: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .purands-quick-view-wishlist-icon.active { background: rgba(255, 255, 255, 0.95); } .purands-quick-view-wishlist-icon svg, .purands-quick-view-wishlist-icon .purands-heart-icon { width: 24px !important; height: 24px !important; display: block !important; } /* Force heart icon fill/stroke for Quick View */ .purands-quick-view-wishlist-icon .purands-heart-icon, .purands-quick-view-wishlist-icon svg.purands-heart-icon { fill: none !important; stroke: #6b7280 !important; stroke-width: 2; } .purands-quick-view-wishlist-icon.active .purands-heart-icon, .purands-quick-view-wishlist-icon.active svg.purands-heart-icon { fill: var(--chat-primary) !important; stroke: var(--chat-primary) !important; } .purands-quick-view-wishlist-icon .purands-heart-icon path, .purands-quick-view-wishlist-icon svg.purands-heart-icon path { fill: none !important; stroke: #6b7280 !important; } .purands-quick-view-wishlist-icon.active .purands-heart-icon path, .purands-quick-view-wishlist-icon.active svg.purands-heart-icon path { fill: var(--chat-primary) !important; stroke: var(--chat-primary) !important; } .purands-quick-view-details { display: flex; flex-direction: column; gap: 1em; overflow-y: auto; max-height: 100%; padding-right: 0.5em; } .purands-quick-view-title { font-size: 1.5em; font-weight: 700; color: var(--chat-text); margin: 0; flex: 1; } /* Collapsible Sections */ .purands-collapsible-section { margin: 1em 0; border: 1px solid #e5e7eb; border-radius: 0.5em; overflow: hidden; transition: all 0.3s ease; } .purands-collapsible-section:hover { border-color: var(--chat-text-muted); } .purands-collapsible-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75em 1em; background: #f9fafb; cursor: pointer; user-select: none; transition: background-color 0.2s; } .purands-collapsible-header:hover { background: #f3f4f6; } .purands-collapsible-section.expanded .purands-collapsible-header { background: linear-gradient(135deg, #fef3f2 0%, #fff5f5 100%); border-bottom: 1px solid #fecaca; } .purands-collapsible-title { font-size: 1em; font-weight: 700; color: var(--chat-text); margin: 0; } .purands-collapsible-icon { font-size: 0.75em; color: var(--chat-text-muted); transition: transform 0.3s ease; } .purands-collapsible-content { padding: 1em; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .purands-quick-view-description { font-size: 1em; line-height: 1.6; color: var(--chat-text-muted); max-height: 60vh; overflow-y: auto; } .purands-quick-view-description::-webkit-scrollbar { width: 6px; } .purands-quick-view-description::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .purands-quick-view-description::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .purands-quick-view-description::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Format HTML content in Quick View description */ .purands-quick-view-description p { margin: 0 0 1em 0; } .purands-quick-view-description p:last-child { margin-bottom: 0; } .purands-quick-view-description ul, .purands-quick-view-description ol { margin: 0 0 1em 1.5em; padding: 0; } .purands-quick-view-description li { margin-bottom: 0.5em; } .purands-quick-view-description strong, .purands-quick-view-description b { font-weight: 600; color: var(--chat-text); } .purands-quick-view-description em, .purands-quick-view-description i { font-style: italic; } .purands-quick-view-description h1, .purands-quick-view-description h2, .purands-quick-view-description h3, .purands-quick-view-description h4, .purands-quick-view-description h5, .purands-quick-view-description h6 { margin: 1em 0 0.5em 0; font-weight: 600; color: var(--chat-text); } .purands-quick-view-description h1 { font-size: 1.5em; } .purands-quick-view-description h2 { font-size: 1.3em; } .purands-quick-view-description h3 { font-size: 1.1em; } .purands-quick-view-description h4 { font-size: 1em; } .purands-quick-view-description h5 { font-size: 0.95em; } .purands-quick-view-description h6 { font-size: 0.9em; } /* Quick View Price */ .purands-quick-view-price { font-size: 1.75em; font-weight: 700; color: var(--chat-primary); margin: 0.5em 0; } /* Quick View Variants */ .purands-quick-view-variants { display: flex; flex-direction: column; gap: 0.5em; } .purands-quick-view-variant-label { font-size: 0.875em; font-weight: 600; color: var(--chat-text); margin-bottom: 0.25em; } .purands-quick-view-variant-select { padding: 0.75em; border: 2px solid #e5e7eb; border-radius: 0.5em; font-size: 1em; background: var(--chat-bg); cursor: pointer; transition: all 0.2s ease; } .purands-quick-view-variant-select:hover { border-color: var(--chat-primary); } .purands-quick-view-variant-select:focus { outline: none; border-color: var(--chat-primary); box-shadow: 0 0 0 3px rgba(var(--chat-primary-rgb, 255, 0, 0), 0.1); } .purands-quick-view-variant-select:disabled { opacity: 0.6; cursor: not-allowed; background-color: #f3f4f6; border-color: var(--chat-text-muted); } .purands-quick-view-variant-select:disabled:hover { border-color: var(--chat-text-muted); background-color: #f3f4f6; } /* Quick View Actions */ .purands-quick-view-actions { display: flex; flex-direction: column; gap: 0.75em; } .purands-quick-view-add-to-cart-btn, .purands-quick-view-full-btn { width: 100%; padding: 0.875em; border: 2px solid var(--chat-primary); border-radius: 2em; font-size: 0.95em; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5em; text-decoration: none; } /* Filled like the carousel card Add button. No !important on colors so the JS sold-out/error inline styles can still take effect. */ .purands-quick-view-add-to-cart-btn { background: var(--chat-primary); color: var(--chat-text-inverse, #fff); border-color: var(--chat-primary); } .purands-quick-view-add-to-cart-btn:hover:not(:disabled), .purands-quick-view-add-to-cart-btn:focus:not(:disabled) { background: var(--chat-primary) !important; border-color: var(--chat-primary) !important; color: white !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3) !important; outline: none !important; } .purands-quick-view-add-to-cart-btn:disabled { opacity: 0.7; cursor: not-allowed; } .purands-quick-view-add-to-cart-btn svg { flex-shrink: 0; width: 20px; height: 20px; fill: none !important; stroke: currentColor !important; } .purands-quick-view-full-btn { background: transparent !important; color: var(--chat-primary) !important; border-color: var(--chat-primary) !important; } .purands-quick-view-full-btn:hover, .purands-quick-view-full-btn:focus { background: var(--chat-primary) !important; color: white !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3) !important; outline: none !important; } .purands-quick-view-full-btn svg { width: 18px; height: 18px; fill: none !important; stroke: currentColor !important; } /* Quick View quantity controls */ .purands-quick-view-quantity-wrapper { display: flex; align-items: center; gap: 0.5em; width: 100%; justify-content: center; } .purands-quick-view-cart-wrapper { display: flex; flex-direction: column; gap: 0.75em; width: 100%; } /* Quick View price + Add row (carousel parity): price left, controls right */ .purands-quick-view-price-row { align-items: center; } .purands-quick-view-price-row .purands-quick-view-price { margin: 0; font-size: 1.35em; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .purands-quick-view-price-row .purands-quick-view-cart-wrapper { width: auto; flex: 0 0 auto; } .purands-quick-view-price-row .purands-quick-view-add-to-cart-btn { width: auto; padding: 0.6em 1.4em; } .purands-quick-view-price-row .purands-quick-view-quantity-wrapper { width: auto; } /* Floating footer for Quick View */ .purands-quick-view-footer { position: sticky; bottom: 0; left: 0; right: 0; background: var(--chat-bg); border-top: 1px solid #e5e7eb; padding: 1em; z-index: 5; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 0.75em; } .purands-quick-view-footer-actions { display: flex; gap: 0.75em; width: 100%; } .purands-quick-view-footer .purands-quick-view-add-to-cart-btn { flex: 1; } .purands-quick-view-footer .purands-quick-view-full-btn { flex: 1; margin-top: 0; border-radius: 0.5em; padding: 0.875em 1em; display: flex; align-items: center; justify-content: center; gap: 0.5em; font-size: 0.975em; } .purands-quick-view-footer .purands-quick-view-full-btn svg { width: 18px; height: 18px; flex-shrink: 0; } /* Image indicator for carousel cards */ .purands-image-indicator { position: absolute; bottom: 0.5em; right: 0.5em; background: rgba(0, 0, 0, 0.7); color: white; padding: 0.25em 0.5em; border-radius: 0.25em; font-size: 0.75em; font-weight: 600; z-index: 2; } /* Carousel image navigation */ .purands-carousel-image-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(255, 255, 255, 0.9) !important; border: none !important; width: 32px !important; height: 32px !important; min-width: 32px !important; max-width: 32px !important; min-height: 32px !important; max-height: 32px !important; border-radius: 50% !important; cursor: pointer !important; font-size: 18px !important; line-height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; z-index: 3 !important; opacity: 0 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-block: 0 !important; padding-inline: 0 !important; margin: 0 !important; color: #333 !important; -webkit-appearance: none !important; appearance: none !important; font-family: var(--chat-font-body) !important; font-weight: 400 !important; text-align: center !important; vertical-align: middle !important; box-sizing: border-box !important; } .purands-chat-card-image-container:hover .purands-carousel-image-nav { opacity: 1 !important; } .purands-carousel-image-nav:hover, .purands-carousel-image-nav:focus { background: white !important; color: #333 !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important; transform: translateY(-50%) scale(1.1) !important; outline: none !important; } .purands-carousel-image-nav svg { fill: none !important; stroke: currentColor !important; display: block !important; width: 16px !important; height: 16px !important; min-width: 16px !important; max-width: 16px !important; min-height: 16px !important; max-height: 16px !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; } .purands-carousel-image-nav.purands-prev { left: 0.5em !important; } .purands-carousel-image-nav.purands-next { right: 0.5em !important; } /* Quick View Image Navigation */ .purands-quick-view-image-indicator { position: absolute; bottom: 1em; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); color: white; padding: 0.5em 1em; border-radius: 1.5em; font-size: 0.875em; font-weight: 600; z-index: 3; } .purands-quick-view-image-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(255, 255, 255, 0.95) !important; border: none !important; width: 2.5em !important; height: 2.5em !important; border-radius: 50% !important; cursor: pointer !important; font-size: 1em !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; z-index: 3 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; padding: 0 !important; color: #333 !important; margin: 0 !important; min-width: 2.5em !important; max-width: 2.5em !important; min-height: 2.5em !important; max-height: 2.5em !important; -webkit-appearance: none !important; appearance: none !important; font-family: inherit !important; font-weight: 400 !important; text-align: center !important; vertical-align: middle !important; } .purands-quick-view-image-nav:hover, .purands-quick-view-image-nav:focus { background: white !important; color: #333 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; transform: translateY(-50%) scale(1.1) !important; outline: none !important; } .purands-quick-view-image-nav svg { fill: none !important; stroke: currentColor !important; display: block !important; width: 20px !important; height: 20px !important; } .purands-quick-view-image-nav.purands-prev { left: 1em !important; right: auto !important; } .purands-quick-view-image-nav.purands-next { right: 1em !important; left: auto !important; } /* Quick View Rating */ .purands-quick-view-rating { display: flex; align-items: center; gap: 0.5em; margin: 0.5em 0; } .purands-stars { display: flex; gap: 0.125em; } .purands-star { font-size: 1.25em; line-height: 1; } .purands-star-full { color: #fbbf24; } .purands-star-half { color: #fbbf24; position: relative; } .purands-star-half::after { content: '★'; position: absolute; left: 0; color: var(--chat-text-muted); clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); } .purands-star-empty { color: var(--chat-text-muted); } .purands-rating-value { font-size: 0.875em; font-weight: 600; color: var(--chat-text-muted); } /* Quick View Reason to Use */ .purands-quick-view-reason { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-left: 4px solid var(--chat-primary); padding: 1em; border-radius: 0.5em; margin: 1em 0; } .purands-quick-view-reason-title { font-size: 1em; font-weight: 700; color: var(--chat-primary); margin: 0 0 0.5em 0; } .purands-quick-view-reason-text { font-size: 0.95em; line-height: 1.6; color: var(--chat-text); margin: 0; } /* Quick View Product Fit Section */ .purands-product-fit-loading { text-align: center; padding: 1em; color: var(--chat-text-muted); font-size: 0.9em; position: relative; overflow: hidden; } .purands-product-fit-loading::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--chat-primary), transparent); animation: loading-slide 1.5s ease-in-out infinite; } .purands-product-fit-error { text-align: center; padding: 0.5em; color: #dc2626; font-size: 0.85em; } .purands-product-fit-content { animation: fadeIn 0.3s ease-in; margin-bottom: 1.5em; } .purands-quick-view-product-fit-title { font-size: 1.1em; font-weight: 700; color: var(--chat-text); margin: 0 0 1em 0; padding-bottom: 0.5em; border-bottom: 2px solid rgba(var(--chat-primary-rgb), 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .purands-product-fit-heading { font-size: 1.25em; font-weight: 700; color: var(--chat-text); margin: 0 0 0.5em 0; line-height: 1.3; } .purands-product-fit-heading em { font-style: italic; font-weight: 400; } .purands-product-fit-subheading { font-size: 0.875em; font-weight: 400; color: var(--chat-text-muted); margin-bottom: 1em; } .purands-product-fit-cards { display: flex; flex-direction: column; gap: 0.75em; margin-bottom: 1.5em; } .purands-product-fit-card { background: rgba(var(--chat-primary-rgb), 0.05); border-radius: 0.75em; padding: 1em; border: 1px solid rgba(var(--chat-primary-rgb), 0.3); transition: transform 0.2s, box-shadow 0.2s; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0.5em 1em; align-items: start; } .purands-product-fit-card:hover { transform: translateX(4px); box-shadow: 0 2px 8px rgba(var(--chat-primary-rgb), 0.2); } .purands-product-fit-card-title { font-size: 0.9375em; font-weight: 600; color: var(--chat-text); line-height: 1.3; grid-column: 1 / -1; } .purands-product-fit-card-rating { font-size: 1.5em; font-weight: 700; background: linear-gradient(135deg, var(--chat-primary) 0%, var(--chat-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; grid-row: 2; grid-column: 1; display: flex; align-items: center; gap: 0.25em; } .purands-product-fit-card-rating::after { content: '/10'; font-size: 0.875em; color: var(--chat-text-muted); font-weight: 400; background: none; -webkit-text-fill-color: var(--chat-text-muted); } .purands-product-fit-card-right { grid-row: 2; grid-column: 2; display: flex; flex-direction: column; gap: 0.5em; } /* Score bar. !important armor — the widget lives in the host page DOM and theme CSS was flattening the un-armored fill (this block was the only one in the file without it). Fill width arrives via the --purands-fit-score custom property set inline by the renderer. */ .purands-product-fit-card-progress { display: block !important; width: 100% !important; height: 6px !important; background: rgba(var(--chat-primary-rgb), 0.2) !important; border-radius: 3px !important; overflow: hidden !important; } .purands-product-fit-card-progress-bar { display: block !important; width: var(--purands-fit-score, 0%) !important; height: 100% !important; background: var(--chat-primary) !important; border-radius: 3px !important; transition: width 0.6s ease !important; } .purands-product-fit-card-description { font-size: 0.8125em; color: var(--chat-text-muted); line-height: 1.5; } .purands-product-fit-why { background: rgba(var(--chat-primary-rgb), 0.05); border-radius: 0.75em; padding: 1em; border: 1px solid rgba(var(--chat-primary-rgb), 0.2); } .purands-product-fit-why-title { font-size: 0.95em; font-weight: 700; color: var(--chat-text); margin: 0 0 0.5em 0; } .purands-product-fit-why-text { font-size: 0.9em; line-height: 1.6; color: var(--chat-text); margin: 0; } .purands-product-fit-why-text ul, .purands-product-fit-why-text ol { margin: 0.5em 0; padding-left: 1.5em; list-style: disc; } .purands-product-fit-why-text li { margin-bottom: 0.25em; } /* Quick View Reviews Summary */ .purands-quick-view-reviews { background: #f9fafb; border: 1px solid #e5e7eb; padding: 1em; border-radius: 0.5em; margin: 1em 0; } .purands-quick-view-reviews-title { font-size: 1em; font-weight: 700; color: var(--chat-text); margin: 0 0 0.5em 0; } .purands-quick-view-reviews-text { font-size: 0.95em; line-height: 1.6; color: var(--chat-text-muted); margin: 0; } /* Mobile quick view */ @media (max-width: 768px) { .purands-quick-view-modal { padding: 0; align-items: flex-start; } .purands-quick-view-content { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; padding: 1.5em 1em 1em 1em; } .purands-quick-view-header { margin-bottom: 1em; padding-bottom: 0.75em; padding-right: 3em; gap: 0.5em; flex-direction: column; align-items: stretch; } .purands-quick-view-title { font-size: 1.125em; line-height: 1.3; padding-right: 0; } .purands-quick-view-price { font-size: 1.25em; } .purands-quick-view-body { display: flex; flex-direction: column; gap: 1em; overflow-y: auto; } /* The body scrolls on mobile; the two columns must NOT. `overflow-y: visible` alone did not achieve that: the base rules set `overflow: auto` / `overflow-y: auto`, so the x-axis stayed `auto`, and a `visible` paired with a non-visible axis computes back to `auto`. Both columns therefore stayed scroll containers. That matters because a flex item which is a scroll container has its automatic minimum size resolve to 0 — the `min-height: auto` that normally stops an item shrinking below its content does not apply. In this column flex the left side (image, title, price, variants, Add to Cart) was free to be compressed to nothing while the product-fit panel kept its height, so opening a product on a phone showed the fit and hid the product. overflow on BOTH axes, plus flex: 0 0 auto so neither column is shrunk. */ .purands-quick-view-left, .purands-quick-view-right { width: 100%; overflow: visible; flex: 0 0 auto; padding-right: 0; } .purands-quick-view-image { height: auto !important; max-height: 30vh !important; margin-bottom: 1em; } .purands-quick-view-close { position: fixed !important; width: 36px; height: 36px; top: 1em; right: 1em; font-size: 1.25em; z-index: 1000; background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .purands-quick-view-wishlist-icon { width: 36px; height: 36px; top: 0.5em; right: 0.5em; } .purands-product-fit-card { padding: 0.875em; gap: 0.5em 0.75em; } .purands-product-fit-card-title { font-size: 0.875em; } .purands-product-fit-card-rating { font-size: 1.25em; } .purands-product-fit-card-description { font-size: 0.8em; } /* Hide image navigation arrows on mobile - use swipe instead */ .purands-quick-view-image-nav { display: none !important; } /* Cart modal full-screen on mobile */ .purands-cart-modal { padding: 0; align-items: flex-start; } .purands-cart-modal-content { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; } .purands-cart-modal-header { padding: 1em 1em 1em 1.5em; } .purands-cart-modal-title { font-size: 1.25em; } .purands-cart-modal-close { width: 36px; height: 36px; font-size: 1.25em; } .purands-cart-modal-items { padding: 1em; } .purands-cart-modal-footer { padding: 1em 1em 1.5em 1em; } /* Wishlist modal full-screen on mobile */ .purands-wishlist-modal { padding: 0; align-items: flex-start; } .purands-wishlist-modal-content { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; } .purands-wishlist-modal-header { padding: 1em 1em 1em 1.5em; } .purands-wishlist-modal-title { font-size: 1.25em; } .purands-wishlist-modal-close { width: 36px; height: 36px; font-size: 1.25em; } .purands-wishlist-modal-items { padding: 1em; } } /* Container for suggestion cards */ .purands-suggestion-cards { display: flex; flex-wrap: wrap; gap: 1em; padding: 0; margin: 1em 0; opacity: 0; transition: opacity 0.3s ease-in-out; } /* Individual suggestion card */ .purands-suggestion-card { display: flex; align-items: center; flex: 0 0 auto; cursor: pointer; border-radius: 0.5em; overflow: hidden; background-color: rgba(var(--chat-primary-rgb), 0.1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; max-height: 250px; margin-right: 1em; /* will-change: transform, box-shadow; */ backface-visibility: hidden; -webkit-font-smoothing: antialiased; width: 100%; } .purands-suggestion-card::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--chat-primary); border-radius: 0 0.25em 0.25em 0; } /* Alternating layout for suggestion cards */ .purands-suggestion-card:nth-child(even) { flex-direction: row-reverse; } /* .purands-suggestion-card:nth-child(even) .purands-suggestion-image { order: 2; } */ .purands-suggestion-card:nth-child(even) .purands-suggestion-text { order: 1; } .purands-suggestion-card:hover { transform: translateY(-2px) translateZ(0); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Card image (landscape) */ .purands-suggestion-image { flex: 0 0 40%; max-width: 40%; height: auto; display: block; /* width: 50%; */ /* aspect-ratio: 16/9; */ object-fit: cover; background: #f5f5f5; background-image: linear-gradient(90deg, #f5f5f5 25%, #e5e5e5 50%, #f5f5f5 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .purands-suggestion-image[src] { animation: none; background: none; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .purands-suggestion-text { flex: 1 1 60%; max-width: 60%; padding: 1em; font-size: 1.125em; font-weight: 600; color: var(--chat-text); border-radius: 0.5em; position: relative; height: 100%; align-content: center; } /* No image placeholder for suggestions */ .purands-suggestion-no-image { flex: 0 0 40%; max-width: 40%; height: auto; display: flex; align-items: center; justify-content: center; background: #f5f5f5; color: #999; font-size: 0.875em; } /* Loading state for suggestions */ .purands-suggestions-loading { display: flex; align-items: center; justify-content: center; gap: 0.75em; padding: 2em; color: var(--chat-text-muted); font-size: 0.875em; } .purands-loading-spinner { width: 1.5em; height: 1.5em; border: 2px solid rgba(0, 0, 0, 0.1); border-top-color: var(--chat-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Welcome message styling */ .purands-chat-window-title { font-size: 1.125em; font-weight: 600; margin: 0; color: var(--chat-text); } /* Footer styling */ .purands-chat-footer { text-align: center; font-size: 0.75em !important; color: var(--chat-text-muted); /* background-color: rgba(255, 255, 255, 0.95); */ padding: 0.75em; /* Wrap long footer text instead of letting it overflow the viewport on mobile. */ word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; box-sizing: border-box; flex-shrink: 0; line-height: 1.5; } /* The footer is text + Purands | Privacy Policy, and those children only INHERIT the 0.75em above — which loses to any rule matching the element directly, regardless of specificity. HUFT's theme sets font-size on bare `a` (12/13/14/16px) and `span`, so the two links rendered at 16px while the plain text stayed 12px, and the line wrapped. Minimalist's theme doesn't style bare inline elements, which is why it looked correct there at the same 16px base. `inherit`, not 0.75em again — re-declaring the em value here would compound it against the parent (0.75 x 0.75 = 0.5625em). */ .purands-chat-footer a, .purands-chat-footer span, .purands-chat-footer strong, .purands-chat-footer b { font-size: inherit !important; line-height: inherit !important; } .purands-chat-footer a { color: var(--chat-text); text-decoration: none; font-weight: 500; transition: color 0.2s; } .purands-chat-footer a:hover { color: var(--chat-primary); text-decoration: underline; } .purands-footer-divider { margin: 0 0.35em; opacity: 0.5; } /* Loading state for input — narrow bar that visibly slides across the bottom. Uses a discrete-width bar (not full-width gradient) so motion is always obvious. Border pulse provides a secondary indicator. NOTE: class is `.purands-loading` (not `.loading`) because the bare `loading` class collides with Shopify themes that style `.loading::before/::after` for their own loading indicators. Using a namespaced class avoids the collision. */ .purands-widget-input-container.purands-loading { position: relative; overflow: hidden; animation: loading-border-pulse 1.4s ease-in-out infinite !important; } /* Defensive: kill any theme-injected ::before/::after on our loading container, in case a theme uses an even broader selector like `[class*="loading"]::before`. */ .purands-widget-input-container.purands-loading::before { content: none !important; display: none !important; } .purands-widget-input-container.purands-loading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30%; /* narrow bar — its movement across is unmistakable */ height: 3px; background: var(--chat-primary); border-radius: 2px; animation: loading-slide 1.4s linear infinite !important; will-change: transform; } @keyframes loading-slide { 0% { transform: translateX(-100%); } 100% { /* Travel the full container width: container is 100%, bar is 30% (its own width). translateX(333%) = move 100% of container width since 100/30 ≈ 333%. */ transform: translateX(333%); } } @keyframes loading-border-pulse { 0%, 100% { border-color: transparent; } 50% { border-color: var(--chat-primary); } } /* Accessibility improvements */ .purands-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focus visible for keyboard navigation */ .purands-chat-button:focus-visible, .purands-chat-close-btn:focus-visible, .purands-chat-send-button:focus-visible, .purands-chat-card-button:focus-visible { outline: 3px solid var(--chat-primary); outline-offset: 2px; } /* Mobile optimizations */ @media (max-width: 768px) { /* Use hardware acceleration for mobile transforms */ .purands-chat-container, .purands-chat-button, .purands-suggestion-card { -webkit-transform: translateZ(0); transform: translateZ(0); } /* Optimize touch targets */ .purands-suggestion-card { min-height: 44px; touch-action: manipulation; } .purands-chat-logo { max-height: 1.8em; } .purands-chat-card-title { -webkit-line-clamp: 2; height: auto; max-height: none; } .purands-chat-card-description { -webkit-line-clamp: 4; height: 6em; line-height: 1.5; } .purands-chat-modal-container { width: 100% !important; max-width: 100% !important; height: 100% !important; } } @media (max-width: 480px) { /* .purands-chat-messages (1em) and .purands-chat-bubble (0.75em) now carry those values on their base rules, so the mobile overrides that used to set them here are gone — they were the only thing forcing bubble sides back to 1em and would have silently beaten the base with !important. */ .purands-chat-input-wrapper { padding: 0.75em 1em !important; flex-shrink: 0 !important; } .purands-chat-footer { display: block; flex-shrink: 0 !important; padding-bottom: calc(0.25em + env(safe-area-inset-bottom, 0px)) !important; } .purands-chat-card { min-width: min(13em, 64vw) !important; max-width: min(13em, 64vw) !important; } /* Shorter image + tighter content padding on mobile */ .purands-chat-card-image-container { height: 9em !important; } .purands-chat-card-content { padding: 0.85em !important; } .purands-chat-card-title { font-size: 0.9em !important; margin-bottom: 0.5em !important; } .purands-price-cart-row .purands-chat-card-price { font-size: 0.92em !important; } .purands-price-cart-row .purands-cart-controls-wrapper .purands-chat-add-to-cart-button { padding: 0.45em 1em !important; font-size: 0.8em !important; } /* Smaller chips + rating pill on mobile (padding lives on the label; the savings badge is an overlay and scales via its own rule). Wider minimum: the 10px band font shrinks less than the chip does. */ .purands-variant-chip { font-size: 0.72em !important; padding: 0 !important; min-width: 6em !important; } .purands-variant-chip .purands-variant-chip-label { padding: 0.35em 0.55em !important; } /* Legibility floor for the white-on-primary badge text */ .purands-variant-chip-badge { font-size: 10px !important; } .purands-card-rating-pill { font-size: 0.78em !important; } .purands-chat-card-button, .purands-cart-controls-wrapper .purands-chat-add-to-cart-button { font-size: 0.82em !important; padding: 0.6em 0.9em !important; } /* Tighter scroll arrows, recentred on the shorter image */ .purands-carousel-arrow { top: 4.5em !important; width: 2em !important; height: 2em !important; } .purands-chat-modal-container { width: 100% !important; max-width: 100% !important; height: 100% !important; border-radius: 0 !important; } .purands-center-suggestions.show { width: clamp(14em, 90vw, 23em); } } /* Disable hover effects on mobile */ @media (hover: none) { .purands-suggestion-card:hover { transform: none; } /* Selector must match the base hover rule exactly. Media queries add no specificity, so if the base rule were scoped to the user bubble and this one were not, this would be (0,2,0) against (0,3,0) and silently stop cancelling the lift on touch devices. */ .purands-chat-message-user .purands-chat-bubble:hover { transform: none; } } /* Old overlay removed — modal overlay handles backdrop */ /* =========================================== CENTERED INPUT INTERFACE STYLES =========================================== */ /* Centered input container */ .purands-center-input-container { position: relative; z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; pointer-events: none; width: 100%; margin: 2em auto; padding: 2em 0; } /* Position variants using margin for spacing */ .purands-center-input-container[data-position="center"] { margin: 4em auto; } .purands-center-input-container[data-position="top"] { margin: 2em auto 4em auto; } .purands-center-input-container[data-position="bottom"] { margin: 4em auto 2em auto; } /* Heading section */ .purands-center-heading-section { text-align: center; margin-bottom: 2em; padding: 0 1em; max-width: 70em; pointer-events: none; } .purands-center-heading { font-size: clamp(1.75em, 4vw, 2.5em); font-weight: 700; color: var(--chat-text); margin: 0 0 1em 0; line-height: 1.2; letter-spacing: -0.02em; } .purands-center-subheading { font-size: clamp(1em, 2vw, 1.125em); font-weight: 400; color: var(--chat-text-muted); margin: 0; line-height: 1.6; max-width: 48em; margin-left: auto; margin-right: auto; } .purands-center-subheading a { color: var(--chat-primary-color, #0066cc); text-decoration: underline; cursor: pointer; pointer-events: auto; } .purands-center-subheading a:hover { color: var(--chat-primary-hover, #0052a3); text-decoration: underline; } .purands-center-privacy-notice { font-size: clamp(0.75em, 1.5vw, 0.85em); color: var(--chat-text-muted); margin: 0.5em 0 0; line-height: 1.5; } .purands-center-privacy-notice a { color: var(--chat-text); text-decoration: underline; font-weight: 500; pointer-events: auto; } .purands-center-privacy-notice a:hover { color: var(--chat-primary); } /* Input wrapper */ .purands-center-input-wrapper { position: relative; display: flex; align-items: center; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2em; padding: 0.75em; box-shadow: 0 1em 3em rgba(0, 0, 0, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: all; max-width: 90vw; width: clamp(20em, 80vw, 70em); touch-action: manipulation; } .purands-center-input-wrapper:hover { box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.25); transform: translateY(-2px); } .purands-center-input-wrapper:focus-within { border-color: var(--chat-primary); box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(var(--chat-primary-rgb), 0.2); } /* Visual indicator when there's chat history */ .purands-center-input-wrapper.has-history { border-color: rgba(var(--chat-primary-rgb), 0.3); box-shadow: 0 1em 3em rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(var(--chat-primary-rgb), 0.2); } .purands-center-input-wrapper.has-history:hover { border-color: var(--chat-primary); box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(var(--chat-primary-rgb), 0.3); cursor: pointer; } .purands-center-input-wrapper.has-history::before { position: absolute; right: 3.5em; top: 50%; transform: translateY(-50%); font-size: 1em; opacity: 0.6; pointer-events: none; transition: opacity 0.2s ease; } .purands-center-input-wrapper.has-history:hover::before { opacity: 1; } /* Center input field */ .purands-center-input-field { flex: 1; border: none; background: transparent; padding: 0.75em 1em; font-size: 16px; line-height: 1.5; color: var(--chat-text); outline: none; font-family: var(--chat-font-body) !important; touch-action: manipulation; -webkit-text-size-adjust: 100%; } .purands-center-input-field::placeholder { color: var(--chat-text-muted); opacity: 0.8; } .purands-center-input-field:hover { background: transparent; box-shadow: none; } .purands-center-input-field:focus { background: transparent; box-shadow: none; } /* Center send button */ .purands-center-send-button { width: 2.5em; height: 2.5em; border: none; border-radius: 50%; background: var(--chat-primary); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; margin-left: 0.5em; flex-shrink: 0; } .purands-center-send-button:hover:not(:disabled) { background: color-mix(in srgb, var(--chat-primary) 90%, black); transform: scale(1.05); } .purands-center-send-button:active { transform: scale(0.95); } .purands-center-send-button:disabled { background: var(--chat-text-muted); cursor: not-allowed; opacity: 0.6; } .purands-center-send-button svg { width: 1em; height: 1em; } /* Center suggestions */ .purands-center-suggestions { margin-top: 1.5em; opacity: 0; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: all; width: 100%; display: flex; justify-content: center; } .purands-center-suggestions.show { opacity: 1; transform: translateY(0); } .purands-center-suggestion-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1em; max-width: clamp(20em, 80vw, 70em); width: 100%; } .purands-center-suggestion-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 1.5em; padding: 1.5em; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 1em; box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.1); min-height: 120px; opacity: 1; } .purands-center-suggestion-card:hover { transform: translateY(-4px); box-shadow: 0 1em 2.5em rgba(0, 0, 0, 0.15); border-color: var(--chat-primary); } .purands-center-suggestion-card:active { transform: translateY(-2px); } .purands-center-suggestion-image { max-width: 180px; height: 120px; object-fit: cover; border-radius: 1em; flex-shrink: 0; } .purands-center-suggestion-no-image { width: 80px; height: 80px; background: #f3f4f6; border-radius: 1em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .purands-center-suggestion-no-image span { font-size: 0.75em; color: var(--chat-text-muted); text-align: center; font-family: var(--chat-font-body) !important; } .purands-center-suggestion-text { flex: 1; font-size: 1em; color: var(--chat-text); font-weight: 500; line-height: 1.4; text-align: left; font-family: var(--chat-font-body) !important; } /* =========================================== MODAL CHAT INTERFACE STYLES =========================================== */ /* Modal chat container (80% VW/VH) */ .purands-chat-modal { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) scale(0.9) !important; width: 80vw !important; height: 80vh !important; max-width: 80vw !important; max-height: 80vh !important; border-radius: 1.5em !important; bottom: auto !important; right: auto !important; z-index: calc(var(--purands-z-base) - 2); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .purands-chat-modal.show { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; } /* Body class for modal open state */ body.purands-chat-modal-open { overflow: hidden; } /* =========================================== INLINE CHAT INTERFACE STYLES =========================================== */ /* Modal responsive adjustments */ @media (max-width: 768px) { .purands-center-input-wrapper { width: clamp(16em, 80vw, 25em); padding: 0.5em; } /* Prevent transform on mobile to avoid zoom triggers */ .purands-center-input-wrapper:hover { transform: none; } .purands-center-input-field { font-size: 16px; padding: 0.5em 0.75em; } .purands-center-send-button { width: 2em; height: 2em; margin-left: 0.25em; } .purands-center-send-button svg { width: 0.875em; height: 0.875em; } .purands-center-suggestion-cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: clamp(16em, 85vw, 50em); gap: 0.75em; } .purands-center-suggestion-card { padding: 1em; min-height: 100px; gap: 0.75em; } .purands-center-suggestion-image { width: 60px; height: 60px; } .purands-center-suggestion-no-image { width: 60px; height: 60px; } .purands-center-suggestion-text { font-size: 0.9em; } /* Fullscreen chat on mobile — matches the messaging-app convention (WhatsApp, iMessage, ChatGPT mobile). No rounded corners, no inset backdrop visible. */ .purands-chat-modal { width: 100vw !important; height: 100vh !important; height: 100dvh !important; /* mobile-safe: accounts for browser chrome */ max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; border-radius: 0 !important; } .purands-chat-input-wrapper { bottom: 0 !important; } } @media (max-width: 480px) { .purands-chat-modal-container { border-radius: 0 !important; } .purands-chat-modal-header { padding: 12px 12px 10px !important; } .purands-chat-modal-logo { max-width: 120px !important; max-height: 28px !important; } .purands-chat-header-actions { gap: 0.25em !important; } .purands-chat-close-btn, .purands-chat-cart-btn { width: 1.75em !important; height: 1.75em !important; } .purands-chat-close-btn svg { width: 16px !important; height: 16px !important; } .purands-center-input-wrapper { width: clamp(14em, 90vw, 23em); background: rgba(255, 255, 255, 0.95) !important; } .purands-center-suggestion-cards { grid-template-columns: 1fr; max-width: clamp(14em, 95vw, 25em); gap: 0.5em; } .purands-center-suggestion-card { padding: 1em; min-height: 80px; gap: 0.75em; flex-direction: row; } .purands-center-suggestion-image { width: 50px; height: 50px; } .purands-center-suggestion-no-image { width: 50px; height: 50px; } .purands-center-suggestion-text { font-size: 0.85em; line-height: 1.3; } .purands-chat-modal { width: 100% !important; height: 100vh !important; max-width: 100% !important; max-height: 100vh !important; border-radius: 0 !important; top: 0 !important; left: 0 !important; transform: none !important; } .purands-chat-modal.show { transform: none !important; } .purands-chat-input-wrapper { bottom: 0 !important; } } /* Chat Modal Styles */ .purands-chat-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background-color: rgba(0, 0, 0, 0.5); z-index: var(--purands-z-base); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; overflow: hidden; touch-action: none; -webkit-overflow-scrolling: touch; overscroll-behavior: none; } .purands-chat-modal-overlay.show { overflow: hidden; opacity: 1; } .purands-chat-modal-container { background: var(--chat-bg); border-radius: 12px; /* Width clamped to viewport to prevent any descendant from expanding past the screen edge — was happening on iOS when keyboard was up because some intrinsic min-content width from input/footer text was pushing the container wider than 100vw. */ width: 100vw !important; max-width: 100vw !important; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; position: relative; transform: scale(0.9); transition: transform 0.3s ease; overflow: hidden; overflow-x: hidden !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); /* !important is required because some Shopify themes (Paula's Choice, etc.) have aggressive resets like `body > div { display: block }` that would override this and break the entire flex chain (modal-body's flex: 1 1 0 would have no effect, leaving messages/input/footer at content height). */ display: flex !important; flex-direction: column !important; touch-action: pan-y; overscroll-behavior: contain; } .purands-chat-modal-container.show { transform: scale(1); } /* ── Popup mode ──────────────────────────────── */ .purands-chat-modal--popup { background: transparent; pointer-events: none; } /* :not(.purands-chat-modal--maximized) — without this guard, our popup-sized !important rules below would beat the maximized state rules (which have higher specificity but no !important), so the maximize button would no-op. The :not() makes this rule literally not apply when maximized, letting the maximized rule below win cleanly. */ .purands-chat-modal--popup:not(.purands-chat-modal--maximized) .purands-chat-modal-container { pointer-events: auto; position: fixed; /* !important matches the base .purands-chat-modal-container rule (which uses !important to defend against theme resets — see commit a503e54 / Paula's Choice). Specificity alone loses to !important, so popup mode must use !important too or it gets forced to 100vw / 100dvh fullscreen. */ width: 30% !important; min-width: 320px !important; max-width: 420px !important; height: 70vh !important; height: 70dvh !important; min-height: 400px !important; max-height: 700px !important; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } /* Position: bottom-right (default) */ .purands-chat-modal--popup[data-chat-position="bottom-right"] .purands-chat-modal-container { bottom: 20px; right: 20px; top: auto; left: auto; transform-origin: bottom right; } /* Position: bottom-left */ .purands-chat-modal--popup[data-chat-position="bottom-left"] .purands-chat-modal-container { bottom: 20px; left: 20px; top: auto; right: auto; transform-origin: bottom left; } /* Position: bottom-center */ .purands-chat-modal--popup[data-chat-position="bottom-center"] .purands-chat-modal-container { bottom: 20px; left: 50%; top: auto; right: auto; transform: translateX(-50%) scale(0.9); transform-origin: bottom center; } .purands-chat-modal--popup[data-chat-position="bottom-center"] .purands-chat-modal-container.show { transform: translateX(-50%) scale(1); } /* Maximize button — hidden by default, shown only in popup mode */ .purands-chat-maximize-btn { background: none; border: none; cursor: pointer; padding: 6px; color: #6b7280; display: none; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.15s ease; } .purands-chat-modal--popup .purands-chat-maximize-btn { display: flex; } .purands-chat-maximize-btn:hover { background: #f3f4f6; } /* Maximized state — revert to fullscreen */ .purands-chat-modal--popup.purands-chat-modal--maximized { background-color: rgba(0, 0, 0, 0.5); pointer-events: auto; } .purands-chat-modal--popup.purands-chat-modal--maximized .purands-chat-modal-container { position: relative; width: 100%; min-width: 100%; max-width: 100%; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 12px; bottom: auto; right: auto; left: auto; top: auto; box-shadow: none; transform: scale(1) !important; } /* Mobile: force fullscreen for popup mode. The (max-height) arm covers phone landscape, which every width-only breakpoint in this file misses: a phone in landscape is ~915x412, so width > 768 and the whole mobile layer switches off. Popup mode then keeps its desktop sizing — and `min-height: 400px !important` on a 412px-tall viewport, offset from the bottom, puts the panel taller than the screen. Fullscreen is also the right answer for a genuinely short desktop window, where that same min-height overflows for the same reason. */ @media (max-width: 768px), (max-height: 520px) { .purands-chat-modal--popup { background-color: rgba(0, 0, 0, 0.5); pointer-events: auto; } /* Specificity bump (:not match) so this beats the non-maximized popup-mode sizing rule above. Without :not this loses (2 vs 3 classes) and the popup keeps its 30%-wide desktop dimensions. */ .purands-chat-modal--popup:not(.purands-chat-modal--maximized) .purands-chat-modal-container, .purands-chat-modal--popup .purands-chat-modal-container { position: relative !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100vh !important; height: 100dvh !important; min-height: 0 !important; max-height: 100vh !important; max-height: 100dvh !important; border-radius: 0 !important; bottom: auto !important; right: auto !important; left: auto !important; top: auto !important; transform: none !important; box-shadow: none !important; } .purands-chat-modal--popup .purands-chat-maximize-btn { display: none; } } .purands-chat-container p { margin: 0; padding: 0; } .purands-chat-modal-header { padding: 20px 24px 16px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; background: #f9fafb; flex-shrink: 0; } .purands-chat-modal-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--chat-text); display: flex; align-items: center; gap: 8px; /* space between logo and the optional header-bar title */ /* Absorb whatever the header actions don't use. min-width: 0 is the load-bearing part: a flex item defaults to min-width: auto and refuses to shrink below its content width, so the title's ellipsis can never fire from flex pressure alone. */ min-width: 0; flex: 0 1 auto; } /* Optional merchant title next to the logo (chat.header_bar_title). Ellipsized so a long title can't push the header action buttons off-screen on mobile. */ .purands-chat-modal-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Container-relative, not viewport-relative. A `vw` cap measures the wrong box: in popup mode the panel is capped at 420px while 40vw on a desktop is ~576px, so a long title would push the header actions off the panel edge — the exact failure the cap was meant to prevent. Shrinking inside the flex row instead means the title uses whatever the actions leave over, at any panel size. */ min-width: 0; /* Declared here, not inherited from .purands-chat-modal-title: an inherited value loses to any rule matching the element directly, and HUFT's theme sizes bare `span` — the same shape that oversized the footer links. Heading font/weight matches the cart, wishlist and quick-view modal titles. */ font-family: var(--chat-font-heading) !important; font-size: 18px !important; font-weight: var(--chat-font-heading-weight) !important; color: var(--chat-text) !important; line-height: 1.2 !important; } .purands-chat-modal-logo { max-height: 32px; max-width: 150px; width: auto; height: auto; object-fit: contain; /* Hold size so header pressure ellipsizes the title text rather than squashing the logo — both are flex items of .purands-chat-modal-title. */ flex-shrink: 0; } .purands-chat-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--chat-text-muted); padding: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: background-color 0.2s ease; } .purands-chat-modal-close:hover { background-color: #e5e7eb; } .purands-chat-modal-body { /* !important on display/flex props for the same reason as modal-container: defend against Shopify theme resets that target generic div selectors. */ flex: 1 1 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; overflow-x: hidden !important; /* Same width clamp as modal-container — guarantees nothing leaks past the viewport edge even if some descendant has wider min-content. */ width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Container lives permanently inside modal body — no overrides needed */ /* Additional performance optimizations */ .purands-chat-message { contain: layout style; transform: translateZ(0); } .purands-chat-carousel { transform: translateZ(0); } /* Optimize modal scroll performance — must NOT use `contain: strict` because it includes size containment, which collapses the flex-grow on .purands-chat-messages and prevents the input wrapper from being pinned to the bottom. */ .purands-chat-modal-body .purands-chat-messages { contain: layout paint; transform: translateZ(0); will-change: scroll-position; backface-visibility: hidden; } /* ========================================= MARKDOWN STYLES FOR CHAT CONTENT ========================================= */ /* Override theme styles for chat message content */ .purands-chat-message h1, .purands-chat-message h2, .purands-chat-message h3, .purands-chat-message h4, .purands-chat-message h5, .purands-chat-message h6 { font-family: var(--chat-font-heading) !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0.75em 0 0.5em 0 !important; color: var(--chat-text) !important; border: none !important; background: none !important; padding: 0 !important; } /* Specific heading sizes */ .purands-chat-message h1 { font-size: 1.5em !important; } .purands-chat-message h2 { font-size: 1.375em !important; } .purands-chat-message h3 { font-size: 1.25em !important; } .purands-chat-message h4 { font-size: 1.125em !important; } .purands-chat-message h5 { font-size: 1em !important; } .purands-chat-message h6 { font-size: 0.875em !important; } /* First heading in message should have no top margin */ .purands-chat-message h1:first-child, .purands-chat-message h2:first-child, .purands-chat-message h3:first-child, .purands-chat-message h4:first-child, .purands-chat-message h5:first-child, .purands-chat-message h6:first-child { margin-top: 0 !important; } /* Reset list styles and let marked.js handle structure */ .purands-chat-bubble ul, .purands-chat-bubble ol { font-family: var(--chat-font-body); color: var(--chat-text); background: none; border: none; padding-left: 1.25em !important; } .purands-chat-bubble ul li, .purands-chat-bubble ol li { line-height: 1.5; color: var(--chat-text); background: none; border: none; } /* Custom bullet styling */ .purands-chat-bubble ul { list-style: none; } .purands-chat-bubble ul li::before { content: '•'; color: var(--chat-primary); font-weight: 600; margin-right: 0.4em; } .purands-chat-bubble ol { list-style: decimal; list-style-position: outside; } /* Nested list styling */ .purands-chat-bubble ul ul, .purands-chat-bubble ul ol, .purands-chat-bubble ol ul, .purands-chat-bubble ol ol { padding-left: 1em !important; margin-top: 0.25em; margin-bottom: 0.25em; } @media (max-width: 480px) { .purands-chat-bubble ul, .purands-chat-bubble ol { padding-left: 0.75em !important; } .purands-chat-bubble ul ul, .purands-chat-bubble ul ol, .purands-chat-bubble ol ul, .purands-chat-bubble ol ol { padding-left: 0.5em !important; } } .purands-chat-bubble ul ul > li::before { content: '–' !important; font-size: 0.875em; } .purands-chat-bubble ul ul ul > li::before { content: '▪' !important; font-size: 0.75em; } /* Clean up paragraphs in lists */ .purands-chat-bubble ul li p, .purands-chat-bubble ol li p { margin: 0; padding: 0; display: inline; } /* Disable interactions during processing */ .purands-chat-messages.processing { /* Allow scrolling and reading, but disable interactive elements */ pointer-events: auto; } /* Disable follow-up pills and Product Details buttons during processing (they create new AI questions) */ .purands-chat-messages.processing .purands-followup-pill, .purands-chat-messages.processing .purands-chat-card-button:not(.purands-chat-add-to-cart-button) { pointer-events: none !important; opacity: 0.5; cursor: not-allowed !important; } /* Ensure Add to Cart buttons remain enabled during processing */ .purands-chat-messages.processing .purands-chat-add-to-cart-button { pointer-events: auto !important; opacity: 1 !important; cursor: pointer !important; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { [class*="purands-"], [class*="purands-"] *, [class*="purands-"]::before, [class*="purands-"]::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ Product Questions embed (product-questions.liquid) Inline panel rendered in the product template. Reuses --chat-primary etc. when the floating widget is on the same page; otherwise uses its own neutral defaults. All selectors are scoped under .purands-pq-block so the surrounding theme can't bleed in (and we don't bleed into the theme). ============================================================================ */ .purands-pq-block { /* Local fallbacks — overridden by widget vars when the bundle is loaded */ --pq-bg: var(--chat-bg, #ffffff); --pq-text: var(--chat-text, #111827); --pq-text-muted: var(--chat-text-muted, #6b7280); --pq-accent: var(--chat-primary, #1f2937); --pq-accent-rgb: var(--chat-primary-rgb, 31, 41, 55); --pq-border: rgba(0, 0, 0, 0.08); --pq-frame: #f6f6f8; /* outer nested-card tint */ font-family: var(--chat-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); color: var(--pq-text); width: 100%; max-width: 760px; margin: 1.5em auto; padding: 1em; /* outer frame padding */ box-sizing: border-box; background: var(--pq-frame); border-radius: 20px; } .purands-pq-block.purands-pq-align-center { text-align: center; } .purands-pq-block.purands-pq-align-center .purands-pq-chips { justify-content: center; } .purands-pq-block.purands-pq-align-center .purands-pq-followups { justify-content: center; } /* The HTML `hidden` attribute sets `display: none` only at user-agent specificity. Our class rules below set `display: flex`, which would otherwise override `hidden` and leak the answer/error panels onto the page before any user interaction. This rule re-asserts hidden semantics inside our block scope. */ .purands-pq-block [hidden] { display: none !important; } .purands-pq-panel { background: var(--pq-bg, #ffffff); border: 1px solid var(--pq-border); border-radius: 14px; padding: 1.5em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .purands-pq-heading { font-family: var(--chat-font-heading, inherit); font-size: 1.125em; font-weight: 600; margin: 0 0 1em; color: var(--pq-text); line-height: 1.3; } /* ─── Product badge ───────────────────────────────────────────────────────── */ /* Anchors the panel to the product the shopper is on — "questions about THIS". */ .purands-pq-product-badge { display: flex; align-items: center; gap: 0.875em; padding: 0.625em 0.875em; background: rgba(var(--pq-accent-rgb), 0.04); border-radius: 12px; margin-bottom: 1em; } .purands-pq-product-thumb { width: 2.5em; height: 2.5em; border-radius: 8px; background: #fff; border: 1px solid var(--pq-border); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--pq-accent); } .purands-pq-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .purands-pq-product-thumb svg { width: 1.25em; height: 1.25em; } .purands-pq-product-meta { display: flex; flex-direction: column; gap: 0.125em; min-width: 0; } .purands-pq-product-title { font-size: 0.9375em; font-weight: 600; color: var(--pq-text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .purands-pq-product-subtitle { font-size: 0.75em; color: var(--pq-text-muted); line-height: 1.2; } /* ─── Chips ───────────────────────────────────────────────────────────────── */ .purands-pq-chips { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: 1em; } .purands-pq-chip { display: inline-flex; align-items: center; gap: 0.75em; padding: 0.625em 1em; background: var(--pq-bg, #ffffff); border: 1px solid var(--pq-border); border-radius: 14px; /* rounded-rect, not pill */ color: var(--pq-text); font-family: inherit; font-size: 0.9375em; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; width: fit-content; max-width: 100%; /* Defenses against theme button styles */ text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } .purands-pq-chip:hover { background: rgba(var(--pq-accent-rgb), 0.04); border-color: rgba(var(--pq-accent-rgb), 0.45); } .purands-pq-chip:active { transform: scale(0.985); } .purands-pq-chip:focus-visible { outline: 2px solid var(--pq-accent); outline-offset: 2px; } /* Chip icon slot — JS injects an SVG based on detectIcon(question text). Accent color so the icons read as "interactive" without dominating. */ .purands-pq-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.125em; height: 1.125em; flex-shrink: 0; color: var(--pq-accent); } .purands-pq-chip-icon svg { width: 100%; height: 100%; } .purands-pq-chip-text { min-width: 0; } /* Legacy sparkle still used by the old in-bundle welcome screen — leave styled. */ .purands-pq-sparkle { color: #f5b400; flex-shrink: 0; display: inline-block; } /* ─── Input row ───────────────────────────────────────────────────────────── */ .purands-pq-input-row { margin: 0; padding: 0; } .purands-pq-input-container { display: flex !important; align-items: center !important; gap: 0.5em !important; background: var(--pq-bg) !important; border: 1px solid var(--pq-border) !important; border-radius: 14px !important; /* match chip radius */ padding: 0.375em 0.5em 0.375em 1em !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .purands-pq-input-container:focus-within { border-color: var(--pq-accent) !important; box-shadow: 0 0 0 3px rgba(var(--pq-accent-rgb), 0.1); } .purands-pq-input { flex: 1 !important; min-width: 0 !important; background: transparent !important; background-image: none !important; border: none !important; outline: none !important; color: var(--pq-text) !important; font-family: inherit !important; font-size: 0.9375em !important; line-height: 1.4 !important; padding: 0.5em 0 !important; margin: 0 !important; box-shadow: none !important; text-decoration: none !important; -webkit-appearance: none !important; appearance: none !important; border-radius: 0 !important; height: auto !important; min-height: unset !important; max-height: unset !important; } .purands-pq-input::placeholder { color: var(--pq-text-muted); } .purands-pq-input:focus { box-shadow: none !important; } .purands-pq-send { width: 2em; height: 2em; border: none; border-radius: 8px; /* rounded-square per reference */ background: var(--pq-accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; } .purands-pq-send:hover:not(:disabled) { transform: scale(1.05); } .purands-pq-send:active:not(:disabled) { transform: scale(0.95); } .purands-pq-send:disabled { opacity: 0.35; cursor: not-allowed; background: var(--pq-text-muted); } .purands-pq-send svg { display: block; } /* ─── Answer area ─────────────────────────────────────────────────────────── */ .purands-pq-answer { margin-bottom: 1em; display: flex; flex-direction: column; gap: 0.875em; } .purands-pq-question-echo { font-weight: 600; color: var(--pq-text); font-size: 0.9375em; line-height: 1.4; padding: 0.5em 0.875em; background: rgba(var(--pq-accent-rgb), 0.06); border-radius: 12px; align-self: flex-start; max-width: 100%; } .purands-pq-block.purands-pq-align-center .purands-pq-question-echo { align-self: center; } .purands-pq-answer-body { overflow-y: auto; font-size: 0.9375em; line-height: 1.55; color: var(--pq-text); /* Scrollbar styling — only visible when answer overflows */ scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } .purands-pq-answer-body::-webkit-scrollbar { width: 6px; } .purands-pq-answer-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } .purands-pq-answer-body::-webkit-scrollbar-track { background: transparent; } .purands-pq-text p { margin: 0 0 0.625em; } .purands-pq-text p:last-child { margin-bottom: 0; } .purands-pq-text a { color: var(--pq-accent); text-decoration: underline; text-underline-offset: 2px; } .purands-pq-text strong { font-weight: 600; } /* ─── Loading skeleton ────────────────────────────────────────────────────── */ .purands-pq-skeleton { display: flex; flex-direction: column; gap: 0.5em; padding: 0.25em 0; } .purands-pq-skeleton span { display: block; height: 0.75em; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--pq-accent-rgb), 0.08) 0%, rgba(var(--pq-accent-rgb), 0.18) 50%, rgba(var(--pq-accent-rgb), 0.08) 100%); background-size: 200% 100%; animation: purands-pq-shimmer 1.4s ease-in-out infinite; } .purands-pq-skeleton span:nth-child(1) { width: 88%; } .purands-pq-skeleton span:nth-child(2) { width: 72%; } .purands-pq-skeleton span:nth-child(3) { width: 55%; } @keyframes purands-pq-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .purands-pq-answer-body.has-content .purands-pq-skeleton { display: none; } /* ─── Follow-up pills ─────────────────────────────────────────────────────── */ .purands-pq-followups { display: flex; flex-wrap: wrap; gap: 0.5em; } .purands-pq-followup-pill { display: inline-flex; align-items: center; padding: 0.4em 0.875em; background: rgba(var(--pq-accent-rgb), 0.08); border: 1px solid rgba(var(--pq-accent-rgb), 0.25); border-radius: 999px; color: var(--pq-accent); font-family: inherit; font-size: 0.8125em; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; -webkit-appearance: none !important; appearance: none !important; } .purands-pq-followup-pill:hover { background: var(--pq-accent); color: #fff; } .purands-pq-followup-pill:active { transform: scale(0.97); } /* ─── Error state ─────────────────────────────────────────────────────────── */ .purands-pq-error { display: flex; align-items: center; gap: 0.75em; padding: 0.625em 0.875em; background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.25); border-radius: 8px; color: #b91c1c; font-size: 0.875em; } .purands-pq-error-text { flex: 1; } .purands-pq-retry { background: transparent; border: 1px solid currentColor; color: inherit; font: inherit; padding: 0.25em 0.625em; border-radius: 6px; cursor: pointer; font-size: 0.875em; } .purands-pq-retry:hover { background: rgba(220, 38, 38, 0.1); } /* ─── Inline carousel wrapper ─────────────────────────────────────────────── */ /* Hosts the carousel between the answer text and follow-up pills. Reuses .purands-chat-carousel + .purands-chat-card classes already defined for the floating widget so cards look identical. We just need a slim wrapper that doesn't clip the horizontal scroll. */ .purands-pq-carousel-wrapper { /* Bleed out of the panel's padding so cards reach the panel edges */ margin: 0 -0.5em; padding: 0 0.5em; overflow: hidden; } .purands-pq-carousel-wrapper .purands-chat-carousel { padding-bottom: 0.25em; } /* Snap each card to the scroll start on mobile so flick-scrolling lands cleanly on one product instead of mid-card. Desktop opts out — drag-scrolling there benefits from free positioning. */ @media (max-width: 768px) { .purands-pq-carousel-wrapper .purands-chat-carousel { scroll-snap-type: x mandatory; } .purands-pq-carousel-wrapper .purands-chat-card, .purands-pq-carousel-wrapper .purands-chat-card-show-more { scroll-snap-align: start; } } /* Slightly smaller card in the embed than in the floating widget — products are already on the page; cards are referential, not the main UI */ .purands-pq-carousel-wrapper .purands-chat-card { min-width: 15em !important; max-width: 15em !important; } .purands-pq-carousel-wrapper .purands-chat-card-image-container { height: 10em !important; } /* "Added ✓" feedback on Add to Cart — brand primary, never a fixed color */ .purands-chat-add-to-cart-button.purands-chat-added { background: var(--chat-primary) !important; color: var(--chat-text-inverse, #fff) !important; border-color: var(--chat-primary) !important; } /* ─── AI chip swap fade-in ────────────────────────────────────────────────── */ .purands-pq-chip-fade-in { animation: purands-pq-chip-in 0.25s ease-out both; } @keyframes purands-pq-chip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ─── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .purands-pq-block { padding: 0.75em; margin: 1em auto; border-radius: 16px; } .purands-pq-panel { padding: 1.125em; border-radius: 12px; } .purands-pq-heading { font-size: 1em; margin-bottom: 0.75em; } .purands-pq-chip { font-size: 0.875em; padding: 0.5em 0.875em; } .purands-pq-input { font-size: 1em !important; /* ≥16px prevents iOS zoom on focus */ } .purands-pq-answer-body { max-height: 400px !important; } .purands-pq-product-title { font-size: 0.875em; } .purands-pq-carousel-wrapper .purands-chat-card { min-width: 12.5em !important; max-width: 12.5em !important; } .purands-pq-carousel-wrapper .purands-chat-card-image-container { height: 8.5em !important; } } /* ============================================================ Progressive Profile Form (web) — inline profile-collection form rendered under an AI message. Reuses design tokens and mirrors the variant-chip / followup-pill / primary-CTA look. ============================================================ */ .purands-profile-form { display: flex !important; flex-direction: column !important; gap: 0.7em !important; margin-top: 0.6em !important; padding: 0.9em 1em !important; background: var(--chat-bg-dark, #f3f4f6) !important; border: 1px solid var(--chat-border) !important; border-radius: 0.75em !important; max-width: 100% !important; } /* After submit/skip the form is replaced in place by a slim confirmation line. */ .purands-profile-form--done { padding: 0.45em 0.2em !important; gap: 0 !important; background: transparent !important; border: none !important; } /* The customer moved on (new message sent) — the form stays visible as a record but is no longer interactive; its Submit would answer a question the customer has already left behind. */ .purands-profile-form--expired { opacity: 0.55 !important; pointer-events: none !important; } .purands-profile-form-status { font-size: 0.85em !important; font-weight: 600 !important; color: var(--chat-text-muted) !important; } /* A submitted form is replaced by a read-only record of what the customer shared (and rebuilt from storage on reload), so it keeps the card chrome that plain --done strips away — there are rows to hold now. */ .purands-profile-form--summary { padding: 0.7em 0.9em !important; gap: 0.5em !important; background: var(--chat-bg-dark, #f3f4f6) !important; border: 1px solid var(--chat-border) !important; } .purands-profile-summary { display: flex !important; flex-direction: column !important; gap: 0.35em !important; } .purands-profile-summary-entity { font-size: 0.875em !important; font-weight: 700 !important; color: var(--chat-primary) !important; margin-top: 0.15em !important; } .purands-profile-summary-row { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 0.75em !important; } .purands-profile-summary-label { flex: 0 1 auto !important; font-size: 0.8em !important; font-weight: 600 !important; color: var(--chat-text-muted) !important; } .purands-profile-summary-value { flex: 1 1 auto !important; min-width: 0 !important; text-align: right !important; font-size: 0.825em !important; font-weight: 600 !important; color: var(--chat-text) !important; overflow-wrap: anywhere !important; } .purands-profile-form-title { font-size: 0.95em !important; font-weight: 700 !important; color: var(--chat-text) !important; } .purands-profile-form-category { display: flex !important; flex-direction: column !important; gap: 0.6em !important; } .purands-profile-form-category-title { font-size: 0.8em !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; color: var(--chat-text-muted) !important; } .purands-profile-form-entity-card { display: flex !important; flex-direction: column !important; gap: 0.6em !important; padding: 0.7em 0.8em !important; background: var(--chat-bg, #fff) !important; border: 1px solid var(--chat-border) !important; border-radius: 0.6em !important; } .purands-profile-form-entity-title { font-size: 0.875em !important; font-weight: 700 !important; color: var(--chat-primary) !important; } .purands-profile-form-field { display: flex !important; flex-direction: column !important; gap: 0.35em !important; } /* Compact row layout: label left, control right (used for bool Yes/No). */ .purands-profile-form-field--inline { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 0.75em !important; } .purands-profile-form-field--inline .purands-profile-form-label { margin: 0 !important; } .purands-profile-form-field--inline .purands-profile-chips { flex: 0 0 auto !important; } .purands-profile-form-label { font-size: 0.825em !important; font-weight: 600 !important; color: var(--chat-text-muted) !important; } .purands-profile-form-field.purands-form-stale .purands-profile-form-label { color: var(--chat-text) !important; } .purands-form-stale-hint { margin-left: 0.3em !important; font-weight: 500 !important; font-size: 0.85em !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: var(--chat-text-light) !important; } /* free-text / number input */ .purands-form-input { width: 100% !important; padding: 0.55em 0.7em !important; font-size: 16px !important; /* literal px — prevents iOS focus zoom */ font-family: var(--chat-font-body) !important; color: var(--chat-text) !important; background: var(--chat-bg, #fff) !important; border: 1.5px solid #d1d5db !important; border-radius: 0.55em !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; transition: border-color 0.15s ease !important; } .purands-form-input:focus { border-color: var(--chat-primary) !important; } .purands-form-input::placeholder { color: var(--chat-text-light) !important; } /* chips — single/multi-select */ .purands-profile-chips { display: flex !important; flex-wrap: wrap !important; gap: 0.4em !important; } .purands-profile-chip { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 2.2em !important; padding: 0.4em 0.7em !important; background: var(--chat-bg, #fff) !important; border: 1.5px solid #d1d5db !important; border-radius: 0.6em !important; color: var(--chat-text, #222) !important; font-size: 0.8em !important; font-weight: 600 !important; line-height: 1.1 !important; cursor: pointer !important; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important; } .purands-profile-chip:hover { border-color: var(--chat-primary) !important; } .purands-profile-chip.selected { border-color: var(--chat-primary) !important; background: rgba(var(--chat-primary-rgb), 0.08) !important; color: var(--chat-primary) !important; } /* Day separator between messages from different days (Today / Yesterday / 12 Jul) — neutral grays, never brand-colored */ /* Day separators are rows in the same column and share its cap and centring, or the pill would centre on the PANEL while the messages centre on the COLUMN — which only coincide when the panel happens to be exactly the column width. The auto side margins have to live in this rule: the shorthand here is !important, so setting margin-left/right in an earlier rule would be silently overridden back to 0. */ .purands-chat-day-separator { display: flex !important; justify-content: center !important; width: 100% !important; max-width: min(100%, var(--chat-max-width)) !important; margin: 0.9em auto 0.5em !important; } .purands-chat-day-separator-label { padding: 0.25em 0.8em !important; background: var(--chat-bg-dark, #f3f4f6) !important; border-radius: 999px !important; font-size: 0.72em !important; font-weight: 600 !important; color: var(--chat-text-muted, #6b7280) !important; } /* Sticky hover/focus neutralizer (form + variant chips). On touch, a tapped chip keeps :hover and :focus until the next tap elsewhere — after UNselecting, the lingering brand border reads as "still selected". Hover only applies on real-hover devices; tap focus shows nothing; keyboard focus keeps a visible ring via :focus-visible. Placed AFTER both chip rule sets so it wins the cascade at equal specificity. */ @media (hover: none) { .purands-variant-chip:hover:not(.selected), .purands-profile-chip:hover:not(.selected) { border-color: #d1d5db !important; } } .purands-variant-chip:focus, .purands-profile-chip:focus { outline: none !important; } .purands-variant-chip:focus:not(:focus-visible):not(.selected), .purands-profile-chip:focus:not(:focus-visible):not(.selected) { border-color: #d1d5db !important; } .purands-variant-chip:focus-visible, .purands-profile-chip:focus-visible { outline: 2px solid var(--chat-primary) !important; outline-offset: 2px !important; } /* tags — free-form list */ .purands-profile-tags { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.35em !important; } .purands-profile-tags-input { flex: 1 1 8em !important; width: auto !important; min-width: 8em !important; } .purands-profile-tag { display: inline-flex !important; align-items: center !important; gap: 0.3em !important; padding: 0.25em 0.5em !important; background: rgba(var(--chat-primary-rgb), 0.08) !important; border: 1px solid rgba(var(--chat-primary-rgb), 0.25) !important; border-radius: 0.5em !important; color: var(--chat-primary) !important; font-size: 0.8em !important; font-weight: 600 !important; } .purands-profile-tag-remove { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.2em !important; height: 1.2em !important; padding: 0 !important; background: transparent !important; border: none !important; color: var(--chat-primary) !important; font-size: 1.1em !important; line-height: 1 !important; cursor: pointer !important; } /* 1-10 scale slider — value bubble floats above the thumb */ .purands-form-slider { display: flex !important; flex-direction: column !important; gap: 0.3em !important; padding-top: 1.7em !important; /* room for the value bubble above the track */ } .purands-form-slider-track { position: relative !important; display: flex !important; align-items: center !important; height: 1.35em !important; } .purands-form-slider-bubble { position: absolute !important; bottom: calc(100% + 0.2em) !important; transform: translateX(-50%) !important; padding: 0.1em 0.5em !important; border-radius: 0.5em !important; background: rgba(var(--chat-primary-rgb), 0.12) !important; color: var(--chat-primary) !important; font-size: 0.8em !important; font-weight: 700 !important; white-space: nowrap !important; pointer-events: none !important; } .purands-form-slider--unset .purands-form-slider-bubble { display: none !important; } .purands-form-slider-foot { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 0.8em !important; font-weight: 600 !important; color: var(--chat-text-muted) !important; } .purands-form-slider-bound { opacity: 0.7 !important; } .purands-form-slider-hint { color: var(--chat-text-light) !important; font-weight: 500 !important; white-space: nowrap !important; } .purands-form-slider:not(.purands-form-slider--unset) .purands-form-slider-hint { visibility: hidden !important; } .purands-form-slider-input { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; height: 0.4em !important; margin: 0 !important; border-radius: 1em !important; background: var(--chat-border) !important; outline: none !important; cursor: pointer !important; } .purands-form-slider-input::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 1.35em !important; height: 1.35em !important; border-radius: 50% !important; background: var(--chat-primary) !important; border: 2px solid var(--chat-bg, #fff) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important; cursor: pointer !important; } .purands-form-slider-input::-moz-range-thumb { width: 1.35em !important; height: 1.35em !important; border-radius: 50% !important; background: var(--chat-primary) !important; border: 2px solid var(--chat-bg, #fff) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important; cursor: pointer !important; } .purands-form-slider--unset .purands-form-slider-input::-webkit-slider-thumb { background: var(--chat-text-light) !important; } .purands-form-slider--unset .purands-form-slider-input::-moz-range-thumb { background: var(--chat-text-light) !important; } /* actions */ .purands-profile-form-actions { display: flex !important; gap: 0.5em !important; margin-top: 0.2em !important; } .purands-form-submit-btn { flex: 1 1 auto !important; padding: 0.6em 1.1em !important; background: var(--chat-primary) !important; border: 1.5px solid var(--chat-primary) !important; border-radius: 0.6em !important; color: var(--chat-text-inverse, #fff) !important; font-size: 0.875em !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.15s ease !important; } .purands-form-submit-btn:hover { background: var(--chat-primary-hover, #374151) !important; } .purands-form-skip-btn { flex: 0 0 auto !important; padding: 0.6em 1.1em !important; background: transparent !important; border: 1.5px solid #d1d5db !important; border-radius: 0.6em !important; color: var(--chat-text-muted) !important; font-size: 0.875em !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.15s ease !important; } .purands-form-skip-btn:hover { border-color: var(--chat-primary) !important; color: var(--chat-primary) !important; } .purands-form-submit-btn:disabled, .purands-form-skip-btn:disabled { opacity: 0.6 !important; cursor: default !important; } /* ── Profile form v2 additions ── */ /* Entity-card section sub-header ("Identity", "Health & Nutrition") — lighter than the entity title so the pet's name stays dominant */ .purands-profile-form-section-title { font-size: 0.72em !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--chat-text-muted) !important; margin-top: 0.35em !important; } /* Confirm chip (value the customer stated this turn): highlighted label, pre-selected editable value below */ .purands-profile-form-field.purands-form-confirmed .purands-profile-form-label { color: var(--chat-text) !important; } .purands-form-confirm-hint { color: var(--chat-primary) !important; } /* Out-of-enum stored value shown as a selectable "custom" option */ .purands-profile-chip--custom { border-style: dashed !important; } /* Required-name hint on new-entity cards; visible only while the name is empty (Submit is blocked in that state, Skip never is). display needs !important or theme resets (div { display:block !important }) pin it on; the show rule below still wins on specificity (0,2,0 vs 0,1,0). */ .purands-profile-form-name-hint { display: none !important; font-size: 0.75em !important; color: var(--chat-text-muted) !important; } .purands-profile-form-field--name-required .purands-profile-form-name-hint { display: block !important; }