/* 移除顶部默认颜色条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* ==========================================
   一、 聊天对话框美化 (Chat Bubbles)
   ========================================== */

/* 1. 玩家输入框 - 暖白信纸风 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(135deg, #ffffff 0%, #fef8f0 100%) !important;
    border: 3px dashed #8b1c2b !important;
    border-radius: 12px !important;
    box-shadow: 
        0 4px 12px rgba(139, 28, 43, 0.1),
        inset 0 0 40px rgba(139, 28, 43, 0.02) !important;
    position: relative !important;
    padding: 20px !important;
    margin: 8px 0 !important;
}

/* 信纸纹理 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(139, 28, 43, 0.03) 22px, rgba(139, 28, 43, 0.03) 23px) !important;
    border-radius: 12px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) .markdown-body {
    color: #2a1c1d !important;
    font-family: 'Noto Serif SC', 'Georgia', serif !important;
    position: relative !important;
    z-index: 2 !important;
    line-height: 1.8 !important;
}

/* 2. AI 输出框 - 浅粉白法式边框 */
.chat-answer-container .bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #ffffff 0%, #fdf5f5 100%) !important;
    border: 4px double #8b1c2b !important;
    border-radius: 16px !important;
    box-shadow: 
        0 6px 20px rgba(139, 28, 43, 0.12),
        inset 0 0 60px rgba(139, 28, 43, 0.03),
        0 0 0 6px rgba(139, 28, 43, 0.05) !important;
    position: relative !important;
    padding: 24px !important;
    margin: 8px 0 !important;
    min-height: 80px !important;
}

.chat-answer-container .bg-gray-100\/90.relative.inline-block .markdown-body {
    color: #2a1c1d !important; /* 修改为深色字体以在浅色背景上显示 */
    font-family: 'Noto Serif SC', 'Georgia', serif !important;
    position: relative !important;
    z-index: 2 !important;
    line-height: 1.85 !important;
}

/* ==========================================
   3. 纯 SVG 绘制跳跃爱心加载动画 ❤️
   ========================================== */

/* 隐藏原加载元素 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 动画容器：利用 background-image 承载 3 个独立 SVG 爱心与下虚线 */
.chat-answer-container .flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    min-height: 80px !important;
    width: 100% !important;
    display: block !important;
    
    /* 依次为：爱心1(酒红)、爱心2(玫瑰粉)、爱心3(浅樱粉)、下虚线 */
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238b1c2b' 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'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d45d79' 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'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ea9cb1' 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'/%3E%3C/svg%3E"),
        repeating-linear-gradient(to right, #8b1c2b 0px, #8b1c2b 8px, transparent 8px, transparent 14px) !important;
    background-repeat: no-repeat !important;
    animation: svg-hearts-bounce 1.5s ease-in-out infinite !important;
}

