/* ═══ B平台加载动画适配（自动注入）═══ */
.flex.items-center.justify-center.size-6 {
  opacity: 1 !important;
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
}
.flex.items-center.justify-center.size-6 > .flex.gap-2,
.style_text__zGhNq {
  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;
  background: rgba(250, 246, 240, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 2px solid #8B7355 !important;
  box-shadow: 0 4px 15px rgba(139, 115, 85, 0.08) !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  色色修仙 · 全量内置 CSS 引擎 v6.0                            ║
   ║  分区: [A] 聊天框界面美化 [B] UI 22模块 GUI [C] 动态动画SVG  ║
   ║  最高原则: 绝对禁深色/黑底！最高可读性！全量可视化适配！     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════
   [A] 聊天框全局覆写 (柔和修仙宣纸/玉石金辉)
   ═══════════════════════════════════════════════════════════════ */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted {
  background: linear-gradient(155deg, #FFFFFF 0%, #FAF6F0 50%, #F5EFE6 100%) !important;
  border: 2px solid #8B7355 !important;
  border-radius: 14px !important;
  box-shadow: 6px 6px 0px #D4AF37, -2px -2px 0px #E07A8C, 0 10px 30px rgba(139, 115, 85, 0.12) !important;
  margin-bottom: 28px !important;
  overflow: visible !important;
  max-width: 98% !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* 角标与流光底边：分别应用于用户/助手消息容器 */
.is-user > .border.border-muted::before,
.is-assistant > .border.border-muted::before {
  content: "CULTIVATION WORLD";
  position: absolute;
  top: -10px;
  right: 15px;
  background: linear-gradient(90deg, #C81D25, #E07A8C);
  color: #FFFFFF;
  font-family: 'KaiTi', 'SimSun', serif;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid #8B7355;
  box-shadow: 2px 2px 0px #8B7355;
  z-index: 10;
  pointer-events: none;
}

.is-user > .border.border-muted::after,
.is-assistant > .border.border-muted::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C81D25, #D4AF37, #2D6A4F, #E07A8C, #C81D25);
  background-size: 300% 100%;
  animation: xiu-border-flow 5s linear infinite;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  pointer-events: none;
}

/* 输入框专属美化 */
.is-user > .border.border-muted {
  border-color: #C81D25 !important;
  box-shadow: 5px 5px 0px #8B7355, -2px -2px 0px #D4AF37 !important;
  background: #FFFFFF !important;
}

/* Markdown 正文最高可读性 */
.rili-markdown-renderer {
  color: #2C221E !important;
  font-family: 'KaiTi', '楷体', 'Noto Serif SC', 'Songti SC', serif !important;
  font-size: 16.5px !important;
  line-height: 2.1 !important;
  letter-spacing: 0.4px !important;
}

/* 隐藏带子条 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
  display: none !important;
}

#nav-middle .group.flex.items-center {
  background: #FFFFFF !important;
  border: 1.5px solid #8B7355 !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0px #D4AF37 !important;
}

#nav-middle button:has(> .flex-1.truncate.text-left) .flex-1.truncate.text-left {
  color: #5D4E37 !important;
  font-weight: 900 !important;
}

#nav-right button {
  border: 1.5px solid #8B7355 !important;
  border-radius: 8px !important;
}

/* 底部输入框区域美化 */
.bg-gradient-to-t {
  background: linear-gradient(to top, #FAF6F0 0%, rgba(250, 246, 240, 0.9) 80%, transparent 100%) !important;
}

#ai-chat-bottom-input {
  background: #FFFFFF !important;
  border: 2px solid #8B7355 !important;
  box-shadow: 4px 4px 0px #D4AF37 !important;
  border-radius: 12px !important;
}

#ai-chat-bottom-input:focus-within {
  border-color: #C81D25 !important;
  box-shadow: 6px 6px 0px #E07A8C !important;
}

#ai-chat-input {
  color: #2C221E !important;
  font-weight: 600 !important;
}

#ai-chat-input::placeholder {
  color: #A08C75 !important;
  font-style: italic !important;
}

#ai-chat-input::selection {
  background: #D4AF37 !important;
  color: #2C221E !important;
}

