/* =========================================
   【幽暗地牢风格】全局UI美化
   核心元素：黑石材质、猩红微光、铁色边框
========================================= */

/* --- 1. 顶部栏 (The Upper Catacombs) --- */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(180deg, #050505 0%, #151515 100%) !important;
    border-bottom: 2px solid #5e0b0b !important; /* 猩红底边 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.9) !important;
}

/* 模型选择器 - 暗石碑 */
#ai-model-selector .group.flex.items-center {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
    border-color: #8a1313 !important; /* 悬浮泛红 */
    box-shadow: 0 0 8px rgba(138, 19, 19, 0.4) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #e0e0e0 !important;
    font-weight: bold !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: #a0a0a0 !important;
    transition: transform 0.2s, color 0.3s !important;
}
/* 图标悬浮如火炬点燃 */
.sticky.w-full.top-0 svg.lucide-clock-8:hover,
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2:hover,
#header-setting-button svg:hover {
    color: #ff4747 !important;
    transform: scale(1.1) !important;
    filter: drop-shadow(0 0 5px rgba(255, 71, 71, 0.6)) !important;
}
/* 历史记录未读角标 - 凝血 */
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
    background-color: #bf0000 !important;
}

/* --- 2. 开场白选择器 (The Runestone) --- */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: #111 !important;
    border: 1px solid #3a3a3a !important;
    color: #d4d4d4 !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    border-color: #5e0b0b !important;
    box-shadow: inset 0 0 10px rgba(94, 11, 11, 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: #888 !important;
}

/* --- 3. 按钮栏 (Iron Switches) --- */
#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(to bottom, #2a2a2a, #111) !important;
    border: 1px solid #444 !important;
    color: #c9c9c9 !important;
    border-radius: 2px !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    background: #1a0505 !important;
    border-color: #8a1313 !important;
    color: #ff6b6b !important;
}
#ai-mod-button2 button.MuiButton-root svg {
    color: inherit !important;
}

/* --- 4. 底部栏 (The Dark Altar) --- */
.bg-gradient-to-t {
    background: linear-gradient(to top, #000000 60%, rgba(0,0,0,0)) !important;
}
#ai-chat-bottom-input {
    background: #0f0f0f !important;
    border-top: 1px solid #222 !important;
}
#ai-chat-input {
    background-color: #161616 !important;
    color: #f0f0f0 !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8) !important;
    transition: border-color 0.3s !important;
}
#ai-chat-input:focus {
    outline: none !important;
    border-color: #5e0b0b !important;
    box-shadow: 0 0 10px rgba(94, 11, 11, 0.5), inset 0 2px 8px rgba(0,0,0,0.8) !important;
}
#ai-chat-input::placeholder {
    color: #555 !important;
}
#ai-chat-input::selection {
    background: #5e0b0b !important;
    color: #fff !important;
}

/* --- 5. 分页栏 (Tome Pages) --- */
.MuiPaginationItem-root {
    color: #aaa !important;
    border: 1px solid #333 !important;
}
.MuiPaginationItem-root:hover {
    background-color: #222 !important;
    color: #fff !important;
}
.MuiPaginationItem-root.Mui-selected {
    background-color: #5e0b0b !important;
    color: #fff !important;
    border-color: #8a1313 !important;
}
.MuiPaginationItem-root.Mui-disabled {
    opacity: 0.3 !important;
}
.MuiPaginationItem-icon {
    color: inherit !important;
}
.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #aaa !important;
}
.MuiInputBase-input {
    color: #e0e0e0 !important;
}

