/*!
 * react-chat-window v1.2.0
 * MIT Licensed
 */
:root, :host { /* TODO: Get rid of :root */
  --chatbot-launcher-bg: #4e8cff;
  --chatbot-launcher-bg-focus: #565867;
  --chatbot-launcher-shadow: rgba(148, 149, 150, 0.2);
  --chatbot-launcher-shadow-dark: rgba(0, 0, 0, 0.2);
  --chatbot-window-bg: #ffffff;
  --chatbot-window-shadow: rgba(148, 149, 150, 0.3);
  --chatbot-header-btn-bg: transparent;
  --chatbot-header-btn-color: #ffffff;
  --chatbot-header-bg: #4e8cff;
  --chatbot-header-text: #ffffff;
  --chatbot-body-bg: #ffffff;
  --chatbot-message-received-bg: #f4f7f9;
  --chatbot-message-received-color: #263238;
  --chatbot-message-sent-bg: #4e8cff;
  --chatbot-message-sent-color: #ffffff;
  --chatbot-message-shadow: rgba(148, 149, 150, 0.3);
  --chatbot-badge-bg: #ff4646;
  --chatbot-badge-text: #ffffff;
  --chatbot-input-bg: #f4f7f9;
  --chatbot-input-active-bg: #ffffff;
  --chatbot-input-text: #565867;
  --chatbot-input-text-medium: rgba(86, 88, 103, 1);
  --chatbot-input-text-dark: rgba(86, 88, 103, 0.3);
  --chatbot-input-shadow: rgba(150, 165, 190, 0.2);
  --chatbot-carousel-controls-bg: #ffffff;
  --chatbot-carousel-controls-color: #263238;
  --chatbot-carousel-controls-shadow: rgba(148, 149, 150, 0.3);
  --chatbot-carousel-job-title-color: #263238;
  --chatbot-overlay-bg: #ffffff;
  --chatbot-overlay-header-color: #ffffff;
  --chatbot-overlay-header-job-title-color: #263238;
  --chatbot-prompt-margin-top: 1rem;
  --chatbot-prompt-btn-padding: 0.25rem;
  --chatbot-prompt-btn-border: 1px solid rgba(80, 86, 86, .5);
  --chatbot-prompt-btn-bg: transparent;
  --chatbot-prompt-btn-color: #505656;
  --chatbot-prompt-btn-hover-bg: var(--bs-btn-hover-bg);
  --chatbot-prompt-btn-hover-border-color: var(--bs-btn-hover-border-color);
  --chatbot-prompt-btn-hover-color: var(--bs-btn-hover-border-color);
  --chatbot-indicator-dot: grey;
}

.chatbot-container:not([data-controller='chatbot--container']) {
  display: none;
}

