/* 顶层容器 */
.sys-panel {
    background: #1a1410;
    color: #e0e0e0;
    font-family: 'Segoe UI', 'Microsoft YaHei', 'KaiTi', serif;
    padding: 15px;
    border: 3px double #8b7355;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    max-width: 800px;
    margin: 10px auto;
    --ygg-gold: #ffd700;
    --ygg-gold-dim: rgba(255, 215, 0, 0.5);
}

/* 基础系统区域 (兼容商店) */
.sys-sec {
    border: 1px solid #333;
    margin-bottom: 12px;
    background: #0d0d1a;
    overflow: hidden;
    border-radius: 8px;
}

.sys-sum {
    padding: 12px;
    background: linear-gradient(90deg, #132036, #172842);
    color: #00f3ff;
    cursor: pointer;
    font-weight: bold;
    list-style: none;
    border-bottom: 1px solid #00f3ff55;
    display: flex;
    align-items: center;
}

.sys-sum::before { content: '▶'; font-size: 11px; margin-right: 10px; transition: 0.3s; }
.sys-sec[open] .sys-sum::before { transform: rotate(90deg); }

/* 商店系统区域 - 保持科技感 */
.shop-box { background: #000; border: 1px solid #00f3ff; padding: 10px; }
.shop-header { display: flex; justify-content: space-between; background: #00f3ff; color: #000; padding: 5px 10px; font-weight: 900; font-size: 12px; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); }
.shop-label { color: #00f3ff; font-size: 12px; border-left: 3px solid #ff003c; padding-left: 8px; margin: 15px 0 8px; text-transform: uppercase; }
.inv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.inv-slot { height: 60px; border: 1px solid #333; background: #0a0a0a; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #666; position: relative; }

/* 悬浮窗特效 (纯CSS) */
.item-link { color: var(--ygg-gold); border-bottom: 1px dashed var(--ygg-gold-dim); cursor: help; position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.item-pop {
    visibility: hidden; opacity: 0; position: fixed;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 280px; z-index: 9999; transition: 0.2s; pointer-events: none;
}
.item-link:hover .item-pop { visibility: visible; opacity: 1; }
.pop-inner {
    display: block; background: #0a0a0c; border: 2px solid #87ceeb; /* 改为淡蓝色 */
    padding: 15px; box-shadow: 0 0 50px #000;
}
.pop-title { display: block; color: var(--ygg-gold); border-bottom: 1px solid #333; margin-bottom: 8px; font-family: 'Cinzel', serif; font-weight: bold; font-size: 14px; }
.pop-text { display: block; color: #ccc; font-size: 12px; line-height: 1.4; text-align: left; }

.item-card { background: #16213e; border: 1px solid #87ceeb; padding: 10px; margin-bottom: 8px; } /* 改为淡蓝色 */
.item-info { display: flex; justify-content: space-between; font-weight: bold; color: #fff; }
.item-price { color: #ffd700; }
.item-desc { font-size: 11px; color: #aaa; margin-top: 4px; }
.log-box { font-size: 11px; color: #555; padding: 8px; background: #050505; border: 1px inset #87ceeb; } /* 改为淡蓝色 */

/* =========== 深度暖色羊皮纸风格 (禁止淡色) =========== */

.sys-sec.ancient {
    background: #8b5a2b !important;
    border: 2px solid #5d4037 !important;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.5) !important;
}

.ancient-sum {
    background: linear-gradient(135deg, #4a301d 0%, #6b4423 100%) !important;
    color: #d4a574 !important;
    border-bottom: 2px solid #3d2817 !important;
    font-family: 'KaiTi', 'STKaiti', serif;
    padding: 14px 16px !important;
    text-shadow: 2px 2px 4px #000;
}

.ancient-sum::before { content: '📜' !important; filter: sepia(1) saturate(5); }

.ancient-cnt {
    background: #b08d57 !important; /* 深色羊皮纸底色 */
    background-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%) !important;
    color: #2b1d0e !important;
    padding: 20px;
    font-family: 'STKaiti', 'KaiTi', serif;
    border-top: 2px solid #5d4037;
}

/* 信息行样式 - 高对比深色 */
.ancient-cnt .info-row {
    border-bottom: 1px solid #8b5a2b;
    padding: 10px 0;
    display: flex;
}

.ancient-cnt .info-row span:first-child {
    font-weight: bold;
    color: #4a301d;
    min-width: 100px;
    text-shadow: 0.5px 0.5px 0 rgba(255,255,255,0.1);
}

/* NPC卡片 - 深色陈旧感 */
.ancient-npc {
    border: 2px solid #5d4037;
    padding: 15px;
    background: #a38b6d;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
    border-radius: 4px;
}

.npc-base { display: flex; justify-content: space-between; font-weight: bold; border-bottom: 2px solid #5d4037; padding-bottom: 6px; color: #3d2817; }
.npc-rel { margin: 10px 0; color: #5d4037; font-weight: 900; background: rgba(0,0,0,0.1); padding: 5px; border-radius: 3px; }
.npc-os { font-style: italic; color: #2b1d0e; background: #8b7355; padding: 10px; border-radius: 4px; border: 1px solid #5d4037; margin: 10px 0; }

/* 网格布局 - 深棕色色块 */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.info-grid span {
    background: #8b7355;
    color: #fff;
    padding: 8px;
    border: 1px solid #4a301d;
    font-size: 13px;
    border-radius: 3px;
    text-align: center;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* 简介区块 */
.npc-brief {
    background: #9d8565;
    border: 2px solid #5d4037;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 6px;
    color: #2b1d0e;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud span {
    background: #4a301d;
    color: #d4a574;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #2b1d0e;
}

/* 环境框 - 烧焦边缘感 */
.env-box {
    border: 3px double #4a301d;
    padding: 18px;
    background: #a38b6d;
    line-height: 2;
    font-weight: bold;
    color: #2b1d0e;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

/* 行动列表 - 沉重古朴感 */
.action-list {
    margin-top: 25px;
    background: #6b4423;
    border: 4px solid #3d2817;
    padding: 25px;
    border-radius: 12px;
    color: #d4a574;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.action-list ol { padding-left: 25px; }
.action-list li {
    margin: 15px 0;
    padding: 12px;
    border-radius: 6px;
    transition: 0.4s;
    cursor: pointer;
    background: #4a301d;
    border: 1px solid #3d2817;
    color: #d4a574;
    list-style-type: cjk-ideographic;
}

.action-list li:hover {
    background: #d4a574;
    color: #1a1410;
    transform: translateX(12px);
    box-shadow: -5px 0 15px #ffd70055;
}

/* 响应式适配 */
@media (max-width: 600px) {
    .info-grid { grid-template-columns: 1fr; }
    .inv-grid { grid-template-columns: 1fr 1fr; }
    .item-pop { width: 90%; }
}

/* =================================================================
   Ancient System Store Theme: Wanbao Pavilion
   穿越古代系统商店主题：万宝阁 · 天道系统
   核心配色：宣纸黄(正文) + 朱砂红(强调) + 玄色/古铜(装饰)
   ================================================================= */

/* --- 1. 顶部栏净化 (清除原版杂色) --- */
.sticky.w-full.top-0 [class*="bg-[#F1CBCB]"], 
.sticky.w-full.top-0 [class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 1. 顶部栏 (系统商店/天道界面风格) --- */
/* 顶部栏容器 - 模拟古代宫廷建筑的横梁与牌匾质感 */
.sticky.w-full.top-0.flex.items-center {
    /* 背景：玄色大理石质感 + 淡淡的古铜流光 */
    background: linear-gradient(90deg, #1a1a1a 0%, #2c2c2c 50%, #1a1a1a 100%) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 2px solid #b8860b !important; /* 古铜金边框 */
    box-shadow: 0 2px 15px rgba(184, 134, 11, 0.3) !important;
}

/* 模型名称 - 模拟【系统商店/万宝阁】的悬浮铭牌 */
#ai-model-selector .truncate.text-\[13px\] {
    color: #ffd700 !important; /* 纯金色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: bold !important;
    font-family: "Kaiti", "STKaiti", "Microsoft YaHei", serif !important; /* 楷体更具古风 */
    letter-spacing: 2px !important;
}

#ai-model-selector .truncate.text-\[13px\]::before {
    content: "【商店: "; /* 更改为古代系统商店前缀 */
    color: #ff4500 !important; /* 朱红 */
    text-shadow: 0 0 5px rgba(255, 69, 0, 0.4);
}

#ai-model-selector .truncate.text-\[13px\]::after {
    content: "】";
    color: #ff4500 !important;
    opacity: 0.9;
}

/* --- 2. 聊天气泡 (核心需求：穿越系统/宣纸感) --- */
.bg-gray-100\/90.relative.inline-block {
    /* 背景：宣纸淡黄色底色 */
    background: #fdf5e6 !important; 
    /* 边框：古籍装订感或木质边框 */
    border: 1px solid #d2b48c !important; 
    border-radius: 4px !important; /* 方正风格，更像古籍或系统面板 */
    /* 阴影：模拟纸张叠加的厚度感 */
    box-shadow: 
        3px 3px 10px rgba(0, 0, 0, 0.1), 
        inset 0 0 40px rgba(210, 180, 140, 0.1) !important;
    color: #2c2c2c !important; /* 墨黑色，保证阅读清晰度 */
    position: relative;
}

/* 气泡文字 */
.bg-gray-100\/90.relative.inline-block .markdown-body {
    color: #1a1a1a !important; /* 浓墨色 */
    font-family: "SimSun", "STSong", serif !important; /* 宋体/宣纸感 */
    line-height: 1.8 !important;
}

/* 强调文字 (朱砂/印章风格) */
.bg-gray-100\/90.relative.inline-block .markdown-body strong {
    /* 朱砂红，像古籍中的批注或印章 */
    color: #b22222 !important; 
    background-color: rgba(178, 34, 34, 0.05);
    padding: 0 2px;
    border-bottom: 1px double #b22222;
    font-weight: 900 !important;
}

/* 代码块背景适配 (竹简/墨池风格) */
.bg-gray-100\/90.relative.inline-block pre {
    background-color: #f5f5dc !important; /* 浅米色，类似竹简 */
    border: 1px solid #8b4513 !important; /* 棕色边框 */
    color: #3e2723 !important;
}

/* --- 3. 按钮组 (令牌/玉佩风格) --- */
/* 顶部功能按钮 - 模拟古代令牌或玉石质感 */
#ai-mod-button2 button.MuiButton-root,
#header-setting-button {
    background: linear-gradient(135deg, #2e7d32, #1b5e20) !important; /* 玉石深绿 */
    color: #ffffff !important; /* 白色文字 */
    border: 1px solid #a5d6a7 !important;
    border-bottom: 2px solid #003300 !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover,
#header-setting-button:hover {
    background: linear-gradient(135deg, #b22222, #8b0000) !important; /* 悬停变为朱红令牌 */
    color: #ffd700 !important; /* 文字变金 */
    border-color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important;
}

/* 分页按钮 */
.MuiPaginationItem-root.Mui-selected {
    background-color: #b8860b !important; /* 古铜金选中态 */
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(184, 134, 11, 0.6) !important;
}

/* --- 4. 底部输入框 (砚台/文房四宝风格) --- */
#ai-chat-input {
    background-color: #fcfaf2 !important; /* 浅黄色宣纸底 */
    color: #1a1a1a !important; /* 墨黑文字 */
    border: 1px solid #d2b48c !important;
    border-left: 4px solid #b22222 !important; /* 左侧朱红装饰条 */
    border-radius: 0px !important;
}
#ai-chat-input:focus {
    box-shadow: 0 0 10px rgba(178, 34, 34, 0.2) !important;
    border-color: #b22222 !important; /* 聚焦时亮起朱红 */
    background-color: #ffffff !important;
}
#ai-chat-input::placeholder {
    color: rgba(139, 69, 19, 0.5) !important; /* 棕色占位符 */
}

/* --- 6. 评论区 (系统基座/古建风格) --- */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(to top, #f5f5dc, #fdf5e6) !important; /* 宣纸渐变 */
    border-top: 2px solid #d2b48c !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.cursor-pointer.group.flex.items-center.justify-center {
    background: linear-gradient(135deg, #b8860b, #8b4513) !important; /* 铜制发送按钮 */
    box-shadow: 0 2px 5px rgba(139, 69, 19, 0.3) !important;
}

/* --- 7. 系统日志文字注入 (天道系统版) --- */
.system-log-1 .loading-text::before { content: '【天道】 正在开启位面商店连接...' !important; }
.system-log-2 .loading-text::before { content: '【系统】 正在鉴定宿主资质与因果...' !important; }

/* 隐藏原有的三个加载圆点 */
#ai-chat-answer .chat-answer-container .style_dot-flashing__8L91Q {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* --- 加载动画：大启阵法自旋转优化版 --- */

/* 容器：保持居中与高度，确保自转轴心稳定 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
    margin: 15px auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* 法阵图标：通过CSS animation实现精准自旋转 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    width: 45px !important;
    height: 45px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    /* 静态精美法阵SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23d4af37' stroke-width='3' d='M50 10 L60 35 L85 35 L65 55 L75 80 L50 65 L25 80 L35 55 L15 35 L40 35 Z'/%3E%3Ccircle cx='50' cy='50' r='12' fill='none' stroke='%23d4af37' stroke-width='2'/%3E%3Cpath fill='none' stroke='%23d4af37' stroke-width='1' d='M50 5 A45 45 0 1 1 49.9 5' stroke-dasharray='4,4'/%3E%3C/svg%3E") !important;
    /* 核心修改：自旋转动画 */
    animation: rotate-center 5s linear infinite !important;
    transform-origin: center center !important;
}

/* 提示文字：下方附带呼吸效果的描述 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: "正在窥探天机..." !important;
    position: absolute !important;
    bottom: -20px !important;
    width: 150px !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #d4af37 !important;
    letter-spacing: 2px !important;
    font-family: "STKaiti", "KaiTi", serif !important;
    animation: blink-text 2s ease-in-out infinite !important;
    white-space: nowrap !important;
}

/* 自旋转关键帧 */
@keyframes rotate-center {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 文字呼吸关键帧 */
@keyframes blink-text {
    0%, 100% { opacity: 0.3; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1); }
}

/* 移动端适配：缩小比例以防遮挡 */
@media (max-width: 480px) {
    .flex.items-center.justify-center.w-6.h-5 {
        transform: scale(0.85) !important;
        margin: 10px auto !important;
    }
}

.coser-panel {
  margin: 12px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}

.coser-panel summary {
  padding: 14px 20px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  transition: all 0.25s ease !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.coser-panel summary::-webkit-details-marker {
  display: none !important;
}

.coser-panel summary::before {
  content: "▶" !important;
  font-size: 10px !important;
  transition: transform 0.25s ease !important;
}

.coser-panel[open] summary::before {
  transform: rotate(90deg) !important;
}

.coser-panel > :not(summary) {
  padding: 18px 20px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}