/* ============================================
   🏀 燃动青春·暖色运动 整合主题 v1.0
   配色：活力橙 / 烈焰红 / 赛道黄 / 沉稳棕
   ============================================ */

/* ========== 0. 基础变量与全局文本 ========== */
.markdown-body {
    --energy-orange: #FF5722;
    --flame-red: #E64A19;
    --sweat-yellow: #FFB300;
    --court-brown: #3E2723;
    --bg-warm: #FFF8F0;
    
    color: var(--court-brown) !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: #D84315 !important; 
    font-weight: 900 !important; 
    background: rgba(255, 179, 0, 0.2) !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
}

/* ============================================
   1️⃣ 聊天框美化 (运动感硬朗边框 + 速度线动效)
   ============================================ */
/* 隐藏默认顶部颜色条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 统一聊天框基础样式 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFEBE2 100%) !important;
    border: 2px solid #FF8A65 !important;
    border-radius: 12px 12px 12px 2px !important; /* 更硬朗的倒角 */
    box-shadow: 4px 4px 0px rgba(255, 87, 34, 0.15) !important; /* 运动风硬阴影 */
    position: relative !important;
    isolation: isolate !important;
    transition: all 0.3s ease !important;
}

/* AI输出框 (偏清爽的暖黄) */
.chat-answer-container .bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #FFFDE7 0%, #FFF3E0 100%) !important;
    border: 2px solid #FFB300 !important;
    box-shadow: 4px 4px 0px rgba(255, 179, 0, 0.15) !important;
    border-radius: 12px 12px 2px 12px !important;
}

/* User输入框 (偏热血的暖橙) */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(135deg, #FFF0E6 0%, #FFCCBC 100%) !important;
    border: 2px solid #FF5722 !important;
}

/* ⚡ 动感速度线条与火花背景 (SMIL SVG) */
.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.3'><line x1='-50' y1='50' x2='0' y2='100' stroke='%23FF5722' stroke-width='3' stroke-linecap='round'><animateTransform attributeName='transform' type='translate' from='-50 -50' to='300 300' dur='1.2s' repeatCount='indefinite'/></line><line x1='50' y1='-50' x2='100' y2='0' stroke='%23FFB300' stroke-width='2' stroke-linecap='round'><animateTransform attributeName='transform' type='translate' from='-50 -50' to='300 300' dur='1.8s' repeatCount='indefinite'/></line><circle cx='80' cy='150' r='2' fill='%23E64A19'><animateTransform attributeName='transform' type='translate' from='0 50' to='0 -250' dur='2.5s' repeatCount='indefinite'/><animate attributeName='opacity' values='1;0;1' dur='1s' repeatCount='indefinite'/></circle></g></svg>") !important;
    background-size: 150px 150px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: inherit !important;
}

/* 聊天框底部附加元素 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #E64A19 !important;
    background: rgba(255, 138, 101, 0.15) !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    transition: all 0.2s !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: #FF8A65 !important;
    color: #FFF !important;
    transform: translateX(2px) !important;
}
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 { color: #F57C00 !important; font-weight: 800 !important; }
.text-orange-500 { color: #D84315 !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: 60px !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: 50px !important;
    height: 50px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><ellipse cx='25' cy='42' rx='12' ry='3' fill='rgba(230,74,25,0.2)'><animate attributeName='rx' values='12;6;12' dur='0.6s' repeatCount='indefinite'/><animate attributeName='opacity' values='1;0.3;1' dur='0.6s' repeatCount='indefinite'/></ellipse><g><animateTransform attributeName='transform' type='translate' values='0 -25; 0 0; 0 -25' dur='0.6s' repeatCount='indefinite' calcMode='spline' keyTimes='0;0.5;1' keySplines='0.5 0 1 1; 0 0 0.5 1'/><circle cx='25' cy='28' r='11' fill='%23FF5722'/><path d='M18 20 Q25 33 32 20 M16 28 A11 11 0 0 0 25 17 M34 28 A11 11 0 0 1 25 17' stroke='%233E2723' stroke-width='1.2' fill='none'/></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(90deg, #FFCCBC 0%, #FFE0B2 50%, #FFAB91 100%) !important;
    border-bottom: 4px solid #FF5722 !important;
    box-shadow: 0 4px 10px rgba(230, 74, 25, 0.2) !important;
    position: sticky !important;
}
#ai-model-selector .group.flex.items-center {
    background: #FFF !important;
    border-radius: 8px !important;
    border: 2px solid #FF5722 !important;
    transform: skewX(-5deg) !important; /* 运动风倾斜 */
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #D84315 !important;
    font-weight: 900 !important;
    transform: skewX(5deg) !important;
}
.sticky.w-full.top-0 svg { color: #D84315 !important; }

/* 开场白选择器 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: #FFF8F0 !important;
    border: 2px solid #FF8A65 !important;
    border-radius: 8px !important;
}

/* 按钮栏 */
#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(135deg, #FFB300, #FF5722) !important;
    border-radius: 8px !important;
    color: #FFF !important;
    font-weight: bold !important;
    box-shadow: 2px 2px 0px #E64A19 !important;
    transition: all 0.15s !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 0px 0px 0px #E64A19 !important;
}
#ai-mod-button2 button.MuiButton-root svg { color: #FFF !important; }

