/* Extracted from index.html. Super Banana side promotion styles. */

.super-banana-side-ad {
  position: fixed;
  left: var(--super-banana-side-ad-left, 24px);
  top: var(--super-banana-side-ad-top, 156px);
  width: 220px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  z-index: 10020;
  display: none;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.super-banana-side-ad.is-shine::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.58) 50%,
    transparent 58%,
    transparent 100%
  );
  transform: translateX(-75%) rotate(0.001deg);
  animation: super-banana-ad-shine 4.8s ease-in-out infinite;
}

@keyframes super-banana-ad-shine {
  0% { transform: translateX(-75%) rotate(0.001deg); opacity: 0; }
  18% { opacity: 0; }
  34% { opacity: 1; }
  58% { transform: translateX(75%) rotate(0.001deg); opacity: 0; }
  100% { transform: translateX(75%) rotate(0.001deg); opacity: 0; }
}

body.super-banana-ad-ready:has(#ai-image.panel.active) .super-banana-side-ad.is-visible,
.super-banana-side-ad.force-visible {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

body.auth-required .super-banana-side-ad,
body.auth-required .super-banana-side-ad.force-visible {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.super-banana-side-ad img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 520px) {
  .super-banana-side-ad {
    display: none !important;
  }
}