/* ═══ B平台加载动画适配（自动注入）═══ */
.flex.items-center.justify-center.size-6 { opacity: 1 !important; }
.flex.items-center.justify-center.size-6 > .flex.gap-2 { display: none !important; }
.is-assistant.w-fit { width: 100% !important; }
.is-assistant > .border.border-muted:has(.flex.items-center.justify-center.size-6) {
  width: 100% !important; background: transparent !important;
  border: none !important; padding: 0 !important;
}
.is-assistant .space-y-3:has(.flex.items-center.justify-center.size-6) {
  display: flex; justify-content: center; width: 100%;
}

/* ═══ B平台表格修正（自动注入）═══ */
.rili-markdown-renderer table { display:table!important; table-layout:auto!important; width:100%!important; border-collapse:collapse!important; }
.rili-markdown-renderer table caption { display:table-caption!important; caption-side:top!important; text-align:center!important; padding:8px!important; }
.rili-markdown-renderer thead { display:table-header-group!important; }
.rili-markdown-renderer tbody { display:table-row-group!important; }
.rili-markdown-renderer tr { display:table-row!important; }
.rili-markdown-renderer th, .rili-markdown-renderer td { display:table-cell!important; }

/* ═══ B平台按钮组保护（自动注入 — 防止按钮消失）═══
   原理：B平台消息操作按钮结构为：
   .flex.items-center.gap-1.ml-auto (hover显隐包装)
     └── .bg-muted.rounded.flex.p-0.5 (按钮组容器)
           └── button.rounded-full.size-7 (单个按钮)
   以下规则使用高specificity + !important确保按钮
   不被任何转换后/透传的CSS规则意外隐藏
   ═══════════════════════════════════════════════ */
