.preview {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;

  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #ced3d9;

  .head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 8px 12px;
  }

  .body {
    flex: 1 1 0%;
    min-height: 0;
    padding: 0 4px 6px 6px;
    overflow: auto;
    overflow: overlay;

    &.html {
      border-radius: 8px;
      background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
      background-size: 16px 16px;
      background-color: #ffffff;
    }
  }
}

.text {
  &:empty {
    height: 300px;
  }
}

.html {
  position: relative;
  height: 100%;

  iframe {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
  }

  .loader {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      font-size: 40px;
      font-family: system-ui, sans-serif;
      font-weight: bold;
      color: #165dff00;
      -webkit-text-stroke: 1px #165dff;
      text-transform: uppercase;
      background: linear-gradient(-60deg, #165dff00 33%, #165dff 0 67%, #165dff00 0) 0/300% 100% no-repeat text;
      animation: l2 10s linear infinite;

      &:before {
        content: 'Beyond AI';
      }
    }
  }

  @keyframes l2 {
    0% {
      background-position: 100%;
    }
  }
}
