/* ═══════════════════════════════════════════════════════════════
   古风宣纸书卷主题 - 仙气飘飘聊天框美化
   适用于：凝冰天宫·极致溺爱后宫纯爱
═══════════════════════════════════════════════════════════════ */

/* 隐藏默认顶部颜色条 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   聊天框主体 - 宣纸书卷底色
═══════════════════════════════════════════════════════════════ */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(
        180deg,
        #F5F0E1 0%,
        #EDE4D3 15%,
        #F8F4E8 50%,
        #EDE4D3 85%,
        #E8DCCA 100%
    ) !important;
    border: 3px solid #8B7355 !important;
    border-radius: 8px !important;
    box-shadow:
        0 0 0 1px #D4C4A8,
        0 4px 15px rgba(139, 115, 85, 0.3),
        inset 0 0 30px rgba(139, 115, 85, 0.08) !important;
    position: relative !important;
    padding: 20px !important;
    margin: 15px 5px !important;
}

/* 书卷顶部装饰边 */
.bg-gray-100\/90.relative.inline-block::before {
    content: "◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆" !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 10px !important;
    color: #A08060 !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
    opacity: 0.7 !important;
}

/* 书卷底部装饰边 */
.bg-gray-100\/90.relative.inline-block::after {
    content: "◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆" !important;
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 10px !important;
    color: #A08060 !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
    opacity: 0.7 !important;
}

/* ═══════════════════════════════════════════════════════════════
   正文文字样式 - 古籍墨色
═══════════════════════════════════════════════════════════════ */
.markdown-body {
    color: #2C2416 !important;
    font-family: "Noto Serif SC", "Source Han Serif CN", "SimSun", "宋体", serif !important;
    font-size: 15px !important;
    line-height: 2 !important;
    letter-spacing: 0.5px !important;
    text-align: justify !important;
    background: transparent !important;
    padding: 15px 10px !important;
}

/* 正文段落首行缩进 */
.markdown-body p {
    text-indent: 2em !important;
    margin: 0.8em 0 !important;
}

/* 正文加粗强调 - 朱砂红 */
.markdown-body strong,
.markdown-body b {
    color: #8B2500 !important;
    font-weight: 700 !important;
}

/* 正文斜体 - 古铜色 */
.markdown-body em,
.markdown-body i {
    color: #704214 !important;
    font-style: normal !important;
    border-bottom: 1px dashed #A08060 !important;
}

