// Default width
.vf-chatbot-welcome {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin: 0 auto;
  width: 55%;
  padding-right: 1rem;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.vf-chatbot-welcome ::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

// If inside vf-chatbot-modal, override width
.vf-chatbot-modal .vf-chatbot-welcome {
  width: 88%;
  padding: 0 1.5rem;

  &__content {
    min-height: 30vh;
    min-height: 30dvh;
    @media (max-width: 480px) {
      min-height: 35vh;
      min-height: 35dvh;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &__suggestions {
    &-title {
      text-align: left;
    }
    &-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    height: 100vh;
    height: 100dvh;
  }
}

.vf-chatbot-welcome {

  &__content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    @media (max-width: $vf-breakpoint--sm) {
      min-height: 25vh;
    }
  }

  &__logo {

    img {
      width: 64px;
      height: 64px;
      object-fit: contain;
    }
  }

  &__title {
    @include set-type(text-heading--3);
    margin-bottom: 0;
  }

  &__description {
    @include set-type(text-body--3);
      margin-bottom: 0;
  }

  &__suggestions {
    width: 100%;

    &-title {
      @include set-type(text-body--5);
      margin-bottom: 0;
      text-align: center;

      @media (max-width: 480px) {
        text-align: left;
      }
    }

    &-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-items: left;
      gap: 8px;

      & > * {
        width: 100%;
        min-width: min-content;
      }

      @media (max-width: 480px) {
        grid-template-columns: 1fr;
      }
    }
  }

  @media (max-width:$vf-breakpoint--md) {
    width: 95%;
    padding: 0 0.5rem;
  }
  @media (max-width: $vf-breakpoint--sm) {
    // width: 88%;
    padding: 0 0.5rem;
  }
}