/* ===== 粉韵柔光 · 全局整合版 ===== */
:root {
    --pink-soft: #fce4ec;
    --pink-mid: #f8bbd0;
    --pink-bold: #f48fb1;
    --pink-deep: #f06292;
    --pink-dark: #ec407a;
    --text-strong: #c2185b;
    --text-deep: #880e4f;
    --border-light: rgba(244, 143, 177, 0.3);
    --border-medium: rgba(244, 143, 177, 0.5);
    --shadow-small: rgba(244, 143, 177, 0.2);
    --shadow-medium: rgba(244, 143, 177, 0.4);
    --shadow-large: rgba(244, 143, 177, 0.6);
    --white-glass: rgba(255, 255, 255, 0.6);
    --white-solid: rgba(255, 255, 255, 0.95);
    --chat-bg: #fefafc;  /* 柔和的暖白色，带一丝极淡的粉调 */
}

/* ===== 基础过渡效果 ===== */
* {
    transition: all 0.2s ease !important;
}

/* ===== 顶部栏美化 ===== */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(135deg, var(--pink-soft) 0%, var(--pink-mid) 50%, var(--pink-bold) 100%) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px var(--shadow-medium) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    animation: gradientShift 8s ease infinite !important;
    background-size: 200% 200% !important;
}

/* 模型选择器 */
#ai-model-selector .group.flex.items-center {
    background: var(--white-glass) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px var(--shadow-small) !important;
}

#ai-model-selector .group.flex.items-center:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 16px var(--shadow-medium) !important;
    transform: translateY(-1px) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
    color: var(--text-strong) !important;
    font-weight: 600 !important;
}

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

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

/* 设置按钮 */
#header-setting-button {
    background: var(--white-glass) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

#header-setting-button:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 16px var(--shadow-medium) !important;
    transform: scale(1.05) !important;
}

/* ===== 开场白选择器美化 ===== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"],
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]) {
    background: linear-gradient(90deg, rgba(252, 228, 236, 0.8), rgba(248, 187, 208, 0.8)) !important;
    border: 1px solid var(--border-medium) !important;
    box-shadow: 0 2px 10px var(--shadow-small) !important;
    transition: all 0.3s ease !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover,
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]):hover {
    background: linear-gradient(90deg, rgba(248, 187, 208, 0.9), rgba(244, 143, 177, 0.9)) !important;
    box-shadow: 0 4px 16px var(--shadow-medium) !important;
    transform: translateY(-2px) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg {
    color: var(--text-strong) !important;
    transition: all 0.3s ease !important;
}

div.flex.items-center.h-9.cursor-pointer.group:hover svg {
    color: var(--text-deep) !important;
    filter: drop-shadow(0 0 4px var(--shadow-medium)) !important;
}

/* ===== 按钮栏美化 ===== */
#ai-mod-button2 {
    background: linear-gradient(180deg, rgba(252, 228, 236, 0.3), rgba(248, 187, 208, 0.3)) !important;
    padding: 12px !important;
    border-radius: 16px !important;
}

#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(252, 228, 236, 0.7)) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-strong) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px var(--shadow-small) !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    background: linear-gradient(135deg, rgba(248, 187, 208, 0.8), rgba(244, 143, 177, 0.8)) !important;
    box-shadow: 0 4px 16px var(--shadow-large) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

#ai-mod-button2 button.MuiButton-root svg {
    color: var(--pink-deep) !important;
    transition: transform 0.3s ease !important;
}

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

/* ===== 底部栏美化 ===== */
.bg-gradient-to-t {
    background: linear-gradient(to top, rgba(252, 228, 236, 0.95), rgba(248, 187, 208, 0.8), transparent) !important;
}

#ai-chat-bottom-input {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid var(--border-medium) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px var(--shadow-medium), inset 0 2px 10px rgba(252, 228, 236, 0.5) !important;
    transition: all 0.3s ease !important;
}

#ai-chat-bottom-input:focus-within {
    border-color: rgba(244, 143, 177, 0.8) !important;
    box-shadow: 0 6px 30px var(--shadow-large), inset 0 2px 10px rgba(252, 228, 236, 0.7) !important;
    transform: translateY(-2px) !important;
}

#ai-chat-input {
    color: var(--text-deep) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

#ai-chat-input::placeholder {
    color: var(--pink-deep) !important;
    opacity: 0.7 !important;
}

#ai-chat-input::selection {
    background: var(--shadow-medium) !important;
    color: var(--text-deep) !important;
}

/* ===== 分页栏美化 ===== */
.MuiPaginationItem-root {
    color: var(--text-strong) !important;
    border-color: var(--border-medium) !important;
    background: rgba(252, 228, 236, 0.3) !important;
    transition: all 0.3s ease !important;
}

