/* ============================================
   聊天界面纯CSS美化 - 历史/古典主题
   全面版本 - 完整无截断
   ============================================ */

/* === 全局CSS变量 === */
:root {
    --history-gold: #c5a55a;
    --history-gold-light: #e8d5a3;
    --history-gold-dark: #8b7332;
    --history-parchment: #f5f0e8;
    --history-parchment-dark: #e8dcc8;
    --history-ink: #2c1810;
    --history-ink-light: #4a3728;
    --history-red: #8b2500;
    --history-red-light: #c44536;
    --history-blue: #1a3a5c;
    --history-blue-light: #2d5a87;
    --history-green: #2d4a2d;
    --history-seal: #c41e3a;
    --history-bronze: #8b6914;
    --history-shadow: rgba(44, 24, 16, 0.15);
    --history-shadow-deep: rgba(44, 24, 16, 0.3);
    --history-border: #c5a55a;
    --history-border-light: rgba(197, 165, 90, 0.4);
}

/* ============================================
   第一部分：顶部导航栏
   ============================================ */

.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(180deg, #2c1810 0%, #3d2317 50%, #4a2c1c 100%) !important;
    border-bottom: 2px solid var(--history-gold) !important;
    box-shadow: 0 2px 12px var(--history-shadow-deep), inset 0 -1px 0 rgba(197, 165, 90, 0.3) !important;
    position: relative !important;
}

.sticky.w-full.top-0.flex.items-center::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 20px,
        rgba(197, 165, 90, 0.03) 20px,
        rgba(197, 165, 90, 0.03) 21px
    ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sticky.w-full.top-0.flex.items-center::after {
    content: "◆" !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: var(--history-gold) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    background: var(--history-parchment) !important;
    padding: 0 6px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* 状态标签 */
.px-2\.5.py-px.text-xs.rounded-md.text-green-800.bg-green-100 {
    background: linear-gradient(135deg, rgba(197, 165, 90, 0.2), rgba(197, 165, 90, 0.1)) !important;
    color: var(--history-gold-light) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 2px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
}

/* 模型选择器 */
#ai-model-selector .group.flex.items-center.px-2.h-8.rounded-md {
    background: rgba(197, 165, 90, 0.1) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center.px-2.h-8.rounded-md:hover {
    background: rgba(197, 165, 90, 0.2) !important;
    border-color: var(--history-gold) !important;
    box-shadow: 0 0 8px rgba(197, 165, 90, 0.3) !important;
}

#ai-model-selector .truncate.text-\[13px\].font-medium {
    color: var(--history-gold-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    letter-spacing: 0.5px !important;
}

#ai-model-selector svg[data-icon="ChevronDown"] {
    color: var(--history-gold) !important;
}

/* 设置按钮 */
#header-setting-button {
    color: var(--history-gold-light) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

#header-setting-button:hover {
    color: var(--history-gold) !important;
    transform: rotate(30deg) !important;
    filter: drop-shadow(0 0 4px rgba(197, 165, 90, 0.5)) !important;
}

/* 音乐按钮 */
.lucide-music-2 {
    color: var(--history-gold-light) !important;
}

.lucide-music-2:hover {
    color: var(--history-gold) !important;
    filter: drop-shadow(0 0 3px rgba(197, 165, 90, 0.4)) !important;
}

/* ============================================
   第二部分：聊天容器与背景
   ============================================ */

.chat-container.overflow-y-auto.w-full.h-full {
    background: linear-gradient(180deg, var(--history-parchment) 0%, #f0e8d8 50%, var(--history-parchment-dark) 100%) !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    position: relative !important;
}

.chat-container.overflow-y-auto.w-full.h-full::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(197, 165, 90, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(139, 37, 0, 0.03) 0%, transparent 50%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(44, 24, 16, 0.02) 28px,
            rgba(44, 24, 16, 0.02) 29px
        ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.chat-container.overflow-y-auto.w-full.h-full::after {
    content: "" !important;
    position: fixed !important;
    top: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
    max-width: 700px !important;
    height: calc(100% - 120px) !important;
    border: 1px solid rgba(197, 165, 90, 0.15) !important;
    border-radius: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: transparent !important;
}

/* 自定义滚动条 */
.chat-container::-webkit-scrollbar {
    width: 8px !important;
}

.chat-container::-webkit-scrollbar-track {
    background: var(--history-parchment-dark) !important;
    border-left: 1px solid var(--history-border-light) !important;
}

.chat-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--history-gold-dark), var(--history-gold), var(--history-gold-dark)) !important;
    border-radius: 0 !important;
    border: 1px solid rgba(197, 165, 90, 0.5) !important;
}

.chat-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--history-gold), var(--history-gold-light), var(--history-gold)) !important;
}

/* 消息列表包装器 */
.mx-auto.pt-24.w-full.max-w-\[720px\].px-1.md\:px-4 {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================
   第三部分：用户消息卡片
   ============================================ */

.group.flex.mb-2:not(#ai-chat-answer) {
    margin-bottom: 16px !important;
    transition: all 0.3s ease !important;
}

/* 用户头像 */
#customized-question-avatar img {
    border-radius: 4px !important;
    border: 2px solid var(--history-gold) !important;
    box-shadow: 0 2px 8px var(--history-shadow) !important;
    transition: all 0.3s ease !important;
}

