ai {
display: block;
max-width: 100%;
font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
color: #e8e4dc;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin: 0;
}
ai hd {
display: block;
background: linear-gradient(135deg, rgba(80, 30, 30, 0.35), rgba(40, 20, 35, 0.4));
color: #d4c0a8;
padding: 9px 14px;
font-size: 13px;
letter-spacing: 0.08em;
border-left: 3px solid rgba(160, 50, 45, 0.7);
margin-bottom: 12px;
border-radius: 6px;
font-weight: 500;
}
ai article {
display: block;
margin-bottom: 14px;
}
ai article p {
margin: 0 0 10px 0;
text-indent: 2em;
}
ai details {
background: rgba(18, 14, 26, 0.6);
border: 1px solid rgba(140, 100, 80, 0.25);
border-radius: 10px;
padding: 0;
margin-top: 14px;
overflow: hidden;
}
ai details summary {
background: linear-gradient(135deg, rgba(100, 35, 35, 0.4), rgba(60, 30, 45, 0.4));
color: #e0c8a8;
padding: 10px 14px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
list-style: none;
user-select: none;
border-bottom: 1px solid rgba(140, 100, 80, 0.2);
transition: all 0.3s ease;
}
ai details summary:hover {
background: linear-gradient(135deg, rgba(120, 40, 40, 0.5), rgba(70, 35, 50, 0.5));
}
ai details summary::-webkit-details-marker,
ai details summary::marker {
display: none;
}
ai details[open] summary {
border-bottom-color: rgba(160, 100, 80, 0.35);
}
ai details p {
margin: 0;
padding: 11px 14px;
border-bottom: 1px solid rgba(120, 90, 70, 0.15);
}
ai details p:last-child {
border-bottom: none;
}
ai details p[t]::before {
content: attr(t);
display: inline-block;
background: rgba(140, 50, 45, 0.35);
color: #e8c8a0;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
margin-right: 9px;
vertical-align: middle;
}
ai details f {
display: inline-block;
color: #f0d4b0;
font-weight: 600;
font-size: 14px;
margin-right: 8px;
letter-spacing: 0.04em;
}
ai details d {
display: block;
color: #c8b89a;
font-size: 13px;
line-height: 1.7;
margin: 4px 0;
padding-left: 18px;
position: relative;
}
ai details d::before {
content: '▸';
position: absolute;
left: 4px;
color: rgba(180, 120, 90, 0.5);
font-size: 11px;
}
ai details p[t="父亲"] {
background: rgba(80, 40, 50, 0.12);
}
ai details p[t="女儿"] {
background: rgba(60, 40, 70, 0.12);
}
ai details p[t="交互焦点"] {
background: rgba(100, 50, 40, 0.15);
}
ai details p[t="环境细节"] {
background: rgba(50, 60, 70, 0.12);
}
ai details p[t="触发提示"] {
background: rgba(120, 60, 30, 0.12);
}
ai details p[t="推荐行动"] {
background: rgba(70, 50, 60, 0.12);
}
ai details p[t="触发提示"] d {
color: #d8b898;
font-style: italic;
}
ai details p[t="触发提示"] d::before {
content: '⚠';
color: rgba(220, 140, 80, 0.7);
}
ai details p[t="推荐行动"] d::before {
content: '';
}
@media (max-width: 600px) {
ai {
font-size: 14px;
}
ai hd {
font-size: 12px;
padding: 8px 12px;
}
ai details summary {
font-size: 13px;
padding: 9px 12px;
}
ai details p {
padding: 10px 12px;
}
ai details f {
font-size: 13px;
}
ai details d {
font-size: 12px;
padding-left: 16px;
}
ai details p[t]::before {
font-size: 11px;
padding: 2px 8px;
}
}
ai article {
display: block;
background: linear-gradient(135deg, rgba(25, 18, 30, 0.5), rgba(30, 22, 28, 0.45));
border: 1px solid rgba(120, 90, 80, 0.2);
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
ai article p {
margin: 0 0 12px 0;
text-indent: 2em;
color: #e0d4c8;
line-height: 1.85;
position: relative;
}
ai article p:last-child {
margin-bottom: 0;
}
ai article p::after {
content: '';
display: block;
width: 30%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(140, 100, 80, 0.3), transparent);
margin: 10px auto 0;
}
ai article p:last-child::after {
display: none;
}

