/* * Live chat — client side (portal panel + public widget). * * Namespaced under .hsc-* and deliberately self-isolating: the widget is * injected into standalone marketing pages that bring their own CSS, including * a dark palette and inherited text colours. Every colour, size and box model * here is stated explicitly rather than inherited, or the form ends up as pale * text on a pale field. */ #hsChatWidget, #hsChatPanel { --hc-brand: #ff8a00; --hc-brand-2: #feb800; --hc-ink: #1f2430; --hc-muted: #6b7280; --hc-line: #e3e6ec; --hc-canvas: #f6f7f9; --hc-surface: #ffffff; --hc-me: #ffe9c9; --hc-danger: #d64545; font-size: 14px; line-height: 1.6; color: var(--hc-ink); text-align: start; } /* The host page's reset must not leak into the widget's boxes. */ #hsChatWidget *, #hsChatWidget *::before, #hsChatWidget *::after, #hsChatPanel *, #hsChatPanel *::before, #hsChatPanel *::after { box-sizing: border-box; } /* ------------------------------------------------------------ conversation */ .hsc-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; background: var(--hc-canvas); min-height: 180px; } /* The way back into a thread's history, at the top of what is loaded. */ .hsc-older { display: flex; justify-content: center; padding: 4px 0 8px; } .hsc-older-btn { border: 1px solid #dfe3e8; background: #fff; color: #2f6fb0; border-radius: 13px; padding: 3px 12px; font-size: 12px; font-family: inherit; cursor: pointer; } .hsc-older-btn:hover { background: #f4f7fb; } .hsc-older-btn[disabled] { opacity: .55; cursor: default; } .hsc-day { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; color: var(--hc-muted); font-size: 12px; } .hsc-day::before, .hsc-day::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--hc-line); } .hsc-msg { display: flex; margin-bottom: 10px; animation: hsc-in .18s ease-out; } /* Consecutive messages from the same sender read as one block. */ .hsc-msg.grouped { margin-bottom: 3px; } @keyframes hsc-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hsc-msg { animation: none; } } /* * One's own messages on the physical right, in either language — the same * arrangement the staff inbox uses, and the one everybody knows from * WhatsApp, where the side a bubble sits on is a fixed place rather than a * property of the writing direction. * * flex-end reaches the right only in a left-to-right page, so the RTL case is * stated separately rather than left to a logical property that would quietly * mirror it back. */ .hsc-msg.from-me { justify-content: flex-end; } /* * Both signals: the pages this widget sits on go right-to-left through a class * on rather than a dir attribute, so the attribute alone matches * nothing there. */ [dir="rtl"] .hsc-msg.from-me, body.rtl .hsc-msg.from-me { justify-content: flex-start; } [dir="rtl"] .hsc-msg.from-staff, body.rtl .hsc-msg.from-staff { justify-content: flex-end; } /* The squared-off corner marks the speaker's side, so it moves with them. */ [dir="rtl"] .hsc-msg.from-me .hsc-bubble, body.rtl .hsc-msg.from-me .hsc-bubble { border-start-end-radius: 14px; border-start-start-radius: 4px; } [dir="rtl"] .hsc-msg.from-staff .hsc-bubble, body.rtl .hsc-msg.from-staff .hsc-bubble { border-start-start-radius: 14px; border-start-end-radius: 4px; } .hsc-msg.from-system { justify-content: center; } .hsc-bubble { display: inline-block; max-width: 82%; padding: 9px 13px; border-radius: 14px; background: var(--hc-surface); border: 1px solid var(--hc-line); color: var(--hc-ink); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; text-align: start; } .hsc-msg.from-me .hsc-bubble { background: var(--hc-me); border-color: #ffdcaa; border-start-end-radius: 4px; } .hsc-msg.from-staff .hsc-bubble { border-start-start-radius: 4px; } .hsc-msg.from-system .hsc-bubble { background: #fff9db; border-color: #ffec99; color: #8a6d0b; font-size: 12.5px; } .hsc-meta { display: block; margin-top: 4px; font-size: 11.5px; color: var(--hc-muted); } .hsc-att img { max-width: 190px; max-height: 190px; display: block; border-radius: 9px; margin-bottom: 5px; background: var(--hc-line); } .hsc-att a { display: inline-block; margin-bottom: 5px; font-size: 12.5px; color: #b45309; text-decoration: underline; } .hsc-typing { min-height: 22px; padding: 0 14px 6px; font-size: 12px; color: var(--hc-muted); background: var(--hc-canvas); } .hsc-typing:empty { padding-bottom: 0; } .hsc-dots { display: inline-flex; gap: 3px; margin-inline-end: 6px; vertical-align: middle; } .hsc-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--hc-muted); animation: hsc-blink 1.3s infinite ease-in-out; } .hsc-dots i:nth-child(2) { animation-delay: .18s; } .hsc-dots i:nth-child(3) { animation-delay: .36s; } @keyframes hsc-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } /* Shown in the portal panel before the first message is sent. */ .hsc-empty { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 24px; text-align: center; color: #9aa1ad; font-size: 13.5px; background: var(--hc-canvas); } .hsc-empty svg { width: 40px; height: 40px; opacity: .4; } /* ---------------------------------------------------------------- composer */ /* ------------------------------------------------------------- replying */ .hsc-msg { position: relative; } /* Hidden until the bubble is hovered, and always faintly visible on a touch screen, where there is no hover to reveal it with. */ .hsc-reply-btn { align-self: center; border: 0; background: none; padding: 2px 5px; color: #868e96; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .12s; } .hsc-msg:hover .hsc-reply-btn { opacity: 1; } @media (hover: none) { .hsc-reply-btn { opacity: .55; } } .hsc-quote { display: block; margin-bottom: 5px; padding: 4px 8px; border-inline-start: 3px solid currentColor; border-radius: 5px; background: rgba(0, 0, 0, .06); font-size: 12.5px; line-height: 1.45; cursor: pointer; } .hsc-quote-who { display: block; font-weight: 700; margin-bottom: 1px; } .hsc-quote-text { /* Two lines is enough to recognise it; the original is one tap away. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .8; } /* Read receipts, beside the clock on one's own messages. Quiet while it only says "sent"; it earns its colour when it turns to seen. */ .hsc-tick { margin-inline-start: 5px; font-style: normal; font-size: 11.5px; font-weight: 700; opacity: .6; letter-spacing: -2px; } /* Blue for "seen", the colour everybody already reads that way. Deep rather than pale: this bubble is cream, where a pale blue disappears. */ .hsc-tick.is-seen { opacity: 1; color: #155a99; letter-spacing: -3px; } /* * The attention bell, across the thread rather than in a bubble. Amber rather * than red: it is somebody asking for attention, not something going wrong. */ .hsc-redacted { text-align: center; margin: 10px auto; padding: 5px 14px; max-width: 85%; border: 1px dashed #d3d7dd; border-radius: 12px; background: #f6f7f9; color: #8a919b; font-size: 12px; font-style: italic; } .hsc-nudge { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px auto; padding: 7px 12px; max-width: 90%; border: 1px solid #ffd8a8; border-radius: 10px; background: #fff4e6; color: #a8580a; font-size: 12px; line-height: 1.5; text-align: center; } .hsc-nudge-bell { font-size: 14px; animation: hsc-ring .9s ease-in-out 2; } @keyframes hsc-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-9deg); } 80% { transform: rotate(5deg); } } @media (prefers-reduced-motion: reduce) { .hsc-nudge-bell { animation: none; } } .hsc-msg.is-flash .hsc-bubble { animation: hsc-flash 1.2s ease-out; } @keyframes hsc-flash { 0%, 60% { box-shadow: 0 0 0 3px rgba(76, 110, 245, .35); } 100% { box-shadow: none; } } .hsc-reply-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 5px 9px; border-inline-start: 3px solid var(--hc-brand, #4c6ef5); border-radius: 7px; background: #f1f3f5; font-size: 11.5px; line-height: 1.4; color: #495057; } .hsc-reply-bar .hsc-quote-who { flex: 0 0 auto; } .hsc-reply-bar .hsc-quote-text { flex: 1 1 auto; min-width: 0; } .hsc-reply-cancel { flex: 0 0 auto; border: 0; background: none; color: #868e96; font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; } .hsc-composer { border-top: 1px solid var(--hc-line); padding: 9px 10px; background: var(--hc-surface); } .hsc-composer-row { display: flex; gap: 6px; align-items: flex-end; } .hsc-input { flex: 1 1 auto; min-width: 0; resize: none; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--hc-ink); background: var(--hc-canvas); padding: 9px 12px; border: 1px solid var(--hc-line); border-radius: 18px; max-height: 110px; } .hsc-input:focus { outline: none; background: var(--hc-surface); border-color: var(--hc-brand); } .hsc-send { flex: 0 0 auto; border: 0; border-radius: 18px; background: var(--hc-brand); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; padding: 10px 18px; cursor: pointer; transition: filter .15s; } .hsc-send:hover:not(:disabled) { filter: brightness(1.07); } .hsc-send:disabled { opacity: .55; cursor: default; } .hsc-block { display: block; width: 100%; margin-top: 6px; padding: 12px 18px; border-radius: 10px; font-size: 14px; } .hsc-attach { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; border-radius: 50%; color: var(--hc-muted); font-size: 16px; cursor: pointer; transition: background .15s; } .hsc-attach:hover { background: var(--hc-canvas); color: var(--hc-ink); } .hsc-file { display: none; } .hsc-chip { display: none; align-items: center; gap: 8px; margin-bottom: 6px; padding: 5px 10px; border-radius: 8px; background: #fff4e5; color: #b45309; font-size: 12.5px; } .hsc-chip-x { color: var(--hc-danger); text-decoration: none; font-size: 16px; line-height: 1; cursor: pointer; } /* ----------------------------------------------------------- pre-chat form */ .hsc-intro { flex: 1 1 auto; overflow-y: auto; padding: 16px; background: var(--hc-surface); } .hsc-intro-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--hc-ink); } .hsc-intro-sub { display: block; margin-bottom: 14px; font-size: 12.5px; color: var(--hc-muted); } .hsc-field { display: block; width: 100%; margin-bottom: 10px; padding: 11px 13px; border: 1px solid var(--hc-line); border-radius: 10px; font-family: inherit; font-size: 13.5px; line-height: 1.5; color: var(--hc-ink); background: var(--hc-surface); } .hsc-field::placeholder { color: #9aa1ad; opacity: 1; } .hsc-field:focus { outline: none; border-color: var(--hc-brand); box-shadow: 0 0 0 3px rgba(255, 138, 0, .15); } textarea.hsc-field { resize: vertical; min-height: 76px; } .hsc-captcha { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px; border: 1px solid var(--hc-line); border-radius: 10px; background: var(--hc-canvas); } .hsc-captcha img { max-width: 140px; height: auto; border-radius: 6px; display: block; } .hsc-captcha-reload { margin-inline-start: auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 17px; line-height: 1; color: var(--hc-muted); text-decoration: none; cursor: pointer; transition: background .15s; } .hsc-captcha-reload:hover { background: #e9ecef; color: var(--hc-ink); } .hsc-error { min-height: 16px; margin-bottom: 2px; font-size: 12.5px; color: var(--hc-danger); } /* --------------------------------------------------------- portal panel mount */ #hsChatPanel { display: flex; flex-direction: column; height: 520px; background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: 12px; overflow: hidden; } /* -------------------------------------------------------------- website widget */ /* * Bottom-right, where people look for a chat launcher. * * Physical rather than logical: this corner is a convention users carry between * sites, not something that should flip with the text direction. */ #hsChatWidget { position: fixed; bottom: 20px; right: 20px; z-index: 99998; } /* * Once it has been dragged somewhere, the corner it started in stops applying. * left/top are set inline in pixels — physical, so a saved position does not * jump across the screen when the language changes. */ #hsChatWidget.is-placed { inset-block-end: auto; inset-inline-end: auto; bottom: auto; right: auto; } /* * The window opens away from the nearest edge, so wherever the launcher has * been put the conversation stays on screen rather than half off it. */ #hsChatWidget.opens-down .hsc-window { bottom: auto; top: 70px; } #hsChatWidget.opens-left .hsc-window { right: auto; left: 0; } /* * The greeting above the launcher: one line, risen softly out of the corner a * moment after the page settles. Absolute inside the mount, so it follows the * launcher wherever it has been dragged, and physical like the corner itself. */ .hsc-teaser { position: absolute; bottom: 68px; right: 0; /* Wide enough for the line whole; on a small screen it wraps rather than spilling out of the bubble across the page, which is what nowrap did. */ width: max-content; max-width: min(300px, 78vw); display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: #fff; color: #24303c; font-size: 13.5px; font-weight: 600; line-height: 1.45; border-radius: 14px; box-shadow: 0 8px 28px rgba(15, 25, 40, .18); cursor: pointer; /* Hidden side of the transition: low, transparent, and not clickable. */ opacity: 0; transform: translateY(10px) scale(.95); transform-origin: bottom right; pointer-events: none; transition: opacity .45s ease, transform .45s cubic-bezier(.18, .89, .32, 1.18); } .hsc-teaser.is-shown { opacity: 1; transform: none; pointer-events: auto; } /* The tail, pointing down at the launcher it speaks for. */ .hsc-teaser::after { content: ''; position: absolute; bottom: -5px; right: 22px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); border-radius: 2px; box-shadow: 3px 3px 8px rgba(15, 25, 40, .06); } /* When the launcher has been dragged near the top, speak from below it. */ #hsChatWidget.opens-down .hsc-teaser { bottom: auto; top: 68px; transform-origin: top right; } #hsChatWidget.opens-down .hsc-teaser::after { bottom: auto; top: -5px; } .hsc-teaser-close { border: 0; background: none; padding: 0 2px; color: #98a2ad; font-size: 16px; line-height: 1; cursor: pointer; } .hsc-teaser-close:hover { color: #24303c; } @media (prefers-reduced-motion: reduce) { .hsc-teaser { transition: opacity .3s ease; transform: none; } } .hsc-launcher { position: relative; width: 56px; height: 56px; /* The browser must not claim the gesture for scrolling before we see it. */ touch-action: none; cursor: grab; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--hc-brand-2), var(--hc-brand)); color: #fff; font-size: 25px; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); transition: transform .15s; } /* The balloon inside the launcher, centred and sized to the button. */ .hsc-launcher-icon { display: block; width: 27px; height: 27px; margin: 0 auto; pointer-events: none; } .hsc-launcher:hover { transform: scale(1.06); } /* No grow-on-hover while being dragged: it fights the pointer. */ #hsChatWidget.is-dragging .hsc-launcher, #hsChatWidget.is-dragging .hsc-launcher:hover { cursor: grabbing; transform: none; transition: none; } .hsc-dot { display: none; position: absolute; inset-block-start: -3px; inset-inline-end: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e03131; color: #fff; font-size: 11px; line-height: 20px; font-weight: 700; } .hsc-window { display: none; flex-direction: column; position: absolute; /* Physical, to stay anchored above the launcher — see #hsChatWidget. */ bottom: 70px; right: 0; width: 340px; max-width: calc(100vw - 40px); height: 480px; max-height: calc(100vh - 120px); background: var(--hc-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 14px 44px rgba(0, 0, 0, .32); } /* The pre-chat form is a fixed set of fields, so the window takes the height that form needs instead of a settled 480px it did not fit inside — a scrollbar down the side of a form with nothing below the button reads as though something is missing. max-height still applies, so on a short screen it scrolls rather than growing past the viewport. Higher specificity than the rules that set a height, including the phone breakpoint, so source order does not matter. */ .hsc-window.is-intro { height: auto; } .hsc-window.is-open { display: flex; animation: hsc-pop .16s ease-out; } @keyframes hsc-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hsc-window.is-open { animation: none; } } .hsc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: linear-gradient(135deg, var(--hc-brand-2), var(--hc-brand)); color: #fff; font-size: 14.5px; font-weight: 700; } .hsc-head-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* * Whether somebody is at the desk, under the title. Hidden until the server * has actually said — a presence line that guesses is worse than none. */ .hsc-presence { display: none; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; opacity: .95; } .hsc-presence.on, .hsc-presence.away { display: flex; } .hsc-presence-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .hsc-presence.on .hsc-presence-dot { background: #35e08a; box-shadow: 0 0 0 0 rgba(53, 224, 138, .55); animation: hsc-presence-pulse 2.2s ease-out infinite; } .hsc-presence.away .hsc-presence-dot { background: #ffd166; } @keyframes hsc-presence-pulse { 0% { box-shadow: 0 0 0 0 rgba(53, 224, 138, .55); } 70% { box-shadow: 0 0 0 6px rgba(53, 224, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 224, 138, 0); } } @media (prefers-reduced-motion: reduce) { .hsc-presence.on .hsc-presence-dot { animation: none; } } .hsc-close { flex: 0 0 auto; border: 0; background: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .85; } .hsc-close:hover { opacity: 1; } .hsc-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--hc-surface); } @media (max-width: 480px) { #hsChatWidget { bottom: 16px; right: 16px; } .hsc-window { width: calc(100vw - 24px); height: calc(100vh - 110px); } }