.blog-lamb {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 90;
  pointer-events: auto;
  --lamb-width: clamp(82px, 10vw, 128px);
}

.blog-lamb__button {
  width: var(--lamb-width);
  aspect-ratio: 362 / 724;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .18));
  transform-origin: 50% 100%;
}

.blog-lamb__button:focus-visible {
  outline: 2px solid var(--theme-color, #49b1f5);
  outline-offset: 5px;
  border-radius: 16px;
}

.blog-lamb__sprite {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('/img/blog-lamb-sprite.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 600% 100%;
}

.blog-lamb__sprite::before,
.blog-lamb__sprite::after {
  position: absolute;
  top: 29%;
  width: 5.5%;
  height: 1.4%;
  border-radius: 999px;
  background: #272727;
  content: '';
  opacity: 0;
  transform: scaleX(.2);
}

.blog-lamb__sprite::before {
  left: 42%;
}

.blog-lamb__sprite::after {
  left: 54%;
}

.blog-lamb.is-blink .blog-lamb__sprite::before,
.blog-lamb.is-blink .blog-lamb__sprite::after {
  animation: blog-lamb-blink .36s ease-in-out 2;
}

.blog-lamb__bubble {
  position: absolute;
  left: calc(var(--lamb-width) * .72);
  bottom: calc(var(--lamb-width) * 1.55);
  width: max-content;
  max-width: min(220px, calc(100vw - var(--lamb-width) - 34px));
  padding: 9px 12px;
  border: 1px solid rgba(73, 177, 245, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
  color: #363636;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transform-origin: left bottom;
  transition: opacity .2s ease, transform .2s ease;
  word-break: break-word;
}

.blog-lamb__bubble::after {
  position: absolute;
  left: 14px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(73, 177, 245, .22);
  border-bottom: 1px solid rgba(73, 177, 245, .22);
  background: rgba(255, 255, 255, .94);
  content: '';
  transform: rotate(45deg);
}

.blog-lamb.has-message .blog-lamb__bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-theme='dark'] .blog-lamb__bubble {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(34, 38, 45, .95);
  color: #f2f6ff;
}

[data-theme='dark'] .blog-lamb__bubble::after {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(34, 38, 45, .95);
}

.blog-lamb.is-idle .blog-lamb__button {
  animation: blog-lamb-idle 2.4s ease-in-out infinite;
}

.blog-lamb.is-wave .blog-lamb__button {
  animation: blog-lamb-wave 1.15s ease-in-out infinite;
}

.blog-lamb.is-wave .blog-lamb__sprite {
  background-position: 20% 0;
}

@keyframes blog-lamb-idle {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-4px) scale(1.015);
  }
}

@keyframes blog-lamb-wave {
  0%, 100% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(-6deg);
  }

  66% {
    transform: rotate(5deg);
  }
}

@keyframes blog-lamb-blink {
  0%, 100% {
    opacity: 0;
    transform: scaleX(.2);
  }

  45%, 60% {
    opacity: .95;
    transform: scaleX(1);
  }
}

@media (max-width: 768px) {
  .blog-lamb {
    --lamb-width: 74px;
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .blog-lamb__bubble {
    bottom: calc(var(--lamb-width) * 1.7);
    max-width: min(190px, calc(100vw - 24px));
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-lamb__button {
    animation-duration: 4s;
  }
}