/* ========================================================
   掠夺者主神空间 - 对话输出端 CSS (木质轻松风)
======================================================== */

/* 1. 整体面板容器基础设定 */
details {
    background-color: #fdf5e6; /* 羊皮纸底色 */
    border: 2px solid #a05a2c; /* 木质边框 */
    border-radius: 8px;
    margin: 15px 0;
    box-shadow: 0 4px 8px rgba(139, 69, 19, 0.15); /* 柔和的阴影 */
    transition: all 0.3s ease;
    overflow: hidden; /* 保证内部不溢出圆角 */
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: #4a3319; /* 深棕色护眼文字 */
}

/* 展开时的容器效果 */
details[open] {
    box-shadow: 0 6px 12px rgba(139, 69, 19, 0.25);
    padding-bottom: 15px; /* 给展开后的底部留出呼吸空间 */
}

/* 2. 栏位按钮化 (Summary 升级) */
summary {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    /* 木质渐变背景 */
    background: linear-gradient(to bottom, #b87333 0%, #a05a2c 50%, #8b4513 100%);
    color: #fff8dc; /* 亮木色字体 */
    padding: 12px 18px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* 隐藏系统默认的小三角 */
    border-bottom: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transition: filter 0.3s ease;
}

/* 隐藏部分浏览器默认的小三角 */
summary::-webkit-details-marker {
    display: none;
}

/* 鼠标悬停时的木板提亮效果 */
summary:hover {
    filter: brightness(1.15);
}

/* 展开后，标题栏下方的分割线 */
details[open] summary {
    border-bottom: 2px solid #5c3a21;
    background: linear-gradient(to bottom, #a05a2c 0%, #8b4513 100%); /* 颜色加深表示按下 */
}

/* 自定义右侧展开箭头 */
summary::after {
    content: "▼";
    font-size: 0.9em;
    color: #f5deb3;
    transition: transform 0.3s ease;
}

details[open] summary::after {
    transform: rotate(180deg); /* 展开时箭头反转 */
}

/* 3. 面板内部内容排版优化 */
/* 为了确保面板内的内容左右有缩进且整齐 */
details > p, 
details > div, 
details > ul, 
details > table,
details > text {
    padding: 0 18px; /* 左右留白 */
    line-height: 1.7;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* 突出显示【属性名】 */
details strong, 
details b {
    color: #8b4513; 
}

/* 4. 记忆区表格美化 (星记忆回廊) */
details table {
    width: calc(100% - 36px);
    margin: 10px 18px;
    border-collapse: collapse;
    background-color: #fffaf0;
    border-radius: 5px;
    overflow: hidden;
}

details th {
    background-color: #deb887; /* 浅木色表头 */
    color: #5c3a21;
    padding: 8px;
    text-align: left;
    border-bottom: 2px solid #cd853f;
}

details td {
    padding: 8px;
    border-bottom: 1px dashed #d2b48c;
    font-size: 0.95em;
}

details tr:last-child td {
    border-bottom: none;
}

/* 5. 针对正文中特殊提示的优化渲染 */
/* 系统提示（高亮金色）框化 */
p[style*="FFD700"], 
p[style*="rgb(255, 215, 0)"] {
    background-color: rgba(255, 215, 0, 0.1); /* 淡淡的金底色 */
    border-left: 4px solid #FFD700; /* 左侧粗边框标识 */
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}

/* 粉色读心（高亮粉色）框化 */
p[style*="FF69B4"], 
p[style*="rgb(255, 105, 180)"] {
    background-color: rgba(255, 105, 180, 0.08); /* 淡淡的粉底色 */
    border-left: 4px solid #FF69B4; /* 左侧粗边框标识 */
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
    font-family: "楷体", "KaiTi", serif; /* 换成楷体，更有内心独白的风味 */
}

/* 6. 行动建议 (数字列表) 美化 */
/* 假设正文结尾的行动建议使用的是有序列表 ol */
ol {
    background-color: #fdf5e6;
    border: 1px dashed #cd853f;
    border-radius: 8px;
    padding: 15px 15px 15px 35px;
    margin-top: 20px;
    color: #4a3319;
}

ol li {
    margin-bottom: 8px;
    line-height: 1.6;
    font-weight: bold;
    color: #8b4513;
}