/**
* 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 calc(var(--duration, 1) * 0.5s) cubic-bezier(0.77, 0, 0.175, 1);
}

.pjycQLOQqd3rSkvbYOsz:focus {
  outline: 2px solid var(--primary-focus);
}

.dogKGj1ZdZbx8L9mCDbY {
  height: 80vh;
}

@media screen and (max-width: 768px) {
  .pjycQLOQqd3rSkvbYOsz {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    /* Track the keyboard instantly; the open/close height animation would
       otherwise lag behind the keyboard and briefly expose the page below. */
    transition: none;
  }

  /* Pinned to the visual viewport (height + top offset set in JS from
     window.visualViewport), which shrinks when the on-screen keyboard opens so
     the input stays above it without pushing the window up or exposing the page.
     Falls back to dvh, then vh, when the variable or dynamic units are
     unavailable. */
  .dogKGj1ZdZbx8L9mCDbY {
    top: var(--chat-viewport-offset, 0px);
    height: 100vh;
    height: 100dvh;
    height: var(--chat-viewport-height, 100dvh);
  }
}