/* =========================================
           1. 全局重置与基础风格 (纸张/古风质感)
           ========================================= */
        * {
            font-family: "宋体", "SimSun", "楷体", "KaiTi", "微软雅黑", "Microsoft YaHei", sans-serif !important;
            box-sizing: border-box !important;
            -webkit-tap-highlight-color: transparent !important; /* 移除手机端点击高亮 */
        }
        body, .main-container {
            background: linear-gradient(135deg, #f8f4e9 0%, #e8f4f8 50%, #f0f8f0 100%) !important;
            color: #5d4037 !important;
            font-family: "宋体", "SimSun", serif !important;
            line-height: 1.6 !important;
            padding: 15px !important;
            margin: 0 !important;
            min-height: 100vh !important;
            overflow-x: hidden !important;
        }
        /* 标题样式 */
        h1, h2, h3, h4 {
            color: #8b7355 !important;
            border-bottom: 2px solid #a1887f !important;
            padding-bottom: 8px !important;
            margin-top: 20px !important;
            margin-bottom: 16px !important;
            font-family: "楷体", "KaiTi", serif !important;
            text-shadow: 1px 1px 2px rgba(139, 115, 85, 0.1) !important;
        }
        /* =========================================
           2. 侧边栏面板系统
           ========================================= */
        #panel-container {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 1000;
        }
        .panel {
            position: fixed !important;
            z-index: 1001 !important;
            background: linear-gradient(135deg, #ffffff 0%, #f8fdfe 50%, #f5f9ff 100%) !important;
            border: 1px solid #a1887f !important;
            border-radius: 12px !important;
            box-shadow: 2px 2px 12px rgba(139, 115, 85, 0.1) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            overflow: hidden !important;
            margin: 0 !important;
            width: auto !important;
            max-height: 85vh !important;
            pointer-events: auto !important;
        }
        #panel-events, #panel-timeline { left: 0 !important; right: auto !important; }
        #panel-characters { right: 0 !important; left: auto !important; }
        /* 未展开状态 */
        .panel:not([open]) {
            max-width: 40px !important; min-width: 40px !important; min-height: 120px !important;
            writing-mode: vertical-lr !important; text-orientation: mixed !important;
        }
        #panel-timeline:not([open]) { top: calc(20% - 60px) !important; left: 10px !important; }
        #panel-events:not([open]) { top: calc(40% - 60px) !important; left: 10px !important; }
        #panel-characters:not([open]) { top: calc(60% - 60px) !important; right: 10px !important; }
        .panel:not([open]) summary {
            padding: 15px 8px !important; font-size: 14px !important; text-align: center !important;
            white-space: nowrap !important; height: 100% !important; display: flex !important;
            align-items: center !important; justify-content: center !important; list-style: none !important;
        }
        .panel:not([open]) summary::-webkit-details-marker { display: none; }
        /* 展开状态 */
        .panel[open] {
            z-index: 1002 !important;
            max-width: 600px !important;
            top: 5% !important;
            max-height: 90vh !important;
            overflow-y: auto !important;
            writing-mode: horizontal-tb !important;
        }
        /* 手机端展开全屏优化 */
        @media (max-width: 768px) {
            .panel[open] {
                top: 2% !important; left: 2% !important; right: 2% !important;
                width: 96% !important; max-width: none !important; max-height: 96vh !important;
            }
        }
        #panel-events[open], #panel-timeline[open] { left: 5px !important; }
        #panel-characters[open] { right: 5px !important; }
        .panel[open] > div, .panel[open] details {
            padding: 8px !important; background: #f9f9f9 !important; border-radius: 6px !important;
        }
        .panel summary {
            color: #336666 !important; font-weight: bold !important; cursor: pointer !important;
            padding: 8px 10px !important;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(121, 134, 203, 0.05) 100%) !important;
            border: 1px solid rgba(161, 136, 127, 0.2) !important; border-radius: 8px !important; outline: none !important;
        }
        /* =========================================
           3. 内容块与小说样式
           ========================================= */
        .content-block {
            background: linear-gradient(135deg, #ffffff 0%, #f8fdfe 100%) !important;
            border-left: 4px solid #a1887f !important;
            padding: 18px !important; margin: 14px 0 !important;
            border-radius: 8px !important; box-shadow: 2px 2px 10px rgba(139, 115, 85, 0.1) !important;
        }
        .dialogue {
            color: #e65100 !important; font-weight: bold !important; background: rgba(255, 236, 179, 0.3) !important;
            padding: 8px 12px !important; border-radius: 8px !important; border-left: 3px solid #ff9800 !important;
            margin: 8px 0 !important; font-family: "楷体", "KaiTi", serif !important;
        }
        .options-list { list-style: none !important; padding: 0 !important; }
        .options-list li {
            background: #fff !important; margin: 8px 0 !important; padding: 14px !important;
            border: 2px solid #a1887f !important; border-radius: 12px !important; cursor: pointer !important;
            transition: transform 0.2s !important;
        }
        .options-list li:hover { transform: translateY(-2px) !important; background: #f1f8e9 !important; }
        /* =========================================
           4. 微信/终端聊天界面 (手机响应式核心重构)
           ========================================= */
        .pc-wx-wrapper {
            display: flex !important;
            width: 100% !important;
            height: 550px !important; /* 桌面端默认高度 */
            background-color: #f5f5f5 !important;
            border: 1px solid #d6d6d6 !important;
            border-radius: 6px !important;
            box-shadow: 0 2px 15px rgba(0,0,0,0.08) !important;
            font-family: "Microsoft YaHei", sans-serif !important;
            overflow: hidden !important;
            position: relative !important;
            margin-bottom: 15px !important;
        }
        /* 隐藏的 Radio (逻辑核心) */
        .pc-wx-wrapper input[type="radio"] { display: none !important; }
        /* --- 左侧：侧边栏 (联系人) --- */
        .wx-sidebar {
            width: 200px !important;
            background-color: #e6e6e6 !important;
            border-right: 1px solid #d6d6d6 !important;
            display: flex !important;
            flex-direction: column !important;
            flex-shrink: 0 !important; /* 防止被压缩 */
            overflow-y: auto !important;
            transition: width 0.3s ease !important; /* 宽度过渡动画 */
        }
        /* 搜索栏/顶部 */
        .wx-sidebar-top {
            padding: 15px 10px !important; background-color: #eee !important;
            font-size: 12px !important; color: #999 !important;
            border-bottom: 1px solid #dcdcdc !important; height: 50px !important;
            display: flex !important; align-items: center !important;
        }
        /* 联系人条目 (Label) */
        .wx-user-item {
            display: flex !important;
            align-items: center !important;
            padding: 12px 10px !important;
            cursor: pointer !important;
            border-bottom: 1px solid rgba(0,0,0,0.03) !important;
            transition: background 0.2s !important;
            position: relative !important;
        }
        .wx-user-item:hover { background-color: #dcdcdc !important; }
        /* 头像 */
        .wx-avatar {
            width: 40px !important; height: 40px !important;
            border-radius: 4px !important;
            background: linear-gradient(45deg, #999, #bbb) !important;
            margin-right: 10px !important;
            display: flex !important; align-items: center !important; justify-content: center !important;
            color: white !important; font-weight: bold !important; font-size: 16px !important;
            flex-shrink: 0 !important;
        }
        .wx-avatar.sys { background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important; }
        .wx-avatar.girl { background: linear-gradient(135deg, #F472B6, #DB2777) !important; }
        /* 名字和预览 */
        .wx-info { flex: 1 !important; overflow: hidden !important; min-width: 0 !important; }
        .wx-name {
            display: block !important; font-size: 14px !important; color: #000 !important;
            font-weight: 500 !important; margin-bottom: 2px !important;
            white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        }
        .wx-preview {
            display: block !important; font-size: 12px !important; color: #999 !important;
            white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        }
        /* --- 右侧：聊天主窗口 --- */
        .wx-main {
            flex: 1 !important;
            background-color: #f5f5f5 !important;
            display: none !important; /* 默认隐藏 */
            flex-direction: column !important;
            height: 100% !important;
            min-width: 0 !important; /* Flexbox 溢出修复 */
        }
        /* 顶部标题 */
        .wx-header {
            height: 50px !important;
            border-bottom: 1px solid #e7e7e7 !important;
            padding: 0 15px !important;
            display: flex !important; align-items: center !important; justify-content: space-between !important;
            background-color: #f5f5f5 !important;
            flex-shrink: 0 !important;
        }
        .wx-header-title { font-size: 16px !important; font-weight: bold !important; color: #000 !important; }
        .wx-header-opts { color: #999 !important; font-size: 20px !important; letter-spacing: 3px !important; }
        /* 消息滚动区 */
        .wx-scroll-area {
            flex: 1 !important;
            overflow-y: auto !important;
            padding: 15px !important;
            background-color: #f5f5f5 !important;
            overscroll-behavior: contain !important; /* 防止滚动穿透 */
        }
        .wx-scroll-area::-webkit-scrollbar { width: 4px !important; }
        .wx-scroll-area::-webkit-scrollbar-thumb { background-color: #cdcdcd !important; border-radius: 2px !important; }
        /* 底部输入框 */
        .wx-input-area {
            height: auto !important; min-height: 50px !important;
            border-top: 1px solid #e7e7e7 !important;
            background-color: #fff !important;
            padding: 10px 15px !important;
            flex-shrink: 0 !important;
        }
        .wx-tools { color: #7f7f7f !important; margin-bottom: 5px !important; font-size: 18px !important; }
        .wx-fake-input { color: #ccc !important; font-size: 13px !important; height: 30px !important; }
        /* 气泡样式 */
        .w-row { display: flex !important; margin-bottom: 15px !important; align-items: flex-start !important; }
        .w-row.center { justify-content: center !important; margin-bottom: 10px !important; }
        .w-time { background: #dadada !important; color: white !important; padding: 3px 8px !important; border-radius: 4px !important; font-size: 12px !important; }
        .w-av {
            width: 36px !important; height: 36px !important; border-radius: 4px !important;
            background: #ccc !important; margin-right: 10px !important; flex-shrink: 0 !important;
            display: flex !important; align-items: center !important; justify-content: center !important;
            color: white !important; font-size: 12px !important;
        }
        .w-bub {
            background: #ffffff !important; padding: 9px 12px !important; border-radius: 4px !important;
            font-size: 14px !important; color: #000 !important; line-height: 1.5 !important;
            position: relative !important; max-width: 85% !important; border: 1px solid #ededed !important;
            word-wrap: break-word !important;
        }
        /* 三角 */
        .w-row:not(.self) .w-bub::before {
            content: "" !important; position: absolute !important; left: -6px !important; top: 12px !important;
            border-top: 6px solid transparent !important; border-bottom: 6px solid transparent !important;
            border-right: 6px solid #ffffff !important;
        }
        .w-row.self { flex-direction: row-reverse !important; }
        .w-row.self .w-av { margin-right: 0 !important; margin-left: 10px !important; background: #e0e0e0 !important; color: #333 !important; }
        .w-row.self .w-bub { background: #95ec69 !important; border-color: #8ad961 !important; }
        .w-row.self .w-bub::before {
            left: auto !important; right: -5px !important;
            border-left: 5px solid #95ec69 !important; border-right: none !important;
        }
        /* --- 逻辑：选中 Radio 切换界面 --- */
        /* 高亮选中的联系人 (桌面端) */
        #chat-1:checked ~ .wx-sidebar label[for="chat-1"],
        #chat-2:checked ~ .wx-sidebar label[for="chat-2"],
        #chat-3:checked ~ .wx-sidebar label[for="chat-3"] {
            background-color: #c6c6c6 !important;
        }
        /* 显示对应的聊天窗口 */
        #chat-1:checked ~ .content-1,
        #chat-2:checked ~ .content-2,
        #chat-3:checked ~ .content-3 {
            display: flex !important;
            animation: fadeIn 0.2s ease-in-out !important;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        /* =========================================
           5. 手机端深度适配 (Media Query)
           ========================================= */
        @media (max-width: 768px) {
            .pc-wx-wrapper {
                /* 高度适配手机屏幕，避免过长 */
                height: 75vh !important;
                max-height: 600px !important;
            }
            /* --- 侧边栏变为窄图标栏 --- */
            .wx-sidebar {
                width: 55px !important; /* 极窄宽度，只够放头像 */
                min-width: 55px !important;
                background-color: #2e2e2e !important; /* 改为深色，区分更明显 */
                border-right: none !important;
            }
            .wx-sidebar-top {
                display: none !important; /* 隐藏顶部搜索 */
            }
            .wx-user-item {
                padding: 15px 0 !important; /* 增加点击区域高度 */
                justify-content: center !important; /* 头像居中 */
                border-bottom: 1px solid rgba(255,255,255,0.05) !important;
            }
            /* 选中时给予明显的高亮指示条 */
            #chat-1:checked ~ .wx-sidebar label[for="chat-1"],
            #chat-2:checked ~ .wx-sidebar label[for="chat-2"],
            #chat-3:checked ~ .wx-sidebar label[for="chat-3"] {
                background-color: #000000 !important;
                border-left: 3px solid #95ec69 !important;
            }
            /* 强制隐藏名字和文字预览 */
            .wx-info { display: none !important; }
            .wx-avatar {
                margin: 0 !important;
                width: 36px !important; height: 36px !important;
            }
            /* --- 右侧聊天窗口 --- */
            .wx-main {
                /* 占据剩余空间 */
                width: calc(100% - 55px) !important;
            }
            /* 调整内边距 */
            .wx-header { padding: 0 10px !important; }
            .wx-scroll-area { padding: 10px !important; }
            .w-bub { font-size: 13px !important; padding: 8px 10px !important; }
        }
        /* =========================================
           1. 全局基础设置 (保留你的风格)
           ========================================= */
        * {
            font-family: "宋体", "SimSun", "微软雅黑", sans-serif !important;
            box-sizing: border-box !important;
            -webkit-tap-highlight-color: transparent !important;
        }
        body {
            background: linear-gradient(135deg, #f8f4e9 0%, #e8f4f8 50%, #f0f8f0 100%) !important;
            padding: 10px !important;
            margin: 0 !important;
        }
        /* =========================================
           2. 仿微信交互界面 (核心修复版)
           ========================================= */
        .pc-wx-wrapper {
            display: flex !important;
            width: 100% !important;
            height: 80vh !important; /* 增加高度以适应手机 */
            max-height: 650px !important;
            background-color: #f5f5f5 !important;
            border: 1px solid #d6d6d6 !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
            font-family: "Microsoft YaHei", sans-serif !important;
            overflow: hidden !important;
            position: relative !important;
            margin-bottom: 15px !important;
        }
        /* --- 核心交互逻辑：Radio 按钮 --- */
        /* 必须隐藏 radio，但不能用 display:none，否则部分浏览器会忽略选中逻辑 */
        .pc-wx-wrapper input[type="radio"] {
            position: absolute !important;
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: -1 !important;
        }
        /* --- 左侧：联系人侧边栏 --- */
        .wx-sidebar {
            width: 220px !important;
            background-color: #2e2e2e !important; /* 改为深色背景，更像现代App侧栏 */
            display: flex !important;
            flex-direction: column !important;
            flex-shrink: 0 !important;
            overflow-y: auto !important;
            z-index: 20 !important; /* 保证层级在聊天窗口之上 */
        }
        /* 联系人条目 (Label) - 这就是点击按钮 */
        .wx-user-item {
            display: flex !important;
            align-items: center !important;
            padding: 15px 12px !important;
            cursor: pointer !important;
            transition: all 0.2s !important;
            position: relative !important;
            user-select: none !important; /* 防止点击变蓝 */
        }
        /* 鼠标悬停和点击效果 */
        .wx-user-item:hover { background-color: rgba(255,255,255,0.05) !important; }
        .wx-user-item:active { background-color: rgba(255,255,255,0.1) !important; }
        /* 头像样式 */
        .wx-avatar {
            width: 40px !important;
            height: 40px !important;
            border-radius: 4px !important;
            background: #999 !important;
            margin-right: 12px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: white !important;
            font-size: 16px !important;
            flex-shrink: 0 !important;
            /* 关键：让子元素不阻挡 Label 的点击事件 */
            pointer-events: none !important;
        }
        .wx-avatar.girl { background: #ff7fbe !important; }
        .wx-avatar.sys { background: #8B5CF6 !important; }
        /* 文字信息 */
        .wx-info {
            flex: 1 !important;
            overflow: hidden !important;
            pointer-events: none !important; /* 同样防止文字阻挡点击 */
        }
        .wx-name {
            display: block !important; color: #fff !important; font-size: 14px !important;
            margin-bottom: 4px !important; white-space: nowrap !important;
        }
        .wx-preview {
            display: block !important; color: #999 !important; font-size: 12px !important;
            white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        }
        /* --- 选中状态高亮逻辑 --- */
        /* 当 chat-1 选中时，高亮对应的 label */
        #chat-1:checked ~ .wx-sidebar label[for="chat-1"],
        #chat-2:checked ~ .wx-sidebar label[for="chat-2"],
        #chat-3:checked ~ .wx-sidebar label[for="chat-3"] {
            background-color: rgba(0,0,0,0.3) !important;
            border-left: 3px solid #95ec69 !important; /* 绿色指示条 */
        }
        /* --- 右侧：聊天主窗口 --- */
        /* 默认所有窗口隐藏 */
        .wx-main {
            flex: 1 !important;
            background-color: #f5f5f5 !important;
            display: none !important;
            flex-direction: column !important;
            height: 100% !important;
            width: 100% !important;
            position: relative !important;
            z-index: 10 !important;
        }
        /* 当 radio 选中时，显示对应的窗口 */
        #chat-1:checked ~ .content-1,
        #chat-2:checked ~ .content-2,
        #chat-3:checked ~ .content-3 {
            display: flex !important;
            animation: fadeIn 0.3s ease !important;
        }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
        /* 聊天内容样式 */
        .wx-header {
            height: 50px !important; border-bottom: 1px solid #e0e0e0 !important;
            padding: 0 15px !important; display: flex !important; align-items: center !important;
            justify-content: space-between !important; background: #f5f5f5 !important;
        }
        .wx-scroll-area { flex: 1 !important; overflow-y: auto !important; padding: 15px !important; }
        .wx-input-area { height: 50px !important; border-top: 1px solid #e0e0e0 !important; background: #fff !important; padding: 8px !important; }
        /* 气泡 */
        .w-row { display: flex !important; margin-bottom: 15px !important; }
        .w-row.self { flex-direction: row-reverse !important; }
        .w-bub {
            background: #fff !important; padding: 10px !important; border-radius: 4px !important;
            max-width: 80% !important; border: 1px solid #eee !important; position: relative !important;
            font-size: 14px !important; line-height: 1.5 !important; color: #333 !important;
        }
        .w-row.self .w-bub { background: #95ec69 !important; border-color: #8ad961 !important; }
        /* 气泡三角 */
        .w-row:not(.self) .w-bub::before {
            content:""; position: absolute; left:-6px; top:12px;
            border-right: 6px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
        }
        .w-row.self .w-bub::before {
            content:""; position: absolute; right:-6px; top:12px;
            border-left: 6px solid #95ec69; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
        }
        /* =========================================
           3. 手机端适配 (Mobile)
           ========================================= */
        @media (max-width: 768px) {
            /* 手机上侧边栏变窄，只显示头像 */
            .wx-sidebar {
                width: 65px !important;
                min-width: 65px !important;
                overflow-x: hidden !important;
            }
            /* 强制 Label 撑满宽度，保证点击区域 */
            .wx-user-item {
                padding: 15px 0 !important;
                justify-content: center !important;
                width: 100% !important;
                height: 65px !important;
            }
            /* 隐藏名字和预览，防止挤压 */
            .wx-info { display: none !important; }
            /* 头像微调 */
            .wx-avatar { margin: 0 !important; width: 40px !important; height: 40px !important; }
            /* 聊天窗口占满剩余空间 */
            .wx-main { width: calc(100% - 65px) !important; }
            /* 调整气泡字号 */
            .w-bub { font-size: 13px !important; padding: 8px 10px !important; }
            .wx-avatar { font-size: 14px !important; }
        }
        /* =========================================
           0. 新增：平滑过渡与动画增强
           ========================================= */
        * {
            transition: color 0.2s ease, background-color 0.3s ease, border-color 0.3s ease !important;
        }
        /* =========================================
           1. 全局基础设置 - 增强质感
           ========================================= */
        body {
            background:
                linear-gradient(135deg, #f8f4e9 0%, #e8f4f8 50%, #f0f8f0 100%),
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.4) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.3) 0%, transparent 50%) !important;
            background-attachment: fixed !important;
            position: relative !important;
        }
        /* 添加微妙的背景纹理 */
        body::before {
            content: "" !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background-image:
                radial-gradient(#a1887f 0.5px, transparent 0.5px),
                radial-gradient(#a1887f 0.5px, transparent 0.5px) !important;
            background-size: 20px 20px !important;
            background-position: 0 0, 10px 10px !important;
            opacity: 0.03 !important;
            pointer-events: none !important;
            z-index: -1 !important;
        }
        /* =========================================
           2. 侧边栏面板系统 - 增强视觉层次
           ========================================= */
        .panel {
            background:
                linear-gradient(135deg, #ffffff 0%, #f8fdfe 50%, #f5f9ff 100%),
                radial-gradient(circle at top left, rgba(255,255,255,0.8) 0%, transparent 50%) !important;
            border: 1px solid #a1887f !important;
            border-radius: 16px !important;
            box-shadow:
                0 4px 20px rgba(139, 115, 85, 0.15),
                inset 0 1px 0 rgba(255,255,255,0.6) !important;
            backdrop-filter: blur(10px) !important;
        }
        .panel summary {
            background: linear-gradient(135deg,
                rgba(212, 175, 55, 0.08) 0%,
                rgba(121, 134, 203, 0.08) 50%,
                rgba(86, 204, 242, 0.08) 100%) !important;
            border: 1px solid rgba(161, 136, 127, 0.25) !important;
            border-radius: 12px !important;
            position: relative !important;
            overflow: hidden !important;
        }
        .panel summary::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: -100% !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(90deg,
                transparent,
                rgba(255,255,255,0.4),
                transparent) !important;
            transition: left 0.5s ease !important;
        }
        .panel summary:hover::before {
            left: 100% !important;
        }
        /* =========================================
           3. 内容块与小说样式 - 增强立体感
           ========================================= */
        .content-block {
            background:
                linear-gradient(135deg, #ffffff 0%, #fafcff 100%),
                radial-gradient(circle at top right, rgba(255,255,255,0.8) 0%, transparent 50%) !important;
            border-left: 4px solid #a1887f !important;
            padding: 20px !important;
            margin: 16px 0 !important;
            border-radius: 12px !important;
            box-shadow:
                0 3px 15px rgba(139, 115, 85, 0.1),
                0 1px 3px rgba(0,0,0,0.05) !important;
            position: relative !important;
            overflow: hidden !important;
        }
        .content-block::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            height: 1px !important;
            background: linear-gradient(90deg,
                transparent,
                rgba(161, 136, 127, 0.3),
                transparent) !important;
        }
        .dialogue {
            background:
                linear-gradient(135deg, rgba(255, 236, 179, 0.4) 0%, rgba(255, 245, 220, 0.6) 100%) !important;
            border-left: 3px solid #ff9800 !important;
            padding: 12px 16px !important;
            border-radius: 10px !important;
            box-shadow: 0 2px 8px rgba(230, 81, 0, 0.1) !important;
            position: relative !important;
        }
        .dialogue::after {
            content: "" !important;
            position: absolute !important;
            top: 50% !important;
            left: -3px !important;
            transform: translateY(-50%) !important;
            width: 3px !important;
            height: 70% !important;
            background: linear-gradient(to bottom,
                transparent,
                #ff9800,
                transparent) !important;
            border-radius: 2px !important;
        }
        .options-list li {
            background:
                linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
            border: 2px solid #a1887f !important;
            border-radius: 14px !important;
            box-shadow:
                0 2px 8px rgba(139, 115, 85, 0.08),
                inset 0 1px 0 rgba(255,255,255,0.8) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            position: relative !important;
            overflow: hidden !important;
        }
        .options-list li::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(135deg,
                rgba(161, 136, 127, 0.1) 0%,
                transparent 50%,
                rgba(161, 136, 127, 0.05) 100%) !important;
            opacity: 0 !important;
            transition: opacity 0.3s ease !important;
        }
        .options-list li:hover {
            transform: translateY(-3px) !important;
            border-color: #8b7355 !important;
            box-shadow:
                0 6px 20px rgba(139, 115, 85, 0.15),
                inset 0 1px 0 rgba(255,255,255,0.9) !important;
        }
        .options-list li:hover::before {
            opacity: 1 !important;
        }
        /* =========================================
           4. 微信/终端聊天界面 - 深度美化
           ========================================= */
        .pc-wx-wrapper {
            border-radius: 12px !important;
            box-shadow:
                0 8px 32px rgba(0,0,0,0.12),
                0 2px 8px rgba(0,0,0,0.08) !important;
            border: 1px solid rgba(214, 214, 214, 0.8) !important;
            position: relative !important;
            overflow: hidden !important;
        }
        .pc-wx-wrapper::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            height: 1px !important;
            background: linear-gradient(90deg,
                transparent,
                rgba(255,255,255,0.8),
                transparent) !important;
            z-index: 25 !important;
        }
        /* --- 左侧侧边栏美化 --- */
        .wx-sidebar {
            background:
                linear-gradient(135deg, #2e2e2e 0%, #3a3a3a 100%) !important;
            border-right: 1px solid rgba(0,0,0,0.2) !important;
            position: relative !important;
        }
        .wx-sidebar::after {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            width: 1px !important;
            height: 100% !important;
            background: linear-gradient(to bottom,
                transparent,
                rgba(0,0,0,0.3),
                transparent) !important;
        }
        .wx-user-item {
            transition: all 0.3s ease !important;
            border-bottom: 1px solid rgba(255,255,255,0.03) !important;
        }
        .wx-user-item:hover {
            background: linear-gradient(135deg,
                rgba(255,255,255,0.08) 0%,
                rgba(255,255,255,0.04) 100%) !important;
            transform: translateX(2px) !important;
        }
        /* 选中状态增强 */
        #chat-1:checked ~ .wx-sidebar label[for="chat-1"],
        #chat-2:checked ~ .wx-sidebar label[for="chat-2"],
        #chat-3:checked ~ .wx-sidebar label[for="chat-3"] {
            background: linear-gradient(135deg,
                rgba(149, 236, 105, 0.15) 0%,
                rgba(149, 236, 105, 0.05) 100%) !important;
            border-left: 3px solid #95ec69 !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
        }
        /* 头像美化 */
        .wx-avatar {
            border-radius: 8px !important;
            box-shadow:
                0 2px 8px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.3) !important;
            position: relative !important;
            overflow: hidden !important;
        }
        .wx-avatar::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(135deg,
                rgba(255,255,255,0.2) 0%,
                transparent 50%,
                rgba(0,0,0,0.1) 100%) !important;
        }
        /* --- 右侧聊天窗口美化 --- */
        .wx-main {
            background:
                linear-gradient(135deg, #f5f5f5 0%, #f0f2f5 100%),
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.6) 0%, transparent 50%) !important;
        }
        .wx-header {
            background:
                linear-gradient(135deg, #f5f5f5 0%, #f8f9fa 100%) !important;
            border-bottom: 1px solid rgba(0,0,0,0.08) !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
            position: relative !important;
        }
        .wx-scroll-area {
            background:
                linear-gradient(135deg, #f5f5f5 0%, #f0f2f5 100%) !important;
        }
        /* 气泡消息美化 */
        .w-bub {
            border-radius: 10px !important;
            box-shadow:
                0 2px 8px rgba(0,0,0,0.08),
                0 1px 2px rgba(0,0,0,0.05) !important;
            position: relative !important;
            overflow: hidden !important;
            border: 1px solid rgba(0,0,0,0.05) !important;
        }
        .w-bub::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(135deg,
                rgba(255,255,255,0.6) 0%,
                transparent 30%,
                rgba(255,255,255,0.3) 100%) !important;
            pointer-events: none !important;
        }
        .w-row.self .w-bub {
            background: linear-gradient(135deg, #95ec69 0%, #7de64e 100%) !important;
            border-color: #78d247 !important;
        }
        .w-row:not(.self) .w-bub {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        }
        /* 时间戳美化 */
        .w-time {
            background: linear-gradient(135deg, #dadada 0%, #c8c8c8 100%) !important;
            border-radius: 12px !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
            font-weight: 500 !important;
        }
        /* 输入区域美化 */
        .wx-input-area {
            background:
                linear-gradient(135deg, #ffffff 0%, #fcfcfc 100%) !important;
            border-top: 1px solid rgba(0,0,0,0.08) !important;
            box-shadow: 0 -1px 3px rgba(0,0,0,0.03) !important;
        }
        .wx-fake-input {
            background:
                linear-gradient(135deg, #f0f0f0 0%, #f8f8f8 100%) !important;
            border-radius: 8px !important;
            border: 1px solid rgba(0,0,0,0.08) !important;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important;
        }
        /* =========================================
           5. 手机端适配增强
           ========================================= */
        @media (max-width: 768px) {
            .pc-wx-wrapper {
                border-radius: 16px !important;
                box-shadow:
                    0 10px 40px rgba(0,0,0,0.15),
                    0 2px 10px rgba(0,0,0,0.1) !important;
            }
            .wx-sidebar {
                border-radius: 16px 0 0 16px !important;
            }
            .wx-main {
                border-radius: 0 16px 16px 0 !important;
            }
            /* 手机端气泡调整 */
            .w-bub {
                border-radius: 14px !important;
                font-size: 14px !important;
                line-height: 1.5 !important;
            }
            /* 手机端头像美化 */
            .wx-avatar {
                border-radius: 10px !important;
                box-shadow:
                    0 3px 10px rgba(0,0,0,0.25),
                    inset 0 1px 0 rgba(255,255,255,0.4) !important;
            }
        }
        /* =========================================
           6. 新增：滚动条美化
           ========================================= */
        .wx-scroll-area::-webkit-scrollbar {
            width: 6px !important;
        }
        .wx-scroll-area::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.03) !important;
            border-radius: 3px !important;
        }
        .wx-scroll-area::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, #c8c8c8, #b0b0b0) !important;
            border-radius: 3px !important;
            border: 1px solid rgba(255,255,255,0.2) !important;
        }
        .wx-scroll-area::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to bottom, #a8a8a8, #909090) !important;
        }
        /* =========================================
           7. 新增：加载动画和微交互
           ========================================= */
        @keyframes gentlePulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }
        .wx-user-item:active {
            animation: gentlePulse 0.3s ease !important;
        }
        /* 消息发送动画 */
        .w-row {
            animation: messageSlideIn 0.3s ease-out !important;
        }
        @keyframes messageSlideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        /* =========================================
           8. 新增：深色模式支持准备
           ========================================= */
        @media (prefers-color-scheme: dark) {
            .content-block {
                background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%) !important;
                color: #e2e8f0 !important;
            }
            .dialogue {
                background: linear-gradient(135deg, rgba(74, 85, 104, 0.6) 0%, rgba(45, 55, 72, 0.8) 100%) !important;
                color: #f7fafc !important;
            }
        }
        /* =========================================
           🚑 紧急修复：强制展开所有聊天窗口 (平铺模式)
           适用于不支持点击交互的AI阅读环境
           ========================================= */
        /* 1. 重置最外层容器，改为垂直排列 */
        .pc-wx-wrapper {
            display: flex !important;
            flex-direction: column !important; /* 垂直堆叠 */
            height: auto !important; /* 高度随内容自动撑开 */
            max-height: none !important; /* 取消限高 */
            background: transparent !important; /* 去掉背景，因为现在是分离的卡片 */
            border: none !important;
            box-shadow: none !important;
            overflow: visible !important;
        }
        /* 2. 隐藏左侧联系人列表 (因为不能点击切换，留着占位置且容易误导) */
        .wx-sidebar,
        .wx-sidebar-top,
        input[name="wx-tab"] {
            display: none !important;
        }
        /* 3. 强制显示所有聊天主窗口，并美化为独立卡片 */
        .wx-main {
            display: flex !important; /* 核心：全部显示，不再隐藏 */
            width: 100% !important;
            height: auto !important; /* 高度自适应 */
            min-height: 350px !important; /* 保证每个窗口最小高度 */
            margin-bottom: 30px !important; /* 窗口之间拉开距离 */
            /* 还原为独立卡片样式 */
            border: 1px solid rgba(0,0,0,0.1) !important;
            border-radius: 12px !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
            background-color: #f5f5f5 !important;
            /* 修复手机端宽度问题 */
            position: relative !important;
            z-index: 1 !important;
            opacity: 1 !important;
            transform: none !important;
            animation: none !important;
        }
        /* 4. 增加一个视觉提示，区分这是谁的窗口 */
        .wx-header {
            background: linear-gradient(to right, #f5f5f5, #fff) !important;
            border-radius: 12px 12px 0 0 !important;
        }
        /* 5. 调整滚动区，防止内容被截断 */
        .wx-scroll-area {
            overflow: visible !important; /* 让内容自然撑开 */
            height: auto !important;
            flex: none !important; /* 取消弹性高度，改为实心高度 */
        }
        /* 全局选项计数器 */.markdown-body { counter-reset: option-counter;}
        /* pre 作为按钮容器，需要相对定位 */pre { position: relative !important; margin: 15px 0 !important; overflow: hidden !important; border-radius: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; min-height: 55px;}
        /* --- 隐藏头部容器的视觉部分 --- */pre div[class*="border-b"] { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; z-index: 2; pointer-events: none; /* 容器不拦截点击，只让里面的复制按钮可点 */}
        /* 隐藏头部语言标签 */pre div[class*="border-b"] > div:first-child { display: none !important;}
        /* --- 复制按钮透明覆盖层 --- */pre div[data-tooltip-id] { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; cursor: pointer !important; background: transparent !important; border: none !important; pointer-events: auto; z-index: 3;}
        /* 隐藏复制按钮内部的图标 */pre div[data-tooltip-id] .style_copyIcon__GJL9e { display: none !important;}
        /* --- 代码内容区域，样式化为选项按钮 --- */pre div[node="[object Object]"] { position: relative; z-index: 1; display: block !important; pointer-events: none; /* 避免干扰点击 */ background: #f5f5f5 !important; border: 2px solid #555555 !important; box-shadow: 4px 4px 0 #777777 !important; color: #333333 !important; font-family: "Kosugi Maru", sans-serif !important; font-size: 1.1em !important; padding: 10px 20px 10px 60px !important; /* 左侧留空间给序号 */ margin: 0 !important; border-radius: 0 !important; min-height: 55px; white-space: pre-wrap; word-break: break-word; transition: all 0.3s ease; counter-increment: option-counter;}
        /* 选项序号 */pre div[node="[object Object]"]::before { content: counter(option-counter); display: flex; align-items: center; justify-content: center; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: #555555; color: #f5f5f5; border-radius: 50%; font-size: 1em; font-weight: bold; border: 2px solid #f5f5f5; box-shadow: 1px 1px 0 #777777; z-index: 2;}
        /* 确保代码文本颜色正确 */pre div[node="[object Object]"] code { display: block; color: inherit !important; background: transparent !important; padding: 0 !important; margin: 0 !important; font-family: inherit !important; font-size: inherit !important; white-space: pre-wrap;}
        /* Hover 效果 */pre:hover div[node="[object Object]"] { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #777777 !important; background: #e5e5e5 !important;}
        /* Active 效果（按下时） */pre:active div[node="[object Object]"] { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 #777777 !important; background: #d5d5d5 !important;}
        /* 点击时的覆盖提示（按下时显示） */pre div[data-tooltip-id]::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2em; opacity: 0; transition: opacity 0.1s; pointer-events: none; z-index: 4;}
        pre div[data-tooltip-id]:active::after { content: '✅ 已复制'; opacity: 1;}
        /* 弹幕容器样式 */
        .danmu-container {
            position: relative;
            height: 400px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            overflow: hidden;
        }
        /* 弹幕样式 */
        .danmu {
            position: absolute;
            white-space: nowrap;
            font-size: 18px;
            padding: 5px 12px;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, 0.15);
            animation: danmu-scroll linear infinite;
            opacity: 0;
            animation-fill-mode: both;
        }
        /* 弹幕滚动动画 */
        @keyframes danmu-scroll {
            0% {
                transform: translateX(100%);
                opacity: 0;
            }
            5% {
                opacity: 1;
            }
            95% {
                opacity: 1;
            }
            100% {
                transform: translateX(-100%);
                opacity: 0;
            }
        }
        /* 为每个弹幕设置不同的延迟和速度 */
        .danmu:nth-child(1) { top: 10%; animation-duration: 15s; animation-delay: 0s; }
        .danmu:nth-child(2) { top: 20%; animation-duration: 18s; animation-delay: 2s; }
        .danmu:nth-child(3) { top: 30%; animation-duration: 20s; animation-delay: 5s; }
        .danmu:nth-child(4) { top: 40%; animation-duration: 16s; animation-delay: 1s; }
        .danmu:nth-child(5) { top: 50%; animation-duration: 22s; animation-delay: 7s; }
        .danmu:nth-child(6) { top: 60%; animation-duration: 14s; animation-delay: 3s; }
        .danmu:nth-child(7) { top: 70%; animation-duration: 19s; animation-delay: 6s; }
        .danmu:nth-child(8) { top: 80%; animation-duration: 17s; animation-delay: 4s; }
        .danmu:nth-child(9) { top: 90%; animation-duration: 21s; animation-delay: 8s; }
        .danmu:nth-child(10) { top: 25%; animation-duration: 15s; animation-delay: 9s; }