/* --- 基础清理：移除顶部颜色条 --- */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 统一聊天框美化：黑金和风样式 --- */
.bg-gray-100\/90.relative.inline-block {
    background-color: #121212 !important;
    /* 金色青海波纹样背景 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 40c0-2.209 1.791-4 4-4s4 1.791 4 4m8 0c0-2.209 1.791-4 4-4s4 1.791 4 4m8 0c0-2.209 1.791-4 4-4s4 1.791 4 4m8 0c0-2.209 1.791-4 4-4s4 1.791 4 4m-40-8c0-2.209 1.791-4 4-4s4 1.791 4 4m8 0c0-2.209 1.791-4 4-4s4 1.791 4 4m8 0c0-2.209 1.791-4 4-4s4 1.791 4 4m8 0c0-2.209 1.791-4 4-4s4 1.791 4 4m-32-8c0-2.209 1.791-4 4-4s4 1.791 4 4m8 0c0-2.209 1.791-4 4-4s4 1.791 4 4m8 0c0-2.209 1.791-4 4-4s4 1.791 4 4m-24-8c0-2.209 1.791-4 4-4s4 1.791 4 4m8 0c0-2.209 1.791-4 4-4s4 1.791 4 4m-16-8c0-2.209 1.791-4 4-4s4 1.791 4 4' fill='%23d4af37' fill-opacity='0.05'/%3E%3C/svg%3E") !important;
    border: 1.5px solid #b8860b !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(184, 134, 11, 0.1) !important;
    isolation: isolate !important;
}

/* --- 文本可读性：高对比度浅金/白色 --- */
.markdown-body {
    color: #f5f5f5 !important;
    font-family: "Noto Serif SC", "Source Han Serif CN", serif !important;
    line-height: 1.7 !important;
    text-rendering: optimizeLegibility !important;
}

/* 强调文本颜色 */
.markdown-body strong {
    color: #ffca28 !important;
    font-weight: bold !important;
}

/* --- 底部元素：金色统一 --- */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #d4af37 !important;
    opacity: 0.8 !important;
    font-weight: bold !important;
}

/* --- 加载动画：旋转日轮刀 --- */

/* 1. 隐藏默认加载圆点 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 2. 在容器中插入SVG日轮刀 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    width: 32px !important;
    height: 32px !important;
    /* 使用SMIL内联SVG，确保动画在CSS禁用时依然有效 */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(25,25)'%3E%3Cpath d='M-1.5 -18 L1.5 -18 L1 10 L-1 10 Z' fill='%23e0e0e0' stroke='%23333' stroke-width='0.5'/%3E%3Cpath d='M-2 10 L2 10 L2 12 L-2 12 Z' fill='%23d4af37'/%3E%3Crect x='-1.2' y='12' width='2.4' height='7' fill='%23800' /%3E%3Ccircle cx='0' cy='10.5' r='2.5' fill='none' stroke='%23d4af37' stroke-width='1'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='360' dur='1.2s' repeatCount='indefinite' /%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* --- 移动端适配 --- */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        max-width: 95% !important;
    }
    .flex.items-center.justify-center.w-6.h-5 {
        width: 30px !important;
        height: 30px !important;
    }
}

/* --- 曜变漆金·底部栏主容器 --- */
.bg-gradient-to-t {
    background: linear-gradient(to top, #0a0a0a 0%, #1a1a1a 100%) !important;
    border-top: 2px solid #d4af37 !important;
}

/* --- 输入框容器：漆器描金效果 --- */
#ai-chat-bottom-input {
    background: #0f0f0f !important;
    border: 1.5px solid #b8860b !important;
    border-radius: 8px !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15), inset 0 0 5px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

/* 装饰性细节：模拟和风云纹边角 */
#ai-chat-bottom-input::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #d4af37 0%, transparent 50%);
    opacity: 0.3;
    pointer-events: none;
}

/* ============================================
   鬼灭之刃 · 大正和风 — 底部输入框精致美化 v3
   磨砂透明 + 透出背景
   ============================================ */

/* --- 底部整体容器 — 磨砂玻璃 --- */
#ai-chat-bottom-input {
    background: rgba(15, 12, 25, 0.55) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(196, 163, 90, 0.3) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 10px 14px !important;
}

