/* 1. 整个代码块容器：圆润边框，温柔粉色阴影 */
.markdown-body pre {
    border: 2px solid #ffb7c5 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 16px rgba(255, 183, 197, 0.25) !important;
    overflow: hidden !important;
    background-color: #fffafc !important;
    margin-bottom: 1.5em !important;
}

/* 2. 头部栏：初恋粉色渐变，手账风虚线底边 */
.markdown-body pre > div > div.flex.justify-between.h-8,
.markdown-body pre > div > div.border-b {
    background: linear-gradient(135deg, #ffe4e1 0%, #ffb7c5 100%) !important;
    border-bottom: 2px dashed #ff9eaf !important;
    height: 38px !important;
    padding: 0 16px !important;
}

/* 3. 语言标签：添加樱花和情书图标，修改字体颜色与字重 */
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\] {
    color: #d81b60 !important;
    font-weight: 700 !important;
    font-family: "Comic Sans MS", "Nunito", cursive, sans-serif !important;
    letter-spacing: 1px !important;
    display: flex !important;
    align-items: center !important;
}
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\]::before {
    content: "🌸 ";
    margin-right: 6px;
    font-size: 15px;
}
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\]::after {
    content: " 💌";
    margin-left: 6px;
    font-size: 15px;
}

/* 4. 复制按钮图标默认颜色 (深樱花粉) */
.markdown-body pre svg.lucide-copy,
.markdown-body pre div[data-tooltip-id^="copy-tooltip"] > svg {
    color: #d81b60 !important;
    width: 18px !important;
    height: 18px !important;
    transition: all 0.3s ease !important;
}

/* 5. 复制按钮图标 Hover 颜色 (心跳亮红) */
.markdown-body pre .group:hover svg.lucide-copy,
.markdown-body pre div[data-tooltip-id^="copy-tooltip"]:hover > svg {
    color: #ff1493 !important;
    transform: scale(1.15) rotate(5deg) !important;
}

/* 6. 代码内容区：温馨的白粉色背景，柔和的文字颜色，覆盖原内联样式 */
.markdown-body pre > div > div[node] {
    background: #fffdfb !important;
    color: #5c4d50 !important;
    padding: 16px !important;
    font-family: "Consolas", "Courier New", monospace !important;
    line-height: 1.65 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 7. 伪元素：右下角添加青春校园风的装饰水印 */
.markdown-body pre > div > div[node]::after {
    content: "🎀✨";
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 28px;
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
}

/* 8. 滚动条美化 (针对Webkit浏览器，粉色可爱风) */
.markdown-body pre > div > div[node]::-webkit-scrollbar {
    height: 8px !important;
    width: 8px !important;
}
.markdown-body pre > div > div[node]::-webkit-scrollbar-thumb {
    background-color: #ffb7c5 !important;
    border-radius: 4px !important;
}
.markdown-body pre > div > div[node]::-webkit-scrollbar-track {
    background-color: rgba(255, 183, 197, 0.1) !important;
}

/* 9. 无语言标识的纯代码块兼容 */
.markdown-body pre > code[node] {
    background: #fffdfb !important;
    color: #5c4d50 !important;
    padding: 16px !important;
    display: block !important;
    border-radius: 14px !important;
}

/* 10. 统一聊天框主体：粉蓝渐变与手账风虚线边框 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #FFF5F7 0%, #E8F4F8 100%) !important;
    border: 2px dashed #FFB6C1 !important;
    border-radius: 20px 20px 20px 5px !important;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.25) !important;
    padding: 15px 25px !important;
    position: relative !important;
    isolation: isolate !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

/* 11. 右上角装饰：悬浮的天蓝色纸飞机 (内嵌SVG + SMIL动画) */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: -16px !important;
    right: -12px !important;
    width: 32px !important;
    height: 32px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2387CEFA'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 2,-2; 0,0' dur='4s' repeatCount='indefinite'/%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 2 !important;
    transform: rotate(-15deg) !important;
    pointer-events: none !important;
}

/* 12. 左下角装饰：跳动的粉色爱心 (内嵌SVG + SMIL动画) */
.bg-gray-100\/90.relative.inline-block::after {
    content: "" !important;
    position: absolute !important;
    bottom: -12px !important;
    left: -12px !important;
    width: 26px !important;
    height: 26px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB6C1'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 0,-3; 0,0' dur='3s' repeatCount='indefinite'/%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 2 !important;
    transform: rotate(-10deg) !important;
    pointer-events: none !important;
}

/* 13. 核心文本内容：绝对可读性原则 */
.markdown-body {
    color: #4A4A4A !important;
    font-family: 'Quicksand', 'Nunito', 'Microsoft YaHei', sans-serif !important;
    line-height: 1.65 !important;
    z-index: 1 !important;
    position: relative !important;
    background: transparent !important;
}

/* 粗体字强调：使用深一点的樱花粉 */
.markdown-body strong {
    color: #FF82AB !important; 
    font-weight: bold !important;
}

/* 14. 底部附加元素：按钮、模型名称、Token消耗 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #8B7D82 !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

/* 底部操作按钮的悬浮互动效果 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #FF82AB !important;
    background-color: rgba(255, 182, 193, 0.15) !important;
    border-radius: 8px !important;
}

/* 移动端微调：缩小装饰图标尺寸 */
@media(max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block::before {
        width: 24px !important;
        height: 24px !important;
        top: -12px !important;
        right: -8px !important;
    }
    .bg-gray-100\/90.relative.inline-block::after {
        width: 20px !important;
        height: 20px !important;
        bottom: -10px !important;
        left: -8px !important;
    }
}