/* ==========================================
   📓 中国初中校园主题 · 聊天框美化方案
   特点: 灰调暖黄、铅笔纸飞机、横线纸纹理、课桌阳光感
   ========================================== */

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

/* 2. 统一聊天框 — 暖灰米黄渐变（作业本质感） */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(
        135deg,
        #FDFCF8 0%,
        #F8F5EE 20%,
        #F5F2EA 40%,
        #F2EFE5 60%,
        #F6F3EB 80%,
        #FDFCF9 100%
    ) !important;
    border: 2px solid rgba(198, 186, 160, 0.45) !important;
    box-shadow:
        0 0 0 1px rgba(210, 198, 172, 0.3),
        0 4px 16px rgba(168, 152, 120, 0.1),
        0 8px 32px rgba(198, 186, 160, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(198, 186, 160, 0.08) !important;
    border-radius: 24px !important;
    isolation: isolate !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 20px !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow:
        0 0 0 2px rgba(198, 178, 130, 0.45),
        0 6px 24px rgba(178, 160, 118, 0.18),
        0 12px 48px rgba(198, 186, 160, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(198, 186, 160, 0.15) !important;
    transform: translateY(-2px) scale(1.005) !important;
}

/* 3. 背景装饰 — 铅笔、纸飞机、五角星 (SVG SMIL) */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.45 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3C!-- 铅笔1 --%3E%3Cg transform='translate(70,60) rotate(-25)'%3E%3Crect x='0' y='-3' width='40' height='6' rx='1' fill='%23E8C94A' opacity='0.5'/%3E%3Cpolygon points='40,-3 48,0 40,3' fill='%23D4A84B' opacity='0.5'/%3E%3Crect x='-4' y='-3' width='4' height='6' rx='1' fill='%23C9A87C' opacity='0.4'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='-25;-22;-25' dur='6s' repeatCount='indefinite'/%3E%3C/g%3E%3C!-- 铅笔2 --%3E%3Cg transform='translate(420,90) rotate(15)'%3E%3Crect x='0' y='-2.5' width='35' height='5' rx='1' fill='%23B8A88A' opacity='0.4'/%3E%3Cpolygon points='35,-2.5 42,0 35,2.5' fill='%23998872' opacity='0.4'/%3E%3Crect x='-3.5' y='-2.5' width='3.5' height='5' rx='1' fill='%23E8C94A' opacity='0.35'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='15;18;15' dur='7s' repeatCount='indefinite'/%3E%3C/g%3E%3C!-- 纸飞机1 --%3E%3Cg transform='translate(200,80)'%3E%3Cpath d='M 0,0 L 28,-5 L 8,3 Z' fill='%23D6CDB8' opacity='0.5' stroke='%23B8AD96' stroke-width='0.5'/%3E%3Cpath d='M 0,0 L 28,-5 L 10,-1 Z' fill='%23E8E0CC' opacity='0.45'/%3E%3CanimateTransform attributeName='transform' type='translate' values='200,80;215,72;200,80' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.5;0.7;0.5' dur='5s' repeatCount='indefinite'/%3E%3C/g%3E%3C!-- 纸飞机2 --%3E%3Cg transform='translate(450,180)'%3E%3Cpath d='M 0,0 L 24,-4 L 7,2.5 Z' fill='%23CFC6B0' opacity='0.42' stroke='%23B3A890' stroke-width='0.5'/%3E%3Cpath d='M 0,0 L 24,-4 L 9,-0.5 Z' fill='%23E2DAC6' opacity='0.4'/%3E%3CanimateTransform attributeName='transform' type='translate' values='450,180;462,173;450,180' dur='9s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.42;0.65;0.42' dur='5.5s' repeatCount='indefinite'/%3E%3C/g%3E%3C!-- 五角星1 --%3E%3Cpolygon points='350,65 353,74 362,74 355,80 357,89 350,83 343,89 345,80 338,74 347,74' fill='%23E8C94A' opacity='0.35'%3E%3Canimate attributeName='opacity' values='0.35;0.6;0.35' dur='4s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 350 77;15 350 77;0 350 77' dur='7s' repeatCount='indefinite'/%3E%3C/polygon%3E%3C!-- 五角星2 --%3E%3Cpolygon points='520,55 522,61 528,61 523,65 525,71 520,67 515,71 517,65 512,61 518,61' fill='%23D4B84A' opacity='0.3'%3E%3Canimate attributeName='opacity' values='0.3;0.55;0.3' dur='4.5s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 520 63;-12 520 63;0 520 63' dur='6s' repeatCount='indefinite'/%3E%3C/polygon%3E%3C!-- 五角星3 --%3E%3Cpolygon points='130,290 132,296 138,296 133,300 135,306 130,302 125,306 127,300 122,296 128,296' fill='%23C9A83C' opacity='0.28'%3E%3Canimate attributeName='opacity' values='0.28;0.5;0.28' dur='3.8s' repeatCount='indefinite'/%3E%3C/polygon%3E%3C!-- 横线纹理（作业本线） --%3E%3Cline x1='50' y1='150' x2='550' y2='150' stroke='%23C6BAA0' stroke-width='0.4' opacity='0.2'/%3E%3Cline x1='50' y1='180' x2='550' y2='180' stroke='%23C6BAA0' stroke-width='0.4' opacity='0.18'/%3E%3Cline x1='50' y1='210' x2='550' y2='210' stroke='%23C6BAA0' stroke-width='0.4' opacity='0.16'/%3E%3Cline x1='50' y1='240' x2='550' y2='240' stroke='%23C6BAA0' stroke-width='0.4' opacity='0.14'/%3E%3Cline x1='50' y1='270' x2='550' y2='270' stroke='%23C6BAA0' stroke-width='0.4' opacity='0.12'/%3E%3Cline x1='50' y1='300' x2='550' y2='300' stroke='%23C6BAA0' stroke-width='0.4' opacity='0.1'/%3E%3C!-- 光斑（窗户阳光） --%3E%3Cellipse cx='480' cy='320' rx='60' ry='40' fill='%23F5E6A3' opacity='0.08'%3E%3Canimate attributeName='opacity' values='0.08;0.14;0.08' dur='6s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='120' cy='350' rx='45' ry='30' fill='%23EDD98C' opacity='0.06'%3E%3Canimate attributeName='opacity' values='0.06;0.12;0.06' dur='7s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 4. 背景装饰 — 书本、橡皮擦、圆规草稿 (SVG SMIL) */
.bg-gray-100\/90.relative.inline-block::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.3 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3C!-- 书本1 --%3E%3Cg transform='translate(80,300)'%3E%3Crect x='0' y='0' width='30' height='22' rx='2' fill='%23C9A83C' opacity='0.35'/%3E%3Crect x='2' y='2' width='26' height='18' rx='1' fill='%23F5F0E0' opacity='0.6'/%3E%3Cline x1='15' y1='2' x2='15' y2='20' stroke='%23D4C4A0' stroke-width='0.8' opacity='0.5'/%3E%3CanimateTransform attributeName='transform' type='translate' values='80,300;80,296;80,300' dur='5s' repeatCount='indefinite'/%3E%3C/g%3E%3C!-- 书本2 --%3E%3Cg transform='translate(500,280)'%3E%3Crect x='0' y='0' width='28' height='20' rx='2' fill='%23B8A88A' opacity='0.32'/%3E%3Crect x='2' y='2' width='24' height='16' rx='1' fill='%23FAF7F0' opacity='0.55'/%3E%3Cline x1='14' y1='2' x2='14' y2='18' stroke='%23D4C4A0' stroke-width='0.7' opacity='0.45'/%3E%3CanimateTransform attributeName='transform' type='translate' values='500,280;500,276;500,280' dur='5.5s' repeatCount='indefinite'/%3E%3C/g%3E%3C!-- 橡皮擦 --%3E%3Cg transform='translate(300,340)'%3E%3Crect x='0' y='0' width='22' height='12' rx='3' fill='%23F5E6A3' opacity='0.4' stroke='%23D4C490' stroke-width='0.6'/%3E%3Crect x='0' y='0' width='7' height='12' rx='2' fill='%23E8D88C' opacity='0.45'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='-3 311 346;3 311 346;-3 311 346' dur='6s' repeatCount='indefinite'/%3E%3C/g%3E%3C!-- 圆规草稿圆弧 --%3E%3Ccircle cx='160' cy='200' r='25' fill='none' stroke='%23B8A88A' stroke-width='0.6' opacity='0.2' stroke-dasharray='4 6'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 160 200;360 160 200' dur='20s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='420' cy='220' r='20' fill='none' stroke='%23C6BAA0' stroke-width='0.5' opacity='0.18' stroke-dasharray='3 5'%3E%3CanimateTransform attributeName='transform' type='rotate' values='360 420 220;0 420 220' dur='18s' repeatCount='indefinite'/%3E%3C/circle%3E%3C!-- 涂鸦小花 --%3E%3Cg transform='translate(540,340)' opacity='0.3'%3E%3Ccircle cx='0' cy='-5' r='2.5' fill='%23E8C94A'/%3E%3Ccircle cx='5' cy='-2' r='2.5' fill='%23E8C94A'/%3E%3Ccircle cx='4' cy='4' r='2.5' fill='%23E8C94A'/%3E%3Ccircle cx='-2' cy='5' r='2.5' fill='%23E8C94A'/%3E%3Ccircle cx='-5' cy='0' r='2.5' fill='%23E8C94A'/%3E%3Ccircle cx='0' cy='0' r='2.8' fill='%23D4A84B'/%3E%3Canimate attributeName='opacity' values='0.3;0.5;0.3' dur='4s' repeatCount='indefinite'/%3E%3C/g%3E%3C!-- 课程表格子暗示 --%3E%3Crect x='40' y='40' width='35' height='25' rx='2' fill='none' stroke='%23C6BAA0' stroke-width='0.5' opacity='0.15' stroke-dasharray='2 3'/%3E%3Crect x='40' y='70' width='35' height='25' rx='2' fill='none' stroke='%23C6BAA0' stroke-width='0.5' opacity='0.12' stroke-dasharray='2 3'/%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 5. 主文本内容 — 深灰暖褐高对比 */
.markdown-body {
    color: #3D3629 !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Source Han Sans", sans-serif !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    line-height: 1.8 !important;
    letter-spacing: 0.015em !important;
    font-weight: 500 !important;
}

.markdown-body strong {
    color: #8B7335 !important;
    font-weight: 700 !important;
    background: rgba(232, 201, 74, 0.18) !important;
    padding: 1px 5px !important;
    border-radius: 5px !important;
}

.markdown-body ::selection {
    background: rgba(232, 201, 74, 0.3) !important;
    color: #1A1A1A !important;
}

.markdown-body::before {
    content: "📓 " !important;
    filter: drop-shadow(0 0 4px rgba(198, 178, 130, 0.4)) !important;
}

/* 行内代码 */
.markdown-body code {
    background: rgba(198, 186, 160, 0.2) !important;
    color: #4A3F2F !important;
    border-radius: 6px !important;
    padding: 3px 7px !important;
    border: 1px solid rgba(198, 178, 130, 0.35) !important;
    font-size: 0.92em !important;
    font-weight: 600 !important;
}

/* 代码块 */
.markdown-body pre {
    background: rgba(253, 252, 248, 0.94) !important;
    border: 2px solid rgba(198, 186, 160, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(168, 152, 120, 0.12) !important;
    overflow: hidden !important;
    margin: 1.5em 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.markdown-body pre > div > div.flex.justify-between.h-8,
.markdown-body pre > div > div.border-b {
    background: linear-gradient(135deg, #F5F0E0, #FDFCF8) !important;
    border-bottom: 1px solid rgba(198, 186, 160, 0.3) !important;
    padding: 0 18px !important;
    height: 42px !important;
}

.markdown-body pre > div > div.flex.justify-between > div:first-child {
    color: #8B7335 !important;
    font-weight: 700 !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
}

.markdown-body pre div[data-tooltip-id^="copy-tooltip"],
.markdown-body pre .copy-btn-legacy {
    background: rgba(232, 201, 74, 0.15) !important;
    border: 1px solid rgba(198, 178, 130, 0.4) !important;
    color: #8B7335 !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.markdown-body pre div[data-tooltip-id^="copy-tooltip"]:hover,
.markdown-body pre .copy-btn-legacy:hover {
    background: rgba(232, 201, 74, 0.28) !important;
    border-color: #C9A83C !important;
    box-shadow: 0 0 12px rgba(198, 178, 130, 0.35) !important;
}

.markdown-body pre > div > div[node] {
    background: #FEFDFB !important;
    color: #3D3629 !important;
    padding: 22px !important;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    overflow-x: auto !important;
}

.markdown-body pre > div > div[node]::-webkit-scrollbar {
    height: 10px !important;
    width: 10px !important;
}

.markdown-body pre > div > div[node]::-webkit-scrollbar-track {
    background: #F5F0E0 !important;
    border-radius: 5px !important;
}

.markdown-body pre > div > div[node]::-webkit-scrollbar-thumb {
    background: rgba(198, 186, 160, 0.55) !important;
    border-radius: 5px !important;
}

.markdown-body pre > div > div[node]::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 152, 120, 0.75) !important;
}

/* 引用块 */
.markdown-body blockquote {
    border-left: 5px solid #C9A83C !important;
    background: linear-gradient(90deg, rgba(232, 201, 74, 0.1) 0%, transparent 100%) !important;
    padding: 14px 18px !important;
    margin: 18px 0 !important;
    border-radius: 0 14px 14px 0 !important;
    color: #4A3F2F !important;
    font-style: italic !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 链接 */
.markdown-body a {
    color: #8B7335 !important;
    text-decoration: none !important;
    border-bottom: 2px solid rgba(139, 115, 53, 0.4) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

.markdown-body a:hover {
    color: #6B5A2A !important;
    border-bottom: 2px solid #6B5A2A !important;
    filter: drop-shadow(0 0 6px rgba(107, 90, 42, 0.35)) !important;
}

/* 分割线 */
.markdown-body hr {
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(198, 178, 130, 0.5), transparent) !important;
    border: none !important;
    margin: 28px 0 !important;
    box-shadow: 0 0 8px rgba(198, 178, 130, 0.25) !important;
}

/* 表格 */
.markdown-body table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 18px 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(168, 152, 120, 0.12) !important;
    position: relative !important;
    z-index: 1 !important;
}

.markdown-body th {
    background: linear-gradient(135deg, #F5F0E0, #FDFCF8) !important;
    color: #4A3F2F !important;
    font-weight: 700 !important;
    padding: 14px !important;
    border: 1px solid rgba(198, 186, 160, 0.35) !important;
}

.markdown-body td {
    background: rgba(253, 252, 248, 0.85) !important;
    padding: 14px !important;
    border: 1px solid rgba(198, 186, 160, 0.22) !important;
    transition: background 0.3s ease !important;
    color: #3D3629 !important;
}

.markdown-body tr:hover td {
    background: rgba(232, 201, 74, 0.1) !important;
}

.markdown-body li::marker {
    color: #C9A83C !important;
}

/* 折叠块 */
.markdown-body details {
    background: rgba(253, 252, 248, 0.75) !important;
    border: 2px solid rgba(198, 186, 160, 0.35) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin: 14px 0 !important;
    box-shadow: 0 4px 12px rgba(168, 152, 120, 0.1) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

.markdown-body details:hover {
    border-color: rgba(198, 178, 130, 0.55) !important;
    background: rgba(253, 252, 248, 0.9) !important;
}

.markdown-body summary {
    cursor: pointer !important;
    color: #4A3F2F !important;
    font-weight: 700 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    transition: color 0.3s ease !important;
}

.markdown-body summary:hover {
    color: #8B7335 !important;
    filter: drop-shadow(0 0 5px rgba(139, 115, 53, 0.25)) !important;
}

.markdown-body summary::-webkit-details-marker {
    display: none !important;
}

.markdown-body summary::before {
    content: "📌" !important;
    font-size: 13px !important;
    margin-right: 12px !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.markdown-body details[open] summary::before {
    transform: rotate(90deg) !important;
}

.markdown-body details[open] summary {
    margin-bottom: 14px !important;
    border-bottom: 1px dashed rgba(198, 186, 160, 0.4) !important;
    padding-bottom: 10px !important;
}

/* 6. 底部附加元素 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
button {
    color: #8B7335 !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    z-index: 1 !important;
    font-weight: 600 !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover,
button:hover {
    color: #6B5A2A !important;
    background: rgba(232, 201, 74, 0.15) !important;
    filter: drop-shadow(0 0 6px rgba(198, 178, 130, 0.3)) !important;
    transform: translateY(-1px) !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #8B7335 !important;
    font-style: italic !important;
    position: relative !important;
    z-index: 1 !important;
    font-weight: 600 !important;
}

.text-orange-500 {
    color: #C9A83C !important;
    position: relative !important;
    z-index: 1 !important;
    font-weight: 600 !important;
}

/* 7. 加载动画 — 三支晃动铅笔 (SVG SMIL) */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    min-height: 48px !important;
    min-width: 48px !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: 48px !important;
    height: 48px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='p1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23F5E6A3'/%3E%3Cstop offset='50%25' stop-color='%23E8C94A'/%3E%3Cstop offset='100%25' stop-color='%23C9A83C'/%3E%3C/linearGradient%3E%3ClinearGradient id='p2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23E8E0CC'/%3E%3Cstop offset='50%25' stop-color='%23C6BAA0'/%3E%3Cstop offset='100%25' stop-color='%23998872'/%3E%3C/linearGradient%3E%3ClinearGradient id='p3' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23F5F0E0'/%3E%3Cstop offset='50%25' stop-color='%23D4B84A'/%3E%3Cstop offset='100%25' stop-color='%23B8963C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Crect x='16' y='28' width='5' height='28' rx='1.5' fill='url(%23p1)'/%3E%3Cpolygon points='16,56 21,56 18.5,62' fill='%23998872'/%3E%3Crect x='16' y='26' width='5' height='4' rx='1' fill='%23C9A87C'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='-8 18.5 42;8 18.5 42;-8 18.5 42' dur='1.4s' repeatCount='indefinite' begin='0s'/%3E%3C/g%3E%3Cg%3E%3Crect x='37.5' y='28' width='5' height='28' rx='1.5' fill='url(%23p2)'/%3E%3Cpolygon points='37.5,56 42.5,56 40,62' fill='%23998872'/%3E%3Crect x='37.5' y='26' width='5' height='4' rx='1' fill='%23E8C94A'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='-8 40 42;8 40 42;-8 40 42' dur='1.4s' repeatCount='indefinite' begin='0.2s'/%3E%3C/g%3E%3Cg%3E%3Crect x='59' y='28' width='5' height='28' rx='1.5' fill='url(%23p3)'/%3E%3Cpolygon points='59,56 64,56 61.5,62' fill='%23998872'/%3E%3Crect x='59' y='26' width='5' height='4' rx='1' fill='%23B8A88A'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='-8 61.5 42;8 61.5 42;-8 61.5 42' dur='1.4s' repeatCount='indefinite' begin='0.4s'/%3E%3C/g%3E%3Cellipse cx='18.5' cy='66' rx='5' ry='1.5' fill='%23C6BAA0' opacity='0.2'%3E%3Canimate attributeName='opacity' values='0.2;0.08;0.2' dur='1.4s' repeatCount='indefinite' begin='0s'/%3E%3C/ellipse%3E%3Cellipse cx='40' cy='66' rx='5' ry='1.5' fill='%23C6BAA0' opacity='0.2'%3E%3Canimate attributeName='opacity' values='0.2;0.08;0.2' dur='1.4s' repeatCount='indefinite' begin='0.2s'/%3E%3C/ellipse%3E%3Cellipse cx='61.5' cy='66' rx='5' ry='1.5' fill='%23C6BAA0' opacity='0.2'%3E%3Canimate attributeName='opacity' values='0.2;0.08;0.2' dur='1.4s' repeatCount='indefinite' begin='0.4s'/%3E%3C/ellipse%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    z-index: 2 !important;
}

.flex.items-center.justify-center.w-6.h-5::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 56px !important;
    height: 56px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='32' fill='none' stroke='%23C6BAA0' stroke-width='1.5' opacity='0.25' stroke-dasharray='6 10'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 40 40;360 40 40' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.25;0.1;0.25' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='40' cy='40' r='28' fill='none' stroke='%23D4B84A' stroke-width='1' opacity='0.18' stroke-dasharray='4 8'%3E%3CanimateTransform attributeName='transform' type='rotate' values='360 40 40;0 40 40' dur='10s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.18;0.06;0.18' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    z-index: 1 !important;
}

/* 8. 移动端适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        margin: 10px !important;
        border-radius: 20px !important;
        padding: 16px !important;
    }
    
    .markdown-body {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    
    .markdown-body pre {
        border-radius: 12px !important;
        margin: 1em 0 !important;
    }
    
    .markdown-body pre > div > div[node] {
        padding: 16px !important;
        font-size: 13px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5 {
        min-height: 40px !important;
        min-width: 40px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 40px !important;
        height: 40px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::after {
        width: 48px !important;
        height: 48px !important;
    }
}

/* 9. 低动效偏好适配 */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before {
        opacity: 0.3 !important;
    }
    
    .bg-gray-100\/90.relative.inline-block::after {
        opacity: 0.2 !important;
    }
    
    .bg-gray-100\/90.relative.inline-block:hover {
        transform: translateY(-1px) scale(1.002) !important;
    }
    
    .MuiButtonBase-root.MuiButton-text.MuiButton-textPrimary:hover,
    button:hover {
        transform: none !important;
    }
}