.#{$n}-collapsed-chat-messages {
  @include unList;

  flex-direction: column;
  gap: $spacer * 0.5;
  margin: 0;
  padding: 0;
}

.#{$n}-unstarted-wrapper {
  .#{$n}-collapsed-chat-messages {
    display: none;
  }

  &.#{$n}-transition--visible .#{$n}-collapsed-chat-messages {
    display: flex;
  }
}

.#{$n}-unstarted-wrapper--inline {
  .#{$n}-collapsed-chat-messages {
    transition: opacity $transition;
    opacity: 0;
  }

  &.#{$n}-transition--in .#{$n}-collapsed-chat-messages {
    transition: opacity $transition-delay;
    opacity: 1;
  }
}

.#{$n}-collapsed-chat__close {
  display: flex;
  position: absolute;
  z-index: 1;
  bottom: calc(100% - #{$spacer * 0.875});
  left: calc(100% - #{$spacer * 0.875});
  align-items: center;
  justify-content: center;
  width: $buttonsize-small * 0.75;
  height: $buttonsize-small * 0.75;
  transform: scale(0);
  transform-origin: 50% 50%;
  transition: transform $transition;
  border-radius: 50%;
  background-color: $white;
  box-shadow: $boxshadow;

  .cvco-icon {
    width: $iconsize-small * 0.5;
    height: $iconsize-small * 0.5;
  }
}

.#{$n}-unstarted-wrapper.#{$n}-transition--in .#{$n}-collapsed-chat__close {
  transform: scale(1);
  transition: transform $transition-delay;
}

.#{$n}-unstarted-wrapper--window .#{$n}-collapsed-chat-messages {
  transform: scale(0);
  transform-origin: 100% 100%;
  transition:
    transform $transition,
    opacity $transition;
  opacity: 0;
}

.#{$n}-unstarted-wrapper--window.#{$n}-transition--in
  .#{$n}-collapsed-chat-messages {
  transform: scale(1);
  transition:
    transform $transition-delay,
    opacity $transition-delay;
  opacity: 1;
}