:host {
  /*
   * @prop --klevu-product-query-popup-height 500px: Height of the popup. Width is controlled with prop and height with CSS property.
   */
  display: block;
  text-align: left;
  --cornflower-blue: #428aca;
  --popup-height: var(--klevu-product-query-popup-height, 500px);
  --popup-width: var(--klevu-product-query-popup-width, 520px);
  --embedded-height: var(--klevu-product-query-popup-height, 100%);
  --embedded-width: var(--klevu-product-query-popup-width, 100%);
  --embedded-header-background: var(--klevu-product-query-popup-header-background, #6c757d1a);
  --embedded-border-color: var(--klevu-product-query-popup-border-color, #6c757d1a);
  --embedded-border-radius: var(--klevu-product-query-popup-border-radius, var(--klevu-border-radius-m));
  --end-spacer-display: var(--klevu-product-query-popup-spacer-display, block);
}

:host([embedded]) {
  --klevu-chat-bubble-text-color-remote: var(--klevu-product-query-bubble-text-color-remote, #000);
  --klevu-chat-bubble-text-color: var(--klevu-product-query-bubble-text-color, #000);
  --klevu-chat-bubble-background: var(--klevu-product-query-bubble-background, #6c757d66);
  --klevu-chat-bubble-background-remote: var(--klevu-product-query-embedded-response-bg, #6c757d33);
  --klevu-loading-indicator-color: var(--klevu-loading-embedded-indicator-color, #6c757d33);
  --klevu-chat-layout-height: var(--klevu-product-query-chat-height, 100%);
  --klevu-chat-layout-max-height: var(--klevu-product-query-chat-max-height, 100%);
  --klevu-button-icon-color: var(--klevu-product-query-icon-color, #fff);
  --klevu-product-query-popup-width: 100%;
  --klevu-button-background-color: var(--klevu-product-query-submit-button-background-color, #6c757d66);
  --klevu-button-background-hover: var(--klevu-product-query-submit-button-background-hover, #6c757d33);
  --klevu-chat-bubble-border-radius: var(--klevu-product-query-chat-bubble-border-radius, var(--klevu-border-radius-s));
  --klevu-chat-bubble-border-radius-remote: var(
    --klevu-product-query-chat-bubble-border-radius-remote,
    var(--klevu-border-radius-s)
  );
  --klevu-footer-border-top: none;
  --klevu-chat-title-color: var(--klevu-product-query-title-color, #000);
  --klevu-button-border-radius: var(--klevu-product-query-submit-button-border-radius, 50%);
  --klevu-input-background-color: var(--klevu-product-query-input-background-color, var(--klevu-color-neutral-1));
  --klevu-input-color: var(--klevu-product-query-input-color, #000);
  --klevu-input-border: var(--klevu-product-query-input-border, 1px solid var(--klevu-color-neutral-2));
  --embedded-chat-background-color: var(--klevu-product-query-embedded-chat-background-color, #fff);
  --klevu-input-border-radius: var(--klevu-product-query-input-border-radius, 1000px);
  --klevu-input-placeholder-color: var(--klevu-product-query-input-placeholder-color, var(--klevu-color-neutral-5));
  --klevu-prepopulated-questions-color: var(--klevu-product-query-prepopulated-questions-color, #000);
  --klevu-prepopulated-questions-background: var(--klevu-product-query-prepopulated-questions-background, #f6f6f6);
  --klevu-prepopulated-questions-hover-background: var(
    --klevu-product-query-prepopulated-questions-hover-background,
    #6c757d33
  );
  --klevu-prepopulated-questions-hover-color: var(--klevu-product-query-prepopulated-questions-hover-color, #000);
}

.content {
  padding: var(--klevu-spacing-04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}

klevu-chat-layout {
  height: var(--popup-height);
}

@media (max-width: 520px) {
  klevu-chat-layout {
    height: 100%;
  }
}

klevu-chat-messages {
  padding-right: var(--klevu-spacing-04);
}

.chat-messages {
  height: 100%;
}

.embedded .chat-messages {
  max-height: 550px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header klevu-icon {
  cursor: pointer;
}

div[part="product-query-popup-header"] {
  width: 100%;
}

div[part="product-query-popup-footer"] .inputs {
  display: flex;
  gap: var(--klevu-spacing-04);
}

div[part="product-query-popup-footer"] .sendmessage {
  display: flex;
  gap: var(--klevu-spacing-04);
}

div[part="product-query-popup-footer"] .sendmessage klevu-textfield {
  width: 100%;
}

.pqa_feedback {
  text-align: center;
}

.pqa_feedback > * {
  padding-bottom: var(--klevu-spacing-04);
}

.pqa_feedback klevu-icon {
  font-size: 24px;
  padding: var(--klevu-spacing-04);
  cursor: pointer;
  border-radius: 50%;
}

.pqa_feedback klevu-icon:hover {
  background-color: var(--klevu-color-neutral-2);
}

.pqa_feedback klevu-icon:nth-child(1) {
  color: var(--klevu-color-accent-1);
}

.pqa_feedback klevu-icon:nth-child(2) {
  color: var(--klevu-color-accent-3);
}

.fineprintContainer {
  padding-bottom: var(--klevu-spacing-02);
  border-bottom: 1px solid var(--klevu-color-neutral-4);
  margin-bottom: var(--klevu-spacing-04);
}

klevu-typography.fineprint {
  display: block;
  --klevu-body-xs-size: 10px;
}

.disclaimer-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
  direction: ltr !important;
}

.disclaimer {
  font-size: 8px;
  color: #666;
  margin-left: 3px;
}

.privacy-link {
  margin-left: 3px;
  text-decoration: underline !important;
}

.powered-by-message,
.privacy-link,
.powered-by-message:visited,
.privacy-link:visited,
.powered-by-message:active,
.privacy-link:active,
.powered-by-message:hover,
.privacy-link:hover {
  font-size: 8px;
  text-decoration: none;
  color: #666;
  white-space: nowrap;
}

.loading-sorry {
  display: block;
  --klevu-body-xs-size: 10px;
}

klevu-popup {
  --klevu-popup-width: var(--popup-width);
}

.questions-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: var(--klevu-spacing-01);
  padding-bottom: var(--klevu-spacing-04);
}

.questions-container svg {
  margin-right: var(--klevu-spacing-03);
  fill: black;
}

.questions-container .klevu-question {
  background-color: var(--klevu-prepopulated-questions-background);
  color: var(--klevu-prepopulated-questions-color);
  -webkit-animation: 0.4s fadeIn;
  animation: 0.4s fadeIn;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0;
}

.questions-container .klevu-question {
  font-size: 12px;
  font-weight: 400;
  border-radius: 7px;
  border-bottom-left-radius: 0px;
  cursor: pointer;
  padding: 10px;
}

.questions-container .klevu-question:hover {
  background-color: #d8edfd;
  outline: 0;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.error-text {
  color: var(--klevu-color-negative);
}

.error-icon {
  font-size: 14px;
  margin-right: 5px;
  position: relative;
  top: 2px;
}

.embedded div[part="product-query-popup-header"] {
  background: var(--embedded-header-background);
}

.embedded div[part="product-query-popup-footer"] {
  --klevu-button-font-size: var(--klevu-body-xs-size);
  padding: var(--klevu-spacing-05);
  padding-top: var(--klevu-spacing-02);
}

.embedded {
  width: var(--embedded-width);
  max-width: var(--embedded-width);
  height: var(--embedded-height);
  border: 1px solid var(--embedded-border-color);
  border-radius: var(--embedded-border-radius);
  --end-spacer-display: none;
  box-sizing: border-box;
  overflow: hidden;
}

.embedded footer {
  border-top: none;
}

.embedded .header {
  width: 100%;
  padding-block: var(--klevu-spacing-03);
  padding-left: var(--klevu-spacing-05);
}

.embedded .header:empty {
  padding-block: 0;
}

.embedded .header klevu-typography {
  line-height: 11px;
}

.embedded .header klevu-typography span {
  color: var(--klevu-chat-title-color);
  font-size: var(--klevu-typography-font-size);
}

.embedded .content {
  padding: 0;
}

.embedded klevu-chat-messages {
  padding: var(--klevu-spacing-05);
  padding-bottom: 0;
  gap: var(--klevu-spacing-04);
}

.embedded klevu-chat-messages .end-spacer {
  display: none;
}

.embedded klevu-chat-layout {
  height: var(--embedded-height);
  max-height: var(--embedded-height);
  overflow: hidden;
  background-color: var(--embedded-chat-background-color);
}

.embedded div[part="product-query-popup-header"] #closeDialog,
.embedded div[part="product-query-popup-header"] .fineprint {
  display: none;
}

.embedded .questions-container {
  gap: 12px;
  padding: var(--klevu-spacing-04);
}

.embedded .questions-container .klevu-question:hover {
  background-color: var(--klevu-prepopulated-questions-hover-background);
  color: var(--klevu-prepopulated-questions-hover-color);
}