@import './JumpButton';

.pf-chatbot__messagebox {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  row-gap: var(--pf-t--global--spacer--sm);
  padding: var(--pf-t--global--spacer--lg);

  // 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: 100%;
  }
  // allows for zoom conditions; try zooming to 200% to see
  @media screen and (max-height: 518px) {
    overflow-y: visible;
  }
}

.pf-chatbot__messagebox--bottom > :first-child {
  margin-top: auto !important;
}

@media screen and (min-width: 64rem) {
  .pf-chatbot--embedded,
  .pf-chatbot--drawer,
  .pf-chatbot--fullscreen {
    .pf-chatbot__messagebox {
      max-width: 60rem;
      width: 100%;
    }
  }
}

.pf-chatbot.pf-m-compact {
  .pf-chatbot__messagebox {
    padding: var(--pf-t--global--spacer--md);
  }
}