#customized-question-avatar img:hover {
    box-shadow: 0 4px 12px var(--history-shadow-deep), 0 0 0 2px rgba(197, 165, 90, 0.3) !important;
    transform: scale(1.05) !important;
}

/* 用户消息气泡 */
#customized-question-content {
    background: linear-gradient(135deg, #faf6ee 0%, #f5efe3 100%) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 4px !important;
    box-shadow: 2px 2px 8px var(--history-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

#customized-question-content:hover {
    box-shadow: 3px 3px 12px var(--history-shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    border-color: var(--history-gold) !important;
}

/* 用户消息顶部蓝色装饰条 */
#customized-question-content .bg-\[\#c9e1e9\].rounded-xl {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--history-blue-light) 10%,
        var(--history-blue) 50%,
        var(--history-blue-light) 90%,
        transparent 100%
    ) !important;
    border-radius: 0 !important;
    height: 2px !important;
    opacity: 0.7 !important;
    position: relative !important;
}

#customized-question-content .bg-\[\#c9e1e9\].rounded-xl::before {
    content: "━━━" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--history-blue-light) !important;
    font-size: 6px !important;
    letter-spacing: -1px !important;
    pointer-events: none !important;
}

/* 用户消息内容 */
#customized-question-content .markdown-body {
    color: var(--history-ink) !important;
    font-family: "FangSong", "STFangsong", "KaiTi", "STKaiti", serif !important;
    line-height: 1.8 !important;
    letter-spacing: 0.3px !important;
}

/* ============================================
   第四部分：AI消息卡片
   ============================================ */

#ai-chat-answer {
    margin-bottom: 16px !important;
    transition: all 0.3s ease !important;
}

/* AI头像 */
#customized-answer-avatar img {
    border-radius: 4px !important;
    border: 2px solid var(--history-seal) !important;
    box-shadow: 0 2px 8px rgba(196, 30, 58, 0.2) !important;
    transition: all 0.3s ease !important;
}

#customized-answer-avatar img:hover {
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3), 0 0 0 2px rgba(196, 30, 58, 0.2) !important;
    transform: scale(1.05) !important;
}

/* AI消息气泡 */
#customized-answer-content {
    background: linear-gradient(135deg, #fff9f5 0%, #faf3ec 100%) !important;
    border: 1px solid rgba(139, 37, 0, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: 2px 2px 8px rgba(139, 37, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

#customized-answer-content:hover {
    box-shadow: 3px 3px 12px rgba(139, 37, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(139, 37, 0, 0.35) !important;
}

/* AI消息顶部红色装饰条 */
#customized-answer-content .bg-\[\#F1CBCB\].rounded-xl {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--history-red-light) 10%,
        var(--history-red) 50%,
        var(--history-red-light) 90%,
        transparent 100%
    ) !important;
    border-radius: 0 !important;
    height: 2px !important;
    opacity: 0.7 !important;
    position: relative !important;
}

#customized-answer-content .bg-\[\#F1CBCB\].rounded-xl::before {
    content: "━━━" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--history-red-light) !important;
    font-size: 6px !important;
    letter-spacing: -1px !important;
    pointer-events: none !important;
}

/* AI消息内容 */
#customized-answer-content .markdown-body {
    color: var(--history-ink) !important;
    font-family: "FangSong", "STFangsong", "KaiTi", "STKaiti", serif !important;
    line-height: 1.8 !important;
    letter-spacing: 0.3px !important;
}

/* AI消耗信息 */
#customized-answer-content .MuiStack-root.text-purple-500.mt-1 {
    color: var(--history-gold-dark) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    font-size: 11px !important;
    opacity: 0.7 !important;
    border-top: 1px dashed var(--history-border-light) !important;
    padding-top: 4px !important;
    margin-top: 8px !important;
}

#customized-answer-content .MuiStack-root.text-purple-500.mt-1 .MuiTypography-body2 {
    color: var(--history-gold-dark) !important;
}

#customized-answer-content .MuiStack-root.text-purple-500.mt-1 .text-orange-500 {
    color: var(--history-red) !important;
}

/* ============================================
   第五部分：消息操作按钮
   ============================================ */

/* 用户消息操作按钮 */
#customized-question-content .MuiStack-root.css-1dzoql9 .MuiButton-root {
    color: var(--history-ink-light) !important;
    opacity: 0.5 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    font-family: "KaiTi", "STKaiti", serif !important;
}

#customized-question-content .MuiStack-root.css-1dzoql9 .MuiButton-root:hover {
    opacity: 1 !important;
    color: var(--history-gold-dark) !important;
    background: rgba(197, 165, 90, 0.1) !important;
    box-shadow: 0 1px 4px rgba(197, 165, 90, 0.2) !important;
}

/* AI消息操作按钮 */
#customized-answer-content .MuiStack-root.css-1dzoql9 .MuiButton-root {
    color: var(--history-ink-light) !important;
    opacity: 0.5 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    font-family: "KaiTi", "STKaiti", serif !important;
}

#customized-answer-content .MuiStack-root.css-1dzoql9 .MuiButton-root:hover {
    opacity: 1 !important;
    color: var(--history-red) !important;
    background: rgba(139, 37, 0, 0.08) !important;
    box-shadow: 0 1px 4px rgba(139, 37, 0, 0.15) !important;
}

/* 刷新按钮 */
#customized-reload-button:hover {
    color: var(--history-seal) !important;
    background: rgba(196, 30, 58, 0.08) !important;
}

