/* speech-bubble.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── SpeechBubble ── */
.SpeechBubble_speechBubble {
  --sb-bg:var(--color-blue);
  --sb-enter-duration:0.6s;
  --sb-enter-easing:ease-out;
  position:relative;
  display:inline-flex;
  opacity:0;
  transform:scale(.94) translateY(8px);
  transform-origin:center;
  transition:opacity var(--sb-enter-duration) var(--sb-enter-easing),transform var(--sb-enter-duration) var(--sb-enter-easing);
}

.SpeechBubble_speechBubble.SpeechBubble_visible {
  opacity:1;
  transform:none;
  animation:SpeechBubble_bubble-in var(--sb-enter-duration) var(--sb-enter-easing) both;
}

@keyframes SpeechBubble_bubble-in {
  0% {
    opacity:0;
    transform:scale(.94) translateY(8px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .SpeechBubble_speechBubble {
    transition:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .SpeechBubble_speechBubble.SpeechBubble_visible {
    animation:none;
  }
}

.SpeechBubble_speechBubble.SpeechBubble_error {
  --sb-bg:var(--color-light-red);
}

.SpeechBubble_bubble {
  display:flex;
  align-items:flex-start;
  gap:8px;
  width:100%;
  padding:8px 16px;
  border-radius:24px;
  box-sizing:border-box;
  background:var(--sb-bg);
  color:var(--color-green);
  font-family:var(--font-family-serif-light);
  font-size:18px;
  line-height:1.4;
}

.SpeechBubble_error .SpeechBubble_bubble {
  color:var(--color-terracotta);
}

.SpeechBubble_content {
  flex:1 0;
  min-width:0;
  word-break:break-word;
}

.SpeechBubble_errorIcon {
  flex-shrink:0;
  width:32px;
  height:32px;
}

.SpeechBubble_tail {
  position:absolute;
  width:20px;
  height:16px;
  overflow:visible;
}

.SpeechBubble_tail path {
  fill:var(--sb-bg);
}

.SpeechBubble_bottom .SpeechBubble_tail {
  top:100%;
  left:50%;
  transform:translate(-50%,-2px);
}

.SpeechBubble_top .SpeechBubble_tail {
  bottom:100%;
  left:50%;
  transform:translate(-50%,2px) rotate(180deg);
}

.SpeechBubble_topLeft .SpeechBubble_tail {
  bottom:100%;
  left:var(--sb-tail-inset,24px);
  transform:translateY(2px) rotate(180deg);
}

.SpeechBubble_topRight .SpeechBubble_tail {
  bottom:100%;
  right:var(--sb-tail-inset,24px);
  transform:translateY(2px) rotate(180deg) scaleX(-1);
}

.SpeechBubble_left .SpeechBubble_tail {
  top:50%;
  right:100%;
  transform:translate(2px,-50%) rotate(90deg);
}

.SpeechBubble_right .SpeechBubble_tail {
  top:50%;
  left:100%;
  transform:translate(-2px,-50%) rotate(-90deg) scaleX(-1);
}

@media (min-width:1400px) {
  .SpeechBubble_bubble {
    padding:16px;
  }
}