/* ===== 顶部栏美化 ===== */
.sticky.w-full.top-0.flex.items-center {
background: linear-gradient(135deg, rgba(18, 15, 28, 0.95), rgba(25, 20, 32, 0.95)) !important;
backdrop-filter: blur(12px) !important;
border-bottom: 1px solid rgba(100, 80, 120, 0.25) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

/* 模型选择器容器 */
#ai-model-selector .group.flex.items-center {
background: linear-gradient(135deg, rgba(60, 45, 80, 0.3), rgba(50, 40, 70, 0.3)) !important;
border: 1px solid rgba(120, 90, 150, 0.35) !important;
border-radius: 8px !important;
padding: 6px 12px !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

#ai-model-selector .group.flex.items-center:hover {
background: linear-gradient(135deg, rgba(70, 55, 90, 0.4), rgba(60, 50, 80, 0.4)) !important;
border-color: rgba(140, 110, 180, 0.5) !important;
box-shadow: 0 3px 10px rgba(100, 70, 150, 0.3) !important;
}

/* 模型名称文字 */
#ai-model-selector .truncate.text-\[13px\] {
color: #e8dff5 !important;
font-weight: 600 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* 下拉箭头 */
#ai-model-selector .shrink-0.flex.items-center svg {
color: #c8b8e0 !important;
transition: transform 0.3s ease !important;
}

#ai-model-selector .group:hover .shrink-0.flex.items-center svg {
transform: translateY(2px) !important;
}

/* 历史记录图标(移动端) */
.sticky.w-full.top-0 svg.lucide-clock-8 {
color: #d8c8f0 !important;
transition: all 0.3s ease !important;
}

.sticky.w-full.top-0 svg.lucide-clock-8:hover {
color: #f0e0ff !important;
transform: scale(1.1) !important;
}

/* 历史记录未读角标 */
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
background: linear-gradient(135deg, #ff4757, #ff6348) !important;
box-shadow: 0 0 6px rgba(255, 71, 87, 0.6) !important;
}

/* 音乐按钮 */
.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
background: rgba(80, 60, 100, 0.2) !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2):hover {
background: rgba(100, 80, 130, 0.35) !important;
box-shadow: 0 2px 8px rgba(100, 70, 150, 0.4) !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
color: #d8c8f0 !important;
}

/* 移动端设置图标 */
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
color: #d8c8f0 !important;
transition: all 0.3s ease !important;
}

.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]):hover {
color: #f0e0ff !important;
transform: rotate(90deg) !important;
}

/* 设置按钮 */
#header-setting-button {
background: linear-gradient(135deg, rgba(60, 45, 80, 0.3), rgba(50, 40, 70, 0.3)) !important;
border: 1px solid rgba(120, 90, 150, 0.3) !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}

#header-setting-button:hover {
background: linear-gradient(135deg, rgba(80, 60, 100, 0.4), rgba(70, 55, 90, 0.4)) !important;
border-color: rgba(140, 110, 180, 0.5) !important;
box-shadow: 0 3px 10px rgba(100, 70, 150, 0.3) !important;
}

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

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

/* ===== 开场白选择器美化 ===== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
background: linear-gradient(135deg, rgba(40, 32, 55, 0.4), rgba(35, 28, 50, 0.4)) !important;
border: 1px solid rgba(110, 85, 140, 0.35) !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
background: linear-gradient(135deg, rgba(50, 40, 65, 0.5), rgba(45, 35, 60, 0.5)) !important;
border-color: rgba(130, 100, 160, 0.5) !important;
box-shadow: 0 3px 10px rgba(80, 60, 120, 0.3) !important;
}

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: #c8b8e0 !important;
transition: all 0.3s ease !important;
}

div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="SlidersH"] {
transform: translateX(-2px) !important;
}

div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="ChevronDown"] {
transform: translateY(2px) !important;
}

/* ===== 按钮栏美化 ===== */
#ai-mod-button2 {
background: linear-gradient(180deg, rgba(20, 16, 28, 0.4), transparent) !important;
padding: 10px 0 !important;
}

#ai-mod-button2 button.MuiButton-root {
background: linear-gradient(135deg, rgba(60, 45, 80, 0.35), rgba(50, 40, 70, 0.35)) !important;
border: 1px solid rgba(120, 90, 150, 0.3) !important;
color: #e8dff5 !important;
border-radius: 8px !important;
padding: 8px 16px !important;
font-weight: 600 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
background: linear-gradient(135deg, rgba(80, 60, 100, 0.5), rgba(70, 55, 90, 0.5)) !important;
border-color: rgba(140, 110, 180, 0.5) !important;
box-shadow: 0 3px 10px rgba(100, 70, 150, 0.4) !important;
transform: translateY(-2px) !important;
}