/* --- 主输入框 — 半透磨砂 --- */
#ai-chat-input {
    background: rgba(20, 16, 30, 0.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    color: #e0d0b0 !important;
    font-family: "Georgia", "Noto Serif SC", "SimSun", serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.04em !important;
    line-height: 1.7 !important;
    caret-color: #c4a35a !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(180, 140, 60, 0.35) !important;
    border-radius: 4px !important;
    outline: none !important;
    transition: all 0.4s ease !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

#ai-chat-input::placeholder {
    color: rgba(180, 150, 120, 0.6) !important;
    font-style: italic;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}

#ai-chat-input::selection {
    background: rgba(139, 26, 26, 0.4) !important;
    color: #f5efe0 !important;
}

/* 聚焦 — 水之呼吸光晕 */
#ai-chat-input:focus {
    border-color: rgba(122, 154, 170, 0.6) !important;
    background: rgba(22, 18, 35, 0.55) !important;
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(122, 154, 170, 0.25),
        0 0 24px rgba(122, 154, 170, 0.1) !important;
}

/* --- 发送按钮 — 半透锻铁 --- */
#ai-mod-button2 button.MuiButton-root,
button[class*="send"],
button[class*="submit"] {
    background: rgba(100, 20, 20, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    color: #d4c5b2 !important;
    font-family: "Georgia", "Noto Serif SC", serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    font-size: 0.8rem !important;
    border: 1px solid rgba(196, 163, 90, 0.5) !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    min-width: auto !important;
    min-height: auto !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 0 3px rgba(196, 163, 90, 0.3) !important;
}

#ai-mod-button2 button.MuiButton-root svg,
button[class*="send"] svg {
    color: #c4a35a !important;
    width: 16px !important;
    height: 16px !important;
}

/* 悬停 */
#ai-mod-button2 button.MuiButton-root:hover,
button[class*="send"]:hover,
button[class*="submit"]:hover {
    background: rgba(140, 30, 30, 0.7) !important;
    border-color: rgba(224, 192, 96, 0.7) !important;
    color: #e8d8c0 !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        0 4px 14px rgba(0, 0, 0, 0.5),
        0 0 14px rgba(193, 58, 43, 0.35) !important;
}

/* 点击 */
#ai-mod-button2 button.MuiButton-root:active,
button[class*="send"]:active,
button[class*="submit"]:active {
    background: rgba(80, 10, 10, 0.8) !important;
    border-color: rgba(240, 208, 96, 0.9) !important;
    color: #f0e0c0 !important;
    transform: scale(0.96) !important;
    box-shadow: 0 0 20px rgba(240, 208, 96, 0.4) !important;
    transition: all 0.06s ease !important;
}

#ai-mod-button2 button.MuiButton-root::after {
    content: "◈" !important;
    font-size: 7px !important;
    margin-left: 5px !important;
    color: #c4a35a !important;
    opacity: 0.7 !important;
}

