/* =========================================
   极致隐藏版：终端风面板 UI 定制 (高权重防覆盖)
========================================= */

/* 彻底抹杀思维链与计算标签的物理体积，防止换行诈尸 */
calc { display: none !important; }
think { display: none !important; }

.rili-markdown-renderer think,
.rili-markdown-renderer calc { 
    display: none !important; 
    visibility: hidden !important; 
    height: 0 !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    border: none !important;
}

details { margin-top: 10px; }

/* =========================================
   整体面板美化
========================================= */
.rili-markdown-renderer .xianxia-board {
    background-color: #f7f4ed !important; 
    border: 1px solid #d3c4a1 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    font-family: serif !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* =========================================
   头部状态与正文
========================================= */
.group .rili-markdown-renderer .x-header {
    text-align: center;
    color: #8b7355 !important; 
    border-bottom: 1px dashed #d3c4a1;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 0.85em;
    font-weight: bold;
}

.group .rili-markdown-renderer .x-text p {
    color: #1a1a1a !important; 
    line-height: 1.8 !important;
    font-size: 1.05em !important;
}

/* =========================================
   横向并排的选项卡系统
========================================= */
.rili-markdown-renderer .x-tabs-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    gap: 5px;
    margin-top: 20px;
    border-top: 2px solid #b34232 !important; 
    padding-top: 10px;
}

.rili-markdown-renderer .x-tab {
    flex: 1 1 calc(25% - 10px); 
    min-width: 60px;
}

.rili-markdown-renderer .x-tab[open] {
    flex: 1 1 100%; 
}