/* 删除按钮 */
#customized-delete-button:hover {
    color: #a00 !important;
    background: rgba(170, 0, 0, 0.08) !important;
}

/* 图片/音频/分支按钮 */
#customized-create-image-button:hover,
#customized-create-audio-button:hover,
#customized-branch-and-share-button:hover {
    opacity: 1 !important;
    color: var(--history-blue) !important;
    background: rgba(26, 58, 92, 0.08) !important;
}

/* ============================================
   第六部分：输入框区域
   ============================================ */

/* 输入区域渐变背景 */
.bg-gradient-to-t.from-white.via-white.to-transparent.absolute.w-full.bottom-0 {
    background: linear-gradient(to top, var(--history-parchment) 60%, transparent 100%) !important;
}

/* 输入框容器 */
.bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2 {
    background: linear-gradient(135deg, #fdfbf7 0%, #faf6ee 100%) !important;
    border: 2px solid var(--history-border-light) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 2px 6px rgba(44, 24, 16, 0.05), 0 2px 8px var(--history-shadow) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

/* 输入框聚焦状态 */
.bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2:focus-within {
    border-color: var(--history-gold) !important;
    box-shadow: inset 0 2px 6px rgba(44, 24, 16, 0.05), 0 0 0 3px rgba(197, 165, 90, 0.15), 0 4px 12px var(--history-shadow) !important;
}

/* 输入框顶部金线（聚焦出现） */
.bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2::before {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    left: 10% !important;
    right: 10% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--history-gold), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2:focus-within::before {
    opacity: 1 !important;
}

/* 输入文本域 */
#ai-chat-input {
    font-family: "FangSong", "STFangsong", "KaiTi", "STKaiti", serif !important;
    color: var(--history-ink) !important;
    letter-spacing: 0.5px !important;
    line-height: 1.8 !important;
}

#ai-chat-input::placeholder {
    color: rgba(74, 55, 40, 0.4) !important;
    font-style: italic !important;
}

/* 字数统计 */
.flex.items-center.px-1.h-5.rounded-md.bg-gray-100.text-xs.font-medium.text-gray-500 {
    background: rgba(197, 165, 90, 0.1) !important;
    color: var(--history-gold-dark) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 2px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
}

/* 输入控制区分隔线 */
.mx-1.w-\[1px\].h-4.bg-black.opacity-5 {
    background: var(--history-gold) !important;
    opacity: 0.3 !important;
}

/* ============================================
   第七部分：发送按钮
   ============================================ */

#ai-send-button {
    width: 40px !important;
    height: 40px !important;
    position: relative !important;
    background: linear-gradient(135deg, var(--history-gold-dark) 0%, var(--history-gold) 50%, var(--history-gold-dark) 100%) !important;
    border: 1px solid var(--history-gold) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(197, 165, 90, 0.3) !important;
    animation: seal-pulse 3s ease-in-out infinite !important;
}

#ai-send-button svg {
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

#ai-send-button::before {
    content: "發" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-family: "KaiTi", "STKaiti", "SimSun", serif !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    pointer-events: none !important;
}

#ai-send-button:hover {
    background: linear-gradient(135deg, var(--history-gold) 0%, var(--history-gold-light) 50%, var(--history-gold) 100%) !important;
    box-shadow: 0 4px 12px rgba(197, 165, 90, 0.5), 0 0 0 2px rgba(197, 165, 90, 0.2) !important;
    transform: scale(1.05) !important;
    animation: none !important;
}

#ai-send-button:active {
    transform: scale(0.95) !important;
    box-shadow: 0 1px 4px rgba(197, 165, 90, 0.3) !important;
}

@keyframes seal-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(197, 165, 90, 0.3);
    }
    50% {
        box-shadow: 0 2px 6px rgba(197, 165, 90, 0.3), 0 0 12px rgba(197, 165, 90, 0.2);
    }
}

/* ============================================
   第八部分：底部功能栏
   ============================================ */

#ai-mod-button2 {
    background: rgba(245, 240, 232, 0.95) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    box-shadow: 0 -1px 4px var(--history-shadow) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Mod按钮 */
#ai-mod-button {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.1), rgba(196, 30, 58, 0.05)) !important;
    border: 1px solid rgba(196, 30, 58, 0.3) !important;
    border-radius: 3px !important;
    color: var(--history-red) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
}

#ai-mod-button:hover {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.2), rgba(196, 30, 58, 0.1)) !important;
    border-color: var(--history-red) !important;
    box-shadow: 0 2px 6px rgba(196, 30, 58, 0.2) !important;
}

/* 记忆增强按钮 */
#customized-ai-summary-button {
    border-radius: 3px !important;
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

#customized-ai-summary-button:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-border-light) !important;
    color: var(--history-gold-dark) !important;
}

/* 调试按钮 */
#customized-prompt-debug-button {
    border-radius: 3px !important;
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

#customized-prompt-debug-button:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-border-light) !important;
    color: var(--history-gold-dark) !important;
}

/* 流式按钮 */
#customized-flow-button {
    border-radius: 3px !important;
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

#customized-flow-button:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-border-light) !important;
    color: var(--history-gold-dark) !important;
}

/* 评论按钮 */
#customized-comment-button {
    border-radius: 3px !important;
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

#customized-comment-button:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-gold-dark) !important;
}

/* 回到底部按钮 */
#customized-scroll-to-bottom-button {
    border-radius: 3px !important;
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

