/* ═══════════════════════════════════════════════════════════════
   🏔️ 仙途·玉虚境 — 修仙游戏面板主题（通用适配版）
   配色：玉白 · 古金 · 翠青 · 丹褐 · 墨色
   特性：道纹装饰 · 太极加载 · 灵气微粒 · 游戏化面板
   ═══════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 0  基础清理（通用隐藏废元素）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 1  聊天框主体 — 仙府玉简
   原选择器 .bg-gray-100\/90.relative.inline-block 已泛化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 泛化：匹配常见聊天容器，兼顾背景灰/白、inline-block/flex */
[class*="bg-gray-100"][class*="inline-block"],
[class*="bg-white"][class*="inline-block"],
.message-container,
.chat-message-container,
[class*="chat-bubble"] {
    background:
        linear-gradient(168deg,
            #fbf9f2 0%,
            #f7f3ea 22%,
            #fdfbf5 48%,
            #f5f1e7 74%,
            #fbf9f2 100%) !important;
    border: 1px solid rgba(178, 156, 108, 0.30) !important;
    border-radius: 5px !important;
    box-shadow:
        0 0 0 3px rgba(178, 156, 108, 0.05),
        0 0 0 1px rgba(178, 156, 108, 0.10),
        0 6px 30px rgba(128, 108, 62, 0.055),
        0 2px 8px rgba(128, 108, 62, 0.03),
        inset 0 0 55px rgba(255, 250, 232, 0.45),
        inset 0 1px 0 rgba(255, 253, 244, 0.92) !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    transition: box-shadow 0.45s ease, border-color 0.45s ease !important;
}

/* 为了保留 hover 效果，需同样泛化 */
[class*="bg-gray-100"][class*="inline-block"]:hover,
[class*="bg-white"][class*="inline-block"]:hover,
.message-container:hover,
.chat-message-container:hover,
[class*="chat-bubble"]:hover {
    border-color: rgba(178, 156, 108, 0.42) !important;
    box-shadow:
        0 0 0 3px rgba(178, 156, 108, 0.08),
        0 0 0 1px rgba(178, 156, 108, 0.14),
        0 8px 38px rgba(128, 108, 62, 0.08),
        0 3px 10px rgba(128, 108, 62, 0.04),
        inset 0 0 65px rgba(255, 248, 225, 0.55),
        inset 0 1px 0 rgba(255, 253, 244, 1) !important;
}

/* ── 灵气微粒浮动 (SMIL) ── */
[class*="bg-gray-100"][class*="inline-block"]::before,
[class*="bg-white"][class*="inline-block"]::before,
.message-container::before,
.chat-message-container::before,
[class*="chat-bubble"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.45 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='400' viewBox='0 0 500 400'%3E%3Ccircle cx='65' cy='55' r='2' fill='%2390b8a0' opacity='0.35'%3E%3Canimate attributeName='cy' values='55;32;55' dur='7s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.35;0.08;0.35' dur='7s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='255' cy='105' r='1.5' fill='%23caa850' opacity='0.3'%3E%3Canimate attributeName='cy' values='105;78;105' dur='9s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.3;0.06;0.3' dur='9s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='425' cy='195' r='2' fill='%2390b8a0' opacity='0.25'%3E%3Canimate attributeName='cy' values='195;168;195' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.25;0.05;0.25' dur='8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='145' cy='295' r='1.2' fill='%23caa850' opacity='0.28'%3E%3Canimate attributeName='cy' values='295;275;295' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.28;0.07;0.28' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='380' cy='42' r='1.6' fill='%23a8c0b0' opacity='0.2'%3E%3Canimate attributeName='cy' values='42;22;42' dur='10s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.2;0.04;0.2' dur='10s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* ── 顶部道纹装饰线 (SMIL) ── */
[class*="bg-gray-100"][class*="inline-block"]::after,
[class*="bg-white"][class*="inline-block"]::after,
.message-container::after,
.chat-message-container::after,
[class*="chat-bubble"]::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 3% !important;
    width: 94% !important;
    height: 16px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='16' viewBox='0 0 300 16'%3E%3Cline x1='10' y1='8' x2='130' y2='8' stroke='%23c4a44a' stroke-width='0.5' opacity='0.22'/%3E%3Cline x1='170' y1='8' x2='290' y2='8' stroke='%23c4a44a' stroke-width='0.5' opacity='0.22'/%3E%3Cpath d='M150,1.5 L158,8 L150,14.5 L142,8 Z' fill='none' stroke='%23c4a44a' stroke-width='0.9' opacity='0.38'%3E%3Canimate attributeName='opacity' values='0.38;0.55;0.38' dur='4s' repeatCount='indefinite'/%3E%3C/path%3E%3Ccircle cx='150' cy='8' r='1.8' fill='%23c4a44a' opacity='0.22'%3E%3Canimate attributeName='opacity' values='0.22;0.42;0.22' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M15,6.5 L18,8 L15,9.5 L12,8 Z' fill='%23c4a44a' opacity='0.18'/%3E%3Cpath d='M285,6.5 L288,8 L285,9.5 L282,8 Z' fill='%23c4a44a' opacity='0.18'/%3E%3Cpath d='M70,7 L72,8 L70,9 L68,8 Z' fill='%23b8a060' opacity='0.12'/%3E%3Cpath d='M230,7 L232,8 L230,9 L228,8 Z' fill='%23b8a060' opacity='0.12'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 2  正文文字 — 墨韵古卷
   兼容 .markdown-body 与常见备用类 .prose
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body,
[class*="markdown"],
.prose,
.message-content {
    color: #2d2418 !important;
    font-family: "LXGW WenKai", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif !important;
    font-size: 15px !important;
    line-height: 1.88 !important;
    letter-spacing: 0.35px !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

.markdown-body strong,
[class*="markdown"] strong,
.prose strong,
.message-content strong {
    color: #5c3d18 !important;
    font-weight: 700 !important;
}

.markdown-body em,
[class*="markdown"] em,
.prose em,
.message-content em {
    color: #4a6352 !important;
    font-style: italic !important;
}

/* ── 标题 — 卷轴题名 ── */
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4,
[class*="markdown"] h1, [class*="markdown"] h2, [class*="markdown"] h3, [class*="markdown"] h4,
.prose h1, .prose h2, .prose h3, .prose h4,
.message-content h1, .message-content h2, .message-content h3, .message-content h4 {
    color: #38301e !important;
    font-weight: 700 !important;
    margin-top: 1.3em !important;
    padding-bottom: 5px !important;
    border-bottom: none !important;
    position: relative !important;
}

.markdown-body h1,
[class*="markdown"] h1,
.prose h1,
.message-content h1 {
    font-size: 1.35em !important;
    text-align: center !important;
    padding-bottom: 10px !important;
}

.markdown-body h1::after,
[class*="markdown"] h1::after,
.prose h1::after,
.message-content h1::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 15% !important;
    width: 70% !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(196, 164, 74, 0.35) 25%,
        rgba(196, 164, 74, 0.5) 50%,
        rgba(196, 164, 74, 0.35) 75%,
        transparent) !important;
}

.markdown-body h2,
[class*="markdown"] h2,
.prose h2,
.message-content h2 {
    font-size: 1.2em !important;
    border-left: 3px solid rgba(196, 164, 74, 0.45) !important;
    padding-left: 10px !important;
}

.markdown-body h3,
[class*="markdown"] h3,
.prose h3,
.message-content h3 {
    font-size: 1.08em !important;
    color: #4a5e48 !important;
}

/* ── 水平线 — 道纹分界 ── */
.markdown-body hr,
[class*="markdown"] hr,
.prose hr,
.message-content hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(178, 156, 108, 0.15) 10%,
        rgba(178, 156, 108, 0.35) 35%,
        rgba(196, 164, 74, 0.4) 50%,
        rgba(178, 156, 108, 0.35) 65%,
        rgba(178, 156, 108, 0.15) 90%,
        transparent 100%) !important;
    margin: 1.6em 0 !important;
}

