:host {
  /**
   * @prop --klevu-moi-slides-width 200px: Width of each product slide
   * @prop --klevu-moi-height 550px: Height of the popup
   * @prop --klevu-moi-width 640px: Width of the popup
   */
  display: block;
  --klevu-slides-item-width: var(--klevu-moi-slides-width, 200px);
  --container-height: var(--klevu-moi-height, 550px);
  --container-width: var(--klevu-moi-width, 640px);
}

.popup {
  display: none;
  position: fixed;
  bottom: -100vh;
  right: 20px;
  height: var(--container-height);
  width: var(--container-width);
  max-height: 100vh;
  max-width: calc(100vw - 20px);
  background: var(--klevu-color-neutral-1);
  border-radius: var(--klevu-border-radius-m);
  box-shadow: var(--klevu-elevation-3);
  padding: var(--klevu-spacing-04);
  z-index: 100;
  transition-property: bottom, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
  opacity: 0;
  box-sizing: border-box;
}

.popup.show {
  display: block;
}

.popup.open {
  bottom: 20px;
  right: 20px;
  height: var(--container-height);
  width: var(--container-width);
  opacity: 1;
}

@media (max-width: 640px) {
  .popup {
    right: 0;
    bottom: -100vh;
    max-width: 100vw;
    height: 100vh;
  }

  .popup.open {
    right: 0;
    bottom: 0;
    max-width: 100vw;
    height: 100vh;
  }
}

klevu-chat-messages {
  height: calc(var(--container-height) - 250px);
}

.menu {
  display: flex;
  flex-direction: column;
  gap: var(--klevu-spacing-03);
}

.genericactions {
  margin: var(--klevu-spacing-03) 0;
  display: flex;
  flex-direction: row;
  gap: var(--klevu-spacing-03);
  flex-wrap: wrap;
  justify-content: center;
}

div[slot="header"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--klevu-spacing-02) var(--klevu-spacing-02);
  flex-shrink: 0;
  margin-bottom: var(--klevu-spacing-04);
  border-bottom: 1px solid var(--klevu-color-neutral-4);
}