/* Keepr public chat assistant (Phase 1b) — floating launcher + panel. Brand accent: brisk-blue #67b7dc (matches marketing pages). */ .kchat-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 99990; display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 28px; padding: 12px 18px; background: #0f1426; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .kchat-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .kchat-launcher-icon { font-size: 18px; line-height: 1; } /* The global `* { color: var(--color-text) }` rule colours inner s directly, which beats inherited colour. Re-assert white on the widget's text spans (a class selector outranks the universal selector — no !important needed). */ .kchat-launcher-text, .kchat-launcher-icon, .kchat-title, .kchat-launcher-dismiss { color: #fff; } .kchat-launcher-dismiss { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; font-size: 17px; line-height: 1; opacity: .55; } .kchat-launcher-dismiss:hover { opacity: 1; } .kchat-launcher--hidden { opacity: 0; pointer-events: none; transform: scale(0.9); } /* Stand down while a full-screen modal owns the viewport. The post-trial downgrade modal (post-trial-notice.css) puts `.ptn-open` on and sits at z-index 10050; the launcher/panel are far above it (99990/99991), so without this they'd float over the modal's dimmed backdrop. */ body.ptn-open .kchat-launcher, body.ptn-open .kchat-panel { display: none !important; } .kchat-panel { position: fixed; right: 22px; bottom: 22px; z-index: 99991; width: 380px; max-width: calc(100vw - 44px); height: 560px; max-height: calc(100vh - 44px); display: flex; flex-direction: column; /* No background here on purpose — the header (navy), body and footer each paint their own bg. A panel bg leaks white through the rounded corners when the GPU compositor doesn't clip the transformed panel cleanly. */ border-radius: 14px; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28); opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } /* Animate in from transl/scale, but settle on `transform: none` — a lingering transform (even identity scale(1)) keeps a GPU compositing layer, and Chrome then leaks the panel's white background through the rounded corners behind the navy header. Resetting to none restores correct overflow:hidden clipping. (Transitions interpolate none as the identity matrix, so the animation still plays.) */ .kchat-panel--open { opacity: 1; transform: none; pointer-events: auto; } .kchat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #0f1426; color: #fff; /* Match the panel's corner radius so the navy fills the rounded corner — the panel keeps a transform for its open animation, which can stop overflow:hidden from clipping children cleanly, letting the white panel bg show through at the top corners. */ border-top-left-radius: 14px; border-top-right-radius: 14px; } .kchat-title { font-size: 16px; font-weight: 600; } .kchat-close { border: none; background: transparent; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: 0.85; } .kchat-close:hover { opacity: 1; } .kchat-body { flex: 1; overflow-y: auto; padding: 16px; background: #f7f9fb; } .kchat-msg { display: flex; margin-bottom: 12px; } .kchat-msg--user { justify-content: flex-end; } .kchat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: normal; word-wrap: break-word; } .kchat-msg--bot .kchat-bubble { background: #fff; color: #2b2b2b; border: 1px solid #e6ecf1; border-bottom-left-radius: 4px; } .kchat-msg--user .kchat-bubble { background: #0f1426; color: #fff; border-bottom-right-radius: 4px; } .kchat-typing .kchat-bubble { display: inline-flex; gap: 4px; align-items: center; } .kchat-dot { width: 7px; height: 7px; border-radius: 50%; background: #b9c6d0; animation: kchat-blink 1.2s infinite ease-in-out both; } .kchat-dot:nth-child(2) { animation-delay: 0.2s; } .kchat-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes kchat-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } } .kchat-guides { margin: 2px 0 12px; } .kchat-guides-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: 5px; } .kchat-guide-link { display: block; font-size: 13px; color: #0f1426; text-decoration: none; padding: 9px 12px; background: #fff; border: 1px solid #cfe3ef; border-radius: 8px; margin-bottom: 6px; transition: background 0.15s ease; } .kchat-guide-link:hover { background: #eef6fb; } .kchat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; } .kchat-chip { border: 1px solid #cfe3ef; background: #fff; color: #0f1426; border-radius: 16px; padding: 7px 12px; font-size: 13px; cursor: pointer; transition: background 0.15s ease; } .kchat-chip:hover { background: #eef6fb; } .kchat-escalate { background: #fff; border: 1px solid #e6ecf1; border-radius: 12px; padding: 12px; margin-bottom: 12px; } .kchat-escalate-label { font-size: 13px; font-weight: 600; color: #2b2b2b; margin-bottom: 8px; } .kchat-escalate-row { display: flex; gap: 8px; } .kchat-escalate-input { flex: 1; border: 1px solid #d8e0e6; border-radius: 8px; padding: 8px 10px; font-size: 14px; } .kchat-escalate-input:focus { outline: none; border-color: #67b7dc; } .kchat-escalate-btn { border: none; background: #0f1426; color: #fff; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; } .kchat-escalate-btn:disabled { opacity: 0.6; cursor: default; } .kchat-escalate-note { font-size: 12px; color: #888; margin-top: 6px; min-height: 14px; } /* Only a status/error placeholder — collapse it while empty so there's no gap under the email row; it reappears (with its min-height) once it has text. */ .kchat-escalate-note:empty { display: none; } .kchat-escalate-done { font-size: 14px; color: #2e7d4f; } .kchat-footer { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid #e6ecf1; background: #fff; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .kchat-footer-row { display: flex; gap: 8px; } .kchat-legal { font-size: 10.5px; line-height: 1.4; color: #6b7280; text-align: center; } .kchat-legal a { color: #6b7280; text-decoration: underline; } .kchat-input { flex: 1; border: 1px solid #d8e0e6; border-radius: 22px; padding: 10px 16px; font-size: 14px; } .kchat-input:focus { outline: none; border-color: #67b7dc; } .kchat-send { border: none; background: #0f1426; color: #fff; border-radius: 22px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; } .kchat-send:disabled { opacity: 0.6; cursor: default; } /* Full-screen on small phones */ @media (max-width: 480px) { .kchat-panel { /* Anchor to the visible TOP-LEFT and size by viewport units. Anchoring right/bottom (or inset:0) mis-positions when the page has horizontal overflow — a fixed element then keys off the wider scroll area, so the bottom-right gets pushed off-screen. top-left + 100vw/vh fills the visible viewport regardless of that overflow. */ top: 0; left: 0; right: auto; bottom: auto; width: 100vw; height: 100vh; /* fallback */ height: 100dvh; /* dynamic viewport — excludes the collapsing URL bar */ max-width: none; max-height: none; border-radius: 0; } /* Full-screen on phones — square the corners to match. */ .kchat-header { border-top-left-radius: 0; border-top-right-radius: 0; } .kchat-footer { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Phone: collapse the launcher to a compact icon-only circle so the wide "Questions? Ask us" pill doesn't cover content. */ .kchat-launcher { padding: 0; width: 52px; height: 52px; border-radius: 50%; justify-content: center; right: 16px; bottom: 16px; } .kchat-launcher-text { display: none; } .kchat-launcher-icon { font-size: 22px; } .kchat-launcher-dismiss { display: none; } /* no room on the icon-only circle */ }