#customized-scroll-to-bottom-button:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-border-light) !important;
    color: var(--history-gold-dark) !important;
}

/* 隐藏按钮切换器 */
#toggle-sub-buttons {
    border-radius: 3px !important;
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

#toggle-sub-buttons:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-border-light) !important;
    color: var(--history-gold-dark) !important;
}

/* 功能栏所有图标统一着色 */
#ai-mod-button2 svg,
#ai-mod-button2 .lucide-layers-plus,
#ai-mod-button2 .lucide-pen-line,
#ai-mod-button2 .lucide-list-collapse {
    transition: all 0.3s ease !important;
}

/* ============================================
   第九部分：分页导航
   ============================================ */

#customized-pagination {
    background: transparent !important;
}

.mo-pagination.py-0.w-full.flex.flex-wrap.justify-center {
    background: rgba(245, 240, 232, 0.8) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 3px !important;
    padding: 4px 8px !important;
}

/* 分页按钮 */
.MuiPaginationItem-root {
    color: var(--history-ink-light) !important;
    border-color: var(--history-border-light) !important;
    border-radius: 2px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
}

.MuiPaginationItem-root:hover {
    background: rgba(197, 165, 90, 0.15) !important;
    border-color: var(--history-gold) !important;
    color: var(--history-gold-dark) !important;
}

/* 当前页码 */
.MuiPaginationItem-page.Mui-selected {
    background: linear-gradient(135deg, var(--history-gold-dark), var(--history-gold)) !important;
    color: #fff !important;
    border-color: var(--history-gold) !important;
    box-shadow: 0 1px 4px rgba(197, 165, 90, 0.3) !important;
}

/* 禁用分页按钮 */
.MuiPaginationItem-root.Mui-disabled {
    opacity: 0.3 !important;
    color: var(--history-ink-light) !important;
}

/* 跳页输入框 */
.MuiInputBase-input[type="text"] {
    background: rgba(250, 246, 238, 0.8) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 2px !important;
    color: var(--history-ink) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
}

/* ============================================
   第十部分：评论区面板
   ============================================ */

/* 评论面板容器 */
.w-full.bottom-0.z-20.inset-x-0.bg-white.transition-all {
    background: linear-gradient(180deg, var(--history-parchment) 0%, #f0e8d8 100%) !important;
    border-top: 2px solid var(--history-gold) !important;
    box-shadow: 0 -4px 16px var(--history-shadow-deep) !important;
}

/* 评论面板顶部金线装饰 */
.w-full.bottom-0.z-20.inset-x-0.bg-white.transition-all::before {
    content: "── 评 ──" !important;
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: var(--history-gold) !important;
    font-size: 10px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    background: var(--history-parchment) !important;
    padding: 0 8px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    letter-spacing: 2px !important;
}

/* 评论区头部 */
.flex.items-center.justify-between.py-3 .text-lg.font-bold.pl-3 {
    color: var(--history-ink) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    letter-spacing: 2px !important;
    position: relative !important;
}

/* 关闭按钮 */
.MuiIconButton-root.MuiIconButton-sizeMedium[aria-label="close"] {
    color: var(--history-ink-light) !important;
    transition: all 0.3s ease !important;
}

.MuiIconButton-root.MuiIconButton-sizeMedium[aria-label="close"]:hover {
    color: var(--history-red) !important;
    background: rgba(139, 37, 0, 0.08) !important;
}

/* ============================================
   第十一部分：评分区域
   ============================================ */

/* 评分容器 */
.MuiStack-root.px-3.mb-3 {
    padding: 8px 12px !important;
    background: rgba(250, 246, 238, 0.6) !important;
    border: 1px solid rgba(197, 165, 90, 0.2) !important;
    border-radius: 3px !important;
}

/* 个人评分标签 */
.MuiTypography-body1.text-grey-600 {
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    letter-spacing: 1px !important;
}

/* 评分星星 */
.MuiRating-root .MuiRating-icon {
    color: var(--history-gold) !important;
    transition: all 0.2s ease !important;
}

.MuiRating-root .MuiRating-iconEmpty {
    color: rgba(197, 165, 90, 0.3) !important;
}

.MuiRating-root .MuiRating-decimal:hover .MuiRating-icon {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 0 4px rgba(197, 165, 90, 0.5)) !important;
}

/* 评分数字 */
.text-orange-500.w-14.px-2.text-sm {
    color: var(--history-red) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

/* ============================================
   第十二部分：评论输入区域
   ============================================ */

/* 评论输入框容器 */
.flex.flex-col.p-2.sticky.top-0.my-0.mx-3.h-auto.border-\[1\.5px\].border-gray-200.rounded-xl.bg-white.shadow-sm {
    background: linear-gradient(135deg, #fdfbf7 0%, #faf6ee 100%) !important;
    border: 1.5px solid var(--history-border-light) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 4px rgba(44, 24, 16, 0.05), 0 2px 6px var(--history-shadow) !important;
    transition: all 0.3s ease !important;
}

.flex.flex-col.p-2.sticky.top-0.my-0.mx-3.h-auto.border-\[1\.5px\].border-gray-200.rounded-xl.bg-white.shadow-sm:focus-within {
    border-color: var(--history-gold) !important;
    box-shadow: inset 0 1px 4px rgba(44, 24, 16, 0.05), 0 0 0 2px rgba(197, 165, 90, 0.15) !important;
}

/* 评论文本域 */
textarea[placeholder="发表评论"] {
    font-family: "FangSong", "STFangsong", "KaiTi", "STKaiti", serif !important;
    color: var(--history-ink) !important;
    letter-spacing: 0.3px !important;
    line-height: 1.7 !important;
}

textarea[placeholder="发表评论"]::placeholder {
    color: rgba(74, 55, 40, 0.4) !important;
    font-style: italic !important;
}

/* 评论字数统计 */
.flex.items-center.px-2.h-5.rounded-md.bg-gray-100.text-xs {
    background: rgba(197, 165, 90, 0.1) !important;
    color: var(--history-gold-dark) !important;
    border: 1px solid rgba(197, 165, 90, 0.2) !important;
    border-radius: 2px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
}

/* 表情按钮 */
#basic-button {
    color: var(--history-ink-light) !important;
    transition: all 0.3s ease !important;
}

#basic-button:hover {
    color: var(--history-gold-dark) !important;
}