/* 按钮组容器保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5,
.is-user .bg-muted.rounded.flex.p-0\.5,
.is-assistant .bg-muted.rounded.flex.p-0\.5 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}
/* 单个按钮保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5 > button,
.is-user .bg-muted.rounded.flex.p-0\.5 > button,
.is-assistant .bg-muted.rounded.flex.p-0\.5 > button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  clip: auto !important;
  clip-path: none !important;
}
/* hover显隐包装层保护 — 仅保留B平台原生的opacity过渡 */
.flex.items-center.gap-1.ml-auto.md\:opacity-0.group-hover\:opacity-100 {
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
/* 操作行保护 */
.flex.w-full.items-center.justify-between.gap-2.px-2 {
  display: flex !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* ═══ B平台顶部栏适配说明（自动注入）═══
   A: div.sticky > div.flex.justify-between
      ├── 左侧空区
      ├── #ai-model-selector (居中)
      └── 右侧工具(设置按钮等)
   B: <header.flex.justify-between>
      ├── #nav-left (侧边栏开关)
      ├── #nav-middle (可能为空)
      └── #nav-right (通知/主题/语言)
   B平台模型按钮不在header内，选择器:
   button:has(> .flex-1.truncate.text-left)
   ═══════════════════════════════════════ */
header.flex.justify-between { position: relative; overflow: visible; }

/* --- 移除顶部默认颜色装饰条 --- */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 统一聊天框美化 (输入与输出) --- */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted {
    background-color: #FFFBF5 !important; /* surface color */
    border: 1.5px solid #E5DED0 !important; /* border color */
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(200, 164, 92, 0.08) !important; /* subtle gold glow */
    padding: 4px !important;
    transition: all 0.3s ease !important;
    isolation: isolate !important;
}

/* 悬停时边框略微加深 */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted:hover {
    border-color: #C8A45C !important; /* gold accent */
    box-shadow: 0 6px 24px rgba(200, 164, 92, 0.12) !important;
}

/* --- 正文文字样式 --- */
.rili-markdown-renderer {
    color: #2C2416 !important; /* deep brown text */
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif !important;
    line-height: 1.6 !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 强调文字 */
.rili-markdown-renderer strong {
    color: #C8A45C !important;
    font-weight: bold !important;
}

/* --- 底部附加元素 (按钮、模型名、Token) --- */
/* 统一设置底部文字与按钮颜色 */
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7,
.flex.items-center.gap-2.text-xs.font-mono.text-muted-foreground,
/* [Token消耗hover逻辑转换未启用]
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7,
.flex.items-center.gap-2.text-xs.font-mono.text-muted-foreground,
.text-orange-500 {
    color: #C8A45C !important; /* 使用金色作为辅助色 */
    opacity: 0.85 !important;
    transition: opacity 0.2s !important;
}
*/

.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7{
    background-color: rgba(200, 164, 92, 0.05) !important;
    opacity: 1 !important;
}

/* --- 自定义加载动画 (SMIL SVG) --- */
/* 隐藏默认加载圆点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 在容器上创建自定义金色脉冲动画 */
.flex.items-center.justify-center.size-6 {
    position: relative !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* 使用SMIL内联SVG，确保在CSS动画禁用时依然有效 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='12' r='3' fill='%23C8A45C'%3E%3Canimate attributeName='opacity' dur='1s' values='0;.5;1;.5;0' repeatCount='indefinite' begin='0.1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3' fill='%23C8A45C'%3E%3Canimate attributeName='opacity' dur='1s' values='0;.5;1;.5;0' repeatCount='indefinite' begin='0.2'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3' fill='%23C8A45C'%3E%3Canimate attributeName='opacity' dur='1s' values='0;.5;1;.5;0' repeatCount='indefinite' begin='0.3'/%3E%3C/circle%3E%3C/svg%3E") !important;
}

/* --- 移动端适配 --- */
@media (max-width: 480px) {
    .is-user > .border.border-muted,
.is-assistant > .border.border-muted {
        max-width: 95% !important;
        border-radius: 12px !important;
    }
}

/* --- 减弱动态效果 (针对系统开启减弱动画的用户) --- */
@media (prefers-reduced-motion: reduce) {
    .is-user > .border.border-muted,
.is-assistant > .border.border-muted {
        transition: none !important;
    }
}
/* --- 顶部栏美化：淡金丝绸质感 --- */
header.flex.justify-between {
    background: linear-gradient(to bottom, #E8D5B0, #F2E8D5) !important;
    box-shadow: 0 2px 10px rgba(232, 213, 176, 0.3) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 模型选择器文字与图标 */
#nav-middle button:has(> .flex-1.truncate.text-left) .flex-1.truncate.text-left::placeholder,
#nav-middle button:has(> .flex-1.truncate.text-left) .flex-1.truncate.text-left, 
#nav-right button svg,
header.flex.justify-between.w-full.top-0 svg {
    color: #5C4B37 !important; /* 深咖色确保可读性 */
}

#nav-middle .group.flex.items-center {
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    padding: 2px 8px !important;
    transition: all 0.3s ease !important;
}

#nav-middle .group.flex.items-center:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* --- 开场白选择器：精致金边 --- */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    border: 1.5px solid #E8D5B0 !important;
    transition: all 0.3s ease !important;
    background-color: #FFFEFC !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    box-shadow: 0 0 8px rgba(232, 213, 176, 0.6) !important;
    transform: translateY(-1px) !important;
}

/* --- 按钮栏：磨砂金质感 --- */
#ai-mod-button2 button.MuiButton-root {
    background-color: #E8D5B0 !important;
    color: #5C4B37 !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    background-color: #DBC599 !important; /* 略深的金色反馈 */
    filter: brightness(1.05) !important;
}

/* --- 底部输入栏：柔和光晕 --- */
#ai-chat-bottom-input {
    border: 2px solid #E8D5B0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 -2px 10px rgba(232, 213, 176, 0.1) !important;
}

#ai-chat-input::placeholder {
    color: #A89878 !important;
}

#ai-chat-input::selection {
    background-color: #E8D5B0 !important;
    color: #5C4B37 !important;
}

/* --- 分页栏：极简金点 --- */
.MuiPaginationItem-root.Mui-selected {
    background-color: #E8D5B0 !important;
    color: #5C4B37 !important;
    font-weight: bold !important;
}

.MuiPaginationItem-root:hover {
    background-color: rgba(232, 213, 176, 0.3) !important;
}

/* --- 评论区：象牙金典雅风格 --- */
/* 背景容器：使用极浅的米色背景配合金色边框 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-color: #FFFEFC !important;
    border-top: 3px solid #E8D5B0 !important;
}

/* 评论输入框 */
textarea.rc-textarea {
    border: 1px solid #E8D5B0 !important;
    border-radius: 8px !important;
    background-color: #FFFEFC !important;
}

textarea.rc-textarea:focus {
    box-shadow: 0 0 0 2px rgba(232, 213, 176, 0.4) !important;
    outline: none !important;
}

