/* ============================================================
   Wiwo Neo — Thinking Orb (faithful liquid-glass look).
   Multi-layer: body (green->blue liquid) + veil + light + sparks.
   NO backdrop-filter (Mac perf); only one small inner blur layer.
   One instance at a time, only while "thinking". Honors
   prefers-reduced-motion. Sizes via .wiwo-orb--{sm..xl}.
   Markup (built by wiwo.orb.js):
     <span class="wiwo-orb">
       <span class="wiwo-orb__body">
         <span class="wiwo-orb__veil"></span>
         <span class="wiwo-orb__light"></span>
       </span>
       <i class="wiwo-orb__spark s1"></i> …s2 …s3
     </span>
   ============================================================ */

.wiwo-orb {
  --orb-size: 64px;
  --orb-speed: 4200ms;
  --orb-flow: 6200ms;
  --orb-ease: var(--ease-expressive, cubic-bezier(.2, 0, 0, 1));
  --g: var(--wiwo-green, #3BFF00);
  --b: var(--wiwo-blue, #4242FF);
  --k: var(--wiwo-beige, #F8FAD7);
  position: relative;
  display: inline-block;
  width: var(--orb-size);
  height: var(--orb-size);
  flex: 0 0 auto;
  vertical-align: middle;
  isolation: isolate;
}

/* --- the liquid glass blob --- */
.wiwo-orb__body {
  position: absolute;
  inset: 0;
  border-radius: 46% 54% 52% 48% / 48% 42% 58% 52%;
  border: 1px solid rgba(248, 250, 215, .5);
  background:
    radial-gradient(ellipse at 32% 28%, rgba(255, 255, 255, .62), rgba(248, 250, 215, .18) 30%, transparent 55%),
    radial-gradient(circle at 20% 64%, rgba(59, 255, 0, .72), transparent 50%),
    radial-gradient(circle at 82% 44%, rgba(66, 66, 255, .68), transparent 54%),
    conic-gradient(from 160deg, rgba(59, 255, 0, .5), rgba(248, 250, 215, .3), rgba(66, 66, 255, .5), rgba(66, 66, 255, .4), rgba(59, 255, 0, .48)),
    /* opaque base so the orb stays luminous on any backdrop (incl. the dim overlay) */
    radial-gradient(circle at 44% 40%, rgba(216, 232, 255, .95), rgba(126, 158, 212, .95) 46%, rgba(52, 80, 104, .98) 100%);
  background-size: 130% 130%, 120% 120%, 120% 120%, 220% 220%, 100% 100%;
  box-shadow:
    0 10px 34px rgba(66, 66, 255, .22),
    0 0 50px rgba(66, 66, 255, .30),
    0 0 40px rgba(59, 255, 0, .22),
    inset 0 2px 14px rgba(255, 255, 255, .5),
    inset -8px -10px 26px rgba(66, 66, 255, .16),
    inset 10px 12px 30px rgba(59, 255, 0, .16),
    inset 0 0 0 8px rgba(248, 250, 215, .06);
  transform: translateZ(0);
  will-change: transform;
  animation:
    wiwo-orb-breathe var(--orb-speed) var(--orb-ease) infinite,
    wiwo-orb-flow var(--orb-flow) linear infinite;
}

/* liquid swirl (blurred, screen-blended) */
.wiwo-orb__veil {
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 22%, rgba(255, 255, 255, .28), transparent 34%),
    radial-gradient(ellipse at 66% 72%, rgba(59, 255, 0, .22), transparent 32%),
    conic-gradient(from 220deg, transparent, rgba(248, 250, 215, .16), rgba(66, 66, 255, .5), transparent 60%, rgba(59, 255, 0, .5), transparent);
  filter: blur(6px) saturate(1.16);
  mix-blend-mode: screen;
  opacity: .62;
  animation: wiwo-orb-veil 7200ms var(--orb-ease) infinite;
}

/* travelling highlight */
.wiwo-orb__light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 26% 20%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .18) 26%, transparent 48%),
    radial-gradient(circle at 66% 46%, rgba(248, 250, 215, .18), transparent 20%);
  mix-blend-mode: screen;
  opacity: .86;
  animation: wiwo-orb-light 5400ms var(--orb-ease) infinite alternate;
}

