.chat-window-wrapper {
  display: flex;
  justify-content: center;
  position: absolute;
  background: transparent;
  bottom: 0;
  align-items: end;
  width: 100%;
  pointer-events: none;

  .chat-window {
    width: 90%;
    max-width: 800px;
    margin-bottom: 30px;
    pointer-events: all;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    pointer-events: none;
  }

  .message-list {
    padding: 10px 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid black;
    border-radius: 25px 25px 0 0;
    background: #eeeeee4f;
    backdrop-filter: blur(10px);
    max-height: 0;
    opacity: 0;
    padding-bottom: 20px;
    margin-bottom: -20px;
    transition: all 800ms cubic-bezier(0.075, 0.82, 0.165, 1);
  }

  .message-list.active {
    max-height: 40vh;
    opacity: 1;
  }

  .message {
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    max-width: 85%;

    &::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border: 0.5em solid transparent;
      margin-top: -0.25em;
    }
  }

  .message.user {
    align-self: flex-end;
    background-color: #06ebeb;
    color: black;

    &::after {
      border-left-color: #06ebeb;
      right: 0;
      top: 50%;
      border-right: 0;
      border-bottom: 0;
      margin-right: -0.5em;
    }
  }

  .message.assistant,
  .message.system {
    align-self: flex-start;
    background-color: #a9a9a985;
    color: black;

    &::after {
      border-left-color: #a9a9a985;
      left: 0;
      top: 50%;
      border-right-color: #a9a9a985;
      border-left: 0;
      border-bottom: 0;
      margin-left: -0.5em;
    }
  }

  .notification-messages-container {
    margin: 0 60px 15px 60px;
    display: flex;
    flex-direction: column;

    .message {
      width: 45%;
      padding: 8px;
      color: black;
      text-align: center;
      border-radius: 0.4em;
    }
  }
}
