/*
 * Positioned bottom-LEFT deliberately: the site already has a WhatsApp
 * float button and a live-chat widget both occupying bottom-right
 * (see login.twig's .wa-float, "lifted from bottom:28px to bottom:90px
 * so it stops colliding with the live-chat widget's notification badge
 * in the corner"). Rather than add a third thing into that already-
 * crowded corner, this uses the opposite one entirely -- no collision,
 * no z-index tug-of-war needed.
 */

#ct-assist {
  position: fixed;
  left: 18px;
  bottom: 22px;
  z-index: 9985;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
}
@media (max-width: 768px) {
  #ct-assist { left: 14px; bottom: 14px; }
}

#ct-assist-fab {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #00ff9d, #00d4ff);
  color: #06110c;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,255,157,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
#ct-assist-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 32px rgba(0,255,157,.5); }
#ct-assist-fab svg { width: 24px; height: 24px; }

#ct-assist-dot {
  position: absolute; top: 2px; right: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff3c5c;
  border: 2px solid #06110c;
  animation: ctAssistPulse 1.6s ease-in-out 3; /* was infinite: pulse 3 times, then rest */
}
@keyframes ctAssistPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: .75; }
}

#ct-assist-card {
  position: absolute;
  bottom: 64px; left: 0;
  width: min(320px, 82vw);
  background: #10151f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: ctAssistIn .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ctAssistIn {
  from { opacity: 0; transform: translateY(10px) scale(.95); }
  to   { opacity: 1; transform: none; }
}

#ct-assist-step {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #00ff9d;
  margin-bottom: 6px;
}

#ct-assist-msg {
  color: #e8edf5;
  font-size: 13.5px;
  line-height: 1.55;
  padding-right: 18px; /* room for the close button */
}

#ct-assist-menu {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#ct-assist-menu li a {
  display: block;
  padding: 9px 11px;
  border-radius: 9px;
  color: #c5cdd8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
#ct-assist-menu li a:hover {
  background: rgba(0,255,157,.08);
  color: #00ff9d;
  text-decoration: none;
}

#ct-assist-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

#ct-assist-skip-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  color: #93a0b0;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
}
#ct-assist-skip-btn:hover { border-color: rgba(255,255,255,.24); color: #e8edf5; }

#ct-assist-action-btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #00ff9d, #00d4ff);
  color: #06110c;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
#ct-assist-action-btn:hover { filter: brightness(1.08); color: #06110c; text-decoration: none; }

#ct-assist-why-btn {
  background: none; border: none;
  color: #6b7a92;
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
#ct-assist-why-btn:hover { color: #93a0b0; }

#ct-assist-why {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: #6b7a92;
  font-size: 11.5px;
  line-height: 1.5;
}

#ct-assist-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  color: #4b5a72;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}
#ct-assist-close:hover { color: #93a0b0; }

/* Light mode (secondary, opt-in theme -- see mobile-fix.css for the same
   pattern used elsewhere on this site) */
body:not(.nightmode) #ct-assist-card {
  background: #fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
body:not(.nightmode) #ct-assist-msg { color: #1a1f29; }
body:not(.nightmode) #ct-assist-why { color: #6b7685; border-top-color: rgba(0,0,0,.08); }
body:not(.nightmode) #ct-assist-close { color: #9aa5b3; }
body:not(.nightmode) #ct-assist-skip-btn { border-color: rgba(0,0,0,.12); color: #6b7685; }
body:not(.nightmode) #ct-assist-skip-btn:hover { border-color: rgba(0,0,0,.24); color: #1a1f29; }
body:not(.nightmode) #ct-assist-menu li a { color: #4b5563; }
body:not(.nightmode) #ct-assist-menu li a:hover { background: rgba(0,180,120,.08); color: #009966; }


/* ── [Assistant controls] admin-selected side + phones ─────────────────── */
#ct-assist.ct-assist-right { left: auto; right: 18px; bottom: 84px; } /* above the WhatsApp button */
#ct-assist.ct-assist-right #ct-assist-card { left: auto; right: 0; }
@media (max-width: 768px) {
  #ct-assist.ct-assist-right { left: auto; right: 14px; }
  #ct-assist.ct-assist-nomobile { display: none !important; }
}
/* Keep clear of the landing page's sticky order bar and the Swift checkout
   dock, which both sit along the bottom edge on phones. On the right it
   also stacks above the WhatsApp button. */
@media (max-width: 767px) {
  body.lp-sticky-on #ct-assist { bottom: 86px; }
  body:has(.sw-dock.show) #ct-assist { bottom: 84px; }
  #ct-assist.ct-assist-right { bottom: 80px; }
  body.lp-sticky-on #ct-assist.ct-assist-right { bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { #ct-assist-fab { animation: none !important; } }