```css
/* =================================================================
   主题：阴影中的猎手：窥伺与占有 (Shadow Hunter: Peep & Possess)
   核心：黑暗、破败、窥视感、病态恋物、高对比度可读性、隐秘动画
   ================================================================= */

/* --- 1. 基础清理与结构重置 --- */

/* 强制隐藏顶部默认颜色条 (系统规则) */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 2. 聊天框主体美化 --- */

/* 统一聊天框样式：如同阴暗角落的旧物，带着一丝腐朽的吸引力 */
.bg-gray-100\/90.relative.inline-block {
    /* 背景：深灰与暗红的渐变，如同旧脏布料或血迹未干的角落 */
    background: linear-gradient(to bottom right, #1a1a1a, #2c2c2c) !important;
    /* 边框：锈迹斑斑的金属感，或旧木头的边缘，带着裂痕 */
    border: 1px solid #444 !important;
    box-shadow:
        inset 0 0 0 1px rgba(60, 60, 60, 0.5), /* 内部幽暗的光泽 */
        0 2px 8px rgba(0, 0, 0, 0.4), /* 阴影感 */
        0 0 15px rgba(100, 0, 0, 0.2) !important; /* 暗红色的微光，暗示危险与欲望 */

    border-radius: 6px !important; /* 边缘粗糙，不规则感 */
    padding: 12px !important;
    transition: all 0.3s ease !important;
    position: relative; /* 为伪元素定位 */
    overflow: hidden; /* 确保伪元素不溢出 */
}

/* 区分输入框 (用户侧 - 潜伏者的视角) */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    border-color: #3a3a3a !important; /* 更深沉的边框 */
    background: linear-gradient(to bottom right, #121212, #181818) !important;
    box-shadow:
        inset 0 0 0 1px rgba(40, 40, 40, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.5) !important;
    border-radius: 6px 12px 6px 12px !important; /* 不规则的切割感 */
}

/* 区分输出框 (AI侧 - 猎物与环境的描写) */
.chat-answer-container .bg-gray-100\/90 {
    border-color: #555 !important; /* 略亮的边框，暗示被窥视 */
    background: linear-gradient(to bottom left, #222, #333) !important;
    box-shadow:
        inset 0 0 0 1px rgba(70, 70, 70, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(139, 0, 0, 0.25) !important; /* 更强烈的欲望微光 */
    border-radius: 12px 6px 12px 6px !important; /* 不规则的切割感 */
}

/* 聊天框背景纹理：模拟粗糙的墙面或旧纸张 */
.chat-answer-container .bg-gray-100\/90::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

/* --- 3. 文本内容与可读性 (高对比度) --- */

/* 主文本：苍白但清晰，如同在黑暗中被手电筒照亮 */
.markdown-body {
    color: #e0e0e0 !important; /* 浅灰白 */
    font-family: "Noto Serif SC", "SimSun", serif !important; /* 略带旧书感的字体 */
    font-weight: 400 !important;
    line-height: 1.8 !important;
    background: transparent !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important; /* 增加文本的立体感和阴暗感 */
    letter-spacing: 0.5px !important; /* 稍微拉开字间距，增加阅读舒适度 */
}

.markdown-body p {
    margin-bottom: 1em !important;
}

/* 强调文字：血腥的猩红，暗示危险与欲望 */
.markdown-body strong {
    color: #ff4d4d !important; /* 鲜艳的红色 */
    background: linear-gradient(transparent 60%, rgba(255, 0, 0, 0.2) 0%) !important; /* 底部隐约的血色晕染 */
    padding: 0 3px !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important; /* 微弱的发光效果 */
}

/* --- 4. 底部功能区美化 --- */

/* 底部按钮 (复制/编辑等)：如同旧工具，低调但实用 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #888 !important; /* 灰暗的颜色 */
    font-size: 0.7rem !important;
    border-radius: 4px !important;
    transition: all 0.2s !important;
    border: 1px solid transparent !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background-color: rgba(60, 0, 0, 0.3) !important; /* 悬停时泛起暗红色 */
    color: #ff6666 !important; /* 按钮文字变为猩红 */
    border-color: #ff6666 !important;
}

/* 模型名称：如同刻在阴暗角落的标记 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #666 !important;
    font-weight: normal !important;
    opacity: 0.7 !important;
    font-style: italic !important;
}

/* Token消耗：腐朽的黄绿色，暗示消耗和病态 */
.text-orange-500 {
    color: #a2a832 !important; /* 暗淡的黄绿色 */
}

/* --- 5. 深度定制 Details/Summary (窥视与隐藏) --- */
/* 风格：如同打开一道旧门，或揭开一块破布，窥探内部的秘密 */

.markdown-body details {
    border: 1px solid #555 !important; /* 坚硬的边框 */
    margin: 15px 0 !important;
    background-color: rgba(0, 0, 0, 0.4) !important; /* 更深邃的背景 */
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.markdown-body details[open] {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border-color: #888 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 0, 0, 0.3) !important; /* 展开时更显眼 */
}

.markdown-body summary {
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
    cursor: pointer !important;
    color: #ccc !important; /* 标题文字略亮 */
    font-weight: 600 !important;
    list-style: none !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    border-bottom: 1px solid #444 !important; /* 分割线 */
}

/* 隐藏默认三角 */
.markdown-body summary::-webkit-details-marker {
    display: none !important;
}

/* 自定义图标：用一个“眼睛”图标代替箭头，暗示窥视 */
.markdown-body summary::before {
    content: '👁️' !important; /* 窥视的眼睛 */
    display: inline-block !important;
    margin-right: 12px !important;
    font-size: 1.2em !important;
    color: #ff9900 !important; /* 危险的橙黄色 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease !important;
}

/* 展开时眼睛睁大，颜色变红 */
.markdown-body details[open] > summary::before {
    transform: scale(1.1) rotateY(180deg) !important; /* 翻转效果 */
    color: #ff4d4d !important; /* 变红 */
}

.markdown-body summary:hover {
    background-color: rgba(60, 0, 0, 0.2) !important; /* 悬停时泛起暗红色 */
    color: #ff8888 !important;
}

/* 代码块区域优化 */
.markdown-body details pre {
    margin: 0 !important;
    border-top: 1px dashed #666 !important; /* 虚线分割 */
    background: #0d0d0d !important; /* 极深背景 */
    color: #99ff99 !important; /* 绿色代码，如同终端输出 */
    border-radius: 0 0 4px 4px !important;
    padding: 15px !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 0.9em !important;
    line-height: 1.4 !important;
    overflow-x: auto !important;
}

/* --- 6. 加载动画重构 (SMIL SVG 方案) --- */
/* 替换原有的旋转圈圈，改为一个“滴血”或“脉动”的图标，暗示病态的等待 */

/* 6.1 隐藏默认CSS加载动画 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 6.2 在父容器中注入SVG动画 (这里使用一个跳动的水滴/血滴图标) */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 30px !important;
    height: 30px !important;
    /* 血滴SVG，简单模拟 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4d4d'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-1.66 0-3-1.34-3-3h2c0 .55.45 1 1 1s1-.45 1-1h2c0 1.66-1.34 3-3 3zm-2.4-5.4L9 10c.55-.55 1.34-1 2-1h2c.66 0 1.45.45 2 1l-.6 1.6c-.45.45-1.07.7-1.6.7H11c-.53 0-1.15-.25-1.6-.7z'%3E%3Canimate attributeName='opacity' values='1;0.3;1' dur='1.5s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='scale' values='1;1.1;1' dur='1.5s' repeatCount='indefinite' calcMode='spline' keySplines='0.4 0 0.2 1; 0.4 0 0.2 1' additive='sum' transform-origin='center'/%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    margin-right: 5px !important; /* 给文字留点空间 */
}

/* 6.3 正在生成的文字提示 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: '…欲望在滋长…' !important; /* 充满暗示的等待语 */
    position: absolute !important;
    left: 40px !important; /* 调整位置 */
    width: 120px !important;
    font-size: 13px !important;
    color: #ff8888 !important; /* 猩红色文字 */
    font-weight: bold !important;
    font-family: "Noto Serif SC", serif !important;
    animation: pulseText 1.5s infinite alternate !important;
}

@keyframes pulseText {
    from { opacity: 0.8; transform: scale(1); }
    to { opacity: 1; transform: scale(1.03); }
}

/* --- 7. 移动端适配微调 --- */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        padding: 10px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::after {
        content: '…' !important; /* 窄屏只显示省略号 */
        width: 20px !important;
        left: 25px !important;
    }
    .markdown-body strong {
        background: none !important; /* 移动端背景高亮可能不便 */
        text-shadow: none !important;
    }
}