.chat-footer {
  height: 30px;
  background-color: #ffffff;
  border-radius: 15px;
}

// 评分和评语区域样式
.rating-section {
  background-color: #FFF;
  border-radius: 15px;
  height: 125px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  
  @media (max-width: 1439px) {
    height: 110px;
  }
  
  .rating-component {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; // 为错误提示提供定位参考

    .rating-input-wrapper {
      display: flex;
      align-items: center;
      gap: 5px;

      .score-counter {
        display: flex;
        align-items: center;
        border: 2px solid #7EB5E1;
        border-radius: 8px;
        background-color: #FFF;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(126, 181, 225, 0.15);

        .score-btn {
          width: 40px;
          height: 40px;
          border: none;
          background-color: #f8f9fa;
          color: #495057;
          font-size: 20px;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
          user-select: none;

          &:hover:not(:disabled) {
            background-color: #7EB5E1;
            color: white;
          }

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }

          &.decrease-btn {
            border-right: 2px solid #7EB5E1;
          }

          &.increase-btn {
            border-left: 2px solid #7EB5E1;
          }
        }

        .score-input {
          border: none;
          width: 80px;
          height: 40px;
          background-color: #FFF;
          color: #212529;
          font-size: 18px;
          font-weight: 600;
          text-align: center;
          padding: 0;
          outline: none;

          &::placeholder {
            color: #6c757d;
            font-weight: 400;
            font-size: 16px;
          }

          /* 隐藏数字输入框的上下箭头 */
          &::-webkit-outer-spin-button,
          &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }

          /* Firefox */
          &[type=number] {
            -moz-appearance: textfield;
            appearance: textfield;
          }
        }

        &:focus-within {
          border-color: #5a9fd4;
          box-shadow: 0 0 0 0.2rem rgba(126, 181, 225, 0.25);
        }
      }
    }

    .error-message {
      position: absolute;
      top: 90%;
      left: 60%;
      transform: translateX(-50%);
      color: #ff4d4f;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      white-space: nowrap;
      margin-top: 10px;
      z-index: 10;
    }
  }
}

.remark-section {
  width: 100%;
  background-color: #FFF;
  border-radius: 15px;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  
  .textarea-container {
    flex: 1;
    display: flex;
    min-height: 0;
    
    .remark-textarea {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 15px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 16px;
      line-height: 1.6;
      resize: none;
      font-family: inherit;
      background-color: #FFF;
      
      &:focus {
        border-color: #7EB5E1;
        box-shadow: 0 0 0 0.2rem rgba(8, 109, 192, 0.15);
        outline: none;
        background-color: #FFF;
      }
      
      &::placeholder {
        color: #999;
        font-size: 14px;
      }
    }
  }
}

