/* Sparkly, the website sales chat (October 2026). Same world as the public pages (landing.css):
   the cyan to ocean band, Montserrat for headings, the brand green on the one action that books.
   Literal colours on purpose, because this loads on every public page and some do not declare the
   --ld-* tokens. */

.sp { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 70; font-family: 'Open Sans', 'Segoe UI', sans-serif; }
.sp[hidden] { display: none; }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- launcher */
/* Sparkly's own face on a white disc, with the value spelled out beside it. A bare chat bubble
   says "support"; a face plus "instant price" says why anybody would press it. */
.sp-launch {
  position: relative; display: inline-flex; align-items: center; gap: 11px; height: 62px; padding: 0 22px 0 7px;
  border: 0; border-radius: 31px; cursor: pointer; color: #fff; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.06)), #0C85C2;
  box-shadow: 0 2px 4px rgba(8, 94, 138, 0.28), 0 16px 34px rgba(12, 133, 194, 0.34);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
}
.sp-launch:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(8, 94, 138, 0.26), 0 22px 42px rgba(12, 133, 194, 0.4); }
.sp-launch:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18); }
.sp-launch:focus-visible { outline: 3px solid #FFB600; outline-offset: 3px; }
.sp-launch-face {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(8, 60, 90, 0.25);
}
.sp-launch-face img { width: 48px; height: 48px; border-radius: 50%; display: block; }
.sp-launch-dot {
  position: absolute; right: -1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%;
  background: #6FBF4E; border: 2.5px solid #0C85C2;
}
.sp-badge {
  position: absolute; top: -5px; right: -6px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px;
  display: grid; place-items: center; background: #E5484D; color: #fff; border: 2px solid #fff;
  font: 800 11.5px/1 'Montserrat', sans-serif; animation: sp-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.sp-badge[hidden] { display: none; }
.sp-launch-text { display: flex; flex-direction: column; gap: 3px; }
.sp-launch-text strong { font: 800 16px/1 'Montserrat', sans-serif; letter-spacing: -0.01em; }
.sp-launch-text small { font: 600 12px/1 'Open Sans', sans-serif; color: rgba(255, 255, 255, 0.88); }
.sp.is-open .sp-launch-dot, .sp.is-open .sp-badge { display: none; }

/* Arrival: one wave hello a few seconds in, then still. A launcher that keeps bouncing stops being
   noticed and starts being resented. */
.sp-launch.is-arriving { animation: sp-arrive 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.sp-launch.is-arriving .sp-launch-face img { animation: sp-wave 1.1s ease-in-out 0.55s 1 both; }
.sp-launch.is-calling { animation: sp-nudge 0.9s cubic-bezier(0.3, 0.8, 0.3, 1) 1; }
.sp-launch.is-calling .sp-launch-face::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85);
  animation: sp-ring 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) 2 both;
}