/* 上虚线 (保留利用 ::before 实现) */
.chat-answer-container .flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    width: 60% !important;
    height: 2px !important;
    background-image: repeating-linear-gradient(to right, #8b1c2b 0px, #8b1c2b 8px, transparent 8px, transparent 14px) !important;
    position: absolute !important;
    top: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* 废弃之前的 Emoji 容器 */
.chat-answer-container .flex.items-center.justify-center.w-6.h-5::after {
    display: none !important;
}

/* 爱心依次跳跃动画：通过精准控制 background-position 和 background-size 模拟物理跳跃与形变 */
@keyframes svg-hearts-bounce {
    0%, 80%, 100% {
        background-position: 
            calc(50% - 32px) center,  /* 左 */
            50% center,               /* 中 */
            calc(50% + 32px) center,  /* 右 */
            center calc(100% - 15px); /* 下虚线 */
        background-size: 20px 20px, 20px 20px, 20px 20px, 60% 2px;
    }
    /* 第一个爱心起跳 */
    15% {
        background-position: 
            calc(50% - 32px) calc(50% - 12px), 
            50% center, 
            calc(50% + 32px) center, 
            center calc(100% - 15px);
        background-size: 24px 24px, 20px 20px, 20px 20px, 60% 2px;
    }
    /* 第二个爱心起跳 */
    30% {
        background-position: 
            calc(50% - 32px) center, 
            50% calc(50% - 12px), 
            calc(50% + 32px) center, 
            center calc(100% - 15px);
        background-size: 20px 20px, 24px 24px, 20px 20px, 60% 2px;
    }
    /* 第三个爱心起跳 */
    45% {
        background-position: 
            calc(50% - 32px) center, 
            50% center, 
            calc(50% + 32px) calc(50% - 12px), 
            center calc(100% - 15px);
        background-size: 20px 20px, 20px 20px, 24px 24px, 60% 2px;
    }
}

/* 移动端间距微调 */
@media (max-width: 480px) {
    @keyframes svg-hearts-bounce {
        0%, 80%, 100% {
            background-position: calc(50% - 26px) center, 50% center, calc(50% + 26px) center, center calc(100% - 15px);
            background-size: 18px 18px, 18px 18px, 18px 18px, 60% 2px;
        }
        15% {
            background-position: calc(50% - 26px) calc(50% - 10px), 50% center, calc(50% + 26px) center, center calc(100% - 15px);
            background-size: 22px 22px, 18px 18px, 18px 18px, 60% 2px;
        }
        30% {
            background-position: calc(50% - 26px) center, 50% calc(50% - 10px), calc(50% + 26px) center, center calc(100% - 15px);
            background-size: 18px 18px, 22px 22px, 18px 18px, 60% 2px;
        }
        45% {
            background-position: calc(50% - 26px) center, 50% center, calc(50% + 26px) calc(50% - 10px), center calc(100% - 15px);
            background-size: 18px 18px, 18px 18px, 22px 22px, 60% 2px;
        }
    }
}

/* ==========================================
   二、 全局 UI 与 顶部/底部栏
   ========================================== */

/* 顶部栏 */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(180deg, #ffffff 0%, #fef8f0 100%) !important;
    border-bottom: 4px solid #8b1c2b !important;
    padding: 14px 18px !important;
    position: relative !important;
}

.sticky.w-full.top-0.flex.items-center::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(139, 28, 43, 0.04) 1px, transparent 1px) !important;
    background-size: 4px 4px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* 模型选择器 */
#ai-model-selector .group.flex.items-center {
    background: #ffffff !important;
    border: 3px solid #8b1c2b !important;
    border-radius: 20px !important;
    padding: 8px 18px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    z-index: 2 !important;
}

#ai-model-selector .group.flex.items-center:hover {
    background: #fdf5f5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(139, 28, 43, 0.15) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
    color: #8b1c2b !important;
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    transition: color 0.2s ease !important;
}

#ai-model-selector .shrink-0.flex.items-center svg {
    color: #8b1c2b !important;
    transition: all 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: #2a1c1d !important;
    stroke-width: 2.4px !important;
    transition: all 0.3s ease !important;
}

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

.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
    background-color: #8b1c2b !important; /* 仅作为小红点点缀 */
    border: 2px solid #ffffff !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
    border: 3px solid #8b1c2b !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2):hover {
    background: #fdf5f5 !important;
    transform: rotate(360deg) scale(1.08) !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
    color: #8b1c2b !important;
    stroke-width: 2.4px !important;
    transition: color 0.2s ease !important;
}

.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
    color: #2a1c1d !important;
    transition: transform 0.3s ease !important;
}

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

#header-setting-button {
    background: #ffffff !important;
    border: 3px solid #8b1c2b !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

#header-setting-button:hover {
    background: #fdf5f5 !important;
    transform: scale(1.08) !important;
    box-shadow: 0 6px 16px rgba(139, 28, 43, 0.15) !important;
}

#header-setting-button svg {
    color: #8b1c2b !important;
    transition: color 0.2s ease !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: #ffffff !important;
    border: 3px solid #8b1c2b !important;
    border-radius: 18px !important;
    transition: all 0.3s ease !important;
}

div.flex.items-center.h-9.cursor-pointer.group:hover {
    transform: translateX(4px) !important;
    background: #fdf5f5 !important;
    box-shadow: 0 4px 12px rgba(139, 28, 43, 0.1) !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: #8b1c2b !important;
    stroke-width: 2.4px !important;
}