/* 底部输入框 */
#ai-chat-bottom-input {
    background: #FFF !important;
    border: 3px solid #FF8A65 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgba(255, 87, 34, 0.15) !important;
}
#ai-chat-input { color: #3E2723 !important; font-weight: 500 !important; }
#ai-chat-input::placeholder { color: #FFAB91 !important; }
#ai-chat-input::selection { background: #FF5722 !important; color: #FFF !important; }

/* 分页栏 */
.MuiPaginationItem-root {
    color: #E64A19 !important;
    background: #FFF8F0 !important;
    border: 2px solid #FFCCBC !important;
    border-radius: 6px !important;
}
.MuiPaginationItem-root.Mui-selected {
    background: #FF5722 !important;
    color: #FFF !important;
    border-color: #E64A19 !important;
    font-weight: 900 !important;
}

/* 评论区 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(180deg, #FFF8F0 0%, #FFEBE2 100%) !important;
    border-top: 4px solid #FF5722 !important;
}
div.text-lg.font-bold {
    color: #D84315 !important;
    font-style: italic !important; /* 运动风斜体 */
}
div.text-lg.font-bold::before { content: '🔥 '; font-style: normal !important; }

p.MuiTypography-body1.text-grey-600 { color: #5D4037 !important; font-weight: bold !important; }
span.MuiRating-iconEmpty svg { color: #FFCCBC !important; }
span.MuiRating-iconFilled svg { color: #FF5722 !important; filter: drop-shadow(0 2px 2px rgba(230,74,25,0.4)) !important; }
span.text-orange-500 { color: #E64A19 !important; font-weight: 900 !important; }

div.flex.flex-col.border-gray-200 {
    background: #FFF !important;
    border: 2px solid #FF8A65 !important;
    border-radius: 8px !important;
}
textarea.rc-textarea { color: #3E2723 !important; }
div.bg-gray-100.text-gray-500 { background: #FFE0B2 !important; color: #D84315 !important; font-weight: bold !important;}

/* 发送按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background: #FF5722 !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0px #D84315 !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 0px 0px 0px #D84315 !important;
}

div.group img.rounded-full {
    border: 3px solid #FF5722 !important;
    padding: 2px !important;
    background: #FFF !important;
}
div.text-sm.text-grey-600 span.font-bold { color: #D84315 !important; }
span.text-\[10px\] { background: #FFB300 !important; color: #3E2723 !important; font-weight: bold !important; border-radius: 4px !important; }
div.break-all { color: #3E2723 !important; font-weight: 500 !important; }

/* ============================================
   3️⃣ 代码块美化 (高对比度运动风)
   ============================================ */
.markdown-body pre {
    background: #FFF8F0 !important;
    border: 2px solid #FF5722 !important;
    border-left: 8px solid #FF5722 !important; /* 左侧粗边框强调 */
    border-radius: 8px !important;
    box-shadow: 4px 4px 0px rgba(255, 87, 34, 0.2) !important;
    overflow: hidden !important;
}

.markdown-body pre > div > div.flex.justify-between.h-8 {
    background: #FFCCBC !important;
    border-bottom: 2px solid #FF5722 !important;
}
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\] {
    color: #D84315 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.markdown-body pre > div > div[node] {
    background: #FFFDF9 !important;
    color: #3E2723 !important;
    padding: 12px !important;
    font-family: 'JetBrains Mono', 'Consolas', monospace !important;
    font-weight: 600 !important;
}

/* 复制按钮颜色联动 */
.markdown-body pre svg.lucide-copy,
.markdown-body pre div[data-tooltip-id^="copy-tooltip"] > svg {
    color: #E64A19 !important;
}
.markdown-body pre .group:hover svg.lucide-copy {
    color: #BF360C !important;
}

/* ============================================
   4️⃣ 输出格式（HTML/details卡片）美化
   ============================================ */
.markdown-body details {
    background: linear-gradient(135deg, #FFFDF9 0%, #FFF0E6 100%) !important;
    border: 2px solid #FF8A65 !important;
    border-left: 6px solid #FF5722 !important; /* 运动风硬朗左边框 */
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 14px 0 !important;
    box-shadow: 3px 3px 0px rgba(255, 87, 34, 0.15) !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}
.markdown-body details:hover {
    border-color: #FF5722 !important;
    box-shadow: 5px 5px 0px rgba(255, 87, 34, 0.25) !important;
}

.markdown-body details summary {
    cursor: pointer !important;
    font-weight: 900 !important;
    color: #D84315 !important;
    font-size: 16px !important;
    padding: 4px 0 !important;
    list-style: none !important;
    user-select: none !important;
    display: flex !important;
    align-items: center !important;
}
.markdown-body details summary::-webkit-details-marker { display: none !important; }
.markdown-body details summary::before {
    content: '🔥 ' !important;
    margin-right: 6px !important;
    transition: transform 0.3s !important;
}
.markdown-body details[open] > summary::before {
    transform: rotate(15deg) scale(1.1) !important;
}

/* 嵌套details (如角色卡片) */
.markdown-body details details {
    background: #FFF8F0 !important;
    border: 2px dashed #FFAB91 !important;
    border-left: 4px solid #FFB300 !important;
    box-shadow: none !important;
    margin: 10px 0 !important;
}
.markdown-body details details summary { color: #E64A19 !important; }

.markdown-body details > div {
    padding: 12px 4px 4px 4px !important;
    color: #4E342E !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

/* 状态栏内的强调用词 */
.markdown-body details strong {
    color: #FFF !important;
    background: #FF5722 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-style: italic !important;
}

.markdown-body details hr {
    border: none !important;
    border-top: 2px dashed #FFAB91 !important;
    margin: 12px 0 !important;
}

/* 🔍 状态图Hover放大镜效果 */
.markdown-body details img {
    border-radius: 8px !important;
    border: 3px solid #FF8A65 !important;
    box-shadow: 4px 4px 0px rgba(255, 87, 34, 0.2) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: zoom-in !important;
}
.markdown-body details img:hover {
    transform: scale(1.05) translateY(-2px) !important;
    border-color: #FF5722 !important;
}

/* 记忆区排版增强 */
.markdown-body details:last-of-type > div {
    background: repeating-linear-gradient(
        transparent,
        transparent 30px,
        rgba(255, 138, 101, 0.15) 30px,
        rgba(255, 138, 101, 0.15) 32px
    ) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #FFCCBC !important;
}

/* ============================================
   📱 移动端适配
   ============================================ */
@media (max-width: 480px) {
    .markdown-body details { padding: 10px !important; }
    .markdown-body details summary { font-size: 15px !important; }
    .flex.items-center.justify-center.w-6.h-5 { min-width: 50px !important; min-height: 40px !important; }
    .flex.items-center.justify-center.w-6.h-5::before { width: 40px !important; height: 40px !important; }
}