/* ==========================================================================
   Chat character (template-parts/chat-buddy.php)
   A robot in a hard hat, fixed bottom right on every page. It replaces the
   Chatwoot launcher: chat-buddy.js adds html.has-chat-buddy, hides Chatwoot's
   own bubble and opens the Chatwoot window from the character instead.
   ========================================================================== */
html.has-chat-buddy {
  /* Room the Chatwoot window leaves under itself for the character. */
  --chat-buddy-clear: 144px;
}

.chat-buddy {
  position: fixed;
  right: 20px;
  bottom: 16px;
  z-index: 95;
  width: 92px;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

/* Out of the way while the menu drawer is open, like .mobile-cta. */
body.is-menu-open .chat-buddy {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
}

.chat-buddy__btn {
  position: relative;
  display: block;
  border-radius: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-buddy__btn:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}

.chat-buddy__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---------- Robot parts ---------- */
.chat-buddy__shadow {
  fill: var(--c-teal-900);
  opacity: 0.18;
  transform-origin: 60px 141px;
}
.chat-buddy__hop {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-buddy__eyes {
  transition: transform 0.15s ease-out;
}
.chat-buddy__blink {
  transform-origin: 60px 62.5px;
}
.chat-buddy__eyes-open,
.chat-buddy__eyes-happy {
  transition: opacity 0.15s ease;
}
.chat-buddy__eyes-happy {
  opacity: 0;
}
.chat-buddy__arm--wave {
  transform-origin: 35px 100px;
  transform: rotate(18deg);
}
.chat-buddy__arm--rest {
  transform-origin: 85px 100px;
  transform: rotate(-18deg);
}
.chat-buddy__dot {
  transform-box: fill-box;
  transform-origin: center;
}

/* Happy face on hover, on keyboard focus and while the chat is open. */
.chat-buddy__btn:focus-visible .chat-buddy__eyes-open,
.chat-buddy.is-open .chat-buddy__eyes-open {
  opacity: 0;
}
.chat-buddy__btn:focus-visible .chat-buddy__eyes-happy,
.chat-buddy.is-open .chat-buddy__eyes-happy {
  opacity: 1;
}
.chat-buddy__btn:focus-visible .chat-buddy__hop {
  transform: translateY(-6px);
}
@media (hover: hover) {
  .chat-buddy__btn:hover .chat-buddy__eyes-open {
    opacity: 0;
  }
  .chat-buddy__btn:hover .chat-buddy__eyes-happy {
    opacity: 1;
  }
  .chat-buddy__btn:hover .chat-buddy__hop {
    transform: translateY(-6px);
  }
}

/* Close badge while the chat is open: clicking the character closes it. */
.chat-buddy__badge {
  position: absolute;
  top: 4px;
  right: -4px;
  width: 26px;
  height: 26px;
  background: var(--c-teal-800);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--c-white);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-buddy__badge::before,
.chat-buddy__badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--c-white);
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.chat-buddy__badge::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.chat-buddy.is-open .chat-buddy__badge {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Speech bubble ---------- */
.chat-buddy__bubble {
  position: absolute;
  right: calc(100% + 2px);
  top: 18px;
  display: flex;
  opacity: 0;
  transform: translateX(8px) scale(0.9);
  transform-origin: right center;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-buddy__bubble[hidden] {
  display: none;
}
.chat-buddy.is-bubble-visible .chat-buddy__bubble {
  opacity: 1;
  transform: none;
}
.chat-buddy__bubble-text {
  position: relative;
  margin: 0;
  padding: 12px 18px;
  font-family: var(--ff-jp);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-heading);
  background: var(--c-white);
  border: 2px solid var(--color-brand);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(7, 78, 106, 0.18);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
/* Tail pointing at the robot. */
.chat-buddy__bubble-text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-top: 2px solid var(--color-brand);
  border-right: 2px solid var(--color-brand);
  border-radius: 0 3px 0 0;
  transform: translateY(-50%) rotate(45deg);
}
.chat-buddy__bubble-text:hover,
.chat-buddy__bubble-text:focus-visible {
  color: var(--color-brand);
  background: var(--c-cyan-050);
}
.chat-buddy__bubble-text:focus-visible {
  outline: 3px solid var(--color-heading-alt);
  outline-offset: 2px;
}
.chat-buddy__bubble-close {
  position: absolute;
  top: -12px;
  left: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--c-white);
  background: var(--c-teal-800);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--c-white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* 44px tap target around the 28px button. */
.chat-buddy__bubble-close::before {
  content: "";
  position: absolute;
  inset: -8px;
}
.chat-buddy__bubble-close:hover,
.chat-buddy__bubble-close:focus-visible {
  background: var(--color-brand);
}
.chat-buddy__bubble-close:focus-visible {
  outline: 3px solid var(--color-heading-alt);
  outline-offset: 2px;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .chat-buddy__bot {
    animation: chat-buddy-float 3.2s ease-in-out infinite;
  }
  .chat-buddy__shadow {
    animation: chat-buddy-shadow 3.2s ease-in-out infinite;
  }
  .chat-buddy__blink {
    animation: chat-buddy-blink 4.6s ease-in-out infinite;
  }
  .chat-buddy__antenna-light {
    animation: chat-buddy-glow 2.4s ease-in-out infinite;
  }
  .chat-buddy.is-waving .chat-buddy__arm--wave {
    animation: chat-buddy-wave 1.1s ease-in-out 2;
  }
  .chat-buddy.is-waving .chat-buddy__dot,
  .chat-buddy.is-loading .chat-buddy__dot {
    animation: chat-buddy-dot 0.9s ease-in-out infinite;
  }
  .chat-buddy__dot:nth-child(2) {
    animation-delay: 0.15s;
  }
  .chat-buddy__dot:nth-child(3) {
    animation-delay: 0.3s;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .chat-buddy__btn:hover .chat-buddy__arm--wave {
    animation: chat-buddy-wave 1.1s ease-in-out 1;
  }
}
@keyframes chat-buddy-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes chat-buddy-shadow {
  0%, 100% { opacity: 0.18; transform: scaleX(1); }
  50% { opacity: 0.1; transform: scaleX(0.84); }
}
@keyframes chat-buddy-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.1); }
}
@keyframes chat-buddy-glow {
  0%, 100% { fill: #82d7ee; }
  50% { fill: #ffffff; }
}
@keyframes chat-buddy-wave {
  0%, 100% { transform: rotate(18deg); }
  22%, 62% { transform: rotate(125deg); }
  42%, 80% { transform: rotate(95deg); }
}
@keyframes chat-buddy-dot {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
}

/* ---------- Chatwoot ---------- */
/* Its own launcher: the character replaces it. */
html.has-chat-buddy .woot--bubble-holder {
  display: none !important;
}
/* Keep the window (and its unread-message preview) clear of the character. */
html.has-chat-buddy .woot-widget-holder.woot-widget--without-bubble:not(.woot--hide) {
  bottom: var(--chat-buddy-clear) !important;
}
/* 667px is Chatwoot's own breakpoint; below it the window is full screen. */
@media (min-width: 667px) {
  html.has-chat-buddy .woot-widget-holder.woot-widget--without-bubble:not(.woot--hide):not(.has-unread-view) {
    height: calc(100% - var(--chat-buddy-clear) - 24px);
  }
}

/* ---------- Phones and tablets: sit above the .mobile-cta bar ---------- */
@media (max-width: 64rem) {
  html.has-chat-buddy {
    --chat-buddy-clear: calc(172px + env(safe-area-inset-bottom));
  }
  .chat-buddy {
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: 72px;
  }
  .chat-buddy__bubble {
    top: 10px;
  }
  .chat-buddy__bubble-text {
    padding: 10px 14px;
    font-size: 14px;
  }
}