*, *::before, *::after { box-sizing: border-box; }
#rb-wrap {
  position: relative;
  width: 100%; height: 80vh;
  overflow: hidden;
  background: transparent;
  cursor: default;
}
#rb-canvas { display:block; width:100%; height:100%; }
#rb-msg {
  position: absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  color: #aaa;
  font: 16px/1.4 Inter, sans-serif;
}
#thought-bubble {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  max-width: 160px;
  padding: 13px 18px;
  border-radius: 20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E") center/180px 180px,
    linear-gradient(128deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.00) 55%),
    linear-gradient(310deg, rgba(210,228,248,0.35) 0%, rgba(210,228,248,0.00) 50%),
    rgba(210, 218, 226, 0.52);
  border: 0px solid transparent;
  border-top: 1.5px solid rgba(255,255,255,0.92);
  border-left: 1px solid rgba(255,255,255,0.70);
  border-right: 1px solid rgba(200,218,238,0.45);
  border-bottom:1px solid rgba(180,205,228,0.38);
  outline: none;
  box-shadow:
    0 1.5px 0 rgba(255,255,255,1.00) inset,
    0 -1px 0 rgba(120,160,200,0.22) inset,
    0 4px 20px rgba(100,140,190,0.18),
    0 10px 30px rgba(60, 100,160,0.12),
    0 1px 4px rgba(0,0,0,0.09);
  font-family: -apple-system, 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(28, 28, 32, 0.78);
  letter-spacing: -0.01em;
  text-align: center;
  word-break: break-word;
  transform-origin: center bottom;
  opacity: 0;
  transform: translateX(-50%) scaleX(0.15) scaleY(0.05);
  will-change: transform, opacity;
}
#thought-bubble.emoji-only {
  font-size: 30px;
  line-height: 1;
  padding: 12px 15px;
  max-width: 72px;
}
@keyframes genie-in {
  0% { opacity:0; transform: translateX(-50%) scaleX(0.15) scaleY(0.05) rotate(var(--brot,0deg)); }
  18% { opacity:1; transform: translateX(-50%) scaleX(1.08) scaleY(0.44) rotate(var(--brot,0deg)); }
  40% { transform: translateX(-50%) scaleX(0.94) scaleY(1.12) rotate(var(--brot,0deg)); }
  60% { transform: translateX(-50%) scaleX(1.03) scaleY(0.96) rotate(var(--brot,0deg)); }
  78% { transform: translateX(-50%) scaleX(0.99) scaleY(1.02) rotate(var(--brot,0deg)); }
  100% { opacity:1; transform: translateX(-50%) scaleX(1) scaleY(1) rotate(var(--brot,0deg)); }
}
@keyframes genie-out {
  0% { opacity:1; transform: translateX(-50%) scaleX(1) scaleY(1) rotate(var(--brot,0deg)); }
  18% { transform: translateX(-50%) scaleX(1.04) scaleY(1.05) rotate(var(--brot,0deg)); }
  58% { opacity:1; transform: translateX(-50%) scaleX(0.82) scaleY(0.34) rotate(var(--brot,0deg)); }
  100% { opacity:0; transform: translateX(-50%) scaleX(0.10) scaleY(0.04) rotate(var(--brot,0deg)); }
}
#thought-bubble.state-in { animation: genie-in 0.55s cubic-bezier(0.34,1.48,0.64,1) forwards; }
#thought-bubble.state-out { animation: genie-out 0.36s cubic-bezier(0.55,0,1,0.45) forwards; }
#thought-bubble.state-idle {
  opacity: 1;
  transform: translateX(-50%) scaleX(1) scaleY(1) rotate(var(--brot,0deg));
}