/* ============================================
   🍺 西幻酒馆 · 中世纪橡木主题 v1.1
   新增：Details 平滑展开动画 + 铜扣旋转
   ============================================ */

/* ========== 0. 基础变量与文字 ========== */
.markdown-body {
    --ale: #c4944a;
    --copper: #b87333;
    --wood: #5c3d2e;
    --parchment: #f4e4c1;
    --candle: #fdf4d1;
    --ink: #3b2a1a;
    color: #3b2a1a !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    font-family: 'Georgia', 'Microsoft YaHei', 'SimSun', serif !important;
}
.markdown-body strong { 
    color: #8b4513 !important; 
    font-weight: bold !important; 
}

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

.bg-gray-100\/90.relative.inline-block {
    background: #fdf4d1 !important;
    border: 2px solid #5c3d2e !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(60, 30, 10, 0.35), 
                inset 0 0 30px rgba(244, 228, 193, 0.4) !important;
    position: relative !important;
    isolation: isolate !important;
    transition: all 0.3s ease !important;
    font-family: 'Georgia', 'Microsoft YaHei', 'SimSun', serif !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.3'><circle cx='30' cy='30' r='4' fill='%23c4944a'><animate attributeName='opacity' values='0.2;0.5;0.2' dur='3s' repeatCount='indefinite'/></circle><circle cx='80' cy='60' r='3' fill='%23b87333'><animate attributeName='opacity' values='0.3;0.6;0.3' dur='4s' repeatCount='indefinite'/></circle><circle cx='150' cy='40' r='4' fill='%23c4944a'><animate attributeName='opacity' values='0.2;0.5;0.2' dur='3.5s' repeatCount='indefinite'/></circle><circle cx='120' cy='100' r='3' fill='%23b87333'><animate attributeName='opacity' values='0.3;0.6;0.3' dur='4.5s' repeatCount='indefinite'/></circle></g></svg>") !important;
    background-size: 200px 200px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 8px !important;
    opacity: 0.7 !important;
}

/* 聊天框底部按钮 - 铜质 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #fdf4d1 !important;
    background: #8b6b4f !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
    transition: all 0.3s !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: #5c3d2e !important;
    transform: translateY(-1px) !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #c4944a !important;
    font-weight: 600 !important;
}
.text-orange-500 {
    color: #b87333 !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'><rect x='30' y='30' width='8' height='15' rx='2' fill='%235c3d2e'/><rect x='32' y='10' width='4' height='20' rx='1' fill='%23fdf4d1'/><ellipse cx='34' cy='8' rx='5' ry='8' fill='%23c4944a' opacity='0.8'><animate attributeName='rx' values='5;6;5' dur='0.6s' repeatCount='indefinite'/><animate attributeName='ry' values='8;7;8' dur='0.4s' repeatCount='indefinite'/></ellipse><ellipse cx='34' cy='6' rx='3' ry='5' fill='%23fdf4d1' opacity='0.9'><animate attributeName='opacity' values='0.7;1;0.7' dur='0.5s' repeatCount='indefinite'/></ellipse><text x='44' y='42' font-size='10' fill='%238b6b4f' font-weight='bold'>酒馆招待中...</text></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ============================================
   2️⃣ 代码块美化 - 羊皮卷轴
   ============================================ */
.markdown-body pre {
    background: #faf3dc !important;
    border: 2px solid #8b6b4f !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(60, 30, 10, 0.25) !important;
    overflow: hidden !important;
}

.markdown-body pre > div > div.flex.justify-between.h-8 {
    background: #5c3d2e !important;
    border-bottom: 2px solid #3a1a0a !important;
}
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\] {
    color: #fdf4d1 !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: #f4e4c1 !important;
    color: #3b2a1a !important;
    padding: 12px !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
}

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

.markdown-body pre > code[node] {
    background: #f4e4c1 !important;
    color: #3b2a1a !important;
    border: 2px solid #8b6b4f !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    display: block !important;
}

/* ============================================
   3️⃣ Details 卡片美化 - 酒馆布告板（增强动画版）
   ============================================ */

/* --- 3.1 主容器 --- */
.markdown-body details {
    background: #f4e4c1 !important;
    border: 2px solid #5c3d2e !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 12px 0 !important;
    box-shadow: 0 4px 0 #5c3d2e, 0 6px 14px rgba(60, 30, 10, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease !important;
}