.chatbot-chat-window {
  position: fixed;
  margin-right: 0;
  border: 0;
  padding: 0;
  width: 370px;
  height: calc(100% - 120px);
  max-height: 590px;
  right: 25px;
  bottom: 100px;
  box-sizing: border-box;
  box-shadow: 0 7px 40px 2px var(--chatbot-window-shadow);
  background: var(--chatbot-window-bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*transition: 0.3s ease-in-out;*/ /* Jan 2025: This breaks <dialog> + automatic autofocus functionality */
  border-radius: 0.6rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.chatbot-chat-window:not([open]) {
  opacity: 0;
  visibility: hidden;
  bottom: 90px;
}

.chatbot-body-frame {
  flex-grow: 3;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--chatbot-body-bg);
  background-size: 100%;

  .spinner-container {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-grow: 1;

    i {
      color: var(--chatbot-message-received-color);
      font-size: 2.5rem;
    }
  }

  .chatbot-body {
    padding-top: 1rem;
    padding-bottom: 2rem;
    overflow-y: auto;
    flex-grow: 3;

    .chatbot-prompts {
      text-align: right;
    }

    .chatbot-prompt:nth-child(1) {
      margin-top: var(--chatbot-prompt-margin-top);
    }

    .chatbot-prompt {
      button {
        padding: var(--chatbot-prompt-btn-padding);
        border: var(--chatbot-prompt-btn-border);
        background: var(--chatbot-prompt-btn-bg);
        color: var(--chatbot-prompt-btn-color);
        font-size: 11px;
        text-transform: uppercase;
        border-radius: 0;
        text-decoration: none;
      }
      button:hover {
        color: var(--chatbot-prompt-btn-hover-color);
        background-color: var(--chatbot-prompt-btn-hover-bg);
        border-color: var(--chatbot-prompt-btn-hover-border-color);
      }
    }
  }
}

.chatbot-overlay {
  background: var(--chatbot-overlay-bg);
  border-radius: 0.6rem;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;

  .chatbot-header {
    padding: 0;
    position: relative;
    i, h3 {
      color: var(--chatbot-overlay-header-color);
    }

    button {
      height: 100%;
      padding: 0 1rem;
      position: absolute;
    }

    h3 {
      margin: auto 0;
      text-align: center;
      width: 100%;
    }
  }

  .view-job {
    width: 100%;

    button {
      float: left;
    }

    button, h3 {
      color: var(--chatbot-header-btn-color);
    }
  }

  .chatbot-overlay-content-container {
    padding: 1rem;
    flex-grow: 1;
    overflow-y: auto;

    .job-details-container {
      .job-overview {


        .job-details-title {
          color: var(--chatbot-overlay-header-job-title-color);
          font-weight: 400;
        }

        .job-details-header {
          margin-bottom: 1rem;

          ul {
            list-style: none;
          }
        }

        .job-details-overview h3 {
          font-weight: 400;
        }
      }

      .job-details-footer {
        padding: 1rem;

        button {
          border-radius: 1.5rem;
          width: 100%;
        }
      }
    }
  }
}

@media (max-width: 450px) {
  .chatbot-chat-window {
    width: 100%;
    height: 100%;
    max-height: 100%;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }
  .chatbot-chat-window {
    transition: 0.1s ease-in-out;
  }
  .chatbot-chat-window:not[open]) {
    bottom: 0;
  }
}

.chatbot-launcher {
  width: 60px;
  height: 60px;
  background-color: var(--chatbot-launcher-bg);
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  right: 25px;
  bottom: 25px;
  border-radius: 50%;
  box-shadow: none;
  transition: box-shadow 0.2s ease-in-out;

  .chatbot-launcher-button {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    outline: 0;
    border: none;
    transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
    padding: 20px;
    box-sizing: border-box;
  }
}

.chatbot-launcher-button:focus {
  box-shadow: var(--chatbot-launcher-bg-focus) 0px 0px 0px 3px inset;
  border-radius:50%;
}

.chatbot-launcher-button:before {
  content: '';
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: box-shadow 0.2s ease-in-out;
}

.chatbot-launcher:not(.opened) .chatbot-launcher-button{
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSItNDc0OS40OCAtNTAyMCAzNS4wMzYgMzUuMDM2Ij48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO30uYntmaWxsOiM0ZThjZmY7fS5je2NsaXAtcGF0aDp1cmwoI2EpO30uZHtmaWxsOiNmZmY7fS5le2ZpbGw6I2VmZjRmOTt9PC9zdHlsZT48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGNsYXNzPSJhIiBkPSJNMC0zOTkuNDc5SDE3LjU1NXYxNy41NTVIMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMzk5LjQ3OSkiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDg4NiAtNTA3NSkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0NS4xMyA2NCkiPjxnIGNsYXNzPSJjIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIj48cGF0aCBjbGFzcz0iZCIgZD0iTS0zODEuOTI0LTE5MC45NjJhOC43NzgsOC43NzgsMCwwLDAtOC43NzgtOC43NzgsOC43NzgsOC43NzgsMCwwLDAtOC43NzgsOC43NzgsOC43NDUsOC43NDUsMCwwLDAsMi4yNiw1Ljg3OXYxLjQ0MmMwLC44LjQ5MiwxLjQ1NywxLjEsMS40NTdoNS44M2EuODQzLjg0MywwLDAsMCwuMTgzLS4wMiw4Ljc3OCw4Ljc3OCwwLDAsMCw4LjE4NC04Ljc1NyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzk5LjQ3OSAxOTkuNzQpIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiPjxwYXRoIGNsYXNzPSJlIiBkPSJNLTY4Ljc2My0xOTQuMDc5YTkuMjkyLDkuMjkyLDAsMCwxLDYuMzgtOC44ODhjLS4yNTItLjAyMi0uNTA2LS4wMzMtLjc2My0uMDMzYTguNzc0LDguNzc0LDAsMCwwLTguNzc4LDguNzc4QTkuNTA4LDkuNTA4LDAsMCwwLTY5LjctMTg4LjNjLjAwNSwwLDAsLjAwOSwwLC4wMS0uMzExLjM1Mi0xLjkyNCwyLjg0OS4wMjEsMi44NDloMi4yNWMtMS4yMy0uMDIyLDEuMjYzLTIuMTA3LjI2OS0zLjQ5NGE4LjIyNSw4LjIyNSwwLDAsMS0xLjYtNS4xNDEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcxLjkyNCAyMDMpIi8+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg==');
}

