/**
* There is an issue with importing the css file from JS:
* ```js
* import '@n26/nxd/styles.css' // fails to load
* ```
* As a workaround, we’re using a CSS import to load the nxd stylesheet, which
* means the import is handled by css-loader instead of mini-css-extract-plugin.
* This doesn’t result in an additional request as the file is being inlined.
*/
/**
 * Scoped Variables for Light Mode.
 * These values matches the NXD Spec as of 7. Nov 2023.
 */
html[data-theme='light'] .lp-window-root {
  /* Background */
  --background-neutral: #ffffff;
  --background-neutral-alternate: #f2f2f2;
  --background-neutral-tertiary: #1b1b1b;
  --background-petrol: #2b697a;
  --background-petrol-alternate: #e9eef2;
  --background-teal: #36a18b;
  --background-teal-alternate: #e8f2ee;

  /* Stroke */
  --stroke-neutral: #e9e9e9;

  /* Typography */
  --typography-neutral: #1b1b1b;
  --typography-neutral-alternate: #6d6d6d;
  --typography-neutral-tertiary: #f2f2f2;
  --typography-teal: #36a18b;
  --typography-teal-alternate: #1f7560;
  --typography-petrol: #2b697a;
  --typography-petrol-alternate: #205b6b;

  /* Navigation Controller */
  --chat-navigation-button-more-icon: url(https://images.ctfassets.net/4kkw0fmuhesw/5zWfrZDgPtUmFbdcRSM3V5/848cb4635206e8a0d5f67b913db4a0dd/icon-chat-more-dark.svg);
  --chat-navigation-button-minimise-icon: url(https://images.ctfassets.net/4kkw0fmuhesw/3BSH6IdIHRvc3tAQqSaZjz/39ba8c93fc30ab389027f35045fc08af/icon-chat-dropdown-dark.svg);

  /* Input View */
  --chat-input-background-color: #1212120a;

  /* Send Button */
  --chat-send-button-icon: url(https://images.ctfassets.net/4kkw0fmuhesw/6EGle2nQBS9lCUrQKlDLuu/c36d6bf95b85031b97ed4116957e9229/icon-chat-send-light.svg);

  /*Chatbot Button*/
  --chatbot-button-text-color: var(--typography-teal);

  /* Chat Window */
  --chat-background-color: var(--background-neutral);
}

/**
 * Scoped Variables for Dark Mode.
 * These values matches the NXD Spec as of 7. Nov 2023.
 */
html[data-theme='dark'] .lp-window-root {
  /* Background */
  --background-neutral: #121212;
  --background-neutral-alternate: #2d2d2d;
  --background-neutral-tertiary: #e9e9e9;
  --background-petrol: #2b697a;
  --background-petrol-alternate: #182b31;
  --background-teal: #36a18b;
  --background-teal-alternate: #22403a;

  /* Stroke */
  --stroke-neutral: #3b3b3b;

  /* Typography */
  --typography-neutral: #d9d9d9;
  --typography-neutral-alternate: #969696;
  --typography-neutral-tertiary: #1b1b1b;
  --typography-teal: #36a18b;
  --typography-teal-alternate: #79a1ad;
  --typography-petrol: #2b697a;
  --typography-petrol-alternate: #ccdce2;

  /* Navigation Controller */
  --chat-navigation-button-more-icon: url(https://images.ctfassets.net/4kkw0fmuhesw/5LeJrOE35cay0ZAMlW8qj8/2a9a5d59f95c208754ec6d214a9bb4ba/icon-chat-more-light.svg);
  --chat-navigation-button-minimise-icon: url(https://images.ctfassets.net/4kkw0fmuhesw/2SMPSKTQyyn4XCdlO6m2D0/1e3b3d92c0f149aec1857c62364e5822/icon-chat-dropdown-light.svg);

  /* Input View */
  --chat-input-background-color: #f9f9f914;

  /* Send Button */
  --chat-send-button-icon: url(https://images.ctfassets.net/4kkw0fmuhesw/67U8bXFoq5Qc2jRQJnAKjI/16867c60732508e26da06e7220cda890/icon-chat-send-dark.svg);

  /*Chatbot Button*/
  --chatbot-button-text-color: var(--typography-teal);

  /* Chat Window */
  --chat-background-color: #1b1b1b;
}

/**
 * Scoped Variables for Tokens.
 * These values matches the NXD Spec as of 7. Nov 2023.
 */
.lp-window-root {
  /* Spacing */
  --spacing-4: 0.25rem;
  --spacing-8: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-48: 3rem;

  /* Focus */
  --focus-box-shadow-color: #36a18b99;

  /* Message Bubble Variables */
  --bubble-avatar-size: 24px;
  --bubble-agent-background: var(--background-petrol-alternate);
  --bubble-visitor-background: transparent;
  --bubble-text-color: var(--typography-neutral);
  --bubble-timestamp-color: var(--typography-neutral-alternate);

  /* Input view */
  --chat-input-placeholder-color: var(--typography-neutral-alternate);
  --chat-input-color: var(--typography-neutral);

  /* Send Button */
  --chat-send-button-size: 36px;
}

#lpChat.lp-window-root > .lp_maximized_large {
  overflow: hidden;
}

#lpChat.lp-window-root .lp_maximized {
  opacity: 1 !important;
}

/* Hide the "Minimize" button when the chat window is rendered on it's own page. */
body[data-lp-standalone='true']
  .lp_minimize.lpc_maximized-header__minimize-button {
  display: none !important;
}

/* Make the chat window fullscreen when it is rendered on it's own page. */
body[data-lp-standalone='true']
  .lpc_window.lp_maximized.lpc_window_maximized.lpc_desktop.lp_floating.lp_maximized_large {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: initial !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/**
 * Navigation Controller
 * Figma Link: https://www.figma.com/design/n0HJUu583gPikBU3Aodony/Live-Person-(LP)---UI-designs-customer-side?node-id=7440-27489&m=dev
 */
#lpChat.lp-window-root .lp_header.lpc_maximized-header {
  display: flex;
  align-items: center;
  height: auto;
  padding: var(--spacing-12);
  border: 0 !important;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
  background-color: var(--chat-background-color) !important;
  border-radius: 0 !important;
}

#lpChat.lp-window-root
  .lp_header.lpc_maximized-header.lpc_desktop
  .lp_header-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#lpChat.lp-window-root .lp_header.lpc_maximized-header .lp_title {
  flex: 1;
  padding: 0 !important;
  padding-left: calc(60px - var(--spacing-12)) !important;
  text-align: center;
}

#lpChat.lp-window-root .lp_header.lpc_maximized-header .lp_top-text {
  margin-left: 0 !important;
  font-size: 1rem;
  font-weight: 500 !important;
  color: var(--typography-neutral) !important;
}

#lpChat.lp-window-root .lp_header.lpc_maximized-header .lp_chatting-with-icon {
  display: none !important;
}

#lpChat.lp-window-root
  .lp_maximized
  .lp_header
  .lp_header-content-wrapper
  .lp_header-buttons-container {
  display: flex;
}

#lpChat.lp-window-root
  .lp_maximized
  .lp_header
  .lp_header-content-wrapper
  div[role='button'] {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

#lpChat.lp-window-root
  .lp_maximized
  .lp_header
  .lp_header-content-wrapper
  div[role='button']:hover {
  background-color: #1212120a !important;
}

#lpChat.lp-window-root
  .lp_maximized
  .lp_header
  .lp_header-content-wrapper
  div[role='button']
  [data-lp-point='minimize_icon'] {
  width: 24px !important;
  height: 24px !important;
  background-image: var(--chat-navigation-button-minimise-icon);
}

#lpChat.lp-window-root
  .lp_menu-top-btn.lpc_maximized-header__menu-button.lpc_desktop:focus,
#lpChat.lp-window-root
  .lp_minimize.lpc_maximized-header__minimize-button.lpc_desktop:focus,
#lpChat.lp-window-root
  .lp_close.lpc_maximized-header__close-button.lpc_desktop:focus,
#lpChat.lp-window-root
  ul.lp_action_items_wrapper.lp_action_items_wrapper_top:focus,
#lpChat.lp-window-root span.lp_title:focus,
#lpChat.lp-window-root button.lp_action_item_btn:focus,
#lpChat.lp-window-root
  button.lp_cancel_button.lpc_confirmation-dialog__cancel-button.lpc_desktop:focus,
#lpChat.lp-window-root
  button.lp_confirm_button.lpc_confirmation-dialog__confirm-button.lpc_desktop:focus,
#lpChat.lp-window-root div:focus,
#lpChat.lp-window-root
  button.lp_maximize.lpc_minimized-header__maximize-button.lpc_desktop:focus,
#lpChat.lp-window-root button.chips-item:focus,
#lpChat.lp-window-root button.lp_history_button:focus,
#lpChat.lp-window-root
  .lp-json-pollock-layout.lp-json-pollock-layout-vertical.lpc_card.lpc_card_vertical.lpc_desktop
  button:focus {
  outline-width: 0 !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px var(--focus-box-shadow-color) !important;
}

/* Hide focus ring when focusing with the mouse, but display it when using the keyboard */
#lpChat.lp-window-root
  .lp_menu-top-btn.lpc_maximized-header__menu-button.lpc_desktop:focus:not(
    :focus-visible
  ),
#lpChat.lp-window-root
  .lp_minimize.lpc_maximized-header__minimize-button.lpc_desktop:focus:not(
    :focus-visible
  ),
#lpChat.lp-window-root
  .lp_close.lpc_maximized-header__close-button.lpc_desktop:focus:not(
    :focus-visible
  ),
#lpChat.lp-window-root
  ul.lp_action_items_wrapper.lp_action_items_wrapper_top:focus:not(
    :focus-visible
  ),
#lpChat.lp-window-root span.lp_title:focus:not(:focus-visible),
#lpChat.lp-window-root button.lp_action_item_btn:focus:not(:focus-visible),
#lpChat.lp-window-root
  button.lp_cancel_button.lpc_confirmation-dialog__cancel-button.lpc_desktop:focus:not(
    :focus-visible
  ),
#lpChat.lp-window-root
  button.lp_confirm_button.lpc_confirmation-dialog__confirm-button.lpc_desktop:focus:not(
    :focus-visible
  ),
#lpChat.lp-window-root div:focus:not(:focus-visible),
#lpChat.lp-window-root
  button.lp_maximize.lpc_minimized-header__maximize-button.lpc_desktop:focus:not(
    :focus-visible
  ),
#lpChat.lp-window-root button.chips-item:focus:not(:focus-visible),
#lpChat.lp-window-root button.lp_history_button:focus:not(:focus-visible),
#lpChat.lp-window-root
  .lp-json-pollock-layout.lp-json-pollock-layout-vertical.lpc_card.lpc_card_vertical.lpc_desktop
  button:focus:not(:focus-visible) {
  outline-offset: 0 !important;
  box-shadow: none !important;
}

#lpChat.lp-window-root
  .lp_maximized
  .lp_header
  .lp_header-content-wrapper
  div[role='button'][data-lp-point='menu-top-btn'] {
  width: 24px !important;
  height: 24px !important;
  background-image: var(--chat-navigation-button-more-icon);
}

#lpChat.lp-window-root
  .lp_maximized
  .lp_header
  .lp_header-content-wrapper
  div[role='button']
  [data-lp-point='minimize_icon']
  > img,
#lpChat.lp-window-root
  .lp_maximized
  .lp_header
  .lp_header-content-wrapper
  div[role='button'][data-lp-point='menu-top-btn']
  [data-lp-type='icon'] {
  display: none;
}

#lpChat.lp-window-root .lp_main .lp_main_area .lp_top_menu {
  top: var(--spacing-16);
  padding: 0 !important;
}

#lpChat.lp-window-root .lp_main .lp_main_area .lp_top_menu .lp_top_logo_bar {
  display: none !important;
}

