/* zeb batch decorator */

.zbd-inner-circle-glow {
  mask-image: radial-gradient(circle, #0094ffff 30%, #0094ff50 50%);
  filter: contrast(120%) brightness(90%) hue-rotate(-20deg) saturate(150%);
}

.zbd-blur-image {
  filter: blur(3px) brightness(1.2) contrast(0.8);
}

.zbd-drop-shadow-black {
  filter: drop-shadow(12px 12px 30px rgba(0, 0, 0, 0.9));
}

.zbd-drop-shadow-white {
  filter: drop-shadow(12px 12px 30px rgba(255, 255, 255, 0.9))
}

.zbd-drop-shadow-gold {
  filter: drop-shadow(5px 5px 5px rgba(255, 255, 0, 0.9));
}

.zbd-thought-cloud {
  /* ───────────── Main cloud ───────────── */
  --main-bg: rgba(248, 252, 255, 0.72);
  /* semi-transparent white-blue */
  --accent: rgba(220, 235, 255, 0.55);
  /* very light blue tint */
  --shadow-soft: 0 1.2em 3.5em rgba(90, 130, 240, 0.28);
  --text-color: #2a3855;

  position: relative;
  isolation: isolate;
  /* helps with stacking pseudo-elements */
  width: 100%;
  max-width: 36em;
  min-width: 16em;
  padding: 1.8em 2.2em;
  background: var(--main-bg);
  border-radius: 60% 40% 55% 45% / 68% 62% 38% 32%;
  /* more irregular base */
  box-shadow: var(--shadow-soft),
    inset 0 0.4em 1.8em rgba(255, 255, 255, 0.9),
    inset 0 -0.3em 1em rgba(180, 210, 255, 0.35);
  color: var(--text-color);
  font-family: system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  backdrop-filter: blur(1px);
  /* dreamy softening */
  -webkit-backdrop-filter: blur(1px);
  overflow: hidden;
}

/* ───── Multiple small curvy lobes using radial gradients ───── */
.zbd-thought-cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 12% 78%, var(--accent) 14%, transparent 16%),
    radial-gradient(ellipse at 28% 88%, var(--accent) 11%, transparent 13%),
    radial-gradient(ellipse at 44% 18%, var(--accent) 13%, transparent 15%),
    radial-gradient(ellipse at 72% 82%, var(--accent) 10%, transparent 12%),
    radial-gradient(ellipse at 81% 32%, var(--accent) 12%, transparent 15%);
  opacity: 0.7;
  mix-blend-mode: soft-light;
  /* makes lobes feel integrated */
  pointer-events: none;
  z-index: -1;
}

/* Extra subtle noise/grain for fluffy cloud texture (optional but nice) */
.zbd-thought-cloud::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 44%, rgba(255, 255, 255, 0.4) 2%, transparent 4%),
    radial-gradient(circle at 67% 31%, rgba(255, 255, 255, 0.35) 1.5%, transparent 3.5%),
    radial-gradient(circle at 41% 69%, rgba(220, 240, 255, 0.45) 2.2%, transparent 5%);
  border-radius: inherit;
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}

/* ───── Small floating cloud bumps (more of them, smaller) ───── */
.zbd-thought-cloud>span,
.zbd-thought-cloud::before[data-extra],
.zbd-thought-cloud::after[data-extra] {
  content: "";
  position: absolute;
  background: rgba(248, 252, 255, 0.88);
  border-radius: 50%;
  box-shadow:
    inset 0 0.25em 0.8em rgba(255, 255, 255, 0.9),
    0 0.3em 1.2em rgba(100, 140, 255, 0.16);
}

/* Medium bottom-left cloud */
.zbd-thought-cloud>span {
  width: 3.4em;
  aspect-ratio: 1;
  bottom: -1.4em;
  left: 22%;
  transform: translateX(-50%);
  border-radius: 48% 52% 50% 50% / 55% 60% 40% 45%;
  /* slightly irregular */
}

/* Small right cloud */
.zbd-thought-cloud::before {
  width: 2.2em;
  aspect-ratio: 1;
  bottom: -0.9em;
  right: 18%;
  transform: translateX(40%);
}

/* Tiny trailing bubble */
.zbd-thought-cloud::after {
  width: 1.3em;
  aspect-ratio: 1;
  bottom: -0.5em;
  left: 52%;
  opacity: 0.8;
}

/* ───── Optional: even more curvy variant class ───── */
.zbd-thought-cloud.more-puffy {
  border-radius: 65% 35% 58% 42% / 72% 55% 45% 28%;
  --main-bg: rgba(250, 253, 255, 0.65);
}


.zbd-aura {
  filter:
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.6));
}