/* ---------------------------------------------------------------- the peek */
.sp-peek {
  position: absolute; right: 0; bottom: 76px; width: 330px; max-width: calc(100vw - 32px);
  padding: 16px 16px 12px; border-radius: 18px 18px 6px 18px; background: #fff; color: #2C3E50;
  box-shadow: 0 2px 6px rgba(30, 84, 100, 0.1), 0 22px 48px rgba(30, 84, 100, 0.22);
  transform-origin: bottom right; animation: sp-peek-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.sp-peek[hidden] { display: none; }
.sp-peek.is-leaving { animation: sp-peek-out 0.22s ease-in both; }
.sp-peek-x {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: transparent; color: #5B6F80; cursor: pointer;
}
.sp-peek-x svg { width: 16px; height: 16px; }
.sp-peek-x:hover { background: #F2F9FB; color: #2C3E50; }
.sp-peek-head { display: flex; align-items: center; gap: 9px; margin: 0 30px 9px 0; font-size: 12.5px; color: #5B6F80; }
.sp-peek-head img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #E6F4F9; }
.sp-peek-head strong { color: #2C3E50; font: 800 14px/1 'Montserrat', sans-serif; }
.sp-peek-msg {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: #2C3E50; font: 600 15px/1.45 'Open Sans', sans-serif;
}
.sp-peek-msg:focus-visible { outline: 3px solid #FFB600; outline-offset: 3px; border-radius: 6px; }
.sp-peek-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sp-peek-chips .sp-chip { animation: sp-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.sp-peek-chips .sp-chip:nth-child(2) { animation-delay: 0.06s; }
.sp-peek-chips .sp-chip:nth-child(3) { animation-delay: 0.12s; }
.sp-peek-chips .sp-chip:nth-child(4) { animation-delay: 0.18s; }
.sp-peek-trust { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid #EAF2F5; font-size: 11.5px; line-height: 1.4; color: #5B6F80; }
.sp-peek-trust a { color: #0A6C9E; font-weight: 700; text-decoration: none; }
.sp.is-open .sp-peek { display: none; }

/* The side bubble: used while the home page quote form is on screen. One line, level with the
   launcher and pointing at it, so it sits in the strip below the form instead of over it. */
.sp-peek.is-side {
  right: calc(100% + 12px); bottom: 6px; width: max-content; max-width: 360px; padding: 12px 40px 12px 16px;
  border-radius: 18px 18px 6px 18px; transform-origin: right center;
}
.sp-peek.is-side .sp-peek-head, .sp-peek.is-side .sp-peek-chips, .sp-peek.is-side .sp-peek-trust { display: none; }
.sp-peek.is-side .sp-peek-msg { font-size: 14.5px; }
.sp-peek.is-side .sp-peek-x { top: 50%; right: 6px; transform: translateY(-50%); }

/* ---------------------------------------------------------------- panel */
.sp-panel {
  position: absolute; right: 0; bottom: 76px; width: 380px; height: min(620px, calc(100vh - 130px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 20px; border: 1px solid #DCE9EE;
  box-shadow: 0 30px 64px rgba(30, 84, 100, 0.24);
  opacity: 0; transform: translateY(12px) scale(0.98); transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sp-panel[hidden] { display: none; }
.sp-panel.is-in { opacity: 1; transform: none; }

.sp-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 18px; color: #fff;
  background: linear-gradient(135deg, #5AB3C9 0%, #0C85C2 100%);
}
.sp-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45); }
.sp-avatar img { width: 42px; height: 42px; border-radius: 50%; display: block; }
.sp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-who strong { font: 800 17px/1.1 'Montserrat', sans-serif; }
.sp-who span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255, 255, 255, 0.9); }
.sp-who i { width: 8px; height: 8px; border-radius: 50%; background: #B9EBA5; box-shadow: 0 0 0 3px rgba(185, 235, 165, 0.3); }
.sp-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; }
.sp-icon:hover { background: rgba(255, 255, 255, 0.26); }
.sp-icon:focus-visible { outline: 3px solid #FFB600; outline-offset: 2px; }
.sp-icon svg { width: 19px; height: 19px; }
.sp-icon[aria-pressed="true"] .sp-snd-off, .sp-icon[aria-pressed="false"] .sp-snd-on { display: none; }

.sp-trust {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 8px 12px;
  list-style: none; background: #E6F4F9; color: #0A5F87; font: 700 11.5px/1.3 'Open Sans', sans-serif;
}
.sp-trust li { display: inline-flex; align-items: center; gap: 5px; }
.sp-trust li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6FBF4E; }

.sp-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 8px; background: #F2F9FB; }
.sp-msg {
  max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; animation: sp-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sp-msg.is-bot { align-self: flex-start; background: #fff; color: #2C3E50; border: 1px solid #DCE9EE; border-bottom-left-radius: 5px; }
.sp-msg.is-user { align-self: flex-end; background: #0C85C2; color: #fff; border-bottom-right-radius: 5px; }
.sp-msg a { color: #0A6C9E; font-weight: 700; }
.sp-typing { display: flex; gap: 5px; padding: 14px 16px; }
.sp-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9FB6C2; animation: sp-dot 1.1s infinite ease-in-out; }
.sp-typing i:nth-child(2) { animation-delay: 0.15s; }
.sp-typing i:nth-child(3) { animation-delay: 0.3s; }

.sp-book {
  align-self: stretch; display: flex; flex-direction: column; gap: 3px; margin: 4px 0; padding: 14px 16px;
  border-radius: 14px; text-decoration: none; color: #10250F;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.05)), #6FBF4E;
  box-shadow: 0 1px 2px rgba(16, 37, 15, 0.25), 0 10px 22px rgba(111, 191, 78, 0.35);
  animation: sp-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sp-book strong { font: 800 16px/1.2 'Montserrat', sans-serif; }
.sp-book strong::after { content: ' \2192'; }
.sp-book span { font-size: 12.5px; opacity: 0.85; }
.sp-book:hover { background-color: #5AA83D; }

.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; background: #F2F9FB; }
.sp-chips[hidden] { display: none; }
.sp-chip {
  padding: 8px 13px; border: 1px solid #A9D6E4; border-radius: 18px; background: #fff; cursor: pointer;
  color: #0A6C9E; font: 600 13.5px/1 'Open Sans', sans-serif;
}
.sp-chip:hover { background: #E6F4F9; border-color: #0C85C2; }

.sp-form[hidden] { display: none; }
.sp-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #DCE9EE; background: #fff; }
.sp-form textarea {
  flex: 1; min-height: 42px; max-height: 120px; resize: none; padding: 10px 13px; overflow-y: hidden;
  border: 1px solid #DCE9EE; border-radius: 12px; font: 15px/1.4 'Open Sans', sans-serif; color: #2C3E50;
}
.sp-form textarea:focus { outline: none; border-color: #0C85C2; box-shadow: 0 0 0 3px rgba(12, 133, 194, 0.15); }
.sp-send { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: #0C85C2; color: #fff; cursor: pointer; }
.sp-send:hover { background: #085E8A; }
.sp-send svg { width: 19px; height: 19px; }
.sp-foot { margin: 0; padding: 0 14px 10px; background: #fff; font-size: 11.5px; line-height: 1.45; color: #5B6F80; }
.sp-foot a { color: #0A6C9E; font-weight: 600; }

/* ---------------------------------------------------------------- a teammate in the chat */
/* The header turns a deeper ocean and the face becomes theirs, so the change of hands is obvious at a
   glance; a small name sits over every message they send. */
.sp.is-live .sp-head { background: linear-gradient(135deg, #0C85C2 0%, #17505F 100%); }
.sp-avatar-person { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff; color: #0C85C2; font: 800 17px/1 'Montserrat', sans-serif; }
.sp-avatar-person img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp.is-live .sp-who i { animation: sp-live 2s ease-in-out infinite; }
.sp-agent-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 90%; animation: sp-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sp-agent-msg > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-agent-face { width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #0C85C2; color: #fff; font: 800 12px/1 'Montserrat', sans-serif; }
.sp-agent-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-agent-name { font: 700 11.5px/1 'Open Sans', sans-serif; color: #0A6C9E; padding-left: 4px; }
.sp-msg.is-agent { max-width: none; background: #fff; color: #2C3E50; border: 1px solid #A9D6E4; border-bottom-left-radius: 5px; box-shadow: 0 2px 8px rgba(12, 133, 194, 0.08); }
.sp-event {
  align-self: center; display: inline-flex; align-items: center; gap: 7px; margin: 4px 0; padding: 5px 12px; border-radius: 12px;
  background: #fff; color: #5B6F80; font: 600 12px/1.3 'Open Sans', sans-serif; box-shadow: 0 1px 3px rgba(30, 84, 100, 0.08);
  animation: sp-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sp-event::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6FBF4E; }
@keyframes sp-live { 0%, 100% { box-shadow: 0 0 0 3px rgba(185, 235, 165, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(185, 235, 165, 0.12); } }

@keyframes sp-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sp-dot { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes sp-arrive { from { opacity: 0; transform: translateY(24px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes sp-wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
@keyframes sp-nudge { 0%, 100% { transform: none; } 30% { transform: translateY(-6px) scale(1.04); } 60% { transform: translateY(0) scale(0.98); } }
@keyframes sp-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }
@keyframes sp-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sp-peek-in { from { opacity: 0; transform: translateY(14px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes sp-peek-out { to { opacity: 0; transform: translateY(8px) scale(0.96); } }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .sp { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); transition: bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
  /* Sits above the landing page's own sticky bar when that bar is showing. */
  body:has(.ld-mbar.is-shown) .sp:not(.is-open) { bottom: calc(86px + env(safe-area-inset-bottom)); }
  /* Face only on a phone: the label would cover the page's own buttons. */
  .sp-launch { width: 60px; height: 60px; padding: 0; justify-content: center; border-radius: 50%; }
  .sp-launch-text { display: none; }
  .sp-peek { bottom: 72px; width: calc(100vw - 28px); }
  .sp-peek.is-side { right: 72px; bottom: 2px; width: max-content; max-width: calc(100vw - 100px); }
  .sp.is-open { inset: 0; }
  .sp.is-open .sp-launch { display: none; }
  .sp-panel { position: fixed; inset: 0; width: auto; height: 100%; border-radius: 0; border: 0; }
  .sp-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .sp-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .sp-form textarea { font-size: 16px; } /* 16px stops iOS zooming into the field */
}

@media (prefers-reduced-motion: reduce) {
  .sp-launch, .sp-panel, .sp { transition: none; }
  .sp-agent-msg, .sp-event, .sp.is-live .sp-who i,
  .sp-msg, .sp-book, .sp-peek, .sp-peek.is-leaving, .sp-peek-chips .sp-chip, .sp-badge,
  .sp-launch.is-arriving, .sp-launch.is-arriving .sp-launch-face img, .sp-launch.is-calling,
  .sp-launch.is-calling .sp-launch-face::after { animation: none; }
  .sp-typing i { animation: none; opacity: 0.6; }
}