.markdown-body details:hover {
    box-shadow: 0 4px 0 #5c3d2e, 0 8px 20px rgba(60, 30, 10, 0.4) !important;
}

/* 顶部铜质铆钉装饰条 */
.markdown-body details::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #b87333, #c4944a, #b87333) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* --- 3.2 标题栏 --- */
.markdown-body details summary {
    cursor: pointer !important;
    font-weight: 700 !important;
    color: #fdf4d1 !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    list-style: none !important;
    user-select: none !important;
    background: linear-gradient(180deg, #5c3d2e 0%, #4a2512 100%) !important;
    border-bottom: 2px solid #3a1a0a !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
}

.markdown-body details summary:hover {
    background: linear-gradient(180deg, #6b4f32 0%, #5c3d2e 100%) !important;
}

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

/* --- 3.3 铜扣图标（左侧） --- */
.markdown-body details summary::before {
    content: '🍺' !important;
    display: inline-block !important;
    margin-right: 8px !important;
    font-size: 16px !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 打开时铜扣弹跳旋转 */
.markdown-body details[open] > summary::before {
    content: '🍻' !important;
    transform: rotate(15deg) scale(1.2) !important;
}

/* --- 3.4 铜钉箭头（右侧） --- */
.markdown-body details summary::after {
    content: '▼' !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #c4944a !important;
    font-size: 10px !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    text-shadow: 0 0 4px rgba(196, 148, 74, 0.4) !important;
}

/* 打开时箭头旋转 */
.markdown-body details[open] > summary::after {
    transform: translateY(-50%) rotate(180deg) !important;
    color: #fdf4d1 !important;
    text-shadow: 0 0 8px rgba(253, 244, 209, 0.6) !important;
}

/* --- 3.5 内容区 - 核心展开动画 --- */
.markdown-body details > div {
    padding: 0 16px !important;
    color: #3b2a1a !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    background: linear-gradient(180deg, #f4e4c1 0%, #fdf4d1 100%) !important;
    
    /* 展开动画关键属性 */
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: 
        max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease 0.15s !important;
}

/* 打开状态 - 内容滑入 */
.markdown-body details[open] > div {
    max-height: 3000px !important;
    padding: 14px 16px !important;
    opacity: 1 !important;
    transition: 
        max-height 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.5s ease 0.1s !important;
}

/* --- 3.6 内容区内部元素动画 --- */
.markdown-body details > div > * {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: 
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 打开后子元素依次出现 */
.markdown-body details[open] > div > * {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 子元素错峰动画 */
.markdown-body details[open] > div > *:nth-child(1) { transition-delay: 0.1s !important; }
.markdown-body details[open] > div > *:nth-child(2) { transition-delay: 0.15s !important; }
.markdown-body details[open] > div > *:nth-child(3) { transition-delay: 0.2s !important; }
.markdown-body details[open] > div > *:nth-child(4) { transition-delay: 0.25s !important; }
.markdown-body details[open] > div > *:nth-child(5) { transition-delay: 0.3s !important; }
.markdown-body details[open] > div > *:nth-child(6) { transition-delay: 0.35s !important; }
.markdown-body details[open] > div > *:nth-child(7) { transition-delay: 0.4s !important; }
.markdown-body details[open] > div > *:nth-child(8) { transition-delay: 0.45s !important; }
.markdown-body details[open] > div > *:nth-child(9) { transition-delay: 0.5s !important; }
.markdown-body details[open] > div > *:nth-child(10) { transition-delay: 0.55s !important; }

/* --- 3.7 内联文本元素 --- */
.markdown-body details strong {
    color: #8b4513 !important;
    background: #e8d5a3 !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
}

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

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

/* --- 3.8 内部div块 --- */
.markdown-body details > div > div {
    margin-bottom: 4px !important;
    padding: 6px 10px !important;
    border-left: 3px solid #b87333 !important;
    background: rgba(253, 244, 209, 0.6) !important;
    border-radius: 0 4px 4px 0 !important;
    line-height: 1.6 !important;
}

/* 首个信息块高亮 */
.markdown-body details > div > div:first-child {
    background: rgba(244, 228, 193, 0.8) !important;
    border-left: 3px solid #8b4513 !important;
}

/* --- 3.9 嵌套details --- */
.markdown-body details details {
    background: #faf3dc !important;
    border: 2px solid #8b6b4f !important;
    box-shadow: 0 2px 0 #5c3d2e, 0 4px 10px rgba(60, 30, 10, 0.2) !important;
    margin: 8px 0 !important;
}

.markdown-body details details summary {
    background: linear-gradient(180deg, #8b6b4f 0%, #5c3d2e 100%) !important;
    color: #fdf4d1 !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
}

.markdown-body details details > div {
    background: #fdf4d1 !important;
}

/* 嵌套details也享有展开动画 */
.markdown-body details details > div {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: 
        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease 0.1s !important;
}

.markdown-body details details[open] > div {
    max-height: 2000px !important;
    padding: 10px 14px !important;
    opacity: 1 !important;
}

/* --- 3.10 图片样式 --- */
.markdown-body details img {
    border-radius: 4px !important;
    border: 3px solid #5c3d2e !important;
    box-shadow: 0 4px 16px rgba(60, 30, 10, 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) !important;
    box-shadow: 0 8px 28px rgba(60, 30, 10, 0.55), 
                0 0 0 4px rgba(244, 228, 193, 0.6) !important;
    border-color: #c4944a !important;
}

/* ============================================
   4️⃣ 顶部栏 / 按钮栏美化
   ============================================ */
.flex.items-center.gap-2.pb-2 > button,
.flex.items-center.gap-2.pb-2 > a {
    background: #8b6b4f !important;
    color: #fdf4d1 !important;
    border: 2px solid #5c3d2e !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    text-transform: none !important;
    padding: 6px 12px !important;
    margin: 2px !important;
    font-size: 14px !important;
    min-height: 36px !important;
    transition: all 0.3s !important;
}
.flex.items-center.gap-2.pb-2 > button:hover,
.flex.items-center.gap-2.pb-2 > a:hover {
    background: #5c3d2e !important;
    color: #fdf4d1 !important;
    transform: translateY(-1px) !important;
}

#ai-chat-bottom-input {
    background: #fdf4d1 !important;
    border: 2px solid #5c3d2e !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(60, 30, 10, 0.25) !important;
}
#ai-chat-input {
    color: #3b2a1a !important;
    font-family: 'Georgia', 'Microsoft YaHei', serif !important;
}
#ai-chat-input::placeholder { color: #8b6b4f !important; }
#ai-chat-input::selection { background: #e8d5a3 !important; color: #5c3d2e !important; }

.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
    background: #5c3d2e !important;
    border-radius: 4px !important;
    padding: 10px !important;
    margin: 8px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
.MuiStack-root.text-purple-500.mt-1.css-1kz283j p {
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    min-width: fit-content !important;
    line-height: 1.4 !important;
    background: #fdf4d1 !important;
    color: #3b2a1a !important;
}
.MuiStack-root.text-purple-500.mt-1.css-1kz283j p:hover {
    background: #e8d5a3 !important;
    transition: all 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text {
    background: #8b6b4f !important;
    color: #fdf4d1 !important;
    border: 1.5px solid #5c3d2e !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    padding: 4px 10px !important;
    margin: 0 4px !important;
    font-size: 13px !important;
    min-width: 56px !important;
    min-height: 32px !important;
    transition: all 0.3s !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text:hover {
    background: #5c3d2e !important;
    transform: translateY(-1px) !important;
}

/* ============================================
   📱 移动端 & 减弱动效
   ============================================ */
@media (max-width: 480px) {
    .markdown-body details { padding: 0 !important; margin: 8px 0 !important; }
    .markdown-body details summary { font-size: 14px !important; padding: 10px 12px !important; }
    .markdown-body details > div { font-size: 13px !important; }
    .markdown-body details[open] > div { padding: 10px 12px !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 (max-width: 360px) {
    .flex.items-center.gap-2.pb-2 > button,
    .flex.items-center.gap-2.pb-2 > a {
        font-size: 12px !important;
        padding: 5px 10px !important;
        min-height: 32px !important;
    }
    .MuiButtonBase-root.MuiButton-root.MuiButton-text {
        font-size: 12px !important;
        padding: 3px 8px !important;
        min-width: 50px !important;
        min-height: 28px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .markdown-body details summary:hover { transform: none !important; }
    .markdown-body details img:hover { transform: scale(1.04) !important; }
    
    /* 减弱动画 - 直接显示 */
    .markdown-body details > div,
    .markdown-body details details > div {
        transition: none !important;
    }
    .markdown-body details[open] > div,
    .markdown-body details details[open] > div {
        transition: none !important;
    }
    .markdown-body details[open] > div > * {
        transition: none !important;
        transition-delay: 0s !important;
    }
}