/* ═══════════════════════════════════════════════════════════════
   状态栏折叠区块 - 独立边框书卷分栏
═══════════════════════════════════════════════════════════════ */
.markdown-body details {
    background: linear-gradient(
        135deg,
        #FAF6ED 0%,
        #F5EFE0 50%,
        #EDE4D3 100%
    ) !important;
    border: 2px solid #8B7355 !important;
    border-radius: 6px !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    box-shadow:
        0 2px 8px rgba(139, 115, 85, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    overflow: hidden !important;
}

/* 状态栏标题 - 卷轴题签 */
.markdown-body summary {
    background: linear-gradient(
        90deg,
        #8B7355 0%,
        #A08060 20%,
        #C9A86C 50%,
        #A08060 80%,
        #8B7355 100%
    ) !important;
    color: #FFF8E7 !important;
    font-family: "ZCOOL XiaoWei", "楷体", "KaiTi", serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    border-bottom: 2px solid #6B5344 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 3px !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 移除默认三角 */
.markdown-body summary::-webkit-details-marker {
    display: none !important;
}

/* 标题前后装饰 */
.markdown-body summary::before {
    content: "『" !important;
    margin-right: 8px !important;
    font-size: 16px !important;
}

.markdown-body summary::after {
    content: "』" !important;
    margin-left: 8px !important;
    font-size: 16px !important;
}

/* 状态栏内容区 */
.markdown-body details > *:not(summary) {
    padding: 15px !important;
}

.markdown-body details p,
.markdown-body details li {
    text-indent: 0 !important;
    margin: 6px 0 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    color: #3D3225 !important;
}

/* ═══════════════════════════════════════════════════════════════
   表格样式 - 古籍表格
═══════════════════════════════════════════════════════════════ */
.markdown-body table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 10px 0 !important;
    font-size: 12px !important;
    background: #FAF6ED !important;
}

.markdown-body th {
    background: linear-gradient(180deg, #C9A86C 0%, #A08060 100%) !important;
    color: #FFF8E7 !important;
    font-weight: bold !important;
    padding: 8px 10px !important;
    border: 1px solid #8B7355 !important;
    text-align: center !important;
}

.markdown-body td {
    padding: 8px 10px !important;
    border: 1px solid #C4B59D !important;
    color: #3D3225 !important;
    text-align: left !important;
}

.markdown-body tr:nth-child(even) td {
    background: rgba(139, 115, 85, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════
   分割线 - 古卷分隔
═══════════════════════════════════════════════════════════════ */
.markdown-body hr {
    border: none !important;
    height: 20px !important;
    background: transparent !important;
    position: relative !important;
    margin: 20px 0 !important;
}

.markdown-body hr::before {
    content: "─────── ◈ ───────" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #A08060 !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════
   列表样式 - 古籍条目
═══════════════════════════════════════════════════════════════ */
.markdown-body ul {
    list-style: none !important;
    padding-left: 20px !important;
}

.markdown-body ul li::before {
    content: "◇" !important;
    color: #8B7355 !important;
    margin-right: 8px !important;
    font-size: 10px !important;
}

.markdown-body ol {
    padding-left: 25px !important;
}

.markdown-body ol li {
    color: #3D3225 !important;
}

.markdown-body ol li::marker {
    color: #8B7355 !important;
    font-weight: bold !important;
}

/* ═══════════════════════════════════════════════════════════════
   代码块样式 - 批注框
═══════════════════════════════════════════════════════════════ */
.markdown-body code {
    background: rgba(139, 115, 85, 0.15) !important;
    color: #5D4E37 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-family: "Noto Serif SC", serif !important;
    font-size: 13px !important;
    border: 1px solid rgba(139, 115, 85, 0.3) !important;
}

.markdown-body pre {
    background: linear-gradient(135deg, #F5EFE0 0%, #EDE4D3 100%) !important;
    border: 2px solid #8B7355 !important;
    border-radius: 6px !important;
    padding: 15px !important;
    overflow-x: auto !important;
}

.markdown-body pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   引用块 - 旁注批语
═══════════════════════════════════════════════════════════════ */
.markdown-body blockquote {
    background: linear-gradient(90deg, rgba(139, 115, 85, 0.1) 0%, transparent 100%) !important;
    border-left: 4px solid #C9A86C !important;
    margin: 15px 0 !important;
    padding: 12px 15px !important;
    color: #5D4E37 !important;
    font-style: italic !important;
    border-radius: 0 6px 6px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   底部按钮与信息 - 古铜色调
═══════════════════════════════════════════════════════════════ */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #6B5344 !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #8B7355 !important;
    background: rgba(139, 115, 85, 0.1) !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #8B7355 !important;
}

.text-orange-500 {
    color: #A08060 !important;
}

/* ═══════════════════════════════════════════════════════════════
   加载动画 - 仙气流转
═══════════════════════════════════════════════════════════════ */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 60px !important;
    height: 30px !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Ccircle cx='10' cy='15' r='4' fill='%238B7355'%3E%3Canimate attributeName='opacity' values='1;0.3;1' dur='1.2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='30' cy='15' r='4' fill='%23A08060'%3E%3Canimate attributeName='opacity' values='1;0.3;1' dur='1.2s' repeatCount='indefinite' begin='0.2s'/%3E%3C/circle%3E%3Ccircle cx='50' cy='15' r='4' fill='%23C9A86C'%3E%3Canimate attributeName='opacity' values='1;0.3;1' dur='1.2s' repeatCount='indefinite' begin='0.4s'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* ═══════════════════════════════════════════════════════════════
   移动端适配
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .bg-gray-100\/90.relative.inline-block {
        padding: 15px 10px !important;
        margin: 10px 3px !important;
        border-width: 2px !important;
    }

    .bg-gray-100\/90.relative.inline-block::before,
    .bg-gray-100\/90.relative.inline-block::after {
        content: "◆ ━━━━━━━━━━━━━━ ◆" !important;
        font-size: 8px !important;
    }

    .markdown-body {
        font-size: 14px !important;
        line-height: 1.9 !important;
        padding: 10px 5px !important;
    }

    .markdown-body summary {
        font-size: 13px !important;
        padding: 8px 12px !important;
        letter-spacing: 2px !important;
    }

    .markdown-body details p,
    .markdown-body details li {
        font-size: 12px !important;
    }

    .markdown-body table {
        font-size: 11px !important;
    }

    .markdown-body th,
    .markdown-body td {
        padding: 6px 8px !important;
    }
}

@media (max-width: 480px) {
    .markdown-body {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    .markdown-body summary {
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }

    .markdown-body summary::before,
    .markdown-body summary::after {
        font-size: 14px !important;
    }

    .bg-gray-100\/90.relative.inline-block::before,
    .bg-gray-100\/90.relative.inline-block::after {
        content: "◆ ━━━━━━━━ ◆" !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   减少动效偏好适配
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Ccircle cx='10' cy='15' r='4' fill='%238B7355'/%3E%3Ccircle cx='30' cy='15' r='4' fill='%23A08060'/%3E%3Ccircle cx='50' cy='15' r='4' fill='%23C9A86C'/%3E%3C/svg%3E") !important;
    }
}