#lpChat.lp-window-root .lp_main .lp_main_area .lp_top_menu .lp_title {
  color: var(--typography-neutral) !important;
}

#lpChat.lp-window-root .lp_action_items_wrapper.lp_action_items_wrapper_top {
  background-color: var(--background-neutral) !important;
}

#lpChat.lp-window-root .lp_className.lp_icon-dark.lp_end-chat-action-icon {
  display: none;
}

#lpChat.lp-window-root button.lp_action_item_btn {
  margin: var(--spacing-8) -1.5rem var(--spacing-8) var(--spacing-24) !important;
  width: auto !important;
}

#lpChat.lp-window-root .lp_header .lp_header-content-wrapper {
  display: flex !important;
}

#lpChat.lp-window-root .lp_header .lpc_maximized-header__text-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

#lpChat.lp-window-root .lpc_window_maximized:not(.lpc_desktop) {
  border-radius: 0 !important;
}

#lpChat.lp-window-root .lp_header .lp_header-buttons-container {
  align-items: center;
}

#lpChat.lp-window-root
  .lp_header
  .lp_menu-top-btn.lpc_maximized-header__menu-button,
#lpChat.lp-window-root
  .lp_header
  .lp_minimize.lpc_maximized-header__minimize-button {
  position: initial !important;
}