/* 底部操作按钮美化 */
#ai-mod-button2 button.MuiButton-root {
  background: linear-gradient(135deg, #8B7355 0%, #5D4E37 100%) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  border: 1px solid #3A3226 !important;
  box-shadow: 3px 3px 0px #D4AF37 !important;
  font-weight: 900 !important;
  transition: all 0.25s !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
  background: linear-gradient(135deg, #C81D25 0%, #E07A8C 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 4px 4px 0px #8B7355 !important;
}

/* 聊天框底部附加元素 */
.bg-muted.rounded.flex.p-0\.5 > button.rounded-full.size-7 {
  color: #5D4E37 !important;
  font-weight: 700 !important;
}

.flex.items-center.gap-2.text-xs.font-mono.text-muted-foreground {
  color: #8B7355 !important;
  font-weight: 600 !important;
}

/* 加载元素：太极八卦旋转动画 */
.flex.items-center.justify-center.size-6 {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
}

.flex.items-center.justify-center.size-6::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23FAF6F0' stroke='%238B7355' stroke-width='4'/%3E%3Cpath d='M50 2 A48 48 0 0 1 50 98 A24 24 0 0 1 50 50 A24 24 0 0 0 50 2' fill='%233A3226'/%3E%3Ccircle cx='50' cy='26' r='6' fill='%23FAF6F0'/%3E%3Ccircle cx='50' cy='74' r='6' fill='%233A3226'/%3E%3C/svg%3E") no-repeat center/contain;
  animation: xiu-taiji-spin 1.2s linear infinite;
  filter: drop-shadow(0 2px 6px rgba(139, 115, 85, 0.3));
}

@keyframes xiu-taiji-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 分页栏与评论区覆写 */
.MuiPaginationItem-root {
  color: #5D4E37 !important;
  font-weight: 700 !important;
  border: 1.5px solid #8B7355 !important;
  background: #FFFFFF !important;
}

.MuiPaginationItem-root.Mui-selected {
  background: #8B7355 !important;
  color: #FFFFFF !important;
  box-shadow: 2px 2px 0px #D4AF37 !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF6F0 100%) !important;
}

div.text-lg.font-bold {
  color: #5D4E37 !important;
}

span.MuiRating-iconFilled svg {
  color: #D4AF37 !important;
}

textarea.rc-textarea {
  color: #2C221E !important;
  background: #FAF6F0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   [B] UI 22 模块 GUI 系统 (色色修仙顶层容器)
   ═══════════════════════════════════════════════════════════════ */
.xiu-ui {
  --x-gold: #D4AF37;
  --x-brown: #8B7355;
  --x-deep: #3A3226;
  --x-paper: #FAF6F0;
  --x-red: #C81D25;
  --x-pink: #E07A8C;
  --x-green: #2D6A4F;
  --x-white: #FFFFFF;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' fill='none' stroke='rgba(139,115,85,0.04)' stroke-width='1'/%3E%3C/svg%3E") var(--x-paper);
  padding: 14px;
  border-radius: 12px;
  font-family: 'KaiTi', '楷体', 'PingFang SC', sans-serif;
  color: var(--x-deep);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.xiu-ui::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--x-red), var(--x-gold), var(--x-green), var(--x-pink));
  z-index: 5;
}

/* 模块通用基类 */
.xiu-ui .m {
  background: var(--x-white);
  border: 2px solid var(--x-brown);
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: 4px 4px 0px var(--x-gold);
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: xiu-card-in 0.4s ease-out both;
}

.xiu-ui .m:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0px var(--x-red);
}

@keyframes xiu-card-in {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.xiu-ui .m summary {
  padding: 11px 16px;
  font-weight: 900;
  font-size: 14.5px;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #FFFFFF 0%, #F5EFE6 100%);
  color: var(--x-brown);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  user-select: none;
  position: relative;
  transition: all 0.3s ease;
}

.xiu-ui .m summary::-webkit-details-marker {
  display: none;
}

.xiu-ui .m summary::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B7355'%3E%3Cpath d='M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z'/%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.3s ease;
}

.xiu-ui .m summary::after {
  content: "▾";
  position: absolute;
  right: 16px;
  font-size: 14px;
  color: var(--x-brown);
  transition: transform 0.3s ease;
}

