// ============================================================================
// Chatbot
// ============================================================================
.pf-chatbot {
  position: fixed;
  inset-block-end: var(--pf-t--global--spacer--800); // no associated semantic token
  inset-inline-end: var(--pf-t--global--spacer--lg);
  display: flex;
  flex-direction: column;
  width: 30rem;
  height: 70vh;
  background-color: var(--pf-t--global--background--color--secondary--default);
  border-radius: var(--pf-t--global--border--radius--medium);
  box-shadow: var(--pf-t--global--box-shadow--lg);
  font-size: var(--pf-t--global--font--size--md);
  z-index: var(--pf-t--global--z-index--md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
  &--hidden {
    pointer-events: none;
    opacity: 0;
    transform: translateY(16px);
  }
  &--visible {
    opacity: 1;
    transform: translateY(0);
  }
  // for high contrast support
  border: var(--pf-t--global--border--width--high-contrast--regular) solid
    var(--pf-t--global--border--color--high-contrast);

  // 32 rem is the width of the overlay chatbot plus the insets
  // if the screen is smaller, we want to be 100%
  @media screen and (max-width: 32rem) {
    width: 100vw;
    inset-inline-end: 0;
  }

  // allows for zoom conditions; try zooming to 200% to see
  @media screen and (max-height: 518px) {
    overflow: auto;
  }
}

// ============================================================================
// Chatbot Display Mode - Docked
// ============================================================================
.pf-chatbot--docked {
  // for high contrast support
  border: unset;
  border-left: var(--pf-t--global--border--width--high-contrast--regular) solid
    var(--pf-t--global--border--color--high-contrast);
  inset-block-end: 0;
  inset-inline-end: 0;
  padding: 0;
  height: 100%;
  border-radius: 0;
  box-shadow: var(--pf-t--global--box-shadow--lg--left);
  overflow: inherit;

  // 30rem is the width of the docked chatbot
  // if the screen is smaller, we want to be 100%
  @media screen and (max-width: 30rem) {
    width: 100%;
  }
}

// ============================================================================
// Chatbot Display Mode - Fullscreen
// ============================================================================
.pf-chatbot--fullscreen {
  // for high contrast support
  border: unset;
  inset-block-end: 0;
  inset-inline-end: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

// ============================================================================
// Chatbot Display Mode - Embedded
// ============================================================================
.pf-chatbot--embedded {
  // for high contrast support
  border: unset;
  position: static;
  width: 100%;
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
}

.pf-chatbot-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--pf-t--global--border--radius--medium);
  overflow: hidden;

  // Hide chatbot
  &--hidden {
    pointer-events: none;
  }

  // allows for zoom conditions; try zooming to 200% to see
  @media screen and (max-height: 518px) {
    overflow: auto;
  }
}

.pf-chatbot-container--embedded {
  min-height: 100%;
}

.pf-chatbot-container--docked,
.pf-chatbot-container--embedded,
.pf-chatbot-container--fullscreen {
  border-radius: unset;
}

// ============================================================================
// Chatbot Display Mode - Drawer
// ============================================================================
.pf-chatbot--drawer {
  inset-block-end: 0;
  inset-inline-end: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  border-color: var(--pf-t--global--border--color--default);

  .pf-chatbot-container {
    border-radius: var(--pf-t--global--border--radius--sharp);
  }

  @media screen and (min-width: 768px) {
    // only want if drawer open - drawer closes/stops being inline on mobile
    border-left: var(--pf-t--global--border--width--divider--default) solid;
  }
}

// for high contrast support
:root:where(.pf-v6-theme-high-contrast) {
  .pf-chatbot--drawer {
    border: unset;
  }
}

// ============================================================================
// Information density styles
// ============================================================================
.pf-chatbot.pf-m-compact {
  font-size: var(--pf-t--global--font--size--sm);
}