.group .rili-markdown-renderer .x-tab summary {
    list-style: none;
    text-align: center;
    background: linear-gradient(180deg, #f0eade, #e8dcc4); 
    border: 1px solid #d3c4a1;
    border-radius: 4px;
    padding: 8px 2px;
    font-size: 0.85em;
    font-weight: bold;
    color: #5c4033 !important; 
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
}

.group .rili-markdown-renderer .x-tab summary:hover {
    background: linear-gradient(180deg, #e8dcc4, #d3c4a1);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.rili-markdown-renderer .x-tab summary::-webkit-details-marker { 
    display: none; 
} 

.group .rili-markdown-renderer .x-tab[open] summary {
    background: #d3c4a1; 
    color: #b34232 !important; 
}

/* =========================================
   选项卡内容区域
========================================= */
.rili-markdown-renderer .x-content {
    background: linear-gradient(to right, #2a2a2a, #808080 80%, transparent);
    border-radius: 4px;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #d3c4a1;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.group .rili-markdown-renderer .x-content p {
    margin: 6px 0;
    color: #f7f4ed !important;
    font-size: 0.85em;
}

/* =========================================
   选项按钮 .action-btn 样式 (完美平移原 <o> 标签配色)
========================================= */
/* 保留原本 x-options 的顶部虚线分割感，作用于包裹按钮的容器 */
.rili-markdown-renderer .x-tab .x-content {
    margin-top: 15px;
    border-top: 1px dashed #d3c4a1; /* 你原先的优雅虚线 */
    padding-top: 10px;
}

/* 核心按钮样式，只替换了选择器，颜色属性一字未动 */
.group .rili-markdown-renderer .action-btn {
    display: block !important;
    background: rgba(179, 66, 50, 0.05) !important;
    border: 1px solid #b34232 !important;
    color: #b34232 !important; 
    padding: 10px 15px !important;
    margin: 8px 0 !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

/* 悬浮与点击反馈，保持原汁原味的右移与阴影 */
.group .rili-markdown-renderer .action-btn:hover, 
.group .rili-markdown-renderer .action-btn:active {
    background: #b34232 !important;
    color: #f7f4ed !important;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(179, 66, 50, 0.3);
}

/* =========================================
   高亮色彩系统
========================================= */
.group .rili-markdown-renderer .dialogue { 
    color: #b34232 !important; 
    font-weight: bold; 
}

.group .rili-markdown-renderer .hl-name { 
    color: #d97762 !important; 
    font-weight: bold; 
}

.group .rili-markdown-renderer .hl-gender { 
    color: #5c8b99 !important; 
    font-weight: bold; 
}

.group .rili-markdown-renderer .hl-num { 
    color: #b37d4e !important; 
    font-weight: bold; 
}

.group .rili-markdown-renderer .hl-xp { 
    color: #c45c73 !important; 
    font-weight: bold; 
}

.group .rili-markdown-renderer .hl-love { 
    color: #e65c5c !important; 
    font-weight: bold; 
    font-size: 1.1em; 
}

/* =========================================
   时间地点专属玉牌信息栏
========================================= */
.rili-markdown-renderer .info-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(to bottom, rgba(211, 196, 161, 0.1), rgba(211, 196, 161, 0.4));
    border: 1px solid #d3c4a1;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 15px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.group .rili-markdown-renderer .info-item {
    color: #8b7355 !important;
    font-weight: bold;
    font-size: 0.9em;
}

/* =========================================
   玩家发送的消息气泡美化
========================================= */
.rili-markdown-renderer:not(:has(.xianxia-board)) {
    background: linear-gradient(135deg, #f7f4ed, #e8dcc4) !important;
    border-left: 4px solid #b34232 !important;
    border-radius: 4px 12px 12px 4px !important;
    padding: 12px 15px !important;
    color: #3e2815 !important;
    font-family: serif !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.06) !important;
}

/* =========================================
   【升级1】文本加载动画美化（"AI思考中"）
========================================= */
/* 适配rili的加载动画HTML结构 */
.flex.gap-2.w-full.h-full.items-center.justify-center {
    background: linear-gradient(135deg, #f7f4ed 0%, #e8dcc4 100%) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 2px solid #d3c4a1 !important;
    box-shadow: 0 4px 16px rgba(179, 66, 50, 0.15), inset 0 1px 0 rgba(211, 196, 161, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 美化跳动的圆点 */
.flex.gap-2.w-full.h-full.items-center.justify-center span {
    background: linear-gradient(135deg, #b34232 0%, #d97762 100%) !important;
    box-shadow: 0 0 12px rgba(179, 66, 50, 0.6), 0 0 24px rgba(179, 66, 50, 0.3) !important;
    filter: drop-shadow(0 0 6px rgba(179, 66, 50, 0.8)) !important;
    border: 2px solid rgba(217, 119, 98, 0.5) !important;
}

/* 添加旋转光晕背景 */
.flex.gap-2.w-full.h-full.items-center.justify-center::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(179, 66, 50, 0.15) 0%, transparent 70%);
    animation: loading-glow 2.5s infinite;
}

@keyframes loading-glow {
    0%, 100% { transform: rotate(0deg); opacity: 0.4; }
    50% { transform: rotate(180deg); opacity: 0.8; }
}

/* 添加文字提示 */
.flex.gap-2.w-full.h-full.items-center.justify-center::after {
    content: '道友思索中...';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #b34232;
    font-family: serif;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(179, 66, 50, 0.6);
    animation: thinking-text 1.8s infinite;
}

@keyframes thinking-text {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; text-shadow: 0 0 12px rgba(179, 66, 50, 0.9); }
}

/* 兼容其他加载样式 */
div[class*="typing"], 
div[class*="loading"], 
.dot-flashing, 
div:has(> .animate-pulse) {
    background: #f7f4ed !important;
    border: 1px solid #d3c4a1 !important;
    box-shadow: 0 0 10px rgba(179, 66, 50, 0.1) !important;
    color: #b34232 !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
}

/* =========================================
   【升级2】底部输入台全景玻璃化
========================================= */
div[class*="bg-"]:has(textarea[placeholder*="消息"]),
div:has(> div > textarea[placeholder*="输入"]) {
    background: linear-gradient(135deg, rgba(247, 244, 237, 0.85) 0%, rgba(232, 220, 196, 0.9) 100%) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
    border: 1px solid rgba(211, 196, 161, 0.6) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
}

/* 输入框本身透明化 */
textarea[placeholder*="消息"],
textarea[placeholder*="输入"] {
    background-color: transparent !important;
    color: #3e2815 !important;
    font-family: serif !important;
}

textarea::placeholder {
    color: rgba(139, 115, 85, 0.5) !important; 
    font-family: serif !important;
}

/* =========================================
   【升级3】底部按钮美化（保留配色风格+增强效果）
========================================= */
div:has(textarea[placeholder*="消息"]) button,
div:has(textarea[placeholder*="消息"]) div[role="button"] {
    background: linear-gradient(135deg, rgba(240, 234, 222, 0.7) 0%, rgba(232, 220, 196, 0.8) 100%) !important;
    border: 1px solid rgba(211, 196, 161, 0.5) !important;
    color: #5c4033 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* 底部按钮悬浮效果 */
div:has(textarea[placeholder*="消息"]) button:hover,
div:has(textarea[placeholder*="消息"]) div[role="button"]:hover {
    background: linear-gradient(135deg, rgba(211, 196, 161, 0.4) 0%, rgba(179, 66, 50, 0.15) 100%) !important;
    border-color: rgba(179, 66, 50, 0.4) !important;
    color: #b34232 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(179, 66, 50, 0.2) !important;
}

/* 底部按钮激活效果 */
div:has(textarea[placeholder*="消息"]) button:active,
div:has(textarea[placeholder*="消息"]) div[role="button"]:active {
    transform: translateY(0px) scale(0.97) !important;
}

/* 发送按钮特别强化 */
div:has(textarea[placeholder*="消息"]) button.bg-primary,
div:has(textarea[placeholder*="消息"]) button:has(svg.lucide-corner-down-left),
div:has(textarea[placeholder*="消息"]) button[aria-label*="发送"],
div:has(textarea[placeholder*="消息"]) button[aria-label*="实时"] {
    background: linear-gradient(135deg, #b34232 0%, #d97762 100%) !important;
    color: #f7f4ed !important;
    border: 2px solid rgba(217, 119, 98, 0.6) !important;
    box-shadow: 0 4px 12px rgba(179, 66, 50, 0.3), 0 0 16px rgba(179, 66, 50, 0.15) !important;
    font-weight: 700 !important;
}

div:has(textarea[placeholder*="消息"]) button.bg-primary:hover,
div:has(textarea[placeholder*="消息"]) button:has(svg.lucide-corner-down-left):hover,
div:has(textarea[placeholder*="消息"]) button[aria-label*="发送"]:hover,
div:has(textarea[placeholder*="消息"]) button[aria-label*="实时"]:hover {
    background: linear-gradient(135deg, #d97762 0%, #c45c73 100%) !important;
    box-shadow: 0 6px 20px rgba(179, 66, 50, 0.5), 0 0 24px rgba(217, 119, 98, 0.4) !important;
    transform: translateY(-3px) scale(1.05) !important;
    border-color: rgba(196, 92, 115, 0.8) !important;
}

/* =========================================
   【升级4】底部工具栏按钮独立配色（适配修仙风格）
========================================= */
/* 模组按钮 - 棕色系 */
div:has(textarea) button[aria-label*="模组"],
div:has(textarea) button[class*="module"] {
    border-left: 3px solid #b37d4e !important;
}

div:has(textarea) button[aria-label*="模组"]:hover,
div:has(textarea) button[class*="module"]:hover {
    background: linear-gradient(135deg, rgba(179, 125, 78, 0.2) 0%, rgba(179, 125, 78, 0.3) 100%) !important;
    border-left-color: #d9a677 !important;
    box-shadow: 0 4px 12px rgba(179, 125, 78, 0.3) !important;
}

/* 评论按钮 - 水蓝色系 */
div:has(textarea) button[aria-label*="评论"],
div:has(textarea) button[class*="comment"] {
    border-left: 3px solid #5c8b99 !important;
}

div:has(textarea) button[aria-label*="评论"]:hover,
div:has(textarea) button[class*="comment"]:hover {
    background: linear-gradient(135deg, rgba(92, 139, 153, 0.2) 0%, rgba(92, 139, 153, 0.3) 100%) !important;
    border-left-color: #7aabba !important;
    box-shadow: 0 4px 12px rgba(92, 139, 153, 0.3) !important;
}

/* 下载按钮 - 胭脂红系 */
div:has(textarea) button[aria-label*="下载"],
div:has(textarea) button[class*="download"] {
    border-left: 3px solid #c45c73 !important;
}

div:has(textarea) button[aria-label*="下载"]:hover,
div:has(textarea) button[class*="download"]:hover {
    background: linear-gradient(135deg, rgba(196, 92, 115, 0.2) 0%, rgba(196, 92, 115, 0.3) 100%) !important;
    border-left-color: #d97d95 !important;
    box-shadow: 0 4px 12px rgba(196, 92, 115, 0.3) !important;
}

/* 搜索按钮 - 褐红色系 */
div:has(textarea) button[aria-label*="搜索"],
div:has(textarea) button[class*="search"] {
    border-left: 3px solid #d97762 !important;
}

div:has(textarea) button[aria-label*="搜索"]:hover,
div:has(textarea) button[class*="search"]:hover {
    background: linear-gradient(135deg, rgba(217, 119, 98, 0.2) 0%, rgba(217, 119, 98, 0.3) 100%) !important;
    border-left-color: #e89885 !important;
    box-shadow: 0 4px 12px rgba(217, 119, 98, 0.3) !important;
}

/* 识别按钮 - 金褐色系 */
div:has(textarea) button[aria-label*="识别"],
div:has(textarea) button[class*="recognize"] {
    border-left: 3px solid #8b7355 !important;
}

div:has(textarea) button[aria-label*="识别"]:hover,
div:has(textarea) button[class*="recognize"]:hover {
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.2) 0%, rgba(139, 115, 85, 0.3) 100%) !important;
    border-left-color: #a89177 !important;
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.3) !important;
}

/* 坐标按钮 - 古铜绿系 */
div:has(textarea) button[aria-label*="坐标"],
div:has(textarea) button[class*="coordinate"] {
    border-left: 3px solid #6b8e7d !important;
}

div:has(textarea) button[aria-label*="坐标"]:hover,
div:has(textarea) button[class*="coordinate"]:hover {
    background: linear-gradient(135deg, rgba(107, 142, 125, 0.2) 0%, rgba(107, 142, 125, 0.3) 100%) !important;
    border-left-color: #88ab9d !important;
    box-shadow: 0 4px 12px rgba(107, 142, 125, 0.3) !important;
}

/* 存档按钮 - 朱红色系 */
div:has(textarea) button[aria-label*="存档"],
div:has(textarea) button[class*="save"],
div:has(textarea) button[aria-label*="导出"] {
    border-left: 3px solid #b34232 !important;
}

div:has(textarea) button[aria-label*="存档"]:hover,
div:has(textarea) button[class*="save"]:hover,
div:has(textarea) button[aria-label*="导出"]:hover {
    background: linear-gradient(135deg, rgba(179, 66, 50, 0.2) 0%, rgba(179, 66, 50, 0.3) 100%) !important;
    border-left-color: #d97762 !important;
    box-shadow: 0 4px 12px rgba(179, 66, 50, 0.3) !important;
}

/* 输入按钮 - 暖橙色系 */
div:has(textarea) button[aria-label*="输入"],
div:has(textarea) button[class*="input"] {
    border-left: 3px solid #d9a677 !important;
}

div:has(textarea) button[aria-label*="输入"]:hover,
div:has(textarea) button[class*="input"]:hover {
    background: linear-gradient(135deg, rgba(217, 166, 119, 0.2) 0%, rgba(217, 166, 119, 0.3) 100%) !important;
    border-left-color: #e8bc95 !important;
    box-shadow: 0 4px 12px rgba(217, 166, 119, 0.3) !important;
}

/* =========================================
   滚动条美化（修仙风格）
========================================= */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(179, 66, 50, 0.5) rgba(211, 196, 161, 0.3);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: linear-gradient(135deg, rgba(232, 220, 196, 0.3) 0%, rgba(211, 196, 161, 0.4) 100%);
    border-radius: 5px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.05);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(179, 66, 50, 0.6) 0%, rgba(217, 119, 98, 0.7) 100%);
    border-radius: 5px;
    border: 1px solid rgba(211, 196, 161, 0.3);
    box-shadow: 0 0 6px rgba(179, 66, 50, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(217, 119, 98, 0.8) 0%, rgba(196, 92, 115, 0.8) 100%);
    box-shadow: 0 0 12px rgba(179, 66, 50, 0.5);
}

*::-webkit-scrollbar-corner {
    background: rgba(232, 220, 196, 0.5);
}

/* =========================================
   响应式优化
========================================= */
@media (max-width: 768px) {
    .rili-markdown-renderer .x-tabs-container {
        gap: 8px;
    }
    
    .rili-markdown-renderer .x-tab {
        flex: 1 1 calc(50% - 8px);
    }
    
    textarea[placeholder*="消息"],
    textarea[placeholder*="输入"] {
        font-size: 14px !important;
    }
    
    div:has(textarea[placeholder*="消息"]) button,
    div:has(textarea[placeholder*="消息"]) div[role="button"] {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}

/* =========================================
   最终收尾
========================================= */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, 
.button, 
[role="button"] {
    will-change: transform, box-shadow;
}

/* 微信通讯录外层背景 */
.wx-box {
    background-color: #191919;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 居中时间戳 */
.wx-time {
    text-align: center;
    color: #888;
    font-size: 0.75em;
    margin-bottom: 5px;
}

/* 消息行基础容器 */
.wx-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

/* 玩家（右侧）专属反转布局 */
.wx-right {
    flex-direction: row-reverse;
}

/* 头像框（用首字母代替图片，防止图床裂开） */
.wx-avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}
.wx-left .wx-avatar { background-color: #555; margin-right: 12px; }
.wx-right .wx-avatar { background-color: #3b82f6; margin-left: 12px; }

/* 聊天气泡基础样式 */
.wx-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.95em;
    line-height: 1.5;
    word-break: break-word;
}

/* NPC气泡（左侧深灰） */
.wx-left .wx-bubble {
    background-color: #2c2c2c;
    color: #e5e5e5;
    border-top-left-radius: 2px;
}

/* 玩家气泡（右侧微信绿） */
.wx-right .wx-bubble {
    background-color: #05c160;
    color: #fff;
    border-top-right-radius: 2px;
}