/* 发送按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background-color: #E8D5B0 !important;
    border-radius: 50% !important;
    padding: 8px !important;
}

/* 选中的星星 */
span.MuiRating-iconFilled svg {
    color: #DBC599 !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary {
    background-color: #E8D5B0 !important;
    color: #5C4B37 !important;
}

button.MuiButton-outlinedPrimary {
    border-color: #E8D5B0 !important;
    color: #A89878 !important;
}

/* 评论分割线 */
div.style_divider__mW0YX {
    background-color: rgba(232, 213, 176, 0.3) !important;
}

/* 用户名与标签 */
div.text-sm.text-grey-600 span.font-bold {
    color: #5C4B37 !important;
}

span.text-\[10px\] {
    background-color: #E8D5B0 !important;
    color: #5C4B37 !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
}

@keyframes gold-glow {
    0% { box-shadow: 0 0 5px rgba(232, 213, 176, 0.2); }
    50% { box-shadow: 0 0 15px rgba(232, 213, 176, 0.5); }
    100% { box-shadow: 0 0 5px rgba(232, 213, 176, 0.2); }
}
#nav-middle .group.flex.items-center {
    animation: gold-glow 3s infinite ease-in-out;
}

#ai-chat-bottom-input:focus-within {
    border-color: #DBC599 !important;
    background-color: #FFFEFC !important;
}
/* ============================================================
   DETAILS/SUMMARY 折叠面板美化 — 适配金色主题
   追加到你现有的 CSS 末尾即可
   ============================================================ */

/* --- 根级 details 容器：金边卡片 --- */
.rili-markdown-renderer > details,
.rili-markdown-renderer details {
    background: #FFFBF5 !important;
    border: 1.5px solid #E5DED0 !important;
    border-radius: 12px !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    box-shadow: 0 2px 12px rgba(200, 164, 92, 0.06) !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}
.rili-markdown-renderer details:hover {
    border-color: #DBC599 !important;
    box-shadow: 0 4px 16px rgba(200, 164, 92, 0.10) !important;
}
/* 展开状态：金色微光 */
.rili-markdown-renderer details[open] {
    border-color: #C8A45C !important;
    box-shadow: 0 4px 20px rgba(200, 164, 92, 0.12) !important;
}

/* --- summary 标题栏：金色渐变条 --- */
.rili-markdown-renderer details > summary {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #F2E8D5 0%, #FDF6EC 100%) !important;
    border-bottom: 1px solid #E8D5B0 !important;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #5C4B37 !important;
    letter-spacing: 0.3px !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}
