/* ================================================================= */
/* 🔮 魅惑深渊主题 V12.0：动态排版艺术版 (Succubus Abyss: Kinetic Typography) */
/*    集大成之作：全透玻璃 + 杂志级排版 + 完整动态交互引擎 */
/* ================================================================= */

/* --- 核心变量 --- */
:root {
    --succubus-primary: #ff2d75;   /* 魅惑霓虹红 */
    --succubus-accent: #d65db1;    /* 亮粉紫 */
    --text-dark-base: #fff0f5;     /* 暗模式-柔光白 */
    --text-light-base: #2a0812;    /* 亮模式-深黑红 */
    --font-stack: "Nunito", "Quicksand", "Segoe UI Emoji", "Microsoft YaHei UI", sans-serif;
}

/* 移除干扰 */
[class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] { display: none !important; }

/* ============================== */
/* PART 0: 动态动画引擎 (Animation Engine) */
/* ============================== */

/* 1. 气泡入场：弹性上浮 */
@keyframes slide-in-glass {
    0% { opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* 2. 流光扫过：镜面反光 */
@keyframes sheen-slide {
    0% { left: -100%; opacity: 0; }
    50% { opacity: 0.6; }
    100% { left: 200%; opacity: 0; }
}

/* 3. 魅魔心跳：加载图标 */
@keyframes succubus-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 12px var(--succubus-primary)); }
    100% { transform: scale(1); opacity: 0.8; }
}

/* 4. 色彩流动：用于标题和人名 */
@keyframes gradient-flow { 
    0% { background-position: 0% 50%; } 
    100% { background-position: 200% 50%; } 
}

/* 5. 引用块淡入 */
@keyframes fade-in-left {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ============================== */
/* PART 1: 聊天气泡 (Glass Container) */
/* ============================== */

/* 1.1 容器架构 */
div[class*="bg-gray-100"].relative.inline-block {
    /* 核心动画：0.5秒弹性入场 */
    animation: slide-in-glass 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    
    padding: 24px 32px !important; /* 增加内边距，提升呼吸感 */
    border-radius: 24px !important;
    overflow: hidden; 
    position: relative !important;
    
    /* 强制重置 */
    background-image: none !important;
    background-color: transparent !important;
}

/* 1.2 [回归] 交互流光层 */
div[class*="bg-gray-100"].relative.inline-block::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    transform: skewX(-25deg); pointer-events: none; z-index: 1;
    background: linear-gradient(to right, transparent, rgba(255,45,117,0.2), transparent);
}
div[class*="bg-gray-100"].relative.inline-block:hover::after {
    animation: sheen-slide 0.8s ease-in-out;
}
/* 悬停微动：上浮 + 阴影增强 */
div[class*="bg-gray-100"].relative.inline-block:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: 0 20px 40px rgba(255, 45, 117, 0.25) !important;
    border-color: var(--succubus-primary) !important;
}

/* --- [亮色模式]：通透磨砂 --- */
div[class*="bg-gray-100"].relative.inline-block {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 240, 250, 0.65) 100%) !important;
    backdrop-filter: blur(20px) !important; 
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 45, 117, 0.35) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 10px 30px rgba(214, 93, 177, 0.15) !important;
    color: var(--text-light-base) !important;
}

/* --- [暗色模式]：幻影水晶 --- */
html.dark div[class*="bg-gray-100"].relative.inline-block,
body.dark div[class*="bg-gray-100"].relative.inline-block {
    background: linear-gradient(165deg, rgba(30, 5, 30, 0.60) 0%, rgba(50, 10, 60, 0.45) 100%) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 45, 117, 0.25) !important;
    border-top: 1px solid rgba(255, 150, 200, 0.35) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 45, 117, 0.1) !important;
}


/* ============================== */
/* PART 2: 界面组件动态化 (Avatars & UI) */
/* ============================== */

/* 2.1 [回归] 头像光环与旋转 */
div[class*="avatar"] img, img[alt*="Avatar"], .rounded-full img {
    border-radius: 22% !important; /* 超椭圆 */
    border: 2px solid transparent !important;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性过渡 */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}
