/* ============================================
   🌻 夏日青春·萌系浪漫 整合主题 v1.0
   配色：晴空蓝 / 向日葵黄 / 青草绿 / 蜜桃粉
   ============================================ */

/* ========== 0. 基础变量通过 .markdown-body 注入 ========== */
.markdown-body {
    --sun: #FFB74D;
    --sky: #81D4FA;
    --grass: #AED581;
    --peach: #FFAB91;
    --pink: #F8BBD0;
    --cream: #FFFDE7;
    --brown: #5D4037;
    color: #5D4037 !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif !important;
}
.markdown-body strong { 
    color: #E65100 !important; 
    font-weight: bold !important; 
}

/* ============================================
   1️⃣ 聊天框美化
   ============================================ */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #FFFEF7 0%, #FFF8E7 100%) !important;
    border: 2px solid #FFD89B !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(255, 193, 122, 0.25), 
                inset 0 0 30px rgba(255, 245, 200, 0.4) !important;
    position: relative !important;
    isolation: isolate !important;
    transition: all 0.3s ease !important;
    font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif !important;
}

.chat-answer-container .bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #E8F5E9 0%, #E3F2FD 50%, #FFF9C4 100%) !important;
    border: 2px solid #A5D6A7 !important;
    box-shadow: 0 4px 20px rgba(165, 214, 167, 0.3) !important;
}

.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%) !important;
    border: 2px solid #FFB6C1 !important;
}

/* 飘落樱花/星星 */
.bg-gray-100\/90.relative.inline-block::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g opacity='0.5'><circle cx='30' cy='30' r='3' fill='%23FFB6C1'><animate attributeName='cy' from='-10' to='210' dur='8s' repeatCount='indefinite'/></circle><circle cx='80' cy='60' r='2' fill='%23FFC0CB'><animate attributeName='cy' from='-10' to='210' dur='10s' repeatCount='indefinite'/></circle><circle cx='150' cy='40' r='3' fill='%23FFD700'><animate attributeName='cy' from='-10' to='210' dur='9s' repeatCount='indefinite'/></circle><circle cx='120' cy='100' r='2' fill='%2387CEEB'><animate attributeName='cy' from='-10' to='210' dur='11s' repeatCount='indefinite'/></circle></g></svg>") !important;
    background-size: 200px 200px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 20px !important;
    opacity: 0.7 !important;
}

/* 聊天框底部按钮 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #FF7043 !important;
    background: rgba(255, 224, 178, 0.5) !important;
    border-radius: 12px !important;
    margin: 0 2px !important;
    transition: all 0.3s !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: #FFD89B !important;
    transform: translateY(-2px) !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #66BB6A !important;
    font-weight: 600 !important;
}
.text-orange-500 {
    color: #FF8A65 !important;
}

/* ============================================
   🐱 升级版加载动画：小猫挠毛线球
   ============================================ */
.style_dot-flashing__8L91Q.style_text__zGhNq { display: none !important; }

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    min-width: 80px !important;
    min-height: 50px !important;
}
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70px !important;
    height: 50px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50'><g><ellipse cx='20' cy='30' rx='14' ry='11' fill='%23FFCC80'/><polygon points='9,22 12,12 17,20' fill='%23FFCC80'/><polygon points='31,22 28,12 23,20' fill='%23FFCC80'/><polygon points='11,20 13,15 15,19' fill='%23FFAB91'/><polygon points='29,20 27,15 25,19' fill='%23FFAB91'/><circle cx='16' cy='29' r='1.5' fill='%235D4037'/><circle cx='24' cy='29' r='1.5' fill='%235D4037'/><polygon points='20,32 18,34 22,34' fill='%23FF8A65'/><path d='M30 35 Q40 32 48 38' stroke='%23FFCC80' stroke-width='3' fill='none' stroke-linecap='round'><animate attributeName='d' values='M30 35 Q40 32 48 38;M30 35 Q40 38 48 32;M30 35 Q40 32 48 38' dur='0.8s' repeatCount='indefinite'/></path><circle cx='55' cy='35' r='6' fill='%23F8BBD0' stroke='%23E91E63' stroke-width='1'><animateTransform attributeName='transform' type='rotate' from='0 55 35' to='360 55 35' dur='1.5s' repeatCount='indefinite'/><animate attributeName='cx' values='55;58;52;55' dur='0.8s' repeatCount='indefinite'/></circle><path d='M51 32 Q55 35 59 38' stroke='%23E91E63' stroke-width='0.5' fill='none'><animateTransform attributeName='transform' type='rotate' from='0 55 35' to='360 55 35' dur='1.5s' repeatCount='indefinite'/></path></g></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ============================================
   2️⃣ 顶部栏 / 底部栏 / 评论区美化
   ============================================ */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(135deg, #B3E5FC 0%, #FFF9C4 50%, #FFCCBC 100%) !important;
    border-bottom: 3px dashed #FFB74D !important;
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.3) !important;
    position: sticky !important;
    overflow: hidden !important;
}

