/* Light is attached to the product surface, not to fixed side strips.
   The complete timeline owns opacity, spread and angle, including pause/seek. */
.workspace-frame,#waimao .ai-sender-editor{
  --product-spectrum:conic-gradient(from var(--light-angle,-90deg),
    #8c7aee 0deg,#81b7f3 70deg,#b3b4f1 125deg,
    #e6a1cd 170deg,#f19f89 215deg,#f4c8a0 238deg,
    rgb(244 200 160 / .12) 260deg,rgb(197 162 233 / .10) 282deg,
    #c5a2e9 320deg,#8c7aee 360deg);
}
/* The embed has a transparent 160-native-pixel bleed on every side.
   Only the inner content viewport clips; light may cross the original canvas. */
body.has-light-bleed .canvas{overflow:visible}

/* First shot: a short, outward bloom as the task finishes typing. */
#waimao .ai-input-box__hero::before,
#waimao .ai-input-box__hero::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;
  border-radius:50%;opacity:var(--input-bloom,0);
  transform:translate3d(0,var(--bloom-y,0px),0) scale(var(--bloom-spread,.8));
  transform-origin:50% 55%;
  transition:opacity .18s ease-out;
}
#waimao .ai-input-box__hero::before{
  inset:-100px -50px;
  background:
    radial-gradient(ellipse at 16% 48%,#9e91f0a8 0,transparent 51%),
    radial-gradient(ellipse at 49% 32%,#93c7f58c 0,transparent 49%),
    radial-gradient(ellipse at 83% 54%,#f0accb9c 0,transparent 49%),
    radial-gradient(ellipse at 66% 76%,#f7d09d99 0,transparent 48%);
  filter:blur(30px);
}
#waimao .ai-input-box__hero::after{
  inset:-28px -8px;
  background:linear-gradient(105deg,#a89aef80 0%,#93c6f571 35%,#e5b4da80 70%,#f5c4a670 100%);
  filter:blur(22px);
}
#waimao .waimao-official-hero .ai-sender-editor{
  --light-angle:var(--demo-edge-angle,180deg);
  box-shadow:0 6px 20px #635b9d0a;
}
#waimao .waimao-official-hero .ai-sender-editor::before{
  opacity:var(--input-bloom,0);transition:opacity .18s ease-out;
}
#waimao .waimao-official-hero .ai-sender-editor::after{
  background-image:var(--product-spectrum);
  opacity:var(--edge-amount,1);
}

/* Full UI: one crisp perimeter and two matching, progressively softer halos.
   Both halo masks have an empty centre so they never wash out the UI. */
.workspace-frame{
  --light-angle:var(--angle,-90deg);
  --product-spectrum:conic-gradient(from var(--light-angle,-90deg),
    #7752f0 0deg,#4f9df5 60deg,#9581ed 110deg,
    #e57bbc 160deg,#f28868 205deg,#eeb477 235deg,
    rgb(238 180 119 / .12) 258deg,rgb(174 125 229 / .10) 282deg,
    #ae7de5 320deg,#7752f0 360deg);
}
.workspace-ambient{
  inset:-14px;z-index:-1;opacity:var(--amb,0);
  background:none;filter:blur(18px);transform:scale(var(--ambient-spread,1));
}
.workspace-ambient::before,
.workspace-ambient::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:30px;padding:14px;background:var(--product-spectrum);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.workspace-ambient::before{opacity:.66}
.workspace-ambient::after{inset:-10px;border-radius:40px;padding:18px;filter:blur(12px);opacity:.38}
.workspace-edge{
  inset:-1.5px;border-radius:17.5px;padding:2.5px;
  background:var(--product-spectrum);box-shadow:none;
}
.workspace-edge::before{
  /* No second tight rim: the separate ambient layer supplies diffuse light. */
  content:none;
}
.workspace-panel{border-radius:15px}
@media(prefers-reduced-motion:reduce){
  #waimao .ai-input-box__hero::before,#waimao .ai-input-box__hero::after{display:none}
  .workspace-ambient{transform:none}
}