div[class*="avatar"] img:hover, img[alt*="Avatar"]:hover {
    border-color: var(--succubus-accent) !important;
    transform: rotate(-8deg) scale(1.1);
    filter: drop-shadow(0 0 15px var(--succubus-primary));
}

/* 2.2 [回归] 模型名称流光渐变 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    background: linear-gradient(90deg, #d65db1, #ff2d75, #ff9ec6, #d65db1);
    background-size: 300% auto; 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 900 !important; 
    letter-spacing: 0.5px;
    animation: gradient-flow 3s linear infinite; /* 流动速度加快 */
}

/* 2.3 输入框优化 */
textarea, .MuiInputBase-input {
    background-color: transparent !important;
    font-family: var(--font-stack) !important;
}
/* 亮色输入 */
textarea, input[type="text"], .MuiInputBase-input {
    color: #2d0515 !important; font-weight: 700; caret-color: #ff2d75 !important;
}
/* 暗色输入 */
html.dark textarea, html.dark input[type="text"], html.dark .MuiInputBase-input {
    color: #fff !important; font-weight: normal; text-shadow: 0 0 2px black;
}


/* ============================== */
/* PART 3: 杂志级排版 (Typography Polish) */
/* ============================== */

/* 3.1 全局字体设置 */
.markdown-body {
    font-family: var(--font-stack) !important;
    font-size: 16px !important;
    line-height: 1.85 !important; /* 黄金行高 */
    letter-spacing: 0.03em !important;
    -webkit-font-smoothing: antialiased;
}

/* 3.2 文字颜色修正 */
/* 亮色模式 */
div[class*="bg-gray-100"].relative.inline-block p,
div[class*="bg-gray-100"].relative.inline-block li,
div[class*="bg-gray-100"].relative.inline-block span {
    color: var(--text-light-base) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
    font-weight: 600 !important;
    margin-bottom: 0.8em; /* 段落间距优化 */
}
/* 暗色模式 */
html.dark div[class*="bg-gray-100"] p,
html.dark div[class*="bg-gray-100"] li,
html.dark div[class*="bg-gray-100"] span {
    color: var(--text-dark-base) !important;
    text-shadow: 0 0 2px rgba(0,0,0,1) !important;
    font-weight: 400 !important;
}

