/* =====================================================================
   BlueAlly x Zoho SalesIQ  |  PART 1: SITE-LEVEL CSS  (v2)
   Load on BlueAlly.com AFTER the SalesIQ embed script.
   Styles the floating launcher, the attention bubble, the unread badge,
   and the outer frame of the chat window (the iframe container).

   Look: "Signal" launcher. A glass tile with a slow-turning flywheel
   ring in Bright Blue, so it reads as part of the Conquer Complexity
   hero without disappearing into the navy skyline.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

:root {
  --ba-navy:        #001278;
  --ba-ink:         #040822;
  --ba-deep:        #020D51;
  --ba-blue:        #02A2FD;  /* Bright Blue */
  --ba-sky:         #3B9EE7;  /* "Complexity." blue on the hero */
  --ba-light:       #37B6FF;
  --ba-ice:         #EAF6FF;
  --ba-green:       #2BC96B;  /* online dot only */
  --ba-line:        rgba(255, 255, 255, 0.14);
  --ba-glass:       rgba(8, 16, 52, 0.72);
  --ba-radius:      18px;
  --ba-font:        "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ba-ease:        cubic-bezier(.2, .8, .2, 1);
}

/* Selectors confirmed against the current SalesIQ widget DOM:
   .zsiq_theme1 > #zsiq_float.zsiq-float (launcher) > .zsiq-chat-icn,
   .zsiq-float-tooltip (greeting), #zsiq_chat_wrap.chat-iframe-wrap (window). */

/* ---------- Launcher tile ---------- */
body .zsiq_theme1 #zsiq_float.zsiq-float {
  width: 64px !important;
  height: 64px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(55, 182, 255, .35) 0%, rgba(2, 162, 253, 0) 55%),
    linear-gradient(145deg, var(--ba-navy) 0%, var(--ba-ink) 100%) !important;
  border: 1px solid rgba(55, 182, 255, .45) !important;
  box-shadow:
    0 0 0 6px rgba(2, 162, 253, .10),
    0 14px 34px rgba(2, 162, 253, .35),
    0 6px 14px rgba(4, 8, 34, .55) !important;
  overflow: visible !important;
  transition: transform .35s var(--ba-ease), box-shadow .35s var(--ba-ease) !important;
}

/* Flywheel ring: light travelling around the tile edge */
body .zsiq_theme1 #zsiq_float.zsiq-float::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 24px;
  padding: 2px;
  background: conic-gradient(from var(--ba-a),
    rgba(2, 162, 253, 0) 0deg,
    var(--ba-blue) 70deg,
    var(--ba-light) 110deg,
    rgba(2, 162, 253, 0) 170deg,
    rgba(2, 162, 253, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ba-orbit 6s linear infinite;
  pointer-events: none;
}

body .zsiq_theme1 #zsiq_float.zsiq-float:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 0 8px rgba(2, 162, 253, .16),
    0 20px 40px rgba(2, 162, 253, .45),
    0 8px 18px rgba(4, 8, 34, .6) !important;
}

/* Hide Zoho's seasonal artwork on the launcher so the tile stays on brand */
body .zsiq_theme1 #zsiq_float .seasonal-float-img { display: none !important; }

/* Chat glyph */
body .zsiq_theme1 #zsiq_float .zsiq-chat-icn,
body .zsiq_theme1 #zsiq_float .zsiq-chat-icn::before {
  color: #fff !important;
}

body .zsiq_theme1 #zsiq_float .zsiq-close-icn {
  background: transparent !important;
  color: #fff !important;
  border-radius: inherit !important;
}

/* ---------- Greeting tooltip ("We're online") ---------- */
body .zsiq_theme1 .zsiq-float-tooltip {
  font-family: var(--ba-font) !important;
  background: var(--ba-glass) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--ba-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(4, 8, 34, .45) !important;
}
body .zsiq_theme1 .zsiq-float-tooltip .zsiq-clr3 {
  color: #fff !important;
  font-weight: 600 !important;
}
body .zsiq_theme1 .zsiq-float-tooltip .zsiq-tultip-desc {
  color: rgba(234, 246, 255, .75) !important;
}
body .zsiq_theme1 .zsiq-float-tooltip .zsiq-tultip-close {
  color: rgba(255, 255, 255, .6) !important;
}

/* ---------- Chat window frame ---------- */
body #zsiq_chat_wrap.chat-iframe-wrap.chat-iframe-open {
  border-radius: var(--ba-radius) !important;
  box-shadow:
    0 0 0 1px rgba(55, 182, 255, .28),
    0 30px 70px rgba(4, 8, 34, .65),
    0 0 60px rgba(2, 162, 253, .18) !important;
}
body #zsiq_chat_wrap .seasonal-cw-bg { display: none !important; }

/* ---------- Motion ---------- */
@property --ba-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ba-orbit { to { --ba-a: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  body .zsiq_theme1 #zsiq_float.zsiq-float::after { animation: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  body .zsiq_theme1 #zsiq_float.zsiq-float {
    width: 56px !important; height: 56px !important; border-radius: 18px !important;
  }
  body .zsiq_theme1 #zsiq_float.zsiq-float::after { border-radius: 22px; }
}