css
/* ===== 一、顶部栏 ===== */
.sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(135deg, #1a1410 0%, #2a2118 50%, #1a1410 100%) !important;
  border-bottom: 1px solid rgba(191, 155, 86, 0.3) !important;
  box-shadow: 0 2px 12px rgba(191, 155, 86, 0.08) !important;
}

#ai-model-selector .group.flex.items-center {
  background: rgba(191, 155, 86, 0.08) !important;
  border: 1px solid rgba(191, 155, 86, 0.25) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  transition: all 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
  background: rgba(191, 155, 86, 0.15) !important;
  border-color: rgba(191, 155, 86, 0.5) !important;
  box-shadow: 0 0 8px rgba(191, 155, 86, 0.15) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
  color: #d4b872 !important;
  font-family: "Noto Serif SC", "Source Han Serif CN", serif !important;
  letter-spacing: 0.5px !important;
}

#ai-model-selector .shrink-0.flex.items-center svg {
  color: #bf9b56 !important;
  transition: transform 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover svg {
  transform: rotate(180deg) !important;
}

.sticky.w-full.top-0 svg.lucide-clock-8 {
  color: #bf9b56 !important;
  transition: color 0.3s ease !important;
}

.sticky.w-full.top-0 svg.lucide-clock-8:hover {
  color: #e8d5a3 !important;
}

#header-setting-button {
  color: #bf9b56 !important;
  transition: all 0.3s ease !important;
}

#header-setting-button:hover {
  color: #e8d5a3 !important;
}

#header-setting-button svg {
  transition: transform 0.4s ease !important;
}

#header-setting-button:hover svg {
  transform: rotate(90deg) !important;
}

/* ===== 二、开场白选择器 ===== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
  background: linear-gradient(135deg, #1f1a14 0%, #2a2118 100%) !important;
  border: 1px solid rgba(191, 155, 86, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
  border-color: rgba(191, 155, 86, 0.6) !important;
  box-shadow: 0 2px 12px rgba(191, 155, 86, 0.12) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] {
  color: #bf9b56 !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: #bf9b56 !important;
  transition: transform 0.3s ease !important;
}

/* ===== 三、按钮栏 ===== */
#ai-mod-button2 button.MuiButton-root {
  background: rgba(191, 155, 86, 0.08) !important;
  border: 1px solid rgba(191, 155, 86, 0.3) !important;
  border-radius: 20px !important;
  color: #d4b872 !important;
  font-family: "Noto Serif SC", "Source Han Serif CN", serif !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

#ai-mod-button2 button.MuiButton-root::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(191, 155, 86, 0.1), transparent) !important;
  transition: left 0.5s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover::before {
  left: 100% !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
  background: rgba(191, 155, 86, 0.15) !important;
  border-color: rgba(191, 155, 86, 0.6) !important;
  box-shadow: 0 0 12px rgba(191, 155, 86, 0.15) !important;
  transform: translateY(-1px) !important;
}

#ai-mod-button2 button.MuiButton-root svg {
  color: #bf9b56 !important;
}

/* ===== 四、底部栏 ===== */
.bg-gradient-to-t {
  background: linear-gradient(to top, #1a1410 0%, rgba(26, 20, 16, 0.95) 70%, transparent 100%) !important;
}

#ai-chat-bottom-input {
  background: linear-gradient(135deg, #1f1a14 0%, #2a2118 100%) !important;
  border: 1px solid rgba(191, 155, 86, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(191, 155, 86, 0.1) !important;
  transition: all 0.3s ease !important;
}

#ai-chat-bottom-input:focus-within {
  border-color: rgba(191, 155, 86, 0.6) !important;
  box-shadow: 0 0 16px rgba(191, 155, 86, 0.1), inset 0 1px 0 rgba(191, 155, 86, 0.15) !important;
}

#ai-chat-input {
  color: #e8dcc8 !important;
  font-family: "Noto Serif SC", "Source Han Serif CN", serif !important;
  font-size: 14px !important;
}

#ai-chat-input::placeholder {
  color: rgba(191, 155, 86, 0.4) !important;
  font-style: italic !important;
}

