.#{$n}-chat {
  @include boxSizing;

  & {
    display: flex;
    flex-direction: column;
    transform-origin: 100% 100%;
    transition:
      margin $transition,
      height $transition,
      transform $transition,
      opacity $transition;
    outline: 0;
    color: set-text-color($chat-bg);
    font-family: $fontfamily-default;
    font-size: $fontsize-small;
  }
}

.#{$n}-chat--layout-inline {
  height: fit-content;
  background-color: initial;
  box-shadow: none;

  @include media('>phablet-l') {
    flex-direction: row;
  }
}

.#{$n}-chat--layout-inline.#{$n}-chat--collapsed .#{$n}-chat-wrapper {
  height: auto;
}

.#{$n}-chat--layout-window {
  @include responsiveAppSizing;

  & {
    display: none;
    position: fixed;
    z-index: $z-index;
    right: $spacer;
    bottom: $spacer;
    width: $chat-window-width;
    max-width: calc(100% - #{$spacer * 2});
    height: $chat-window-height;
    transform: scale(0);
    opacity: 0;
  }
}

.#{$n}-chat--layout-window.#{$n}-transition--visible {
  display: flex;
}

.#{$n}-chat--layout-window.#{$n}-transition--in {
  transform: scale(1);
  opacity: 1;
}

.#{$n}-chat--layout-app {
  position: fixed;
  z-index: $z-index;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.#{$n}-chat-wrapper {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition:
    flex $transition,
    width $transition,
    height $transition,
    border-radius $transition;
  border: $thin-border solid set-border-color($chat-bg);
  border-radius: $borderradius;
  background-color: $chat-bg;
  box-shadow: $boxshadow-soft;
}

.#{$n}-chat--layout-inline .#{$n}-chat-wrapper {
  width: 100%;
  height: 0;

  @include media('>phablet-l', '<desktop') {
    flex: 0 0 100%;

    &:not(:last-child) {
      flex: 0 0 50%;
      width: 50%;
    }
  }

  @include media('>desktop') {
    flex: 0 0 67%;
    width: 67%;
  }
}

.#{$n}-chat--layout-inline.#{$n}-transition--in .#{$n}-chat-wrapper {
  height: $chat-inline-height;
  max-height: $chat-inline-maxheight;
}

.#{$n}-chat__container {
  display: flex;
  position: relative;
  flex-grow: 1;
  justify-content: center;

  &__scroll-area {
    overscroll-behavior: contain;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    will-change: scroll-position;
  }

  &__header {
    display: flex;
    position: sticky;
    z-index: 1;
    top: 0;
  }
}

.#{$n}-chat__body {
  display: flex;
  position: relative;
  flex-grow: 1;
  padding: 0;
}

.#{$n}-conversation__container > div[role='log'] {
  margin-top: auto;
}

.#{$n}-chat__entry {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  padding: $spacer * 0.5;
  border-top: $thin-border solid $grey-b;

  &:has(.#{$n}-entry__body--hidden) {
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0 none;
  }

  .#{$n}-entry__body--hidden {
    display: none;
  }
}

.#{$n}-chat--layout-inline.#{$n}-chat--collapsed .#{$n}-chat__entry {
  border: 0 none;
}

.#{$n}-entry__body {
  display: flex;
  align-items: flex-end;
  gap: $spacer * 0.25;
  width: 100%;
}