// 按钮区域样式
.button-section {
  width: 100%;
  height: auto;
  min-height: 140px;
  background-color: #FFF;
  border-radius: 15px;
  padding: 15px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  
  @media (max-width: 1439px) {
    min-height: 130px;
  }
  
  .button-row {
    display: flex;
    gap: 5px;
    justify-content: space-between;
    
    .action-btn {
      flex: 1;
      height: 30px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &.submit-btn {
        opacity: 0.8;
        background: #5397F8;
        color: white;
        
        &:hover:not(:disabled) {
          background: linear-gradient(135deg, #3367D6, #2E7D32);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
        }
        
        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          transform: none;
        }
      }
      
      &.next-btn {
        opacity: 0.8;
        background: #4A90C4;
        color: white;
        
        &:hover:not(:disabled) {
          background: linear-gradient(135deg, #4585C6, #365F91);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(91, 155, 213, 0.3);
        }
        
        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          transform: none;
        }
      }
      
      &.template-btn {
        background: linear-gradient(135deg, #70C7BA, #4DB6AC);
        color: white;
        
        &:hover {
          background: linear-gradient(135deg, #5DAEA2, #26A69A);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(112, 199, 186, 0.3);
        }
      }
      
      &.back-btn {
        background: linear-gradient(135deg, #5B9BD5, #4472C4);
        color: white;
        
        &:hover {
          background: linear-gradient(135deg, #4585C6, #365F91);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(91, 155, 213, 0.3);
        }
      }
    }
  }
  
  .progress-section {
    margin: 0px 0 0px 40px;
    
    @media (max-width: 1439px) {
      margin: 0px 0 0px 30px;
    }
    
    .progress-bar {
      :deep(.el-progress-bar__outer) {
        border-radius: 10px;
        background-color: #E8F5E8;
      }
      
      :deep(.el-progress-bar__inner) {
        border-radius: 10px;
      }
    }
  }
  
  .progress-text {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-top: -10px;
  }
}

// 学生功能区域样式
.student-function-area {
  margin: 10px 25px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
  width: 330px;
  height: calc(100vh - 20px);
  
  @media (max-width: 1439px) {
    width: 280px;
    margin: 10px 15px 10px 0;
    gap: 15px;
    height: calc(100vh - 20px);
  }
  
  .student-score-display {
    width: 100%;
    background-color: #FFF;
    border-radius: 15px;
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    
    @media (max-width: 1439px) {
      height: 110px;
    }
    
    .score-label {
      font-size: 20px;
      font-weight: 500;
      color: #333;
      margin-right: 10px;
    }
    
    .score-container {
      width: 180px;
      height: 40px;
      border: 2px solid #7EB5E1;
      border-radius: 12px;
      background-color: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(126, 181, 225, 0.15);
      
      .score-value {
        font-size: 18px;
        font-weight: 400;
        color: #333;
        text-align: center;
      }
    }
  }
  
  .student-remark-display {
    width: 100%;
    background-color: #FFF;
    border-radius: 15px;
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    
    .remark-content {
      width: 100%;
      height: 100%;
      font-size: 16px;
      line-height: 1.6;
      color: #333;
      background-color: transparent;
      border: none;
      outline: none;
      resize: none;
      font-family: inherit;
      white-space: pre-wrap;
      word-wrap: break-word;
      padding: 0;
      margin: 0;
      
      // 当没有评语时的样式
      &:empty::before {
        content: "老师暂未给出评语";
        color: #999;
        font-style: italic;
      }
    }
  }
  
  .student-button-area {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    
    .student-back-btn {
      width: 100%;
      height: 50px;
      background: linear-gradient(135deg, #5397F8, #4472C4);
      color: white;
      border: none;
      border-radius: 15px;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      
      @media (max-width: 1439px) {
        height: 45px;
        font-size: 17px;
      }
      
      &:hover {
        background: linear-gradient(135deg, #4585C6, #365F91);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(91, 155, 213, 0.4);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }
}

// 评语模板对话框样式
.template-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 0;
  }
}

.template-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0 24px;
  max-height: 60vh;
  overflow-y: auto;

  .template-item {
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 100%;

    &:hover {
      background-color: #f5f7fa;
      border-color: #597D3B;
      transform: translateX(4px);
    }

    .template-content {
      width: 100%;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      line-height: 1.5;
      display: block;
    }
  }
}


.correct-page {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  font-family: "Microsoft YaHei", sans-serif;
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  
  // 响应式断点定义（仅针对电脑屏幕）
  // Large Desktop: > 1920px
  // Desktop: 1440px - 1920px
  // Laptop: 1024px - 1439px
  
  // 针对大屏幕的优化
  @media (min-width: 1920px) {
    .ai-chat-panel {
      width: 420px;
    }
    
    .teacher-function-area,
    .student-function-area {
      width: 360px;
    }
  }

  // AI对话面板样式
  .ai-chat-panel {
    width: 380px;
    background: #FFF;
    border-right: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    margin: 10px 0 10px 25px;
    border-radius: 15px;
    height: calc(100vh - 20px);
    flex-shrink: 0;
    overflow: hidden;
    
    // 笔记本屏幕
    @media (max-width: 1439px) {
      width: 320px;
      margin: 10px 0 10px 15px;
      height: calc(100vh - 20px);
    }

    .chat-header {
      padding: 20px 16px 16px;
      border-bottom: 1px solid #e9ecef;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 15px 15px 0 0;
      flex-shrink: 0;

      .chat-title {
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
      }

 

      .student-badge {
        display: flex;
        align-items: center;
        gap: 8px;

        .student-text {
          background: #e3f2fd;
          color: #1976d2;
          padding: 4px 12px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: 500;
        }

        .expand-icon {
          color: #666;
          font-size: 12px;
        }
      }
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px 16px 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      
      // 自定义滚动条样式
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: transparent;
        margin: 8px 0;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 3px;
        
        &:hover {
          background: #9ca3af;
        }
      }
      
      border-radius: 0 0 15px 15px;

      .message-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        
        // 为最后一条消息添加额外的底部间距
        &:last-child {
          margin-bottom: 10px;
        }
      }

      // 用户消息样式
      .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;
          gap: 4px;
          max-width: 280px;

          .user-name {
            font-size: 12px;
            color: #666;
            font-weight: 500;
            text-align: right;
          }

          .message-bubble {
            max-width: 240px;
            padding: 12px 16px;
            border-radius: 20px;
            font-size: 14px;
            line-height: 1.4;
            word-wrap: break-word;
          }

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

        .user-avatar {
          width: 32px;
          height: 32px;
          border-radius: 16px;
          background: linear-gradient(135deg, #4ca1f4, #5cb3f5, #6ec0f6);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 14px;
          font-weight: 600;
          flex-shrink: 0;
        }
      }

      // AI消息样式
      .ai-message {
        display: flex;
        align-items: flex-start;
        gap: 8px;

        .ai-avatar {
          width: 32px;
          height: 32px;
          border-radius: 16px;
          background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 14px;
          font-weight: 600;
          flex-shrink: 0;
        }

        .message-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;

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

          .message-bubble {
            max-width: 240px;
            padding: 12px 16px;
            border-radius: 20px;
            font-size: 14px;
            line-height: 1.4;
            word-wrap: break-word;
          }

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

  // 弹窗样式
  .no-data {
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 16px;
  }

  .file-link {
    word-break: break-all;
    line-height: 1.4;
    
    &:hover {
      color: #66b1ff !important;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .record-info {
      color: #666;
      font-size: 14px;
    }
  }
}

    .scroll-indicator {
      padding: 8px;
      text-align: center;
      border-top: 1px solid #e9ecef;

      .scroll-arrow {
        color: #666;
        font-size: 12px;
      }
    }
  }

  .main-content {
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    .placeholder-content {
      text-align: center;
      color: #666;
      font-size: 16px;
    }
  }

  .header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 12px 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 60px;
    box-sizing: border-box;

    .logo-section {
      display: flex;
      align-items: center;
      gap: 8px;

      .logo {
        width: 32px;
        height: 32px;
      }

      .brand-text {
        font-size: 20px;
        font-weight: bold;
        color: #5cb3f5;
      }
    }

    .nav-menu {
      display: flex;
      gap: 40px;

      .nav-item {
        color: #666;
        font-size: 16px;
        cursor: pointer;
        padding-bottom: 4px;

        &.active {
          color: #333;
          border-bottom: 2px solid #5cb3f5;
        }

        &:hover {
          color: #5cb3f5;
        }
      }
    }

    .user-section {
      .username {
        color: #666;
        font-size: 14px;
      }
    }
  }

  .main-content {
    display: flex;
    height: calc(100vh - 60px);
    gap: 1px;
    background-color: #e0e0e0;

    .left-panel {
      width: 350px;
      background: white;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;

      .ai-chat-header {
        padding: 16px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;

        h3 {
          margin: 0;
          font-size: 16px;
          color: #333;
        }

        .student-label {
          background: #e3f2fd;
          color: #1976d2;
          padding: 4px 12px;
          border-radius: 12px;
          font-size: 12px;
        }
      }

      .ai-chat-content {
        flex: 1;
        overflow: hidden;
      }
    }

    .center-panel {
      flex: 1;
      display: flex;
      flex-direction: column;

      .assignment-description {
        background: white;
        border-bottom: 1px solid #e0e0e0;
        height: 280px;
        overflow-y: auto;

        .assignment-header {
          padding: 16px 24px 8px;

          h2 {
            margin: 0;
            font-size: 18px;
            color: #333;
          }
        }

        .assignment-details {
          height: calc(100% - 60px);
          overflow-y: auto;
        }
      }

      .student-answer {
        flex: 1;
        background: white;
        overflow: hidden;
      }
    }

    .right-panel {
      width: 320px;
      background: white;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;

      .behavior-record-section {
        padding: 16px;
        border-bottom: 1px solid #eee;

        .behavior-btn {
          width: 100%;
          background: #5cb3f5;
          border: none;
        }
      }

      .scoring-section {
        flex: 1;
        overflow: hidden;
      }
    }
  }

  // 右侧内容区域
  .right-content {
    display: flex;
    flex-direction: column;
    margin: 10px 20px 10px 30px;
    gap: 20px;
    flex: 1;
    min-width: 0;
    height: calc(100vh - 20px);
    
    // 笔记本屏幕
    @media (max-width: 1439px) {
      margin: 10px 15px 10px 20px;
      gap: 15px;
      height: calc(100vh - 20px);
    }
  }

  // 教师功能区域
  .teacher-function-area {
    margin: 10px 25px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-shrink: 0;
    width: 330px;
    height: calc(100vh - 20px);

    // 查看行为记录按钮
    .behavior-record-btn {
      background: #70BBDB;
      border-color: #70BBDB;
      color: white;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 12px;
      white-space: nowrap;
      width: 100%;
      height: 40px;
      
      &:hover {
        background: #6BA3D0;
        border-color: #6BA3D0;
      }
    }
    
    // 笔记本屏幕
    @media (max-width: 1439px) {
      width: 280px;
      margin: 10px 15px 10px 0;
      gap: 12px;
      height: calc(100vh - 20px);
    }
  }

  // 作业描述面板样式（仅学生可见）
  .content-panel {
    width: 100%;
    height: 240px;
    background: #FFF;
    border-radius: 15px;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    
    // 笔记本屏幕
    @media (max-width: 1439px) {
      height: 220px;
    }

    .assignment-section {
      flex: 1;
      border-bottom: 1px solid #e9ecef;
      display: flex;
      flex-direction: column;
      min-height: 0;

      .section-header {
        padding: 16px 20px 12px;
        border-bottom: 1px solid #f0f0f0;
        background: #FFF;
        flex-shrink: 0;

        h2 {
          margin: 0;
          font-size: 20px;
          font-weight: 600;
          color: #000000;
        }
      }

      .assignment-content {
        flex: 1;
        padding: 16px 20px;
        overflow-y: auto;
        background: #fff;
        min-height: 0;
        
        // 自定义滚动条
        &::-webkit-scrollbar {
          width: 6px;
        }
        
        &::-webkit-scrollbar-track {
          background: transparent;
          margin: 8px 0;
        }
        
        &::-webkit-scrollbar-thumb {
          background: #d1d5db;
          border-radius: 3px;
          
          &:hover {
            background: #9ca3af;
          }
        }
      }
    }
  }

  // 学生信息和回答区域样式
  .student-info-section {
    width: 100%;
    flex: 1;
    min-height: 0;
    background: #FFF;
    border-radius: 15px;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .student-header {
      padding: 16px 20px;
      border-bottom: 1px solid #e9ecef;
      background: #fff;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      flex-shrink: 0;

      .student-label, .class-label {
        font-weight: 600;
        color: #333;
        font-size: 14px;
        white-space: nowrap;
      }

      .student-name, .class-name {
        color: #333;
        font-size: 14px;
      }

      .student-name {
        margin-right: 30px;
      }
      
      // 补交标识样式
      .late-submission-badge {
        padding: 4px 8px;
        background-color: #C45C4A;
        color: white;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        display: inline-block;
        min-width: 60px;
        text-align: center;
        font-family: "Noto Sans SC", sans-serif;
        margin-left: 10px;
        white-space: nowrap;
      }
    }

    .student-answer-content {
      flex: 1;
      padding: 15px;
      overflow-y: auto;
      background: #fff;
      line-height: 1.6;
      font-size: 14px;
      color: #333;
      white-space: pre-wrap;
      word-wrap: break-word;
      
      // 自定义滚动条
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 3px;
        
        &:hover {
          background: #9ca3af;
        }
      }
    }
  }
}

// 保留旧样式以防兼容性问题
.my-correct {
    padding: 12px;
    box-sizing: border-box;
    height: calc(100vh - 40px);
    display: flex;
    gap: 20px;
    overflow: auto;

    .my-correct-goback{
      position: absolute;  
      bottom: 5vh;  
      right: 3vh; 
    }

    .my-correct-next{
      position: absolute;
      bottom: 5vh;
      right: 15vh;
    } 
  
    .my-correct-header {
      width: 50%;
      height: 100%;
      flex-shrink: 0;
    }

    .right-side{
      display: flex;
      gap: 10px;
      flex-direction: column;
      height: 100%;
      width: 50%;

      .my-correct-record {
        height: 36vh;
        background-color: #f9f9f9;  
        border-radius: 5px;  
        padding: 15px;  
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        background-color: #fff;
      }

      .my-correct-remark {
        background-color: #f9f9f9;  
        border-radius: 5px;  
        padding: 15px;  
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        height: 63vh;
        background-color: #fff;
      }
      .my-correct-number
      {
        position: absolute;
        bottom: 6vh;
        right: 28vh;
      }
    }
}

// 行为记录对话框样式
.behavior-dialog {
  :deep(.el-dialog__body) {
    padding: 20px;
    overflow-x: auto;
  }
  
  .file-url {
    word-break: break-all;
    font-size: 14px;
  }
}