css
/* ============ 顶部栏 ============ */
.sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(135deg, #ffd6e7 0%, #ffeef5 50%, #e8d5ff 100%) !important;
  border-bottom: 2px dashed #ff8ab8 !important;
  box-shadow: 0 4px 16px rgba(255, 138, 184, 0.25) !important;
  font-family: -apple-system, "PingFang SC", sans-serif !important;
}
#ai-model-selector .group.flex.items-center {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid #ffb3d1 !important;
  border-radius: 14px !important;
  padding: 4px 10px !important;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
  background: #fff !important;
  box-shadow: 0 0 12px #ff8ab8 !important;
}
#ai-model-selector .truncate.text-\[13px\] {
  color: #c2185b !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}
#ai-model-selector .shrink-0.flex.items-center svg,
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
  color: #d63384 !important;
  filter: drop-shadow(0 0 3px #ffb3d1);
  transition: transform 0.3s !important;
}
.sticky.w-full.top-0 svg:hover { transform: rotate(15deg) scale(1.15); }
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  background: #ff1f6b !important;
  box-shadow: 0 0 8px #ff1f6b !important;
}
#header-setting-button {
  background: linear-gradient(135deg, #ff8ab8, #c2185b) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(255, 138, 184, 0.6) !important;
}
#header-setting-button svg { color: #fff !important; }

/* ============ 开场白选择器 ============ */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
  background: linear-gradient(90deg, #fff0f6, #ffe1ee) !important;
  border: 1.5px solid #ff8ab8 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 8px rgba(255, 182, 193, 0.4) !important;
  transition: all 0.3s !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
  box-shadow: 0 0 14px #ff8ab8, inset 0 0 8px #ffd6e7 !important;
  transform: translateY(-1px);
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: #c2185b !important;
}

/* ============ 按钮栏 ============ */
#ai-mod-button2 button.MuiButton-root {
  background: linear-gradient(135deg, #fff, #ffe1ee) !important;
  border: 1px solid #ffb3d1 !important;
  color: #c2185b !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(255, 138, 184, 0.2) !important;
  transition: all 0.3s !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
  background: linear-gradient(135deg, #ff8ab8, #c2185b) !important;
  color: #fff !important;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(194, 24, 91, 0.4) !important;
}
#ai-mod-button2 button.MuiButton-root svg {
  filter: drop-shadow(0 0 2px rgba(255, 138, 184, 0.6));
}

/* ============ 底部输入栏 ============ */
.bg-gradient-to-t {
  background: linear-gradient(to top, #ffd6e7 0%, rgba(255, 238, 245, 0.8) 70%, transparent 100%) !important;
}
#ai-chat-bottom-input {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 2px solid #ff8ab8 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 18px rgba(255, 138, 184, 0.3), inset 0 0 8px rgba(255, 214, 231, 0.5) !important;
  backdrop-filter: blur(10px);
}
#ai-chat-input {
  color: #2a1b3d !important;
  font-family: -apple-system, "PingFang SC", sans-serif !important;
}
#ai-chat-input::placeholder {
  color: #c48fb0 !important;
  font-style: italic;
}
#ai-chat-input::selection {
  background: #ff8ab8 !important;
  color: #fff !important;
}

