/* ============================================================================
   wb-ui · image-generation（图像生成状态卡片）
   1:1 移植自 aicss.dev ImageGeneration.module.css（fetched 2026-08-13）。
   点阵画布 + 游走光斑（双 mask 椭圆 morph/breathe）+ 分辨率角标 +
   「Generating image」shimmer 标签。仅入库不接入（无图像生成 run event）。
   data-state：running（动效）/ ok（光斑静止、标签实色）/ error / empty。
   零裸色（shimmer 与 task-list 同值复用 --wbui-todo-shimmer-*）。
   ========================================================================== */

.wbui-image-generation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;                    /* 上游原值 */
  font-family: var(--wbui-sans);
}
.wbui-image-generation[data-state="empty"] { display: none; }

.wbui-ig-canvas {
  position: relative;
  width: 100%;
  max-width: 208px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: var(--wbui-ig-canvas);
  overflow: hidden;
}
.wbui-ig-dots {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--wbui-ink-2) 0.7px, transparent 1.3px);
  background-size: 11px 11px;
  background-repeat: space;
  opacity: 0.22;
}
.wbui-ig-glow {
  position: absolute;
  inset: 2px;
  background-image: radial-gradient(circle, var(--wbui-accent) 1.1px, transparent 1.6px);
  background-size: 11px 11px;
  background-repeat: space;
  -webkit-mask-image: radial-gradient(ellipse at center, var(--wbui-mask-opaque) 0%, transparent 60%), radial-gradient(ellipse at center, var(--wbui-mask-opaque) 0%, transparent 62%);
  mask-image: radial-gradient(ellipse at center, var(--wbui-mask-opaque) 0%, transparent 60%), radial-gradient(ellipse at center, var(--wbui-mask-opaque) 0%, transparent 62%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 72% 62%, 52% 52%;
  mask-size: 72% 62%, 52% 52%;
  -webkit-mask-position: 16% 20%, 30% 32%;
  mask-position: 16% 20%, 30% 32%;
  animation: wbui-ig-morph 4.2s var(--wbui-ease-spring) infinite, wbui-ig-breathe 1.9s var(--wbui-ease-in-out) infinite;
}
.wbui-image-generation[data-state="ok"] .wbui-ig-glow,
.wbui-image-generation[data-state="error"] .wbui-ig-glow { animation: none; opacity: 0.7; }

@keyframes wbui-ig-morph {
  0% { -webkit-mask-size: 52% 46%, 40% 40%; mask-size: 52% 46%, 40% 40%; -webkit-mask-position: 16% 20%, 30% 32%; mask-position: 16% 20%, 30% 32%; }
  25% { -webkit-mask-size: 46% 58%, 44% 38%; mask-size: 46% 58%, 44% 38%; -webkit-mask-position: 84% 16%, 66% 30%; mask-position: 84% 16%, 66% 30%; }
  50% { -webkit-mask-size: 60% 44%, 38% 46%; mask-size: 60% 44%, 38% 46%; -webkit-mask-position: 82% 84%, 62% 68%; mask-position: 82% 84%, 62% 68%; }
  75% { -webkit-mask-size: 48% 54%, 46% 40%; mask-size: 48% 54%, 46% 40%; -webkit-mask-position: 14% 82%, 34% 66%; mask-position: 14% 82%, 34% 66%; }
  100% { -webkit-mask-size: 52% 46%, 40% 40%; mask-size: 52% 46%, 40% 40%; -webkit-mask-position: 16% 20%, 30% 32%; mask-position: 16% 20%, 30% 32%; }
}
@keyframes wbui-ig-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.wbui-ig-res {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--wbui-mono);
  font-size: 11px;
  color: var(--wbui-ink-2);
  background: var(--wbui-ig-res-bg);
  padding: 2px 7px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.wbui-ig-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: 208px;
}
.wbui-ig-label {
  background: linear-gradient(
    90deg,
    var(--wbui-todo-shimmer-ink) 0%, var(--wbui-todo-shimmer-ink) 30%,
    var(--wbui-todo-shimmer-fade) 45%, var(--wbui-todo-shimmer-fade) 55%,
    var(--wbui-todo-shimmer-ink) 70%, var(--wbui-todo-shimmer-ink) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wbui-ig-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  font-weight: 550;              /* 上游原值 */
  font-size: 14px;
}
.wbui-image-generation[data-state="ok"] .wbui-ig-label,
.wbui-image-generation[data-state="error"] .wbui-ig-label {
  animation: none;
  background: none;
  -webkit-text-fill-color: var(--wbui-ink);
  color: var(--wbui-ink);
}
.wbui-image-generation[data-state="error"] .wbui-ig-label {
  -webkit-text-fill-color: var(--wbui-danger);
  color: var(--wbui-danger);
}
@keyframes wbui-ig-shine {
  0%, 18% { background-position: 100% 0; }
  82%, 100% { background-position: 0% 0; }
}
.wbui-ig-prompt { color: var(--wbui-ink-2); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .wbui-ig-glow { animation: none; opacity: 0.7; }
  .wbui-ig-label {
    animation: none;
    -webkit-text-fill-color: var(--wbui-ink);
    color: var(--wbui-ink);
    background: none;
  }
}