/* --- 粉白主题通用及代码块美化CSS (rili平台适用) --- */

/* 1. 基础颜色变量定义 */
/* 您可以修改这些值来改变整体色调 */
.markdown-body {
    --main-pink: #FFC0CB; /* 主粉色 - 用于代码块头部等 */
    --dark-pink: #DB7093; /* 深粉色 - 用于强调文本/边框 */
    --light-pink-bg: #FFF0F5; /* 淡粉背景 - 用于纯代码块背景 */
    --white-bg: #FFFFFF; /* 白色背景 - 用于代码内容区 */
    --white-text: #FFFFFF; /* 白色文本 */
    --dark-text: #5c5c5c; /* 深色文本 - 保证可读性 */
    --border-color: #F8D7DA; /* 边框颜色 */
    --syntax-comment: #999988; /* 语法高亮-注释颜色 */
}


/* 2. [可选] 角色卡等自定义HTML的美化样式 */
/* 这部分样式与之前相同，去除了平台特定前缀，通用性更强 */
details {
    background-color: var(--light-pink-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px rgba(219, 112, 147, 0.1);
}
summary {
    background-color: var(--main-pink);
    color: var(--dark-text);
    font-weight: bold;
    padding: 12px 20px;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid var(--border-color);
}
details[open] > summary {
    background-color: var(--dark-pink);
    color: var(--white-text);
}
.section-content {
    padding: 1rem 1.5rem;
    background-color: var(--white-bg);
}
.label {
    color: var(--dark-pink);
    font-weight: 600;
}
hr, .npc-separator {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    margin: 1.5rem 0;
}


/* 3. [核心] 代码块美化 (适配rili平台DOM结构) */

/* (S1) 代码块整体容器：添加圆角和阴影 */
.markdown-body pre {
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 8px rgba(219, 112, 147, 0.1) !important;
    padding: 0 !important; /* 清除预设的内边距，由内部元素控制 */
    background-color: transparent !important; /* 清除预设背景 */
}

/* (S2) 带语言标识代码块的主容器：确保圆角裁切 */
.markdown-body pre > div {
    border-radius: 8px;
    overflow: hidden;
}

/* (S3) 头部栏：应用主粉色背景 */
.markdown-body pre > div > div.flex.justify-between.h-8 {
    background-color: var(--main-pink) !important;
    border-color: var(--border-color) !important; /* (R6) 覆盖底部边框颜色 */
}

/* (S4) 语言标签：设置清晰的文本颜色 */
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\] {
    color: var(--dark-text) !important;
    font-weight: 600;
}

/* (S8, R3) 复制图标颜色联动：确保在粉色背景上可见 */
/* 默认状态 */
.markdown-body pre svg.lucide-copy,
.markdown-body pre div[data-tooltip-id^="copy-tooltip"] > svg {
  color: var(--dark-text) !important;
}
/* Hover状态 */
.markdown-body pre .group:hover svg.lucide-copy,
.markdown-body pre div[data-tooltip-id^="copy-tooltip"]:hover > svg {
  color: var(--white-text) !important;
}

/* (S9, R4) 代码内容区：应用白色背景和深色文本 */
.markdown-body pre > div > div[node] {
    background: var(--white-bg) !important;
    color: var(--dark-text) !important;
    padding: 0.75em 12px !important; /* 调整内边距 */
}

/* (S11) 语法高亮span的通用颜色，可根据具体语法进行覆盖 */
/* 示例：将注释颜色设为灰色 */
.markdown-body pre code span.token.comment,
.markdown-body pre code span.token.prolog,
.markdown-body pre code span.token.doctype,
.markdown-body pre code span.token.cdata {
    color: var(--syntax-comment) !important;
}

/* (S12) 纯代码块（无语言标识）：应用淡粉背景 */
.markdown-body pre > code[node] {
    background-color: var(--light-pink-bg) !important;
    color: var(--dark-text) !important;
    padding: 12px !important;
    border-radius: 8px; /* 自身也需要圆角 */
}