/* 
 * 主题：Re:从零开始的异世界生活 (Re:Zero)
 * 风格：深渊暗紫 / 死亡回归粉红 / 魔女霓虹
 * 特效：全局星云径向渐变背景、毛玻璃质感、悬停魔力光晕
 */

/* 引入异世界古典衬线字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&display=swap');

/* ==========================================
   1. 全局背景与评论区主容器 (深渊之底)
========================================== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: #0d0015 !important;
    background-image: radial-gradient(ellipse at 20% 50%, rgba(139,92,246,0.08) 0%, transparent 70%), radial-gradient(ellipse at 80% 20%, rgba(231,76,111,0.06) 0%, transparent 60%) !important;
    font-family: 'Noto Serif SC', serif !important;
    color: #e8dff5 !important;
}

/* ==========================================
   2. 顶部栏 (微光结界)
========================================== */
.sticky.w-full.top-0.flex.items-center {
    background: rgba(13, 0, 21, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #e8dff5 !important;
    font-family: 'Noto Serif SC', serif !important;
    font-weight: bold !important;
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.6) !important;
}
/* 顶部图标静止与悬停态 (紫转粉红) */
#ai-model-selector .shrink-0.flex.items-center svg,
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
#header-setting-button svg {
    color: #8b5cf6 !important;
    transition: all 0.3s ease !important;
}
#ai-model-selector .shrink-0.flex.items-center svg:hover,
.sticky.w-full.top-0 svg.lucide-clock-8:hover,
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2:hover,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]):hover,
#header-setting-button svg:hover {
    color: #e74c6f !important;
    filter: drop-shadow(0 0 8px rgba(231, 76, 111, 0.8)) !important;
}

/* ==========================================
   3. 开场白选择器 (魔力刻印)
========================================== */
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: rgba(20, 5, 40, 0.85) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    box-shadow: inset 0 0 10px rgba(139, 92, 246, 0.1) !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: #e74c6f !important;
    box-shadow: 0 0 15px rgba(231, 76, 111, 0.4) !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: #8b5cf6 !important;
}

/* ==========================================
   4. 底部输入栏 (言灵咏唱区)
========================================== */
.bg-gradient-to-t {
    background: transparent !important; /* 移除默认遮罩，展现深渊底色 */
}
#ai-chat-bottom-input {
    background: rgba(20, 5, 40, 0.85) !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15) !important;
}
#ai-chat-input {
    color: #e8dff5 !important;
    font-family: 'Noto Serif SC', serif !important;
}
#ai-chat-input::placeholder {
    color: #a89bc2 !important;
}
#ai-chat-input::selection {
    background: rgba(231, 76, 111, 0.5) !important;
    color: #fff !important;
}

/* ==========================================
   5. 评论区核心元素 (死者之书)
========================================== */
/* 标题与评分 */
div.text-lg.font-bold {
    color: #e74c6f !important;
    text-shadow: 0 0 12px rgba(231, 76, 111, 0.5) !important;
    letter-spacing: 1px !important;
}
p.MuiTypography-body1.text-grey-600 {
    color: #a89bc2 !important;
}
span.MuiRating-iconEmpty svg {
    color: rgba(139, 92, 246, 0.25) !important;
}
span.MuiRating-iconFilled svg {
    color: #ffd700 !important;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)) !important;
}
span.text-orange-500 {
    color: #e74c6f !important;
    font-weight: 900 !important;
}

/* 评论输入区域 */
div.flex.flex-col.border-gray-200 {
    border-color: rgba(139, 92, 246, 0.3) !important;
    background: rgba(20, 5, 40, 0.6) !important;
    border-radius: 8px !important;
}
textarea.rc-textarea {
    background: transparent !important;
    color: #e8dff5 !important;
}
div.bg-gray-100.text-gray-500 {
    background: rgba(13, 0, 21, 0.9) !important;
    color: #a89bc2 !important;
    border-top: 1px solid rgba(139, 92, 246, 0.2) !important;
}