/* 底部栏与输入区域 */
#ai-chat-bottom-input {
    background: linear-gradient(180deg, #ffffff 0%, #fef8f0 100%) !important;
    border: 3px solid #8b1c2b !important;
    border-radius: 24px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(139, 28, 43, 0.08) !important;
}

#ai-chat-bottom-input:focus-within {
    border-color: #8b1c2b !important;
    transform: translateY(-3px) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(139, 28, 43, 0.15) !important;
}

#ai-chat-input {
    background: transparent !important;
    color: #2a1c1d !important;
    font-family: 'Noto Serif SC', 'Georgia', serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    caret-color: #8b1c2b !important;
}

#ai-chat-input::placeholder {
    color: rgba(42, 28, 29, 0.4) !important;
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-style: italic !important;
}

#ai-chat-input::selection {
    background: rgba(139, 28, 43, 0.15) !important;
    color: #8b1c2b !important;
}

/* Mod 按钮栏（改为浅色底红字） */
#ai-mod-button2 button.MuiButton-root {
    background: #ffffff !important;
    border: 2px solid #8b1c2b !important;
    color: #8b1c2b !important;
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 12px rgba(139, 28, 43, 0.1) !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    background: #fdf5f5 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(139, 28, 43, 0.15) !important;
}

/* 分页栏（避免深色底） */
.MuiPaginationItem-root {
    background: #ffffff !important;
    border: 2px solid #8b1c2b !important;
    color: #8b1c2b !important;
    font-family: 'Georgia', serif !important;
    font-weight: 600 !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.MuiPaginationItem-root:hover {
    background: #fdf5f5 !important;
    transform: scale(1.1) !important;
}

.MuiPaginationItem-root.Mui-selected {
    background: #fdf5f5 !important;
    color: #8b1c2b !important;
    border-color: #8b1c2b !important;
    box-shadow: 0 4px 12px rgba(139, 28, 43, 0.15) !important;
}

.MuiPaginationItem-root.Mui-disabled {
    border-color: rgba(139, 28, 43, 0.2) !important;
    color: rgba(139, 28, 43, 0.3) !important;
    background: transparent !important;
}

.MuiStack-root.css-1uwir8f {
    background: #ffffff !important;
    border: 3px solid #8b1c2b !important;
    border-radius: 16px !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #8b1c2b !important;
    font-family: 'Georgia', serif !important;
    font-weight: 600 !important;
}

.MuiInputBase-input {
    background: transparent !important;
    border: 2px solid #8b1c2b !important;
    color: #8b1c2b !important;
    font-family: 'Georgia', serif !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    caret-color: #8b1c2b !important;
}

.MuiInputBase-input:focus {
    border-color: #8b1c2b !important;
    background: #fdf5f5 !important;
    box-shadow: 0 0 0 3px rgba(139, 28, 43, 0.1) !important;
}

/* ==========================================
   三、 评论区全局美化
   ========================================== */

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(180deg, #ffffff 0%, #fef8f0 100%) !important;
    border-top: 5px solid #8b1c2b !important;
    position: relative !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(139, 28, 43, 0.03) 1px, transparent 1px) !important;
    background-size: 4px 4px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

div.text-lg.font-bold {
    color: #8b1c2b !important;
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    letter-spacing: 1px !important;
    border-bottom: 4px double #8b1c2b !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 2 !important;
}

div.text-lg.font-bold::after {
    content: '🌹' !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
}

p.MuiTypography-body1.text-grey-600 {
    color: #2a1c1d !important;
    font-family: 'Noto Serif SC', 'Georgia', serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

span.MuiRating-root {
    position: relative !important;
    z-index: 2 !important;
}

span.MuiRating-iconEmpty svg {
    color: rgba(139, 28, 43, 0.1) !important;
    stroke: #8b1c2b !important;
    stroke-width: 1.2px !important;
}

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

span.text-orange-500 {
    color: #8b1c2b !important;
    font-family: 'Georgia', serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

/* 评论输入框 */
div.flex.flex-col.border-gray-200 {
    border: 3px solid #8b1c2b !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.3s ease !important;
}

div.flex.flex-col.border-gray-200:focus-within {
    border-color: #8b1c2b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(139, 28, 43, 0.1) !important;
    background: #fdf5f5 !important;
}

textarea.rc-textarea {
    background: transparent !important;
    color: #2a1c1d !important;
    font-family: 'Noto Serif SC', 'Georgia', serif !important;
    font-weight: 500 !important;
    caret-color: #8b1c2b !important;
}

textarea.rc-textarea::placeholder {
    color: rgba(42, 28, 29, 0.4) !important;
    font-style: italic !important;
}

textarea.rc-textarea::selection {
    background: rgba(139, 28, 43, 0.15) !important;
    color: #8b1c2b !important;
}

div.bg-gray-100.text-gray-500 {
    background: transparent !important;
    color: #8b1c2b !important;
    font-family: 'Georgia', serif !important;
    font-weight: 600 !important;
    border-top: 2px solid rgba(139, 28, 43, 0.15) !important;
}

/* 评论发送按钮 (改为亮底色) */
div.cursor-pointer.group.flex.items-center.justify-center {
    background: #ffffff !important;
    border: 3px solid #8b1c2b !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 4px 12px rgba(139, 28, 43, 0.1) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center::before {
    content: '🍰' !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    z-index: 3 !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: #fdf5f5 !important;
    transform: scale(1.1) rotate(15deg) !important;
    box-shadow: 0 8px 20px rgba(139, 28, 43, 0.15) !important;
}

div[data-state="closed"] svg[data-icon="Send03"] {
    opacity: 0 !important;
}

div.style_divider__mW0YX {
    background: linear-gradient(to right, transparent, rgba(139, 28, 43, 0.3), transparent) !important;
    height: 2px !important;
    position: relative !important;
    z-index: 2 !important;
}

.MuiStack-root.css-1dmzxoz {
    position: relative !important;
    z-index: 2 !important;
}

button.MuiButton-containedPrimary,
button.MuiButton-outlinedPrimary {
    background: #ffffff !important;
    border: 3px solid #8b1c2b !important;
    color: #8b1c2b !important;
    font-family: 'Georgia', serif !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
}

button.MuiButton-containedPrimary:hover,
button.MuiButton-outlinedPrimary:hover {
    background: #fdf5f5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(139, 28, 43, 0.15) !important;
}

div.p-3.overflow-y-auto {
    position: relative !important;
    z-index: 2 !important;
}

/* 评论卡片 */
div.group.ml-0 {
    background: #ffffff !important;
    border: 3px solid #8b1c2b !important;
    border-left: 6px solid #8b1c2b !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

div.group.ml-0:hover {
    background: #fef8f0 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 6px 16px rgba(139, 28, 43, 0.08) !important;
}

div.group img.rounded-full {
    border: 3px solid #8b1c2b !important;
    border-radius: 50% !important;
}

div.text-sm.text-grey-600 span.font-bold {
    color: #8b1c2b !important;
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-weight: 800 !important;
}

/* 标签避免深色底 */
span.text-\[10px\] {
    color: #8b1c2b !important;
    background: #fdf5f5 !important;
    font-family: 'Georgia', serif !important;
    font-weight: 700 !important;
    border: 1px solid #8b1c2b !important;
    padding: 3px 9px !important;
    margin-left: 6px !important;
    border-radius: 12px !important;
}

div.break-all {
    color: #2a1c1d !important;
    font-family: 'Noto Serif SC', 'Georgia', serif !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
}

div.text-xs.text-grey-600 {
    color: rgba(139, 28, 43, 0.6) !important;
    font-family: 'Georgia', serif !important;
    font-weight: 500 !important;
}

button.text-gray-400 {
    background: #ffffff !important;
    border: 2px solid #8b1c2b !important;
    color: #8b1c2b !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

button.text-gray-400:hover {
    background: #fdf5f5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(139, 28, 43, 0.1) !important;
}

span.cursor-pointer {
    color: #8b1c2b !important;
    font-family: 'Georgia', serif !important;
    font-weight: 700 !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
}

span.cursor-pointer:hover {
    border-bottom-color: #8b1c2b !important;
}

div.ml-8.border-l {
    border-left: 3px solid rgba(139, 28, 43, 0.3) !important;
    padding-left: 16px !important;
}

/* 其他装饰 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #8b1c2b !important;
    font-weight: 700 !important;
    font-family: 'Georgia', serif !important;
}

#ai-chat-input {
    background-image: repeating-linear-gradient(
        transparent,
        transparent 24px,
        rgba(139, 28, 43, 0.03) 24px,
        rgba(139, 28, 43, 0.03) 25px
    ) !important;
}

/* 角落装饰 - 玫瑰印章 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"]::after {
    content: '🌹' !important;
    font-size: 24px !important;
    position: absolute !important;
    top: 20px !important;
    right: 30px !important;
    opacity: 0.15 !important;
    z-index: 1 !important;
    filter: drop-shadow(0 2px 4px rgba(139, 28, 43, 0.1)) !important;
}

ai {
  --bg1: #ffffff;
  --bg2: #fdf5f5;
  --pink: #e7a4be;
  --pink-l: #f6cdda;
  --pink-d: #b6748c;
  --gold: #c9a05f;
  --gold-l: #e7c78c;
  --text-main: #2a1c1d; /* 替换原本的 --cream 作为全局文字色 */
  --wine: #8b1c2b;
  --line: rgba(201, 160, 95, 0.4);
  display: block;
  position: relative;
  margin: 6px 0;
  padding: 16px 14px 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-main);
  border-radius: 10px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(231, 164, 190, 0.25), transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(231, 164, 190, 0.15), 0 0 0 5px var(--line),
    inset 0 0 26px rgba(255, 255, 255, 0.8), 0 8px 24px rgba(139, 28, 43, 0.08);
}

ai::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  pointer-events: none;
  border: 1px solid var(--line);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M4 40 C4 22 22 4 40 4' fill='none' stroke='%23c9a05f' stroke-width='1.1' opacity='.7'/%3E%3Ccircle cx='11' cy='33' r='3' fill='none' stroke='%23e7a4be' stroke-width='1'/%3E%3Cpath d='M4 28 C12 28 16 24 16' fill='none' stroke='%23c9a05f' stroke-width='.8' opacity='.5'/%3E%3C/svg%3E") no-repeat top left,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M40 40 C40 22 22 4 4 4' fill='none' stroke='%23c9a05f' stroke-width='1.1' opacity='.7'/%3E%3Ccircle cx='33' cy='33' r='3' fill='none' stroke='%23e7a4be' stroke-width='1'/%3E%3C/svg%3E") no-repeat top right;
}

ai::after {
  content: "❦";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--pink-d);
  font-size: 15px;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

ai details {
  position: relative;
  margin: 11px 2px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(247, 205, 218, 0.25), rgba(255, 255, 255, 0.6));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

ai details::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(var(--pink-l), var(--pink-d), var(--pink-l));
}

ai summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 9px 38px 9px 30px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--text-main);
  background: linear-gradient(100deg, rgba(246, 205, 218, 0.5), rgba(255, 255, 255, 0.8));
  border-bottom: 1px solid var(--line);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

