/* Meeeply bot icon. Flat 2D. bot.js draws the eyes and switches the moods and jumps. Needs --blue (#0a84ff) on an ancestor or falls back. */
.bot { width: 44px; height: 40px; flex: none; overflow: visible; transform-origin: 30% 92%; }
.b-body { fill: var(--blue, #0a84ff); }
.eye .open { fill: #fff; transform-box: fill-box; transform-origin: center; transition: opacity .12s; }
.eye .lid { transform-box: fill-box; transform-origin: center; transition: transform .18s; }
.eye .happy, .m-line { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-fill { fill: #fff; stroke: none; }
.face > * { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .12s; }
.bot.mini { width: 34px; height: 31px; }

/* moods: the pill eyes step aside for a shape */
.bot:is(.happy, .heart, .star, .wow, .calm, .dozing) .open { opacity: 0; }
.bot.happy .happy, .bot.wow .m-wow, .bot.heart .m-heart, .bot.star .m-star, .bot.calm .m-calm, .bot.dozing .m-flat { opacity: 1; }
.bot:is(.heart, .star, .wow) :is(.m-heart, .m-star, .m-wow) { animation: pop-in .38s cubic-bezier(.2, 1.6, .4, 1); }
.bot.star .m-star { animation: pop-in .38s cubic-bezier(.2, 1.6, .4, 1), twinkle .9s ease-in-out; }
.bot.wink .eye:last-child .open { opacity: 0; }
.bot.wink .eye:last-child .happy { opacity: 1; }
.bot.dozing { animation: breathe 3.2s ease-in-out infinite; }
@keyframes pop-in { from { transform: scale(.2); } }
@keyframes twinkle { 50% { transform: rotate(45deg) scale(1.15); } }
@keyframes breathe { 50% { transform: scale(1.03, .97); } }

/* blinks */
.bot.blink .open { animation: blink .16s ease-in-out; }
.bot.blink2 .open { animation: blink .16s ease-in-out 2; }
@keyframes blink { 0%, 100% { transform: none; } 45%, 55% { transform: scaleY(.1); } }

/* jumps */
.bot.j-bounce { animation: j-bounce 1s linear; }
.bot.j-double { animation: j-double .9s linear; }
.bot.j-flip { animation: j-flip 1s linear; transform-origin: 50% 58%; }
.bot.j-wiggle { animation: j-wiggle .9s ease-in-out; transform-origin: 50% 92%; }
.bot.j-boing { animation: j-boing 1s linear; transform-origin: 50% 92%; }
@keyframes j-bounce {
  0% { transform: none; animation-timing-function: ease-out; }
  12% { transform: scale(1.2, .78); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  36% { transform: translateY(-16px) scale(.88, 1.14) rotate(-4deg); animation-timing-function: ease-out; }
  50% { transform: translateY(-18px) scale(1.02, .98) rotate(3deg); animation-timing-function: ease-in; }
  66% { transform: translateY(0) scale(1.22, .76); animation-timing-function: ease-out; }
  77% { transform: translateY(-4px) scale(.95, 1.06) rotate(-2deg); }
  88% { transform: scale(1.04, .96); }
  100% { transform: none; }
}
@keyframes j-double {
  0% { transform: none; }
  10% { transform: scale(1.14, .84); animation-timing-function: ease-out; }
  24% { transform: translateY(-10px) scale(.92, 1.08) rotate(-3deg); animation-timing-function: ease-in; }
  38% { transform: translateY(0) scale(1.14, .84); animation-timing-function: ease-out; }
  54% { transform: translateY(-12px) scale(.92, 1.08) rotate(4deg); animation-timing-function: ease-in; }
  70% { transform: translateY(0) scale(1.16, .82); }
  84% { transform: scale(.97, 1.03); }
  100% { transform: none; }
}
@keyframes j-flip {
  0% { transform: none; }
  12% { transform: scale(1.18, .8); animation-timing-function: ease-out; }
  30% { transform: translateY(-14px) scale(.9, 1.1); }
  55% { transform: translateY(-20px) rotate(200deg); }
  76% { transform: translateY(-5px) rotate(360deg); animation-timing-function: ease-in; }
  86% { transform: translateY(0) rotate(360deg) scale(1.16, .84); }
  94% { transform: rotate(360deg) scale(.98, 1.02); }
  100% { transform: rotate(360deg); }
}
@keyframes j-wiggle {
  0% { transform: none; }
  15% { transform: translateY(-6px) rotate(-11deg); }
  30% { transform: translateY(0) rotate(9deg) scale(1.06, .94); }
  45% { transform: translateY(-5px) rotate(-8deg); }
  60% { transform: translateY(0) rotate(6deg) scale(1.04, .96); }
  76% { transform: rotate(-3deg); }
  100% { transform: none; }
}
@keyframes j-boing {
  0% { transform: none; }
  15% { transform: scale(1.25, .7); animation-timing-function: ease-out; }
  34% { transform: translateY(-12px) scale(.78, 1.3); }
  50% { transform: translateY(-12px) scale(1.08, .92); animation-timing-function: ease-in; }
  64% { transform: translateY(0) scale(1.2, .8); }
  77% { transform: scale(.9, 1.1); }
  89% { transform: scale(1.04, .96); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bot[class] { animation: none !important; }
  .face > * { animation: none !important; }
  .bot.blink .open, .bot.blink2 .open { animation: soft-blink .5s ease-in-out !important; }
  @keyframes soft-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
}