.pf-chatbot__dropzone {
  gap: unset; // default PF value causes alignment issues when this is used to wrap other components, notably in the footer
  flex: 1;
}

.pf-chatbot__dropzone--invisible {
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;

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

.pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
  margin-block-start: var(--pf-t--global--spacer--lg);
  margin-block-end: var(--pf-t--global--spacer--lg);
  margin-inline-start: var(--pf-t--global--spacer--lg);
  margin-inline-end: var(--pf-t--global--spacer--lg);

  .pf-v6-c-multiple-file-upload__main {
    --pf-v6-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
    --pf-v6-c-multiple-file-upload__main--BorderStyle: dashed;
    --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
    --pf-v6-c-multiple-file-upload__main--BorderRadius: var(--pf-t--global--border--radius--medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/** Used in example only */
.pf-chatbot__file-drop-zone-example {
  border: var(--pf-t--global--border--width--divider--default) solid var(--pf-t--global--border--color--default);
  height: 100vh;
  width: 100%;
  padding: var(--pf-t--global--spacer--md);
}

.pf-chatbot--default {
  // allows for zoom conditions; try zooming to 200% to see
  .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
    @media screen and (max-height: 518px) {
      display: flex;
      height: 100%;
      overflow: hidden;

      .pf-v6-c-multiple-file-upload__main {
        width: 100%;
      }
    }
  }
}