.rili-markdown-renderer details > summary:hover {
    background: linear-gradient(135deg, #E8D5B0 0%, #FDF6EC 100%) !important;
    color: #3D2E1A !important;
}
.rili-markdown-renderer details[open] > summary {
    background: linear-gradient(135deg, #E8D5B0 0%, #FDF6EC 100%) !important;
    border-bottom-color: #C8A45C !important;
}

/* 隐藏默认三角标记，用自定义图标 */
.rili-markdown-renderer details > summary::-webkit-details-marker { display: none !important; }
.rili-markdown-renderer details > summary::marker { display: none !important; content: "" !important; }

/* 前置展开/折叠箭头 */
.rili-markdown-renderer details > summary::before {
    content: "▸" !important;
    display: inline-block !important;
    margin-right: 8px !important;
    font-size: 12px !important;
    color: #C8A45C !important;
    transition: transform 0.25s ease !important;
    flex-shrink: 0 !important;
}
.rili-markdown-renderer details[open] > summary::before {
    transform: rotate(90deg) !important;
}

/* summary 后置装饰小图标（可选，按标题内容上色） */
.rili-markdown-renderer details > summary::after {
    content: "" !important;
    margin-left: auto !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #C8A45C !important;
    opacity: 0.6 !important;
    flex-shrink: 0 !important;
}

/* --- 不同模块 summary 差异化主题色 --- */
/* 📍 场景 */
.rili-markdown-renderer details:nth-of-type(1) > summary {
    border-left: 3px solid #C8A45C !important;
}
/* 👤 主角信息 */
.rili-markdown-renderer details:nth-of-type(2) > summary {
    border-left: 3px solid #B8956A !important;
}
/* 🎭 场景人物 */
.rili-markdown-renderer details:nth-of-type(3) > summary {
    border-left: 3px solid #D4A574 !important;
}
/* 🌍 世界动态 */
.rili-markdown-renderer details:nth-of-type(4) > summary {
    border-left: 3px solid #A8C8A0 !important;
}
/* 🧠 记忆区 */
.rili-markdown-renderer details:nth-of-type(5) > summary {
    border-left: 3px solid #9BA4B5 !important;
}
/* 🎯 行动指引 */
.rili-markdown-renderer details:nth-of-type(6) > summary {
    border-left: 3px solid #D4A574 !important;
}

/* --- details 内部内容区 --- */
.rili-markdown-renderer details > *:not(summary) {
    padding: 12px 16px !important;
}

/* --- 内部嵌套 details（如 NPC 子项）--- */
.rili-markdown-renderer details details {
    margin: 8px 0 !important;
    border-color: #E5DED0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #FFFEFC !important;
}
.rili-markdown-renderer details details > summary {
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6B5D4F !important;
    background: linear-gradient(135deg, #FDF6EC 0%, #FFFEFC 100%) !important;
    border-bottom: 1px solid #F2E8D5 !important;
}
.rili-markdown-renderer details details > summary::before {
    font-size: 10px !important;
    color: #D4A574 !important;
}
.rili-markdown-renderer details details[open] > summary {
    background: linear-gradient(135deg, #F2E8D5 0%, #FFFEFC 100%) !important;
    color: #5C4B37 !important;
}
.rili-markdown-renderer details details > *:not(summary) {
    padding: 8px 14px !important;
}

/* --- 表格美化（记忆区等）--- */
.rili-markdown-renderer details table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
    margin: 8px 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.rili-markdown-renderer details table thead {
    background: linear-gradient(135deg, #F2E8D5, #E8D5B0) !important;
}
.rili-markdown-renderer details table thead th {
    padding: 8px 12px !important;
    color: #5C4B37 !important;
    font-weight: 600 !important;
    text-align: left !important;
    border-bottom: 2px solid #DBC599 !important;
}
.rili-markdown-renderer details table tbody td {
    padding: 8px 12px !important;
    color: #2C2416 !important;
    border-bottom: 1px solid #F2E8D5 !important;
    vertical-align: top !important;
}
.rili-markdown-renderer details table tbody tr:hover {
    background-color: #FFFEF8 !important;
}
.rili-markdown-renderer details table tbody tr:nth-child(even) {
    background-color: #FFFDF8 !important;
}

/* --- 列表美化 --- */
.rili-markdown-renderer details ul,
.rili-markdown-renderer details ol {
    padding-left: 20px !important;
    margin: 6px 0 !important;
}
.rili-markdown-renderer details li {
    color: #2C2416 !important;
    line-height: 1.7 !important;
    margin: 3px 0 !important;
}
.rili-markdown-renderer details li::marker {
    color: #C8A45C !important;
}

/* --- 分隔线 --- */
.rili-markdown-renderer details hr {
    border: none !important;
    border-top: 1px solid #F2E8D5 !important;
    margin: 10px 0 !important;
}

/* --- NPC 子项特殊标签（好感度、种族能力等加粗字段）--- */
.rili-markdown-renderer details details strong {
    color: #B8956A !important;
    font-weight: 600 !important;
}

/* --- 占位符样式 --- */
.rili-markdown-renderer details .placeholder,
.rili-markdown-renderer details em:contains("placeholder") {
    color: #A89878 !important;
    font-style: italic !important;
    opacity: 0.7 !important;
}

/* --- 移动端适配 --- */
@media (max-width: 480px) {
    .rili-markdown-renderer details {
        border-radius: 8px !important;
        margin: 8px 0 !important;
    }
    .rili-markdown-renderer details > summary {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    .rili-markdown-renderer details > *:not(summary) {
        padding: 8px 12px !important;
    }
    .rili-markdown-renderer details table {
        font-size: 11px !important;
    }
    .rili-markdown-renderer details table thead th,
    .rili-markdown-renderer details table tbody td {
        padding: 6px 8px !important;
    }
}

/* --- 减弱动画 --- */
@media (prefers-reduced-motion: reduce) {
    .rili-markdown-renderer details {
        transition: none !important;
    }
    .rili-markdown-renderer details > summary::before {
        transition: none !important;
    }
}