.MuiPaginationItem-root:hover {
    background: rgba(248, 187, 208, 0.6) !important;
    border-color: rgba(244, 143, 177, 0.7) !important;
    box-shadow: 0 2px 10px var(--shadow-medium) !important;
}

.MuiPaginationItem-root.Mui-selected {
    background: linear-gradient(135deg, var(--pink-bold), var(--pink-deep)) !important;
    color: white !important;
    border-color: var(--pink-deep) !important;
    box-shadow: 0 4px 15px var(--shadow-large) !important;
}

.MuiPaginationItem-root.Mui-disabled {
    color: rgba(194, 24, 91, 0.3) !important;
    background: rgba(252, 228, 236, 0.2) !important;
}

.MuiPaginationItem-icon {
    color: var(--pink-deep) !important;
}

.MuiStack-root.css-1uwir8f {
    background: rgba(252, 228, 236, 0.4) !important;
    border-radius: 12px !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: var(--text-strong) !important;
}

.MuiInputBase-input {
    color: var(--text-deep) !important;
    border-color: var(--border-medium) !important;
}

/* ===== 评论区美化 ===== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(to bottom, rgba(252, 228, 236, 0.95), var(--white-solid)) !important;
    backdrop-filter: blur(10px) !important;
}

div.text-lg.font-bold {
    color: var(--text-strong) !important;
    text-shadow: 0 2px 4px var(--shadow-medium) !important;
}

p.MuiTypography-body1.text-grey-600 {
    color: var(--pink-deep) !important;
}

span.MuiRating-iconEmpty svg {
    color: var(--border-light) !important;
}

span.MuiRating-iconFilled svg {
    color: var(--pink-deep) !important;
    filter: drop-shadow(0 0 4px var(--shadow-medium)) !important;
    animation: starPulse 2s ease-in-out infinite !important;
}

span.text-orange-500 {
    color: var(--pink-deep) !important;
    font-weight: 700 !important;
}

div.flex.flex-col.border-gray-200 {
    border-color: var(--border-light) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px !important;
}

textarea.rc-textarea {
    color: var(--text-deep) !important;
    background: rgba(252, 228, 236, 0.2) !important;
    border-radius: 8px !important;
}

textarea.rc-textarea::placeholder {
    color: var(--pink-deep) !important;
    opacity: 0.6 !important;
}

div.bg-gray-100.text-gray-500 {
    background: rgba(248, 187, 208, 0.2) !important;
    color: var(--pink-deep) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center {
    background: linear-gradient(135deg, var(--pink-bold), var(--pink-deep)) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px var(--shadow-medium) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: linear-gradient(135deg, var(--pink-deep), var(--pink-dark)) !important;
    box-shadow: 0 4px 20px var(--shadow-large) !important;
    transform: scale(1.05) !important;
}

div[data-state="closed"] svg[data-icon="Send03"] {
    color: white !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)) !important;
}

div.style_divider__mW0YX {
    background: linear-gradient(90deg, transparent, var(--border-medium), transparent) !important;
}

button.MuiButton-containedPrimary {
    background: linear-gradient(135deg, var(--pink-bold), var(--pink-deep)) !important;
    color: white !important;
    box-shadow: 0 2px 10px var(--shadow-medium) !important;
}

button.MuiButton-outlinedPrimary {
    border-color: var(--border-medium) !important;
    color: var(--text-strong) !important;
    background: rgba(252, 228, 236, 0.3) !important;
}

button.MuiButton-containedPrimary:hover,
button.MuiButton-outlinedPrimary:hover {
    box-shadow: 0 4px 16px var(--shadow-large) !important;
    transform: translateY(-2px) !important;
}

div.group.ml-0 {
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-light) !important;
    transition: all 0.3s ease !important;
}

div.group.ml-0:hover {
    background: rgba(252, 228, 236, 0.6) !important;
    border-color: var(--border-medium) !important;
    box-shadow: 0 4px 16px var(--shadow-small) !important;
}

div.group img.rounded-full {
    border: 2px solid var(--border-medium) !important;
    box-shadow: 0 2px 8px var(--shadow-medium) !important;
}

div.text-sm.text-grey-600 span.font-bold {
    color: var(--text-strong) !important;
}

span.text-\[10px\] {
    color: var(--pink-deep) !important;
    background: rgba(252, 228, 236, 0.5) !important;
    border-radius: 4px !important;
}

div.break-all {
    color: var(--text-deep) !important;
}

div.text-xs.text-grey-600 {
    color: var(--pink-deep) !important;
}

button.text-gray-400 {
    color: var(--pink-bold) !important;
    transition: all 0.3s ease !important;
}

button.text-gray-400:hover {
    color: var(--pink-deep) !important;
    transform: scale(1.2) !important;
}

button.text-gray-400 svg {
    filter: drop-shadow(0 0 2px var(--shadow-medium)) !important;
}

span.cursor-pointer {
    color: var(--pink-deep) !important;
    transition: all 0.3s ease !important;
}

span.cursor-pointer:hover {
    color: var(--pink-dark) !important;
    text-shadow: 0 0 8px var(--shadow-medium) !important;
}

div.ml-8.border-l {
    border-color: var(--border-light) !important;
}

/* ===== 鼠标悬停柔光 ===== */
button:hover, div[class*="cursor-pointer"]:hover {
    filter: drop-shadow(0 0 12px var(--shadow-medium)) !important;
}