/* 发送按钮 (怠惰的魔女光晕) */
@keyframes witchBreath {
    0% { box-shadow: 0 0 5px rgba(231, 76, 111, 0.4); }
    50% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.8); }
    100% { box-shadow: 0 0 5px rgba(231, 76, 111, 0.4); }
}
div.cursor-pointer.group.flex.items-center.justify-center {
    background: linear-gradient(135deg, #e74c6f, #8b5cf6) !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
    animation: witchBreath 2s infinite ease-in-out !important;
    transform: scale(1.05) !important;
}
div[data-state="closed"] svg[data-icon="Send03"] {
    color: #fff !important;
}

/* 分割线与排序按钮 */
div.style_divider__mW0YX {
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent) !important;
    height: 1px !important;
}
button.MuiButton-containedPrimary {
    background: linear-gradient(135deg, rgba(231,76,111,0.5), rgba(139,92,246,0.5)) !important;
    border: 1px solid #e74c6f !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(231, 76, 111, 0.3) !important;
}
button.MuiButton-outlinedPrimary {
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: #a89bc2 !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

/* 评论列表项 (记忆碎片卡片) */
div.group.ml-0 {
    background: rgba(20, 5, 40, 0.5) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(4px) !important;
    transition: all 0.3s ease !important;
}
div.group.ml-0:hover {
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(139, 92, 246, 0.1) !important;
}
div.group img.rounded-full {
    border: 2px solid #8b5cf6 !important;
    padding: 2px !important;
    background: #0d0015 !important;
}
div.text-sm.text-grey-600 span.font-bold {
    color: #8b5cf6 !important;
    text-shadow: 0 0 6px rgba(139, 92, 246, 0.4) !important;
}
span.text-\[10px\] {
    color: #e74c6f !important;
    background: rgba(231, 76, 111, 0.15) !important;
    border: 1px solid rgba(231, 76, 111, 0.3) !important;
}
div.break-all {
    color: #e8dff5 !important;
    line-height: 1.7 !important;
}
div.text-xs.text-grey-600 {
    color: rgba(168, 155, 194, 0.5) !important;
}
button.text-gray-400 {
    color: rgba(168, 155, 194, 0.7) !important;
}
button.text-gray-400:hover {
    color: #e74c6f !important;
}
button.text-gray-400:hover svg {
    filter: drop-shadow(0 0 6px rgba(231, 76, 111, 0.7)) !important;
}
span.cursor-pointer {
    color: #8b5cf6 !important;
}
span.cursor-pointer:hover {
    color: #e74c6f !important;
    text-shadow: 0 0 5px rgba(231, 76, 111, 0.5) !important;
}
div.ml-8.border-l {
    border-left-color: rgba(139, 92, 246, 0.3) !important;
}

/* ==========================================
   6. 分页栏 (时间线跃迁)
========================================== */
.MuiPaginationItem-root {
    color: #a89bc2 !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}
.MuiPaginationItem-root.Mui-selected {
    background: linear-gradient(135deg, rgba(231,76,111,0.5), rgba(139,92,246,0.5)) !important;
    color: #fff !important;
    border-color: #e74c6f !important;
    box-shadow: 0 0 12px rgba(231, 76, 111, 0.4) !important;
}
.MuiPaginationItem-icon {
    color: #8b5cf6 !important;
}
.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #a89bc2 !important;
}
.MuiInputBase-input {
    color: #e8dff5 !important;
    background: rgba(20, 5, 40, 0.85) !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    border-radius: 6px !important;
}



/* Re:Zero 主题美化 - 统一聊天框 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #e3f2fd 0%, #fce4ec 50%, #e1f5fe 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(100, 181, 246, 0.15), 0 2px 8px rgba(244, 143, 177, 0.1) !important;
    border: 1px solid rgba(100, 181, 246, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    position: relative !important;
}

.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow: 0 6px 20px rgba(100, 181, 246, 0.25), 0 3px 12px rgba(244, 143, 177, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* 异世界纹理背景 - 使用伪元素与隔离 */
.bg-gray-100\/90.relative.inline-block::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: 
        radial-gradient(circle at 20% 30%, rgba(100, 181, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(244, 143, 177, 0.08) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.bg-gray-100\/90.relative.inline-block {
    isolation: isolate !important;
}

/* 主要文本内容 - 纯黑色字体 */
.markdown-body {
    color: #000000 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

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

/* 底部操作按钮 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #1976d2 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #ec407a !important;
    background-color: rgba(236, 64, 122, 0.08) !important;
}

/* 模型名称文本 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #424242 !important;
    font-weight: 500 !important;
}

/* Token消耗文本 */
.text-orange-500 {
    color: #f57c00 !important;
    font-weight: 600 !important;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 12px !important;
    }
}