/* ==========================================
   🐾 萌趣猫狗乐园 · 聊天框美化方案
   特点: 蜜桃暖米色渐变、动态猫狗爪印/骨头、萌爪交替加载
   ========================================== */

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

/* 2. 统一聊天框 — 蜜桃香草渐变（极佳的视觉舒适度） */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(
        135deg,
        #FFF9F2 0%,
        #FFF0F5 30%,
        #F0FDF4 65%,
        #FFF5ED 100%
    ) !important;
    border: 2px solid rgba(255, 179, 142, 0.4) !important;
    box-shadow:
        0 0 0 1px rgba(255, 179, 142, 0.2),
        0 6px 20px rgba(139, 92, 26, 0.08),
        0 12px 40px rgba(244, 143, 177, 0.06),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9) !important;
    border-radius: 24px !important;
    isolation: isolate !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 22px !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(255, 138, 101, 0.5),
        0 8px 28px rgba(139, 92, 26, 0.12),
        0 16px 48px rgba(244, 143, 177, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !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.55 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3C!-- 漂浮的小骨头 --%3E%3Cg opacity='0.25' fill='%23FFB74D'%3E%3Cpath d='M 80,60 C 72,55 72,45 80,40 C 88,40 88,50 88,50 C 88,50 98,50 98,40 C 106,45 106,55 98,60 L 98,65 C 106,70 106,80 98,85 C 90,85 90,75 90,75 C 90,75 80,75 80,85 C 72,80 72,70 80,65 Z' transform='rotate(15, 90, 60)'%3E%3Canimate attributeName='opacity' values='0.25;0.5;0.25' dur='5s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 0,-15; 0,0' dur='5s' repeatCount='indefinite' additive='sum'/%3E%3C/path%3E%3C/g%3E%3Cg opacity='0.2' fill='%2381C784'%3E%3Cpath d='M 480,280 C 472,275 472,265 480,260 C 488,260 488,270 488,270 C 488,270 498,270 498,260 C 506,265 506,275 498,280 L 498,285 C 506,290 506,300 498,305 C 490,305 490,295 490,295 C 490,295 480,295 480,305 C 472,300 472,290 480,285 Z' transform='rotate(-25, 490, 280)'%3E%3Canimate attributeName='opacity' values='0.2;0.45;0.2' dur='6.2s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 0,-12; 0,0' dur='6.2s' repeatCount='indefinite' additive='sum'/%3E%3C/path%3E%3C/g%3E%3C!-- 漂浮的小猫爪印 --%3E%3Cg fill='%23F48FB1' opacity='0.28'%3E%3Ccircle cx='280' cy='80' r='5'/%3E%3Ccircle cx='292' cy='73' r='5'/%3E%3Ccircle cx='306' cy='76' r='5'/%3E%3Ccircle cx='316' cy='86' r='5'/%3E%3Cpath d='M 285,92 C 285,82 312,82 312,92 C 312,102 285,102 285,92 Z'/%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 0,-18; 0,0' dur='5.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.28;0.6;0.28' dur='5.5s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg fill='%23A5D6A7' opacity='0.22'%3E%3Ccircle cx='110' cy='290' r='4.5'/%3E%3Ccircle cx='121' cy='283' r='4.5'/%3E%3Ccircle cx='133' cy='286' r='4.5'/%3E%3Ccircle cx='142' cy='295' r='4.5'/%3E%3Cpath d='M 115,301 C 115,291 139,291 139,301 C 139,310 115,310 115,301 Z'/%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 0,-10; 0,0' dur='4.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.22;0.5;0.22' dur='4.8s' repeatCount='indefinite'/%3E%3C/g%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.45 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3C!-- 慢速漂浮的心 --%3E%3Cpath d='M 520,70 C 520,63 513,57 506,57 C 499,57 492,63 492,70 C 492,80 503,90 520,104 C 537,90 548,80 548,70 C 548,63 541,57 534,57 C 527,57 520,63 520,70 Z' fill='%23FFAB91' opacity='0.3'%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 0,-15; 0,0' dur='7s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.3;0.65;0.3' dur='7s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M 210,310 C 210,305 205,300 200,300 C 195,300 190,305 190,310 C 190,318 198,326 210,337 C 222,326 230,318 230,310 C 230,305 225,300 220,300 C 215,300 210,305 210,310 Z' fill='%23F48FB1' opacity='0.25'%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 0,-12; 0,0' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.25;0.55;0.25' dur='8s' repeatCount='indefinite'/%3E%3C/path%3E%3C!-- 萌耳气泡 --%3E%3Cg fill='none' stroke='%23FFCC80' stroke-width='1.5' opacity='0.3'%3E%3Ccircle cx='380' cy='230' r='14'/%3E%3Cpath d='M 368,220 L 372,210 L 378,217 Z' fill='%23FFCC80'/%3E%3Cpath d='M 392,220 L 388,210 L 382,217 Z' fill='%23FFCC80'/%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 0,-20; 0,0' dur='6.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.3;0.6;0.3' dur='6.5s' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 5. 主文本内容 — 深木炭色 (绝对清晰、极佳对比度) */
.markdown-body {
    color: #3E2723 !important; /* 深咖啡色，温暖且对比度绝佳 */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", sans-serif !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    line-height: 1.8 !important;
    letter-spacing: 0.02em !important;
}

/* 文本前缀替换为猫爪 */
.markdown-body::before {
    content: "🐾 " !important;
    color: #FF8A65 !important;
    font-size: 1.1em !important;
    filter: drop-shadow(0 2px 4px rgba(255, 138, 101, 0.3)) !important;
}

/* 加粗文本美化 */
.markdown-body strong {
    color: #D84315 !important;
    font-weight: 700 !important;
    background: rgba(255, 204, 128, 0.3) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
}

.markdown-body ::selection {
    background: rgba(255, 171, 145, 0.4) !important;
    color: #4E342E !important;
}

/* 行内代码 */
.markdown-body code {
    background: rgba(255, 224, 178, 0.35) !important;
    color: #BF360C !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(255, 171, 145, 0.3) !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
}

/* 代码块 */
.markdown-body pre {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(255, 179, 142, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(139, 92, 26, 0.06) !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, #FFF3E0, #FFE0B2) !important;
    border-bottom: 1.5px solid rgba(255, 179, 142, 0.3) !important;
    padding: 0 18px !important;
    height: 42px !important;
}

.markdown-body pre > div > div.flex.justify-between > div:first-child {
    color: #E65100 !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(255, 167, 129, 0.15) !important;
    border: 1px solid rgba(255, 167, 129, 0.4) !important;
    color: #D84315 !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(255, 112, 67, 0.25) !important;
    border-color: #FF7043 !important;
    box-shadow: 0 0 10px rgba(255, 112, 67, 0.3) !important;
}

.markdown-body pre > div > div[node] {
    background: #FFFDFB !important;
    color: #4E342E !important;
    padding: 22px !important;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
    font-size: 14px !important;
    line-height: 1.75 !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: #FFF3E0 !important;
    border-radius: 5px !important;
}

.markdown-body pre > div > div[node]::-webkit-scrollbar-thumb {
    background: rgba(255, 171, 145, 0.6) !important;
    border-radius: 5px !important;
}

.markdown-body pre > div > div[node]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 112, 67, 0.8) !important;
}