/* ===== 输入框呼吸光效 ===== */
@keyframes breathe {
    0%, 100% { box-shadow: 0 0 10px var(--shadow-medium); }
    50% { box-shadow: 0 0 25px var(--shadow-large); }
}

#ai-chat-input:focus {
    animation: breathe 2s ease-in-out infinite !important;
}

/* ===== 隐藏顶部颜色装饰条 ===== */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* ===== 统一聊天框美化（纯白柔和版）===== */
.bg-gray-100\/90.relative.inline-block {
    background: #fff8fb !important;  /* 纯白带极淡粉色，完全不透明 */
    border-radius: 18px !important;
    box-shadow: 0 4px 20px var(--shadow-small), 0 0 40px rgba(252, 228, 236, 0.3), inset 0 1px 4px rgba(255, 255, 255, 0.9) !important;  /* 外部阴影保留暧昧氛围，添加内阴影增加立体感 */
    border: 1px solid rgba(244, 143, 177, 0.3) !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    overflow: visible !important;
    animation: fadeInUp 0.5s ease-out !important;
}

/* 动态光晕效果保留，但调整透明度避免影响可读性 */
.bg-gray-100\/90.relative.inline-block::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, var(--pink-soft), var(--pink-mid), var(--pink-bold), var(--pink-deep)) !important;
    border-radius: 18px !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    background-size: 300% 300% !important;
    animation: gradientRotate 6s ease infinite !important;
}

.bg-gray-100\/90.relative.inline-block:hover::before {
    opacity: 0.35 !important;  /* 悬停时依然有光晕，但不会影响文字 */
}

/* 确保文字完全清晰可见 */
.markdown-body {
    color: #3a1524 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.7 !important;
    position: relative !important;
    z-index: 2 !important;  /* 提高z-index确保文字在最上层 */
}

/* 代码块保持完全不透明背景 */
.markdown-body code {
    background: #fef0f5 !important;  /* 浅粉色背景，完全不透明 */
    color: var(--text-strong) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border-light) !important;
}

.markdown-body pre {
    background: #fef5f8 !important;  /* 浅粉色背景，完全不透明 */
    border: 1px solid var(--border-light) !important;
    border-radius: 8px !important;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gradientRotate {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes starPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 聊天框底部元素美化 ===== */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: var(--text-strong) !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    color: var(--text-deep) !important;
    transform: scale(1.05) !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: var(--pink-deep) !important;
    font-weight: 600 !important;
}

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

/* 加载容器设置 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 60px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 主爱心（SVG SMIL动画） */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    width: 30px !important;
    height: 30px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23f06292" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"><animate attributeName="opacity" values="0.4;1;0.4" dur="1.5s" repeatCount="indefinite"/><animateTransform attributeName="transform" type="scale" values="0.8;1.2;0.8" dur="1.5s" repeatCount="indefinite" additive="sum"/></path></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 2 !important;
}

/* 辅助粉色泡泡 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: '' !important;
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="50" r="8" fill="%23fce4ec" opacity="0.6"><animate attributeName="cy" values="50;20;50" dur="2s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/></circle><circle cx="50" cy="50" r="6" fill="%23f8bbd0" opacity="0.7"><animate attributeName="cy" values="50;25;50" dur="2.3s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.7;1;0.7" dur="2.3s" repeatCount="indefinite"/></circle><circle cx="80" cy="50" r="7" fill="%23f48fb1" opacity="0.5"><animate attributeName="cy" values="50;22;50" dur="1.8s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.5;1;0.5" dur="1.8s" repeatCount="indefinite"/></circle></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 1 !important;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 14px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5 {
        width: 50px !important;
        height: 40px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 24px !important;
        height: 24px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::after {
        width: 40px !important;
        height: 40px !important;
    }
}

/* 低动效模式 */
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23f06292" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"><animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/></path></svg>') !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::after {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="35" r="8" fill="%23fce4ec" opacity="0.8"/><circle cx="50" cy="35" r="6" fill="%23f8bbd0" opacity="0.8"/><circle cx="80" cy="35" r="7" fill="%23f48fb1" opacity="0.8"/></svg>') !important;
    }
    
    * {
        animation-duration: 0.001s !important;
    }
}

/* ===== 文字选中高亮 ===== */
.markdown-body ::selection {
    background: var(--shadow-medium) !important;
    color: #4a1a2c !important;
}