/* 3.3 [回归] 标题排版与流光 */
.markdown-body h1, .markdown-body h2 {
    margin-top: 1.6em; margin-bottom: 0.8em;
    font-weight: 800 !important; width: fit-content;
    line-height: 1.2; letter-spacing: -0.02em; /* 紧凑标题 */
}
/* 亮色标题 */
.markdown-body h1, .markdown-body h2 {
    background-image: linear-gradient(120deg, #d60050 0%, #600030 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
/* 暗色标题 */
html.dark .markdown-body h1, html.dark .markdown-body h2 {
    background-image: linear-gradient(120deg, #ff9ec6 0%, #ff2d75 100%) !important;
    filter: drop-shadow(0 0 15px rgba(255, 45, 117, 0.3));
}
/* 动态装饰线 */
.markdown-body h1::after, .markdown-body h2::after {
    content: ""; display: block; width: 40px; height: 4px;
    background: linear-gradient(90deg, var(--succubus-primary), transparent);
    margin-top: 8px; border-radius: 4px; opacity: 0.8;
    transition: width 0.3s ease;
}
/* 悬停标题时装饰线伸长 */
.markdown-body h1:hover::after, .markdown-body h2:hover::after { width: 100%; }

/* 3.4 [回归] 魔法分割线 */
.markdown-body hr {
    height: 1px; border: none; margin: 2.5em 0; position: relative;
    background: linear-gradient(90deg, transparent, rgba(255, 45, 117, 0.5), transparent); 
    overflow: visible;
}
.markdown-body hr::after {
    content: "✦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: var(--succubus-primary); color: #fff;
    width: 24px; height: 24px; font-size: 14px; line-height: 24px; text-align: center;
    border-radius: 50%; box-shadow: 0 0 10px var(--succubus-primary);
    animation: succubus-pulse 2s infinite; /* 星星跳动 */
}

/* 3.5 [回归] 契约列表 */
.markdown-body ul { list-style: none !important; padding-left: 1.2em; }
.markdown-body ul li { position: relative; padding-left: 1.8em; margin-bottom: 0.6em; }
.markdown-body ul li::before {
    content: "❖"; position: absolute; left: 0; top: 0.1em;
    color: var(--succubus-primary); font-size: 0.9em; 
    text-shadow: 0 0 5px var(--succubus-primary);
}

/* 3.6 动态链接 */
.markdown-body a {
    color: #b00040 !important; font-weight: 800 !important;
    border-bottom: 2px dashed rgba(214, 93, 177, 0.5); 
    text-decoration: none !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-block; /* 允许transform */
}
html.dark .markdown-body a { color: #ff9ec6 !important; }
.markdown-body a:hover {
    color: #fff !important; background: var(--succubus-primary);
    border-radius: 6px; padding: 0 6px; 
    box-shadow: 0 4px 15px var(--succubus-primary);
    border-bottom: 2px solid transparent; 
    -webkit-text-fill-color: #fff !important;
    transform: translateY(-2px) rotate(-1deg); /* 悬停弹跳 */
}


/* ============================== */
/* PART 4: 玻璃化组件 (Modules) */
/* ============================== */

/* 4.1 机密档案折叠块 (Details) */
.markdown-body details {
    border-radius: 12px; margin: 1.5em 0; overflow: hidden; transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(214, 93, 177, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
html.dark .markdown-body details {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 45, 117, 0.2) !important;
}
/* 标题栏 */
.markdown-body summary {
    padding: 12px 18px; cursor: pointer; font-weight: bold;
    display: flex; align-items: center; outline: none;
    color: #8a1c4b !important; background: rgba(255, 45, 117, 0.05);
}
html.dark .markdown-body summary { color: var(--succubus-accent) !important; }
.markdown-body summary::before {
    content: "›"; display: inline-block; margin-right: 12px; font-size: 1.6em; line-height: 0.8;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
    color: var(--succubus-primary);
}
.markdown-body details[open] summary::before { transform: rotate(90deg); }
.markdown-body summary:hover { background: rgba(255, 45, 117, 0.15) !important; }

/* 4.2 引用块 (入场动画) */
.markdown-body blockquote {
    animation: fade-in-left 0.5s ease-out; /* 引用块飞入动画 */
    background: rgba(255, 45, 117, 0.08) !important;
    border-left: 4px solid #ff2d75 !important;
    color: #7a1c3b !important;
    padding: 12px 20px !important; margin: 1.5em 0 !important;
    font-family: "Georgia", serif; backdrop-filter: blur(4px);
    border-radius: 0 12px 12px 0;
}
html.dark .markdown-body blockquote { color: #fce7f3 !important; }

/* 4.3 代码块 */
.markdown-body code {
    background: rgba(255, 230, 240, 0.5) !important;
    color: #c00050 !important; padding: 2px 6px !important; border-radius: 6px;
    border: 1px solid rgba(255, 45, 117, 0.15);
    font-family: "JetBrains Mono", monospace;
}
html.dark .markdown-body code {
    background: rgba(0, 0, 0, 0.4) !important; color: #ff7eb9 !important;
}
.markdown-body pre {
    background: rgba(42, 26, 37, 0.75) !important; color: #ffeef5 !important;
    border-radius: 12px; padding: 16px; border: 1px solid rgba(255, 45, 117, 0.2);
    backdrop-filter: blur(5px);
}
html.dark .markdown-body pre { background: rgba(10, 5, 15, 0.6) !important; }

/* 5. 加载动画：心跳 */
.style_dot-flashing__8L91Q.style_text__zGhNq { display: none !important; }
.flex.items-center.justify-center.w-6.h-5 { position: relative !important; width: 30px !important; height: 30px !important; }
.flex.items-center.justify-center.w-6.h-5::before {
    content: ""; position: absolute; inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff2d75"><path 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"/></svg>');
    background-size: contain; background-repeat: no-repeat;
    animation: succubus-pulse 1.2s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 0 8px var(--succubus-primary));
}

memory { display: none !important; }