/* =============================================
   绝世唐门 · 星河璀璨
   主题参数：
   base-hue: 230  base-sat: 70%  is-dark: 1
   accent-hue: 200 accent-sat: 90%
   颜色计算结果：
   bg-deep    : hsl(230, 70%, 5%)
   bg-default : hsl(230, 70%, 8%)
   bg-paper   : hsl(230, 65%, 12%)
   bg-raised  : hsl(230, 60%, 16%)
   bg-hover   : hsl(230, 55%, 22%)
   text-main  : hsl(220, 15%, 92%)
   text-sub   : hsl(220, 10%, 70%)
   text-muted : hsl(220, 8%, 45%)
   border     : hsl(230, 50%, 25%)
   accent     : hsl(200, 90%, 65%)
   accent-dim : hsl(200, 40%, 20%)
   accent-text: hsl(200, 80%, 75%)
   glow       : 0 0 14px hsla(200, 90%, 60%, 0.5)
   glow-soft  : 0 0 6px hsla(200, 90%, 60%, 0.3)
   star-glow  : 0 0 20px hsla(180, 100%, 80%, 0.4)

   亮点设计：
   ① 引用块（blockquote）：星光蓝左边框 + 星光文字 + 斜体 + 星星装饰（✨）
   ② 加载动画：三个旋转的星环（SVG SMIL 实现）
   ③ 分隔线：星星图案（✨ ✨ ✨）
   ④ 背景：深邃星空蓝，带有微妙的星光闪烁效果
   ============================================= */

/* ===== 危险区域 ===== */
/* 隐藏装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 代码块 */
.markdown-body pre {
    background: hsl(230, 65%, 12%) !important;
    border: 1px solid hsl(230, 50%, 25%) !important;
    border-left: 3px solid hsl(200, 90%, 65%) !important;
    border-radius: 6px !important;
    padding: 1em 1.2em !important;
    overflow-x: auto !important;
    box-shadow: 0 0 10px hsla(200, 90%, 60%, 0.15) !important;
}
.markdown-body pre code {
    background: transparent !important;
    color: hsl(220, 15%, 92%) !important;
}
.markdown-body :not(pre)>code {
    background: hsl(200, 40%, 20%) !important;
    color: hsl(200, 80%, 75%) !important;
    padding: 0.15em 0.45em !important;
    border-radius: 4px !important;
}

/* details 折叠块 */
details {
    background: hsl(230, 65%, 12%) !important;
    border: 1px solid hsl(230, 50%, 25%) !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
    overflow: hidden !important;
    transition: border-color 0.15s ease !important;
}
details[open] {
    border-color: hsl(200, 90%, 65%) !important;
    box-shadow: 0 0 15px hsla(200, 90%, 60%, 0.2) !important;
}
details summary {
    background: hsl(230, 60%, 16%) !important;
    color: hsl(220, 15%, 92%) !important;
    padding: 8px 12px 8px 32px !important;
    display: block !important;
    position: relative !important;
    border-bottom: 1px solid hsl(230, 50%, 25%) !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    list-style: none !important;
    user-select: none !important;
}

/* 大标签 - 使用星星图标 */
details summary::before {
    content: '✦' !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: hsl(200, 90%, 65%) !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}
details[open] summary::before {
    content: '✧' !important;
    color: hsl(180, 90%, 70%) !important;
    text-shadow: 0 0 8px hsla(200, 90%, 60%, 0.5) !important;
}
details summary::-webkit-details-marker {
    display: none !important;
}

/* 小标签 - 嵌套的details使用圆点 */
details details {
    background: hsl(230, 65%, 14%) !important;
    border: 1px solid hsl(230, 50%, 22%) !important;
    margin: 4px 8px !important;
}
details details summary {
    background: hsl(230, 60%, 18%) !important;
    padding: 6px 12px 6px 28px !important;
    font-weight: 500 !important;
    font-size: 0.95em !important;
}
details details summary::before {
    content: '●' !important;
    font-size: 8px !important;
    left: 10px !important;
}
details details[open] summary::before {
    content: '○' !important;
}