#ai-mod-button2 button.MuiButton-root svg {
color: #c8b8e0 !important;
transition: transform 0.3s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg {
transform: scale(1.1) !important;
}

/* ===== 底部栏美化 ===== */
.bg-gradient-to-t {
background: linear-gradient(180deg, rgba(18, 15, 28, 0.95), transparent) !important;
backdrop-filter: blur(8px) !important;
}

#ai-chat-bottom-input {
background: linear-gradient(135deg, rgba(35, 28, 50, 0.5), rgba(30, 24, 45, 0.5)) !important;
border: 1px solid rgba(120, 90, 150, 0.35) !important;
border-radius: 12px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease !important;
}

#ai-chat-bottom-input:focus-within {
border-color: rgba(140, 110, 180, 0.6) !important;
box-shadow: 0 6px 20px rgba(100, 70, 150, 0.4) !important;
}

#ai-chat-input {
background: transparent !important;
color: #e8dff5 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
font-size: 15px !important;
line-height: 1.6 !important;
}

#ai-chat-input::placeholder {
color: rgba(200, 184, 224, 0.5) !important;
font-style: italic !important;
}

#ai-chat-input::selection {
background: rgba(120, 90, 150, 0.4) !important;
color: #fff !important;
}

/* ===== 分页栏美化(仅颜色和视觉样式) ===== */
.MuiPaginationItem-root {
color: #d8c8f0 !important;
background: rgba(60, 45, 80, 0.25) !important;
border: 1px solid rgba(120, 90, 150, 0.3) !important;
border-radius: 6px !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}

.MuiPaginationItem-root:hover {
background: rgba(80, 60, 100, 0.4) !important;
border-color: rgba(140, 110, 180, 0.5) !important;
color: #f0e0ff !important;
box-shadow: 0 2px 8px rgba(100, 70, 150, 0.3) !important;
}

.MuiPaginationItem-root.Mui-selected {
background: linear-gradient(135deg, rgba(100, 75, 130, 0.6), rgba(90, 70, 120, 0.6)) !important;
border-color: rgba(140, 110, 180, 0.7) !important;
color: #fff !important;
box-shadow: 0 3px 10px rgba(100, 70, 150, 0.5) !important;
}

.MuiPaginationItem-root.Mui-disabled {
background: rgba(40, 32, 55, 0.2) !important;
border-color: rgba(80, 60, 100, 0.2) !important;
color: rgba(200, 184, 224, 0.3) !important;
}

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

