Eve-Project/app-angular/src/modules/home/mock-interviews/mock-interviews.component.scss

.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px); /* 使用Viewport单位，减去头部导航栏的高度 */

  .chat-window {
    flex-grow: 1;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .chat-label {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .chat-messages {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .message {
    display: flex;
    align-items: center;
    margin-top: 10px;

    &.right {
      flex-direction: row-reverse;
      align-items: flex-end;
    }
  }

  .avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .avatar.left {
    align-self: flex-start;
  }

  .avatar.right {
    align-self: flex-end;
  }

  .avatar img {
    min-width: 40px;
    max-height: 100%;
    border-radius: 50%;
  }

  .content {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
  }

  .left {
    align-self: flex-start;
  }

  .right {
    align-self: flex-end;
  }

  .left .content {
    background: cornflowerblue;
  }

  .right .content {
    background: lightgray;
  }

  .segmented-container {
    display: flex;
    flex-direction: column;
  }

  .input-container {
    display: flex;
    align-items: center;
    margin-top: auto; // 将输入框容器推到底部

    textarea {
      flex: 9; /* 输入框占据左边90% */
      overflow-wrap: break-word; /* 当文字超过一行宽度时自动换行 */
      white-space: normal; /* 允许文本换行 */
    }

    button {
      flex: 1; /* 发送按钮占据右边10% */
      margin-left: 10px; /* 添加一些间隔 */
      justify-self: flex-end; /* 居右对齐 */
    }
  }
}