/* 评论发送按钮 */
.cursor-pointer.group.flex.items-center.justify-center.w-8.h-8.rounded-lg {
    background: rgba(197, 165, 90, 0.1) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
}

.cursor-pointer.group.flex.items-center.justify-center.w-8.h-8.rounded-lg:hover {
    background: linear-gradient(135deg, var(--history-gold-dark), var(--history-gold)) !important;
    border-color: var(--history-gold) !important;
    box-shadow: 0 2px 6px rgba(197, 165, 90, 0.3) !important;
}

.cursor-pointer.group.flex.items-center.justify-center.w-8.h-8.rounded-lg:hover svg {
    color: #fff !important;
}

/* ============================================
   第十三部分：评论列表
   ============================================ */

/* 评论列表容器 */
.p-3.overflow-y-auto.h-full {
    background: transparent !important;
}

/* 评论列表滚动条 */
.p-3.overflow-y-auto.h-full::-webkit-scrollbar {
    width: 6px !important;
}

.p-3.overflow-y-auto.h-full::-webkit-scrollbar-track {
    background: rgba(232, 220, 200, 0.5) !important;
}

.p-3.overflow-y-auto.h-full::-webkit-scrollbar-thumb {
    background: var(--history-gold) !important;
    border-radius: 0 !important;
}

/* 排序按钮 */
.MuiButton-containedPrimary.MuiButton-sizeSmall {
    background: linear-gradient(135deg, var(--history-gold-dark), var(--history-gold)) !important;
    border-radius: 3px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    box-shadow: 0 1px 4px rgba(197, 165, 90, 0.3) !important;
    color: #fff !important;
}

.MuiButton-outlinedPrimary.MuiButton-sizeSmall {
    border-color: var(--history-border-light) !important;
    color: var(--history-gold-dark) !important;
    border-radius: 3px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
}

.MuiButton-outlinedPrimary.MuiButton-sizeSmall:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-gold) !important;
}

/* ============================================
   第十四部分：评论项样式
   ============================================ */

/* 评论项容器 */
.group.ml-0 {
    transition: all 0.3s ease !important;
    padding: 4px !important;
    border-radius: 3px !important;
}

.group.ml-0:hover {
    background: rgba(245, 240, 232, 0.6) !important;
}

/* 评论者头像 */
.shrink-0.flex.items-center.rounded-full {
    border-radius: 3px !important;
    border: 1px solid var(--history-border-light) !important;
    box-shadow: 0 1px 3px var(--history-shadow) !important;
}

/* 评论者用户名 */
.text-sm.text-grey-600.flex.items-center .font-bold {
    color: var(--history-ink) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    letter-spacing: 0.5px !important;
}

