* { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background: #f4f6f8; color: #17202a; } .demo-page { padding: 48px; } .launcher, .voice-launcher { position: fixed; bottom: 24px; width: 66px; height: 66px; border: 0; border-radius: 50%; background: #173a61; color: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); cursor: pointer; /* Some sites already run a different widget (e.g. an accessibility toolbar) with its own button pinned to the same bottom corner. A very high z-index keeps our button clickable on top of it instead of silently swallowing the click. */ z-index: 2147483000; } .launcher { /* Not right:24px — a pre-existing Google reviews badge on the live site sits fixed in that exact corner with a higher z-index than is safe to fight, and silently swallows clicks meant for our button. Left side is clearer, but not left:24px either — a site accessibility toolbar occupies x:0-80px in that same bottom-left corner, so we sit just past its right edge. */ left: 96px; } .voice-launcher { /* Single entry point now: the chat launcher opens text chat, and the mic button inside it starts a voice conversation. This standalone button is kept in the markup (app.js still references it) but hidden from view. */ display: none; } .chat { display: none; position: fixed; left: 96px; bottom: 104px; width: min(410px, calc(100vw - 28px)); height: min(650px, calc(100vh - 130px)); /* Without an explicit z-index, a fixed-position element only wins the stacking order against later-in-DOM page content by accident of where the site's own script-injection tool happens to place this snippet in — it lost to an ordinary product carousel image once here. Match .launcher. */ z-index: 2147483000; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24); flex-direction: column; } .chat.open { display: flex; } .chat-header, .voice-panel-header { background: #173a61; color: #fff; padding: 17px; display: flex; align-items: center; justify-content: space-between; } .chat-header strong, .chat-header span, .voice-panel-header strong, .voice-panel-header span { display: block; } .chat-header span, .voice-panel-header span { margin-top: 4px; font-size: 13px; opacity: 0.86; } .icon-button, .control-button { border: 0; background: transparent; cursor: pointer; } .chat-header .icon-button, .voice-panel-actions .icon-button { color: #fff; font-size: 24px; } .messages, .voice-transcript { flex: 1; overflow-y: auto; padding: 16px; background: #f5f7f9; } .message { max-width: 86%; padding: 11px 14px; margin-bottom: 11px; border-radius: 16px; line-height: 1.45; white-space: pre-wrap; } .message.assistant { margin-left: auto; background: #fff; } .message.user { margin-right: auto; background: #173a61; color: #fff; } .message.loading { opacity: 0.65; } .product-tray, .voice-product-tray { display: flex; gap: 10px; overflow-x: auto; padding: 0 12px 10px; background: #f5f7f9; } .product-card { min-width: 210px; max-width: 210px; background: #fff; border: 1px solid #e1e5e8; border-radius: 14px; overflow: hidden; } .product-card img { width: 100%; height: 120px; object-fit: contain; } .product-card .content { padding: 10px; } .product-card strong { display: block; font-size: 14px; } .product-card small { display: block; margin-top: 6px; color: #52606d; } .product-card button { width: 100%; margin-top: 8px; padding: 9px; border: 0; border-radius: 9px; background: #173a61; color: #fff; cursor: pointer; } .voice-panel { display: none; position: fixed; left: 96px; bottom: 104px; width: min(420px, calc(100vw - 28px)); max-height: min(680px, calc(100vh - 130px)); background: #fff; border-radius: 22px; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24); overflow: hidden; flex-direction: column; z-index: 2147483000; } .voice-panel.open { display: flex; } .voice-panel-actions { display: flex; gap: 10px; align-items: center; } .voice-status-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e8ebef; background: #f9fbfc; } .voice-status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; background: #dce7f2; color: #173a61; font-size: 13px; font-weight: 700; } .voice-status-text { font-size: 14px; color: #344054; } .voice-transcript { min-height: 170px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .voice-bubble { padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid #dbe4ec; } .voice-bubble.user { background: #173a61; color: #fff; border-color: #173a61; } .voice-bubble.assistant { background: #eef5fb; color: #17202a; } .voice-bubble.system { background: #ffffff; color: #52606d; } .voice-controls { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #e7edf2; background: #fff; } .control-button { width: 44px; height: 44px; border-radius: 50%; background: #173a61; color: #fff; font-size: 20px; } .control-button.secondary { width: auto; padding: 0 14px; border-radius: 999px; } .control-button.is-muted { background: #7c8a99; } .voice-fallback { padding: 0 16px 12px; } .voice-fallback input, .composer input { width: 100%; min-width: 0; padding: 12px; border: 1px solid #c9d0d6; border-radius: 11px; font-size: 16px; } .voice-footer-note { padding: 10px 16px 16px; color: #52606d; font-size: 13px; } .composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #ddd; } .composer input { flex: 1; } .send { border: 0; border-radius: 11px; padding: 0 16px; background: #173a61; color: #fff; cursor: pointer; } .mic { font-size: 20px; } @media (max-width: 600px) { .chat { left: 8px; bottom: 82px; width: calc(100vw - 16px); height: calc(100vh - 96px); } .voice-panel { left: 8px; bottom: 82px; width: calc(100vw - 16px); max-height: calc(100vh - 96px); } .launcher, .voice-launcher { left: 84px; bottom: 14px; width: 56px; height: 56px; } }