/* * LOBSTER_AI_SALES_LOCAL_FONTS_V230 * * Bundled locally with the module. * No external font request is made by the storefront. */ @font-face{ font-family:"Inter"; src:url("fonts/inter/Inter-Variable.ttf") format("truetype"); font-style:normal; font-weight:100 900; font-display:swap } @font-face{ font-family:"Manrope"; src:url("fonts/manrope/Manrope-Variable.ttf") format("truetype"); font-style:normal; font-weight:200 800; font-display:swap } /* * LOBSTER_AI_SALES_FONT_EUKRAINE_V212 * * Local bundled font. */ @font-face{ font-family:"Lobster e-Ukraine"; src:url("fonts/eukraine/e-Ukraine-Regular.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap } @font-face{ font-family:"Lobster e-Ukraine"; src:url("fonts/eukraine/e-Ukraine-Medium.woff2") format("woff2"); font-style:normal; font-weight:500 600; font-display:swap } @font-face{ font-family:"Lobster e-Ukraine"; src:url("fonts/eukraine/e-Ukraine-Bold.woff2") format("woff2"); font-style:normal; font-weight:700 900; font-display:swap } #lobster-ai-sales-root{--lai-bg:#fff;--lai-text:#151515;--lai-muted:#737373;--lai-line:#e8e8e8;--lai-soft:#f5f5f5;position:fixed;z-index:2147482000;right:20px;bottom:20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--lai-text);box-sizing:border-box}#lobster-ai-sales-root *{box-sizing:border-box}.lai-launch{width:58px;height:58px;border-radius:18px;border:1px solid rgba(255,255,255,.2);background:#111;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 15px 45px rgba(0,0,0,.2);transition:.2s transform,.2s border-radius}.lai-launch:hover{}.lai-launch svg{width:26px;height:26px}.lai-window{display:none;position:absolute;right:0;bottom:72px;width:min(430px,calc(100vw - 24px));height:min(690px,calc(100vh - 115px));background:var(--lai-bg);border:1px solid var(--lai-line);border-radius:24px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.2);grid-template-rows:auto 1fr auto}.lai-window.open{display:grid}.lai-header{padding:17px 18px;border-bottom:1px solid var(--lai-line);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}.lai-brand{display:flex;gap:11px;align-items:center}.lai-avatar{width:36px;height:36px;border-radius:12px;background:#111;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}.lai-name{font-weight:750;letter-spacing:-.02em}.lai-status{font-size:12px;color:var(--lai-muted);margin-top:2px}.lai-close{border:0;background:transparent;width:36px;height:36px;border-radius:12px;cursor:pointer;font-size:22px;color:#444}.lai-close:hover{background:var(--lai-soft)}.lai-body{overflow:auto;padding:18px;overscroll-behavior:contain;background:linear-gradient(#fff,#fdfdfd)}.lai-message{max-width:88%;padding:11px 13px;border-radius:16px;margin:0 0 10px;font-size:14px;line-height:1.48;white-space:pre-wrap;word-break:break-word}.lai-message.ai{background:var(--lai-soft);border-top-left-radius:6px}.lai-message.user{background:#111;color:#fff;margin-left:auto;border-top-right-radius:6px}.lai-products{display:grid;gap:9px;margin:6px 0 14px}.lai-product{display:grid;grid-template-columns:72px 1fr;gap:11px;border:1px solid var(--lai-line);border-radius:15px;padding:9px;text-decoration:none;color:inherit;background:#fff}.lai-product:hover{border-color:#cfcfcf}.lai-product-img{width:72px;height:72px;border-radius:11px;background:#f3f3f3;object-fit:contain}.lai-product-name{font-size:13px;font-weight:700;line-height:1.3;margin:2px 0 7px}.lai-product-price{font-size:14px;font-weight:800}.lai-product-old{font-size:11px;color:#8a8a8a;text-decoration:line-through;margin-left:5px}.lai-stock{font-size:11px;color:#5b7c60;margin-top:4px}.lai-stock.no{color:#9a6262}.lai-thinking{display:flex;gap:5px;align-items:center;padding:13px;width:max-content;background:var(--lai-soft);border-radius:16px;border-top-left-radius:6px;margin-bottom:10px}.lai-thinking i{width:5px;height:5px;background:#666;border-radius:50%;animation:laiDot 1.2s infinite}.lai-thinking i:nth-child(2){animation-delay:.15s}.lai-thinking i:nth-child(3){animation-delay:.3s}@keyframes laiDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.lai-footer{padding:12px;border-top:1px solid var(--lai-line);background:#fff}.lai-input-wrap{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;border:1px solid #dcdcdc;border-radius:17px;padding:6px 6px 6px 12px;background:#fff}.lai-input{border:0!important;outline:0!important;resize:none;max-height:110px;min-height:38px;padding:9px 0;font:14px/1.35 inherit;width:100%;background:transparent!important;color:var(--lai-text)!important;-webkit-text-fill-color:var(--lai-text)!important;caret-color:var(--lai-text)!important;opacity:1!important}.lai-input::placeholder{color:#999!important;-webkit-text-fill-color:#999!important;opacity:1!important}.lai-send{width:38px;height:38px;border:0;border-radius:12px;background:#111;color:#fff;display:grid;place-items:center;cursor:pointer}.lai-send:disabled{opacity:.4;cursor:default}.lai-send svg{width:17px;height:17px}.lai-footnote{text-align:center;font-size:10px;color:#aaa;margin-top:7px}.lai-error{font-size:12px;color:#9b3d3d;background:#fff0f0;padding:9px 10px;border-radius:10px;margin-bottom:10px}@media(max-width:600px){#lobster-ai-sales-root{right:12px;bottom:12px}.lai-launch{width:56px;height:56px;border-radius:17px}.lai-window{position:fixed;inset:0;width:100vw;height:100dvh;max-height:none;border-radius:0;border:0}.lai-header{padding-top:max(16px,env(safe-area-inset-top))}.lai-footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}.lai-body{padding:15px}.lai-message{max-width:92%;font-size:15px}} /* LOBSTER_AI_SALES_LAUNCH_V103 */ #lobster-ai-sales-root .lai-launch{ width:58px!important; min-width:58px!important; max-width:58px!important; height:58px!important; min-height:58px!important; max-height:58px!important; padding:0!important; margin:0!important; border-radius:50%!important; aspect-ratio:1 / 1!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.14)!important; background:#111!important; color:#fff!important; box-shadow: 0 10px 30px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.12)!important; transform:none; } #lobster-ai-sales-root .lai-launch:hover{ } #lobster-ai-sales-root .lai-launch svg{ display:block!important; width:27px!important; height:27px!important; min-width:27px!important; min-height:27px!important; margin:0!important; padding:0!important; flex:none!important; } @media(max-width:600px){ #lobster-ai-sales-root .lai-launch{ width:56px!important; min-width:56px!important; max-width:56px!important; height:56px!important; min-height:56px!important; max-height:56px!important; } } /* LOBSTER_WIDGET_MOBILE_V105 */ @media(max-width:600px){ /* * Use the browser's actual visible viewport rather than * only layout/dynamic viewport units. This keeps the * header, messages and input visible above the keyboard. */ #lobster-ai-sales-root .lai-window{ position:fixed!important; top:var(--lai-vv-top,0px)!important; left:var(--lai-vv-left,0px)!important; right:auto!important; bottom:auto!important; width:var(--lai-vv-width,100vw)!important; height:var(--lai-vv-height,100dvh)!important; max-height:var(--lai-vv-height,100dvh)!important; min-height:0!important; overflow:hidden!important; } /* * Critical inside CSS Grid: allows the middle messages * area to actually shrink when the keyboard appears. */ #lobster-ai-sales-root .lai-body{ min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; } #lobster-ai-sales-root .lai-header{ min-height:0!important; flex-shrink:0!important; } #lobster-ai-sales-root .lai-footer{ min-height:0!important; flex-shrink:0!important; padding-bottom:max( 12px, env(safe-area-inset-bottom) )!important; } /* * iOS Safari zooms focused form fields below 16px. * 16px prevents that viewport jump. */ #lobster-ai-sales-root .lai-input{ font-size:16px!important; line-height:1.35!important; } } /* LOBSTER_WIDGET_CUSTOM_V1061 */ #lobster-ai-sales-root{ --lai-accent:#111111; --lai-accent-text:#ffffff; } #lobster-ai-sales-root .lai-launch, #lobster-ai-sales-root .lai-avatar, #lobster-ai-sales-root .lai-message.user, #lobster-ai-sales-root .lai-send{ background:var(--lai-accent)!important; color:var(--lai-accent-text)!important; } #lobster-ai-sales-root .lai-thinking i{ background:var(--lai-accent)!important; } #lobster-ai-sales-root .lai-input-wrap:focus-within{ border-color:var(--lai-accent)!important; } #lobster-ai-sales-root .lai-product:hover{ border-color:var(--lai-accent)!important; } #lobster-ai-sales-root .lai-icon-img{ display:block!important; width:30px!important; height:30px!important; min-width:30px!important; min-height:30px!important; max-width:30px!important; max-height:30px!important; object-fit:contain!important; border-radius:7px!important; } #lobster-ai-sales-root .lai-avatar svg{ width:21px!important; height:21px!important; } #lobster-ai-sales-root .lai-avatar .lai-icon-img{ width:22px!important; height:22px!important; min-width:22px!important; min-height:22px!important; max-width:22px!important; max-height:22px!important; } /* ========================================================= * LOBSTER_AI_SALES_UI_V220_DESIGN_LAYER * Production storefront design system. * ========================================================= */ #lobster-ai-sales-root{ --lai-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --lai-ai-font-size:15px; --lai-user-font-size:15px; --lai-heading-font-size:16px; --lai-product-title-size:13px; --lai-product-price-size:14px; --lai-header-title-size:14px; --lai-header-status-size:12px; --lai-input-font-size:14px; --lai-button-font-size:14px; --lai-launch-text-size:14px; --lai-send-icon-size:17px; --lai-launch-icon-size:27px; --lai-window-radius:24px; --lai-message-radius:16px; --lai-product-radius:15px; --lai-input-radius:17px; --lai-button-radius:12px; --lai-launch-padding-x:16px; --lai-launch-padding-y:10px; --lai-launch-gap:7px; --lai-desktop-offset-x:20px; --lai-desktop-offset-y:20px; --lai-mobile-offset-x:12px; --lai-mobile-offset-y:12px; --lai-launch-gradient-start:#111111; --lai-launch-gradient-end:#5555ff; --lai-launch-gradient-angle:135deg; --lai-launch-gradient-text:#ffffff; --lai-launch-text-color:#ffffff; font-family: var(--lai-font-family)!important } /* ========================= * DESKTOP POSITION * ========================= */ #lobster-ai-sales-root[ data-lai-desktop-position="bottom_right" ]{ right:var(--lai-desktop-offset-x)!important; left:auto!important; bottom:var(--lai-desktop-offset-y)!important; top:auto!important } #lobster-ai-sales-root[ data-lai-desktop-position="bottom_left" ]{ left:var(--lai-desktop-offset-x)!important; right:auto!important; bottom:var(--lai-desktop-offset-y)!important; top:auto!important } #lobster-ai-sales-root[ data-lai-desktop-position="center_right" ]{ right:var(--lai-desktop-offset-x)!important; left:auto!important; top:calc(50% - 24px)!important; bottom:auto!important } #lobster-ai-sales-root[ data-lai-desktop-position="center_left" ]{ left:var(--lai-desktop-offset-x)!important; right:auto!important; top:calc(50% - 24px)!important; bottom:auto!important } /* Window direction for left launcher */ #lobster-ai-sales-root[ data-lai-desktop-position="bottom_left" ] .lai-window{ left:0!important; right:auto!important } /* * Center-side launchers open a viewport-centered * chat window rather than pushing it outside screen. */ #lobster-ai-sales-root[ data-lai-desktop-position="center_right" ] .lai-window, #lobster-ai-sales-root[ data-lai-desktop-position="center_left" ] .lai-window{ position:fixed!important; top:50%!important; bottom:auto!important; transform:translateY(-50%) } #lobster-ai-sales-root[ data-lai-desktop-position="center_right" ] .lai-window{ right:var(--lai-desktop-offset-x)!important; left:auto!important } #lobster-ai-sales-root[ data-lai-desktop-position="center_left" ] .lai-window{ left:var(--lai-desktop-offset-x)!important; right:auto!important } /* ========================= * LAUNCHER * ========================= */ #lobster-ai-sales-root .lai-launch{ position:relative!important; isolation:isolate; overflow:hidden!important; color:var(--lai-accent-text)!important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease!important } #lobster-ai-sales-root .lai-launch > *{ position:relative; z-index:2 } #lobster-ai-sales-root .lai-launch:before{ content:""; position:absolute; z-index:1; inset:0; opacity:0; pointer-events:none; background: linear-gradient( var(--lai-launch-gradient-angle), var(--lai-launch-gradient-start), var(--lai-launch-gradient-end), var(--lai-launch-gradient-start) ); background-size:220% 220% } #lobster-ai-sales-root[ data-lai-launch-background="gradient" ] .lai-launch:before, #lobster-ai-sales-root[ data-lai-launch-background="gradient_animated" ] .lai-launch:before{ opacity:1 } #lobster-ai-sales-root[ data-lai-launch-background="gradient" ] .lai-launch, #lobster-ai-sales-root[ data-lai-launch-background="gradient_animated" ] .lai-launch{ color: var(--lai-launch-gradient-text)!important } @keyframes laiLaunchGradientV220{ 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } } #lobster-ai-sales-root[ data-lai-launch-background="gradient_animated" ] .lai-launch:before{ animation: laiLaunchGradientV220 4s ease infinite } /* icon only */ #lobster-ai-sales-root[ data-lai-launch-mode="icon" ] .lai-launch{ width:58px!important; min-width:58px!important; max-width:58px!important; height:58px!important; min-height:58px!important; max-height:58px!important; padding:0!important; aspect-ratio:1 / 1!important } /* icon + text */ #lobster-ai-sales-root[ data-lai-launch-mode="icon_text" ] .lai-launch{ width:max-content!important; min-width:0!important; max-width: calc(100vw - 24px)!important; height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:auto!important; padding: var(--lai-launch-padding-y) var(--lai-launch-padding-x) !important; gap: var(--lai-launch-gap) !important } #lobster-ai-sales-root .lai-launch-text{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:inherit; font-size: var(--lai-launch-text-size); line-height:1.1; font-weight:700 } /* launcher icon sizes */ #lobster-ai-sales-root .lai-launch svg{ width: var(--lai-launch-icon-size)!important; height: var(--lai-launch-icon-size)!important; min-width: var(--lai-launch-icon-size)!important; min-height: var(--lai-launch-icon-size)!important } #lobster-ai-sales-root .lai-launch .lai-icon-img{ width: var(--lai-launch-icon-size)!important; height: var(--lai-launch-icon-size)!important; min-width: var(--lai-launch-icon-size)!important; min-height: var(--lai-launch-icon-size)!important; max-width: var(--lai-launch-icon-size)!important; max-height: var(--lai-launch-icon-size)!important } /* shapes */ #lobster-ai-sales-root[ data-lai-launch-shape="square" ] .lai-launch{ border-radius:5px!important } #lobster-ai-sales-root[ data-lai-launch-shape="soft" ] .lai-launch{ border-radius:12px!important } #lobster-ai-sales-root[ data-lai-launch-shape="rounded" ] .lai-launch{ border-radius:20px!important } #lobster-ai-sales-root[ data-lai-launch-shape="pill" ] .lai-launch{ border-radius:999px!important } /* animations */ @keyframes laiLaunchPulseV220{ 0%,100%{ box-shadow: 0 10px 30px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.12) } 50%{ box-shadow: 0 10px 30px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.12), 0 0 0 8px rgba(0,0,0,.07) } } @keyframes laiLaunchFloatV220{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } } @keyframes laiLaunchAttentionV220{ 0%,65%,100%{ transform:rotate(0) } 72%{ transform:rotate(-5deg) } 79%{ transform:rotate(5deg) } 86%{ transform:rotate(-3deg) } 93%{ transform:rotate(3deg) } } #lobster-ai-sales-root[ data-lai-launch-animation="pulse" ] .lai-launch{ animation: laiLaunchPulseV220 2.2s ease-in-out infinite } #lobster-ai-sales-root[ data-lai-launch-animation="float" ] .lai-launch{ animation: laiLaunchFloatV220 2.4s ease-in-out infinite } #lobster-ai-sales-root[ data-lai-launch-animation="attention" ] .lai-launch{ animation: laiLaunchAttentionV220 1.9s ease 1.1s 1 } /* ========================= * CHAT WINDOW * ========================= */ #lobster-ai-sales-root .lai-window{ border-radius: var(--lai-window-radius)!important; box-shadow: 0 24px 70px rgba(0,0,0,.18)!important } #lobster-ai-sales-root .lai-header{ padding:15px 17px!important } #lobster-ai-sales-root .lai-name{ font-size: var(--lai-header-title-size)!important; line-height:1.25 } #lobster-ai-sales-root .lai-status{ font-size: var(--lai-header-status-size)!important; line-height:1.3 } #lobster-ai-sales-root .lai-close{ border-radius: var(--lai-button-radius)!important } /* ========================= * MESSAGES / TYPOGRAPHY * ========================= */ #lobster-ai-sales-root .lai-body{ padding:16px!important; scroll-behavior:smooth } #lobster-ai-sales-root .lai-message{ padding:10px 12px!important; margin-bottom:9px!important; border-radius: var(--lai-message-radius)!important; line-height:1.52!important; animation: laiMessageInV220 .18s ease-out both } #lobster-ai-sales-root .lai-message.ai{ max-width:92%; font-size: var(--lai-ai-font-size)!important; white-space:normal!important; border-top-left-radius:6px!important } #lobster-ai-sales-root .lai-message.user{ font-size: var(--lai-user-font-size)!important; border-top-right-radius:6px!important } @keyframes laiMessageInV220{ from{ opacity:0; transform:translateY(3px) } to{ opacity:1; transform:translateY(0) } } /* Rich AI response */ #lobster-ai-sales-root .lai-rich{ min-width:0 } #lobster-ai-sales-root .lai-rich > *:first-child{ margin-top:0!important } #lobster-ai-sales-root .lai-rich > *:last-child{ margin-bottom:0!important } #lobster-ai-sales-root .lai-rich p{ margin:0 0 8px; line-height:1.52 } #lobster-ai-sales-root .lai-rich-heading{ margin: 12px 0 6px; font-size: var(--lai-heading-font-size); line-height:1.28; font-weight:750; letter-spacing:-.01em } #lobster-ai-sales-root .lai-rich strong{ font-weight:750 } #lobster-ai-sales-root .lai-rich ul, #lobster-ai-sales-root .lai-rich ol{ margin: 7px 0 9px; padding-left:20px } #lobster-ai-sales-root .lai-rich li{ margin:4px 0; padding-left:1px; line-height:1.48 } #lobster-ai-sales-root .lai-rich code{ padding:1px 4px; border-radius:5px; background:rgba(0,0,0,.055); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.92em } /* Responsive table */ #lobster-ai-sales-root .lai-table-wrap{ width:100%; margin: 9px 0 5px; overflow-x:auto; border:1px solid var(--lai-line); border-radius: min( 12px, var(--lai-product-radius) ); background:#fff; -webkit-overflow-scrolling:touch } #lobster-ai-sales-root .lai-table{ width:100%; min-width:360px; border-collapse:collapse; font-size: max( 12px, calc( var(--lai-ai-font-size) - 2px ) ); line-height:1.35 } #lobster-ai-sales-root .lai-table th, #lobster-ai-sales-root .lai-table td{ padding:8px 9px; text-align:left; vertical-align:top; border-bottom: 1px solid var(--lai-line) } #lobster-ai-sales-root .lai-table th{ background:#fafafa; font-weight:750; white-space:nowrap } #lobster-ai-sales-root .lai-table tr:last-child td{ border-bottom:0 } /* ========================= * PRODUCT CARDS * ========================= */ #lobster-ai-sales-root .lai-products{ gap:8px!important; margin: 6px 0 13px!important } #lobster-ai-sales-root .lai-product{ position:relative; grid-template-columns: 76px minmax(0,1fr)!important; gap:11px!important; padding:9px!important; border-radius: var(--lai-product-radius)!important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease!important; animation: laiProductInV220 .2s ease-out both } #lobster-ai-sales-root .lai-product:hover{ transform:translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.07) } #lobster-ai-sales-root .lai-product:after{ content:"↗"; position:absolute; top:9px; right:10px; color:#999; font-size:13px; line-height:1 } #lobster-ai-sales-root .lai-product > div:not( .lai-product-img ){ min-width:0; padding-right:17px } #lobster-ai-sales-root .lai-product-img{ width:76px!important; height:76px!important; border-radius: max( 7px, calc( var(--lai-product-radius) - 4px ) )!important } #lobster-ai-sales-root .lai-product-name{ margin: 1px 0 6px!important; font-size: var(--lai-product-title-size)!important; line-height:1.3!important; font-weight:700!important } #lobster-ai-sales-root .lai-product-price{ font-size: var(--lai-product-price-size)!important; line-height:1.2; font-weight:800!important } #lobster-ai-sales-root .lai-product-old{ font-size: max( 10px, calc( var(--lai-product-price-size) - 3px ) )!important } @keyframes laiProductInV220{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } } /* ========================= * INPUT / SEND * ========================= */ #lobster-ai-sales-root .lai-input-wrap{ border-radius: var(--lai-input-radius)!important } #lobster-ai-sales-root .lai-input{ font-family:inherit!important; font-size: var(--lai-input-font-size)!important; line-height:1.35!important } #lobster-ai-sales-root .lai-send{ border-radius: var(--lai-button-radius)!important } #lobster-ai-sales-root .lai-send svg{ width: var(--lai-send-icon-size)!important; height: var(--lai-send-icon-size)!important } /* ========================= * MOBILE POSITION * Existing V105 fullscreen behavior stays intact. * ========================= */ @media(max-width:600px){ #lobster-ai-sales-root[ data-lai-mobile-position="bottom_right" ]{ right:var(--lai-mobile-offset-x)!important; left:auto!important; bottom:var(--lai-mobile-offset-y)!important; top:auto!important } #lobster-ai-sales-root[ data-lai-mobile-position="bottom_left" ]{ left:var(--lai-mobile-offset-x)!important; right:auto!important; bottom:var(--lai-mobile-offset-y)!important; top:auto!important } #lobster-ai-sales-root[ data-lai-mobile-position="center_right" ]{ right:var(--lai-mobile-offset-x)!important; left:auto!important; top:calc(50% - 24px)!important; bottom:auto!important } #lobster-ai-sales-root[ data-lai-mobile-position="center_left" ]{ left:var(--lai-mobile-offset-x)!important; right:auto!important; top:calc(50% - 24px)!important; bottom:auto!important } /* * V105 full-screen chat must never inherit * desktop center-window transform. */ #lobster-ai-sales-root .lai-window{ transform:none!important; border-radius:0!important } #lobster-ai-sales-root[ data-lai-launch-mode="icon" ] .lai-launch{ width:56px!important; min-width:56px!important; max-width:56px!important; height:56px!important; min-height:56px!important; max-height:56px!important } #lobster-ai-sales-root[ data-lai-launch-mode="icon_text" ] .lai-launch{ max-width: calc(100vw - 20px)!important } #lobster-ai-sales-root .lai-input{ /* * Keep iOS anti-zoom protection, * while still allowing user-selected >16px. */ font-size:16px!important; font-size: max( 16px, var(--lai-input-font-size) )!important } #lobster-ai-sales-root .lai-message.ai{ font-size: var(--lai-ai-font-size)!important } #lobster-ai-sales-root .lai-message.user{ font-size: var(--lai-user-font-size)!important } #lobster-ai-sales-root .lai-product{ grid-template-columns: 70px minmax(0,1fr)!important } #lobster-ai-sales-root .lai-product-img{ width:70px!important; height:70px!important } } /* Accessibility */ @media(prefers-reduced-motion:reduce){ #lobster-ai-sales-root *, #lobster-ai-sales-root *:before, #lobster-ai-sales-root *:after{ scroll-behavior:auto!important } #lobster-ai-sales-root .lai-launch, #lobster-ai-sales-root .lai-launch:before, #lobster-ai-sales-root .lai-message, #lobster-ai-sales-root .lai-product{ animation:none!important; transition:none!important } } /* ========================================================= * LOBSTER_AI_SALES_UI_V221_FINAL_HARDENING * ========================================================= */ /* * Launcher must match the admin preview. * * Explicitly neutralize old V103 border and theme button * borders while retaining accessible keyboard focus. */ #lobster-ai-sales-root .lai-launch{ border:0!important; outline:0!important } #lobster-ai-sales-root .lai-launch:hover{ /* * Never change transform here. * float / attention animations own transform. */ filter:brightness(1.025) } #lobster-ai-sales-root .lai-launch:focus-visible{ outline: 2px solid var(--lai-accent)!important; outline-offset:3px!important } /* * Compact legal/information note. * Do not inherit theme line heights. */ #lobster-ai-sales-root .lai-footnote{ margin-top:6px!important; font-size:10px!important; line-height:1.25!important; letter-spacing:0!important; white-space:normal!important; color:#999!important } /* * Launcher text remains independent. */ #lobster-ai-sales-root .lai-launch-text{ font-size: var(--lai-launch-text-size)!important } /* * Prevent external button themes from restoring borders. */ #lobster-ai-sales-root button.lai-launch, #lobster-ai-sales-root button.lai-launch:hover, #lobster-ai-sales-root button.lai-launch:active{ border:0!important } /* * Reduce motion remains authoritative. */ @media(prefers-reduced-motion:reduce){ #lobster-ai-sales-root .lai-launch{ filter:none!important } } /* ========================================================= * LOBSTER_AI_SALES_UI_V222_CSS_PARITY * ========================================================= */ /* * Preview and storefront use exactly the same resolved * launcher foreground color. */ #lobster-ai-sales-root .lai-launch, #lobster-ai-sales-root .lai-launch-text, #lobster-ai-sales-root .lai-launch svg{ color: var(--lai-launch-text-color) !important } /* * Keep the product image aligned to the first card row. */ #lobster-ai-sales-root .lai-product-img{ grid-column:1; grid-row:1 } /* * Main product information remains in column two. */ #lobster-ai-sales-root .lai-product > div:not(.lai-product-img){ grid-column:2; grid-row:1 } /* ========================================================= * LOBSTER_AI_SALES_UI_V224_PRODUCT_CARD_CLEAN * * The whole product card is the CTA. * No duplicated inner button. * ========================================================= */ #lobster-ai-sales-root .lai-product{ cursor:pointer } /* ========================================================= * LOBSTER_AI_SALES_MOBILE_V230 * Fullscreen + keyboard + background scroll hardening * ========================================================= */ html.lai-ai-sales-mobile-open, body.lai-ai-sales-mobile-open{ overflow:hidden!important; overscroll-behavior:none!important } @media(max-width:600px){ body.lai-ai-sales-mobile-open #lobster-ai-sales-root{ z-index:2147483000!important } body.lai-ai-sales-mobile-open #lobster-ai-sales-root .lai-window.open{ position:fixed!important; top: var(--lai-vv-top,0px) !important; left: var(--lai-vv-left,0px) !important; right:auto!important; bottom:auto!important; width: var(--lai-vv-width,100vw) !important; height: var(--lai-vv-height,100dvh) !important; min-height: var(--lai-vv-height,100dvh) !important; max-height: var(--lai-vv-height,100dvh) !important; margin:0!important; border:0!important; border-radius:0!important; background: var(--lai-bg,#fff) !important; box-shadow:none!important; overflow:hidden!important; overscroll-behavior:none!important } body.lai-ai-sales-mobile-open #lobster-ai-sales-root .lai-body{ min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch } }