/**
 * RESUL host shell styles for full-screen Genie embed.
 * Import once in the host entry (e.g. main.jsx): `import 'resul-genie-ui/resul-host-genie.css'`
 */

/* Neutralize host .rs-page-content-wrapper constraints on /genie */
.rs-page-content-wrapper--genie-shell {
  min-height: 100vh !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  contain: none !important;
}

/**
 * Studio workbench: Genie sets `body.genie-studio-viewport-lock` while `/studio` is active.
 * Without this, the shell rules above keep `height:auto` / `overflow:visible` and the host page scrolls past the viewport (empty tail below the UI).
 */
body.genie-studio-viewport-lock .rs-page-content-wrapper--genie-shell {
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

/* Floating launcher tab (App.jsx) */
.floating-logo {
  position: fixed;
  right: 0;
  bottom: 47%;
  z-index: 99999;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #4464ed 0%, #493beb 100%);
  border: 1px solid #ffffff;
  border-right: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 0 4px 24px 0 rgba(90, 24, 245, 0.1);
  height: 65px;
  width: 65px;
  padding: 0 0 2px 0;
  gap: 0;
  overflow: hidden;
  cursor: pointer;
  transition:
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s,
    gap 0.5s,
    padding 0.5s;
}

.floating-logo__inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.floating-logo__image,
.floating-logo__text {
  width: 100px;
  height: 65px;
  object-fit: contain;
  transition:
    opacity 0.5s,
    transform 0.5s,
    filter 0.4s;
}

.floating-logo__text {
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
}

.floating-logo:hover {
  width: 175px;
  gap: 15px;
  padding-right: 10px;
}

.floating-logo:hover .floating-logo__text {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.floating-logo:hover .floating-logo__image {
  animation: resul-host-floating-logo__glow 0.8s forwards;
  height: 55px;
}

@media (max-width: 1300px) {
  .floating-logo {
    height: 55px;
    width: 50px;
  }

  .floating-logo__inner {
    height: 50px;
  }

  .floating-logo__image,
  .floating-logo__text {
    width: 65px;
    height: 50px;
  }

  .floating-logo:hover {
    width: 130px;
    gap: 10px;
    padding-right: 10px;
  }
}

@keyframes resul-host-floating-logo__glow {
  0% {
    filter: drop-shadow(0 0 3px #5a18f5) drop-shadow(0 0 0px #4464ed);
    transform: rotate(-3deg) scale(1.01);
  }
  20% {
    filter: drop-shadow(0 0 5px #4464ed) drop-shadow(0 0 3px #5a18f5);
    transform: rotate(3deg) scale(1.02);
  }
  40% {
    filter: drop-shadow(0 0 6px #4464ed) drop-shadow(0 0 4px #5a18f5);
    transform: rotate(-2deg) scale(1.01);
  }
  60% {
    filter: drop-shadow(0 0 5px #5a18f5) drop-shadow(0 0 6px #4464ed);
    transform: rotate(2deg) scale(1.015);
  }
  80% {
    filter: drop-shadow(0 0 5px #4464ed) drop-shadow(0 0 3px #5a18f5);
    transform: rotate(-1deg) scale(1.01);
  }
  100% {
    filter: drop-shadow(0 0 3px #5a18f5) drop-shadow(0 0 0px #4464ed);
    transform: rotate(0deg) scale(1);
  }
}
