// ============================================================================
// Chatbot Header - Menu
// ============================================================================
.pf-chatbot__history {
  .pf-chatbot__drawer-backdrop {
    position: absolute;
    border-radius: var(--pf-t--global--border--radius--medium);
  }

  .pf-chatbot__heading-divider {
    padding-inline-start: var(--pf-t--global--spacer--lg);
    padding-inline-end: var(--pf-t--global--spacer--lg);
  }

  // Drawer title
  // ----------------------------------------------------------------------------
  .pf-chatbot__heading-container {
    padding-inline-start: var(--pf-t--global--spacer--lg);
    padding-inline-end: var(--pf-t--global--spacer--lg);
    display: flex;
    flex-direction: column;
    row-gap: var(--pf-t--global--spacer--sm);
  }
  .pf-chatbot__title {
    font-size: var(--pf-v6-c-title--m-h3--FontSize);
    font-weight: var(--pf-v6-c-title--m-h3--FontWeight);
    line-height: var(--pf-v6-c-title--m-h3--LineHeight);
  }
  .pf-chatbot__title-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--pf-t--global--spacer--gap--text-to-element--default);
  }

  // Drawer search and actions
  .pf-chatbot__history-search-actions {
    .pf-v6-c-button.pf-m-control {
      --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
      --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
    }
  }

  .pf-chatbot__input {
    width: 100%;
  }

  // Drawer menu
  // ----------------------------------------------------------------------------
  .pf-v6-c-menu {
    --pf-v6-c-menu--PaddingBlockStart: 0;
    --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
    // override high contrast style
    --pf-v6-c-menu--BorderWidth: 0;
    overflow: initial;
    position: relative;
  }
  .pf-v6-c-menu__item-main {
    --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
  }

  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
    color: var(--pf-t--global--text--color--subtle);
    font-weight: var(--pf-t--global--font--weight--body--bold);
    font-size: var(--pf-t--global--icon--size--font--sm);
    --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
    --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--pf-t--global--background--color--floating--default);
    z-index: var(--pf-t--global--z-index--md);
  }

  .pf-chatbot__menu-item {
    --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
    --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
    // override high contrast style
    --pf-v6-c-menu__list-item--BorderWidth: 0;
    padding-block-start: var(--pf-t--global--spacer--xs);
    padding-block-end: var(--pf-t--global--spacer--xs);
    color: var(--pf-t--global--text--color--regular);
    font-size: var(--pf-t--global--font--size--body--lg);
    font-weight: var(--pf-t--global--font--weight--body--default);
    border-radius: var(--pf-t--global--border--radius--small);
  }

  li.pf-chatbot__menu-item:hover::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: '';
    border: var(--pf-t--global--border--width--action--plain--hover) solid
      var(--pf-t--global--border--color--high-contrast);
    border-radius: inherit;
  }

  // allows focus state to have border radius
  .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
    overflow: hidden;
  }

  .pf-chatbot__history-actions {
    transform: rotate(90deg);
  }

  .pf-chatbot__menu-item--active {
    background-color: var(--pf-t--global--background--color--action--plain--clicked);
  }

  li.pf-chatbot__menu-item--active::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: '';
    border: var(--pf-t--global--border--width--action--plain--clicked) solid
      var(--pf-t--global--border--color--high-contrast);
    border-radius: inherit;
  }

  button.pf-chatbot__menu-item--active {
    background-color: initial;
  }
}

// Chatbot Header - Drawer
// ----------------------------------------------------------------------------
.pf-chatbot__history.pf-v6-c-drawer {
  --pf-v6-c-drawer__panel--MinWidth: 24rem;
  --pf-v6-c-drawer__panel--xl--MinWidth: 24rem;
  height: 70vh;

  // Drawer panel
  .pf-v6-c-drawer__panel {
    --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
    --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--lg);
    --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
    --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
    overflow-x: hidden;
    overflow-y: hidden;
  }

  // Drawer head
  .pf-v6-c-drawer__head {
    --pf-v6-c-drawer__head--PaddingBlockStart: 0;
    --pf-v6-c-drawer__head--PaddingBlockEnd: 0;
    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);

    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--pf-t--global--spacer--2xl);
  }

  // Drawer actions
  .pf-v6-c-drawer__actions {
    --pf-v6-c-drawer__actions--MarginBlockStart: 0;
    --pf-v6-c-drawer__actions--MarginInlineEnd: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: center;
    width: 100%;
    height: 100%;
  }

  .pf-v6-c-drawer__actions--reversed {
    flex-direction: row-reverse;
  }

  // Close drawer
  .pf-v6-c-drawer__close {
    .pf-v6-c-button {
      width: var(--pf-t--global--spacer--2xl);
      height: var(--pf-t--global--spacer--2xl);
      border-radius: var(--pf-t--global--border--radius--pill);
      justify-content: center;
      align-items: center;
    }
  }

  // Drawer body
  .pf-v6-c-drawer__body {
    --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0;
    --pf-v6-c-drawer__panel__body--PaddingBlockEnd: 0;
    --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
    --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);

    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: 70vh;
  }

  // Resizable drawer spacing is different - needs manual adjustment for gaps between buttons, inputs, etc.
  .pf-v6-c-drawer__panel.pf-m-resizable {
    .pf-v6-c-drawer__panel-main {
      row-gap: var(--pf-v6-c-drawer__panel--RowGap);
    }
  }
}

// ============================================================================
// Chatbot Display Mode - Docked
// ============================================================================
.pf-chatbot--docked {
  .pf-chatbot__history.pf-v6-c-drawer {
    height: 100vh;
  }
}

// ============================================================================
// Chatbot Display Mode - Fullscreen
// ============================================================================
.pf-chatbot--drawer,
.pf-chatbot--fullscreen {
  .pf-chatbot__history.pf-v6-c-drawer {
    height: 100vh;
    .pf-v6-c-drawer__body {
      width: 100%;
    }
  }
}

// ============================================================================
// Chatbot Display Mode - embedded
// ============================================================================
.pf-chatbot--embedded {
  .pf-chatbot__history.pf-v6-c-drawer {
    height: 100%;
    .pf-v6-c-drawer__body {
      width: 100%;
      height: 100%;
    }
    .pf-v6-c-drawer__panel {
      height: 100%;
    }
  }
}

.pf-chatbot--docked,
.pf-chatbot--drawer,
.pf-chatbot--embedded,
.pf-chatbot--fullscreen {
  .pf-chatbot__history {
    .pf-chatbot__drawer-backdrop {
      border-radius: unset;
    }
  }
}

.pf-chatbot__history-loading {
  display: flex;
  padding: var(--pf-t--global--spacer--lg);
  flex-direction: column;
  gap: var(--pf-t--global--spacer--lg);
}

.pf-chatbot__history-loading-block {
  display: flex;
  flex-direction: column;
  gap: var(--pf-t--global--spacer--sm);
  align-self: stretch;
}

.pf-chatbot__history.pf-m-compact {
  .pf-v6-c-drawer__main {
    .pf-v6-c-drawer__panel {
      --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
      --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
      --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
      --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
      --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md);
    }

    .pf-v6-c-drawer__body {
      --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
      --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
    }
  }

  .pf-chatbot__menu-item {
    font-size: var(--pf-t--global--font--size--body--md);
  }

  .pf-v6-c-drawer__head {
    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
  }
  .pf-v6-c-drawer__close {
    .pf-v6-c-button {
      width: 2rem;
      height: 2rem;
      --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
      --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs);
      --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
      --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
    }
  }
}