/* 三级标签 - 使用短横线 */
details details details summary::before {
    content: '—' !important;
    font-size: 12px !important;
    left: 10px !important;
}
details details details[open] summary::before {
    content: '–' !important;
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-track {
    background: hsl(230, 70%, 5%) !important;
}
::-webkit-scrollbar-thumb {
    background: hsl(200, 40%, 30%) !important;
    border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(200, 90%, 65%) !important;
}

/* 选区 & 占位符 */
::placeholder {
    color: hsl(220, 8%, 45%) !important;
    opacity: 1 !important;
}
::selection {
    background: hsl(200, 40%, 30%) !important;
    color: hsl(200, 80%, 75%) !important;
}

/* 输入框强制可见 */
#ai-chat-input {
    background: hsl(230, 65%, 12%) !important;
    color: hsl(220, 15%, 92%) !important;
    caret-color: hsl(200, 90%, 65%) !important;
}
textarea.rc-textarea {
    background: hsl(230, 65%, 12%) !important;
    color: hsl(220, 15%, 92%) !important;
    border: 1px solid hsl(230, 50%, 25%) !important;
}

/* ===== 全局与布局 ===== */
body, #root, .h-screen {
    background: linear-gradient(135deg, hsl(230, 70%, 5%) 0%, hsl(240, 60%, 8%) 50%, hsl(220, 70%, 6%) 100%) !important;
    color: hsl(220, 15%, 92%) !important;
}
.sticky.w-full.top-0.flex.items-center {
    background: hsl(230, 65%, 10%) !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid hsl(230, 50%, 25%) !important;
}

/* ===== 顶部导航与模型选择器 ===== */
#ai-model-selector .group.flex.items-center {
    color: hsl(220, 15%, 92%) !important;
}
#ai-model-selector .group.flex.items-center:hover {
    color: hsl(200, 90%, 65%) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
    color: hsl(220, 10%, 70%) !important;
}
#ai-model-selector .shrink-0.flex.items-center svg {
    fill: hsl(220, 8%, 45%) !important;
}
#ai-model-selector .shrink-0.flex.items-center:hover svg {
    fill: hsl(200, 90%, 65%) !important;
}
#header-setting-button {
    color: hsl(220, 8%, 45%) !important;
}
#header-setting-button:hover {
    color: hsl(200, 90%, 65%) !important;
}

/* ===== 开场白区域 ===== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: hsl(230, 60%, 16%) !important;
    border: 1px solid hsl(230, 50%, 25%) !important;
    color: hsl(220, 15%, 92%) !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"] {
    fill: hsl(220, 8%, 45%) !important;
}

/* ===== 侧边栏 ===== */
.shadow-lg.border-r.border-gray-200 {
    background: hsl(230, 65%, 10%) !important;
    border-right-color: hsl(230, 50%, 25%) !important;
}
.MuiList-root {
    background: transparent !important;
    color: hsl(220, 15%, 92%) !important;
}
.conversation-text {
    color: hsl(220, 10%, 70%) !important;
}

/* ===== 功能按钮 ===== */
#ai-mod-button2 button.MuiButton-root {
    background: hsl(230, 60%, 16%) !important;
    color: hsl(220, 15%, 92%) !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    background: hsl(230, 55%, 22%) !important;
}
#ai-mod-button2 button.MuiButton-root svg {
    fill: hsl(220, 8%, 45%) !important;
}

