欲望之茧

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

/* 2. 统一聊天框基础样式 - 石墙与羊皮纸质感 */
.bg-gray-100\/90.relative.inline-block {
    background: #1a1a2e !important; /* 深邃的岩洞黑 */
    border: 2px solid #4a3b32 !important; /* 生锈的铁色边框 */
    border-radius: 8px 8px 4px 4px !important;
    box-shadow: 
        inset 0 0 30px rgba(0, 0, 0, 0.8), /* 内部阴影加深洞穴感 */
        0 4px 8px rgba(0, 0, 0, 0.6) !important; /* 外部投影 */
    position: relative !important;
    isolation: isolate !important; /* 建立层叠上下文 */
}

/* 3. 为统一聊天框添加伪元素 - 打造粗糙石墙纹理背景 */
.bg-gray-100\/90.relative.inline-block::before {
    content: '';
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(255, 255, 255, 0.01) 3px,
            rgba(255, 255, 255, 0.01) 6px
        ) !important; /* 模拟石砖缝隙 */
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
}

/* 4. 为统一聊天框添加伪元素 - 燃烧的符文边框装饰 */
.bg-gray-100\/90.relative.inline-block::after {
    content: '';
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    background: linear-gradient(45deg, #ffd700, #ff6b35, #8b0000, #ffd700) border-box !important;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

/* 5. 输入框特定样式 - 更深的祭坛质感 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: #0f0f1a !important; /* 更深的黑色 */
    border-color: #5c3a1e !important; /* 古铜色边框 */
    box-shadow: 
        inset 0 0 40px rgba(0, 0, 0, 0.9),
        0 0 10px rgba(255, 215, 0, 0.2) !important; /* 金色微光 */
}

/* 6. 主要文本内容 - 古老书卷上的文字 */
.markdown-body {
    color: #e0c9a5 !important; /* 羊皮纸色 */
    font-family: 'Georgia', 'Times New Roman', serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-shadow: 0 1px 2px #000000 !important; /* 轻微浮雕感 */
    z-index: 1 !important;
    background: transparent !important;
    position: relative !important;
}

/* 7. 文本内容强调样式 */
.markdown-body strong {
    color: #ffd700 !important; /* 金色强调 */
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5) !important;
}

.markdown-body em {
    color: #ff6b35 !important; /* 火焰色斜体 */
    font-style: italic !important;
}

/* 8. 底部附加元素 - 状态栏与信息栏 (地牢风格) */
/* 底部操作按钮 (状态栏) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #b8860b !important; /* 暗金色 */
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border: 1px solid #4a3b32 !important;
    border-radius: 3px !important;
    padding: 4px 8px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.1) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3) !important;
}

/* 模型名称文本 (信息栏) */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #a0a0b0 !important; /* 银色 */
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    opacity: 0.8 !important;
}

/* Token消耗文本 */
.text-orange-500 {
    color: #ff6347 !important; /* 番茄红，代表生命值消耗 */
    font-family: 'Courier New', monospace !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-shadow: 0 0 3px rgba(255, 0, 0, 0.3) !important;
}

/* 9. 自定义加载动画 - 旋转的魔法符文 */
/* 先隐藏默认加载元素 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 加载动画父容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 使用SVG SMIL动画创建旋转符文 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '';
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='12' fill='none' stroke='%23ffd700' stroke-width='2' stroke-dasharray='8 4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 15 15' to='360 15 15' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M15 3 L15 8 M15 22 L15 27 M3 15 L8 15 M22 15 L27 15' stroke='%23ff6b35' stroke-width='2'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 15 15' to='360 15 15' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain !important;
    /* 兼容占位：如果SMIL不支持，则使用纯CSS作为后备 */
}

/* 10. 移动端适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 6px 6px 3px 3px !important;
        border-width: 1px !important;
    }
    
    .markdown-body {
        font-size: 14px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5 {
        width: 30px !important;
        height: 30px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 24px !important;
        height: 24px !important;
    }
}

/* 11. 低动效模式适配 */
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::before {
        animation-duration: 4s !important; /* 降低速度 */
    }
    
    .bg-gray-100\/90.relative.inline-block::after {
        animation: none !important; /* 关闭边框流光 */
    }
}

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。