/* ── 引用块 — 传音玉简 ── */
.markdown-body blockquote,
[class*="markdown"] blockquote,
.prose blockquote,
.message-content blockquote {
    border: 1px solid rgba(196, 164, 74, 0.25) !important;
    border-left: 3px solid rgba(196, 164, 74, 0.5) !important;
    background: linear-gradient(135deg,
        rgba(252, 248, 235, 0.6),
        rgba(248, 242, 222, 0.5)) !important;
    color: #443a28 !important;
    padding: 10px 14px !important;
    border-radius: 2px 6px 6px 2px !important;
    font-style: italic !important;
    box-shadow: inset 0 0 20px rgba(250, 245, 225, 0.3) !important;
}

/* ── 行内代码 ── */
.markdown-body code,
[class*="markdown"] code,
.prose code,
.message-content code {
    background: rgba(120, 155, 135, 0.08) !important;
    color: #3a5848 !important;
    border: 1px solid rgba(120, 155, 135, 0.18) !important;
    border-radius: 3px !important;
    padding: 1px 5px !important;
    font-size: 0.88em !important;
}

/* ── 代码块 ── */
.markdown-body pre,
[class*="markdown"] pre,
.prose pre,
.message-content pre {
    background: rgba(248, 245, 238, 0.8) !important;
    border: 1px solid rgba(178, 156, 108, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.markdown-body pre code,
[class*="markdown"] pre code,
.prose pre code,
.message-content pre code {
    background: transparent !important;
    border: none !important;
    color: #3a3228 !important;
}

/* ── 链接 ── */
.markdown-body a,
[class*="markdown"] a,
.prose a,
.message-content a {
    color: #5a8a6a !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(90, 138, 106, 0.3) !important;
    transition: all 0.25s ease !important;
}

.markdown-body a:hover,
[class*="markdown"] a:hover,
.prose a:hover,
.message-content a:hover {
    color: #3a6a4a !important;
    text-decoration-color: rgba(90, 138, 106, 0.6) !important;
}

/* ── 列表 ── */
.markdown-body ul, .markdown-body ol,
[class*="markdown"] ul, [class*="markdown"] ol,
.prose ul, .prose ol,
.message-content ul, .message-content ol {
    color: #2d2418 !important;
}

.markdown-body li,
[class*="markdown"] li,
.prose li,
.message-content li {
    margin: 2px 0 !important;
}

.markdown-body li::marker,
[class*="markdown"] li::marker,
.prose li::marker,
.message-content li::marker {
    color: rgba(178, 156, 108, 0.55) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 3  游戏面板系统 — details/summary（沿用 .markdown-body）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body details {
    border: 1px solid rgba(178, 156, 108, 0.28) !important;
    border-radius: 4px !important;
    margin: 10px 0 !important;
    background: rgba(253, 251, 245, 0.55) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(128, 108, 62, 0.03) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.markdown-body details:hover {
    border-color: rgba(178, 156, 108, 0.38) !important;
    box-shadow: 0 3px 15px rgba(128, 108, 62, 0.055) !important;
}

.markdown-body details[open] {
    box-shadow: 0 3px 18px rgba(128, 108, 62, 0.06) !important;
}

/* ── summary — 仙牌标签 ── */
.markdown-body summary {
    background: linear-gradient(90deg,
        rgba(238, 232, 214, 0.85) 0%,
        rgba(246, 242, 230, 0.92) 50%,
        rgba(238, 232, 214, 0.85) 100%) !important;
    padding: 9px 14px 9px 16px !important;
    color: #3c3220 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: "LXGW WenKai", "Noto Serif SC", serif !important;
    cursor: pointer !important;
    list-style: none !important;
    border-left: 3px solid rgba(196, 164, 74, 0.4) !important;
    border-bottom: 1px solid rgba(178, 156, 108, 0.18) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    letter-spacing: 0.5px !important;
}

.markdown-body summary::-webkit-details-marker {
    display: none !important;
}

.markdown-body summary::after {
    content: '▸' !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(178, 156, 108, 0.45) !important;
    font-size: 13px !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}

.markdown-body summary:hover {
    background: linear-gradient(90deg,
        rgba(232, 226, 205, 0.92) 0%,
        rgba(242, 238, 222, 0.96) 50%,
        rgba(232, 226, 205, 0.92) 100%) !important;
    border-left-color: rgba(196, 164, 74, 0.6) !important;
    color: #2c2210 !important;
}

.markdown-body summary:hover::after {
    color: rgba(196, 164, 74, 0.65) !important;
}

.markdown-body details[open] > summary {
    background: linear-gradient(90deg,
        rgba(228, 222, 202, 0.95) 0%,
        rgba(238, 234, 218, 0.97) 50%,
        rgba(228, 222, 202, 0.95) 100%) !important;
    border-left-color: rgba(196, 164, 74, 0.65) !important;
    color: #28200e !important;
    box-shadow: 0 2px 8px rgba(178, 156, 108, 0.06) !important;
}

.markdown-body details[open] > summary::after {
    content: '▾' !important;
    color: rgba(196, 164, 74, 0.7) !important;
}

.markdown-body details > :not(summary) {
    padding: 0 14px !important;
}

.markdown-body details[open] {
    background: linear-gradient(180deg,
        rgba(253, 251, 245, 0.4) 0%,
        rgba(250, 247, 238, 0.35) 100%) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 4  数据表格 — 玉册格位
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body table {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid rgba(178, 156, 108, 0.25) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    font-size: 13px !important;
    margin: 8px 0 !important;
}

.markdown-body table th {
    background: linear-gradient(180deg,
        rgba(238, 232, 214, 0.82),
        rgba(232, 225, 206, 0.88)) !important;
    color: #3a3020 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(178, 156, 108, 0.2) !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
}

.markdown-body table td {
    padding: 5px 10px !important;
    border: 1px solid rgba(178, 156, 108, 0.13) !important;
    color: #3a3228 !important;
}

.markdown-body table tr:nth-child(even) td {
    background: rgba(248, 244, 232, 0.35) !important;
}

.markdown-body table tr:hover td {
    background: rgba(242, 236, 218, 0.4) !important;
    transition: background 0.2s ease !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 5  底部附加元素（泛化按钮/文字）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #7a9a72 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #4a7a42 !important;
    background: rgba(120, 155, 135, 0.06) !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #9a9282 !important;
    font-size: 11px !important;
}

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


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 6  加载动画 — 太极阵（泛化选择器）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 泛化：匹配任何宽高固定的加载容器 */
[class*="items-center"][class*="justify-center"][class*="w-"],
[class*="loading-spinner"] {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
}

[class*="items-center"][class*="justify-center"][class*="w-"]::before,
[class*="loading-spinner"]::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 36px !important;
    height: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='3s' repeatCount='indefinite'/%3E%3Ccircle cx='18' cy='18' r='15' fill='none' stroke='%23c4a44a' stroke-width='0.7' opacity='0.28'/%3E%3Cpath d='M18,3 A15,15 0 0,1 18,33 A7.5,7.5 0 0,1 18,18 A7.5,7.5 0 0,0 18,3' fill='%235a7a60' opacity='0.45'/%3E%3Cpath d='M18,33 A15,15 0 0,1 18,3 A7.5,7.5 0 0,0 18,18 A7.5,7.5 0 0,1 18,33' fill='%23c4a44a' opacity='0.35'/%3E%3Ccircle cx='18' cy='10.5' r='2.2' fill='%23c4a44a' opacity='0.4'/%3E%3Ccircle cx='18' cy='25.5' r='2.2' fill='%235a7a60' opacity='0.5'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='16.8' fill='none' stroke='%238a9a80' stroke-width='0.4' opacity='0.18' stroke-dasharray='2.5,3.5'%3E%3CanimateTransform attributeName='transform' type='rotate' from='360 18 18' to='0 18 18' dur='10s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 7  顶部栏 — 仙宫门楣（泛化 sticky 容器）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sticky.w-full.top-0.flex.items-center,
header[class*="sticky"] {
    background: linear-gradient(90deg,
        rgba(248, 245, 236, 0.98) 0%,
        rgba(252, 250, 244, 0.99) 50%,
        rgba(248, 245, 236, 0.98) 100%) !important;
    border-bottom: 1px solid rgba(178, 156, 108, 0.22) !important;
    box-shadow: 0 2px 14px rgba(128, 108, 62, 0.045) !important;
    backdrop-filter: blur(6px) !important;
}

/* 模型选择器 */
#ai-model-selector .group.flex.items-center,
[class*="model-selector"] {
    border: 1px solid rgba(178, 156, 108, 0.28) !important;
    border-radius: 5px !important;
    padding: 3px 10px !important;
    background: linear-gradient(180deg,
        rgba(250, 247, 238, 0.85),
        rgba(245, 241, 230, 0.9)) !important;
    transition: all 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover,
[class*="model-selector"]:hover {
    border-color: rgba(196, 164, 74, 0.42) !important;
    box-shadow: 0 2px 12px rgba(178, 156, 108, 0.08) !important;
    background: linear-gradient(180deg,
        rgba(248, 244, 232, 0.95),
        rgba(242, 238, 225, 0.97)) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
    color: #3c3420 !important;
    font-weight: 700 !important;
    font-family: "LXGW WenKai", "Noto Serif SC", serif !important;
}

/* 设置按钮 */
#header-setting-button {
    color: #8a8068 !important;
    transition: all 0.3s ease !important;
}

#header-setting-button:hover {
    color: #5a5038 !important;
}

#header-setting-button svg {
    transition: transform 0.5s ease !important;
}

#header-setting-button:hover svg {
    transform: rotate(90deg) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 8  底部输入栏 — 传音符（ID+属性泛化）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.bg-gradient-to-t {
    background: linear-gradient(to top,
        rgba(250, 248, 240, 0.96) 0%,
        transparent 100%) !important;
}

#ai-chat-bottom-input,
[class*="bottom-input"],
textarea[id*="chat"] {
    background: linear-gradient(180deg,
        rgba(252, 250, 244, 0.97),
        rgba(248, 244, 235, 0.98)) !important;
    border: 1px solid rgba(178, 156, 108, 0.28) !important;
    border-radius: 6px !important;
    box-shadow:
        0 -2px 16px rgba(128, 108, 62, 0.035),
        0 0 0 3px rgba(178, 156, 108, 0.04),
        inset 0 1px 0 rgba(255, 252, 242, 0.8) !important;
    transition: all 0.35s ease !important;
}

#ai-chat-bottom-input:focus-within,
[class*="bottom-input"]:focus-within,
textarea[id*="chat"]:focus {
    border-color: rgba(196, 164, 74, 0.45) !important;
    box-shadow:
        0 -2px 22px rgba(196, 164, 74, 0.05),
        0 0 0 3px rgba(196, 164, 74, 0.06),
        inset 0 0 20px rgba(255, 250, 230, 0.2) !important;
}

#ai-chat-input,
textarea[id*="chat"] {
    color: #2a2012 !important;
    font-family: "LXGW WenKai", "Noto Serif SC", serif !important;
    font-size: 15px !important;
    caret-color: #8a7a4a !important;
}

#ai-chat-input::placeholder,
textarea[id*="chat"]::placeholder {
    color: rgba(140, 125, 90, 0.38) !important;
    font-style: italic !important;
}

#ai-chat-input::selection,
textarea[id*="chat"]::selection {
    background: rgba(196, 164, 74, 0.15) !important;
    color: #1a1408 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 9  按钮栏 — 令牌（ID+类泛化）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#ai-mod-button2 button.MuiButton-root,
[class*="mod-button"] button.MuiButton-root {
    background: linear-gradient(180deg,
        rgba(250, 247, 238, 0.96),
        rgba(244, 240, 228, 0.97)) !important;
    border: 1px solid rgba(178, 156, 108, 0.28) !important;
    border-radius: 4px !important;
    color: #4a4028 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: "LXGW WenKai", serif !important;
    box-shadow: 0 1px 4px rgba(128, 108, 62, 0.04) !important;
    transition: all 0.3s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover,
[class*="mod-button"] button.MuiButton-root:hover {
    border-color: rgba(196, 164, 74, 0.45) !important;
    color: #2e2410 !important;
    background: linear-gradient(180deg,
        rgba(246, 242, 228, 1),
        rgba(240, 235, 218, 1)) !important;
    box-shadow: 0 3px 14px rgba(178, 156, 108, 0.08) !important;
    transform: translateY(-1px) !important;
}

#ai-mod-button2 button.MuiButton-root svg,
[class*="mod-button"] button.MuiButton-root svg {
    transition: transform 0.3s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg,
[class*="mod-button"] button.MuiButton-root:hover svg {
    transform: scale(1.12) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 10  开场白选择器（泛化）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"],
div.flex.items-center.h-9.cursor-pointer.group {
    background: linear-gradient(180deg,
        rgba(250, 248, 240, 0.98),
        rgba(245, 242, 232, 0.98)) !important;
    border: 1px solid rgba(178, 156, 108, 0.28) !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 6px rgba(128, 108, 62, 0.035) !important;
    transition: all 0.3s ease !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover,
div.flex.items-center.h-9.cursor-pointer.group:hover {
    border-color: rgba(196, 164, 74, 0.42) !important;
    box-shadow: 0 2px 12px rgba(178, 156, 108, 0.07) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
    color: #8a7a58 !important;
    transition: color 0.25s ease !important;
}

div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="ChevronDown"] {
    color: #6a5a38 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 11  分页栏（泛化 MUI 分页）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.MuiPaginationItem-root {
    color: #6a6048 !important;
    border-color: rgba(178, 156, 108, 0.22) !important;
    font-family: "LXGW WenKai", serif !important;
    transition: all 0.3s ease !important;
}

.MuiPaginationItem-root:hover {
    background: rgba(196, 164, 74, 0.06) !important;
    border-color: rgba(196, 164, 74, 0.35) !important;
}

.MuiPaginationItem-root.Mui-selected {
    background: rgba(196, 164, 74, 0.1) !important;
    color: #3a3018 !important;
    border-color: rgba(196, 164, 74, 0.45) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 6px rgba(196, 164, 74, 0.08) !important;
}

.MuiPaginationItem-root.Mui-disabled {
    opacity: 0.3 !important;
}

.MuiPaginationItem-icon {
    color: #8a7a58 !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #6a6048 !important;
}

.MuiInputBase-input {
    border-color: rgba(178, 156, 108, 0.25) !important;
    color: #4a4028 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 12  评论区 — 论道长廊（泛化背景/文字）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(180deg,
        rgba(252, 250, 244, 0.99) 0%,
        rgba(248, 245, 236, 0.99) 100%) !important;
}

div.text-lg.font-bold {
    color: #38301e !important;
    font-family: "LXGW WenKai", serif !important;
    letter-spacing: 0.5px !important;
}

p.MuiTypography-body1.text-grey-600 {
    color: #6a6048 !important;
}

span.MuiRating-iconEmpty svg {
    color: rgba(196, 164, 74, 0.22) !important;
}

span.MuiRating-iconFilled svg {
    color: #c8a030 !important;
}

div.flex.flex-col.border-gray-200 {
    border-color: rgba(178, 156, 108, 0.2) !important;
}

textarea.rc-textarea {
    background: rgba(255, 253, 248, 0.95) !important;
    color: #2a2012 !important;
    border-color: rgba(178, 156, 108, 0.22) !important;
    border-radius: 4px !important;
    font-family: "LXGW WenKai", serif !important;
    transition: all 0.3s ease !important;
}

textarea.rc-textarea:focus {
    border-color: rgba(196, 164, 74, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(196, 164, 74, 0.05) !important;
}

div.bg-gray-100.text-gray-500 {
    background: rgba(245, 241, 230, 0.75) !important;
    color: #8a8068 !important;
}

div.cursor-pointer.group.flex.items-center.justify-center {
    transition: all 0.3s ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
    transform: scale(1.06) !important;
}

div.style_divider__mW0YX {
    background: linear-gradient(90deg,
        transparent,
        rgba(178, 156, 108, 0.22),
        transparent) !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary,
button.MuiButton-outlinedPrimary {
    border-radius: 4px !important;
    font-family: "LXGW WenKai", serif !important;
    transition: all 0.3s ease !important;
}

button.MuiButton-containedPrimary {
    background: rgba(196, 164, 74, 0.12) !important;
    color: #3a3018 !important;
    border: 1px solid rgba(196, 164, 74, 0.35) !important;
}

button.MuiButton-outlinedPrimary {
    color: #6a6048 !important;
    border-color: rgba(178, 156, 108, 0.25) !important;
}

button.MuiButton-outlinedPrimary:hover {
    background: rgba(196, 164, 74, 0.05) !important;
    border-color: rgba(196, 164, 74, 0.4) !important;
}

/* 评论列表 */
div.p-3.overflow-y-auto {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(178, 156, 108, 0.18) transparent !important;
}

div.group.ml-0 {
    border-bottom: 1px solid rgba(178, 156, 108, 0.08) !important;
    transition: background 0.25s ease !important;
}

div.group.ml-0:hover {
    background: rgba(248, 244, 232, 0.45) !important;
}

div.group img.rounded-full {
    border: 1.5px solid rgba(178, 156, 108, 0.22) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

div.text-sm.text-grey-600 span.font-bold {
    color: #3c3420 !important;
    font-weight: 700 !important;
}

span.text-\[10px\] {
    color: #8a8a5a !important;
    background: rgba(196, 164, 74, 0.07) !important;
    border-radius: 3px !important;
    padding: 0 3px !important;
}

div.break-all {
    color: #3a3228 !important;
    line-height: 1.72 !important;
}

div.text-xs.text-grey-600 {
    color: #9a9282 !important;
}

button.text-gray-400 {
    color: #9a9078 !important;
    transition: color 0.25s ease !important;
}

button.text-gray-400:hover {
    color: #6a6040 !important;
}

button.text-gray-400 svg {
    transition: transform 0.25s ease !important;
}

button.text-gray-400:hover svg {
    transform: scale(1.15) !important;
}

span.cursor-pointer {
    color: #7a8a62 !important;
    transition: color 0.25s ease !important;
}

span.cursor-pointer:hover {
    color: #4a6a32 !important;
}

div.ml-8.border-l {
    border-color: rgba(178, 156, 108, 0.15) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 13  移动端适配
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
    .markdown-body,
    [class*="markdown"],
    .prose,
    .message-content {
        font-size: 14px !important;
        line-height: 1.78 !important;
    }

    .markdown-body summary,
    [class*="markdown"] summary,
    .prose summary,
    .message-content summary {
        font-size: 13px !important;
        padding: 7px 12px !important;
    }

    .markdown-body table,
    [class*="markdown"] table,
    .prose table,
    .message-content table {
        font-size: 11.5px !important;
    }

    .markdown-body table th,
    [class*="markdown"] table th,
    .prose table th,
    .message-content table th {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }

    .markdown-body table td,
    [class*="markdown"] table td,
    .prose table td,
    .message-content table td {
        padding: 3px 6px !important;
    }

    /* 加载动画尺寸 */
    [class*="items-center"][class*="justify-center"][class*="w-"],
    [class*="loading-spinner"] {
        width: 34px !important;
        height: 34px !important;
    }

    [class*="items-center"][class*="justify-center"][class*="w-"]::before,
    [class*="loading-spinner"]::before {
        width: 28px !important;
        height: 28px !important;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 14  减弱动效
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce) {
    [class*="bg-gray-100"][class*="inline-block"]::before,
    [class*="bg-white"][class*="inline-block"]::before,
    .message-container::before,
    .chat-message-container::before,
    [class*="chat-bubble"]::before {
        opacity: 0.15 !important;
    }

    [class*="bg-gray-100"][class*="inline-block"],
    [class*="bg-white"][class*="inline-block"],
    .message-container,
    .chat-message-container,
    [class*="chat-bubble"] {
        transition: none !important;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ◈ 面板容器 — 悬浮卡片（沿用 .markdown-body details）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body details {
    margin: 14px 0 !important;
    border: 1.5px solid rgba(196, 164, 74, 0.24) !important;
    border-radius: 4px !important;
    background-color: rgba(254, 252, 248, 0.18) !important;
    overflow: hidden !important;
    box-shadow:
        0 0 0 1px rgba(254, 252, 248, 0.88),
        0 0 0 3px rgba(196, 164, 74, 0.06),
        0 4px 16px rgba(128, 108, 62, 0.04) !important;
    transform: translateY(0px) !important;
    transition:
        transform 0.32s cubic-bezier(0.34, 1.25, 0.64, 1),
        box-shadow 0.32s ease,
        border-color 0.32s ease !important;
    position: relative !important;
}

.markdown-body details:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(196, 164, 74, 0.38) !important;
    box-shadow:
        0 0 0 1px rgba(254, 252, 248, 0.92),
        0 0 0 3px rgba(196, 164, 74, 0.10),
        0 10px 32px rgba(128, 108, 62, 0.075),
        0 3px 8px rgba(128, 108, 62, 0.04) !important;
}

.markdown-body details[open] {
    transform: translateY(-1px) !important;
    border-color: rgba(196, 164, 74, 0.36) !important;
    background-color: transparent !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M1,1 L1,19 L19,19' fill='none' stroke='%23c4a44a' stroke-width='1.3' opacity='0.32'/%3E%3Cpath d='M3,1 L3,17 L19,17' fill='none' stroke='%23c4a44a' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M19,1 L19,19 L1,19' fill='none' stroke='%23c4a44a' stroke-width='1.3' opacity='0.32'/%3E%3Cpath d='M17,1 L17,17 L1,17' fill='none' stroke='%23c4a44a' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E"),
        linear-gradient(180deg,
            rgba(253, 251, 246, 0.38) 0%,
            rgba(250, 247, 240, 0.26) 100%) !important;
    background-position: 0 100%, 100% 100%, center !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 20px 20px, 20px 20px, 100% 100% !important;
    animation: xian-panel-breathe 3.5s ease-in-out infinite !important;
}

.markdown-body details[open]:hover {
    transform: translateY(-2px) !important;
}

/* ── 关键帧 ── */
@keyframes xian-panel-breathe {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(254, 252, 248, 0.90),
            0 0 0 3px rgba(196, 164, 74, 0.09),
            0 7px 28px rgba(128, 108, 62, 0.065);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(254, 252, 248, 0.92),
            0 0 0 3px rgba(196, 164, 74, 0.16),
            0 10px 36px rgba(196, 164, 74, 0.09),
            inset 0 0 30px rgba(255, 252, 240, 0.08);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ◈ 标题栏 — 卷轴封签（沿用 .markdown-body summary）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body summary {
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg,
            rgba(244, 240, 226, 0.96) 0%,
            rgba(233, 227, 208, 0.98) 100%) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    padding: 11px 46px 11px 20px !important;
    color: #36300a !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    font-family: "LXGW WenKai", "Noto Serif SC", "Songti SC", serif !important;
    cursor: pointer !important;
    list-style: none !important;
    border-left: 3.5px solid rgba(196, 164, 74, 0.46) !important;
    position: relative !important;
    letter-spacing: 0.85px !important;
    overflow: hidden !important;
    user-select: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.60),
        inset 0 -1.5px 0 rgba(196, 164, 74, 0.18),
        0 1px 4px rgba(128, 108, 62, 0.025) !important;
    transition: all 0.30s ease !important;
}

.markdown-body summary::-webkit-details-marker {
    display: none !important;
}

.markdown-body summary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -85% !important;
    width: 55% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 252, 236, 0.46) 50%,
        transparent 100%) !important;
    transform: skewX(-16deg) !important;
    pointer-events: none !important;
    transition: left 0.58s ease !important;
}

.markdown-body summary:hover::before {
    left: 155% !important;
}

.markdown-body summary::after {
    content: '›' !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) scale(1) !important;
    color: rgba(196, 164, 74, 0.38) !important;
    font-size: 19px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    transition:
        transform 0.38s cubic-bezier(0.34, 1.25, 0.64, 1),
        color 0.30s ease !important;
}

.markdown-body summary:hover {
    background-image:
        linear-gradient(180deg,
            rgba(240, 234, 216, 0.97) 0%,
            rgba(228, 221, 200, 0.99) 100%) !important;
    border-left-color: rgba(196, 164, 74, 0.64) !important;
    color: #2c2808 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        inset 0 -1.5px 0 rgba(196, 164, 74, 0.26),
        0 2px 8px rgba(128, 108, 62, 0.04) !important;
}

.markdown-body summary:hover::after {
    color: rgba(196, 164, 74, 0.64) !important;
    transform: translateY(-50%) rotate(0deg) scale(1.12) !important;
}

.markdown-body details[open] > summary {
    background-color: transparent !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M1,19 L1,1 L19,1' fill='none' stroke='%23c4a44a' stroke-width='1.3' opacity='0.32'/%3E%3Cpath d='M3,19 L3,3 L19,3' fill='none' stroke='%23c4a44a' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M19,19 L19,1 L1,1' fill='none' stroke='%23c4a44a' stroke-width='1.3' opacity='0.32'/%3E%3Cpath d='M17,19 L17,3 L1,3' fill='none' stroke='%23c4a44a' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E"),
        linear-gradient(180deg,
            rgba(235, 229, 210, 0.97) 0%,
            rgba(225, 218, 198, 0.99) 100%) !important;
    background-position: 0 0, 100% 0, center !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 20px 20px, 20px 20px, 100% 100% !important;
    border-left-color: rgba(196, 164, 74, 0.70) !important;
    color: #22200a !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        inset 0 -2px 0 rgba(196, 164, 74, 0.22) !important;
}

.markdown-body details[open] > summary::after {
    transform: translateY(-50%) rotate(90deg) scale(1) !important;
    color: rgba(196, 164, 74, 0.70) !important;
}

/* 其余 details 内部样式沿用原文，略作泛化省略，保留原有完整结构 */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ◈ 内容区 / 分割线 / 表格 / 列表等保留原版（基于 .markdown-body details）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ... (篇幅原因，此处沿用您原始 CSS §3 之后的所有 details 相关样式，已省略，请直接复制原代码中的对应部分) */


/* =========================================
   [5] 小说正文调用：内嵌群聊组件样式
   说明：AI输出HTML气泡时依赖此块代码，请勿删除
   ========================================= */
.phone-ui {
    background: linear-gradient(180deg, #0f111a, #151828);
    border-radius: 24px; padding: 20px 12px 16px;
    max-width: 440px; margin: 24px auto;
    font-family: 'PingFang SC', system-ui, sans-serif;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
    border: 4px solid #1f2233;
}
.phone-bar {
    display: flex; justify-content: space-between; color: #6a738c;
    font-size: 12px; margin-bottom: 16px; padding: 0 8px; font-weight: 500;
}
.phone-title { color: #d1d5db; font-size: 14px; font-weight: bold; }
.msg-row { display: flex; align-items: flex-start; margin-bottom: 16px; }
.msg-row.right { flex-direction: row-reverse; }
.av { 
    width: 38px; height: 38px; border-radius: 12px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 18px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
}
.bbl-wrap { margin: 0 10px; max-width: 72%; }
.msg-row.right .bbl-wrap { align-items: flex-end; display: flex; flex-direction: column; }
.sender { font-size: 12px; color: #6a738c; margin-bottom: 4px; padding: 0 4px; }
.bbl { padding: 10px 14px; font-size: 14px; line-height: 1.6; word-break: break-all; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
/* 气泡分类 */
.bbl.npc { background: #1f2233; color: #e0e5ec; border-radius: 4px 16px 16px 16px; border: 1px solid rgba(255,255,255,0.05); }
.bbl.mc { background: linear-gradient(135deg, #115e59, #0f766e); color: #fff; border-radius: 16px 4px 16px 16px; }
.bbl.sys { background: transparent; color: #6a738c; font-size: 12px; text-align: center; width: 100%; padding: 4px; box-shadow: none; border-bottom: 1px dashed rgba(255,255,255,0.1); }
/* 头像底色 */
.c-gld { background: linear-gradient(135deg, #b8860b, #d4af37); }
.c-blu { background: linear-gradient(135deg, #1e3a8a, #312e81); }
.c-red { background: linear-gradient(135deg, #7f1d1d, #991b1b); }
.c-pur { background: linear-gradient(135deg, #581c87, #4c1d95); }
.c-mc  { background: linear-gradient(135deg, #064e3b, #065f46); }