/* ============================================
   基础折叠框样式 - 修复版
   ============================================ */
.markdown-body details,
details {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(224, 239, 245, 0.8) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 2px 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(160, 195, 210, 0.1) !important;
}

.markdown-body details[open],
details[open] {
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 4px 15px rgba(160, 195, 210, 0.2) !important;
}

/* ============================================
   Summary 标题栏美化
   ============================================ */
.markdown-body summary,
summary {
    font-weight: bold !important;
    color: #556b78 !important;
    padding: 8px 4px !important;
    cursor: pointer !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
}

/* 隐藏 WebKit 默认箭头 */
.markdown-body summary::-webkit-details-marker,
summary::-webkit-details-marker {
    display: none !important;
}

/* 自定义箭头指示器 */
.markdown-body summary::before,
summary::before {
    content: '✦' !important;
    margin-right: 8px !important;
    color: #8da4b1 !important;
    transition: transform 0.3s !important;
    display: inline-block !important;
}

.markdown-body details[open] summary::before,
details[open] summary::before {
    transform: rotate(45deg) !important;
    color: #fdf5d3 !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.1) !important;
}

/* ============================================
   表格美化（记忆与情报）
   ============================================ */
.markdown-body table,
table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(224, 239, 245, 0.5) !important;
}

.markdown-body th,
th {
    background-color: rgba(201, 225, 233, 0.5) !important;
    color: #4a5c68 !important;
    padding: 8px !important;
    font-size: 0.9em !important;
}

.markdown-body td,
td {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-top: 1px solid rgba(224, 239, 245, 0.3) !important;
    padding: 8px !important;
    font-size: 0.85em !important;
    color: #6a8290 !important;
}

/* ============================================
   心声剧场样式（blockquote）
   ============================================ */
.markdown-body blockquote,
blockquote {
    color: #9d8189 !important;
    font-style: italic !important;
    display: block !important;
    padding: 10px !important;
    line-height: 1.6 !important;
    background: linear-gradient(90deg, rgba(241, 203, 203, 0.2) 0%, transparent 100%) !important;
    border-left: 3px solid rgba(241, 203, 203, 0.5) !important;
    border-radius: 0 8px 8px 0 !important;
}

/* ============================================
   剧情分支样式（pre/code）
   ============================================ */
.markdown-body pre,
pre {
    color: #556b78 !important;
    border-left: 3px solid #fdf5d3 !important;
    padding-left: 15px !important;
    background: rgba(253, 245, 211, 0.3) !important;
    border-radius: 0 8px 8px 0 !important;
}

.markdown-body pre code,
pre code {
    color: #556b78 !important;
    background: transparent !important;
}

/* ============================================
   加载动画 - 精准定位版（需要你先确认）
   ============================================ */
/* 
   ⚠️ 警告：不要直接使用 [class*="flex"] 这类宽泛选择器！
   
   请按以下步骤操作：
   
   1. 在页面上按 F12 打开开发者工具
   2. 找到正在加载时的那个小动画元素
   3. 查看它的完整 class 名和父级结构
   4. 把下面的选择器替换为你实际看到的
   
   示例（假设父级有 .loading-wrapper）：
*/
/*
.loading-wrapper .flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    width: 80px !important;
    height: 80px !important;
    background-image: url('https://i.vgy.me/pXhGXZ.gif') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
}
*/

/* ============================================
   移动端适配
   ============================================ */
@media (max-width: 480px) {
    .markdown-body details,
    details {
        padding: 2px 4px !important;
    }
    
    .markdown-body summary,
    summary {
        padding: 6px 2px !important;
        font-size: 0.9em !important;
    }
}