.container {
  position: relative;
  width: 100%;
  height: 60%; // 原值：60%
  padding: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 10px;

  .header {
    position: relative;
    padding-bottom: 10px;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 10px; /* 控制阴影的高度 */
      box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.2); /* 自定义阴影的大小和颜色 */
      z-index: -1; /* 确保阴影在内容下方 */
    }
  }

  .message-box {
    width: 100%;
    height: 80%;
    overflow-y: auto;
    padding: 10px 0;

    .message-group {
      margin-bottom: 20px;
    }

    // 用户消息样式
    .user-message {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 8px;

      .message-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        max-width: 70%;
      }

      .user-name {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
        font-weight: 500;
      }

      .message-bubble {
        padding: 12px 16px;        
        word-break: break-word;
        line-height: 1.5;
      }

      .user-bubble {
        background:linear-gradient(135deg, #4ca1f4, #5cb3f5, #6ec0f6);
        color: white;
        border-radius: 20px;
      }

      .message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        flex-shrink: 0;
      }

      .user-avatar {
        background: linear-gradient(135deg, #4ca1f4, #5cb3f5, #6ec0f6);
        color: white;
      }
    }

    // AI消息样式
    .ai-message {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;

      .message-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 70%;
      }

      .ai-name {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
        font-weight: 500;
      }

      .message-bubble {
        padding: 12px 16px;
        border-radius: 12px;
        word-break: break-word;
        line-height: 1.5;
      }

      .ai-bubble {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        color: #333;
        border-radius: 20px;
      }

      .message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        flex-shrink: 0;
      }

      .ai-avatar {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        color: #333;
      }
    }
  }

  .question-box {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 10%;
    //background-color: red;

    .input-group {
      display: flex;
      align-items: center;

      //border: 1px solid #d9d9d9;
      border: 1px solid #ececec;
      border-radius: 5px;
      //background-color: red;

      & .button {
        width: 140px;
        //&:hover {
        //  background-color: #d9d9d9;
        //}
      }
    }
  }

}
//教师视图 应当适配correctPage
.teacher-view{
  position: relative;
  width: 100%;
  height: 90%; 
  padding: 5px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 10px;

  .message-box {
    width: 100%;
    height: 34vh;
    overflow: auto;
    padding: 10px 0;

    .message-group {
      margin-bottom: 20px;
    }

    // 用户消息样式（教师视图）
    .user-message {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;

      .message-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        max-width: 70%;
      }

      .user-name {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
        font-weight: 500;
      }

      .message-bubble {
        padding: 12px 16px;
        border-radius: 12px;
        word-break: break-word;
        line-height: 1.5;
      }

      .user-bubble {
        background: #5cb3f5;
        color: white;
        border-bottom-right-radius: 4px;
      }

      .message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        flex-shrink: 0;
      }

      .user-avatar {
        background: #5cb3f5;
        color: white;
      }
    }

    // AI消息样式（教师视图）
    .ai-message {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;

      .message-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 70%;
      }

      .ai-name {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
        font-weight: 500;
      }

      .message-bubble {
        padding: 12px 16px;
        border-radius: 12px;
        word-break: break-word;
        line-height: 1.5;
      }

      .ai-bubble {
        background-color: #f0f2f5;
        color: #333;
        border-bottom-left-radius: 4px;
      }

      .message-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        flex-shrink: 0;
      }

      .ai-avatar {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        color: #333;
      }
    }
  }

}

//  .question-box {
//    height: 10%;
//
//    .input-group {
//            border: 1px solid #d9d9d9;
//            border-radius: 5px;
//      .button {
//        width: 40px;
//        &:hover {
//          background-color: #d9d9d9;
//        }
//      }
//    }
//  }
//
//}