/**
 * Chat Content
 */
#lpChat.lp-window-root .lp_lpview_mp.lp_main_area {
  display: flex;
  flex-direction: column;
}

#lpChat.lp-window-root .lp_lpview_widgetContent {
  background-color: transparent !important;
}

#lpChat.lp-window-root .lp_location_center {
  flex: 1;
  height: auto !important;
  padding-bottom: var(--spacing-24);
  background-color: var(--chat-background-color);
}

/**
 * Minimized header on small screens
 */
@media screen and (max-width: 768px) {
  #lpChat.lp-window-root
    .lp_minimized.lpc_window.lpc_window_minimized.lp_minimized_large.lp_bottom-right {
    bottom: 3.3rem !important;
  }
}

/**
 * Chat Header and Footer
 *
 * Remove border radius to prevent a
 * odd-looking UI while in full screen.
 */
#lpChat .lp_header.lpc_mobile,
#lpChat.lp-window-root .lp_location_bottom.lpc_mobile {
  border-radius: 0 !important;
}

/**
 * Message Bubble
 * Figma Link: https://www.figma.com/design/n0HJUu583gPikBU3Aodony/Live-Person-(LP)---UI-designs-customer-side?node-id=7441-28409&m=dev
 */
#lpChat.lp-window-root .lpc_message:not(.lp_rich_content_line) {
  top: 0;
  max-width: calc(100% - (var(--bubble-avatar-size) + var(--spacing-4)));
  padding: var(--spacing-8) var(--spacing-12);
  background-color: var(--bubble-visitor-background) !important;
  border-radius: 24px;
  border-color: var(--stroke-neutral) !important;
  font-size: 0.87rem;
}

