.chatSmallWindow {
  color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;

  >div:nth-child(1) {
    flex-grow: 1;
    overflow-y: hidden;
    max-height: 80%;
    padding: 0 4px;
    box-sizing: border-box;
    display: flex;
    background-color: rgba(40, 40, 44, .4);
    flex-direction: column-reverse;

    .chatSmallWindowContentLeft {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      >div {
        background-color: #1e232baf;
        padding: 4px;
        box-sizing: border-box;
        border-radius: 0 15px 15px 15px;
        margin: 0 0 4px 0;
        font-size: 12px;
        display: flex;

        >span:nth-child(1) {
          white-space: nowrap;
          color: #ff970f;
        }

        >span:nth-child(2) {
          color: #fff;
          word-break: break-all;
        }
      }
    }

    .chatSmallWindowContentRight {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      >div {
        background-color: #464e6b55;
        color: black;
        padding: 4px;
        box-sizing: border-box;
        border-radius: 15px 0 15px 15px;
        margin: 0 0 4px 0;
        font-size: 14px;
        display: flex;
        flex-direction: row-reverse;

        >span:nth-child(1) {
          white-space: nowrap;
        }

        >span:nth-child(2) {
          word-break: break-all;
        }
      }
    }
  }

  >div:nth-child(2) {
    flex-shrink: 0;
    opacity: 0.4;

    &:hover {
      opacity: 1;
    }
  }

  >div:nth-child(3) {
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    margin: 0 auto;
    background-color: rgba(40, 40, 44, .2);
    padding: 0 6px;
    cursor: pointer;

    &:hover {
      background-color: rgba(40, 40, 44, 1);
    }

    >span {
      font-size: 12px;
    }
  }
}