/* 通用样式 */
body { font-family: Arial, sans-serif; margin: 0; box-sizing: border-box; }
ul,li,h3 { list-style: none; padding:0; margin: 0; }

.dabox h3 { font-size: 18px; margin-bottom: 10px; color:#000; }
/* 视频播放器 */
.video-js { width: 100%; max-width: 860px; max-height: 484px; margin: 0 auto; border-radius: 10px; overflow: hidden; }
/* 进度条容器 */
.vjs-progress-control { position: relative; }
/* 视频速览标记（颜色分段） */
.progress-segment { position: absolute; height: 100%; border-right: 2px solid white; opacity: 0.7; z-index: 10; pointer-events: auto; }
/* 浮动提示框 */
.tooltip { position: absolute; background: rgba(0, 0, 0, 0.9); color: #fff; padding: 8px; border-radius: 6px; font-size: 14px; white-space: normal; max-width: 250px; line-height: 1.5; display: none; z-index: 9999; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); }
/* 视频速览列表 */
.segments-container { padding: 15px; background: #fff; border-radius: 8px; position: relative; overflow: hidden; width: 1168px; margin: 0px auto; }
.segments-wrapper { display: flex; gap: 15px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 2px; padding-top:10px; scrollbar-width: none; -ms-overflow-style: none; }
.segment-item { flex: 0 0 200px; padding: 10px; background: #fff; border-radius: 6px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.2s ease; position: relative; margin-top: 3px; }
/*.segment-item:hover {transform: translateY(-5px);}*/
.segment-time { font-weight: bold; color: #007bff; margin-bottom: 5px; }
.segment-time svg { vertical-align: middle; margin-left: 5px; width: 1em; height: 1em; position: relative; top: -2px; }
.segment-summary { font-size: 14px; color: #333; }
.segment-line { height: 2px; position: absolute; top: -20px; left: 0; right: 0; background-color: #007bff; }
/* 空心小圆圈 */
.segment-line::after { content: ''; position: absolute; width: 8px; height: 8px; border: 2px solid #ccc; border-radius: 50%; background-color: transparent; top: -4px; right: -14px; z-index: 20; }
/* 左右滑动按钮 */
.scroll-button { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); color: #fff; border: none; padding: 10px; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; display: none; }
.scroll-button.left { left: 10px; }
.scroll-button.right { right: 10px; }
.segments-container:hover .scroll-button, .similar-courses-container:hover .scroll-button { display: flex; }
/* 知识点列表 */
.keywords-container { margin-top: 20px; padding: 15px; background: #fff; border-radius: 8px; width:1168px; margin:0 auto; display: none; }
.keywords-list { display: flex; gap: 10px; flex-wrap: wrap; }
.keyword { padding: 8px 12px; background:#FAFDFF; border:1px solid #1f81d0; color: #1266aa; border-radius: 4px; cursor: pointer; font-size: 14px; }
.keyword:hover { background: #1266aa; color:#fff; }
.keywordcur { background: #1f81d0; color:#fff; }
/* 知识点解释 */
.explanation-container { margin-top: 20px; padding: 15px; background: #fff; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); display: none; }
.explanation-content { font-size: 16px; line-height: 1.6; color: #333; white-space: pre-wrap; }
.close-button { float: right; background: none; color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.close-button:hover { /*background: #cc0000;*/ }
/* 打字机效果 */
@keyframes typing { from { width: 0; } to { width: 100%; } }
.typing-effect { overflow: hidden; white-space: nowrap; animation: typing 2s steps(40, end); }
/* 进度条容器样式 */
.segments-progress-container { width: 100%; height: 10px; border-radius: 5px; margin-top: 10px; margin-bottom:20px; position: relative; overflow: hidden; }
/* 进度条样式 */
.segments-progress-bar { height: 100%; border-radius: 5px; position: absolute; top: 0; left: 0; transition: width 0.3s ease; width: 100%; }
/* 进度条分段样式 */
.segment-progress { height: 100%; display: inline-block; position: relative; transition: width 0.3s ease; }
/* 文字概况样式 */
.segments-summary { width: 100%; padding: 10px; background-color: #fff; border-radius: 8px; margin-top: 10px; font-size: 14px; color: #333; text-align: center; }

/* --- Tab 导航 --- */
.lithree { width:1200px; margin:20px auto; }
.lithree ul { display: flex; padding:0; }
.lithree ul li { background: #FAFDFF; width:120px; height:40px; line-height: 40px; text-align: center; border:1px solid #1f81d0; border-radius: 5px; margin-right:18px; cursor: pointer; position: relative; font-size: 16px; padding-right: 5px; color: #1f81d0; }
.lithree ul li.curlit { background: linear-gradient( 334deg, #1f81d0 0%, #3c9dec 100%); color:#fff; border-color: transparent; }

/* AI说明图的列表项样式重置 */
#ai_explanation_item { background: none; border: none; width: auto; height: auto; padding: 0; cursor: default; position: relative; top: -9px; }
/* AI说明图的图片尺寸设置 */
#ai_explanation img { display: block; height: 30px; width: auto; }

/* 向下箭头 - PC端 - 仅为 ID one, two, three 且处于激活状态 (curlit) 时显示 */
.lithree ul li#one.curlit::after, .lithree ul li#two.curlit::after, .lithree ul li#three.curlit::after, .lithree ul li#seven.curlit::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #4889d4; z-index: 5; }
/* AI 角标 Span 基础样式 (始终显示) - 应用于 #one, #two, #four, #five, #six */
.lithree ul li#one .ai-badge, .lithree ul li#two .ai-badge, .lithree ul li#four .ai-badge, .lithree ul li#five .ai-badge, .lithree ul li#six .ai-badge, .lithree ul li#seven .ai-badge { display: inline-block; position: absolute; top: 2px; right: 2px; background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%); color: white; font-size: 9px; padding: 1px 4px; border-radius: 3px; line-height: 1; font-weight: bold; z-index: 10; }
/* AI 角标 - 激活状态下的样式覆盖 */
.lithree ul li#one.curlit .ai-badge, .lithree ul li#two.curlit .ai-badge, .lithree ul li#four .curlit .ai-badge, .lithree ul li#five .curlit .ai-badge, .lithree ul li#six .curlit .ai-badge, .lithree ul li#seven .curlit .ai-badge { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); }

/* Lovong 按钮的 LI 容器样式 */
.lithree ul li#lovong-link-item { display: none; /* 隐藏AI介绍按钮 */ background:none; width:auto; height:auto; line-height:normal; text-align:left; border:none; border-radius:0; margin-right:0; margin-left:0px; cursor:default; padding:0; align-self:flex-end; position:relative; }

/* Lovong 按钮本身的样式 */
.lovong-button { display:inline-block; padding:4px 10px; background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%); color: white; font-size: 0.7em; font-weight: bold; padding: 0.15em 0.5em; border-radius: 3px; text-decoration:none; line-height:1.2; }
.lovong-button:hover { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); color:white; }

/* --- 内容容器 --- */
.dabox { border:1px solid #05a6e0; width:1198px; margin:0 auto; border-radius: 5px; overflow: hidden; }
.nr-container { padding: 15px; background: #fff; border-radius: 8px; width: 1168px; margin:0px auto; display: none; font-size: 15px; line-height: 1.6; }
.nr-container p a.expand-collapse-link { margin-left: 8px; color: #007bff; text-decoration: none; white-space: nowrap; }
.nr-container p a.expand-collapse-link:hover { text-decoration: underline; }
#videodetails_main_no_ai p a.expand-collapse-link { margin-left: 8px; color: #007bff; text-decoration: none; white-space: nowrap; } /* 非 AI 模式也应用 */
#videodetails_main_no_ai p a.expand-collapse-link:hover { text-decoration: underline; } /* 非 AI 模式也应用 */
.mindmap-container, .exam-container, .chat-container { padding: 15px; background: #fff; border-radius: 8px; width: 1168px; margin:0px auto; display: none; font-size: 16px; line-height: 1.6; }
/* 隐藏 Webkit 滚动条 */
.segments-wrapper::-webkit-scrollbar { display: none; }


/* --- 相关课程 --- */
.similar-courses-container { padding: 15px; background: #fff; border-radius: 8px; position: relative; overflow: hidden; width: 1168px; margin: 0px auto; }
.similar-courses-wrapper { overflow-x: auto; scroll-behavior: smooth; padding-bottom: 2px; padding-top: 10px; scrollbar-width: none; -ms-overflow-style: none; }
.similar-courses-wrapper::-webkit-scrollbar { display: none; }
.similar-courses-wrapper .course-list-ul { display: flex; flex-wrap: nowrap; gap: 20px; padding: 0; margin: 0; list-style: none; }
.similar-courses-wrapper .course-item { flex: 0 0 210px; width: 210px; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: box-shadow 0.3s ease, transform 0.3s ease; overflow: hidden; }
.similar-courses-wrapper .course-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-4px); }
.similar-courses-wrapper .course-item a { text-decoration: none; color: inherit; }
.similar-courses-wrapper .course-item .sfimg { position: relative; width: 100%; height: 118px; overflow: hidden; border-radius: 4px; margin-bottom: 10px; display: block; }
.similar-courses-wrapper .course-item .sfimg .small { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.similar-courses-wrapper .course-item:hover .sfimg .small { transform: scale(1.05); }
.similar-courses-wrapper .course-item .sfimg .bfimg { position: absolute; width: 30px; height: auto; right: 10px; bottom: 10px; }
.similar-courses-wrapper .course-item .sfimg .similarity-badge { position: absolute; top: 0; right: 0; background-color: rgba(0, 0, 0, 0.6); color: #fff; padding: 2px 6px; font-size: 11px; font-weight: bold; border-bottom-left-radius: 6px; z-index: 2; pointer-events: none; }
.similar-courses-wrapper .course-item .course-title { font-size: 14px; font-weight: bold; color: #333; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 8px; }
.similar-courses-wrapper .course-item p { font-size: 14px; color: #2f2f2f; margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 评论区样式 --- */
.commentbox textarea#utxt { border: 1px solid #cccccc; width: 62%; padding: 8px; border-radius: 4px; resize: vertical; min-height: 80px; margin-bottom: 10px; }
/* 可选：添加 focus 状态 */
.commentbox textarea#utxt:focus { border-color: #1f81d0; outline: none; box-shadow: 0 0 3px rgba(168, 42, 255, 0.3); }

/* 手机端适配 */
@media (max-width: 768px) {
    /* .mainbo { margin:5px; } */
    ul,li,h3 { list-style: none; padding:0; margin: 0; }
    /* --- 手机端 标题字体调整 (*** 修改区域 1 ***) --- */
    h3 { margin-bottom:10px; font-size: 1rem; /* 保持和 workdetail.css h1 一致 */ font-weight: bold; /* 添加粗体 */ }
    /* 特指 AI 内容区的标题 */
    .dabox h3 { font-size: 1rem; /* 确保 dabox 内的 h3 也调整 */ font-weight: bold; /* 添加粗体 */ margin-bottom: 8px; }
    /* --- 手机端 标题字体调整结束 --- */

    .video-js { height: 200px; border-radius: 10px; overflow: hidden; }
    .segments-container { padding: 10px 2%; width: 100%; box-sizing: border-box; background: #fff; border-radius: 8px; position: relative; overflow: hidden; margin: 0 auto; }
    .segments-wrapper { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 2px; padding-top:10px; scrollbar-width: none; -ms-overflow-style: none; }
    .segment-item { flex: 0 0 172px; padding: 10px; margin-top: 3px; background: #fff; border-radius: 6px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.2s ease; position: relative; box-sizing: border-box; }
    /* --- 手机端 内容字体调整 (*** 修改区域 2 ***) --- */
    .segment-time svg { width: 0.9em; height: 0.9em; margin-left: 3px; }
    .segment-summary { font-size: 0.8rem; line-height: 1.6; /* 参考 i 标签样式 */ }
    .keywords-container { margin-top: 0px; padding:10px 2%; width: 100%; box-sizing: border-box; background: #fff; border-radius: 8px; margin: 0 auto; display: none; }
    .keywords-list { gap: 8px; display: flex; flex-wrap: wrap; }
    .keyword { padding: 6px 10px; font-size: 0.8rem; /* 参考 i 标签样式 */ background:#FAFDFF; border:1px solid #1f81d0; color: #1266aa; border-radius: 4px; cursor: pointer; } /* 移除了行高，标签不需要特定行高 */
    .explanation-container { padding: 10px; background: #fff; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); display: none; }
    .explanation-content { font-size: 0.8rem; line-height: 1.6; /* 参考 i 标签样式 */ color: #333; white-space: pre-wrap; }
     /* --- 手机端 内容字体调整结束 --- */
    .scroll-button { width: 30px; height: 30px; padding: 5px; position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; }

    /* --- 手机端 Tab 导航 --- */
    .lithree { width:96%; margin:2% auto 20px auto; }
    .lithree ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; }
    .lithree ul li { width: 100%; justify-self: stretch; height: 32px; line-height: 32px; text-align: center; border: 1px solid #1f81d0; border-radius: 5px; background: #FAFDFF; margin-bottom: 0; font-size: 0.8rem; cursor: pointer; position: relative; padding: 0; color: #1f81d0; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
    .lithree ul li.curlit { background: linear-gradient( 334deg, #1f81d0 0%, #3c9dec 100%); color:#fff; border-color: transparent; }

    /* 向下箭头 - 手机端 - 针对所有激活的 li */
    .lithree ul li.curlit::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #1f81d0; z-index: 5; }

    /* AI 角标 Span 基础样式 - 手机端 (始终显示) */
    .lithree ul li#one .ai-badge, .lithree ul li#two .ai-badge, .lithree ul li#four .ai-badge, .lithree ul li#five .ai-badge, .lithree ul li#six .ai-badge, .lithree ul li#seven .ai-badge { display: inline-block; position: absolute; top: 1px; right: 1px; background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%); color: white; font-size: 6px; padding: 1px 2px; border-radius: 3px; line-height: 1; font-weight: bold; z-index: 10; }

    /* AI 角标 - 手机端 - 激活状态下的样式覆盖 */
    .lithree ul li#one.curlit .ai-badge, .lithree ul li#two.curlit .ai-badge, .lithree ul li#four .curlit .ai-badge, .lithree ul li#five .curlit .ai-badge, .lithree ul li#six .curlit .ai-badge, .lithree ul li#seven .curlit .ai-badge { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); }

    /* Lovong 按钮的 LI 容器样式 */
    .lithree ul li#lovong-link-item { display: none; /* 隐藏AI介绍按钮 */ width:auto; height:auto; line-height:normal; background:none; border:none; padding:0; margin-bottom:0; margin-left:0; justify-self:center; align-self:end; text-align:left; }
    /* Lovong 按钮本身的样式 - 字体可能更小 */
    .lovong-button { padding:3px 8px; font-size:12px; /* 其他属性如 background, color, border-radius, text-decoration 会从 PC 端样式继承或保持不变，除非在这里覆盖 */ }
    /* --- 手机端 Tab 导航结束 --- */

    /* --- 手机端 内容容器 --- */
    .dabox { border:1px solid #1f81d0; width:96%; margin: 0 auto; border-radius: 5px; overflow: hidden; padding:0; }
     /* --- 手机端 内容字体调整 (*** 修改区域 3 ***) --- */
    .nr-container { padding:10px 2%; background: #fff; border-radius: 8px; width: 100%; margin:0px auto; display: none; font-size: 0.8rem; line-height: 1.6; /* 参考 i 标签样式 */ box-sizing: border-box; }
    /* 确保 p 标签也应用 */
    .nr-container p { font-size: 0.8rem; line-height: 1.6; } /* 参考 i 标签样式 */
    /* --- 手机端 内容字体调整结束 --- */
    .mindmap-container { padding:10px 2%; background: #fff; border-radius: 8px; width: 100%; margin:0px auto; display: none; font-size: 0.8rem; line-height: 1.6; box-sizing: border-box; } /* 统一内容区文字样式 */
    .exam-container { padding:10px 2%; background: #fff; border-radius: 8px; width: 100%; margin:0px auto; display: none; font-size: 0.8rem; line-height: 1.6; box-sizing: border-box; } /* 统一内容区文字样式 */
    .chat-container { padding:10px 2%; background: #fff; border-radius: 8px; width: 100%; margin:0px auto; display: none; font-size: 0.8rem; line-height: 1.6; box-sizing: border-box; } /* 统一内容区文字样式 */
    .segments-container { padding: 10px 2%; background: #fff; border-radius: 8px; }
    .keywords-container { padding:10px 2%; background: #fff; border-radius: 8px; }

    /* 相关课程 (手机端) */
    .similar-courses-container { padding: 10px 2%; width: 100%; box-sizing: border-box; }
    .similar-courses-wrapper .course-list-ul { gap: 12px; }
    .similar-courses-wrapper .course-item { flex: 0 0 160px; width: 160px; }
    .similar-courses-wrapper .course-item .sfimg { height: 90px; }
    .similar-courses-wrapper .course-item .sfimg .bfimg { width: 24px; right: 8px; bottom: 8px; }
    .similar-courses-wrapper .course-item .sfimg .similarity-badge { font-size: 9px; padding: 1px 4px; }
    .similar-courses-wrapper .course-item .course-title { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; height: auto; line-height: 1.4; }
    .similar-courses-wrapper .course-item p { font-size: 0.75rem; margin: 4px 0; }

    /* --- 手机端 评论区样式 --- */
    .commentbox textarea#utxt { width: 92%; }
    /* 隐藏手机端 Webkit 滚动条 */
    .segments-wrapper::-webkit-scrollbar { display: none; }
}