/**
 * Variation: Agent
 */
#lpChat.lp-window-root .lpc_message_agent:not(.lp_rich_content_line) {
  background-color: var(--bubble-agent-background) !important;
  border-color: transparent !important;
}

/* Text */
#lpChat.lp-window-root .lp_title_text:not(.lpc_message__text_system) {
  padding: 0;
  line-height: calc(var(--spacing-16) * 1.25);
  color: var(--bubble-text-color) !important;
}

/* Timestamp */
#lpChat.lp-window-root
  .lp_time_bottom:not(.lpc_message-area__timestamp_system) {
  left: 0;
  padding: 0;
  margin-top: var(--spacing-4);
  color: var(--bubble-timestamp-color) !important;
  margin-left: calc(
    (var(--bubble-avatar-size) + var(--spacing-4)) + var(--spacing-12)
  );
  font-size: 0.75rem;
}

#lpChat.lp-window-root .lpc_message-area__timestamp_system {
  display: none;
}

/* Timestamp: at the side of the bubble */
#lpChat.lp-window-root .lpc_message-area__side-timestamp.lp_time_side {
  display: none !important;
}

/* Timestamp: hidden avatar */
#lpChat.lp-window-root
  .lp_time_bottom.lpc_message-area__timestamp_avatar-hidden {
  margin-left: var(--spacing-12);
}

