.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-left: 1px solid #e5e5e5;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;

  .message-item {
    border-bottom: none !important;
    padding: 8px 0;

    .message-content {
      display: flex;
      flex-direction: row;

      &.user {
        flex-direction: row-reverse;

        .message-main {
          align-items: flex-end;
          margin-right: 12px;
          margin-left: 60px;

          .message-text {
            background-color: #626aea;
            color: #fff;
            border-radius: 16px 4px 16px 16px;
          }

          .message-time {
            text-align: right;
          }
        }
      }

      &.assistant {
        .message-main {
          margin-left: 12px;
          margin-right: 60px;

          .message-text {
            background-color: #f2f3f5;
            color: #1d2129;
            border-radius: 4px 16px 16px 16px;
          }

          .message-time {
            text-align: left;
          }
        }
      }

      .message-avatar {
        flex-shrink: 0;
      }

      .message-main {
        display: flex;
        flex-direction: column;
        flex: 1;

        .message-text {
          padding: 10px 12px;
          line-height: 1.5;
          word-wrap: break-word;
          white-space: pre-wrap;
        }

        .message-time {
          font-size: 12px;
          color: #86909c;
          margin-top: 4px;
        }
      }
    }
  }
}

.chat-input {
  padding: 16px;
  border-top: 1px solid #e5e5e5;

  .arco-btn {
    float: right;
  }
}