ai summary::-webkit-details-marker {
  display: none;
}

ai summary::before {
  content: "❀";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pink-d);
  font-size: 13px;
}

ai summary::after {
  content: "✦";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  color: var(--gold);
  transition: transform 0.4s ease, color 0.3s;
}

ai details[open] summary::after {
  transform: translateY(-50%) rotate(180deg) scale(1.1);
  color: var(--pink-d);
}

ai details[open] summary {
  background: linear-gradient(100deg, rgba(246, 205, 218, 0.8), rgba(255, 255, 255, 0.9));
}

ai summary:hover {
  filter: brightness(0.96); /* 浅色模式下，hover稍微变暗一点更有质感 */
}

ai summary:hover::before {
  animation: bloom 1.4s ease-in-out infinite;
}

@keyframes bloom {
  50% {
    transform: translateY(-50%) rotate(45deg) scale(1.25);
  }
}

ai details > p,
ai details > ul,
ai details > ol,
ai details > table {
  margin: 8px 13px;
}

ai details > p:first-of-type {
  margin-top: 11px;
}

ai details > *:last-child {
  margin-bottom: 12px;
}

ai p {
  margin: 6px 13px;
}

ai strong {
  color: var(--wine); /* 浅色背景下用深酒红，保证阅读清晰度 */
  font-weight: bold;
  text-shadow: 0 0 5px rgba(231, 164, 190, 0.3);
}

