.vf-chatbot-dialog {
  position: absolute; // Change from fixed to absolute
  top: 0;
  left: 0;
  padding: 0 8px;
  width: 96%;
  height: -webkit-fill-available;  // Safari/WebKit
  height: -moz-available;          // Firefox
  height: fill-available;
  height: 100%;                   // Fallback for all browsers
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999; // Increase z-index to be above other modal elements
  border-radius: $vf-radius--sm;
  border-bottom-right-radius: 0px;

  &__content {
    background: white;
    padding: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 4px 6px ui-color(black);
    position: relative;
    margin: auto;
    animation: dialogFadeIn 0.2s ease-out;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    // margin-bottom: 16px;
  }

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

  &__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0px;

    &:hover {
      opacity: 0.7;
    }
  }

  &__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  &__button {
    @include set-type(text-button--2);
    padding: 12px 16px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.2s;

    &--outline {
      background: none;
      border: 2px solid var(--vf-color--blue);
      color: var(--vf-color--blue);
    }

    &--primary {
      background: var(--vf-color--blue);
      border: none;
      color: white;
    }
  }
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}