/* ☁️ 顶部栏飘云挂件（SMIL动画） */
.sticky.w-full.top-0.flex.items-center::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='60' viewBox='0 0 400 60'><g opacity='0.6'><g><ellipse cx='40' cy='20' rx='20' ry='10' fill='white'/><ellipse cx='55' cy='15' rx='15' ry='9' fill='white'/><ellipse cx='30' cy='17' rx='12' ry='8' fill='white'/><animateTransform attributeName='transform' type='translate' from='-100 0' to='500 0' dur='25s' repeatCount='indefinite'/></g><g><ellipse cx='200' cy='35' rx='25' ry='11' fill='white'/><ellipse cx='220' cy='30' rx='15' ry='8' fill='white'/><animateTransform attributeName='transform' type='translate' from='-200 0' to='500 0' dur='35s' repeatCount='indefinite'/></g><g><ellipse cx='320' cy='15' rx='18' ry='9' fill='white'/><ellipse cx='335' cy='12' rx='12' ry='7' fill='white'/><animateTransform attributeName='transform' type='translate' from='-150 0' to='550 0' dur='30s' repeatCount='indefinite'/></g></g></svg>") !important;
    background-repeat: repeat-x !important;
    background-size: 400px 60px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.sticky.w-full.top-0.flex.items-center > * {
    position: relative !important;
    z-index: 1 !important;
}

#ai-model-selector .group.flex.items-center {
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 16px !important;
    padding: 4px 10px !important;
    border: 2px solid #FFD89B !important;
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #E65100 !important;
    font-weight: 700 !important;
}

#header-setting-button, 
.sticky.w-full.top-0 button.MuiIconButton-root {
    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;
    transition: transform 0.3s !important;
}
#header-setting-button:hover { transform: rotate(90deg) !important; }

.sticky.w-full.top-0 svg { color: #FF7043 !important; }

/* 开场白选择器 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: linear-gradient(90deg, #FFF8E7, #FFE4E1) !important;
    border: 2px solid #FFB6C1 !important;
    border-radius: 14px !important;
}

/* 按钮栏 */
#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(135deg, #FFE082, #FFAB91) !important;
    border-radius: 14px !important;
    color: #5D4037 !important;
    box-shadow: 0 2px 6px rgba(255, 171, 145, 0.4) !important;
    transition: all 0.3s !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 171, 145, 0.6) !important;
}
#ai-mod-button2 button.MuiButton-root svg { color: #E65100 !important; }

/* 底部输入框 */
#ai-chat-bottom-input {
    background: linear-gradient(135deg, #FFFDE7, #FFF3E0) !important;
    border: 2px solid #FFD89B !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 16px rgba(255, 193, 122, 0.3) !important;
}
#ai-chat-input {
    color: #5D4037 !important;
    font-family: 'PingFang SC', system-ui, sans-serif !important;
}
#ai-chat-input::placeholder { color: #BCAAA4 !important; }
#ai-chat-input::selection { background: #FFD89B !important; color: #E65100 !important; }