ai ul {
  list-style: none;
  padding-left: 6px;
}

ai ul li {
  position: relative;
  padding: 3px 0 3px 20px;
  font-size: 14px;
}

ai ul li::before {
  content: "◆";
  position: absolute;
  left: 3px;
  top: 3px;
  font-size: 9px;
  color: var(--gold);
}

ai ul li strong {
  color: var(--pink-d);
}

ai ol {
  counter-reset: act;
  list-style: none;
  padding-left: 6px;
}

ai ol li {
  counter-increment: act;
  position: relative;
  margin: 6px 4px;
  padding: 7px 10px 7px 38px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: rgba(246, 205, 218, 0.15);
  transition: 0.28s;
}

ai ol li::before {
  content: counter(act);
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  line-height: 19px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff; /* 浅色模式下数字用白色，底色是粉色 */
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pink-l), var(--pink-d));
  box-shadow: 0 0 5px rgba(231, 164, 190, 0.4);
}

ai ol li:hover {
  transform: translateX(5px);
  border-color: var(--line);
  background: linear-gradient(90deg, rgba(246, 205, 218, 0.4), rgba(255, 255, 255, 0.5));
  box-shadow: -4px 0 8px -4px var(--pink);
}

ai table {
  border-collapse: collapse;
  width: calc(100% - 26px);
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

ai th {
  background: linear-gradient(var(--pink-l), rgba(246, 205, 218, 0.6));
  color: var(--wine);
  font-weight: bold;
  padding: 6px 7px;
  letter-spacing: 0.5px;
  border: 1px solid var(--line);
}

ai td {
  padding: 5px 7px;
  border: 1px solid rgba(201, 160, 95, 0.25);
  color: var(--text-main);
}

ai tbody tr:nth-child(odd) {
  background: rgba(246, 205, 218, 0.1);
}

ai tbody tr:hover {
  background: rgba(231, 164, 190, 0.25);
}

/* ===== 进度条 ===== */
ai bar {
  display: block;
  height: 8px;
  margin: 4px 2px 7px;
  border-radius: 5px;
  background: rgba(246, 205, 218, 0.3);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 3px rgba(139, 28, 43, 0.08);
  overflow: hidden;
  position: relative;
}

ai bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--pink), var(--pink-d) 55%, var(--gold));
  box-shadow: 0 0 6px rgba(231, 164, 190, 0.6);
  animation: bpulse 2.2s ease-in-out infinite;
  transition: width 0.6s ease;
}