.chatbot-launcher.opened .chatbot-launcher-button{
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAMAAACxiD++AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURUxpcf///////////////////////////////////////////////////////3EAnbYAAAAOdFJOUwADZ66SoQjEhnS7/gsNGQL7+wAAAKtJREFUKM+F01sOhCAQRNESFV/I/pc70Og0YJfyJbmHhBAbGGYHstw8IPV4EOGOmERYIhGpxyUAJxHSz/xlC+1FxE64qB1yj1ZID7oXsel+63ovnj2JXUXue+hvrcLugL+EdG+9XBG8X+Kl34J3YM1g/egvIvdx5EK691RIz78YEXdnQrst6m6JqemXmNo+D/WJNAyVePZWWL0WdlfB+l+UAQQReaAc65DB/wGsZgzLN0IQWAAAAABJRU5ErkJggg==');
  background-size: 30%;
  transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
  width: 60px;
  height: 60px;
  transform: rotate(-90deg);
}

.chatbot-launcher.opened .chatbot-launcher-button:before {
  box-shadow: 0 0 400px 250px var(--chatbot-launcher-shadow);
}

.chatbot-launcher:hover {
  box-shadow: 0 0 27px 1.5px var(--chatbot-launcher-shadow-dark);
}

.chatbot-new-messages-count {
  position: absolute;
  top: -3px;
  left: 41px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  background: var(--chatbot-badge-bg);
  color: var(--chatbot-badge-text);
  text-align: center;
  margin: auto;
  font-size: 12px;
  font-weight: 500;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.3);
}

.chatbot-header {
   background: var(--chatbot-header-bg);
   min-height: 75px;
   border-top-left-radius: 9px;
   border-top-right-radius: 9px;
   color: var(--chatbot-header-text);
   padding: 10px;
   box-shadow: 0 1px 4px rgba(0,0,0,.2);
   box-sizing: border-box;
   display: flex;
 }

.chatbot-header-img {
  border-radius: 50%;
  align-self: center;
  padding: 10px;
  width: 5rem;
}

.chatbot-header-name {
  font-size: 100%;
  align-self: center;
  padding: 10px;
  flex: 1;
  user-select: none;
  border-radius: 5px;
  margin: 0;
}

.chatbot-header-close-button {
  background: var(--chatbot-header-btn-bg);
  border: none;
  width: 40px;
  align-self: center;
  height: 40px;
  margin-right: 10px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 5px;
  color: var(--chatbot-header-btn-color);
}

@media (max-width: 450px) {
  .chatbot-header {
    border-radius: 0;
  }
}

.chatbot-message {
   margin: auto;
   padding: 0 2rem 10px 2.5rem;
 }

.chatbot-message-content {
  width: 100%;
  display: flex;
  margin: 1rem 0;
}

