/* =========================================
   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; }
    
    /* 底部输入区简化 */
    .wx-input-area { height: 50px !important; padding: 8px !important; display: flex !important; align-items: center !important;}
    .wx-tools { display: none !important; } /* 隐藏工具栏图标 */
    .wx-fake-input { margin: 0 !important; width: 100% !important; height: 34px !important; line-height: 34px !important; background: #f0f0f0 !important; padding-left: 10px !important; border-radius: 4px !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;}