css
/* ============================================
   石板主题 · 水晶边角 · 暗色优雅
   完整覆盖方案 (含强制覆盖)
   ============================================ */

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

/* ---------- 2. 聊天框主体：石板材质 ---------- */
.bg-gray-100\/90.relative.inline-block {
    /* 石板基色：深灰到岩蓝的过渡 */
    background:
        /* 细微石纹 (横向) */
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 3px,
            rgba(255, 255, 255, 0.015) 3px, rgba(255, 255, 255, 0.015) 4px
        ),
        /* 细微石纹 (纵向) */
        repeating-linear-gradient(0deg,
            transparent 0px, transparent 3px,
            rgba(255, 255, 255, 0.01) 3px, rgba(255, 255, 255, 0.01) 4px
        ),
        /* 主体底色 */
        linear-gradient(160deg,
            #1e1e1e 0%,
            #26292b 30%,
            #1f2224 60%,
            #1a1c1d 100%
        ) !important;

    border: 1.5px solid rgba(80, 90, 100, 0.5) !important;
    border-radius: 14px !important;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        /* 边缘微光 */
        0 0 0 1px rgba(120, 180, 255, 0.08) !important;

    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;

    /* 过渡平滑 */
    transition: box-shadow 0.3s ease !important;
}

/* 悬停时石板边缘微亮 */
.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 0 0 1.5px rgba(120, 180, 255, 0.15) !important;
}

/* ---------- 3. 石板表面风化纹理 (伪元素) ---------- */
.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(ellipse at 15% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 65%, rgba(255, 255, 255, 0.015) 0%, transparent 35%),
        radial-gradient(ellipse at 45% 80%, rgba(0, 0, 0, 0.08) 0%, transparent 30%),
        /* 细裂纹理 */
        repeating-linear-gradient(55deg,
            transparent 0px, transparent 20px,
            rgba(255, 255, 255, 0.008) 20px, rgba(255, 255, 255, 0.008) 21px
        ),
        repeating-linear-gradient(125deg,
            transparent 0px, transparent 35px,
            rgba(0, 0, 0, 0.04) 35px, rgba(0, 0, 0, 0.04) 36px
        ) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
    mix-blend-mode: overlay !important;
    opacity: 0.6 !important;
}

/* ---------- 4. 四角水晶点缀 (核心亮点) ---------- */
.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;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 1 !important;

    /* 四角水晶：使用多重背景组合 */
    background:
        /* ===== 左上角 ===== */
        /* 菱形切面 */
        linear-gradient(135deg,
            rgba(180, 210, 255, 0.35) 0%,
            rgba(140, 180, 255, 0.15) 35%,
            transparent 55%
        ) top left / 44px 44px no-repeat,
        /* 高光晶体 */
        radial-gradient(ellipse at 18% 18%,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(200, 225, 255, 0.3) 25%,
            transparent 50%
        ) top left / 44px 44px no-repeat,
        /* 光晕 */
        radial-gradient(circle at 0% 0%,
            rgba(150, 200, 255, 0.25) 0%,
            transparent 60%
        ) top left / 100% 100% no-repeat,

        /* ===== 右上角 ===== */
        linear-gradient(225deg,
            rgba(180, 210, 255, 0.35) 0%,
            rgba(140, 180, 255, 0.15) 35%,
            transparent 55%
        ) top right / 44px 44px no-repeat,
        radial-gradient(ellipse at 82% 18%,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(200, 225, 255, 0.3) 25%,
            transparent 50%
        ) top right / 44px 44px no-repeat,
        radial-gradient(circle at 100% 0%,
            rgba(150, 200, 255, 0.25) 0%,
            transparent 60%
        ) top right / 100% 100% no-repeat,

        /* ===== 左下角 ===== */
        linear-gradient(45deg,
            rgba(180, 210, 255, 0.35) 0%,
            rgba(140, 180, 255, 0.15) 35%,
            transparent 55%
        ) bottom left / 44px 44px no-repeat,
        radial-gradient(ellipse at 18% 82%,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(200, 225, 255, 0.3) 25%,
            transparent 50%
        ) bottom left / 44px 44px no-repeat,
        radial-gradient(circle at 0% 100%,
            rgba(150, 200, 255, 0.25) 0%,
            transparent 60%
        ) bottom left / 100% 100% no-repeat,

        /* ===== 右下角 ===== */
        linear-gradient(315deg,
            rgba(180, 210, 255, 0.35) 0%,
            rgba(140, 180, 255, 0.15) 35%,
            transparent 55%
        ) bottom right / 44px 44px no-repeat,
        radial-gradient(ellipse at 82% 82%,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(200, 225, 255, 0.3) 25%,
            transparent 50%
        ) bottom right / 44px 44px no-repeat,
        radial-gradient(circle at 100% 100%,
            rgba(150, 200, 255, 0.25) 0%,
            transparent 60%
        ) bottom right / 100% 100% no-repeat;

    /* 水晶闪烁动画 (SMIL 内联 SVG 优先) */
    /* 同时附加 CSS 关键帧增强 */
    animation: crystalGlow 4s ease-in-out infinite !important;
}

