#mwrBot {
    animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
    0% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
    100% { transform: translateY(0); }
}
.chat-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 10px 5px;
}

.mwr-bubble {
    align-self: flex-start;
    background: #2b2b2b;
    color: #8fffb2;
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 75%;
    font-size: 1rem;
    animation: fadeIn 0.25s ease;
    border-left: 3px solid #59ffa6;
}

.user-bubble {
    align-self: flex-end;
    background: #4a4aff;
    color: #fff;
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 75%;
    font-size: 1rem;
    animation: fadeIn 0.25s ease;
    border-right: 3px solid #b0baff;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
.floating-emoji {
    position: fixed;
    font-size: 2.2rem;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    animation: floatEmoji 2s ease-out forwards;
}

@keyframes floatEmoji {
    0%   { opacity: 0; transform: translate(-50%, 10px); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -35px); }
}

/* Container MUST allow pseudo-element rendering */
#mwrBotContainer {
  position: relative;
  display: inline-block;
  overflow: visible;      /* prevents clipping */
  z-index: 10;            /* stays above backgrounds */
}

.mwr-sparkle-teal::after,
.mwr-sparkle-blue::after,
.mwr-sparkle-gold::after,
.mwr-sparkle-purple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0px;
  height: 0px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  animation: botSparkle 1.3s ease-out forwards;
  z-index: -1;
}

/* TEAL */
.mwr-sparkle-teal::after {
  background: radial-gradient(circle,
    rgba(120,255,220,0.35) 0%,
    rgba(120,255,220,0.15) 40%,
    rgba(120,255,220,0.00) 80%
  );
}

/* BLUE */
.mwr-sparkle-blue::after {
  background: radial-gradient(circle,
    rgba(80,150,255,0.35) 0%,
    rgba(80,150,255,0.15) 40%,
    rgba(80,150,255,0.00) 80%
  );
}

/* GOLD */
.mwr-sparkle-gold::after {
  background: radial-gradient(circle,
    rgba(255,210,80,0.40) 0%,
    rgba(255,210,80,0.15) 40%,
    rgba(255,210,80,0.00) 80%
  );
}

/* PURPLE */
.mwr-sparkle-purple::after {
  background: radial-gradient(circle,
    rgba(180,120,255,0.40) 0%,
    rgba(180,120,255,0.15) 40%,
    rgba(180,120,255,0.00) 80%
  );
}

/* Animation */
@keyframes botSparkle {
  0%   { width: 0; height: 0; opacity: 0.35; filter: blur(2px); }
  50%  { opacity: 0.25; filter: blur(6px); }
  100% { width: 360px; height: 360px; opacity: 0; filter: blur(18px); }
}


@keyframes botSparkle {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.35;
    filter: blur(2px);
  }
  50% {
    opacity: 0.25;
    filter: blur(6px);
  }
  100% {
    width: 360px;
    height: 360px;
    opacity: 0;
    filter: blur(18px);
  }
}


#mwrHat {
    position:absolute;
    top:-10px;
    left:50%;
    z-index: 1;
    transform:translateX(-50%);
    width:50px;
    pointer-events:none;
}

#robotEmoji {
    position: absolute;
    top: 10px;
    right: 100px;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}