/* --- 其他小按钮 --- */
button[class*="upload"],
button[class*="attach"],
button[class*="file"] {
    background: rgba(20, 16, 28, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(180, 140, 60, 0.25) !important;
    color: #b0a080 !important;
    border-radius: 3px !important;
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
    transition: all 0.3s ease !important;
}
button[class*="upload"]:hover,
button[class*="attach"]:hover,
button[class*="file"]:hover {
    background: rgba(30, 22, 40, 0.6) !important;
    border-color: rgba(196, 163, 90, 0.5) !important;
    color: #d4c5b2 !important;
}

/* --- 消息区也半透 --- */
#ai-chat-message-container,
[class*="message-list"],
[class*="chat-history"] {
    background: rgba(8, 6, 16, 0.3) !important;
}

/* --- 移动端 --- */
@media (max-width: 768px) {
    #ai-chat-input {
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
    }
    #ai-mod-button2 button.MuiButton-root,
    button[class*="send"] {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================
   鬼灭之刃 · 大正命运卷轴 — 和风美化 v6
   进度条直接用div + class，稳定可靠
   ============================================ */

/* ========== 隐藏 think ========== */
think { display: none !important; }

/* ========== 全局 ========== */
body, html {
    font-family: "黑体", "Microsoft YaHei", "SimHei", "Noto Sans SC", sans-serif;
    background: #060a10;
    color: #c8dbe8;
}

/* ========== 正文 <text> ========== */
text {
    display: block;
    max-width: 780px;
    margin: 0 auto 28px;
    color: #d4c5b2;
    background: linear-gradient(160deg, #0c1219, #101820);
    padding: 28px 30px;
    border: 1px solid #1a2738;
    border-radius: 2px;
    line-height: 2;
    font-size: 1rem;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.02);
    position: relative;
}
text::before, text::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    pointer-events: none;
}
text::before { top:0; left:0; border-top:1px solid rgba(196,163,90,0.6); border-left:1px solid rgba(196,163,90,0.6); }
text::after  { bottom:0; right:0; border-bottom:1px solid rgba(196,163,90,0.6); border-right:1px solid rgba(196,163,90,0.6); }

/* ========== details 卡片 ========== */
details {
    max-width: 780px;
    margin: 0 auto 14px;
    background: linear-gradient(160deg, #0c1219, #101820);
    border: 1px solid #1a2738;
    border-radius: 2px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.02);
    position: relative;
    overflow: visible;
}
details::before {
    content: '';
    position: absolute;
    top: 14px; right: 14px;
    width: 7px; height: 7px;
    background: #c13a2b;
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 0 4px #8b1a1a, 0 0 8px rgba(193,58,43,0.5);
    animation: card-indicator 2s ease-in-out infinite;
}
@keyframes card-indicator {
    0%,100%{opacity:1;box-shadow:0 0 4px #8b1a1a,0 0 8px rgba(193,58,43,0.5)}
    50%{opacity:0.3;box-shadow:0 0 2px #8b1a1a,0 0 4px rgba(193,58,43,0.2)}
}
details[open] {
    border-color: #c4a35a;
    box-shadow: 0 0 20px rgba(196,163,90,0.15), 0 6px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ========== summary 标题 ========== */
summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 15px 45px 15px 22px;
    font-weight: 600;
    font-size: 0.92rem;
    background: rgba(8,14,22,0.9);
    border-bottom: 1px solid #1a2838;
    letter-spacing: 1.5px;
    color: #b0a080;
    position: relative;
    overflow: hidden;
}
summary::-webkit-details-marker { display: none; }
summary::before {
    content: '▸';
    margin-right: 14px;
    font-size: 0.9rem;
    color: #c4a35a;
    text-shadow: 0 0 8px rgba(196,163,90,0.6);
    transition: transform 0.25s;
}
details[open] > summary::before { transform: rotate(90deg); }
summary::after {
    content: '';
    position: absolute;
    bottom: 0; left: -100%;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, #c4a35a, transparent);
    animation: summary-flow 3s linear infinite;
}
@keyframes summary-flow { 0%{left:-100%} 100%{left:100%} }
summary:hover { background: rgba(15,24,36,0.95); color: #c4a35a; }
details[open] > summary {
    border-bottom-color: #c4a35a;
    background: rgba(12,22,35,0.95);
    color: #d4c5b2;
}

/* ========== 段落 ========== */
details p {
    padding: 4px 24px;
    margin: 6px 0;
    font-size: 0.88rem;
    color: #d4c5b2;
    line-height: 1.8;
    letter-spacing: 0.3px;
    background: rgba(196,163,90,0.04);
    border-left: 2px solid rgba(196,163,90,0.2);
    border-radius: 0 2px 2px 0;
}
details p:has(b) {
    background: transparent;
    border-left: none;
}

/* ========== 呼吸法招式 li ========== */
details li {
    font-size: 0.78rem;
    color: #b0a090;
    padding: 2px 8px 2px 28px;
    margin: 1px 24px;
    line-height: 1.5;
    list-style: none;
    position: relative;
    border-bottom: 1px solid rgba(26,40,56,0.3);
}
details li::before {
    content: '▹';
    position: absolute;
    left: 12px;
    color: #c4a35a;
    font-size: 0.65rem;
}
details li:hover { background: rgba(20,30,45,0.5); color: #d4c5b2; }

/* ========== 分割线 ========== */
details hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3a2a1a, transparent);
    margin: 14px 24px;
}

/* ============================================
   进度条 — 通用
   ============================================ */
.progress-bar {
    width: calc(100% - 48px);
    height: 6px;
    margin: 4px 24px 10px;
    background: rgba(0,0,0,0.6);
    border: 1px solid #3a2a1a;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    position: relative;
}
/* 光泽 */
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: progress-shine 2s infinite;
}
@keyframes progress-shine {
    0%{left:-100%} 100%{left:100%}
}

/* 呼吸强度进度条 — 绿到红 */
.breath-bar .progress-fill {
    background: linear-gradient(90deg, #5a9a5a 0%, #8ac040 30%, #c4a040 55%, #c13a2b 80%, #8b1a1a 100%);
    box-shadow: 0 0 8px rgba(196,160,64,0.4);
}

/* 宿命值进度条 — 粉红 */
.fate-bar .progress-fill {
    background: linear-gradient(90deg, #e8b0b8, #c13a2b, #8b1a1a);
    box-shadow: 0 0 6px rgba(200,100,120,0.4);
}

/* 众生百态进度条 — 绿色 */
.others-bar .progress-fill {
    background: linear-gradient(90deg, #6a9a6a, #8ac040, #c4a040);
    box-shadow: 0 0 6px rgba(100,160,100,0.4);
}

/* ========== 行动中心列表 ========== */
details ul {
    list-style: none;
    padding: 0 24px;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
details ul li {
    padding: 12px 16px;
    background: rgba(10,18,28,0.8);
    border: 1px solid #1a2a3d;
    border-radius: 2px;
    font-size: 0.9rem;
    color: #b0c8de;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
details ul li::before { display: none; }
details ul li:first-child  { border-left: 3px solid #c13a2b; }
details ul li:nth-child(2) { border-left: 3px solid #e8b0b8; }
details ul li:nth-child(3) { border-left: 3px solid #4a7a9a; }
details ul li:hover {
    background: rgba(15,28,45,0.95);
    border-color: #c4a35a;
    box-shadow: 0 0 18px rgba(196,163,90,0.2);
    transform: translateX(4px);
    color: #d4c5b2;
}

/* ========== 面板配色 ========== */
details:has(summary:contains("🏮")) > summary { color: #c4a35a; animation: blood-pulse 3s infinite; }
details:has(summary:contains("👤")) > summary { color: #7a9aaa; }
details:has(summary:contains("👤")) > summary::before { color: #7a9aaa; text-shadow: 0 0 8px rgba(122,154,170,0.6); }
details:has(summary:contains("🌸")) > summary { color: #e8b0b8; }
details:has(summary:contains("🌸")) > summary::before { color: #e8b0b8; text-shadow: 0 0 8px rgba(232,176,184,0.6); }
details:has(summary:contains("🌸"))[open] { border-color: #e8b0b8; }
details:has(summary:contains("🌸"))[open] > summary { border-bottom-color: #e8b0b8; }
details:has(summary:contains("👥")) > summary { color: #8aaa8a; }
details:has(summary:contains("👥")) > summary::before { color: #8aaa8a; }
details:has(summary:contains("💀")) > summary { color: #c87070; }
details:has(summary:contains("💀")) > summary::before { color: #c87070; text-shadow: 0 0 8px rgba(200,112,112,0.6); }
details:has(summary:contains("💀"))[open] { border-color: #8b1a1a; }
details:has(summary:contains("📖")) > summary { color: #b0a0c0; }
details:has(summary:contains("📖")) > summary::before { color: #b0a0c0; }
details:has(summary:contains("🧭")) > summary { color: #d4c060; }
details:has(summary:contains("🧭")) > summary::before { color: #d4c060; text-shadow: 0 0 8px rgba(212,192,96,0.7); }
details:has(summary:contains("🧭"))[open] > summary { border-bottom-color: #c4a35a; color: #c4a35a; }

details:has(summary:contains("🌸")) details summary {
    color: #d4a8b8;
    font-size: 0.83rem;
    padding: 10px 40px 10px 16px;
}
details:has(summary:contains("🌸")) details summary::before {
    color: #d4a8b8;
    text-shadow: 0 0 6px rgba(212,168,184,0.5);
}

@keyframes blood-pulse {
    0%{text-shadow:0 0 5px rgba(196,163,90,0.5)}
    50%{text-shadow:0 0 18px rgba(196,163,90,0.8),0 0 30px rgba(193,58,43,0.4)}
    100%{text-shadow:0 0 5px rgba(196,163,90,0.5)}
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:rgba(6,10,16,0.8)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3a1a10,#1a0a06,#3a1a10);border-radius:3px;border:1px solid rgba(196,163,90,0.2)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a2a18,#2a0e08,#5a2a18)}

::selection{background:rgba(193,58,43,0.3);color:#e0d0b0}

@media(max-width:768px){
    text{padding:18px 16px;font-size:0.94rem}
    summary{padding:12px 40px 12px 16px;font-size:0.85rem}
    details p{padding:4px 16px;font-size:0.84rem;margin:4px 16px}
    details li{font-size:0.75rem;margin:1px 16px}
    details ul{padding:0 16px}
    details ul li{padding:10px 14px;font-size:0.85rem}
    .progress-bar{margin:4px 16px 10px;width:calc(100% - 32px)}
}