/* 用户等级数字 */
.absolute.right-\[8px\].text-white.font-bold.text-\[14px\] {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* 评论正文 */
.break-all .flex.items-start.gap-2.flex-col span {
    color: var(--history-ink) !important;
    font-family: "FangSong", "STFangsong", serif !important;
    line-height: 1.7 !important;
    letter-spacing: 0.2px !important;
}

/* 评论时间戳 */
.text-xs.text-grey-600.font-light.flex.items-center.justify-between {
    color: var(--history-ink-light) !important;
    opacity: 0.6 !important;
    font-family: "KaiTi", "STKaiti", serif !important;
}

/* 点赞按钮 */
.flex.items-center.gap-1.cursor-pointer.transition-all.duration-200.hover\:scale-110 {
    transition: all 0.2s ease !important;
}

.flex.items-center.gap-1.cursor-pointer.transition-all.duration-200.hover\:scale-110:hover {
    color: var(--history-seal) !important;
    transform: scale(1.1) !important;
}

/* 回复按钮 */
.cursor-pointer.hover\:text-primary-600.hover\:underline {
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
}

.cursor-pointer.hover\:text-primary-600.hover\:underline:hover {
    color: var(--history-gold-dark) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* 置顶/折叠按钮 */
.cursor-pointer.hover\:text-primary-600.ml-3.text-gray-500,
.cursor-pointer.text-gray-500.hover\:text-primary-600.ml-3 {
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
}

.cursor-pointer.hover\:text-primary-600.ml-3.text-gray-500:hover,
.cursor-pointer.text-gray-500.hover\:text-primary-600.ml-3:hover {
    color: var(--history-gold-dark) !important;
}

/* 回复区域容器（嵌套评论） */
.ml-8.mt-2.border-l.border-gray-100.pl-4 {
    border-left: 2px solid var(--history-border-light) !important;
    border-color: rgba(197, 165, 90, 0.3) !important;
    margin-left: 28px !important;
    padding-left: 12px !important;
}

/* 评论分隔线 */
.style_divider__mW0YX.style_horizontal__UvaHt {
    background: linear-gradient(90deg, transparent, var(--history-border-light), transparent) !important;
    height: 1px !important;
    border: none !important;
}

/* 游玩轮数 */
.ml-auto.text-gray-500.text-xs {
    color: var(--history-ink-light) !important;
    opacity: 0.5 !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    font-style: italic !important;
}

/* ============================================
   第十五部分：侧边栏美化
   ============================================ */

/* 侧边栏内容区 */
.relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white {
    background: linear-gradient(180deg, #faf6ee 0%, var(--history-parchment) 100%) !important;
    border-right: 2px solid var(--history-border-light) !important;
}

/* 侧边栏标题 */
.text-zinc-800.text-xl.font-semibold {
    color: var(--history-ink) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    letter-spacing: 1px !important;
}

/* 侧边栏描述 */
.h-20.opacity-90.text-neutral-400.text-xs.line-clamp-4 {
    color: var(--history-ink-light) !important;
    font-family: "FangSong", "STFangsong", serif !important;
    opacity: 0.6 !important;
}

/* 作品详情按钮 */
.MuiButton-outlinedPrimary.flex-1 {
    border-color: var(--history-border-light) !important;
    color: var(--history-ink-light) !important;
    border-radius: 3px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
}

.MuiButton-outlinedPrimary.flex-1:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-gold) !important;
    color: var(--history-gold-dark) !important;
}

/* 打赏按钮 */
.MuiButton-outlinedWarning {
    border-color: rgba(196, 30, 58, 0.3) !important;
    color: var(--history-seal) !important;
    border-radius: 3px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
}

.MuiButton-outlinedWarning:hover {
    background: rgba(196, 30, 58, 0.08) !important;
    border-color: var(--history-seal) !important;
    box-shadow: 0 1px 4px rgba(196, 30, 58, 0.2) !important;
}

/* 会话列表标题 */
.MuiTypography-body2.text-gray-500.text-xs.font-semibold {
    color: var(--history-ink-light) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    letter-spacing: 1px !important;
}

/* 新对话按钮 */
.MuiButton-fullWidth {
    border-color: var(--history-border-light) !important;
    color: var(--history-ink-light) !important;
    border-radius: 3px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
}

.MuiButton-fullWidth:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-gold) !important;
}

/* 对话列表项 */
.MuiStack-root.cursor-pointer.px-1\.5.h-8.mb-2.rounded-md {
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

.MuiStack-root.cursor-pointer.px-1\.5.h-8.mb-2.rounded-md:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-border-light) !important;
}

/* 当前激活对话项 */
.MuiStack-root.bg-gray-100 {
    background: rgba(197, 165, 90, 0.15) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 3px !important;
}

/* 对话标题文字 */
.conversation-text.text-xs.text-primary-500.text-ellipsis.line-clamp-1 {
    color: var(--history-ink) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    letter-spacing: 0.3px !important;
}

/* 更多操作图标 */
.more-icon.text-blue-500 {
    color: var(--history-gold-dark) !important;
    transition: all 0.3s ease !important;
}

.more-icon.text-blue-500:hover {
    color: var(--history-gold) !important;
}

/* 侧边栏分隔线 */
.MuiDivider-root.MuiDivider-fullWidth {
    border-color: var(--history-border-light) !important;
    opacity: 0.5 !important;
}

/* 折叠按钮 */
.MuiIconButton-root.MuiIconButton-sizeSmall {
    color: var(--history-ink-light) !important;
    transition: all 0.3s ease !important;
}

.MuiIconButton-root.MuiIconButton-sizeSmall:hover {
    color: var(--history-gold-dark) !important;
    background: rgba(197, 165, 90, 0.1) !important;
}

/* 侧边栏滚动条 */
.relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white::-webkit-scrollbar {
    width: 6px !important;
}

.relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white::-webkit-scrollbar-track {
    background: rgba(232, 220, 200, 0.5) !important;
}

.relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white::-webkit-scrollbar-thumb {
    background: var(--history-gold) !important;
    border-radius: 0 !important;
}

/* ============================================
   第十六部分：批量操作面板
   ============================================ */

/* 批量操作面板容器 */
.MuiCollapse-root.MuiCollapse-vertical.fixed.bottom-0.z-30.bg-white.h-28 {
    background: linear-gradient(180deg, var(--history-parchment), #faf6ee) !important;
    border-top: 2px solid var(--history-gold) !important;
    box-shadow: 0 -2px 8px var(--history-shadow) !important;
}

/* 全选复选框标签 */
.MuiFormControlLabel-label {
    font-family: "KaiTi", "STKaiti", serif !important;
    color: var(--history-ink) !important;
}

/* 批量删除按钮 */
.flex.flex-col.gap-2.h-full.p-4 .MuiButton-outlinedPrimary:last-child {
    border-color: rgba(170, 0, 0, 0.3) !important;
    color: var(--history-red) !important;
}

.flex.flex-col.gap-2.h-full.p-4 .MuiButton-outlinedPrimary:last-child:hover {
    background: rgba(170, 0, 0, 0.08) !important;
    border-color: var(--history-red) !important;
}

/* ============================================
   第十七部分：通用MUI组件覆盖
   ============================================ */

/* 所有MUI按钮圆角统一 */
.MuiButton-root {
    border-radius: 3px !important;
}

/* 波纹效果颜色 */
.MuiTouchRipple-root {
    color: rgba(197, 165, 90, 0.3) !important;
}

/* 所有MUI图标按钮悬停 */
.MuiIconButton-root:hover {
    background: rgba(197, 165, 90, 0.08) !important;
}

/* 输入框基础组件 */
.MuiInputBase-root {
    border-radius: 3px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
}

/* ============================================
   第十八部分：全局字体与文字美化
   ============================================ */

/* Markdown内容中的标题 */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    font-family: "KaiTi", "STKaiti", serif !important;
    color: var(--history-ink) !important;
    border-bottom-color: var(--history-border-light) !important;
}

