/* --- 古朴羊皮卷轴RPG主题 --- */

/* 1. 移除顶部的默认颜色装饰条 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 2. 统一聊天框主体样式：模拟羊皮卷质感 */
.bg-gray-100\/90.relative.inline-block {
    /* 使用多层渐变模拟不均匀的羊皮纸颜色和纹理 */
    background-color: #fdf6e3 !important;
    background-image: 
        linear-gradient(rgba(224, 202, 169, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224, 202, 169, 0.1) 1px, transparent 1px),
        radial-gradient(circle at top left, rgba(200,180,150,0.2), transparent 40%),
        radial-gradient(circle at bottom right, rgba(200,180,150,0.3), transparent 50%) !important;
    background-size: 20px 20px, 20px 20px, 100% 100%, 100% 100% !important;
    border: 1px solid #7a5c43 !important;
    border-radius: 6px !important;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(122, 92, 67, 0.2) !important;
}

/* 3. 主要文本内容样式：深棕色墨迹效果 */
.markdown-body {
    color: #4a2c2a !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    line-height: 1.75 !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 4. 优化您模板中的元素 */

/* 标题 (###)：手写标题风格 */
.markdown-body h3 {
    color: #6b4f4b !important;
    font-weight: bold !important;
    border-bottom: 2px solid rgba(107, 79, 75, 0.3) !important;
    padding-bottom: 6px !important;
    margin-top: 20px !important;
    letter-spacing: 1px !important;
}

/* 分隔线 (---)：装饰性分隔符 */
.markdown-body hr {
    border: 0 !important;
    height: 10px !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="10"><path d="M0 5 L20 5 L25 2 L30 8 L35 2 L40 8 L45 2 L50 5 L55 8 L60 2 L65 8 L70 2 L75 8 L80 5 L100 5" fill="none" stroke="%237a5c43" stroke-width="1" stroke-opacity="0.5"/></svg>') center repeat-x !important;
    background-size: 50px 10px !important;
    margin: 24px 0 !important;
}

/* 可折叠区域 details：密信样式 */
.markdown-body details {
    background: rgba(243, 233, 218, 0.5) !important; /* 略深的羊皮纸色 */
    border: 1px dashed rgba(122, 92, 67, 0.4) !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
}

/* 可折叠区域的标题 summary：火漆蜡封标记 */
.markdown-body summary {
    color: #4a2c2a !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}
/* 用伪元素模拟蜡封图标 */
.markdown-body summary::before {
    content: '✉️';
    color: #8B0000;
    font-size: 1.2em;
    margin-right: 8px;
    transition: transform 0.2s ease;
}
.markdown-body details[open] > summary::before {
    transform: rotate(10deg);
}

/* 标记 (<strong>)：加重墨迹 */
.markdown-body strong {
    color: #8B0000 !important; /* 暗红色，突出显示 */
    font-weight: bold !important;
}

/* 5. 底部附加元素样式，确保与主题协调 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #6b4f4b !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    opacity: 1 !important;
    background: rgba(122, 92, 67, 0.1) !important;
}

/* 6. 自定义加载动画：魔法符文脉冲 */
/* 隐藏默认加载点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}
/* 加载动画容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
}
/* 使用伪元素创建SVG动画 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23C07B28" stroke-width="1.5"><path d="M12 2 L12 6 M12 18 L12 22 M22 12 L18 12 M6 12 L2 12 M19.07 4.93 L16.24 7.76 M7.76 16.24 L4.93 19.07 M19.07 19.07 L16.24 16.24 M7.76 7.76 L4.93 4.93" /><circle cx="12" cy="12" r="4"/><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="5s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite"/></svg>');
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 7. 减弱动态效果，尊重用户系统偏好 */
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::before {
        /* 在减弱模式下，显示一个静态的、不旋转的符文 */
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23C07B28" stroke-width="1.5" opacity="0.8"><path d="M12 2 L12 6 M12 18 L12 22 M22 12 L18 12 M6 12 L2 12 M19.07 4.93 L16.24 7.76 M7.76 16.24 L4.93 19.07 M19.07 19.07 L16.24 16.24 M7.76 7.76 L4.93 4.93" /><circle cx="12" cy="12" r="4"/></svg>');
        animation: none !important;
    }
}