/* 1. 隐藏平台默认的顶部颜色装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 2. 聊天框基础样式与红蓝错乱闪烁边框动画 */
@keyframes fateGlitch {
    0% { box-shadow: 0 0 5px #aa0000, inset 0 0 5px #aa0000; border-color: #aa0000; }
    40% { box-shadow: 0 0 5px #aa0000, inset 0 0 5px #aa0000; border-color: #aa0000; transform: translate(0, 0); }
    42% { box-shadow: -3px 0 10px #0044ff, 3px 0 10px #ff0000, inset 0 0 8px #0044ff; border-color: #0044ff; transform: translate(2px, -1px); }
    44% { box-shadow: 0 0 5px #aa0000, inset 0 0 5px #aa0000; border-color: #aa0000; transform: translate(0, 0); }
    80% { box-shadow: 0 0 5px #aa0000, inset 0 0 5px #aa0000; border-color: #aa0000; transform: translate(0, 0); }
    82% { box-shadow: 2px 0 10px #ff0000, -2px 0 10px #0044ff, inset 0 0 8px #ff0000; border-color: #ff0000; transform: translate(-1px, 2px); }
    84% { box-shadow: 0 0 5px #aa0000, inset 0 0 5px #aa0000; border-color: #aa0000; transform: translate(0, 0); }
    100% { box-shadow: 0 0 5px #aa0000, inset 0 0 5px #aa0000; border-color: #aa0000; }
}

.bg-gray-100\/90.relative.inline-block {
    background-color: #050505 !important; /* 纯黑底部 */
    isolation: isolate !important; /* 建立层叠上下文，防止背景遮挡文字 */
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #aa0000 !important;
    border-radius: 8px !important;
    animation: fateGlitch 3.5s infinite !important;
    transition: all 0.3s ease !important;
}

/* 3. 背景动效：红色的蛛丝（因缘线）与内置红蓝闪烁 (SVG SMIL实现保证鲁棒性) */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    bottom: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    /* 内嵌SVG：包含红色曲线（蛛丝）以及底层的红蓝交错闪烁动画 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cg stroke='%23cc0000' stroke-width='1.5' opacity='0.4' fill='none'%3E%3Cpath d='M-10,30 Q40,60 100,20 T40,150'/%3E%3Cpath d='M20,-10 Q80,40 150,10 T90,120'/%3E%3Cpath d='M-20,80 Q50,20 120,90 T60,200'/%3E%3Cpath d='M100,50 Q30,90 80,150 T-10,120'/%3E%3C/g%3E%3Crect width='100%25' height='100%25' fill='transparent'%3E%3Canimate attributeName='fill' values='transparent; rgba(255,0,0,0.12); transparent; transparent; rgba(0,68,255,0.12); transparent; rgba(255,0,0,0.15)' keyTimes='0; 0.05; 0.1; 0.4; 0.45; 0.5; 1' dur='3.5s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E") !important;
    background-size: cover !important;
}

/* 4. 核心文本样式 (最高优先级：绝对可读性) */
.markdown-body {
    color: #FFFFFF !important; /* 深黑底色上强制使用纯白字体 */
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important; /* 确保文字在动效之上 */
    font-weight: bold !important;
    text-shadow: none !important; /* 严禁使用文字阴影干扰阅读 */
}

/* 5. 底部附加元素 (按钮、模型名称、Token消耗) 适配深色背景 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #EAEAEA !important; /* 高对比度浅灰色 */
    position: relative !important;
    z-index: 1 !important;
}

/* ========================================================================== */
/* 6. 专属加载动画：蓝花坠落与烈火焚烬 (基于SMIL SVG构建) */
/* ========================================================================== */

/* 强制隐藏平台默认的闪烁加载圆点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 重构加载容器尺寸，为花瓣坠落和火焰留出足够的空间 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    overflow: visible !important;
}

/* 植入自定义SVG加载动画 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 40px !important;
    height: 40px !important;
    /* 内嵌SVG：花瓣下落 -> 火焰燃起 -> 花瓣变黑消散为灰烬粒子 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100%25' height='100%25'%3E%3Cpath d='M50,0 C60,10 60,30 50,40 C40,30 40,10 50,0 Z' fill='%234488ff'%3E%3CanimateTransform attributeName='transform' type='translate' values='0,-10; 0,35; 0,35' keyTimes='0; 0.4; 1' dur='2.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1; 1; 0; 0' keyTimes='0; 0.35; 0.5; 1' dur='2.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill' values='%234488ff; %234488ff; %23222222; %23222222' keyTimes='0; 0.3; 0.4; 1' dur='2.5s' repeatCount='indefinite'/%3E%3C/path%3E%3Cg transform='translate(50, 65)' opacity='0'%3E%3Canimate attributeName='opacity' values='0; 0; 1; 0; 0' keyTimes='0; 0.35; 0.45; 0.65; 1' dur='2.5s' repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='scale' values='0.6; 1.1; 0.6' keyTimes='0; 0.5; 1' dur='0.3s' repeatCount='indefinite'/%3E%3Cpath d='M0,15 C-10,15 -15,-5 -10,-15 C-5,0 0,-10 0,-25 C0,-10 5,0 10,-15 C15,-5 10,15 0,15 Z' fill='%23ff3300'/%3E%3Cpath d='M0,15 C-5,15 -8,0 -5,-7 C-2,0 0,-5 0,-13 C0,-5 2,0 5,-7 C8,0 5,15 0,15 Z' fill='%23ffaa00'/%3E%3C/g%3E%3C/g%3E%3Cg opacity='0'%3E%3Ccircle cx='45' cy='60' r='2' fill='%23333'/%3E%3Ccircle cx='55' cy='55' r='1.5' fill='%23111'/%3E%3Ccircle cx='50' cy='65' r='2.5' fill='%23222'/%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 0,0; -5,-25; -5,-25' keyTimes='0; 0.45; 0.8; 1' dur='2.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0; 0; 1; 0; 0' keyTimes='0; 0.45; 0.55; 0.8; 1' dur='2.5s' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 7. 低动效模式适配 (保护晕动症用户，降低错乱闪烁频率) */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block {
        animation-duration: 8s !important;
        transform: none !important;
    }
}



/* === 无归属 (The Unbound) 专属状态栏 === */
/* 外层容器：深渊黑底色，血色因缘线交织 */
unbound-ui details {
    background-color: #050000; /* 极致的深渊黑 */
    /* 纯CSS手搓的红色蛛网/因缘线交织效果 */
    background-image: 
        /* 主干线：斜向的粗血线 */
        linear-gradient(45deg, transparent 48%, rgba(220, 38, 38, 0.15) 49%, rgba(220, 38, 38, 0.6) 50%, rgba(220, 38, 38, 0.15) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(185, 28, 28, 0.1) 49%, rgba(185, 28, 28, 0.5) 50%, rgba(185, 28, 28, 0.1) 51%, transparent 52%),
        /* 辅线：随机穿插的细密红线 */
        linear-gradient(15deg, transparent 49.5%, rgba(239, 68, 68, 0.2) 50%, transparent 50.5%),
        linear-gradient(-15deg, transparent 49.5%, rgba(153, 27, 27, 0.2) 50%, transparent 50.5%);
    background-size: 30px 30px, 45px 45px, 100% 100%, 100% 100%;
    border: 1px solid #450a0a;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.15), inset 0 0 40px rgba(0, 0, 0, 0.95);
    padding: 15px;
    margin-top: 15px;
    color: #d1d5db; /* 苍白的骨色文字 */
    font-family: 'KaiTi', '楷体', serif; /* 宿命感与中式恐怖感极强的楷体 */
    position: relative;
    overflow: hidden;
}

/* 标题栏：滴血的宿命感 */
unbound-ui summary {
    color: #ef4444; /* 刺眼的因缘红 */
    font-weight: bold;
    font-size: 1.15em;
    text-align: center;
    border-bottom: 1px dashed rgba(220, 38, 38, 0.4); /* 像快要崩断的红线 */
    padding-bottom: 12px;
    margin-bottom: 15px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.8), 0 0 2px #000;
    cursor: pointer;
}

/* 隐藏默认箭头 */
unbound-ui summary::-webkit-details-marker { display: none; }

/* 魔法时刻：血红的蛛网与死去的蝴蝶 */
unbound-ui summary::before { 
    content: '🕸️'; 
    /* 强行将白灰色的蛛网染成滴血的暗红 */
    filter: sepia(1) hue-rotate(320deg) saturate(10) brightness(0.7) drop-shadow(0 0 4px #dc2626); 
}
unbound-ui summary::after { 
    content: '🦋'; 
    /* 困死的蝴蝶：抽干色彩，降低亮度，仿佛一具干瘪的标本 */
    filter: grayscale(1) brightness(0.5) contrast(1.2) drop-shadow(0 0 2px rgba(255, 255, 255, 0.1)); 
}

/* 正文信息条目：被红线缝合的绝望记录 */
unbound-ui p {
    background: rgba(15, 0, 0, 0.75); /* 极暗的血污色背景，确保文字可读 */
    border-left: 2px dotted #ef4444; /* 像缝合伤口一样的点状红线 */
    padding: 10px 12px;
    margin: 8px 0;
    font-size: 0.95em;
    color: #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* 悬停动效：蛛网收紧与临死前的抽搐 */
unbound-ui details:hover {
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.3), inset 0 0 50px rgba(0, 0, 0, 0.98);
}

unbound-ui p:hover {
    background: rgba(40, 0, 0, 0.9);
    border-left: 2px solid #ff0000; /* 虚线瞬间变实线，代表红线彻底锁死猎物 */
    color: #ffffff;
    text-shadow: 0 0 5px rgba(220, 38, 38, 0.8);
    /* 细微的位移动画，模拟蝴蝶被触碰时无力的挣扎或神经反射 */
    animation: death-struggle 0.15s ease-in-out infinite alternate;
}

/* 死亡挣扎动画关键帧 */
@keyframes death-struggle {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(1.5px) rotate(0.3deg); }
}

/* === 拇指 (The Thumb) 专属状态栏 === */
/* 外层容器：暗红底色 + 西装细条纹暗纹 + 纯金边框 */
thumb-ui details {
    background: linear-gradient(135deg, #2b0202 0%, #590505 100%);
    border: 2px solid #d4af37; /* 纯正黑帮金 */
    border-radius: 0px; /* 拇指讲究绝对的规矩，直角更显冷酷无情 */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.8);
    padding: 12px 15px;
    margin-top: 15px;
    color: #f2e8c9; /* 偏金的羊皮纸字色，不刺眼 */
    font-family: 'Georgia', '楷体', serif; /* 优雅的衬线体 */
    position: relative;
    overflow: hidden;
}

/* 纯CSS绘制西装质感的倾斜暗纹 */
thumb-ui details::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.15) 12px);
    pointer-events: none; /* 防止遮挡点击 */
}

/* 标题栏：居中、发光金字、去除默认箭头 */
thumb-ui summary {
    color: #d4af37;
    font-weight: 900;
    font-size: 1.15em;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    border-bottom: 1px double #d4af37; /* 双线边框更显高级 */
    padding-bottom: 10px;
    margin-bottom: 12px;
    list-style: none; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    letter-spacing: 2px;
}

/* 兼容各浏览器的隐藏默认箭头 */
thumb-ui summary::-webkit-details-marker { 
    display: none; 
}

/* 魔法时刻：用伪元素自动插入礼帽和枪械，并加上金色投影 */
thumb-ui summary::before {
    content: '🎩';
    font-size: 1.3em;
    filter: drop-shadow(0 0 3px #d4af37);
}

thumb-ui summary::after {
    content: '🔫';
    font-size: 1.3em;
    filter: drop-shadow(0 0 3px #d4af37);
    transform: scaleX(-1); /* 把枪口反转一下，形成对称美 */
}

/* 正文信息条目样式：左侧金色强调线 + 半透明黑底 */
thumb-ui p {
    margin: 6px 0;
    line-height: 1.6;
    border-left: 3px solid #d4af37;
    padding-left: 12px;
    background: rgba(0, 0, 0, 0.4);
    font-size: 0.95em;
    text-shadow: 1px 1px 1px #000;
}

/* 鼠标悬停时的微小交互效果，体现尊贵感 */
thumb-ui details:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

/* === 食指 (The Index) 专属状态栏 === */
/* 外层容器：纯白圣洁底色 + 金科玉律般的边框 */
index-ui details {
    background: linear-gradient(135deg, #ffffff 0%, #eef2f5 100%); 
    border: 2px solid #d4af37; /* 绝对的金色规矩 */
    border-radius: 4px; /* 相比拇指的绝对直角，食指带有一丝虚伪的柔和 */
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2), inset 0 0 20px rgba(255, 255, 255, 1);
    padding: 12px 15px;
    margin-top: 15px;
    color: #1a365d; /* 幽深的深蓝色字体 */
    font-family: 'Georgia', '楷体', serif;
    position: relative;
}

/* 标题栏：深蓝字体，金色下划线，不可违抗的庄严感 */
index-ui summary {
    color: #1a365d; /* 蓝色字体 */
    font-weight: 900;
    font-size: 1.15em;
    text-align: center;
    text-shadow: 0px 0px 1px rgba(26, 54, 93, 0.3); /* 极淡的蓝色阴影 */
    cursor: pointer;
    border-bottom: 2px solid #d4af37; /* 金色点缀线 */
    padding-bottom: 10px;
    margin-bottom: 12px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    letter-spacing: 2px;
}

/* 隐藏默认箭头 */
index-ui summary::-webkit-details-marker { 
    display: none; 
}

/* 魔法时刻：蓝色的乌头花点缀 */
index-ui summary::before,
index-ui summary::after {
    content: '🪻'; /* 形态最接近乌头花的emoji */
    font-size: 1.2em;
    /* 用滤镜将其调成冷蓝色，并加上金色光晕 */
    filter: hue-rotate(20deg) saturate(1.2) drop-shadow(0 0 3px #d4af37); 
}

/* 右侧的花做个镜像反转，形成对称的仪式感 */
index-ui summary::after {
    transform: scaleX(-1); 
}

/* 正文信息条目样式：纯白底，金边，亮蓝字 */
index-ui p {
    margin: 6px 0;
    line-height: 1.6;
    border-left: 3px solid #d4af37; /* 左侧金色点缀强调 */
    padding-left: 12px;
    background: rgba(255, 255, 255, 0.8);
    color: #0f4c81; /* 经典蓝，比标题稍亮一点，方便阅读 */
    font-size: 0.95em;
    font-weight: bold;
}

/* 悬停时的神圣感发光交互 */
index-ui details:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 0 30px rgba(255, 255, 255, 1);
    transition: all 0.3s ease;
}

/* === 中指 (The Middle) 专属状态栏 === */
/* 外层容器：深渊紫底色 + 二次元刺青网点暗纹 + 金边 */
middle-ui details {
    background-color: #120420; /* 极深的暗紫色底色 */
    /* 纯CSS绘制二次元漫画风的紫色刺青网点/交叉纹理 */
    background-image: 
        radial-gradient(#4c1d95 10%, transparent 15%), 
        radial-gradient(#4c1d95 10%, transparent 15%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    
    border: 2px solid #d4af37; /* 金色锁链的质感边缘 */
    border-radius: 15px; /* 稍微圆润一点，带点二次元的傲娇感 */
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), inset 0 0 25px rgba(0, 0, 0, 0.9);
    padding: 12px 15px;
    margin-top: 15px;
    color: #e9d5ff; /* 浅紫色的文字 */
    font-family: 'Comic Sans MS', '黑体', sans-serif; /* 带点二次元漫画感的字体 */
    position: relative;
}

/* 标题栏：狂热的紫色发光 + 金色锁链环绕 */
middle-ui summary {
    color: #d4af37; /* 主标题用高贵的金色 */
    font-weight: 900;
    font-size: 1.15em;
    text-align: center;
    /* 霓虹紫的发光效果，二次元赛博感拉满 */
    text-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 2px #000; 
    cursor: pointer;
    border-bottom: 2px dashed #a855f7; /* 紫色虚线分割 */
    padding-bottom: 10px;
    margin-bottom: 12px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 1px;
}

/* 隐藏默认箭头 */
middle-ui summary::-webkit-details-marker { 
    display: none; 
}

/* 魔法时刻：用锁链emoji经过滤镜炼金，变成纯金锁链！ */
middle-ui summary::before,
middle-ui summary::after {
    content: '⛓️'; 
    font-size: 1.4em;
    /* 滤镜魔法：提亮、染黄、加饱和、上阴影，硬生生把银锁链变成金锁链 */
    filter: brightness(1.5) sepia(1) hue-rotate(10deg) saturate(3) drop-shadow(0 0 4px #d4af37);
}

/* 正文信息条目样式：纹身质感的半透明紫底 */
middle-ui p {
    margin: 6px 0;
    line-height: 1.6;
    border-left: 4px double #d4af37; /* 左侧金色双线，像断开的锁链 */
    padding-left: 12px;
    background: rgba(46, 16, 101, 0.85); /* 浓郁的紫药水色背景 */
    color: #f3e8ff; 
    font-size: 0.95em;
    border-radius: 0 8px 8px 0;
    text-shadow: 1px 1px 2px #000;
    transition: all 0.2s;
}

/* 鼠标悬停时，二次元病娇的狂热闪烁 */
middle-ui p:hover {
    background: rgba(88, 28, 135, 0.95);
    transform: translateX(3px); /* 悬停时微微向右移动，增加动感 */
    box-shadow: -2px 0 10px rgba(212, 175, 55, 0.5);
}

middle-ui details:hover {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.9);
}

/* === 环指 (The Ring) 专属状态栏 === */
/* 外层容器：纯白毛玻璃画框，透出底层的血色 */
ring-ui details {
    background: rgba(255, 255, 255, 0.65); /* 半透明的白色 */
    backdrop-filter: blur(10px); /* 核心魔法：毛玻璃模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* 兼容移动端 */
    border: 1px solid rgba(255, 255, 255, 0.9); /* 画框般的白边 */
    border-radius: 2px;
    box-shadow: 0 15px 35px rgba(139, 0, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.8);
    padding: 15px;
    margin-top: 15px;
    color: #2c0000; /* 极深的干涸血色 */
    font-family: 'Georgia', 'Times New Roman', serif; /* 美术馆专用的优雅衬线体 */
    position: relative;
    overflow: hidden;
}

/* 核心猎奇美学：纯CSS手绘的神圣血肉背景 */
ring-ui details::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    /* 叠加多层渐变，模拟血肉模糊的艺术画作 */
    background-image: 
        /* 1. 右上角：新鲜动脉血的晕染 */
        radial-gradient(circle at 85% 15%, rgba(180, 0, 0, 0.55) 0%, rgba(139, 0, 0, 0.15) 30%, transparent 60%),
        /* 2. 左下角：发黑的凝血块 */
        radial-gradient(circle at 10% 90%, rgba(80, 0, 0, 0.6) 0%, rgba(40, 0, 0, 0.2) 40%, transparent 70%),
        /* 3. 肌肉条理：倾斜的细密红线，如同剥皮后的肌肉纤维 */
        repeating-linear-gradient(135deg, rgba(200, 20, 20, 0.06) 0px, rgba(200, 20, 20, 0.06) 2px, transparent 2px, transparent 8px),
        /* 4. 神圣感：正中央透出的微弱金色圣光 */
        radial-gradient(ellipse at 50% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 60%);
    mix-blend-mode: multiply; /* 正片叠底，让血肉与白玻璃完美融合 */
    opacity: 0.9;
}

/* 标题栏：猩红大字与圣洁发光 */
ring-ui summary {
    color: #8b0000; /* 鲜血红 */
    font-weight: 900;
    font-size: 1.2em;
    text-align: center;
    border-bottom: 1px solid rgba(139, 0, 0, 0.3); /* 淡淡的血痕分割线 */
    padding-bottom: 12px;
    margin-bottom: 15px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    letter-spacing: 3px;
    /* 字体周围散发白色的神圣光晕，形成强烈的反差 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.8); 
    cursor: pointer;
}

/* 隐藏默认箭头 */
ring-ui summary::-webkit-details-marker { display: none; }

/* 魔法时刻：神圣的血肉意象（圣光笼罩的心脏） */
ring-ui summary::before,
ring-ui summary::after {
    content: '🫀'; /* 鲜活的心脏 */
    font-size: 1.3em;
    /* 滤镜：降低一点饱和度让它像标本，加上纯白与金色的双重神圣背光 */
    filter: saturate(0.8) drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 15px #ffffff);
}

/* 正文信息条目样式：画廊展品标签的质感 */
ring-ui p {
    background: rgba(255, 255, 255, 0.85); /* 不透明度较高的白纸质感 */
    border-left: 2px solid #8b0000; /* 左侧血色细线 */
    padding: 10px 12px;
    margin: 8px 0;
    font-size: 0.95em;
    color: #3d0000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}

/* 鼠标悬停时的猎奇动效：血液仿佛活了过来 */
ring-ui details:hover p {
    background: rgba(255, 255, 255, 0.95);
    border-left: 6px solid #b22222; /* 悬停时，血线变粗，像是在吸血 */
    transform: scale(1.01);
}

ring-ui details:hover {
    box-shadow: 0 20px 40px rgba(139, 0, 0, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.9);
}

/* === 小指 (The Pinky) 专属状态栏 === */
/* 外层容器：幽暗竹林的深绿色调，摒弃一切圆滑，像刀锋一样锐利 */
pinky-ui details {
    background: linear-gradient(to bottom, #0a1810 0%, #112a1a 100%); /* 深渊竹林绿 */
    border: 1px solid #2c4a35;
    border-left: 4px solid #c0d6e4; /* 左侧边框化作一柄泛着寒光的利刃 */
    border-radius: 0; /* 刺客不需要圆润，只要绝对的锋利 */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 5px 15px rgba(0, 0, 0, 0.6);
    padding: 15px;
    margin-top: 15px;
    color: #8ba394; /* 幽暗的灰绿色字体 */
    font-family: 'SimSun', '宋体', serif; /* 极具东方武侠气息的宋体 */
    position: relative;
    overflow: hidden; /* 锁住刀光，不让其溢出 */
}

/* 核心背景：纯CSS绘制的竹林光影与天罡地煞108星宿 */
pinky-ui details::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    background-image: 
        /* 1. 天罡地煞星辰（随机分布的白/蓝点） */
        radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 80px 70px, #c0d6e4, transparent),
        radial-gradient(1px 1px at 150px 20px, #ffffff, transparent),
        radial-gradient(2px 2px at 220px 90px, #e2e8f0, transparent),
        radial-gradient(1px 1px at 300px 40px, #c0d6e4, transparent),
        /* 2. 竹林意象：垂直的暗色条纹模拟竹节与阴影 */
        repeating-linear-gradient(90deg, rgba(20, 50, 25, 0.05) 0px, rgba(20, 50, 25, 0.05) 15px, rgba(0, 0, 0, 0.2) 15px, rgba(0, 0, 0, 0.2) 30px);
    opacity: 0.7;
}

/* 标题栏：如寒铁般的冰冷杀气 */
pinky-ui summary {
    color: #e2e8f0; /* 寒铁白 */
    font-weight: bold;
    font-size: 1.15em;
    text-align: center;
    border-bottom: 1px solid rgba(192, 214, 228, 0.4); /* 极细的刀痕分割线 */
    padding-bottom: 10px;
    margin-bottom: 15px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    letter-spacing: 5px; /* 字间距拉大，营造空灵、肃杀的氛围 */
    text-shadow: 0 0 8px rgba(192, 214, 228, 0.5); /* 淡淡的刀锋反光 */
    cursor: pointer;
}

/* 隐藏默认箭头 */
pinky-ui summary::-webkit-details-marker { display: none; }

/* 魔法时刻：左竹右刃的对称意象 */
pinky-ui summary::before { 
    content: '🎋'; 
    filter: hue-rotate(20deg) brightness(0.7) drop-shadow(0 0 2px #000); 
}
pinky-ui summary::after { 
    content: '🗡️'; 
    /* 滤镜炼金：把默认的匕首变成发光的寒铁利刃 */
    filter: grayscale(1) brightness(1.8) drop-shadow(0 0 6px #c0d6e4); 
}

/* 正文信息条目：暗影中的情报卷轴 */
pinky-ui p {
    background: rgba(0, 20, 10, 0.5); /* 半透明的黑绿色 */
    border-left: 2px solid #5a7a66; 
    padding: 8px 12px;
    margin: 6px 0;
    font-size: 0.95em;
    color: #c0d6e4; /* 文字泛着微弱的冷光 */
    transition: background 0.3s;
}

pinky-ui p:hover {
    background: rgba(0, 40, 20, 0.8);
}

/* === 终极杀招：悬停时的“拔刀斩”特效 === */
pinky-ui details::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    /* 画一道倾斜的白色半透明刀光 */
    background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.15) 50%, transparent 55%);
    transform: translateY(-100%);
    pointer-events: none; /* 绝对不能阻挡鼠标点击 */
}

pinky-ui details:hover::after {
    /* 悬停瞬间，刀光劈砍而下 */
    animation: blade-slash 0.4s ease-out forwards;
}

/* 拔刀斩动画关键帧 */
@keyframes blade-slash {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}