.bot-ui {
  width: 100px;
  position: fixed;
  top: calc(90% - 115px/2);
  left: calc(90% - 100px/2);
  animation: floatbot 8s ease-in-out infinite;
}

/* Hover analyzer */
.bot-ui:hover .analyzer {
  background: #f14189 !important;
}

/* --- ROUND BOT HEAD --- */
.bot-ui .bot-head {
  background: #bdc3c7;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Smile --- */
.bot-ui .bot-head::after {
  content: '';
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #3498DB;
  border-radius: 0 0 3px 3px;
  transform: translateX(-50%);
}

/* --- Daisy Flower --- */
.bot-ui .bot-head .flower {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
}

.bot-ui .bot-head .flower::before,
.bot-ui .bot-head .flower::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  background: yellow;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.bot-ui .bot-head .flower::before {
  box-shadow:
    -9px 0 0 3px white,
    9px 0 0 3px white,
    0 -9px 0 3px white,
    0 9px 0 3px white,
    -7px -7px 0 3px white,
    7px -7px 0 3px white,
    -7px 7px 0 3px white,
    7px 7px 0 3px white;
}

/* Stem */
.bot-ui .bot-head .flower .stem {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 3px;
  height: 25px;
  background: green;
  transform: translateX(-50%);
  border-radius: 2px;
}

/* Leaves */
.bot-ui .bot-head .flower .leaves {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 15px;
  height: 8px;
}

.bot-ui .bot-head .flower .leaves::before,
.bot-ui .bot-head .flower .leaves::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 4px;
  background: green;
  border-radius: 50%;
}

.bot-ui .bot-head .flower .leaves::before {
  transform: rotate(-45deg);
  left: -8px;
  top: 2px;
}

.bot-ui .bot-head .flower .leaves::after {
  transform: rotate(45deg);
  left: 3px;
  top: 2px;
}

/* --- EYES --- */
.bot-ui .bot-head .eyes-container {
  background: #000;
  width: 60px;
  height: 30px;
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  position: relative;
}

.bot-ui .bot-head .eyes-container .eye {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #3498db;
  animation: blink 10s linear infinite;
}

/* --- ROUND BOT BODY --- */
.bot-ui .bot-body {
  width: 80px;
  height: 80px;
  background: #bdc3c7;
  border-radius: 50%;
  margin: 10px auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bot-ui .bot-body .analyzer {
  width: 60%;
  height: 10px;
  background: #3498db;
  border-radius: 5px;
  transition: .3s;
}

/* --- Speech Bubble --- */
.bot-ui .speech {
  position: absolute;
  top: -80px;
  left: 40%;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Small tail for speech bubble */
.bot-ui .speech::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* --- Animations --- */
@keyframes blink {
  24% { height: 15px; }
  25% { height: 1px; }
  26% { height: 15px; }
  74% { height: 15px; }
  75% { height: 1px; }
  76% { height: 15px; }
}

@keyframes floatbot {
  20% { transform: translateY(3px); }
  40% { transform: translateY(-3px); }
  80% { transform: translateY(3px); }
}