.generated-image-actions {
  pointer-events: none;
  opacity: 0;
}

.generated-image {
  background: #fbf8f4;
}

.ai-orb-loader {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(45deg, #4285f4, #9b51e0, #ea4335, #fbbc05);
  background-size: 300% 300%;
  box-shadow: 0 0 20px rgb(155 81 224 / 60%);
  animation: morphOrb 4s ease-in-out infinite, shiftGradient 3s ease infinite;
}

.generated-image-placeholder {
  box-sizing: border-box;
  background: #fbf8f4;
}

.generated-image-feedback-field {
  field-sizing: content;
  min-height: 2.5rem;
  max-height: 12rem;
  overflow-y: auto;
  resize: vertical;
}

@keyframes morphOrb {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: scale(1); }
  50% { border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%; transform: scale(1.1); }
}

@keyframes shiftGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.generated-image:hover .generated-image-actions,
.generated-image:focus-within .generated-image-actions {
  pointer-events: auto;
  opacity: 1;
}

.generated-image-menu {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  z-index: 40;
  width: 10rem;
  overflow: hidden;
  border: 1px solid rgb(45 41 36 / 14%);
  border-radius: .5rem;
  background: #fbf8f4;
  box-shadow: 0 10px 24px rgb(45 41 36 / 18%);
  padding: .35rem 0;
}

.generated-image-menu button {
  display: block;
  width: 100%;
  padding: .55rem .75rem;
  color: #2d2924;
  font-size: .8rem;
  font-weight: 650;
  text-align: left;
}

.generated-image-menu button:hover,
.generated-image-menu button:focus-visible {
  background: rgb(45 41 36 / 8%);
}

.generated-image-menu [data-generated-image-status]:not(.hidden) {
  padding: .5rem .75rem;
  color: #9f1239;
  font-size: .7rem;
}