/* Use the same filled violet and white lettering as primary platform actions. */
html[data-theme] .prompt-template-actions > button {
  background: var(--brand-primary, #c5ed3a) !important;
  border-color: var(--brand-primary, #c5ed3a) !important;
  color: #fff !important;
  font-weight: 600;
}
html[data-theme] .prompt-template-actions > button:hover:not(:disabled) {
  background: var(--brand-primary-hover, #b1d928) !important;
  border-color: var(--brand-primary-hover, #b1d928) !important;
}
html[data-theme] .prompt-template-actions > button svg {
  color: inherit !important;
}

/* A submission causes one sweep. Running-task updates never restart it. */
html[data-theme] .generate-project-button.is-generating::after {
  animation: none;
  opacity: 0;
}
html[data-theme] .generate-project-button:has(> .generation-start-sweep) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
html[data-theme] .generate-project-button > .generation-start-sweep {
  position: absolute;
  inset: 0 auto 0 -65%;
  width: 65%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, #edfdb575 48%, #f6ffd5b0 56%, transparent);
  animation: generation-click-sweep297 1.1s ease-out 1 both;
}
@keyframes generation-click-sweep297 {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(270%); opacity: 0; }
}

/* Override the legacy running > svg spin on the frame itself. */
html[data-theme] .generation-task-trigger.running > .generation-hourglass {
  animation: none !important;
  transform: none !important;
  rotate: none !important;
}
html[data-theme] .generation-hourglass .hourglass-sand {
  color: #e1fa8b;
  transform-box: fill-box;
  transform-origin: center bottom;
}
html[data-theme] .generation-hourglass .hourglass-sand.upper {
  animation: hourglass-drain297 2.4s linear infinite;
}
html[data-theme] .generation-hourglass .hourglass-sand.lower {
  animation: hourglass-fill297 2.4s linear infinite;
}
html[data-theme] .generation-hourglass .hourglass-flow {
  stroke: #edfdb5;
  stroke-dasharray: 1 3;
  animation: hourglass-fall297 .6s linear infinite;
}
@keyframes hourglass-drain297 {
  0% { transform: scaleY(1); opacity: 1; }
  80% { transform: scaleY(.08); opacity: 1; }
  90%, 100% { transform: scaleY(.08); opacity: 0; }
}
@keyframes hourglass-fill297 {
  0% { transform: scaleY(.08); opacity: 1; }
  80% { transform: scaleY(1); opacity: 1; }
  90%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes hourglass-fall297 {
  to { stroke-dashoffset: -4; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .generate-project-button > .generation-start-sweep {
    animation: none;
    opacity: 0;
  }
  html[data-theme] .generation-hourglass :is(.hourglass-sand.upper, .hourglass-sand.lower, .hourglass-flow) {
    animation: none;
  }
}