/* Reachy's speech bubble: a warm paper card over the dark room, hanging off the robot's head. */
.reachy-bubble {
  --x: -999px;
  --y: -999px;
  --tail: 27px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 44;
  max-width: min(300px, calc(100vw - 24px));
  padding: 11px 15px 12px;
  border-radius: 14px;
  background: #f3ede1;
  color: #1a1611;
  font: 600 16px/1.36 Archivo, system-ui, sans-serif;
  font-stretch: 96%;
  letter-spacing: -0.003em;
  text-wrap: pretty;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .42)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
  transform: translate3d(var(--x), var(--y), 0) scale(.92);
  transform-origin: var(--tail) calc(100% + 9px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    opacity 180ms cubic-bezier(.3, 0, .8, .15),
    transform 220ms cubic-bezier(.3, 0, .8, .15),
    visibility 0s linear 220ms;
}

.reachy-bubble.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(var(--x), var(--y), 0) scale(1);
  transition:
    opacity 200ms cubic-bezier(.16, 1, .3, 1),
    transform 420ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s;
}

.reachy-bubble.is-measuring {
  transition: none;
}

/* the tail: a rounded corner of the same paper, pointing down at the robot */
.reachy-bubble::after {
  content: "";
  position: absolute;
  left: calc(var(--tail) - 7px);
  bottom: -6px;
  width: 14px;
  height: 14px;
  border-bottom-right-radius: 3px;
  background: inherit;
  transform: rotate(45deg);
}

.reachy-bubble.is-flipped {
  transform-origin: calc(100% - var(--tail)) calc(100% + 9px);
}

.reachy-bubble.is-flipped::after {
  left: auto;
  right: calc(var(--tail) - 7px);
}

.reachy-bubble-text {
  position: relative;
  z-index: 1;
  margin: 0;
}

.reachy-bubble strong {
  color: #7d2f12;
  font-weight: 800;
}

/* words arrive as they are spoken */
.reachy-bubble .w {
  opacity: 0;
  filter: blur(2.5px);
  transition: opacity 200ms cubic-bezier(.16, 1, .3, 1), filter 260ms cubic-bezier(.16, 1, .3, 1);
}

.reachy-bubble.is-speaking .w {
  opacity: 1;
  filter: blur(0);
}

@media (max-width: 640px) {
  .reachy-bubble {
    max-width: min(250px, calc(100vw - 24px));
    padding: 9px 13px 10px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reachy-bubble,
  .reachy-bubble.is-visible {
    transform: translate3d(var(--x), var(--y), 0);
    transition: opacity 120ms linear, visibility 0s;
  }

  .reachy-bubble .w {
    filter: none;
    transition: none;
  }
}