/* 状态栏整体容器样式 */
details {
    background-color: #f8f8f8; /* 浅灰色背景，营造清爽感 */
    border: 1px solid #e0e0e0; /* 细微边框，增加层次感 */
    border-radius: 8px; /* 圆角边框，柔和视觉 */
    margin-bottom: 12px; /* 底部间距，让每个模块独立 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 轻微阴影，提升质感 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

details:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* 鼠标悬停时阴影加深，有互动感 */
}

/* 状态栏标题（summary）样式 */
summary {
    font-weight: bold; /* 标题加粗 */
    color: #333; /* 深色字体，突出显示 */
    padding: 10px 15px; /* 内边距，舒适的点击区域 */
    cursor: pointer; /* 鼠标悬停变手型，提示可点击 */
    outline: none; /* 移除点击时的轮廓线 */
    user-select: none; /* 防止文本被选中 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 标题和箭头之间留有空间 */
    border-bottom: 1px solid #eee; /* 底部细线，与内容区隔开 */
}

summary::marker, /* 隐藏默认的marker（例如三角形） */
summary::-webkit-details-marker {
    display: none;
}

/* 自定义展开/折叠图标 */
summary::after {
    content: '▼'; /* 默认折叠状态显示向下箭头 */
    font-size: 0.8em;
    color: #666;
    transform: rotate(0deg);
    transition: transform 0.2s ease; /* 旋转动画 */
}

details[open] > summary::after {
    content: '▲'; /* 展开状态显示向上箭头 */
    transform: rotate(0deg); /* 确保箭头是向上的 */
}

/* 状态栏内容（p标签）样式 */
details > p {
    padding: 8px 15px; /* 内边距，让内容不至于太贴边 */
    margin: 0; /* 移除p标签默认的外边距 */
    color: #555; /* 字体颜色 */
    line-height: 1.6; /* 行高，增加阅读舒适度 */
    border-top: 1px dashed #f0f0f0; /* 每个信息项之间的虚线分隔 */
}

/* 移除第一个p标签上方的虚线，保持整洁 */
details > p:first-of-type {
    border-top: none;
}

/* 强调数值的颜色 */
details > p strong {
    color: #c0392b; /* 醒目的红色，表示好感度/底线/视线等重要数值 */
}

/* 主文本内容区域的样式 */
/* 注意：这里只提供基础样式，因为<text>标签可能不是标准的HTML元素，
        且其样式可能受到平台主内容区域的更多限制。
        如果需要更精细控制，可能需要平台提供<text>标签的父容器ID或类名。*/
text {
    display: block; /* 确保<text>标签独占一行 */
    padding: 20px 15px; /* 舒适的内边距 */
    line-height: 1.8; /* 较大的行高，提升阅读体验 */
    font-size: 1.1em; /* 稍大的字体，适合阅读长文本 */
    color: #333; /* 深色字体，易于阅读 */
    margin-bottom: 20px; /* 底部留白 */
    background-color: #ffffff; /* 白色背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* 轻微阴影 */
}

/* 为状态栏中的特殊数值占位符提供样式 */
p:has(span[data-placeholder="林栀好感度"]) span[data-placeholder="林栀好感度"],
p:has(span[data-placeholder="道德底线值"]) span[data-placeholder="道德底线值"],
p:has(span[data-placeholder="家族视线值"]) span[data-placeholder="家族视线值"] {
    font-weight: bold;
    color: #e74c3c; /* 使用更鲜明的红色突出这些关键数值 */
}

/* 针对手机端的小屏幕优化 */
@media (max-width: 768px) {
    details {
        margin-bottom: 10px;
        border-radius: 5px;
    }
    summary {
        padding: 8px 12px;
        font-size: 0.95em;
    }
    details > p {
        padding: 6px 12px;
        font-size: 0.9em;
    }
    text {
        padding: 15px 10px;
        font-size: 1em;
    }
}

/* 林栀对话的樱花粉 */
linzhi-dialogue {
    display: block; /* 确保对话独占一行 */
    color: #f4a7b6; /* 樱花粉 */
    font-weight: bold; /* 稍微加粗，更显眼 */
    margin: 8px 0; /* 对话上下留白 */
    padding-left: 10px; /* 稍微缩进，与普通文本区分 */
    border-left: 3px solid #f4a7b6; /* 左侧边框，增加辨识度 */
}

/* 其他NPC对话的深蓝 */
npc-dialogue {
    display: block; /* 确保对话独占一行 */
    color: #2c3e50; /* 深蓝 */
    font-weight: bold; /* 稍微加粗 */
    margin: 8px 0; /* 对话上下留白 */
    padding-left: 10px; /* 稍微缩进 */
    border-left: 3px solid #2c3e50; /* 左侧边框 */
}

/* 确保在text标签内的段落p不会被意外着色 */
text p {
    color: #333; /* 保持默认文本颜色 */
    font-weight: normal; /* 保持默认字体粗细 */
    margin: 0; /* 移除默认外边距 */
    padding: 0; /* 移除默认内边距 */
}

/* 针对手机端的小屏幕优化 */
@media (max-width: 768px) {
    linzhi-dialogue,
    npc-dialogue {
        font-size: 0.95em; /* 手机端字体略小 */
        margin: 6px 0;
        padding-left: 8px;
        border-left-width: 2px;
    }
}