@keyframes bpulse {
  50% {
    box-shadow: 0 0 11px rgba(231, 164, 190, 0.9);
  }
}

ai bar[v="0"]::before { width: 0; }
ai bar[v="10"]::before { width: 10%; }
ai bar[v="20"]::before { width: 20%; }
ai bar[v="30"]::before { width: 30%; }
ai bar[v="40"]::before { width: 40%; }
ai bar[v="50"]::before { width: 50%; }
ai bar[v="60"]::before { width: 60%; }
ai bar[v="70"]::before { width: 70%; }
ai bar[v="80"]::before { width: 80%; }
ai bar[v="90"]::before { width: 90%; }
ai bar[v="100"]::before { width: 100%; }

/* ===== NPC 感情框 ===== */
ai box {
  display: block;
  position: relative;
  margin: 9px 13px 7px;
  padding: 11px 14px 10px 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-main);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(246, 205, 218, 0.35));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 14px rgba(246, 205, 218, 0.4), 0 2px 7px rgba(139, 28, 43, 0.05);
}

ai box::before {
  content: "♡";
  position: absolute;
  left: -2px;
  top: -11px;
  font-size: 17px;
  color: var(--pink-d);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
}

ai box::after {
  content: "❧";
  position: absolute;
  right: 7px;
  bottom: 3px;
  font-size: 14px;
  color: var(--gold);
  opacity: 0.8;
}

ai box b {
  color: var(--wine);
  font-weight: bold;
}