discourse-ai/assets/stylesheets/modules/ai-bot/common/ai-artifact.scss

@keyframes remove {
  to {
    height: 0;
    overflow: hidden;
  }
}

@keyframes fade {
  to {
    opacity: 0;
  }
}

.ai-artifact__wrapper {
  height: 500px;
  padding-bottom: 2em;

  iframe {
    width: 100%;
    height: calc(100% - 2em);
  }

  &:not(.ai-artifact__expanded) {
    iframe {
      box-shadow: var(--shadow-card);
    }
  }
}

.ai-artifact__click-to-run {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: var(--primary-very-low);
}

.ai-artifact__panel {
  display: none;
}

html.ai-artifact-expanded {
  overflow: hidden;
}

.ai-artifact__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .ai-artifact__expand-button {
    margin-left: auto;
    padding-right: 0;

    .d-icon {
      font-size: var(--font-down-1);
    }
  }
}

.ai-artifact__panel--wrapper {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.ai-artifact__expanded {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: z("fullscreen");
  background-color: var(--secondary);

  .ai-artifact__footer {
    display: none;
  }

  .ai-artifact__panel--wrapper {
    position: absolute;
    top: 2em;
    left: 2em;
    right: 2em;
    height: 2em;
    z-index: 1000000;
    display: flex;
    justify-content: center;
    opacity: 1;
  }

  .ai-artifact__panel {
    display: block;
    position: absolute;
    animation:
      fade 0.75s forwards,
      remove 1s forwards;
    animation-delay: 4s;
    background-color: var(--primary);
    opacity: 0.9;
    border-radius: var(--d-button-border-radius);
    transform: translateY(0);
    box-shadow: var(--shadow-card);
    font-size: var(--font-up-1);

    &:hover {
      animation-play-state: paused;
      opacity: 1;
    }

    button {
      box-sizing: border-box;
      justify-content: center;
      color: var(--secondary-very-high);
      margin: 0 auto;

      &:hover {
        color: var(--secondary-very-high);

        .d-icon {
          color: var(--secondary-high);
        }
      }
    }
  }

  iframe {
    position: fixed;
    top: 0;
    height: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: z("fullscreen");
  }
}