/* floating sparks (beige glints with glow) */
.wiwo-orb__spark {
  position: absolute;
  width: calc(var(--orb-size) * .09);
  height: calc(var(--orb-size) * .09);
  border-radius: 50%;
  background: var(--k);
  box-shadow: 0 0 8px rgba(248, 250, 215, .9), 0 0 20px rgba(66, 66, 255, .45);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .85;
  animation: wiwo-orb-spark 2800ms var(--orb-ease) infinite;
}
.wiwo-orb__spark.s1 { right: 12%; top: 14%; animation-delay: 0ms; }
.wiwo-orb__spark.s2 { left: 8%;  bottom: 18%; width: calc(var(--orb-size) * .06); height: calc(var(--orb-size) * .06); animation-delay: 900ms; }
.wiwo-orb__spark.s3 { right: 18%; bottom: 10%; width: calc(var(--orb-size) * .05); height: calc(var(--orb-size) * .05); animation-delay: 1600ms; box-shadow: 0 0 8px rgba(59, 255, 0, .8), 0 0 18px rgba(59, 255, 0, .4); }

/* sizes */
.wiwo-orb--sm { --orb-size: 24px; }
.wiwo-orb--md { --orb-size: 42px; }
.wiwo-orb--lg { --orb-size: 130px; }
.wiwo-orb--xl { --orb-size: 230px; }
.wiwo-orb--sm .wiwo-orb__spark.s2,
.wiwo-orb--sm .wiwo-orb__spark.s3 { display: none; }   /* keep tiny loader clean */

/* calm variant (topbar launcher): gentle pulse only */
.wiwo-orb--calm .wiwo-orb__body { animation: wiwo-orb-pulse 3600ms var(--orb-ease) infinite; }

@keyframes wiwo-orb-breathe {
  0%, 100% { transform: translateZ(0) scale(1) rotate(0deg);    border-radius: 46% 54% 52% 48% / 48% 42% 58% 52%; }
  44%      { transform: translateZ(0) scale(1.05) rotate(4deg);  border-radius: 52% 48% 45% 55% / 44% 55% 45% 56%; }
  72%      { transform: translateZ(0) scale(.985) rotate(-3deg); border-radius: 43% 57% 58% 42% / 54% 44% 56% 46%; }
}
@keyframes wiwo-orb-flow {
  0%   { background-position: 12% 18%, 20% 64%, 82% 44%, 0% 50%, 50% 50%; }
  50%  { background-position: 22% 28%, 30% 58%, 70% 52%, 100% 50%, 50% 50%; }
  100% { background-position: 12% 18%, 20% 64%, 82% 44%, 0% 50%, 50% 50%; }
}
@keyframes wiwo-orb-veil {
  0%, 100% { transform: rotate(0deg) scale(1); }
  46%      { transform: rotate(150deg) scale(1.06); }
  72%      { transform: rotate(250deg) scale(.96); }
}
@keyframes wiwo-orb-light {
  0%   { transform: translate3d(-1%, -2%, 0) scale(1);    opacity: .6; }
  100% { transform: translate3d(4%, 6%, 0) scale(1.05);   opacity: .9; }
}
@keyframes wiwo-orb-spark {
  0%, 100% { transform: scale(.6); opacity: .25; }
  50%      { transform: scale(1);  opacity: .95; }
}
@keyframes wiwo-orb-pulse {
  0%, 100% { transform: translateZ(0) scale(1);   box-shadow: 0 8px 26px rgba(66,66,255,.24), 0 0 34px rgba(66,66,255,.28); }
  50%      { transform: translateZ(0) scale(1.06); box-shadow: 0 10px 34px rgba(66,66,255,.32), 0 0 46px rgba(59,255,0,.26); }
}