/* Markdown内容中的代码块 */
.markdown-body pre {
    background: rgba(44, 24, 16, 0.03) !important;
    border: 1px solid var(--history-border-light) !important;
    border-radius: 3px !important;
}

.markdown-body code {
    background: rgba(197, 165, 90, 0.1) !important;
    color: var(--history-red) !important;
    border-radius: 2px !important;
    font-family: "Courier New", monospace !important;
}

/* Markdown内容中的引用块 */
.markdown-body blockquote {
    border-left: 3px solid var(--history-gold) !important;
    background: rgba(245, 240, 232, 0.5) !important;
    color: var(--history-ink-light) !important;
    font-style: italic !important;
}

/* Markdown内容中的链接 */
.markdown-body a {
    color: var(--history-blue) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed var(--history-blue-light) !important;
    transition: all 0.3s ease !important;
}

.markdown-body a:hover {
    color: var(--history-blue-light) !important;
    border-bottom-style: solid !important;
}

/* Markdown内容中的表格 */
.markdown-body table {
    border-color: var(--history-border-light) !important;
}

.markdown-body table th {
    background: rgba(197, 165, 90, 0.1) !important;
    color: var(--history-ink) !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    font-weight: bold !important;
}

.markdown-body table td {
    border-color: var(--history-border-light) !important;
    color: var(--history-ink) !important;
}

.markdown-body table tr:nth-child(even) {
    background: rgba(245, 240, 232, 0.4) !important;
}

/* Markdown内容中的分割线 */
.markdown-body hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--history-gold), transparent) !important;
    margin: 16px 0 !important;
}

/* Markdown内容中的列表 */
.markdown-body ul,
.markdown-body ol {
    color: var(--history-ink) !important;
}

.markdown-body li::marker {
    color: var(--history-gold-dark) !important;
}

/* Markdown内容中的强调 */
.markdown-body strong {
    color: var(--history-ink) !important;
    font-weight: bold !important;
}

.markdown-body em {
    color: var(--history-ink-light) !important;
    font-style: italic !important;
}

/* ============================================
   第十九部分：图片上传与文件区域
   ============================================ */

/* 图片上传触发器 */
[data-slot="tooltip-trigger"] .MuiSvgIcon-fontSizeSmall {
    color: var(--history-ink-light) !important;
    transition: all 0.3s ease !important;
}

[data-slot="tooltip-trigger"] .MuiSvgIcon-fontSizeSmall:hover {
    color: var(--history-gold-dark) !important;
}

/* 文件上传输入（保持隐藏但可点击） */
input[type="file"][accept=".png,.jpg,.jpeg,.webp,.gif"] {
    cursor: pointer !important;
}

/* ============================================
   第二十部分：Radix UI按钮覆盖
   ============================================ */

/* 热门存档按钮 */
[data-variant="outline"] {
    border-color: var(--history-border-light) !important;
    color: var(--history-ink-light) !important;
    border-radius: 3px !important;
    font-family: "KaiTi", "STKaiti", serif !important;
    transition: all 0.3s ease !important;
}

[data-variant="outline"]:hover {
    background: rgba(197, 165, 90, 0.1) !important;
    border-color: var(--history-gold) !important;
    color: var(--history-gold-dark) !important;
}

/* 幽灵按钮（编辑/分支） */
[data-variant="ghost"] {
    color: var(--history-ink-light) !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
}

[data-variant="ghost"]:hover {
    background: rgba(197, 165, 90, 0.08) !important;
    color: var(--history-gold-dark) !important;
}

/* ============================================
   第二十一部分：响应式适配
   ============================================ */

/* 移动端时钟图标 */
.lucide-clock-8.size-4.text-grey-600 {
    color: var(--history-gold-light) !important;
}

/* 移动端导航栏适配 */
@media (max-width: 767px) {
    .sticky.w-full.top-0.flex.items-center {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 移动端消息气泡间距 */
    #customized-question-content,
    #customized-answer-content {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    /* 移动端功能栏适配 */
    #ai-mod-button2 {
        padding: 3px 4px !important;
        gap: 2px !important;
    }

    /* 移动端输入框 */
    .bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2 {
        border-radius: 3px !important;
    }
}

/* 桌面端额外装饰 */
@media (min-width: 768px) {
    /* 桌面端消息气泡悬停偏移 */
    #customized-question-content:hover {
        transform: translateX(2px) !important;
    }

    #customized-answer-content:hover {
        transform: translateX(-2px) !important;
    }

    /* 桌面端侧边栏额外装饰 */
    .relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 2px !important;
        height: 100% !important;
        background: linear-gradient(180deg, transparent, var(--history-gold), transparent) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
}