/* Agent's avatar image */
#lpChat.lp-window-root .agent_avatar {
  width: var(--bubble-avatar-size);
  height: var(--bubble-avatar-size);
  margin-right: var(--spacing-4);
  margin-bottom: 0 !important;
}

/* Container */
#lpChat.lp-window-root .lp_chat_line_wrapper {
  padding: 0 var(--spacing-12);
  margin-top: 0 !important;
  margin-bottom: var(--spacing-16);
}

/* Container: grouped */
#lpChat.lp-window-root .lp_chat_line_wrapper.lp_grouped {
  margin-bottom: var(--spacing-8);
}

/**
 * Input view bar
 * Figma Link: https://www.figma.com/file/n0HJUu583gPikBU3Aodony/Live-Person-(LP)---UI-designs-customer-side?type=design&node-id=2638-22936&mode=design&t=6NmnMKhno6nbEfwb-0
 */

/* Input view bar container */
#lpChat.lp-window-root .lp_location_bottom {
  position: static !important;
  height: auto !important;
  padding: 0;
  border-color: var(--stroke-neutral) !important;
  background-color: var(--chat-background-color) !important;
}

#lpChat.lp-window-root .lpview_bottom_container {
  position: relative;
  height: auto !important;
  padding: calc(var(--spacing-8) + 2px) calc(var(--spacing-8) + 2px)
    calc(var(--spacing-8) + 2px) var(--spacing-12);
}

/* Typing Indicator */
#lpChat.lp-window-root .lp_lpview_agent_is_typing {
  position: absolute;
  top: calc(var(--spacing-16) * -1.5);
  left: 0;
  width: 100%;
  height: auto;
  padding: 0 var(--spacing-12);
  font-size: 0.75rem;
  font-style: normal;
}

/* Input and buttons container */
#lpChat.lp-window-root .lp_bottom_area {
  display: flex;
  align-items: center;
  background-color: var(--chat-background-color) !important;
  padding: 0 !important;
  position: static;
  height: auto;
}

/* Input area */
#lpChat.lp-window-root .lp_input_area {
  flex: 1;
  min-height: var(--chat-send-button-size);
  padding: var(--spacing-8) var(--spacing-12);
  margin-right: var(--spacing-8);
  background-color: var(--chat-input-background-color) !important;
  border-radius: 24px;
}

/* Textarea */
#lpChat.lp-window-root .lpview_form_textarea {
  font-size: 0.87rem;
  color: var(--chat-input-color) !important;
  caret-color: var(--typography-teal);
}

/* Textarea placeholder */
#lpChat.lp-window-root .lpview_form_textarea::placeholder {
  font-style: normal;
  color: var(--chat-input-placeholder-color) !important;
}

/* Send button */
#lpChat.lp-window-root .lp_paper_plane_button {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--chat-send-button-size);
  height: var(--chat-send-button-size);
  padding: var(--spacing-8);
  background-color: var(--background-teal) !important;
  border-radius: 50%;
}

#lpChat.lp-window-root .lp_paper_plane_button:hover {
  background-color: var(--typography-teal-alternate) !important;
}

#lpChat.lp-window-root .lp_paper_plane_button .lp_paper_plane-icon {
  background-image: var(--chat-send-button-icon);
  background-position: center;
}

#lpChat.lp-window-root
  .lp_paper_plane_button
  .lp_paper_plane-icon
  .lpc_composer__send-button-asset {
  display: none;
}