/* ===== 聊天气泡 ===== */
/* AI回复气泡 - 梦幻星河主题 */
.bg-gray-100\/90.relative.inline-block {
    background: 
        radial-gradient(ellipse 80% 50% at 20% 40%, hsla(200, 80%, 25%, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, hsla(280, 70%, 20%, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, hsla(220, 60%, 15%, 0.2) 0%, transparent 60%),
        linear-gradient(160deg, 
            hsl(232, 75%, 9%) 0%, 
            hsl(238, 70%, 11%) 20%,
            hsl(228, 72%, 10%) 40%,
            hsl(242, 68%, 8%) 60%,
            hsl(225, 70%, 9%) 80%,
            hsl(235, 65%, 7%) 100%) !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 20px 24px !important;
    box-shadow: 
        0 0 0 1px hsla(200, 90%, 70%, 0.25),
        0 0 0 2px hsla(230, 70%, 15%, 0.8),
        0 0 40px hsla(200, 90%, 60%, 0.15),
        0 0 80px hsla(220, 80%, 50%, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 hsla(200, 90%, 80%, 0.12),
        inset 0 -1px 0 hsla(230, 50%, 10%, 0.5) !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(4px) !important;
    transform: translateZ(0) !important;
}
/* 星云漂浮效果 */
.bg-gray-100\/90.relative.inline-block::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: 
        radial-gradient(ellipse 30% 20% at 25% 30%, hsla(200, 100%, 85%, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 25% 15% at 75% 70%, hsla(280, 100%, 80%, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 60% 20%, hsla(180, 100%, 90%, 0.05) 0%, transparent 50%) !important;
    animation: nebulaFloat 20s ease-in-out infinite !important;
    pointer-events: none !important;
}
/* 璀璨星空 */
.bg-gray-100\/90.relative.inline-block::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: 
        /* 大星星 - 明亮 */
        radial-gradient(2px 2px at 12% 15%, hsla(200, 100%, 95%, 1), transparent),
        radial-gradient(2.5px 2.5px at 88% 25%, hsla(180, 100%, 95%, 1), transparent),
        radial-gradient(2px 2px at 45% 85%, hsla(220, 100%, 95%, 1), transparent),
        radial-gradient(2.2px 2.2px at 72% 8%, hsla(200, 100%, 95%, 1), transparent),
        /* 中星星 - 柔和 */
        radial-gradient(1.5px 1.5px at 28% 42%, hsla(200, 90%, 88%, 0.9), transparent),
        radial-gradient(1.6px 1.6px at 65% 55%, hsla(180, 90%, 85%, 0.85), transparent),
        radial-gradient(1.4px 1.4px at 35% 28%, hsla(220, 85%, 88%, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 82% 72%, hsla(200, 90%, 86%, 0.8), transparent),
        radial-gradient(1.3px 1.3px at 18% 68%, hsla(180, 85%, 85%, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 55% 12%, hsla(220, 90%, 88%, 0.9), transparent),
        /* 小星星 - 微弱 */
        radial-gradient(1px 1px at 8% 52%, hsla(200, 80%, 80%, 0.7), transparent),
        radial-gradient(1px 1px at 38% 78%, hsla(180, 80%, 78%, 0.65), transparent),
        radial-gradient(1px 1px at 92% 45%, hsla(220, 80%, 82%, 0.7), transparent),
        radial-gradient(1px 1px at 22% 92%, hsla(200, 80%, 80%, 0.6), transparent),
        radial-gradient(1px 1px at 68% 35%, hsla(180, 80%, 78%, 0.7), transparent),
        radial-gradient(1px 1px at 48% 62%, hsla(220, 80%, 80%, 0.65), transparent),
        radial-gradient(1px 1px at 78% 88%, hsla(200, 80%, 82%, 0.6), transparent),
        radial-gradient(1px 1px at 5% 35%, hsla(180, 80%, 80%, 0.55), transparent),
        radial-gradient(1px 1px at 95% 15%, hsla(220, 80%, 78%, 0.6), transparent) !important;
    pointer-events: none !important;
    animation: starTwinkle 5s ease-in-out infinite !important;
}
/* 星云漂浮动画 */
@keyframes nebulaFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(2%, 1%) rotate(1deg); }
    50% { transform: translate(-1%, 2%) rotate(-1deg); }
    75% { transform: translate(1%, -1%) rotate(0.5deg); }
}
/* 悬停效果 - 增强星光 */
.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow: 
        0 0 0 1px hsla(200, 100%, 80%, 0.4),
        0 0 0 2px hsla(230, 70%, 15%, 0.8),
        0 0 60px hsla(200, 100%, 70%, 0.25),
        0 0 100px hsla(220, 80%, 60%, 0.15),
        0 16px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 hsla(200, 100%, 90%, 0.2),
        inset 0 -1px 0 hsla(230, 50%, 10%, 0.5) !important;
}
.bg-gray-100\/90.relative.inline-block:hover::after {
    animation: starTwinkle 2s ease-in-out infinite !important;
}
/* 用户消息气泡 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: 
        radial-gradient(ellipse 70% 40% at 30% 50%, hsla(200, 70%, 20%, 0.12) 0%, transparent 50%),
        linear-gradient(155deg, 
            hsl(238, 65%, 13%) 0%, 
            hsl(244, 60%, 15%) 35%,
            hsl(232, 62%, 12%) 65%,
            hsl(240, 58%, 11%) 100%) !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 18px 22px !important;
    box-shadow: 
        0 0 0 1px hsla(200, 85%, 65%, 0.2),
        0 0 0 2px hsla(235, 60%, 12%, 0.8),
        0 0 30px hsla(200, 90%, 60%, 0.12),
        0 8px 30px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 hsla(200, 90%, 80%, 0.1) !important;
}
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after {
    opacity: 0.4 !important;
}
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before {
    opacity: 0.3 !important;
}
/* 气泡内容层 - 确保文字在星星之上 */
.bg-gray-100\/90.relative.inline-block > * {
    position: relative !important;
    z-index: 1 !important;
}
.markdown-body {
    color: hsl(220, 12%, 93%) !important;
    line-height: 1.75 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.02em !important;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    color: hsl(200, 90%, 85%) !important;
    border-bottom: 1px solid hsla(200, 60%, 50%, 0.3) !important;
    text-shadow: 0 0 20px hsla(200, 100%, 70%, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    padding-bottom: 10px !important;
    margin-bottom: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}
.markdown-body h1 {
    font-size: 1.9em !important;
    text-shadow: 0 0 30px hsla(200, 100%, 75%, 0.6), 0 0 50px hsla(180, 100%, 60%, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
.markdown-body h2 {
    font-size: 1.5em !important;
}
.markdown-body h3 {
    font-size: 1.25em !important;
}
.markdown-body blockquote {
    border-left: 4px solid !important;
    border-image: linear-gradient(180deg, 
        hsla(200, 100%, 80%, 0.9) 0%, 
        hsla(180, 100%, 70%, 0.6) 100%) 1 !important;
    background: 
        radial-gradient(ellipse 100% 100% at 0% 50%, hsla(200, 80%, 30%, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, 
            hsla(200, 50%, 12%, 0.9) 0%, 
            hsla(210, 45%, 10%, 0.95) 100%) !important;
    color: hsl(200, 90%, 82%) !important;
    font-style: italic !important;
    padding: 14px 22px !important;
    margin: 20px 0 !important;
    position: relative !important;
    border-radius: 0 16px 16px 0 !important;
    box-shadow: 
        inset 0 0 40px hsla(200, 100%, 60%, 0.06),
        inset 4px 0 20px hsla(200, 100%, 70%, 0.08),
        0 4px 15px rgba(0, 0, 0, 0.25) !important;
}
/* 星星装饰 */
.markdown-body blockquote::after {
    content: '✨' !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 12px !important;
    font-size: 20px !important;
    opacity: 0.7 !important;
    animation: starTwinkle 2.5s ease-in-out infinite !important;
}
.markdown-body table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
.markdown-body th,
.markdown-body td {
    border: none !important;
    border-bottom: 1px solid hsla(200, 40%, 30%, 0.3) !important;
    border-right: 1px solid hsla(200, 40%, 30%, 0.2) !important;
}
.markdown-body th:last-child,
.markdown-body td:last-child {
    border-right: none !important;
}
.markdown-body tr:last-child td {
    border-bottom: none !important;
}
.markdown-body th {
    background: linear-gradient(135deg, 
        hsl(230, 60%, 16%) 0%, 
        hsl(235, 55%, 14%) 100%) !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    color: hsl(200, 90%, 82%) !important;
    text-shadow: 0 0 10px hsla(200, 90%, 70%, 0.3) !important;
}
.markdown-body td {
    padding: 10px 14px !important;
    background: hsla(230, 50%, 10%, 0.6) !important;
}
.markdown-body tr:hover td {
    background: hsla(200, 50%, 12%, 0.6) !important;
}
.markdown-body strong {
    color: hsl(200, 95%, 78%) !important;
    text-shadow: 0 0 12px hsla(200, 100%, 70%, 0.4) !important;
    font-weight: 600 !important;
}
.markdown-body em {
    color: hsl(180, 90%, 75%) !important;
    text-shadow: 0 0 10px hsla(180, 100%, 70%, 0.3) !important;
}
.markdown-body a {
    color: hsl(200, 95%, 75%) !important;
    text-decoration: none !important;
    border-bottom: 1px solid hsla(200, 90%, 60%, 0.4) !important;
    text-shadow: 0 0 8px hsla(200, 100%, 70%, 0.3) !important;
    transition: all 0.25s ease !important;
    padding-bottom: 1px !important;
}
.markdown-body a:hover {
    color: hsl(180, 100%, 85%) !important;
    text-shadow: 0 0 20px hsla(200, 100%, 80%, 0.6) !important;
    border-bottom-color: hsla(180, 100%, 70%, 0.6) !important;
}
.markdown-body code {
    background: hsla(200, 50%, 15%, 0.8) !important;
    color: hsl(200, 90%, 80%) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 0.9em !important;
    box-shadow: inset 0 0 10px hsla(200, 100%, 50%, 0.1) !important;
}
.markdown-body pre {
    background: linear-gradient(135deg, 
        hsl(230, 65%, 10%) 0%, 
        hsl(235, 60%, 12%) 100%) !important;
    border: 1px solid hsla(200, 50%, 30%, 0.3) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    box-shadow: 
        inset 0 0 30px hsla(200, 100%, 50%, 0.05),
        0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
.markdown-body pre code {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.markdown-body ul,
.markdown-body ol {
    padding-left: 24px !important;
    margin: 12px 0 !important;
}
.markdown-body li {
    margin: 6px 0 !important;
    line-height: 1.6 !important;
}
.markdown-body li::marker {
    color: hsl(200, 90%, 70%) !important;
}
.markdown-body hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        hsla(200, 90%, 60%, 0.4) 20%,
        hsla(180, 90%, 60%, 0.5) 50%,
        hsla(200, 90%, 60%, 0.4) 80%,
        transparent 100%) !important;
    margin: 24px 0 !important;
}

/* ===== 加载动画 ===== */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 24px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* 亮点②：星环加载动画（SVG SMIL） */
.flex.items-center.justify-center.w-6.h-5::before {
    display: none !important;
}
/* 注意：实际使用时需在HTML内插入以下SVG结构 */
/*
<div class="flex items-center justify-center w-6 h-5">
    <svg width="32" height="24" viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg">
        <circle cx="8" cy="12" r="4" fill="none" stroke="hsl(200,90%,65%)" stroke-width="2">
            <animateTransform attributeName="transform" type="rotate" from="0 8 12" to="360 8 12" dur="1.5s" repeatCount="indefinite" />
        </circle>
        <circle cx="16" cy="12" r="4" fill="none" stroke="hsl(180,90%,70%)" stroke-width="2">
            <animateTransform attributeName="transform" type="rotate" from="0 16 12" to="-360 16 12" dur="1.5s" repeatCount="indefinite" begin="0.2s" />
        </circle>
        <circle cx="24" cy="12" r="4" fill="none" stroke="hsl(200,90%,65%)" stroke-width="2">
            <animateTransform attributeName="transform" type="rotate" from="0 24 12" to="360 24 12" dur="1.5s" repeatCount="indefinite" begin="0.4s" />
        </circle>
    </svg>
</div>
*/

/* ===== 底部输入区 ===== */
.bg-gradient-to-t {
    background: linear-gradient(to top, hsl(230, 70%, 5%), transparent) !important;
}
#ai-chat-bottom-input,
#ai-chat-input {
    background: hsl(230, 65%, 12%) !important;
    color: hsl(220, 15%, 92%) !important;
    caret-color: hsl(200, 90%, 65%) !important;
    border: 1px solid hsl(230, 50%, 25%) !important;
}
#ai-chat-input::placeholder {
    color: hsl(220, 8%, 45%) !important;
}
#ai-chat-input::selection {
    background: hsl(200, 40%, 30%) !important;
    color: hsl(200, 80%, 75%) !important;
}
#ai-send-button {
    background: linear-gradient(135deg, hsl(200, 90%, 55%), hsl(180, 90%, 50%)) !important;
    color: hsl(230, 70%, 10%) !important;
    border-radius: 9999px !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 0 15px hsla(200, 90%, 60%, 0.4) !important;
}
#ai-send-button:hover {
    background: linear-gradient(135deg, hsl(200, 90%, 60%), hsl(180, 90%, 55%)) !important;
    box-shadow: 0 0 20px hsla(200, 90%, 60%, 0.6) !important;
}

/* ===== 评论区与评分 ===== */
/* 评论区整体背景 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: hsl(230, 65%, 10%) !important;
    border-top: 1px solid hsl(230, 50%, 25%) !important;
}

/* 评论标题文字 */
div.text-lg.font-bold {
    color: white !important;
}

/* 评论内容主体文字 */
p.MuiTypography-body1.text-grey-600 {
    color: white !important;
}

/* 评分星星文字（如“4.5”） */
span.text-orange-500 {
    color: white !important;
}

/* 评论用户名、时间等辅助文字 */
div.text-sm.text-grey-600 span.font-bold,
div.text-xs.text-grey-600,
span.text-\[10px\] {
    color: white !important;
}

/* 评论中的普通文本（如用户回复内容） */
div.break-all,
div.group.ml-0,
div[class*="text-grey"] {
    color: white !important;
}

/* 评论操作按钮（回复、点赞等）默认状态文字 */
button.text-gray-400,
span.cursor-pointer {
    color: white !important;
}

/* 按钮悬停状态保持高亮色，但不影响可读性 */
button.text-gray-400:hover,
span.cursor-pointer:hover {
    color: hsl(200, 90%, 65%) !important;
}

/* 评论中的链接或特殊文字 */
a, .markdown-body a {
    color: hsl(200, 90%, 75%) !important;
}

/* 确保输入框文字为白色 */
#ai-chat-input,
textarea.rc-textarea {
    color: white !important;
}

/* 保持评分星星图标颜色不变 */
span.MuiRating-iconEmpty svg {
    fill: hsl(220, 8%, 45%) !important;
}
span.MuiRating-iconFilled svg {
    fill: hsl(200, 90%, 65%) !important;
}

/* 其他评论区结构保持不变 */
div.flex.flex-col.border-gray-200 {
    border-color: hsl(230, 50%, 25%) !important;
}
div.bg-gray-100.text-gray-500 {
    background: hsl(230, 60%, 16%) !important;
    color: white !important;
}
div.cursor-pointer.group.flex.items-center.justify-center {
    background: transparent !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: hsl(230, 55%, 22%) !important;
}
div[data-state="closed"] svg[data-icon="Send03"] {
    fill: hsl(220, 8%, 45%) !important;
}
/* 亮点③：分隔线装饰 */
.style_divider__mW0YX {
    position: relative !important;
}
.style_divider__mW0YX::before {
    content: '✨ ✨ ✨' !important;
    display: block !important;
    text-align: center !important;
    color: hsl(200, 90%, 65%) !important;
    font-size: 14px !important;
    letter-spacing: 6px !important;
    opacity: 0.7 !important;
}
.MuiStack-root.css-1dmzxoz {
    gap: 8px !important;
}
button.MuiButton-containedPrimary {
    background: linear-gradient(135deg, hsl(200, 90%, 55%), hsl(180, 90%, 50%)) !important;
    color: hsl(230, 70%, 10%) !important;
    box-shadow: 0 0 10px hsla(200, 90%, 60%, 0.3) !important;
}
button.MuiButton-containedPrimary:hover {
    background: linear-gradient(135deg, hsl(200, 90%, 60%), hsl(180, 90%, 55%)) !important;
    box-shadow: 0 0 15px hsla(200, 90%, 60%, 0.5) !important;
}
button.MuiButton-outlinedPrimary {
    border: 1px solid hsl(200, 90%, 65%) !important;
    color: hsl(200, 90%, 65%) !important;
    background: transparent !important;
}
button.MuiButton-outlinedPrimary:hover {
    background: hsl(200, 40%, 20%) !important;
}
div.p-3.overflow-y-auto {
    background: transparent !important;
}
div.group.ml-0 {
    /* 默认继承 */
}
div.group img.rounded-full {
    border: 2px solid hsl(200, 90%, 65%) !important;
    box-shadow: 0 0 10px hsla(200, 90%, 60%, 0.3) !important;
}
div.text-sm.text-grey-600 span.font-bold {
    color: hsl(220, 15%, 92%) !important;
}
span.text-\[10px\] {
    color: hsl(220, 8%, 45%) !important;
}
div.break-all {
    color: inherit !important;
}
div.text-xs.text-grey-600 {
    color: hsl(220, 10%, 70%) !important;
}
button.text-gray-400 {
    color: hsl(220, 8%, 45%) !important;
}
button.text-gray-400:hover {
    color: hsl(200, 90%, 65%) !important;
}
button.text-gray-400 svg {
    fill: currentColor !important;
}
span.cursor-pointer {
    color: hsl(220, 10%, 70%) !important;
}
span.cursor-pointer:hover {
    color: hsl(200, 90%, 65%) !important;
}
div.ml-8.border-l {
    border-left-color: hsl(230, 50%, 25%) !important;
}

/* ===== 分页 ===== */
.MuiPaginationItem-root {
    background: transparent !important;
    color: hsl(220, 10%, 70%) !important;
    border: 1px solid hsl(230, 50%, 25%) !important;
}
.MuiPaginationItem-root.Mui-selected {
    background: hsl(200, 90%, 65%) !important;
    color: hsl(230, 70%, 10%) !important;
    border-color: hsl(200, 90%, 65%) !important;
}
.MuiPaginationItem-root.Mui-disabled {
    opacity: 0.5 !important;
}
.MuiPaginationItem-icon {
    fill: hsl(220, 8%, 45%) !important;
}
.MuiStack-root.css-1uwir8f {
    gap: 8px !important;
}
.MuiInputBase-input {
    background: hsl(230, 65%, 12%) !important;
    color: hsl(220, 15%, 92%) !important;
    border: 1px solid hsl(230, 50%, 25%) !important;
}

/* ===== MUI全局组件 ===== */
.MuiButton-root,
.MuiButton-contained,
.MuiButton-outlined {
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    text-transform: none !important;
}
.MuiIconButton-root {
    background: transparent !important;
}
.MuiIconButton-root:hover {
    background: hsl(230, 55%, 22%) !important;
}
.MuiDialog-paper,
.MuiDrawer-paper {
    background: hsl(230, 65%, 10%) !important;
    color: hsl(220, 15%, 92%) !important;
}
.MuiBackdrop-root {
    background: rgba(10, 15, 30, 0.8) !important;
}
.MuiDivider-root {
    background: hsl(230, 50%, 25%) !important;
}
.MuiTypography-root {
    color: inherit !important;
}
.MuiRating-icon {
    font-size: 1.5rem !important;
}
.MuiOutlinedInput-root,
.MuiOutlinedInput-notchedOutline {
    border-color: hsl(230, 50%, 25%) !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: hsl(200, 90%, 65%) !important;
}
.MuiTouchRipple-root {
    color: hsl(200, 90%, 65%) !important;
}
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: hsl(220, 10%, 70%) !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: hsl(200, 90%, 65%) !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: hsl(200, 40%, 20%) !important;
}

/* ===== 星光闪烁动画 ===== */
@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ===== 响应式与降速 ===== */
@media (max-width: 480px) {
    body {
        font-size: 14px !important;
    }
    .markdown-body {
        font-size: 14px !important;
    }
    .MuiButton-root {
        padding: 4px 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== 保证所有img标签永远处于最上方，不被遮蔽 ===== */
img {
    position: relative !important;
    z-index: 2147483647 !important;
}