.MuiStack-root.css-1uwir8f {
background: rgba(40, 32, 55, 0.3) !important;
border: 1px solid rgba(120, 90, 150, 0.25) !important;
border-radius: 8px !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
color: #d8c8f0 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

.MuiInputBase-input {
background: rgba(50, 40, 70, 0.4) !important;
color: #e8dff5 !important;
border: 1px solid rgba(120, 90, 150, 0.3) !important;
border-radius: 6px !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
transition: all 0.3s ease !important;
}

.MuiInputBase-input:focus {
border-color: rgba(140, 110, 180, 0.6) !important;
box-shadow: 0 0 0 3px rgba(100, 70, 150, 0.2) !important;
}

/* ===== 评论区美化 ===== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
background: linear-gradient(135deg, rgba(22, 18, 32, 0.95), rgba(28, 22, 38, 0.95)) !important;
backdrop-filter: blur(10px) !important;
border-top: 1px solid rgba(120, 90, 150, 0.3) !important;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* 评论区标题 */
div.text-lg.font-bold {
color: #f0e0ff !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* 个人评分文字 */
p.MuiTypography-body1.text-grey-600 {
color: #c8b8e0 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* 评分星星 */
span.MuiRating-root {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

span.MuiRating-iconEmpty svg {
color: rgba(200, 184, 224, 0.3) !important;
}

span.MuiRating-iconFilled svg {
color: #ffa500 !important;
filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.5)) !important;
}

span.text-orange-500 {
color: #ffa500 !important;
font-weight: 700 !important;
text-shadow: 0 0 8px rgba(255, 165, 0, 0.4) !important;
}

/* 评论输入框容器 */
div.flex.flex-col.border-gray-200 {
background: rgba(35, 28, 50, 0.4) !important;
border: 1px solid rgba(120, 90, 150, 0.35) !important;
border-radius: 10px !important;
transition: all 0.3s ease !important;
}

div.flex.flex-col.border-gray-200:focus-within {
border-color: rgba(140, 110, 180, 0.6) !important;
box-shadow: 0 4px 12px rgba(100, 70, 150, 0.3) !important;
}

/* 评论输入框 */
textarea.rc-textarea {
background: transparent !important;
color: #e8dff5 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
line-height: 1.6 !important;
}

textarea.rc-textarea::placeholder {
color: rgba(200, 184, 224, 0.4) !important;
}

/* 字数统计 */
div.bg-gray-100.text-gray-500 {
background: rgba(50, 40, 70, 0.3) !important;
color: #a89cc0 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* 发送评论按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
background: linear-gradient(135deg, rgba(100, 75, 130, 0.5), rgba(90, 70, 120, 0.5)) !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
background: linear-gradient(135deg, rgba(120, 90, 150, 0.6), rgba(110, 85, 140, 0.6)) !important;
box-shadow: 0 4px 12px rgba(100, 70, 150, 0.4) !important;
transform: translateY(-2px) !important;
}

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

div.cursor-pointer.group:hover svg[data-icon="Send03"] {
transform: translateX(3px) !important;
}

/* 分割线 */
div.style_divider__mW0YX {
background: linear-gradient(90deg, transparent, rgba(120, 90, 150, 0.3), transparent) !important;
height: 1px !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary,
button.MuiButton-outlinedPrimary {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
border-radius: 8px !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}

button.MuiButton-containedPrimary {
background: linear-gradient(135deg, rgba(100, 75, 130, 0.6), rgba(90, 70, 120, 0.6)) !important;
color: #fff !important;
border: 1px solid rgba(140, 110, 180, 0.5) !important;
box-shadow: 0 2px 8px rgba(100, 70, 150, 0.3) !important;
}

button.MuiButton-outlinedPrimary {
background: rgba(60, 45, 80, 0.2) !important;
color: #d8c8f0 !important;
border: 1px solid rgba(120, 90, 150, 0.35) !important;
}

button.MuiButton-outlinedPrimary:hover {
background: rgba(70, 55, 90, 0.35) !important;
border-color: rgba(130, 100, 160, 0.5) !important;
}

/* 评论列表容器 */
div.p-3.overflow-y-auto {
background: rgba(18, 14, 26, 0.3) !important;
}

/* 单条评论 */
div.group.ml-0 {
background: rgba(35, 28, 50, 0.4) !important;
border: 1px solid rgba(120, 90, 150, 0.2) !important;
border-radius: 10px !important;
padding: 12px !important;
margin-bottom: 10px !important;
transition: all 0.3s ease !important;
}

div.group.ml-0:hover {
background: rgba(45, 35, 60, 0.5) !important;
border-color: rgba(130, 100, 160, 0.35) !important;
box-shadow: 0 2px 10px rgba(80, 60, 120, 0.3) !important;
}

/* 用户头像 */
div.group img.rounded-full {
border: 2px solid rgba(140, 110, 180, 0.5) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* 用户名 */
div.text-sm.text-grey-600 span.font-bold {
color: #e8dff5 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* "（你）"标签 */
span.text-\[10px\] {
background: rgba(100, 75, 130, 0.4) !important;
color: #d8c8f0 !important;
border-radius: 4px !important;
padding: 2px 6px !important;
}

/* 评论内容 */
div.break-all {
color: #d8c8f0 !important;
line-height: 1.7 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* 时间戳 */
div.text-xs.text-grey-600 {
color: #a89cc0 !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* 点赞按钮 */
button.text-gray-400 {
color: #a89cc0 !important;
transition: all 0.3s ease !important;
border-radius: 6px !important;
}

button.text-gray-400:hover {
color: #ff6b9d !important;
background: rgba(255, 107, 157, 0.1) !important;
}

button.text-gray-400 svg {
transition: transform 0.3s ease !important;
}

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

/* 回复文字 */
span.cursor-pointer {
color: #b8a8d0 !important;
transition: all 0.3s ease !important;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

span.cursor-pointer:hover {
color: #d8c8f0 !important;
text-decoration: underline !important;
}

/* 回复区域边框 */
div.ml-8.border-l {
border-color: rgba(120, 90, 150, 0.3) !important;
}