/* ============================================
   第二十二部分：特殊动画与关键帧
   ============================================ */

/* 消息卡片入场动画（如果支持） */
@keyframes scroll-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 头像呼吸光效 */
@keyframes avatar-glow {
    0%, 100% {
        box-shadow: 0 2px 8px var(--history-shadow);
    }
    50% {
        box-shadow: 0 2px 8px var(--history-shadow), 0 0 6px rgba(197, 165, 90, 0.15);
    }
}

#customized-question-avatar img,
#customized-answer-avatar img {
    animation: avatar-glow 4s ease-in-out infinite !important;
}

/* 金色边框闪烁 */
@keyframes border-shimmer {
    0%, 100% {
        border-color: var(--history-border-light);
    }
    50% {
        border-color: var(--history-gold);
    }
}

/* 评论面板展开动画增强 */
.w-full.bottom-0.z-20.inset-x-0.bg-white.transition-all.absolute {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
}

/* ============================================
   第二十三部分：选择文字与焦点样式
   ============================================ */

/* 文字选择颜色 */
::selection {
    background: rgba(197, 165, 90, 0.3) !important;
    color: var(--history-ink) !important;
}

::-moz-selection {
    background: rgba(197, 165, 90, 0.3) !important;
    color: var(--history-ink) !important;
}

/* 焦点可见环 */
:focus-visible {
    outline: 2px solid var(--history-gold) !important;
    outline-offset: 2px !important;
}

/* 输入框焦点不显示默认outline */
#ai-chat-input:focus,
textarea[placeholder="发表评论"]:focus {
    outline: none !important;
}

/* ============================================
   第二十四部分：打印样式（可选）
   ============================================ */

@media print {
    .sticky.w-full.top-0.flex.items-center,
    #ai-mod-button2,
    .bg-gradient-to-t.from-white.via-white.to-transparent.absolute.w-full.bottom-0,
    .relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white {
        display: none !important;
    }

    .chat-container.overflow-y-auto.w-full.h-full {
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .chat-container.overflow-y-auto.w-full.h-full::before,
    .chat-container.overflow-y-auto.w-full.h-full::after {
        display: none !important;
    }

    #customized-question-content,
    #customized-answer-content {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .markdown-body {
        font-family: serif !important;
        color: #000 !important;
    }
}

/* ============================================
   第二十五部分：暗色模式兼容（可选）
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --history-parchment: #1a1410;
        --history-parchment-dark: #0f0c08;
        --history-ink: #e8dcc8;
        --history-ink-light: #c5b8a0;
        --history-shadow: rgba(0, 0, 0, 0.4);
        --history-shadow-deep: rgba(0, 0, 0, 0.6);
    }
}

/* ============================================
   第二十六部分：安全保障规则
   确保不破坏功能交互
   ============================================ */

/* 保证所有伪元素不拦截点击 */
.sticky.w-full.top-0.flex.items-center::before,
.sticky.w-full.top-0.flex.items-center::after,
.chat-container.overflow-y-auto.w-full.h-full::before,
.chat-container.overflow-y-auto.w-full.h-full::after,
.bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2::before,
.bg-white.border-\[1\.5px\].border-gray-200.border-grey-300.relative.rounded-xl.mb-2::after,
#customized-question-content .bg-\[\#c9e1e9\].rounded-xl::before,
#customized-answer-content .bg-\[\#F1CBCB\].rounded-xl::before,
.w-full.bottom-0.z-20.inset-x-0.bg-white.transition-all::before,
.relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white::before {
    pointer-events: none !important;
}

/* 确保聊天容器可滚动 */
.chat-container.overflow-y-auto.w-full.h-full {
    max-height: 100vh !important;
    overflow-y: auto !important;
}

/* 确保发送按钮可点击且有明确尺寸 */
#ai-send-button {
    width: 40px !important;
    height: 40px !important;
    position: relative !important;
    cursor: pointer !important;
    z-index: 1 !important;
}

#ai-send-button svg {
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* 确保输入框可正常交互 */
#ai-chat-input {
    position: relative !important;
    z-index: 1 !important;
}

textarea[placeholder="发表评论"] {
    position: relative !important;
    z-index: 1 !important;
}

/* 确保所有按钮可点击 */
.MuiButton-root,
.MuiIconButton-root,
#ai-mod-button,
#customized-ai-summary-button,
#customized-prompt-debug-button,
#customized-flow-button,
#customized-comment-button,
#customized-scroll-to-bottom-button,
#toggle-sub-buttons,
#customized-reload-button,
#customized-delete-button,
#customized-create-image-button,
#customized-create-audio-button,
#customized-branch-and-share-button,
#customized-resend-button,
#customized-prompt-log-button {
    position: relative !important;
    z-index: 1 !important;
    cursor: pointer !important;
}

/* 确保头像图片不影响布局 */
#customized-question-avatar img,
#customized-answer-avatar img {
    object-fit: cover !important;
    width: 40px !important;
    height: 40px !important;
}

/* 确保侧边栏可滚动 */
.px-4.md\:pl-\[21px\].md\:pr-\[11px\].overflow-auto.z-20 {
    overflow-y: auto !important;
}

/* 确保评论列表可滚动 */
.p-3.overflow-y-auto.h-full {
    overflow-y: auto !important;
}

/* ============================================
   完毕 - 全部26个部分
   ============================================ */