/* Milo, the page helper. Everything is prefixed xmm- so it can't clash with site styles.
   Sits below the nav, toasts and pop-ups (z 1000+) and the cookie banner. */

#xmm-layer {
  position: fixed;
  inset: 0;
  z-index: 880;
  pointer-events: none;
  overflow: hidden;
}

#xmm-layer[hidden] {
  display: none;
}

.xmm-milo {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  will-change: transform;
}

.xmm-milo.xmm-clickable {
  pointer-events: auto;
  cursor: pointer;
}

.xmm-tilt,
.xmm-anim {
  width: 100%;
  height: 100%;
}

.xmm-anim {
  animation: xmm-bob 2.6s infinite ease-in-out;
}

.xmm-milo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 4px 0 rgba(11, 31, 58, 0.18));
}

.xmm-milo .xmm-eyes {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.08s;
}

.xmm-milo.xmm-blink .xmm-eyes {
  transform: scaleY(0.1);
}

.xmm-milo .xmm-flame {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.xmm-milo .xmm-bulb {
  animation: xmm-bulb 1.6s infinite;
}

.xmm-milo.xmm-boing .xmm-anim {
  animation: xmm-boing 0.55s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes xmm-bob {
  50% { transform: translateY(-5px); }
}

@keyframes xmm-bulb {
  50% { fill: #9ffff0; }
}

@keyframes xmm-boing {
  30% { transform: translateY(-16px) scale(1.08, 0.94); }
  60% { transform: translateY(0) scale(0.94, 1.06); }
}

/* speech bubble */
.xmm-bubble {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 270px;
  background: #fff;
  color: var(--navy, #0B1F3A);
  border: 2px solid var(--navy, #0B1F3A);
  border-radius: 16px;
  padding: 10px 14px 12px;
  box-shadow: 3px 3px 0 var(--teal, #00E0C2);
  font: 400 0.93rem/1.42 var(--font-body, 'DM Sans', sans-serif);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, visibility 0.18s;
}

.xmm-bubble.xmm-show {
  opacity: 1;
  visibility: visible;
}

.xmm-name {
  display: block;
  margin-bottom: 2px;
  font: 800 0.78rem var(--font-head, 'Syne', sans-serif);
  color: var(--teal-dark, #00BFA5);
}

.xmm-bubble p {
  position: relative;
  margin: 0;
}

.xmm-ghost {
  visibility: hidden;
}

.xmm-typed {
  position: absolute;
  inset: 0;
}

.xmm-bubble.xmm-typing .xmm-typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--navy, #0B1F3A);
  animation: xmm-caret 0.6s steps(1) infinite;
}

.xmm-dots {
  position: absolute;
  left: 0;
  top: 4px;
  display: none;
  gap: 4px;
}

.xmm-bubble.xmm-thinking .xmm-dots {
  display: flex;
}

.xmm-bubble.xmm-thinking .xmm-typed {
  display: none;
}

.xmm-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-400, #9aafc2);
  animation: xmm-dot 1s infinite;
}

.xmm-dots i:nth-child(2) { animation-delay: 0.15s; }
.xmm-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes xmm-caret {
  50% { opacity: 0; }
}

@keyframes xmm-dot {
  40% { transform: translateY(-4px); opacity: 0.5; }
}

.xmm-bubble::after {
  content: "";
  position: absolute;
  left: var(--xmm-tail-x, 50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--navy, #0B1F3A);
  transform: translateX(-50%) rotate(45deg);
}

.xmm-bubble[data-tail="bottom"]::after {
  bottom: -8px;
  border-top: 0;
  border-left: 0;
}

.xmm-bubble[data-tail="top"]::after {
  top: -8px;
  border-bottom: 0;
  border-right: 0;
}

/* the thing Milo is talking about */
.xmm-explained {
  outline: 2px dashed var(--teal, #00E0C2) !important;
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  #xmm-layer * {
    animation: none !important;
    transition: none !important;
  }
}