.chatbot-message-content.sent {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.chatbot-message-content.received {
  justify-content: flex-start;
}

.chatbot-message-avatar {
  align-self: end;
  margin: 0;
  img {
    border-radius: 50%;
    width: 2rem;
    margin-right: 0.5rem;
  }
}

.chatbot-message-text {
  position: relative;
  padding: 17px 20px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}

.chatbot-message-text:before {
  content: ''
}

.chatbot-message-content.sent .chatbot-message-text {
  color: var(--chatbot-message-sent-color);
  background-color: var(--chatbot-message-sent-bg);
  word-wrap: break-word;
}

.chatbot-message-content.received .chatbot-message-text {
  color: var(--chatbot-message-received-color);
  background-color: var(--chatbot-message-received-bg);
}


@keyframes blink {
  50% {
    fill: transparent
  }
}

.chatbot-indicator-animation {
  .dot {
    animation: 1s blink infinite;
    fill: var(--chatbot-indicator-dot);
  }

  .dot:nth-child(2) {
    animation-delay: 250ms
  }

  .dot:nth-child(3) {
    animation-delay: 500ms
  }

  .loader {
    color: var(--chatbot-indicator-dot);
  }
}

@media (max-width: 450px) {
  .chatbot-message {
    width: 80%;
  }
}

.chatbot-footer {
  margin: 0;

  .chatbot-progress-wrapper {
    ul {
      margin-bottom: 0
    }
  }

  form {
    display: flex;
    background-color: var(--chatbot-input-bg);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: background-color .2s ease, box-shadow .2s ease;
    margin-block-end: 0;
  }
}

.chatbot-user-input-text {
  border: none;
  background-color: transparent;
  outline: none;
  border-bottom-left-radius: 10px;
  padding: 18px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.33;
  color: var(--chatbot-input-text);
  flex-grow: 1;
}

.chatbot-user-input-text:empty:before {
  content: attr(placeholder);
  display: block; /* For Firefox */
  color: var(--chatbot-input-text-dark);
  outline: none;
}

.chatbot-user-input-button {
  width: 2rem;
  height: 55px;
  margin: 0;
  margin-right: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px;
}

.chatbot-footer.active {
  background-color: var(--chatbot-input-active-bg);
  box-shadow: 0 -5px 20px 0 var(--chatbot-input-shadow);
}

.chatbot-user-input-send-icon {
  height: 20px;
  width: 20px;
  cursor: pointer;
  align-self: center;
  outline: none;
}

.chatbot-user-input-send-icon path {
  fill: var(--chatbot-input-text-dark);
}

.chatbot-user-input-send-icon:hover path {
  fill: var(--chatbot-input-text-medium);
}

.chatbot-chat-window {
  z-index: 10000;
}

.chatbot-launcher {
  z-index: 10001;
}

.chatbot-message-text{
  white-space: normal;
}

.chatbot-new-messages-count:empty {
  display: none;
}

turbo-frame.message-turbo-frame {
  display: flex;
  margin-top: 1rem;
  min-height: 10rem; /* Hack so scrolling to bottom works */

  .turbo-frame-error {
    display: block;
    text-align: center;
  }

  .job-message {
    width: 100%;
    border: 1px solid var(--chatbot-message-shadow);
    border-radius: 15px;
    box-shadow: 0 2px 5px var(--chatbot-message-shadow);
    padding: 17px 20px;
    
    .carousel-item {
      padding: 0.2rem;

      h3.job-title {
        color: var(--chatbot-carousel-job-title-color);
        font-weight: 400;
      }

      i {
        margin-right: 0.5rem;
      }

      button {
        border-radius: 1.5rem;
        width: 100%;
      }

      ul {
        list-style: none;
        padding-left: 1rem;

        li i {
          width: 1rem;
        }
      }

      button.job-read-more {
        margin-bottom: 1rem;
        padding: 0;
        text-align: left;
        width: fit-content;
      }
    }

    .carousel-control-prev, .carousel-control-next {
      background: var(--chatbot-carousel-controls-bg);
      box-shadow: 0 2px 5px var(--chatbot-carousel-controls-shadow);
      height: 35px;
      margin: auto;
      opacity: 1;
      width: 20px;

      i {
        color: var(--chatbot-carousel-controls-color);
      }
    }
  }
}