/* ── Cloud Bunny · free chat box by LumentoStudio ─────────────────────
   Cream cloud bubbles with puffy tops, sky-blue name tags.
   Roles by shape: host = bunny ears + crown, mod = shield, VIP = gem,
   sub = heart, viewer = plain outlined tag.
   Cloud cream 60 · sky blue 30 · berry pink 10, plum ink.
   Colours marked (field) are overwritten from the widget settings.   */
html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; }
.cb {
  /* colour (field) */
  --cloud: #fffaf2; --ink: #463a5c; --sky-deep: #4e8fd0; --berry: #ff7aa2;
  /* fixed */
  --vip: #8d6be0; --sub: #f0884e; --edge-shadow: #1d2b4a40;
  --font-name: Coiny, "Arial Rounded MT Bold", sans-serif; --font-msg: Mali, "Comic Sans MS", sans-serif;
  --ease-pop: cubic-bezier(.34, 1.7, .5, 1); --ease-drift: cubic-bezier(.45, 0, .55, 1);
  --size: 1;
  zoom: var(--size); box-sizing: border-box;
  position: absolute; left: 0; top: 0; width: calc(100vw / var(--size)); height: calc(100vh / var(--size));
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 16px;
  padding: 26px 10px 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#0000 0, #000 64px); mask-image: linear-gradient(#0000 0, #000 64px);
}
.cb * { box-sizing: border-box; }
.cb-msg { position: relative; flex: none; max-width: 100%; padding-top: 17px; transform-origin: 12% 100%; }
.cb-msg.in { animation: cbPop .62s var(--ease-pop); }
.cb-msg.out { animation: cbDrift .9s var(--ease-drift) forwards; }
@keyframes cbPop { 0% { transform: scale(.6) translateY(14px); opacity: .55 } 60% { transform: scale(1.04, .97) } 100% { transform: none; opacity: 1 } }
@keyframes cbDrift { to { transform: translateY(-26px) scale(.96); opacity: 0 } }

/* name tag: solid pill, tilted, sits on the cloud's edge */
.cb-tag { position: absolute; top: 0; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 28px);
  padding: 4px 11px 3px 9px; border-radius: 999px; background: var(--role, var(--sky-deep)); color: #fff;
  font: 15px/1.15 var(--font-name); letter-spacing: .01em; transform: rotate(-3deg); box-shadow: 0 2px 0 #0002; white-space: nowrap; }
.cb-tag b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.cb-tag svg { width: 15px; height: 15px; fill: #fff; flex: none; }
.cb-msg.viewer .cb-tag { background: var(--cloud); color: var(--ink); box-shadow: 0 0 0 2px var(--sky-deep); }
.cb-msg.host { --role: var(--berry); }
.cb-msg.mod { --role: var(--sky-deep); }
.cb-msg.vip { --role: var(--vip); }
.cb-msg.sub { --role: var(--sub); }
.cb.no-roles .cb-tag svg { display: none; }
.cb.no-roles .cb-msg:not(.viewer) .cb-tag { background: var(--sky-deep); }

/* cloud bubble: cream body + three puffs breaking the top edge */
.cb-bubble { position: relative; z-index: 1; min-width: 168px; background: var(--cloud); color: var(--ink);
  border-radius: 22px 22px 22px 8px; padding: 16px 18px 12px; font: 600 16.5px/1.4 var(--font-msg);
  box-shadow: 0 2px 0 var(--sky-deep), 0 8px 18px var(--edge-shadow); overflow-wrap: anywhere; }
.cb-bubble::before { content: ""; position: absolute; right: 18px; top: -15px; width: 104px; height: 24px;
  background:
    radial-gradient(circle at 78px 24px, var(--cloud) 19.5px, #0000 20px),
    radial-gradient(circle at 46px 24px, var(--cloud) 14.5px, #0000 15px),
    radial-gradient(circle at 20px 24px, var(--cloud) 10.5px, #0000 11px);
  filter: drop-shadow(0 -1px 0 #1d2b4a1c); }
.cb-msg.alt .cb-bubble::before { transform: scaleX(-1); }
.cb-bubble img { height: 1.6em; width: auto; vertical-align: -.45em; margin: 0 1px; }
.cb-msg.host .cb-bubble::before { display: none; }

/* host: bunny ears behind the cloud */
.cb-ears { position: absolute; right: 30px; top: -22px; width: 60px; height: 52px; z-index: 0; }
.cb-ears i { position: absolute; bottom: 0; width: 23px; height: 50px; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: var(--cloud); box-shadow: 0 2px 6px var(--edge-shadow); transform-origin: 50% 100%; }
.cb-ears i::after { content: ""; position: absolute; inset: 7px 6px 12px; border-radius: inherit; background: var(--berry); opacity: .8; }
.cb-ears i:first-child { left: 2px; transform: rotate(-12deg); }
.cb-ears i:last-child { right: 2px; transform: rotate(14deg); animation: cbEar 3.4s var(--ease-drift) infinite; }
.cb-msg.in .cb-ears i:first-child { animation: cbEarIn .7s var(--ease-pop); }
@keyframes cbEar { 0%, 80%, 100% { transform: rotate(14deg) } 88% { transform: rotate(30deg) } }
@keyframes cbEarIn { from { transform: rotate(-12deg) scaleY(.3) } }
.cb.no-ears .cb-ears { display: none; }
.cb.no-ears .cb-msg.host .cb-bubble::before { display: block; }

/* the small credit, a tiny cloud tag at the bottom (can be switched off) */
.cb-credit { position: absolute; right: 12px; bottom: 0; font: 600 10px/1 var(--font-msg); letter-spacing: .03em;
  color: var(--ink); background: var(--cloud); padding: 3px 8px 4px; border-radius: 8px 8px 0 0; opacity: .82; }
.cb.no-credit .cb-credit { display: none; }