/* ---- inline loader (orb + label) ---- */
.wiwo-orb-loader {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-family: var(--font-system);
  font-weight: var(--weight-nav, 600);
}
.wiwo-orb-loader .wiwo-orb-loader__text { font-size: var(--step-0, 1rem); }
.wiwo-orb-loader .wiwo-orb-loader__text small { display: block; color: var(--muted); font-weight: var(--weight-meta, 500); }

/* ---- processing overlay (dims a container or the whole screen) ---- */
.wiwo-orb-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  animation: wiwo-orb-overlay-in var(--motion-fast, 160ms) var(--ease-expressive, cubic-bezier(.2, 0, 0, 1)) forwards;
}
.wiwo-orb-overlay.is-scoped { position: absolute; }
.wiwo-orb-overlay__label { color: var(--ink); font-family: var(--font-system); font-weight: var(--weight-nav, 600); font-size: var(--step-1, 1.2rem); text-align: center; }
.wiwo-orb-overlay__label small { display: block; margin-top: 4px; color: var(--muted); font-size: var(--step--1, .9rem); font-weight: var(--weight-meta, 500); }
@keyframes wiwo-orb-overlay-in { to { opacity: 1; } }
.wiwo-orb-overlay.is-closing { animation: wiwo-orb-overlay-out var(--motion-fast, 160ms) var(--ease-expressive, cubic-bezier(.2, 0, 0, 1)) forwards; }
@keyframes wiwo-orb-overlay-out { to { opacity: 0; } }

/* ---- DataTables loader as a mini-orb ----
   The core .dt-loader is a plain <div> (no children), so it can't hold the
   full layer stack; we give it the body look + breathe/flow and hide bars. */
.dt-loader:not(:required) {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(248, 250, 215, .5) !important;
  border-radius: 46% 54% 52% 48% / 48% 42% 58% 52% !important;
  text-indent: -9999px;
  background:
    radial-gradient(ellipse at 32% 28%, rgba(255, 255, 255, .6), rgba(248, 250, 215, .16) 30%, transparent 55%),
    radial-gradient(circle at 20% 64%, rgba(59, 255, 0, .72), transparent 50%),
    radial-gradient(circle at 82% 44%, rgba(66, 66, 255, .68), transparent 54%),
    conic-gradient(from 160deg, rgba(59, 255, 0, .5), rgba(248, 250, 215, .3), rgba(66, 66, 255, .5), rgba(66, 66, 255, .4), rgba(59, 255, 0, .48)),
    radial-gradient(circle at 44% 40%, rgba(216, 232, 255, .95), rgba(126, 158, 212, .95) 46%, rgba(52, 80, 104, .98) 100%) !important;
  background-size: 130% 130%, 120% 120%, 120% 120%, 220% 220%, 100% 100% !important;
  box-shadow:
    0 6px 22px rgba(66, 66, 255, .24),
    0 0 34px rgba(66, 66, 255, .30),
    inset 0 2px 10px rgba(255, 255, 255, .48),
    inset 8px 10px 22px rgba(59, 255, 0, .14) !important;
  -webkit-animation: wiwo-orb-breathe 4200ms var(--ease-expressive, cubic-bezier(.2, 0, 0, 1)) infinite,
                     wiwo-orb-flow 6200ms linear infinite !important;
  animation: wiwo-orb-breathe 4200ms var(--ease-expressive, cubic-bezier(.2, 0, 0, 1)) infinite,
             wiwo-orb-flow 6200ms linear infinite !important;
}
.dt-loader:not(:required):before,
.dt-loader:not(:required):after { display: none !important; content: none !important; }

/* ---- reduced motion: freeze everything ---- */
@media (prefers-reduced-motion: reduce) {
  .wiwo-orb__body,
  .wiwo-orb__veil,
  .wiwo-orb__light,
  .wiwo-orb__spark,
  .dt-loader:not(:required) { animation: none !important; }
  .wiwo-orb-overlay { animation: none !important; opacity: 1; }
}