/*
* Deep link
* Figma link: https://www.figma.com/design/n0HJUu583gPikBU3Aodony/Live-Person-(LP)---UI-designs-customer-side?node-id=7482-15362&m=dev
*/

#lpChat.lp-window-root a {
  color: var(--typography-teal) !important;
}

#lpChat.lp-window-root a:hover {
  color: var(--typography-teal-alternate) !important;
}

/*
* Automatic Message
* Figma link: https://www.figma.com/design/n0HJUu583gPikBU3Aodony/Live-Person-(LP)---UI-designs-customer-side?node-id=7869-21978&m=dev
*/

#lpChat.lp-window-root .lpc_message__text_system,
.lp_chat_line_auto_message {
  color: var(--typography-neutral-alternate) !important;
  font-size: 0.75rem !important;
  line-height: 1.25rem !important;
}

/*
* History wrapper
*/

#lpChat.lp-window-root .lp_history_button_wrapper {
  background-color: var(--background-neutral) !important;
}

/*
* Minimized header
*/

#lpChat.lp-window-root .lpc_minimized-header {
  background-color: var(--background-neutral) !important;
}

#lpChat.lp-window-root .lp_top-text.lpc_minimized-header__text.lpc_desktop {
  color: var(--typography-neutral) !important;
}

#lpChat.lp-window-root
  .lp_chatting-with-icon.lpc_minimized-header__icon.lpc_desktop.lp_icon-dark {
  display: none !important;
}

/*
* Loading state
*/

#lpChat.lp-window-root .lp_skeleton-window-body,
.lp_main.lpc_body.lpc_desktop {
  background-color: var(--background-neutral) !important;
}

/*
* Liveperson Error screen
*/

#lpChat.lp-window-root table.lp_centralizer {
  background-color: var(--background-neutral) !important;
}

#lpChat.lp-window-root table.lp_centralizer img {
  display: none;
}

#lpChat.lp-window-root div#lp_alert_message.lp_text {
  color: var(--typography-neutral) !important;
}

/*
* Close conversation confirmation screen
*/

#lpChat.lp-window-root
  .lp_lpview_mp.lp_dialog_container.lpc_confirmation-dialog.lpc_desktop {
  background-color: var(--background-neutral) !important;
}

#lpChat.lp-window-root
  .lp_center_div_inner_content
  .lp_lpview_title.lp_title.lpc_confirmation-dialog__title.lpc_desktop {
  color: var(--typography-neutral) !important;
}

/*
* Chatbot button
*/

#lpChat.lp-window-root .chips-item,
.lp-json-pollock-layout.lp-json-pollock-layout-vertical.lpc_card.lpc_card_vertical
  button {
  color: var(--chatbot-button-text-color) !important;
  font-weight: 500;
  font-family: 'N26';
  font-size: 0.85rem !important;
  background-color: var(--background-neutral) !important;
  border: 1px solid var(--stroke-neutral) !important;
  border-radius: 32px;
}

#lpChat.lp-window-root
  .lp-json-pollock-layout.lp-json-pollock-layout-vertical.lpc_card.lpc_card_vertical {
  border: none !important;
  background-color: var(--chat-background-color) !important;
}

#lpChat.lp-window-root .lp-json-pollock-element-button.lpc_card__button {
  border-top: none !important;
}

#lpChat.lp-window-root
  .lp-json-pollock-layout.lp-json-pollock-layout-vertical.lpc_card.lpc_card_vertical
  button {
  margin: 4px;
}

.pjycQLOQqd3rSkvbYOsz {
  right: 1rem;
  bottom: 1rem;
  height: calc(55px + 64px);
  width: 400px;
  max-width: 100%;
  transition: height 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.dogKGj1ZdZbx8L9mCDbY {
  height: 80vh;
}

@media screen and (max-width: 768px) {
  .pjycQLOQqd3rSkvbYOsz {
    right: 0;
    bottom: 0;
    width: 100vw;
  }

  .dogKGj1ZdZbx8L9mCDbY {
    height: 100vh;
  }
}