/* AI Shopping Experience — full-screen ChatGPT-style shopping app */ /* While the full-screen chat is open, lock the page behind it so there is only one scrollbar (the chat's). */ html.aise-noscroll, html.aise-noscroll body { overflow: hidden !important; height: 100%; touch-action: none; } /* ---------- Theme tokens & color palettes ---------- All colors are CSS custom properties on .aise-root so both the floating launcher and the app inherit them. The admin picks a palette (data-palette); presets override the accent pair, while "custom" injects accent/bg/text inline on .aise-root and derives the neutral surfaces from them. */ .aise-root { --aise-accent: #4f46e5; --aise-accent-2: #6366f1; --aise-bg: #ffffff; --aise-panel: #f7f7f8; --aise-fg: #0f172a; --aise-muted: #6b7280; --aise-border: #e5e7eb; --aise-user: #4f46e5; --aise-bot: #f1f5f9; --aise-sidebar-bg: #f9fafb; /* Soft accent wash for selection highlights: a translucent accent that adapts to the current surface in both light and dark. */ --aise-accent-soft: color-mix( in srgb, var(--aise-accent) 16%, transparent ); } /* Preset palettes — override the accent pair; neutrals come from the base rule above (and its dark-mode variant near the end of this file). "indigo" is the default and needs no override. */ .aise-root[data-palette="ocean"] { --aise-accent: #0284c7; --aise-accent-2: #0ea5e9; --aise-user: #0284c7; } .aise-root[data-palette="emerald"] { --aise-accent: #059669; --aise-accent-2: #10b981; --aise-user: #059669; } .aise-root[data-palette="rose"] { --aise-accent: #e11d48; --aise-accent-2: #fb7185; --aise-user: #e11d48; } .aise-root[data-palette="amber"] { --aise-accent: #d97706; --aise-accent-2: #f59e0b; --aise-user: #d97706; } /* Custom palette: the admin supplies accent, accent-2, bg and fg inline on .aise-root; the neutral surfaces are derived from them so a light OR dark custom background both read correctly. Auto dark-mode is skipped for custom (its colors are used exactly as chosen — see the dark-mode media query). */ .aise-root[data-palette="custom"] { --aise-panel: color-mix( in srgb, var(--aise-bg) 92%, var(--aise-fg) ); --aise-bot: color-mix( in srgb, var(--aise-bg) 90%, var(--aise-fg) ); --aise-border: color-mix( in srgb, var(--aise-bg) 84%, var(--aise-fg) ); --aise-sidebar-bg: color-mix( in srgb, var(--aise-bg) 96%, var(--aise-fg) ); --aise-muted: color-mix( in srgb, var(--aise-fg) 55%, var(--aise-bg) ); } /* ---------- Theme isolation ---------- The widget renders inside a Shadow DOM (see chat.js), so the storefront theme (Astra, Divi, Storefront, …) cannot match any element in here — its button{}, input{}, a{}, p{} rules simply never apply. The ONLY thing that still crosses the shadow boundary is CSS inheritance (font-family, color, line-height, letter-spacing, …) flowing from the host's context. `:host { all: initial }` severs that: it resets the host's inherited properties to their initial values, so nothing from the theme's leaks in. Custom properties (--aise-*) are exempt from `all`, so palette tokens and the JS-set --aise-rail-w still inherit through. The .aise-root base rule then establishes our own theme-independent typographic baseline that every descendant inherits from. (In the light-DOM copy of this file, :host matches nothing and is harmlessly ignored.) */ :host { all: initial; } .aise-root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: left; white-space: normal; color: var(--aise-fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; } .aise-root *, .aise-root *::before, .aise-root *::after { box-sizing: border-box; } /* ---------- Floating launcher ---------- */ /* Base = round icon button (used by the side-panel "rail" interface). The full-screen and widget interfaces override this into a search bar below. */ .aise-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 2147483000; width: 60px; height: 60px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient( 135deg, var(--aise-accent), var(--aise-accent-2) ); box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.25 ); box-shadow: 0 10px 30px color-mix( in srgb, var(--aise-accent) 45%, transparent ); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .aise-launcher:hover { transform: translateY( -2px ) scale( 1.03 ); box-shadow: 0 14px 36px rgba( 15, 23, 42, 0.3 ); box-shadow: 0 14px 36px color-mix( in srgb, var(--aise-accent) 55%, transparent ); } .aise-launcher:focus-visible { outline: 3px solid rgba( 99, 102, 241, 0.5 ); outline-offset: 3px; } .aise-root[data-open="true"] .aise-launcher { display: none; } /* Hover/focus tooltip for the round icon launcher. Sits above the button and fades in; never shown for the search-bar launcher (which has its own input). */ .aise-root[data-launcher="icon"] .aise-launcher[data-tooltip]::after { content: attr( data-tooltip ); position: absolute; right: 0; bottom: calc( 100% + 12px ); white-space: nowrap; padding: 7px 12px; border-radius: 8px; font-size: 13px; line-height: 1.2; color: #fff; background: rgba( 15, 23, 42, 0.92 ); box-shadow: 0 6px 20px rgba( 15, 23, 42, 0.25 ); pointer-events: none; opacity: 0; transform: translateY( 4px ); transition: opacity 0.15s ease, transform 0.15s ease; } .aise-root[data-launcher="icon"] .aise-launcher[data-tooltip]:hover::after, .aise-root[data-launcher="icon"] .aise-launcher[data-tooltip]:focus-visible::after { opacity: 1; transform: translateY( 0 ); } .aise-launcher-icon { display: inline-flex; } /* When the icon is the interactive open button (search-bar launcher), strip the default button chrome so it reads as a plain sparkle mark. */ button.aise-launcher-icon { padding: 0; border: 0; background: none; cursor: pointer; align-items: center; color: inherit; } button.aise-launcher-icon:focus-visible { outline: 2px solid var(--aise-accent); outline-offset: 2px; border-radius: 6px; } /* ---------- Search-bar launcher (Gemini-style) ---------- Any interface can use the search-bar launcher (data-launcher="searchbar"): a translucent pill with a real text input. The shopper types their first prompt and submits; JS then opens the full interface and sends it as the first message. The full-screen app centers a wide bar; the docked interfaces (widget + rail) show a compact bar anchored bottom-right. */ .aise-root[data-launcher="searchbar"] .aise-launcher { width: auto; height: auto; padding: 10px 10px 10px 18px; gap: 10px; justify-content: flex-start; border-radius: 999px; color: var(--aise-fg); /* Translucent, frosted surface that lets the page show through. */ background: color-mix( in srgb, var(--aise-panel) 62%, transparent ); -webkit-backdrop-filter: blur( 14px ) saturate( 1.4 ); backdrop-filter: blur( 14px ) saturate( 1.4 ); border: 1px solid color-mix( in srgb, var(--aise-fg) 12%, transparent ); box-shadow: 0 8px 30px rgba( 15, 23, 42, 0.14 ); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .aise-root[data-launcher="searchbar"][data-ui="fullscreen"] .aise-launcher { /* Wide bar centered at the bottom, the way Gemini's prompt bar sits. */ right: auto; left: 50%; transform: translateX( -50% ); width: min( 680px, calc( 100vw - 32px ) ); } .aise-root[data-launcher="searchbar"]:not([data-ui="fullscreen"]) .aise-launcher { /* Compact bar anchored bottom-right (docked chatbot + side panel). */ width: min( 420px, calc( 100vw - 32px ) ); } .aise-root[data-launcher="searchbar"] .aise-launcher:focus-within { border-color: color-mix( in srgb, var(--aise-accent) 55%, transparent ); box-shadow: 0 10px 34px color-mix( in srgb, var(--aise-accent) 24%, transparent ); } /* Override the base round-button hover (scale + lift) so the bar keeps its position — the fullscreen bar must retain its centering transform. */ .aise-root[data-launcher="searchbar"][data-ui="fullscreen"] .aise-launcher:hover { transform: translateX( -50% ); box-shadow: 0 12px 36px rgba( 15, 23, 42, 0.18 ); } .aise-root[data-launcher="searchbar"]:not([data-ui="fullscreen"]) .aise-launcher:hover { transform: none; box-shadow: 0 12px 36px rgba( 15, 23, 42, 0.18 ); } .aise-root[data-launcher="searchbar"] .aise-launcher .aise-launcher-icon { color: var(--aise-accent); flex: 0 0 auto; } /* The real text input: fills the bar, no chrome of its own. */ .aise-launcher-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--aise-fg); font: inherit; font-size: 15px; line-height: 1.4; padding: 4px 0; } .aise-launcher-input::placeholder { color: color-mix( in srgb, var(--aise-fg) 55%, transparent ); opacity: 1; } /* Submit ("go") button on the right of the bar. */ .aise-root[data-launcher="searchbar"] .aise-launcher .aise-launcher-go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient( 135deg, var(--aise-accent), var(--aise-accent-2) ); transition: transform 0.15s ease, box-shadow 0.15s ease; } .aise-launcher-go:hover { transform: scale( 1.05 ); box-shadow: 0 6px 18px color-mix( in srgb, var(--aise-accent) 45%, transparent ); } .aise-launcher-go:focus-visible { outline: 3px solid color-mix( in srgb, var(--aise-accent) 55%, transparent ); outline-offset: 2px; } .aise-root[data-open="false"] .aise-app { display: none; } .aise-app { position: fixed; inset: 0; z-index: 2147483000; display: grid; /* history sidebar | chat column | cart sidebar (auto collapses when empty/hidden). */ grid-template-columns: 260px 1fr auto; /* Constrain the single row to the viewport (min 0) so inner panes can scroll instead of the whole app growing past the screen. */ grid-template-rows: minmax( 0, 1fr ); overflow: hidden; background: var(--aise-bg); color: var(--aise-fg); font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; } .aise-app * { box-sizing: border-box; } .aise-app[data-sidebar="closed"] { grid-template-columns: 0 1fr auto; } /* ---------- Sidebar ---------- */ .aise-sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--aise-sidebar-bg); border-right: 1px solid var(--aise-border); overflow: hidden; } .aise-app[data-sidebar="closed"] .aise-sidebar { border-right: 0; } .aise-sidebar-top { padding: 12px; } .aise-newchat { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--aise-border); border-radius: 10px; background: var(--aise-bg); color: var(--aise-fg); font-size: 15px; font-weight: 600; cursor: pointer; } .aise-newchat:hover { background: var(--aise-panel); } .aise-history { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 2px; } .aise-history-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--aise-fg); white-space: nowrap; overflow: hidden; } .aise-history-item:hover { background: var(--aise-panel); } .aise-history-item[aria-current="true"] { background: var(--aise-accent-soft); } .aise-history-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .aise-history-del { flex: 0 0 auto; border: 0; background: transparent; color: var(--aise-muted); cursor: pointer; opacity: 0; padding: 2px; line-height: 0; border-radius: 6px; } .aise-history-item:hover .aise-history-del { opacity: 1; } .aise-history-del:hover { color: #ef4444; } .aise-history-empty { color: var(--aise-muted); font-size: 13px; padding: 10px; } .aise-sidebar-foot { padding: 12px 16px; border-top: 1px solid var(--aise-border); font-size: 13px; color: var(--aise-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Main column ---------- */ .aise-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; } .aise-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--aise-border); flex: 0 0 auto; } .aise-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--aise-fg); cursor: pointer; } .aise-icon-btn:hover { background: var(--aise-panel); } .aise-topbar-title { font-weight: 600; flex: 1 1 auto; } .aise-close { margin-left: auto; } /* ---------- Thread ---------- */ .aise-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 0; } .aise-turn { max-width: 760px; margin: 0 auto; padding: 14px 20px; display: flex; gap: 14px; align-items: flex-start; } .aise-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; } .aise-turn--user .aise-avatar { background: #334155; } .aise-turn--assistant .aise-avatar { background: linear-gradient( 135deg, var(--aise-accent), var(--aise-accent-2) ); } .aise-turn-body { flex: 1 1 auto; min-width: 0; padding-top: 4px; } .aise-turn-text { white-space: pre-wrap; word-wrap: break-word; } /* Human handoff: a manual reply from a store team member. */ .aise-avatar--agent { background: linear-gradient( 135deg, #0f766e, #14b8a6 ); } /* System note (e.g. "a team member is helping you") — centered, avatar-less. */ .aise-turn--system { justify-content: center; padding: 6px 20px; } .aise-system-note { max-width: 560px; margin: 0 auto; text-align: center; font-size: 12.5px; line-height: 1.5; color: #64748b; background: rgba( 100, 116, 139, 0.10 ); border-radius: 999px; padding: 6px 14px; } /* Empty-state greeting */ .aise-welcome { max-width: 640px; margin: 8vh auto 0; text-align: center; padding: 0 20px; } .aise-welcome h2 { font-size: 26px; margin: 0 0 8px; } .aise-welcome p { color: var(--aise-muted); margin: 0 0 24px; } .aise-suggestions { display: grid; grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ); gap: 10px; } .aise-suggestion { text-align: left; padding: 12px 14px; border: 1px solid var(--aise-border); border-radius: 12px; background: var(--aise-bg); color: var(--aise-fg); cursor: pointer; font-size: 14px; } .aise-suggestion:hover { background: var(--aise-panel); } /* Typing indicator */ .aise-typing { display: inline-flex; gap: 4px; align-items: center; padding: 6px 0; } .aise-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--aise-muted); animation: aise-blink 1.2s infinite ease-in-out; } .aise-typing span:nth-child(2) { animation-delay: 0.2s; } .aise-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes aise-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY( 0 ); } 40% { opacity: 1; transform: translateY( -3px ); } } /* ---------- Product cards ---------- */ .aise-products { margin-top: 14px; display: grid; grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); gap: 12px; } .aise-product { display: flex; flex-direction: column; border: 1px solid var(--aise-border); border-radius: 14px; overflow: hidden; background: var(--aise-bg); transition: transform 0.12s ease, box-shadow 0.12s ease; } .aise-product:hover { transform: translateY( -2px ); box-shadow: 0 10px 24px rgba( 15, 23, 42, 0.12 ); } .aise-product-media { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .aise-product-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--aise-panel); display: block; } .aise-product-img--placeholder { display: flex; align-items: center; justify-content: center; color: var(--aise-muted); font-size: 13px; } .aise-product-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .aise-product-name { font-size: 14px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aise-product-price { font-size: 14px; color: var(--aise-accent); font-weight: 700; } .aise-product-badge { align-self: flex-start; font-size: 11px; font-weight: 700; color: #b91c1c; background: #fee2e2; padding: 1px 7px; border-radius: 999px; } .aise-product-oos { font-size: 12px; color: var(--aise-muted); } /* ---------- Product / cart action buttons ---------- */ .aise-product-actions { display: flex; gap: 6px; padding: 0 12px 12px; margin-top: auto; } .aise-btn { flex: 1 1 auto; appearance: none; border: 1px solid var(--aise-accent); background: var(--aise-accent); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: opacity 0.12s ease, background 0.12s ease; } .aise-btn:hover { opacity: 0.9; } .aise-btn:disabled { cursor: default; opacity: 0.75; } .aise-btn.aise-added { background: transparent; color: var(--aise-accent); } /* Link rendered as a button (e.g. "View product") — the product URL is never shown as raw text. */ a.aise-btn { display: inline-block; text-align: center; text-decoration: none; } .aise-btn--ghost { background: transparent; color: var(--aise-accent); } .aise-btn--ghost:hover { opacity: 1; background: var(--aise-accent); color: #fff; } .aise-variation-select { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--aise-border); background: var(--aise-bg); color: inherit; } .aise-variation-select.aise-needs-choice { border-color: #b91c1c; } /* ---------- Cart sidebar (right) ---------- */ .aise-cart { width: 340px; max-width: 34vw; height: 100%; padding: 16px; border-left: 1px solid var(--aise-border); background: var(--aise-sidebar-bg); font-size: 14px; overflow-y: auto; } .aise-cart[hidden] { display: none; } .aise-cart-head { font-weight: 700; font-size: 15px; margin-bottom: 12px; } .aise-cart-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--aise-border); } .aise-cart-thumb { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 8px; object-fit: cover; background: var(--aise-panel); border: 1px solid var(--aise-border); } .aise-cart-thumb--empty { display: block; } .aise-cart-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .aise-cart-line { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .aise-cart-name { font-weight: 600; } .aise-cart-variation { font-weight: 400; color: var(--aise-muted); font-size: 12px; } .aise-cart-total { white-space: nowrap; font-weight: 600; } .aise-cart-controls { display: flex; align-items: center; justify-content: space-between; } .aise-qty { display: inline-flex; align-items: center; gap: 8px; } .aise-qty-btn { appearance: none; width: 26px; height: 26px; border: 1px solid var(--aise-border); background: var(--aise-bg); color: inherit; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; } .aise-qty-btn:hover { border-color: var(--aise-accent); } .aise-qty-val { min-width: 20px; text-align: center; } .aise-cart-remove { appearance: none; border: none; background: none; color: var(--aise-muted); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 8px; } .aise-cart-remove:hover { color: #b91c1c; } .aise-cart-error { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #fee2e2; color: #b91c1c; font-size: 13px; } .aise-checkout { display: block; margin-top: 10px; text-align: center; background: var(--aise-accent); color: #fff !important; padding: 10px; border-radius: 10px; text-decoration: none; font-weight: 600; } .aise-turn-cta { margin-top: 10px; } .aise-checkout--cta { display: inline-block; margin-top: 0; padding: 10px 20px; } /* ---------- Composer ---------- */ .aise-composer { flex: 0 0 auto; padding: 8px 16px 12px; } .aise-composer-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; border: 1px solid var(--aise-border); border-radius: 24px; background: var(--aise-bg); box-shadow: 0 2px 8px rgba( 15, 23, 42, 0.06 ); } .aise-text { flex: 1 1 auto; max-height: 200px; padding: 8px 0; border: 0; outline: none; resize: none; /* Hidden by default so a single-row box (or a wrapping placeholder in longer-worded locales like pt-BR) never shows a scrollbar. autoGrow() re-enables scrolling only once the content reaches max-height. */ overflow-y: hidden; font-size: 15px; font-family: inherit; line-height: 1.5; background: transparent; color: var(--aise-fg); } .aise-send { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--aise-accent); color: #fff; border: 0; border-radius: 50%; cursor: pointer; flex: 0 0 auto; } .aise-send:hover { background: var(--aise-accent-2); } .aise-send:disabled { opacity: 0.4; cursor: default; } .aise-disclaimer { max-width: 760px; margin: 8px auto 0; text-align: center; font-size: 12px; color: var(--aise-muted); } /* ========== Compact interfaces (widget + rail) ========== Both the docked chatbot (chat_ui = "widget") and the side panel (chat_ui = "rail") reuse the app internals but drop the wide-layout chrome: no history sidebar, no side cart column, tighter cards, and a persistent bottom checkout button. Panel shape/positioning is defined per-interface further down. */ /* Single column: no history sidebar in the compact panels. */ .aise-root[data-ui="widget"] .aise-app, .aise-root[data-ui="rail"] .aise-app { grid-template-columns: 1fr; overflow: hidden; } /* History + "New chat" live in a slide-in drawer (opened by the topbar menu button) instead of a permanent column, to save width in the compact panels. The menu button — hidden in the wide layout — is shown here. */ .aise-root[data-ui="widget"] #aise-toggle-sidebar, .aise-root[data-ui="rail"] #aise-toggle-sidebar { display: inline-flex; } .aise-root[data-ui="widget"] .aise-sidebar, .aise-root[data-ui="rail"] .aise-sidebar { position: absolute; inset: 0 auto 0 0; width: 260px; max-width: 85%; z-index: 8; border-right: 1px solid var(--aise-border); box-shadow: 0 0 40px rgba( 0, 0, 0, 0.25 ); transition: transform 0.2s ease; } .aise-root[data-ui="widget"] .aise-app[data-sidebar="closed"] .aise-sidebar, .aise-root[data-ui="rail"] .aise-app[data-sidebar="closed"] .aise-sidebar { transform: translateX( -100% ); box-shadow: none; } /* No cart column: the whole panel is the conversation. Add-to-cart still works and a persistent checkout button sits at the bottom. */ .aise-root[data-ui="widget"] .aise-cart, .aise-root[data-ui="rail"] .aise-cart { display: none; } /* The "AI can make mistakes…" disclaimer is dropped in the compact panels. */ .aise-root[data-ui="widget"] .aise-disclaimer, .aise-root[data-ui="rail"] .aise-disclaimer { display: none; } /* Persistent checkout button pinned below everything (its own grid row at the bottom of the panel; the thread/composer scroll above it). Hidden by default and outside the compact panels; JS reveals it when the cart has items. */ .aise-widget-checkout { display: none; } .aise-root[data-ui="widget"] .aise-widget-checkout, .aise-root[data-ui="rail"] .aise-widget-checkout { display: block; padding: 14px 16px; text-align: center; background: var(--aise-accent); color: #fff !important; text-decoration: none; font-weight: 600; border-top: 1px solid var(--aise-border); } .aise-root[data-ui="widget"] .aise-widget-checkout:hover, .aise-root[data-ui="rail"] .aise-widget-checkout:hover { background: var(--aise-accent-2); } .aise-root[data-ui="widget"] .aise-widget-checkout[hidden], .aise-root[data-ui="rail"] .aise-widget-checkout[hidden] { display: none; } /* Tighter thread/composer gutters for the narrow panels. */ .aise-root[data-ui="widget"] .aise-thread, .aise-root[data-ui="rail"] .aise-thread { padding: 12px 0; } .aise-root[data-ui="widget"] .aise-welcome, .aise-root[data-ui="rail"] .aise-welcome { margin-top: 4vh; } .aise-root[data-ui="widget"] .aise-welcome h2, .aise-root[data-ui="rail"] .aise-welcome h2 { font-size: 20px; } /* Compact product cards: smaller images and tighter type to suit the panels. */ .aise-root[data-ui="widget"] .aise-products, .aise-root[data-ui="rail"] .aise-products { grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) ); gap: 8px; margin-top: 10px; } .aise-root[data-ui="widget"] .aise-product-info, .aise-root[data-ui="rail"] .aise-product-info { padding: 8px 9px; gap: 2px; } .aise-root[data-ui="widget"] .aise-product-name, .aise-root[data-ui="rail"] .aise-product-name { font-size: 12px; } .aise-root[data-ui="widget"] .aise-product-price, .aise-root[data-ui="rail"] .aise-product-price { font-size: 12px; } .aise-root[data-ui="widget"] .aise-product-actions, .aise-root[data-ui="rail"] .aise-product-actions { padding: 0 9px 9px; } .aise-root[data-ui="widget"] .aise-btn, .aise-root[data-ui="rail"] .aise-btn { font-size: 12px; padding: 6px 8px; } /* ---------- Widget interface (docked chatbot panel, bottom-right) ---------- A compact floating window; the launcher opens it just above itself. */ .aise-root[data-ui="widget"] .aise-app { position: fixed; inset: auto; right: 24px; bottom: 96px; width: 400px; max-width: calc( 100vw - 32px ); height: 640px; max-height: calc( 100vh - 120px ); border: 1px solid var(--aise-border); border-radius: 16px; box-shadow: 0 24px 60px rgba( 15, 23, 42, 0.28 ); } /* ---------- Rail interface (resizable full-height side panel) ---------- Docked to the right edge, full height. The page is pushed left (html gets a right margin equal to the panel width) so the store stays fully visible and usable — nothing is covered. Width is driven by the --aise-rail-w custom property, which the drag handle updates and JS persists. */ .aise-root[data-ui="rail"] .aise-app { position: fixed; inset: 0 0 0 auto; width: var( --aise-rail-w, 420px ); max-width: 100vw; height: 100%; border-left: 1px solid var(--aise-border); box-shadow: -12px 0 40px rgba( 15, 23, 42, 0.12 ); transition: width 0.18s ease; } /* Push the page aside while the rail is open. */ html.aise-rail-open { margin-right: var( --aise-rail-w, 420px ); } @media ( min-width: 769px ) { html.aise-rail-open { transition: margin-right 0.18s ease; } } /* While dragging, kill transitions (so the panel tracks the cursor) and stop the page from selecting text. */ html.aise-rail-resizing { user-select: none; } html.aise-rail-resizing.aise-rail-open { transition: none; } /* The panel lives in the widget's Shadow DOM, which a light-DOM `html…` selector cannot reach, so its resizing state is mirrored as [data-resizing] on .aise-root (set by chat.js) and matched entirely inside the shadow tree. */ .aise-root[data-ui="rail"][data-resizing] .aise-app { transition: none; } /* Drag handle on the panel's left edge. Hidden outside the rail interface. */ .aise-resize { display: none; } .aise-root[data-ui="rail"] .aise-resize { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; z-index: 10; cursor: ew-resize; touch-action: none; } .aise-root[data-ui="rail"] .aise-resize::after { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 44px; transform: translateY( -50% ); border-radius: 3px; background: var(--aise-border); transition: background 0.12s ease; } .aise-root[data-ui="rail"] .aise-resize:hover::after, .aise-root[data-ui="rail"] .aise-resize:focus-visible::after { background: var(--aise-accent); } /* ---------- Mobile ---------- */ @media ( max-width: 768px ) { /* On small screens the docked panel expands to (almost) fill the viewport, like the full-screen app, so it stays usable. */ .aise-root[data-ui="widget"] .aise-app { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border: 0; border-radius: 0; } /* The side panel can't push a phone-width layout: it becomes a full-width overlay and the resize handle is disabled. */ .aise-root[data-ui="rail"] .aise-app { width: 100vw; max-width: 100vw; border-left: 0; box-shadow: none; } html.aise-rail-open { margin-right: 0; } .aise-root[data-ui="rail"] .aise-resize { display: none; } .aise-app, .aise-app[data-sidebar="closed"] { grid-template-columns: 1fr; } .aise-sidebar { position: absolute; inset: 0 auto 0 0; width: 260px; z-index: 5; box-shadow: 0 0 40px rgba( 0, 0, 0, 0.25 ); } .aise-app[data-sidebar="closed"] .aise-sidebar { transform: translateX( -100% ); } .aise-sidebar { transition: transform 0.2s ease; } /* Cart becomes a bottom drawer on small screens rather than a side column. */ .aise-cart { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: auto; max-height: 55vh; border-left: 0; border-top: 1px solid var(--aise-border); box-shadow: 0 -8px 30px rgba( 0, 0, 0, 0.18 ); z-index: 6; } } /* ---------- Dark mode ---------- Applies to every palette except "custom" (whose colors are used exactly as the admin chose). Only neutrals flip; the palette accent carries into dark. */ @media ( prefers-color-scheme: dark ) { .aise-root:not([data-palette="custom"]) { --aise-bg: #0f172a; --aise-panel: #1e293b; --aise-fg: #e2e8f0; --aise-muted: #94a3b8; --aise-border: #1e293b; --aise-bot: #1e293b; --aise-sidebar-bg: #0b1120; } } @media ( prefers-reduced-motion: reduce ) { .aise-product, .aise-sidebar { transition: none; } }