/* ═══════════════════════════════════════════════════════════
   沈家名媛录 · 六只蝴蝶 — 全平台CSS（合并最终版）
   颜色：金 #b3935a / 亮金 #d4b98c / 玫瑰 #c4827a / 浅玫瑰 #e8b4ae
   字体：Noto Serif SC, STSong, Songti SC
   包含：B平台适配 + 聊天框美化 + 顶栏/底栏/评论区 + 状态面板
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   PART A: 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%;
}
/* 表格修正 */
.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; }
/* 按钮保护 */
.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;
}
.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;
}
header.flex.justify-between { position: relative; overflow: visible; }

/* ═══════════════════════════════════════════════════════════
   PART B: 聊天框美化
   ═══════════════════════════════════════════════════════════ */
/* B-1: 隐藏顶部颜色装饰条 */
[class*="bg-[#F1CBCB]"],[class*="bg-[#c9e1e9]"]{display:none !important}

/* B-2: 统一聊天框 */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted{
  background:linear-gradient(135deg,#faf7f2 0%,#fffcf8 50%,#fdf8f3 100%) !important;
  border:1.5px solid rgba(179,147,90,.25) !important;
  border-radius:10px !important;
  box-shadow:4px 4px 0 #d4b98c,0 3px 15px rgba(179,147,90,.08) !important;
  margin-bottom:16px !important;
  overflow:visible !important;
  transition:all .3s ease !important;
  position:relative !important;
}
.is-assistant > .border.border-muted::before{
  content:"";position:absolute;top:-1px;left:20px;right:20px;height:2px;
  background:linear-gradient(90deg,transparent,#e8b4ae,#d4b98c,#e8b4ae,transparent) !important;
  border-radius:2px;
}
.is-user > .border.border-muted:hover,
.is-assistant > .border.border-muted:hover{
  box-shadow:5px 5px 0 #b3935a,0 6px 20px rgba(179,147,90,.12) !important;
  transform:translateY(-1px) !important;
}

/* B-3: 用户输入框单独 */
.is-user > .border.border-muted{
  border-color:#d4b98c !important;
  box-shadow:4px 4px 0 #d4b98c,0 3px 15px rgba(179,147,90,.08) !important;
}

/* B-4: 文本内容 */
.rili-markdown-renderer{
  color:#3d3228 !important;
  font-family:'Noto Serif SC','STSong','Songti SC',serif !important;
  line-height:1.8 !important;
}

/* B-5: 底部操作按钮 */
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7{
  color:#c4827a !important; border-radius:6px !important; transition:all .3s ease !important;
}
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7:hover{
  background:rgba(196,130,122,.08) !important; transform:scale(1.05) !important;
}

/* B-6: 模型名称 */
.flex.items-center.gap-2.text-xs.font-mono.text-muted-foreground{
  color:#e8b4ae !important; font-size:11px !important; font-weight:600 !important;
}

/* B-8: 加载动画替换 */
.flex.items-center.justify-center.size-6 > .flex.gap-2{display:none !important}
.flex.items-center.justify-center.size-6::after{
  content:"";display:inline-block;width:20px;height:20px;
  border:2px solid rgba(196,130,122,.25);border-top-color:#c4827a;border-radius:50%;
  animation:zn-spin .8s linear infinite;
}
@keyframes zn-spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════
   PART C: 界面美化（顶栏 / 底栏 / 评论区）
   ═══════════════════════════════════════════════════════════ */
/* C-1: 顶部栏 */
header.flex.justify-between{
  background:linear-gradient(90deg,#faf7f2,#fdf8f3,#fdf5f0) !important;
  backdrop-filter:blur(12px) !important;
  border-bottom:2px solid rgba(196,130,122,.25) !important;
  box-shadow:0 3px 12px rgba(179,147,90,.06) !important;
  position:relative !important;
}
header.flex.justify-between::after{
  content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,#c4827a,#e8b4ae,#d4b98c,#e8b4ae,#c4827a);
  background-size:200% 100%;animation:zn-shimmer 4s ease infinite;
}
@keyframes zn-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* C-2: 模型选择器 */
#nav-middle .group.flex.items-center,
button:has(> .flex-1.truncate.text-left){
  background:rgba(196,130,122,.06) !important; border-radius:8px !important;
  padding:4px 8px !important; transition:all .3s ease !important;
}
#nav-middle .group.flex.items-center:hover,
button:has(> .flex-1.truncate.text-left):hover{background:rgba(196,130,122,.12) !important}
#nav-middle button:has(> .flex-1.truncate.text-left) .flex-1.truncate.text-left,
button:has(> .flex-1.truncate.text-left) .flex-1.truncate.text-left{color:#c4827a !important;font-weight:700 !important}

/* C-3: 设置按钮 */
#nav-right button{color:#c4827a !important; transition:all .3s ease !important}
#nav-right button:hover{transform:rotate(30deg) !important; color:#e8b4ae !important}

/* C-5: 底部输入栏 */
.bg-gradient-to-t{background:linear-gradient(to top,#faf7f2,rgba(250,247,242,.8),transparent) !important}
#ai-chat-bottom-input{
  background:#FFFFFF !important;
  border:2px solid rgba(196,130,122,.25) !important;
  border-radius:12px !important;
  box-shadow:3px 3px 0 #d4b98c,0 2px 8px rgba(179,147,90,.06) !important;
  transition:all .3s cubic-bezier(.175,.885,.32,1.275) !important;
}
#ai-chat-bottom-input:focus-within{
  border-color:#c4827a !important;
  box-shadow:4px 4px 0 #b3935a,0 4px 16px rgba(179,147,90,.1) !important;
  transform:translateY(-2px) !important;
}
#ai-chat-input{
  color:#3d3228 !important;
  font-family:'Noto Serif SC','STSong','Songti SC',serif !important;
  font-size:14px !important;
}
#ai-chat-input::placeholder{color:#8a7e72 !important;font-style:italic !important}
#ai-chat-input::selection{background:rgba(196,130,122,.2) !important;color:#3d3228 !important}

/* C-6: 分页栏 */
.MuiPaginationItem-root{color:#c4827a !important;border-color:rgba(196,130,122,.25) !important;transition:all .3s ease !important}
.MuiPaginationItem-root:hover{background:rgba(196,130,122,.08) !important}
.MuiPaginationItem-root.Mui-selected{background:linear-gradient(135deg,#c4827a,#e8b4ae) !important;color:#FFF !important;border-color:transparent !important}
.MuiPaginationItem-root.Mui-disabled{color:#DDD !important}
.MuiPaginationItem-icon{color:#c4827a !important}
.MuiInputBase-input{border:1px solid rgba(196,130,122,.25) !important;border-radius:4px !important;color:#c4827a !important}

/* C-7: 评论区 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"]{background:linear-gradient(180deg,#faf7f2,#fdf8f3) !important}
div.text-lg.font-bold{color:#c4827a !important}
span.MuiRating-iconEmpty svg{color:rgba(196,130,122,.15) !important}
span.MuiRating-iconFilled svg{color:#d4b98c !important}
div.flex.flex-col.border-gray-200{border-color:rgba(196,130,122,.25) !important}
textarea.rc-textarea{
  background:#fffcf8 !important; border:1px solid rgba(196,130,122,.25) !important;
  border-radius:8px !important; color:#3d3228 !important; font-size:13px !important;
}
textarea.rc-textarea:focus{border-color:#c4827a !important;box-shadow:0 0 0 2px rgba(196,130,122,.1) !important}
div.bg-gray-100.text-gray-500{background:rgba(196,130,122,.06) !important;color:#c4827a !important}
div.cursor-pointer.group.flex.items-center.justify-center{color:#c4827a !important;transition:all .3s ease !important}
div.cursor-pointer.group.flex.items-center.justify-center:hover{transform:scale(1.1) !important}
div.style_divider__mW0YX{background:rgba(196,130,122,.25) !important}
button.MuiButton-containedPrimary{background:linear-gradient(135deg,#c4827a,#e8b4ae) !important;color:#FFF !important;border:none !important;border-radius:16px !important}
button.MuiButton-outlinedPrimary{color:#c4827a !important;border-color:rgba(196,130,122,.25) !important;border-radius:16px !important}
button.MuiButton-outlinedPrimary:hover{background:rgba(196,130,122,.08) !important}
div.p-3.overflow-y-auto{scrollbar-width:thin !important;scrollbar-color:#e8b4ae transparent !important}
div.group.ml-0{border-radius:6px !important;transition:background .2s !important}
div.group.ml-0:hover{background:#faf7f2 !important}
div.group img.rounded-full{border:2px solid rgba(196,130,122,.25) !important}
div.text-sm.text-grey-600 span.font-bold{color:#c4827a !important}
span.text-\[10px\]{color:#e8b4ae !important;background:rgba(196,130,122,.06) !important;border-radius:4px !important;padding:0 3px !important}
div.break-all{color:#3d3228 !important;line-height:1.7 !important}
div.text-xs.text-grey-600{color:#BBB !important}
button.text-gray-400{color:#e8b4ae !important;transition:color .2s !important}
button.text-gray-400:hover{color:#c4827a !important}
button.text-gray-400 svg{transition:transform .2s !important}
button.text-gray-400:hover svg{transform:scale(1.2) !important}
span.cursor-pointer{color:#c4827a !important;font-weight:600 !important}
span.cursor-pointer:hover{text-decoration:underline !important}
div.ml-8.border-l{border-color:rgba(196,130,122,.25) !important}

/* ═══════════════════════════════════════════════════════════
   PART D: 状态栏美化（Details/Summary 折叠面板）
   通用基础样式 — 不包含 emoji/nth-of-type 特定面板
   各面板的 emoji 前缀请自行按场景追加
   ═══════════════════════════════════════════════════════════ */

/* ── 面板整体容器 ── */
details{
  background:#fffcf8;
  border:1.5px solid rgba(179,147,90,.22);
  border-radius:12px;
  margin-bottom:12px;
  box-shadow:0 2px 16px rgba(80,60,30,.06);
  overflow:auto;
  animation:zn-fade-in .5s ease both;
  transition:all .35s ease;
}
details:hover{
  border-color:#d4b98c;
  box-shadow:0 4px 24px rgba(80,60,30,.10);
  transform:translateY(-1px);
}
details[open]{
  border-color:rgba(179,147,90,.35);
  padding-bottom:6px;
}

/* ── 标题栏（通用）── */
summary{
  padding:12px 18px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(105deg,#faf7f2 0%,#fdf8f3 60%,#faf5f0 100%);
  border-bottom:1.5px solid transparent;
  font-size:13.5px;
  color:#4a3020;
  letter-spacing:.04em;
  transition:all .3s ease;
  user-select:none;
  font-family:'Noto Serif SC','STSong','Songti SC',serif;
}
summary::-webkit-details-marker{display:none}
details[open]>summary{
  border-bottom-color:rgba(196,130,122,.18);
  color:#5a3e2b;
  background:linear-gradient(105deg,#fdf8f3 0%,#faf3ec 100%);
}

/* ── 内容通用 ── */
details>p,details>div,details>ul,details details>p,details details>div{
  padding:14px 18px;
  font-size:13px;
  line-height:1.85;
  color:#3d3228;
  animation:zn-fade-in .35s ease;
  font-family:'Noto Serif SC','STSong','Songti SC',serif;
}

/* ── NPC子卡（嵌套details）── */
details details{
  border:1.5px solid rgba(196,130,122,.15);
  border-radius:10px;
  box-shadow:2px 2px 0 rgba(196,130,122,.1),0 1px 6px rgba(80,60,30,.04);
  margin:8px 6px;
  background:#fffdf9;
}
details details:hover{
  border-color:#e8b4ae;
  box-shadow:3px 3px 0 rgba(196,130,122,.15),0 2px 10px rgba(80,60,30,.06);
}
details details>summary{
  font-size:12.5px;
  padding:10px 14px;
  background:linear-gradient(105deg,rgba(196,130,122,.03) 0%,#fdf8f3 100%);
  font-weight:500;
  color:#4a3020;
}
details details[open]>summary{
  border-bottom-color:rgba(196,130,122,.12);
  color:#c4827a;
}
details details>p,details details>div{
  font-size:12.5px;
  line-height:1.8;
  padding:10px 14px;
}

/* ── 三级嵌套（NPC属性子项，左金条）── */
details details details{
  border-left:3px solid #d4b98c;
  border-radius:0 8px 8px 0;
  margin:4px 0 4px 8px;
  box-shadow:1px 1px 0 rgba(179,147,90,.06);
  background:#fffdf6;
}
details details details>summary{
  font-size:11.5px;
  padding:8px 12px;
  background:linear-gradient(105deg,rgba(212,185,140,.04),#fdf8f0);
  color:#5a3e2b;
}

/* ── 表格 ── */
details table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  border-radius:0 0 8px 8px;
  overflow:hidden;
  table-layout:auto;
}
details table thead,
details table tbody,
details table tr,
details table th,
details table td{
  display:revert;
}
details table th{
  background:linear-gradient(105deg,rgba(196,130,122,.07),rgba(250,247,242,.8));
  color:#c4827a;
  font-weight:700;
  padding:7px 6px;
  text-align:center;
  border-bottom:2px solid rgba(196,130,122,.2);
  font-size:11px;
  letter-spacing:.04em;
  font-family:'Noto Serif SC','STSong','Songti SC',serif;
}
details table td{
  padding:6px 6px;
  text-align:center;
  border-bottom:1px dashed rgba(179,147,90,.1);
  color:#3d3228;
  font-size:11px;
}
details table tr:nth-child(even) td{background:rgba(250,247,242,.5)}
details table tr:hover td{background:rgba(196,130,122,.05)}

/* ── 列表 ── */
details ul{list-style:none;padding-left:4px}
details ul li{
  position:relative;
  padding-left:18px;
  margin-bottom:6px;
  font-size:12.5px;
  line-height:1.75;
  color:#3d3228;
}
details ul li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:0;
  color:#d4b98c;
  font-size:8px;
}

/* ── 文本点缀 ── */
details strong{color:#c4827a;font-weight:600}
details em{color:#e8b4ae;font-style:italic}
details code{
  background:rgba(196,130,122,.06);
  color:#c4827a;
  padding:1px 7px;
  border-radius:4px;
  font-size:12px;
  font-family:inherit;
}
li::marker{color:#e8b4ae}
details hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,130,122,.2),transparent);
  margin:14px 0;
}

/* ── 滚动条 ── */
details::-webkit-scrollbar{width:5px}
details::-webkit-scrollbar-track{background:transparent}
details::-webkit-scrollbar-thumb{background:#e8b4ae;border-radius:10px}

/* ═══════════════════════════════════════════════════════════
   全局动画
   ═══════════════════════════════════════════════════════════ */
@keyframes zn-fade-in{
  0%{opacity:0;transform:translateY(6px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes zn-pulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}