.xiu-ui .m[open] summary {
  background: linear-gradient(90deg, #F4ECD8 0%, #E8DFD1 100%);
  color: var(--x-red);
  border-bottom-color: var(--x-brown);
}

.xiu-ui .m[open] summary::before {
  transform: rotate(180deg);
}

.xiu-ui .m[open] summary::after {
  transform: rotate(180deg);
  color: var(--x-red);
}

.xiu-ui .m-b {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.8;
  background: var(--x-paper);
}

/* 键值对 mapping */
.xiu-ui .r {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed #DCD5C5;
  font-size: 13.5px;
}

.xiu-ui .r::before {
  content: attr(k);
  font-weight: 900;
  color: var(--x-brown);
  background: rgba(139, 115, 85, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  border-left: 3px solid var(--x-gold);
}

/* 1. 思维链 CoT */
.xiu-ui .m-cot summary {
  background: linear-gradient(90deg, #F5F0E6 0%, #EADFC9 100%);
  color: #705E51;
  font-size: 13px;
}

.xiu-ui .m-cot think {
  display: block;
  background: #FAF6F0;
  color: #5A4D41;
  padding: 12px 14px;
  font-family: 'Consolas', monospace;
  font-size: 12.5px;
  white-space: pre-wrap;
  border-left: 3px solid var(--x-brown);
  border-radius: 4px;
}

/* 2. 篇章声明 & 3. 时空条 */
.xiu-ui .m-idx,
.xiu-ui .m-hdr {
  background: linear-gradient(90deg, var(--x-brown) 0%, var(--x-deep) 100%);
  color: var(--x-paper);
  padding: 10px 14px;
  border-radius: 8px;
  border: 2px solid var(--x-gold);
  box-shadow: 3px 3px 0px var(--x-gold);
  display: flex;
  overflow-x: auto;
  gap: 12px;
  margin-bottom: 12px;
  white-space: nowrap;
}

.xiu-ui .m-idx span,
.xiu-ui .m-hdr span {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 700;
}

.xiu-ui .m-idx span::before,
.xiu-ui .m-hdr span::before {
  content: attr(k) ": ";
  color: var(--x-gold);
  margin-right: 4px;
}

/* 6. 正文区故事卷轴 (Highest Readability) */
.xiu-ui .st-box {
  border: 3px double var(--x-brown);
  background: #FFFFFF;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 6px 6px 0px var(--x-gold), -2px -2px 0px rgba(200, 29, 37, 0.15);
  overflow: hidden;
}

.xiu-ui .st-hdr {
  background: var(--x-brown);
  color: #FFFFFF;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  letter-spacing: 1px;
}

.xiu-ui .st-txt {
  padding: 24px 20px;
  max-height: 72vh;
  overflow-y: auto;
  font-size: 17px;
  line-height: 2.15;
  color: #2C221E;
  text-align: justify;
  text-indent: 2em;
  scrollbar-width: thin;
  scrollbar-color: var(--x-brown) var(--x-paper);
}

/* 兼容标准p与自定义text标签 */
.xiu-ui .st-txt p,
.xiu-ui .st-txt text p {
  margin-bottom: 1.5em;
  text-indent: 2em;
}

.xiu-ui .st-txt::-webkit-scrollbar {
  width: 7px;
}

.xiu-ui .st-txt::-webkit-scrollbar-thumb {
  background: var(--x-brown);
  border-radius: 10px;
}

/* 7. 男女状态隔离机制 (Zero-JS) */
.gen-男 .only-f,
.gen-女 .only-m {
  display: none !important;
}

/* 进度条组件 */
.xiu-ui .pg {
  width: 100%;
  height: 16px;
  background: #E8E2D6;
  border: 2px solid var(--x-brown);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  margin: 8px 0;
}

.xiu-ui .pg-f {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
}

.xiu-ui .fill-hp { background: linear-gradient(90deg, #C81D25, #FF85A1); }
.xiu-ui .fill-mp { background: linear-gradient(90deg, #2D6A4F, #52B788); }

.xiu-ui .pg::after {
  content: attr(v);
  position: absolute;
  right: 8px;
  top: -1px;
  font-size: 10px;
  font-weight: 900;
  color: #FFFFFF;
  text-shadow: 1px 1px 2px #000;
}

/* 布局网格 Grid */
.xiu-ui .g-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.xiu-ui .stat-g,
.xiu-ui .rad-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.xiu-ui .stat-i,
.xiu-ui .rad-i {
  background: #FFFFFF;
  border: 1.5px solid var(--x-brown);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.xiu-ui .stat-i .lbl,
.xiu-ui .rad-i .lbl {
  display: block;
  font-size: 11px;
  color: var(--x-brown);
  font-weight: 900;
}

.xiu-ui .stat-i .v,
.xiu-ui .rad-i b {
  font-size: 16px;
  color: var(--x-red);
  font-weight: 900;
}

/* 10. 女性器官超详细展开区 */
.xiu-ui .erotic-p {
  background: #FFF5F7;
  border: 1.5px dashed var(--x-pink);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
}

/* 11. 双修环形 SVG 效果 */
.xiu-ui .ring-w {
  display: flex;
  align-items: center;
  gap: 16px;
}

.xiu-ui .ring-c {
  width: 64px;
  height: 64px;
  position: relative;
  flex-shrink: 0;
}

.xiu-ui .circular-chart {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.xiu-ui .c-bg {
  fill: none;
  stroke: #E8E2D6;
  stroke-width: 3.8;
}

.xiu-ui .c-f {
  fill: none;
  stroke: var(--x-pink);
  stroke-width: 3.8;
  stroke-linecap: round;
  animation: xiu-ring-load 1.2s ease-out forwards;
}

@keyframes xiu-ring-load {
  0% { stroke-dasharray: 0, 100; }
  100% { stroke-dasharray: 100, 0; }
}

.xiu-ui .ring-t {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 900;
  color: var(--x-red);
}

/* 12. 众生相 NPC 图鉴横向滚动 */
.xiu-ui .s-h {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.xiu-ui .npc-c {
  flex: 0 0 75%;
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1.5px solid var(--x-brown);
  border-radius: 6px;
  padding: 8px;
}

/* 14. 纳戒网格 */
.xiu-ui .inv-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.xiu-ui .inv-i {
  background: #FFFFFF;
  border: 1.5px solid var(--x-brown);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  padding: 4px;
  border-radius: 4px;
}

.xiu-ui .inv-i:hover {
  background: #FFFDF0;
  border-color: var(--x-red);
}

/* 21. 记忆表格 */
.xiu-ui .mem-cfg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #F4ECD8;
  padding: 8px;
  border-radius: 6px;
  font-size: 11.5px;
  margin-bottom: 10px;
}

.xiu-ui .mem-cfg span {
  background: #FFFFFF;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--x-brown);
}

.xiu-ui .r-title {
  font-weight: 900;
  color: var(--x-red);
  margin: 8px 0 4px;
  font-size: 13px;
}

.xiu-ui .mem-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.xiu-ui .mem-tbl th {
  background: var(--x-brown);
  color: #FFFFFF;
  padding: 6px;
  text-align: left;
}

.xiu-ui .mem-tbl td {
  padding: 6px;
  border-bottom: 1px solid #DCD5C5;
  background: #FFFFFF;
}

/* 22. 战术选项按钮 */
.xiu-ui .opt-btn {
  padding: 12px 16px;
  margin: 8px 0;
  background: #FFFFFF;
  border: 2px solid var(--x-brown);
  border-left: 6px solid var(--x-red);
  border-radius: 0 8px 8px 0;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
}

.xiu-ui .opt-btn:hover {
  transform: translateX(8px);
  background: #FFFDF0;
  border-left-color: var(--x-gold);
  box-shadow: 3px 3px 0px var(--x-red);
}

.xiu-ui .opt-btn::after {
  content: "➔";
  position: absolute;
  right: 14px;
  color: var(--x-red);
}

/* ═══════════════════════════════════════════════════════════════
   [C] 悬浮侧边栏协议 (Fixed Sidebar Engine)
   ═══════════════════════════════════════════════════════════════ */
.xiu-ui .sb-wrap {
  position: fixed !important;
  top: 25%;
  right: 0;
  z-index: 9999 !important;
  display: flex;
  align-items: flex-start;
}

.xiu-ui .sb-tg {
  display: none !important;
}

.xiu-ui .sb-btn {
  background: var(--x-brown);
  color: #FFFFFF;
  padding: 14px 8px;
  writing-mode: vertical-rl;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  border: 2px solid var(--x-gold);
  border-right: none;
  border-radius: 10px 0 0 10px;
  box-shadow: -3px 3px 0px rgba(0, 0, 0, 0.15);
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.xiu-ui .sb-btn:hover {
  background: var(--x-red);
}

.xiu-ui .sb-p {
  width: 0;
  overflow: hidden;
  background: rgba(250, 246, 240, 0.96);
  backdrop-filter: blur(10px);
  border: 2px solid var(--x-brown);
  border-right: none;
  box-shadow: -6px 6px 0px var(--x-gold);
  transition: width 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-height: 65vh;
  overflow-y: auto;
  border-radius: 10px 0 0 10px;
}

.xiu-ui .sb-tg:checked ~ .sb-p {
  width: 250px;
  padding: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   [D] 移动端完全自适应 (Mobile First Protection)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .is-user > .border.border-muted,
  .is-assistant > .border.border-muted {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .xiu-ui {
    padding: 8px;
    border-radius: 0;
  }

  .xiu-ui .st-txt {
    font-size: 15.5px !important;
    padding: 16px 12px !important;
    line-height: 2.0 !important;
    max-height: 60vh !important;
  }

  .xiu-ui .g-2 {
    grid-template-columns: 1fr !important;
  }

  .xiu-ui .stat-g,
  .xiu-ui .rad-g {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .xiu-ui .sb-wrap {
    top: auto;
    bottom: 12%;
  }

  .xiu-ui .sb-tg:checked ~ .sb-p {
    width: 82vw;
  }
}