// ============================================================================
// Chatbot Header
// ============================================================================
.pf-chatbot__header-container {
  display: grid;
}
.pf-chatbot__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--pf-t--global--spacer--sm);
  position: relative; // this is so focus ring on parent chatbot doesn't include header
  background-color: var(--pf-t--global--background--color--secondary--default);
  justify-content: space-between;
  padding: var(--pf-t--global--spacer--lg);

  .pf-chatbot__header-main {
    display: flex;
    gap: var(--pf-t--global--spacer--sm);

    img {
      pointer-events: none; // prevent dragging on any brand images - interferes with FileDropZone
    }
  }

  // Title -or- Brand
  .pf-chatbot__title {
    display: flex;
    align-items: center;
    flex: 1;

    .pf-v6-l-bullseye {
      width: 100%;
    }

    img {
      max-height: 40px;
      vertical-align: middle;
    }
  }

  .pf-chatbot__menu {
    justify-self: start;
  }

  .pf-chatbot__actions {
    justify-self: end;
    display: flex;
    gap: var(--pf-t--global--spacer--sm);
    justify-content: flex-end;
    align-items: center;
    .pf-v6-c-menu-toggle.pf-m-secondary {
      width: 160px;
      --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
    }
  }
}

// ============================================================================
// Chatbot Display Mode - Fullscreen and Embedded
// ============================================================================
@media screen and (min-width: 64rem) {
  .pf-chatbot--fullscreen,
  .pf-chatbot--embedded {
    .pf-chatbot__header {
      background-color: var(--pf-t--global--background--color--primary--default);
    }
    .pf-chatbot__header__divider {
      display: none;
    }
  }
}

// ============================================================================
// Chatbot Display Mode - Docked and Drawer
// ============================================================================
.pf-chatbot--drawer,
.pf-chatbot--docked {
  .pf-chatbot__header {
    background-color: var(--pf-t--global--background--color--secondary--default);
  }
}

// ============================================================================
// Toggle Options
// ============================================================================
.pf-chatbot__button--toggle-options,
.pf-chatbot__button--toggle-menu {
  width: 3rem;
  height: 3rem;
  border-radius: var(--pf-t--global--border--radius--pill);
  align-items: center;
  justify-content: center;

  &::before {
    border-radius: inherit;
  }

  .pf-v6-c-button__icon,
  .pf-v6-c-menu-toggle__icon,
  .pf-v6-c-icon__content {
    color: var(--pf-t--global--icon--color--subtle);
  }

  .pf-v6-c-button__icon,
  .pf-v6-c-menu-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // Interactive states
  &:hover,
  &:focus {
    .pf-v6-c-button__icon,
    .pf-v6-c-menu-toggle__icon,
    .pf-v6-c-icon__content {
      color: var(--pf-t--global--icon--color--regular);
    }
  }
}

// Rotate icon
.pf-chatbot__button--toggle-options {
  svg {
    transform: rotate(90deg);
  }
}

// ============================================================================
// Examples
// ============================================================================
.show-dark,
:where(.pf-v6-theme-dark) .show-light {
  display: none;
}

:where(.pf-v6-theme-dark) .show-dark {
  display: revert;
}

:where(.pf-v6-theme-dark) .show-dark .pf-m-picture {
  display: inline-flex;
}

// ============================================================================
// Information density styles
// ============================================================================
.pf-chatbot.pf-m-compact {
  .pf-chatbot__header {
    gap: var(--pf-t--global--spacer--sm);
    padding: var(--pf-t--global--spacer--md);
  }

  .pf-chatbot__header .pf-chatbot__title img {
    max-height: 24px;
    vertical-align: middle;
  }
}

.pf-v6-c-menu-toggle.pf-chatbot__button--toggle-options.pf-m-compact,
.pf-chatbot__button--toggle-menu.pf-m-compact {
  width: 2rem;
  height: 2rem;
}

.pf-chatbot__header .pf-chatbot__actions .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-compact {
  width: initial;
}

// ============================================================================
// High contrast
// ============================================================================
:root:where(.pf-v6-theme-high-contrast) {
  // Chatbot Display Mode - Fullscreen and Embedded
  @media screen and (min-width: 64rem) {
    .pf-chatbot--fullscreen,
    .pf-chatbot--embedded {
      .pf-chatbot__header__divider {
        display: var(--pf-v6-hidden-visible--Display);
      }
    }
  }
}