/* --- AI风月作品内置CSS样式 --- */

/* ==================== 通用布局与字体 ==================== */
/* 确保自定义标签为块级，方便布局 */
top-status, bottom-status, text {
    display: block;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; /* 清爽字体 */
    color: #333; /* 深灰色文本，避免刺眼 */
}

/* ==================== 顶部状态栏样式 ==================== */
top-status {
    background-color: #f8f8f8; /* 浅米白背景，清爽 */
    padding: 12px 18px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* 轻微阴影，增加层次感 */
    line-height: 1.6;
    font-size: 0.95em;
}

top-status p {
    margin: 6px 0; /* 顶部状态栏段落间距 */
    padding: 0;
    display: flex; /* 使用Flexbox对齐内容 */
    align-items: center; /* 垂直居中对齐 */
}

/* ==================== 竞争心浮动条 (左粉右青) ==================== */
bar {
    display: inline-flex; /* 行内Flex容器 */
    width: 220px; /* 固定宽度 */
    height: 14px; /* 条形高度 */
    background-color: hsl(190, 40%, 65%); /* 江寻 (青色) 的底色 */
    border-radius: 7px;
    overflow: hidden; /* 隐藏超出部分 */
    vertical-align: middle; /* 垂直居中对齐文本 */
    margin-left: 10px;
    border: 1px solid rgba(0,0,0,0.1); /* 增加一点点边框 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* 内部阴影，增加立体感 */
}

bar span {
    display: block;
    height: 100%;
    background-color: hsl(340, 60%, 75%); /* 宋晚 (粉色) 的填充色 */
    border-radius: 7px;
    transition: width 0.4s ease-in-out; /* 平滑过渡动画 */
    flex-shrink: 0; /* 防止收缩 */
}

/* ==================== 关系稳定度浮动条 ==================== */
stability-bar {
    display: inline-flex;
    width: 220px; /* 固定宽度 */
    height: 14px;
    background-color: #e0e0e0; /* 稳定度条的底色，中性灰 */
    border-radius: 7px;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

stability-bar span {
    display: block;
    height: 100%;
    background-color: hsl(120, 40%, 70%); /* 稳定度的绿色填充 */
    border-radius: 7px;
    transition: width 0.4s ease-in-out;
    flex-shrink: 0;
}

/* ==================== 正文区域样式 ==================== */
text {
    margin-bottom: 25px; /* 正文下方留白 */
    font-size: 1.05em; /* 略大一点的字体，提升阅读体验 */
    line-height: 1.7; /* 舒适的行高 */
    color: #222; /* 更深的文本颜色 */
    padding: 0 5px; /* 稍微内缩 */
}

text p {
    margin: 0 0 1em 0; /* 段落间距 */
    padding: 0;
}

/* ==================== 底部状态栏样式 ==================== */
bottom-status {
    background-color: #ffffff; /* 白色背景 */
    border: 1px solid #e0e0e0; /* 浅边框 */
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* 详细信息折叠区样式 */
details {
    background-color: #fdfdfd; /* 略带暖意的白色 */
    border: 1px solid #ececec;
    border-radius: 6px;
    margin-top: 10px;
    overflow: hidden;
}

summary {
    display: block;
    padding: 12px 18px;
    background-color: #f2f2f2; /* 浅灰色背景 */
    font-weight: bold;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    color: #444;
    position: relative; /* 用于自定义展开/收起图标 */
}

summary:hover {
    background-color: #e8e8e8; /* 鼠标悬停效果 */
    color: #222;
}

/* 模拟展开/收起箭头 */
summary::before {
    content: '▶'; /* 右箭头 */
    display: inline-block;
    width: 1em;
    margin-right: 0.5em;
    transition: transform 0.2s ease;
}

details[open] summary::before {
    content: '▼'; /* 下箭头 */
    transform: rotate(90deg);
}


details p {
    padding: 8px 18px; /* 内部段落的间距 */
    margin: 0;
    border-top: 1px dashed #f0f0f0; /* 虚线分隔 */
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
}

details p:first-of-type {
    border-top: none; /* 第一个p没有上边框 */
}

/* 确保AI填充的占位符内容显示正常 */
p:empty {
    display: none; /* 隐藏空的p标签，避免占位 */
}

/* ==================== NPC对话颜色 ==================== */

/* 宋晚对话 - 柔和粉色 */
.songwan-dialogue {
    color: hsl(340, 60%, 45%); /* 略深一点的柔和粉色，确保文字可读性 */
    font-weight: 600; /* 稍微加粗，与旁白区分 */
}

/* 江寻对话 - 柔和青色 */
.jiangxun-dialogue {
    color: hsl(190, 40%, 40%); /* 略深一点的柔和青色，确保文字可读性 */
    font-weight: 600; /* 稍微加粗，与旁白区分 */
}

/* 确保对话颜色在任何情况下都优先 */
.songwan-dialogue, .jiangxun-dialogue {
    display: inline; /* 确保不破坏段落流 */
}

/* 隐藏AI内部触发词的区域 */
.hidden-trigger-ai {
    display: none !important; /* !important确保它具有最高优先级，强制隐藏 */
}

/* 隐藏世界书中思维链的自定义标签 */
think-confrontation, think-emotional-game {
    display: none;
}

/* 你原有的记忆区CSS，我这里只是作为示例，你只需确保它在你的内置CSS中即可 */
/* details.m {
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f8f8f8;
    padding: 10px;
}
details.m summary {
    font-weight: bold;
    color: #333;
    cursor: pointer;
}
details.m .e {
    margin-top: 10px;
    padding-left: 15px;
    border-left: 2px solid #eee;
    line-height: 1.6;
} */
/* 确保你的bar和stability-bar的样式也在CSS中 */
/* bar, stability-bar {
    display: inline-block;
    width: 100px;
    height: 10px;
    background-color: #eee;
    border-radius: 5px;
    overflow: hidden;
    vertical-align: middle;
}
bar span, stability-bar span {
    display: block;
    height: 100%;
    background-color: #4CAF50; 
    border-radius: 5px;
} */

/* 让自定义的顶级结构标签表现为块级元素 */
reply, top-status, text, bottom-status {
    display: block;
    width: 100%; /* 确保它们占据整个可用宽度 */
}

/* 隐藏AI内部触发词的区域 */
.hidden-trigger-ai {
    display: none !important; /* !important确保它具有最高优先级，强制隐藏 */
    /* 额外的保险措施，确保不占用任何空间 */
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

/* 隐藏世界书中思维链的自定义标签 */
think-confrontation, think-emotional-game {
    display: none;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}