/* --- 6. 评论区 (The Wall of Whispers) --- */
/* 主背景：强制覆盖为黑石色，不修改任何布局属性 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-color: #0d0d0d !important;
    border-top: 2px solid #3a0000 !important;
}
/* 标题与个人评分 */
div.text-lg.font-bold {
    color: #d1b075 !important; /* 黯淡的暗金色 */
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}
p.MuiTypography-body1.text-grey-600 {
    color: #888 !important;
}
/* 评分星星 - 燃烧效果 */
span.MuiRating-iconEmpty svg {
    color: #333 !important;
}
span.MuiRating-iconFilled svg {
    color: #ff3333 !important;
    filter: drop-shadow(0 0 3px rgba(255, 51, 51, 0.8)) !important;
}
span.text-orange-500 {
    color: #ff4747 !important;
}
/* 评论输入框 */
div.flex.flex-col.border-gray-200 {
    border-color: #222 !important;
    background: #141414 !important;
}
textarea.rc-textarea {
    background: #000 !important;
    color: #ddd !important;
    border-bottom: 1px solid #333 !important;
}
textarea.rc-textarea:focus {
    border-bottom: 1px solid #8a1313 !important;
}
div.bg-gray-100.text-gray-500 {
    background: #111 !important;
    color: #666 !important;
    border-top: 1px solid #222 !important;
}
div.cursor-pointer.group.flex.items-center.justify-center svg[data-icon="Send03"] {
    color: #888 !important;
    transition: color 0.3s !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover svg[data-icon="Send03"] {
    color: #ff4747 !important;
}
/* 排序按钮 */
.MuiStack-root.css-1dmzxoz button.MuiButton-containedPrimary {
    background-color: #5e0b0b !important;
    color: #fff !important;
    border: 1px solid #8a1313 !important;
}
.MuiStack-root.css-1dmzxoz button.MuiButton-outlinedPrimary {
    color: #aaa !important;
    border: 1px solid #444 !important;
}
/* 评论列表项 - 独立石块效果 */
div.p-3.overflow-y-auto div.group.ml-0 {
    background: #151515 !important;
    border: 1px solid #262626 !important;
    border-radius: 4px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5) !important;
}
/* 文本提亮以确保绝对可读 */
div.text-sm.text-grey-600 span.font-bold {
    color: #d1b075 !important; /* 用户名暗金 */
}
span.text-\[10px\] {
    color: #ff4747 !important;
    border: 1px solid #ff4747 !important;
    background: rgba(255, 71, 71, 0.1) !important;
}
div.break-all {
    color: #e0e0e0 !important; /* 评论正文高亮冷白 */
    font-size: 14.5px !important;
    line-height: 1.6 !important;
}
div.text-xs.text-grey-600 {
    color: #666 !important;
}
/* 操作交互 */
button.text-gray-400 svg {
    color: #666 !important;
    transition: color 0.3s, transform 0.2s !important;
}
button.text-gray-400:hover svg {
    color: #ff4747 !important;
    transform: scale(1.1) !important;
}
span.cursor-pointer {
    color: #888 !important;
    transition: color 0.2s !important;
}
span.cursor-pointer:hover {
    color: #d1b075 !important;
}
div.ml-8.border-l {
    border-color: #444 !important;
}
div.style_divider__mW0YX {
    border-color: #222 !important;
}

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

/* 2. 地牢风格主聊天框 (黑石质感 + 暗红火光投影) */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(145deg, #111111 0%, #242424 100%) !important;
    border: 1px solid #5a1111 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 4px 12px rgba(90, 17, 17, 0.4) !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

/* 3. 底部火星飘动动效 (纯SVG SMIL实现，无视CSS动画禁用) */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><circle cx="15%" cy="100%" r="1.5" fill="%23ff4400"><animate attributeName="cy" from="100%" to="0%" dur="4s" repeatCount="indefinite" /><animate attributeName="opacity" values="0;0.8;0" dur="4s" repeatCount="indefinite" /></circle><circle cx="85%" cy="100%" r="1" fill="%23ff2200"><animate attributeName="cy" from="100%" to="20%" dur="3s" repeatCount="indefinite" /><animate attributeName="opacity" values="0;0.6;0" dur="3s" repeatCount="indefinite" /></circle></svg>') !important;
    z-index: 0 !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* 4. 核心文本样式 (强制高对比度，绝对可读，禁忌阴影) */
.markdown-body {
    color: #F0F0F0 !important;
    font-weight: bold !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    background: transparent !important;
    z-index: 1 !important;
    position: relative !important;
    text-shadow: none !important; 
}

/* 5. 底部附加元素 (按钮、模型、Token消耗，适配深色背景) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #C8C8C8 !important;
    position: relative !important;
    z-index: 1 !important;
    transition: color 0.2s ease !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #ff4444 !important; /* 悬停时呈现血红色 */
}

/* 6. 输出框加载动画 (隐藏默认，替换为呼吸血色符文) */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
}
.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23cc0000"><polygon points="12,2 15,10 23,12 15,14 12,22 9,14 1,12 9,10"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.2s" repeatCount="indefinite" /></polygon></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 7. 低动效模式适配 */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before {
        opacity: 0.1 !important;
    }
}