#ai-chat-input::selection {
  background: rgba(191, 155, 86, 0.3) !important;
  color: #fff !important;
}

/* ===== 五、分页栏 ===== */
.MuiPaginationItem-root {
  color: #bf9b56 !important;
  border-color: rgba(191, 155, 86, 0.3) !important;
  background: rgba(191, 155, 86, 0.05) !important;
  transition: all 0.3s ease !important;
}

.MuiPaginationItem-root:hover {
  background: rgba(191, 155, 86, 0.15) !important;
  border-color: rgba(191, 155, 86, 0.5) !important;
}

.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(135deg, #bf9b56 0%, #8a6d3b 100%) !important;
  color: #1a1410 !important;
  font-weight: bold !important;
  border-color: #bf9b56 !important;
  box-shadow: 0 0 8px rgba(191, 155, 86, 0.3) !important;
}

.MuiPaginationItem-root.Mui-disabled {
  color: rgba(191, 155, 86, 0.25) !important;
  border-color: rgba(191, 155, 86, 0.1) !important;
}

.MuiPaginationItem-icon {
  color: #bf9b56 !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
  color: #bf9b56 !important;
}

.MuiInputBase-input {
  color: #d4b872 !important;
  border-color: rgba(191, 155, 86, 0.3) !important;
}

/* ===== 六、评论区 ===== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: linear-gradient(180deg, #1a1410 0%, #211c15 100%) !important;
}

div.text-lg.font-bold {
  color: #e8d5a3 !important;
  font-family: "Noto Serif SC", "Source Han Serif CN", serif !important;
  letter-spacing: 1px !important;
}

p.MuiTypography-body1.text-grey-600 {
  color: rgba(191, 155, 86, 0.7) !important;
}

span.MuiRating-iconEmpty svg {
  color: rgba(191, 155, 86, 0.3) !important;
}

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

span.text-orange-500 {
  color: #d4b872 !important;
}

div.flex.flex-col.border-gray-200 {
  border-color: rgba(191, 155, 86, 0.25) !important;
}

textarea.rc-textarea {
  background: rgba(191, 155, 86, 0.05) !important;
  color: #e8dcc8 !important;
  border: 1px solid rgba(191, 155, 86, 0.2) !important;
  border-radius: 8px !important;
  font-family: "Noto Serif SC", "Source Han Serif CN", serif !important;
  transition: all 0.3s ease !important;
}

textarea.rc-textarea:focus {
  border-color: rgba(191, 155, 86, 0.5) !important;
  box-shadow: 0 0 8px rgba(191, 155, 86, 0.1) !important;
}

div.bg-gray-100.text-gray-500 {
  background: rgba(191, 155, 86, 0.08) !important;
  color: rgba(191, 155, 86, 0.5) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center {
  transition: all 0.3s ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
  transform: scale(1.1) !important;
}

div[data-state="closed"] svg[data-icon="Send03"] {
  color: #bf9b56 !important;
  transition: color 0.3s ease !important;
}

div.style_divider__mW0YX {
  background: linear-gradient(90deg, transparent, rgba(191, 155, 86, 0.3), transparent) !important;
}

button.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #bf9b56 0%, #8a6d3b 100%) !important;
  color: #1a1410 !important;
  font-weight: bold !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(191, 155, 86, 0.2) !important;
}

button.MuiButton-outlinedPrimary {
  color: #bf9b56 !important;
  border-color: rgba(191, 155, 86, 0.4) !important;
  border-radius: 16px !important;
  background: transparent !important;
}

button.MuiButton-outlinedPrimary:hover {
  background: rgba(191, 155, 86, 0.1) !important;
  border-color: rgba(191, 155, 86, 0.7) !important;
}

div.p-3.overflow-y-auto {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(191, 155, 86, 0.3) transparent !important;
}

div.group.ml-0 {
  border-bottom: 1px solid rgba(191, 155, 86, 0.1) !important;
  transition: background 0.3s ease !important;
}

div.group.ml-0:hover {
  background: rgba(191, 155, 86, 0.03) !important;
}

div.text-sm.text-grey-600 span.font-bold {
  color: #d4b872 !important;
}

span.text-\[10px\] {
  color: rgba(191, 155, 86, 0.5) !important;
}

div.break-all {
  color: #e0d5c0 !important;
  line-height: 1.7 !important;
}

div.text-xs.text-grey-600 {
  color: rgba(191, 155, 86, 0.45) !important;
}

button.text-gray-400 {
  color: rgba(191, 155, 86, 0.4) !important;
  transition: all 0.3s ease !important;
}

button.text-gray-400:hover {
  color: #d4b872 !important;
  transform: scale(1.15) !important;
}

span.cursor-pointer {
  color: rgba(191, 155, 86, 0.6) !important;
  transition: color 0.3s ease !important;
}

span.cursor-pointer:hover {
  color: #e8d5a3 !important;
}

div.ml-8.border-l {
  border-color: rgba(191, 155, 86, 0.2) !important;
}
css
/* ===== 顶部颜色条移除 ===== */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* ===== 聊天框主体 - 轻奢浅色背景 ===== */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #FDFCFB 0%, #F7F4EF 50%, #FBF9F6 100%) !important;
    border: 1px solid rgba(200, 180, 150, 0.25) !important;
    border-radius: 14px !important;
    box-shadow:
        0 2px 12px rgba(180, 160, 130, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    padding: 16px 18px !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    isolation: isolate !important;
    position: relative !important;
}