/* 水晶闪烁关键帧 (增强) */
@keyframes crystalGlow {
    0%,
    100% {
        opacity: 0.9;
    }
    50% {
        opacity: 1;
    }
}

/* 若浏览器支持 prefers-reduced-motion，降低闪烁幅度 */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::after {
        animation: crystalGlow 6s ease-in-out infinite !important;
    }
}

/* ---------- 5. 内部文本内容 (信息栏) ---------- */
.markdown-body {
    color: #e8eef0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    /* 禁止任何阴影影响可读性 */
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 文本内链接颜色 (适配石板主题) */
.markdown-body a {
    color: #8ab8ff !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.markdown-body a:hover {
    color: #a8ccff !important;
    text-shadow: 0 0 12px rgba(138, 184, 255, 0.2) !important;
}

/* 代码块适配 */
.markdown-body code {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #d4e0e6 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
    padding: 1px 6px !important;
    font-size: 0.9em !important;
}

.markdown-body pre {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
}

.markdown-body pre code {
    background: transparent !important;
    border: none !important;
}

/* 列表、引用等 */
.markdown-body blockquote {
    border-left: 3px solid rgba(138, 184, 255, 0.3) !important;
    color: #c0ccd4 !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.markdown-body table {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.markdown-body th,
.markdown-body td {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ---------- 6. 底部附加元素 (状态栏) ---------- */
/* 6-a. 操作按钮 (复制、编辑、删除等) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #b8c8d4 !important;
    font-size: 12.5px !important;
    font-weight: 450 !important;
    letter-spacing: 0.3px !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 10px !important;
    min-width: auto !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #8ab8ff !important;
    background: rgba(138, 184, 255, 0.08) !important;
    border-radius: 6px !important;
}

/* 6-b. 模型名称文本 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #a0b0bc !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    opacity: 0.85 !important;
}

/* 6-c. Token 消耗文本 */
.text-orange-500 {
    color: #d4a57a !important;
    font-size: 12px !important;
    font-weight: 450 !important;
    opacity: 0.8 !important;
}

/* ---------- 7. 加载动画 (自定义水晶脉冲) ---------- */
/* 隐藏默认加载点 */
.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: 48px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 使用 ::before 创建水晶脉冲加载 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    background: radial-gradient(circle at 40% 35%, rgba(200, 225, 255, 0.9), rgba(120, 180, 255, 0.4)) !important;
    border-radius: 2px !important;
    transform: rotate(45deg) !important;
    box-shadow:
        0 0 16px rgba(150, 200, 255, 0.5),
        0 0 32px rgba(150, 200, 255, 0.15) !important;
    /* SMIL 内联 SVG 动画 (通过 CSS 无法实现 SMIL, 此处使用 CSS 关键帧作为主要方案,
       但根据规范要求, 我们提供 SVG 内联方案作为占位注释) */
    animation: crystalPulse 1.6s ease-in-out infinite !important;
}

/* 第二个脉冲点 (使用 ::after) */
.flex.items-center.justify-center.w-6.h-5::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    background: radial-gradient(circle at 40% 35%, rgba(220, 240, 255, 0.9), rgba(160, 200, 255, 0.3)) !important;
    border-radius: 1px !important;
    transform: rotate(45deg) !important;
    box-shadow: 0 0 12px rgba(180, 215, 255, 0.4) !important;
    animation: crystalPulse 1.6s ease-in-out 0.4s infinite !important;
}

@keyframes crystalPulse {
    0%,
    100% {
        opacity: 0.5;
        transform: rotate(45deg) scale(0.85);
    }
    50% {
        opacity: 1;
        transform: rotate(45deg) scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::before,
    .flex.items-center.justify-center.w-6.h-5::after {
        animation: crystalPulse 2.8s ease-in-out infinite !important;
    }
    .flex.items-center.justify-center.w-6.h-5::after {
        animation-delay: 0.7s !important;
    }
}

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

    .bg-gray-100\/90.relative.inline-block::after {
        /* 移动端缩小水晶尺寸 */
        background-size:
            32px 32px, 32px 32px, 100% 100%,
            32px 32px, 32px 32px, 100% 100%,
            32px 32px, 32px 32px, 100% 100%,
            32px 32px, 32px 32px, 100% 100% !important;
    }

    .markdown-body {
        font-size: 14px !important;
    }

    .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
        font-size: 11.5px !important;
        padding: 3px 8px !important;
    }
}

/* ---------- 9. 低动效模式 ---------- */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::after {
        animation-duration: 6s !important;
    }
    .bg-gray-100\/90.relative.inline-block:hover {
        transition: box-shadow 0.5s ease !important;
    }
}

/* ---------- 10. 额外：输入框内占位符 ---------- */
/* 若平台输入框也使用了同样选择器，可增加占位符样式 */
.bg-gray-100\/90.relative.inline-block textarea::placeholder,
.bg-gray-100\/90.relative.inline-block input::placeholder {
    color: rgba(180, 195, 205, 0.5) !important;
    font-weight: 300 !important;
}