/* 引用块 */
.markdown-body blockquote {
    border-left: 5px solid #FF8A65 !important;
    background: linear-gradient(90deg, rgba(255, 138, 101, 0.12) 0%, transparent 100%) !important;
    padding: 14px 18px !important;
    margin: 18px 0 !important;
    border-radius: 0 14px 14px 0 !important;
    color: #8D6E63 !important;
    font-style: italic !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 链接 */
.markdown-body a {
    color: #D84315 !important;
    text-decoration: none !important;
    border-bottom: 2px solid rgba(216, 67, 21, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

.markdown-body a:hover {
    color: #FF3D00 !important;
    border-bottom: 2px solid #FF3D00 !important;
    filter: drop-shadow(0 0 6px rgba(255, 61, 0, 0.3)) !important;
}

/* 分割线 */
.markdown-body hr {
    height: 3px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 171, 145, 0.5), transparent) !important;
    border: none !important;
    margin: 28px 0 !important;
    position: relative !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(216, 67, 21, 0.08) !important;
}

.markdown-body th {
    background: linear-gradient(135deg, #FFE0B2, #FFCC80) !important;
    color: #5D4037 !important;
    font-weight: 700 !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 171, 145, 0.3) !important;
}

.markdown-body td {
    background: rgba(255, 255, 255, 0.85) !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 171, 145, 0.2) !important;
    transition: background 0.3s ease !important;
}

