/* Live chat launcher, 2026-11-06 (pilot). See assets/js/live-chat.js.
   The Engage character (headset and a ticked speech bubble) sits bottom right, bobs now and then, hops on
   hover and opens the chat. A tag beside it always says what it is, and turns signal blue on hover.
   Brand 2.0: ink tag, 2px corners, signal blue on hover and focus. Reduced motion keeps it still. */

.lc-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483645;
  display: flex; align-items: flex-end; gap: 10px;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 14px/1.2 Geist, system-ui, -apple-system, sans-serif;
}
.lc-launch.lc-hidden { display: none; }
/* the character replaces the floating "Meet a Tribble expert" button on pages where the chat is live */
body.lc-on #floatingCta { display: none !important; }
.lc-launch:focus-visible { outline: 2px solid var(--signal, #3263E9); outline-offset: 4px; border-radius: 2px; }

/* The tag is always on, so the character never reads as decoration (Thomas, 2026-11-06). */
.lc-tag {
  margin-bottom: 22px; padding: 9px 12px; border-radius: 2px;
  background: var(--ink, #00091A); color: #fff; white-space: nowrap;
  transition: background .2s;
}
.lc-launch:hover .lc-tag, .lc-launch:focus-visible .lc-tag { background: var(--signal, #3263E9); }

.lc-critter { display: block; width: 76px; line-height: 0; transform-origin: 50% 90%; animation: lc-bob 6.4s ease-in-out infinite; }
.lc-critter img { display: block; width: 100%; height: auto; margin: 0; max-width: none; box-shadow: none; border-radius: 0; background: none;
  filter: drop-shadow(0 4px 10px rgba(0, 9, 26, .18)); }
.lc-launch:hover .lc-critter { animation: lc-hop .55s cubic-bezier(.3, 1.5, .5, 1); }

@keyframes lc-bob { 0%, 74%, 100% { transform: none; } 81% { transform: translateY(-7%) rotate(-3deg); } 88% { transform: none; } 92% { transform: translateY(-2%); } }
@keyframes lc-hop { 0% { transform: none; } 35% { transform: translateY(-14%) rotate(4deg) scale(1.04, .97); } 70% { transform: translateY(0) scale(.98, 1.02); } 100% { transform: none; } }

@media (max-width: 640px) {
  .lc-launch { right: 14px; bottom: 14px; }
  .lc-critter { width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-critter, .lc-launch:hover .lc-critter { animation: none; }
  .lc-tag { transition: none; }
}
@media print { .lc-launch { display: none; } }