/* ============ 分页栏 ============ */
.MuiPaginationItem-root {
  color: #c2185b !important;
  background: rgba(255, 240, 246, 0.8) !important;
  border: 1px solid #ffb3d1 !important;
}
.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(135deg, #ff8ab8, #c2185b) !important;
  color: #fff !important;
  box-shadow: 0 0 10px #ff8ab8 !important;
}
.MuiPaginationItem-root.Mui-disabled { opacity: 0.4 !important; }
.MuiPaginationItem-icon { color: #c2185b !important; }
.MuiStack-root.css-1uwir8f .MuiBox-root { color: #c2185b !important; font-weight: 600 !important; }
.MuiInputBase-input {
  color: #2a1b3d !important;
  background: #fff0f6 !important;
  border-radius: 8px !important;
}

/* ============ 评论区 ============ */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: linear-gradient(180deg, #fff5fa 0%, #ffe1ee 100%) !important;
  border-top: 2px dashed #ff8ab8 !important;
}
div.text-lg.font-bold {
  color: #c2185b !important;
  text-shadow: 0 0 6px rgba(255, 138, 184, 0.4);
}
div.text-lg.font-bold::before { content: "💕 "; }
p.MuiTypography-body1.text-grey-600 { color: #8e3a63 !important; font-weight: 500 !important; }
span.MuiRating-iconEmpty svg { color: #ffd6e7 !important; }
span.MuiRating-iconFilled svg {
  color: #ff1f6b !important;
  filter: drop-shadow(0 0 4px #ff8ab8);
}
span.text-orange-500 { color: #ff1f6b !important; font-weight: 700 !important; }

div.flex.flex-col.border-gray-200 {
  background: #fff !important;
  border: 1.5px solid #ffb3d1 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 6px rgba(255, 214, 231, 0.5) !important;
}
textarea.rc-textarea {
  background: transparent !important;
  color: #2a1b3d !important;
}
textarea.rc-textarea::placeholder { color: #c48fb0 !important; }
div.bg-gray-100.text-gray-500 {
  background: #ffe1ee !important;
  color: #c2185b !important;
  border-radius: 8px !important;
}
div.cursor-pointer.group.flex.items-center.justify-center {
  background: linear-gradient(135deg, #ff8ab8, #c2185b) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(255, 138, 184, 0.5) !important;
  transition: all 0.3s !important;
}
div.cursor-pointer.group:hover { transform: scale(1.1) rotate(-8deg); }
div[data-state="closed"] svg[data-icon="Send03"] { color: #fff !important; }

div.style_divider__mW0YX {
  background: linear-gradient(90deg, transparent, #ff8ab8, transparent) !important;
  height: 1px !important;
}
button.MuiButton-outlinedPrimary {
  border: 1px solid #ffb3d1 !important;
  color: #c2185b !important;
  background: #fff !important;
  border-radius: 12px !important;
}
button.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #ff8ab8, #c2185b) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 0 8px #ff8ab8 !important;
}

div.group.ml-0 {
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  margin-bottom: 8px !important;
  border-left: 3px solid #ff8ab8 !important;
  transition: all 0.3s !important;
}
div.group.ml-0:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 12px rgba(255, 138, 184, 0.25) !important;
}
div.group img.rounded-full {
  border: 2px solid #ff8ab8 !important;
  box-shadow: 0 0 8px rgba(255, 138, 184, 0.5);
}
div.text-sm.text-grey-600 span.font-bold { color: #c2185b !important; }
span.text-\[10px\] {
  background: #ff1f6b !important;
  color: #fff !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
}
div.break-all { color: #2a1b3d !important; line-height: 1.6 !important; }
div.text-xs.text-grey-600 { color: #a0688a !important; }
button.text-gray-400 { color: #c48fb0 !important; transition: all 0.3s !important; }
button.text-gray-400:hover { color: #ff1f6b !important; transform: scale(1.2); }
span.cursor-pointer { color: #c2185b !important; font-weight: 600 !important; }
span.cursor-pointer:hover { color: #ff1f6b !important; text-decoration: underline wavy; }
div.ml-8.border-l { border-left: 2px dashed #ff8ab8 !important; }
css
/* === 基础容器与全局变量 === */
ai {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 12px;
  background: #faf8f5;          /* 浅暖白背景，模拟纸质 */
  font-family: '楷体', 'KaiTi', serif;
  color: #1a1a1a;               /* 正文黑色 */
  line-height: 1.7;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* === 头部（时间/地点/天气） === */
ai hd {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #4a3b32;               /* 深褐色 */
  padding: 6px 0 10px 0;
  border-bottom: 1px solid #e4dcd3;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

/* === 正文区美化 === */
ai article {
  margin: 0 0 14px 0;
}

ai article p {
  color: #1a1a1a;               /* 黑色正文 */
  font-size: 16px;
  text-indent: 2em;             /* 首行缩进两字 */
  margin: 6px 0 10px 0;
  padding-left: 10px;
  border-left: 3px solid #d0b8a0; /* 左侧装饰线 */
  line-height: 1.85;
}

/* === 折叠状态栏卡片（details/summary） === */
ai details {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(74,59,50,0.08);
  margin: 8px 0;
  border: 1px solid #efe5db;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

ai details[open] {
  box-shadow: 0 2px 6px rgba(74,59,50,0.12);
}

ai summary {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 17px;
  font-weight: bold;
  color: #4a3b32;
  background: #f7f2ec;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

ai summary:hover {
  background: #efe5db;
}

ai summary::-webkit-details-marker {
  display: none; /* 隐藏默认三角，使用自定义符号 */
}

ai summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  font-size: 14px;
  transition: transform 0.2s;
  color: #a08672;
}

ai details[open] > summary::before {
  transform: rotate(90deg);
}

/* === 状态栏内容区域（<p> 和 <d>） === */
ai details p {
  margin: 0;
  padding: 8px 14px 10px 14px;
  border-bottom: 1px dashed #f0e8e0;
  line-height: 1.65;
}

ai details p:last-of-type {
  border-bottom: none;
}

/* p[t] 标签名（如“基础”、“私密”）作为分节标题 */
ai p[t]::before {
  content: attr(t);
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #6b5a4a;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

/* 信息字段 <d> 的样式 */
ai d {
  display: block;
  padding: 2px 0;
  font-size: 14px;
  color: #2c2c2c;
}

/* 若要让字段并列（如多个d排一行），可自行添加行内标记，此处保留块级以兼容长内容 */

/* 个别强调：f 用于主角名字等 */
ai f {
  color: #8b5a2b;
  font-weight: bold;
  font-size: 1.05em;
}

/* 分隔小圆点（如果需要，可以用逗号或符号分隔d内的内容，已经在HTML里使用 | ），此处不再额外处理 */

/* 针对“私密/快感值”等带数字的强调 */
ai d strong, ai d b {
  color: #b35c44;
  font-weight: normal;
}

/* 长期记忆编号等 */
ai p[t="记忆"] d::before,
ai p[t="长期记忆"] d::before,
ai p[t="短期记忆"] d::before {
  content: "▪ ";
  color: #a08672;
  margin-right: 2px;
}

/* 行动推荐编号 */
ai p[t="推荐"] d::before {
  content: "→ ";
  color: #8b5a2b;
  font-weight: bold;
}

/* === 移动端微调 === */
@media (max-width: 480px) {
  ai {
    padding: 10px 8px;
  }
  ai article p {
    font-size: 15px;
    padding-left: 8px;
  }
  ai summary {
    font-size: 15px;
    padding: 8px 10px;
  }
  ai d {
    font-size: 13px;
  }
}