.chat {
  background-color: returnColorCSSVar('white');
  height: 100%;
  overflow: hidden;
  width: 100%;

  @include viewport--l {
    height: $baseline * 56;
  }
  a.link {
    color: returnColorCSSVar('brand-secondary');
}
}

.chat--float,
.chat--embed {
  left: 0;
  top: 0;
  z-index: 8000;
}

.chat--float {
  position: absolute;

  @include viewport--l {
    border-radius: $border-radius--l $border-radius--l 0 0;
    bottom: 0;
    box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.1);
    left: unset;
    right: $baseline * 3;
    top: unset;
    width: $baseline * 40;
  }
}

.chat--embed {
  position: fixed;

  @include viewport--l {
    border-radius: $border-radius;
    border: 1px solid returnColorCSSVar('brand-tertiary-shade-110');
    overflow: hidden;
    position: relative;
  }

  .speech-bubble__avatar {
    top: 6px;
  }
}

.chat__wrapper {
  display: grid;
  grid-template-areas: 'chat-header' 'chat-main' 'chat-footer';
  grid-template-rows: 70px 1fr minmax(90px, auto);
  height: 100%;
}

.chat__header {
  align-items: center;
  background-color: returnColorCSSVar('white');
  display: flex;
  grid-area: chat-header;
  height: $baseline * 7;
  padding: 15px $spacing--s;
  width: 100%;
  z-index: 100;
}

.chat__box {
  -webkit-overflow-scrolling: touch;
  grid-area: chat-main;
  overflow-y: auto;
  padding: 0 $spacing--s 5px;
  @include viewport--l {
    max-height: 490px;
  }
}

.chat__footer {
  background-color: returnColorCSSVar('white');
  grid-area: chat-footer;
  min-height: $baseline * 9;
  padding: 15px $spacing--s;
  width: 100%;
}

.chat-content__wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}

.chat-content__wrapper--first {
  padding-top: $spacing--xxs;

  &:first-child {
    padding-top: 0;
  }
}

.chat-content__wrapper:last-child {
  padding-bottom: $spacing--xs;
}

.chat .chat__content {
  max-width: 100%;
  @include viewport--l {
    max-width: $baseline * 29;
  }
}

.chat__content--user {
  align-self: flex-end;
  margin-bottom: $spacing--xxs;
  margin-left: 70px;
}

.chat__content--bot {
  align-self: flex-start;
  margin-bottom: $spacing--xxs;
  margin-left: 35px;
  margin-right: 35px;
  // added !important for specificity to prevent max width 100% on buttons
  max-width: calc(100% - 70px) !important;
}

.chat-settings {
  background-color: returnColorCSSVar('white');
  height: 100%;
  position: absolute;
  top: 0;
  transform: translateX(100%);
  transition: all 0.3s;
  width: 100%;
  z-index: 100;
  visibility: hidden;

  &.is-active {
    transform: translateX(0);
    visibility: visible;
  }
}

.chat-settings__title {
  color: returnColorCSSVar('brand-secondary');
  position: relative;
  top: -2px;
}

.chat-settings__overlay {
  background-color: returnColorCSSVar('brand-secondary-alpha-70');
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s 0.1s;
  visibility: hidden;
  width: 100%;
  z-index: 100;

  &.is-active {
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
  }
}

.chat-settings__overlay-content {
  background-color: returnColorCSSVar('brand-tertiary');
  bottom: 0;
  height: 290px;
  padding: 20px;
  position: absolute;
  transform: translateY(100%);
  transition: all 0.3s 0s;
  width: 100%;

  .is-active.chat-settings__overlay & {
    transform: translateY(0);
    transition-delay: 0.1s;
  }
}