.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow:
        0 4px 20px rgba(180, 160, 130, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(200, 180, 150, 0.4) !important;
}

/* ===== 文本层确保在动效之上 ===== */
.markdown-body {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* ===== 底部按钮 - 高级质感 ===== */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9F7F4 100%) !important;
    border: 1px solid rgba(185, 165, 135, 0.3) !important;
    border-radius: 8px !important;
    padding: 4px 12px !important;
    box-shadow:
        0 1px 4px rgba(160, 140, 110, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(4px) !important;
    position: relative !important;
    overflow: hidden !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: linear-gradient(135deg, #FFF9F0 0%, #F5EDE3 100%) !important;
    border-color: rgba(185, 155, 110, 0.5) !important;
    box-shadow:
        0 3px 10px rgba(160, 140, 110, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px) !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:active {
    transform: translateY(0px) scale(0.97) !important;
    box-shadow:
        0 1px 3px rgba(160, 140, 110, 0.1),
        inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* ===== 模型名称文本 ===== */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    opacity: 0.6 !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    transition: opacity 0.2s ease !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2:hover {
    opacity: 0.85 !important;
}

/* ===== Token消耗文本 ===== */
.text-orange-500 {
    opacity: 0.65 !important;
    font-size: 11px !important;
    transition: opacity 0.2s ease !important;
}

/* ===== 加载动画 - 隐藏默认 ===== */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* ===== 加载动画容器 ===== */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 280px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* ===== 加载动画 ::before - 文字部分 ===== */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "喵喵喵！小猫正在努力码字ing" !important;
    position: absolute !important;
    left: 36px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    z-index: 1 !important;
    background: linear-gradient(90deg, #8B7355, #A0845C, #8B7355) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== 加载动画 ::after - 猫咪SVG(SMIL动画) ===== */
.flex.items-center.justify-center.w-6.h-5::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    z-index: 1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3C!-- 猫耳 --%3E%3Cpolygon points='18,18 22,8 28,18' fill='%238B7355'%3E%3Canimate attributeName='points' values='18,18 22,8 28,18;18,16 22,6 28,16;18,18 22,8 28,18' dur='1.2s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='36,18 42,8 46,18' fill='%238B7355'%3E%3Canimate attributeName='points' values='36,18 42,8 46,18;36,16 42,6 46,16;36,18 42,8 46,18' dur='1.2s' repeatCount='indefinite'/%3E%3C/polygon%3E%3C!-- 猫头 --%3E%3Cellipse cx='32' cy='30' rx='16' ry='14' fill='%23A0845C'%3E%3Canimate attributeName='ry' values='14;13.5;14' dur='1.5s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C!-- 眼睛 --%3E%3Cellipse cx='26' cy='28' rx='2.5' ry='3' fill='%23333'%3E%3Canimate attributeName='ry' values='3;0.5;3' dur='2.5s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='38' cy='28' rx='2.5' ry='3' fill='%23333'%3E%3Canimate attributeName='ry' values='3;0.5;3' dur='2.5s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C!-- 鼻子 --%3E%3Cellipse cx='32' cy='33' rx='1.5' ry='1' fill='%23D4836B'/%3E%3C!-- 嘴巴 --%3E%3Cpath d='M29,35 Q32,38 35,35' fill='none' stroke='%23333' stroke-width='0.8' stroke-linecap='round'%3E%3Canimate attributeName='d' values='M29,35 Q32,38 35,35;M29,35 Q32,37 35,35;M29,35 Q32,38 35,35' dur='1.5s' repeatCount='indefinite'/%3E%3C/path%3E%3C!-- 尾巴 --%3E%3Cpath d='M48,40 Q56,35 54,26' fill='none' stroke='%238B7355' stroke-width='3' stroke-linecap='round'%3E%3Canimate attributeName='d' values='M48,40 Q56,35 54,26;M48,40 Q58,32 56,24;M48,40 Q54,38 52,28;M48,40 Q56,35 54,26' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
    .flex.items-center.justify-center.w-6.h-5 {
        width: 240px !important;
        height: 44px !important;
    }

    .flex.items-center.justify-center.w-6.h-5::before {
        font-size: 12px !important;
        left: 32px !important;
    }

    .flex.items-center.justify-center.w-6.h-5::after {
        width: 24px !important;
        height: 24px !important;
    }

    .bg-gray-100\/90.relative.inline-block {
        border-radius: 10px !important;
        padding: 12px 14px !important;
    }
}

/* ===== 低动效偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='18,18 22,8 28,18' fill='%238B7355'/%3E%3Cpolygon points='36,18 42,8 46,18' fill='%238B7355'/%3E%3Cellipse cx='32' cy='30' rx='16' ry='14' fill='%23A0845C'/%3E%3Cellipse cx='26' cy='28' rx='2.5' ry='3' fill='%23333'%3E%3Canimate attributeName='ry' values='3;0.5;3' dur='4s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='38' cy='28' rx='2.5' ry='3' fill='%23333'%3E%3Canimate attributeName='ry' values='3;0.5;3' dur='4s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='32' cy='33' rx='1.5' ry='1' fill='%23D4836B'/%3E%3Cpath d='M29,35 Q32,38 35,35' fill='none' stroke='%23333' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M48,40 Q56,35 54,26' fill='none' stroke='%238B7355' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }
}
/* ==================== 隐藏思维链 ==================== */
details.think {
  display: none !important;
}

/* ==================== 主容器（圆角微调） ==================== */
ai {
  display: block;
  background: linear-gradient(135deg, #f8f4ec 0%, #f3ede0 100%);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(168,134,84,.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(139,44,62,.04) 0, transparent 45%),
    linear-gradient(135deg, #f8f4ec 0%, #f3ede0 100%);
  color: #2a2422;
  font-family: "宋体", SimSun, "Source Han Serif SC", "Noto Serif CJK SC", serif;
  font-size: 15px;
  line-height: 1.75;
  padding: 16px 14px;
  border: 1px solid #d9c9a8;
  border-radius: 8px;  /* 由4px改为8px */
  box-shadow: 0 2px 12px rgba(80,50,30,.08), inset 0 0 0 4px #fbf7ef, inset 0 0 0 5px #c9b48a;
  position: relative;
}

ai::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px dashed rgba(168,134,84,.35);
  border-radius: 6px;  /* 内层圆角加大 */
  pointer-events: none;
}

/* ===== 正文区（圆角微调） ===== */
ai main {
  display: block;
  padding: 14px 18px 18px;
  margin-bottom: 16px;
  background:
    linear-gradient(180deg, rgba(251,247,239,.7), rgba(248,244,236,.4));
  border-left: 3px solid #8b2c3e;
  border-right: 1px solid #e6dcc4;
  border-radius: 0 8px 8px 0;  /* 右侧圆角加大 */
}

ai main p {
  text-indent: 2em;
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: .03em;
  color: #2a2422;
}
ai main p:last-child { margin-bottom: 0; }

ai main q {
  display: block;
  margin: 10px 0 10px 1.2em;
  padding: 8px 14px;
  font-family: "楷体", KaiTi, "STKaiti", serif;
  font-size: 15.5px;
  color: #5a3a2a;
  background: linear-gradient(90deg, rgba(168,134,84,.08), transparent 80%);
  border-left: 3px solid #a88654;
  border-radius: 6px;  /* 对话块增加圆角 */
  quotes: "「" "」";
}
ai main q::before { content: open-quote; color: #8b2c3e; font-weight: bold; }
ai main q::after  { content: close-quote; color: #8b2c3e; font-weight: bold; }

/* ===== 折叠面板（圆角微调） ===== */
ai details {
  display: block;
  margin: 8px 0;
  background: #fbf7ef;
  border: 1px solid #d9c9a8;
  border-radius: 8px;  /* 由3px改为8px */
  box-shadow: 0 1px 3px rgba(80,50,30,.06);
  overflow: hidden;
  transition: box-shadow .3s;
}
ai details[open] { box-shadow: 0 2px 8px rgba(139,44,62,.1); }

ai summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 14px 9px 32px;
  font-size: 15px;
  font-weight: bold;
  color: #fbf7ef;
  background: linear-gradient(90deg, #8b2c3e 0%, #6e2030 60%, #5a1a28 100%);
  position: relative;
  letter-spacing: .12em;
  user-select: none;
  border-bottom: 1px solid transparent;
  border-radius: 8px 8px 0 0;  /* 标题栏上方圆角 */
}
ai summary::-webkit-details-marker { display: none; }
ai summary::before {
  content: "";
  position: absolute;
  left: 11px; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d4a85a, #a88654 60%, #6b4d2a);
  box-shadow: 0 0 0 1px rgba(255,240,200,.4), inset 0 0 2px rgba(0,0,0,.4);
  transform: translateY(-50%);
}
ai summary::after {
  content: "▸";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: #d4b878;
  font-size: 12px;
  transition: transform .3s;
}
ai details[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
ai details[open] > summary {
  border-bottom: 1px solid #a88654;
  background: linear-gradient(90deg, #8b2c3e 0%, #6e2030 60%, #5a1a28 100%),
              linear-gradient(90deg, transparent, #d4a85a, transparent) bottom/100% 1px no-repeat;
}

/* 嵌套 details */
ai details details {
  margin: 6px 8px;
  background: #fdfaf3;
  border-color: #e6dcc4;
  border-radius: 6px;  /* 嵌套面板圆角 */
}
ai details details > summary {
  padding: 6px 12px 6px 26px;
  font-size: 13.5px;
  background: linear-gradient(90deg, #6e2030, #8b2c3e);
  border-radius: 6px 6px 0 0;
}
ai details details > summary::before {
  width: 8px; height: 8px; left: 11px;
}

/* 内容区显隐动画 */
ai details > k,
ai details > v,
ai details > row,
ai details > grp,
ai details > bar,
ai details > slave,
ai details > act,
ai details > hr,
ai details > p {
  display: block;
}
ai details > k, ai details > v, ai details > row,
ai details > grp, ai details > bar, ai details > slave,
ai details > act, ai details > p {
  animation: fadein .4s ease;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ===== 键值对 ===== */
ai k {
  display: inline-block;
  color: #8b2c3e;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: .05em;
  position: relative;
}
ai k::before { content: "「"; color: #a88654; font-weight: normal; }
ai k::after  { content: "」"; color: #a88654; font-weight: normal; margin-right: 4px; }

ai v {
  display: inline;
  color: #2a2422;
  font-size: 14px;
}

/* details > k+v 单独成行 */
ai details > k {
  margin: 6px 14px 0;
}
ai details > v {
  margin: 0 14px 4px 14px;
  padding-left: 8px;
  border-left: 2px solid #e6dcc4;
  display: block;
  border-radius: 0 4px 4px 0;  /* 值区域微圆角 */
}

/* row 双列 */
ai row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 4px 6px;
  align-items: baseline;
  margin: 6px 14px;
  padding: 4px 0;
  border-bottom: 1px dotted #e6dcc4;
}
ai row k { white-space: nowrap; }
ai row v { border: none; padding: 0; margin: 0; border-radius: 0; }

/* ===== grp 分组（圆角加强） ===== */
ai grp {
  display: block;
  margin: 8px 14px;
  padding: 6px 0 6px 14px;
  border-left: 2px dashed #a88654;
  position: relative;
  border-radius: 0 6px 6px 0;  /* 右侧圆角 */
  background: rgba(251,247,239,0.5); /* 微背景增强圆角视觉 */
}
ai grp::before {
  content: attr(t);
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #6e2030;
  margin-bottom: 4px;
  letter-spacing: .08em;
  padding-left: 14px;
  position: relative;
}
ai grp::after {
  content: "";
  position: absolute;
  left: -5px; top: 4px;
  width: 8px; height: 8px;
  background: radial-gradient(circle, #d4a85a, #8b2c3e);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(139,44,62,.4);
}
ai grp d {
  display: block;
  font-size: 13.5px;
  color: #3a2a22;
  padding: 3px 0 3px 12px;
  position: relative;
  line-height: 1.7;
}
ai grp d::before {
  content: "❖";
  position: absolute;
  left: 0;
  color: #a88654;
  font-size: 10px;
}

/* 警示区 */
ai grp[warn] {
  border-left: 3px solid #c0392b;
  background:
    repeating-linear-gradient(45deg,
      rgba(192,57,43,.05) 0 8px,
      rgba(192,57,43,.1) 8px 16px);
  padding: 8px 10px 8px 16px;
  border-radius: 0 8px 8px 0;
  animation: warnpulse 3s ease-in-out infinite;
}
ai grp[warn]::before {
  color: #c0392b;
  text-shadow: 0 0 4px rgba(192,57,43,.4);
}
ai grp[warn] d { color: #8b1a10; }
ai grp[warn] d::before { content: "⛔"; color: #c0392b; }
@keyframes warnpulse {
  0%,100% { box-shadow: 0 0 0 rgba(192,57,43,0); }
  50%     { box-shadow: 0 0 8px rgba(192,57,43,.25), inset 0 0 4px rgba(192,57,43,.08); }
}

/* ===== 数值条 bar ===== */
ai bar {
  display: grid;
  grid-template-columns: 90px 50px 1fr;
  gap: 8px;
  align-items: center;
  margin: 6px 14px;
  padding: 6px 10px;
  background: #f5ecd9;
  border: 1px solid #e6dcc4;
  border-radius: 8px;  /* 进度条圆角加大 */
  position: relative;
  overflow: hidden;
}
ai bar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--v, 0) * 1%);
  background: linear-gradient(90deg,
    rgba(139,44,62,.18),
    rgba(168,134,84,.22) 80%,
    rgba(212,168,90,.3));
  z-index: 0;
  transition: width .6s ease;
  border-radius: 8px 0 0 8px; /* 填充条左圆角 */
}
ai bar > * { position: relative; z-index: 1; }
ai bar k {
  font-size: 13px;
}
ai bar k::before, ai bar k::after { content: none; }
ai bar n {
  font-family: "Times New Roman", serif;
  font-weight: bold;
  font-size: 16px;
  color: #8b2c3e;
  text-align: right;
}
ai bar s {
  font-size: 12.5px;
  color: #5a4438;
  font-style: italic;
}

/* ===== slave 卡片 ===== */
ai slave {
  display: block;
  margin: 8px 12px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #fdf6ea, #f8eddb);
  border: 1px solid #e0c89a;
  border-radius: 8px;  /* 由3px改为8px */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

ai details > hr {
  border: none;
  height: 4px;
  margin: 8px 14px;
  background:
    linear-gradient(90deg, transparent, #a88654 20%, #8b2c3e 50%, #a88654 80%, transparent) center/100% 1px no-repeat,
    linear-gradient(90deg, transparent, #a88654 20%, #8b2c3e 50%, #a88654 80%, transparent) center/100% 1px no-repeat;
  background-position: top, bottom;
}

/* ===== 记忆区 p ===== */
ai details > p {
  margin: 4px 14px;
  padding: 4px 8px;
  font-size: 13.5px;
  color: #3a2a22;
  background: rgba(168,134,84,.06);
  border-left: 2px solid #a88654;
  border-radius: 0 6px 6px 0;  /* 右侧圆角 */
  font-family: "宋体", SimSun, serif;
}

/* ===== 行动推荐 ===== */
ai act {
  display: block;
  margin: 5px 14px;
  padding: 8px 12px 8px 14px;
  font-size: 14px;
  color: #2a2422;
  background: linear-gradient(90deg, #faf2e0 0%, #fbf7ef 100%);
  border: 1px solid #e0c89a;
  border-left: 3px solid #8b2c3e;
  border-radius: 8px;  /* 由2px改为8px */
  cursor: pointer;
  transition: all .25s ease;
  position: relative;
}
ai act:hover {
  transform: translateX(4px);
  background: linear-gradient(90deg, #8b2c3e 0%, #6e2030 100%);
  color: #fbf7ef;
  border-left-color: #d4a85a;
  box-shadow: 0 2px 8px rgba(139,44,62,.3);
  letter-spacing: .05em;
  border-radius: 8px;
}
ai act:hover::after {
  content: "▸";
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: #d4a85a;
}

/* ===== Markdown 兼容 ===== */
ai li {
  margin: 3px 0 3px 1.2em;
  font-size: 14px;
  list-style: "❖  ";
  color: #3a2a22;
}
ai li::marker { color: #a88654; }
ai strong { color: #8b2c3e; font-weight: bold; }
ai em { color: #6e2030; font-style: italic; }
ai hr { 
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a88654, transparent);
  margin: 10px 0;
}
ai a {
  color: #8b2c3e;
  text-decoration: none;
  border-bottom: 1px dotted #a88654;
}
ai a:hover { color: #c0392b; border-bottom-style: solid; }

ai h1, ai h2, ai h3, ai h4 {
  font-family: "宋体", SimSun, serif;
  color: #6e2030;
  margin: 12px 14px 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #a88654;
  letter-spacing: .1em;
}
ai h2 { font-size: 17px; }
ai h3 { font-size: 15.5px; }

ai code {
  font-family: Consolas, monospace;
  background: rgba(139,44,62,.08);
  color: #6e2030;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}

ai blockquote {
  margin: 8px 14px;
  padding: 6px 12px;
  font-family: "楷体", KaiTi, serif;
  color: #5a3a2a;
  background: linear-gradient(90deg, rgba(168,134,84,.08), transparent);
  border-left: 3px solid #a88654;
  border-radius: 0 6px 6px 0;
}

/* ===== 移动端 ===== */
@media (max-width: 520px) {
  ai { padding: 12px 8px; font-size: 14px; border-radius: 6px; }
  ai main { padding: 10px 12px; border-radius: 0 6px 6px 0; }
  ai main p { font-size: 15px; }
  ai row { grid-template-columns: auto 1fr; }
  ai bar { grid-template-columns: 80px 44px 1fr; gap: 6px; padding: 5px 8px; border-radius: 6px; }
  ai bar s { font-size: 11.5px; }
  ai summary { padding: 8px 12px 8px 28px; font-size: 14px; border-radius: 6px 6px 0 0; }
  ai details { border-radius: 6px; }
  ai grp, ai slave, ai act, ai bar { margin-left: 8px; margin-right: 8px; }
  ai details > k, ai details > v { margin-left: 10px; margin-right: 10px; }
  ai act { border-radius: 6px; }
  ai slave { border-radius: 6px; }
}