/* ========================================================================== HankoX LiveChat mascot launcher Built to HankoX_LiveChat_Design_Spec.docx. Drop-in, no dependencies. Every number below comes straight from the spec sheet. ========================================================================== */ :root { /* Set --hx-page-bg to the colour of the page BEHIND the widget. The status dot uses it for its 2px ring so the dot reads as a cut-out. */ --hx-page-bg: #F2F3F8; /* Height of the mobile bottom tab bar in CSS px. Spec: the widget sits 28px ABOVE the tab bar. Set to 0 if the CRM has no bottom tab bar. */ --hx-tabbar: 0px; --hx-z: 2147483000; } /* Dark CRM theme: add data-hx-theme="dark" on or set --hx-page-bg. */ [data-hx-theme="dark"] { --hx-page-bg: #0B1120; } /* ---------- root ---------- */ .hx-chat { position: fixed; right: 32px; /* spec: desktop 32px from the right */ bottom: 28px; /* spec: desktop 28px from the bottom */ z-index: var(--hx-z); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } .hx-chat[hidden] { display: none !important; } /* ---------- 1. IDLE: 64px circular avatar ---------- */ .hx-fab { position: relative; display: block; width: 64px; /* spec: desktop 64px */ height: 64px; padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; background: #111827; /* spec: avatar fill */ box-shadow: 0 10px 24px rgba(0, 0, 0, .45); /* spec */ cursor: pointer; overflow: visible; transition: transform .18s ease, box-shadow .18s ease; } .hx-fab:hover { transform: translateY(-2px) scale(1.04); } .hx-fab:active { transform: translateY(0) scale(.98); } .hx-fab:focus-visible { outline: 3px solid #22D3EE; outline-offset: 3px; } .hx-fab img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* status dot: 14px #34D399 with a 2px page-colour ring */ .hx-fab::after { content: ""; position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: #34D399; border: 2px solid var(--hx-page-bg); box-sizing: content-box; } /* ---------- 2. GREETING: full-body mascot + pill + badge ---------- */ .hx-greet { position: relative; display: none; cursor: pointer; } .hx-chat[data-state="greeting"] .hx-greet { display: block; } .hx-chat[data-state="greeting"] .hx-fab { display: none; } .hx-greet img.hx-body { display: block; height: 230px; /* spec: desktop full body ~230px tall */ width: auto; /* Light theme: a soft DARK drop shadow, not a glow. On a light page a cyan glow washes out and the white T-shirt loses its edge. */ filter: drop-shadow(0 6px 12px rgba(15, 23, 42, .28)); } [data-hx-theme="dark"] .hx-greet img.hx-body { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)); } /* notification badge on the head */ .hx-badge { position: absolute; top: 6%; /* head height, measured on the asset */ right: 8.4%; transform: translate(50%, -50%); min-width: 22px; /* spec: desktop min 22px */ height: 22px; padding: 0 6px; border-radius: 11px; background: #E5484D; /* spec */ border: 2px solid var(--hx-page-bg); color: #fff; font: 700 12px/20px inherit; text-align: center; } /* "Need help? Chat with us" pill, at shoulder height, left of the mascot */ .hx-pill { position: absolute; top: 30%; /* spec: shoulder height */ right: calc(100% + 10px); transform: translateY(-50%); white-space: nowrap; /* max-content: the pill is absolutely positioned inside a 64-98px wide wrapper, so without this it would shrink-wrap to the mascot's width. */ width: max-content; background: #FFFFFF; color: #0F172A; /* spec */ border-radius: 26px; /* spec */ padding: 12px 20px; /* spec */ font-size: 15px; /* spec */ font-weight: 600; /* Light theme: the pill needs a hairline border + shadow or it disappears into a light page. Harmless on dark. */ border: 1px solid #E3E8F0; box-shadow: 0 8px 24px rgba(15, 23, 42, .16); } /* entrance */ .hx-chat[data-state="greeting"] .hx-greet { animation: hx-pop .28s ease-out both; } @keyframes hx-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } /* ---------- 3. MOBILE (spec breakpoint) ---------- */ @media (max-width: 640px) { .hx-chat { right: 16px; /* spec: mobile 16px */ bottom: calc(28px + var(--hx-tabbar)); /* spec: 28px ABOVE the tab bar */ } .hx-fab { width: 56px; height: 56px; } /* spec: mobile 56px */ .hx-fab::after { width: 12px; height: 12px; } /* spec: 150px tall, max 140 wide. The asset is 64px wide at 150 tall, so height alone stays inside the cap and keeps the pill and badge anchored. */ .hx-greet img.hx-body { height: 150px; } .hx-badge { min-width: 20px; height: 20px; border-radius: 10px; font-size: 11px; line-height: 18px; } .hx-pill { white-space: normal; max-width: 150px; /* spec */ font-size: 13px; /* spec */ padding: 10px 14px; line-height: 1.25; } } /* ---------- a11y ---------- */ @media (prefers-reduced-motion: reduce) { .hx-fab, .hx-chat[data-state="greeting"] .hx-greet { transition: none; animation: none; } }