/* 分页栏 */
.MuiPaginationItem-root {
    color: #FF7043 !important;
    background: #FFF8E7 !important;
    border: 1px solid #FFD89B !important;
}
.MuiPaginationItem-root.Mui-selected {
    background: linear-gradient(135deg, #FFB74D, #FF8A65) !important;
    color: #FFF !important;
}

/* 评论区 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(180deg, #FFF8E7 0%, #FFE4E1 100%) !important;
}
div.text-lg.font-bold {
    color: #E65100 !important;
    text-shadow: 1px 1px 0 #FFF !important;
}
div.text-lg.font-bold::before { content: '🌻 '; }

p.MuiTypography-body1.text-grey-600 { color: #6D4C41 !important; }
span.MuiRating-iconEmpty svg { color: #FFE0B2 !important; }
span.MuiRating-iconFilled svg { 
    color: #FFB300 !important;
    filter: drop-shadow(0 0 3px #FFD700) !important;
}
span.text-orange-500 { color: #FF7043 !important; font-weight: 700 !important; }

div.flex.flex-col.border-gray-200 {
    background: #FFFDE7 !important;
    border: 2px solid #FFD89B !important;
    border-radius: 16px !important;
}
textarea.rc-textarea {
    color: #5D4037 !important;
    background: transparent !important;
}
div.bg-gray-100.text-gray-500 {
    background: #FFF3E0 !important;
    color: #8D6E63 !important;
    border-radius: 10px !important;
}

div.cursor-pointer.group.flex.items-center.justify-center {
    background: linear-gradient(135deg, #81D4FA, #80DEEA) !important;
    border-radius: 14px !important;
    transition: all 0.3s !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
    transform: scale(1.05) !important;
}
div[data-state="closed"] svg[data-icon="Send03"] { color: #FFF !important; }

button.MuiButton-containedPrimary {
    background: linear-gradient(135deg, #FFB74D, #FF8A65) !important;
    color: #FFF !important;
    border-radius: 12px !important;
}
button.MuiButton-outlinedPrimary {
    color: #FF7043 !important;
    border: 2px solid #FFD89B !important;
    background: #FFF8E7 !important;
    border-radius: 12px !important;
}

div.group img.rounded-full {
    border: 2px solid #FFB74D !important;
    box-shadow: 0 0 8px rgba(255, 183, 77, 0.4) !important;
}
div.text-sm.text-grey-600 span.font-bold { color: #E65100 !important; }
span.text-\[10px\] {
    background: #FFB6C1 !important;
    color: #FFF !important;
    padding: 1px 6px !important;
    border-radius: 8px !important;
}
div.break-all { color: #5D4037 !important; }
div.text-xs.text-grey-600 { color: #A1887F !important; }
button.text-gray-400 { color: #FF8A80 !important; }

div.ml-8.border-l { border-left: 2px dashed #FFD89B !important; }

/* ============================================
   3️⃣ 代码块美化
   ============================================ */
.markdown-body pre {
    background: linear-gradient(135deg, #FFFDE7 0%, #FFF8E1 100%) !important;
    border: 2px solid #FFD54F !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2) !important;
    overflow: hidden !important;
}

.markdown-body pre > div > div.flex.justify-between.h-8 {
    background: linear-gradient(90deg, #DCEDC8 0%, #F0F4C3 100%) !important;
    border-bottom: 2px dashed #AED581 !important;
}
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\] {
    color: #558B2F !important;
    font-weight: 700 !important;
}
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\]::before {
    content: '🌿 ';
}

.markdown-body pre > div > div[node] {
    background: #FFFEF7 !important;
    color: #5D4037 !important;
    padding: 12px !important;
    font-family: 'JetBrains Mono', 'Consolas', monospace !important;
}

.markdown-body pre svg.lucide-copy,
.markdown-body pre div[data-tooltip-id^="copy-tooltip"] > svg {
    color: #FF8F00 !important;
}
.markdown-body pre .group:hover svg.lucide-copy {
    color: #E65100 !important;
}

.markdown-body pre > code[node] {
    background: #FFFDE7 !important;
    color: #5D4037 !important;
    border: 2px dashed #FFD54F !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    display: block !important;
}

/* ============================================
   4️⃣ 输出格式（HTML/details卡片）美化
   ============================================ */
.markdown-body details {
    background: linear-gradient(135deg, #FFFEF7 0%, #FFF3E0 100%) !important;
    border: 2px solid #FFD89B !important;
    border-radius: 18px !important;
    padding: 10px 14px !important;
    margin: 12px 0 !important;
    box-shadow: 0 4px 14px rgba(255, 193, 122, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
}
.markdown-body details::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 4px !important;
    background: linear-gradient(90deg, #FFB74D, #F8BBD0, #81D4FA, #AED581) !important;
}

.markdown-body details summary {
    cursor: pointer !important;
    font-weight: 700 !important;
    color: #E65100 !important;
    font-size: 15px !important;
    padding: 6px 4px !important;
    list-style: none !important;
    user-select: none !important;
    transition: all 0.3s !important;
}
.markdown-body details summary:hover {
    color: #FF7043 !important;
    transform: translateX(4px) !important;
}
.markdown-body details summary::-webkit-details-marker { display: none !important; }
.markdown-body details summary::before {
    content: '▸ ' !important;
    color: #FFB74D !important;
    transition: transform 0.3s !important;
}
.markdown-body details[open] > summary::before {
    content: '▾ ' !important;
}

/* 嵌套details */
.markdown-body details details {
    background: linear-gradient(135deg, #E1F5FE, #F1F8E9) !important;
    border: 2px dashed #81D4FA !important;
    margin: 8px 0 !important;
}
.markdown-body details details summary { color: #0277BD !important; }

.markdown-body details > div {
    padding: 10px 6px !important;
    color: #5D4037 !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
}

.markdown-body details strong {
    color: #D84315 !important;
    background: #FFE082 !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
}

.markdown-body details hr {
    border: none !important;
    border-top: 2px dotted #FFB74D !important;
    margin: 8px 0 !important;
}

.markdown-body p {
    color: #4E342E !important;
    line-height: 1.9 !important;
}

/* 🔍 状态图Hover放大镜效果 */
.markdown-body details img {
    border-radius: 14px !important;
    border: 3px solid #FFD89B !important;
    box-shadow: 0 4px 16px rgba(255, 183, 77, 0.4) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.4s ease !important;
    cursor: zoom-in !important;
}
.markdown-body details img:hover {
    transform: scale(1.08) rotate(-1deg) !important;
    box-shadow: 0 8px 28px rgba(255, 138, 101, 0.55), 
                0 0 0 4px rgba(255, 245, 200, 0.6) !important;
    border-color: #FF8A65 !important;
}

/* 记忆区日记本横线 */
.markdown-body details:last-of-type > div {
    background: 
        repeating-linear-gradient(
            transparent,
            transparent 28px,
            #FFE0B2 28px,
            #FFE0B2 29px
        ) !important;
    padding: 4px 12px !important;
    border-radius: 10px !important;
}

/* ============================================
   📱 移动端 & 减弱动效
   ============================================ */
@media (max-width: 480px) {
    .markdown-body details { padding: 8px 10px !important; margin: 8px 0 !important; }
    .markdown-body details summary { font-size: 14px !important; }
    .markdown-body details > div { font-size: 13px !important; }
    .flex.items-center.justify-center.w-6.h-5 { min-width: 60px !important; min-height: 40px !important; }
    .flex.items-center.justify-center.w-6.h-5::before { width: 55px !important; height: 40px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .markdown-body details summary:hover { transform: none !important; }
    .markdown-body details img:hover { transform: scale(1.04) !important; }
}