/* AI素养系列统一对话样式 - 温暖米色背景版本 */

/* 主体背景 */
body {
    background-color: #f5f3ee; /* 温暖米色背景 */
    color: #333333; /* 深色文字，提高可读性 */
}

/* 内容容器 */
.content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff; /* 白色内容区域 */
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 对话卡片基础样式 */
.chat-card {
    position: relative;
    border-radius: 16px;
    padding: 20px;
    margin: 25px 0;
    font-weight: 600;
    line-height: 1.8;
    font-size: 16px;
}

/* 头像样式 */
.chat-card .avatar {
    position: absolute;
    top: -22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    z-index: 10;
}

/* 角色名称 */
.chat-card .name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
}

/* 对话内容 */
.chat-card .dialogue {
    font-weight: 600;
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}

/* 男性角色 - 龙小三 */
.chat-longxiaosan {
    background: linear-gradient(135deg, #e8f4f8 0%, #d1e9f1 100%); /* 淡蓝色背景 */
    border: 3px solid #3498db; /* 蓝色边框 */
}
.chat-longxiaosan .avatar {
    background: linear-gradient(135deg, #3498db, #2980b9); /* 蓝色头像 */
    left: 20px; /* 头像靠左 */
}
.chat-longxiaosan .name {
    color: #2980b9;
    padding-left: 50px; /* 名字靠左 */
}
.chat-longxiaosan .dialogue {
    text-align: left; /* 文字靠左 */
}

/* 男性角色 - 诸葛明 */
.chat-zhugeming {
    background: linear-gradient(135deg, #e8f8f5 0%, #d1f1ec 100%); /* 淡绿色背景 */
    border: 3px solid #27ae60; /* 绿色边框 */
}
.chat-zhugeming .avatar {
    background: linear-gradient(135deg, #27ae60, #219a52); /* 绿色头像 */
    left: 20px; /* 头像靠左 */
}
.chat-zhugeming .name {
    color: #219a52;
    padding-left: 50px; /* 名字靠左 */
}
.chat-zhugeming .dialogue {
    text-align: left; /* 文字靠左 */
}

/* 男性角色 - 郭靖 */
.chat-guojing {
    background: linear-gradient(135deg, #f8f4e8 0%, #f1ecd1 100%); /* 淡黄色背景 */
    border: 3px solid #f39c12; /* 橙色边框 */
}
.chat-guojing .avatar {
    background: linear-gradient(135deg, #f39c12, #d68910); /* 橙色头像 */
    left: 20px; /* 头像靠左 */
}
.chat-guojing .name {
    color: #d68910;
    padding-left: 50px; /* 名字靠左 */
}
.chat-guojing .dialogue {
    text-align: left; /* 文字靠左 */
}

/* 女性角色 - 灵儿 */
.chat-linger {
    background: linear-gradient(135deg, #f9ebf5 0%, #f0d1e8 100%); /* 淡紫色背景 */
    border: 3px solid #9b59b6; /* 紫色边框 */
}
.chat-linger .avatar {
    background: linear-gradient(135deg, #9b59b6, #8e44ad); /* 紫色头像 */
    right: 20px; /* 头像靠右 */
}
.chat-linger .name {
    color: #8e44ad;
    text-align: right;
    padding-right: 50px; /* 名字靠右 */
}
.chat-linger .dialogue {
    text-align: left; /* 文字靠左（用户要求） */
}

/* 女性角色 - 黄蓉 */
.chat-huangrong {
    background: linear-gradient(135deg, #fff9eb 0%, #fff0d1 100%); /* 淡橙色背景 */
    border: 3px solid #e67e22; /* 橙色边框 */
}
.chat-huangrong .avatar {
    background: linear-gradient(135deg, #e67e22, #d35400); /* 橙色头像 */
    right: 20px; /* 头像靠右 */
}
.chat-huangrong .name {
    color: #d35400;
    text-align: right;
    padding-right: 50px; /* 名字靠右 */
}
.chat-huangrong .dialogue {
    text-align: left; /* 文字靠左（用户要求） */
}

/* 女性角色 - 王语嫣 */
.chat-wangyuyan {
    background: linear-gradient(135deg, #ebf9f5 0%, #d1f0ec 100%); /* 淡青色背景 */
    border: 3px solid #1abc9c; /* 青色边框 */
}
.chat-wangyuyan .avatar {
    background: linear-gradient(135deg, #1abc9c, #16a085); /* 青色头像 */
    right: 20px; /* 头像靠右 */
}
.chat-wangyuyan .name {
    color: #16a085;
    text-align: right;
    padding-right: 50px; /* 名字靠右 */
}
.chat-wangyuyan .dialogue {
    text-align: left; /* 文字靠左（用户要求） */
}

/* 特殊元素 */
.ding {
    color: #e74c3c;
    font-weight: 700;
    font-style: italic;
}

.key-point {
    background: #c0392b;
    color: white;
    padding: 2px 12px;
    border-radius: 20px;
    font-weight: 700;
    margin: 0 4px;
    line-height: 1.2;
}

/* 知识框 */
.knowledge-box {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border: 3px solid #ff6b6b;
    border-radius: 16px;
    padding: 20px;
    margin: 25px 0;
}

.knowledge-box h4 {
    color: #c0392b;
    font-weight: 700;
    margin-bottom: 12px;
}

/* 高亮框 */
.highlight-box {
    background: linear-gradient(135deg, #f0fff0 0%, #e0ffe0 100%);
    border: 3px solid #27ae60;
    border-radius: 16px;
    padding: 20px;
    margin: 25px 0;
}

.highlight-box h4 {
    color: #27ae60;
    font-weight: 700;
    margin-bottom: 12px;
}

/* 章节标题 */
.chapter-header {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f5f3ee 0%, #e8e6e1 100%);
    border-radius: 16px;
    margin-bottom: 30px;
    border: 2px solid #c0392b;
}

.chapter-number {
    font-size: 14px;
    color: #c0392b;
    font-weight: 700;
    margin-bottom: 10px;
}

.chapter-title {
    font-family: 'ZCOOL KuaiLe', sans-serif;
    font-size: 28px;
    color: #c0392b;
    margin-bottom: 10px;
}

/* 主题标签 */
.theme-tag {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 16px;
}

/* 分隔线 */
.deco-line {
    text-align: center;
    margin: 30px 0;
    color: #c0392b;
    font-size: 18px;
}

/* 场景标题 */
.scene-title {
    margin: 40px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #c0392b;
}

.scene-title h2 {
    display: inline-block;
    font-size: 22px;
    color: #c0392b;
    margin: 0;
}

.icon {
    margin-right: 10px;
    font-size: 20px;
}

/* 故事文本 */
.story-text {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-indent: 2em;
    color: #333333;
}

/* 总结框 */
.summary-box {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border: 3px solid #c0392b;
    border-radius: 16px;
    padding: 24px;
    margin: 24px 0;
}

.summary-box h4 {
    color: #c0392b;
    margin-bottom: 15px;
    font-size: 18px;
}

/* 导航 */
.nav-chapter {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #c0392b;
}

.nav-chapter a {
    padding: 10px 20px;
    background: #c0392b;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.nav-chapter a:hover {
    background: #a93226;
    color: white;
}

/* 表格样式 - 解决文字不清问题 */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

.data-table th,
.data-table td {
    border: 2px solid #c0392b;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    color: #333333;
}

.data-table th {
    background: linear-gradient(135deg, #fff5f5, #ffe8e8);
    color: #c0392b;
}

.data-table td {
    background: #ffffff;
}

/* 步骤列表 - 解决第七集文字不清问题 */
.step-list {
    margin: 15px 0;
    padding-left: 20px;
}

.step-list li {
    margin: 8px 0;
    font-weight: 600;
    color: #333333;
    line-height: 1.6;
}

.step-list strong {
    color: #c0392b;
}