.markdown-body tr:hover td {
    background: rgba(255, 224, 178, 0.2) !important;
}

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

/* 折叠块 */
.markdown-body details {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid rgba(255, 171, 145, 0.3) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin: 14px 0 !important;
    box-shadow: 0 4px 12px rgba(255, 171, 145, 0.05) !important;
}

.markdown-body summary {
    cursor: pointer !important;
    color: #5D4037 !important;
    font-weight: 700 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
}

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

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

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

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

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover,
button:hover {
    color: #D84315 !important;
    background: rgba(255, 171, 145, 0.18) !important;
    transform: translateY(-1px) !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #8D6E63 !important;
    font-weight: 600 !important;
}

.text-orange-500 {
    color: #E65100 !important;
    font-weight: 700 !important;
}

/* 7. 加载动画 — 猫狗爪印交替落地 (SVG SMIL 动画) */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    min-height: 52px !important;
    min-width: 52px !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: 52px !important;
    height: 52px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- 萌爪1号：暖橙爪 --%3E%3Cg fill='%23FF8A65' opacity='0'%3E%3Ccircle cx='35' cy='45' r='5'/%3E%3Ccircle cx='47' cy='38' r='5'/%3E%3Ccircle cx='60' cy='42' r='5'/%3E%3Ccircle cx='68' cy='52' r='5'/%3E%3Cpath d='M 40,58 C 40,48 64,48 64,58 C 64,68 40,68 40,58 Z'/%3E%3Canimate attributeName='opacity' values='0;1;0;0' dur='1.8s' repeatCount='indefinite' begin='0s'/%3E%3CanimateTransform attributeName='transform' type='scale' values='0.8;1.1;0.8;0.8' dur='1.8s' repeatCount='indefinite' begin='0s' transform-origin='50 50'/%3E%3C/g%3E%3C!-- 萌爪2号：粉肉垫 --%3E%3Cg fill='%23F48FB1' opacity='0'%3E%3Ccircle cx='32' cy='48' r='5'/%3E%3Ccircle cx='44' cy='41' r='5'/%3E%3Ccircle cx='57' cy='45' r='5'/%3E%3Ccircle cx='65' cy='55' r='5'/%3E%3Cpath d='M 37,61 C 37,51 61,51 61,61 C 61,71 37,71 37,61 Z'/%3E%3Canimate attributeName='opacity' values='0;0;1;0' dur='1.8s' repeatCount='indefinite' begin='0.9s'/%3E%3CanimateTransform attributeName='transform' type='scale' values='0.8;0.8;1.1;0.8' dur='1.8s' repeatCount='indefinite' begin='0.9s' transform-origin='50 50'/%3E%3C/g%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: 58px !important;
    height: 58px !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='%23FFD54F' stroke-width='1.5' opacity='0.2'%3E%3Canimate attributeName='r' values='20;35;20' dur='3s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.3;0;0.3' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='40' cy='40' r='25' fill='none' stroke='%23FF8A65' stroke-width='1' opacity='0.15'%3E%3Canimate attributeName='r' values='15;30;15' dur='3s' repeatCount='indefinite' begin='1.5s'/%3E%3Canimate attributeName='opacity' values='0.2;0;0.2' dur='3s' repeatCount='indefinite' begin='1.5s'/%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: 8px 4px !important;
        border-radius: 20px !important;
        padding: 16px 14px !important;
        border-width: 1.5px !important;
    }
    
    .markdown-body {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
    
    .markdown-body pre {
        border-radius: 12px !important;
        margin: 1.2em 0 !important;
    }
    
    .markdown-body pre > div > div[node] {
        padding: 15px !important;
        font-size: 13.5px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5 {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* 9. 低动效偏好适配 */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before,
    .bg-gray-100\/90.relative.inline-block::after {
        opacity: 0.3 !important;
        background-image: none !important; /* 彻底停止浮动，确保极端低端设备不卡顿 */
    }
    
    .bg-gray-100\/90.relative.inline-block:hover {
        transform: none !important;
    }
}