/* =========================================================================
 * 📌 【第一部分：通用基础与全局漫画骨架】
 * =========================================================================
 */
tp { display: block !important; }

/* 漫画风加粗纯黑白双色滚动条 */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-track {
    background: #ffffff !important;
    border-left: 2.5px solid #000000 !important;
}
::-webkit-scrollbar-thumb {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
}

::selection {
    background: #000000 !important;
    color: #ffffff !important;
}

strong, b {
    color: #000000 !important;
    font-weight: 900 !important;
}

blockquote {
    margin: 0.8rem 0 !important;
    padding: 0.6rem 1rem !important;
    border: 2.5px solid #000000 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    font-size: 0.85rem !important;
    color: #000000 !important;
    box-shadow: 4px 4px 0px #000000 !important;
}

hr {
    border: none !important;
    border-top: 3px dashed #000000 !important;
    margin: 1rem 0 !important;
}

/* =========================================================================
 * 📌 【第二部分：第一分镜 ➔ 幽冥天象碑（世界状态）】
 * 结构级锁定：精准抓取全卡片最顶部第一个未加类的 details，全黑反相封闭设计
 * =========================================================================
 */
details:not(.status-container):first-of-type {
    border: 3px solid #000000 !important;
    border-radius: 20px !important;
    background: #000000 !important; /* 彻底封闭的黑色冥碑 */
    margin: 14px 0 !important;
    overflow: hidden !important;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.4) !important;
    font-family: 'Consolas', 'Monaco', monospace !important; /* 强行等宽对齐树状图 */
    white-space: pre-wrap !important;
}

details:not(.status-container):first-of-type > summary {
    background: #000000 !important;
    border-bottom: 2px dashed #ffffff !important;
    padding: 10px 14px !important;
    font-weight: 900 !important;
    font-size: 0.85rem !important;
    color: #ffffff !important; /* 强制提亮文字，彻底杜绝看不清 */
    list-style: none !important;
}
details:not(.status-container):first-of-type > summary::-webkit-details-marker { display: none !important; }
details:not(.status-container):first-of-type > summary::before { content: "🪐 " !important; }

details:not(.status-container):first-of-type p,
details:not(.status-container):first-of-type tp,
details:not(.status-container):first-of-type div {
    color: #ffffff !important; /* 内部天象字符全部高亮变白 */
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
}

/* =========================================================================
 * 📌 【第三部分：第二分镜 ➔ 浮雕剧情页（叙事正文区）】
 * 结构级锁定：精准抓取“未被任何details嵌套”的裸露主正文 tp，实现绝对绝缘
 * =========================================================================
 */
tp:not(details tp),
.group [class*="bg-gray-100"], 
.group [class*="bg-primary-500"] {
    display: block !important;
    clear: both !important; /* 强力斩断上下流继承，防止把后面的组件吸进来 */
    width: 100% !important;
    background: #ffffff !important; /* 极白画布，告别暗淡 */
    border: 3px solid #000000 !important; /* 坚硬分镜重框 */
    border-radius: 24px !important; /* 饱满大椭圆 */
    color: #000000 !important; /* 文本纯黑印刷体，对比度拉满 */
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    padding: 14px 20px !important;
    box-shadow: 4px 6px 0px #000000 !important; /* 平面硬立体阴影 */
    margin: 16px 0 24px 0 !important; /* 加大底部距墙，强行断开下一区域 */
    box-sizing: border-box !important;
}

/* 🔒 颜色特权保留与高亮加冕：岁骸心声（#e0125e）在黑白世界中的霓虹反差 */
p[style*="color: #e0125e"],
span[style*="color: #e0125e"],
tp:not(details tp) p[style*="color: #e0125e"] {
    color: #ff0055 !important; /* 提亮为你要求的炽焰粉，决不妥协 */
    font-weight: 800 !important;
    font-style: italic !important;
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0px #000000 !important; /* 形成独立跳脱的小卡片效果 */
    display: inline-block !important;
    margin: 6px 0 !important;
}

/* =========================================================================
 * 📌 【第四部分：第三分镜 ➔ 万界法相面板组（通用状态大框）】
 * =========================================================================
 */
/* 通用面板独立分镜（玩家状态、互动角色状态大框） */
details.status-container {
    border: 3px solid #000000 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    margin: 16px 0 !important;
    overflow: hidden !important;
    box-shadow: 4px 4px 0px #000000 !important;
}

details.status-container > summary {
    background: #f3f3f3 !important; /* 漫画浅灰分镜底 */
    border-bottom: 2.5px solid #000000 !important;
    padding: 10px 14px !important;
    font-weight: 800 !important;
    font-size: 0.84rem !important;
    color: #000000 !important;
    list-style: none !important;
}
details.status-container > summary::-webkit-details-marker { display: none !important; }
details.status-container > summary::before { content: "🔮 " !important; }

/* 主面板内一层紧凑对齐 */
details.status-container > tp { padding: 12px 14px !important; background: #ffffff !important; }
details.status-container > tp > p {
    margin: 10px 0 !important;
    font-size: 0.82rem !important;
    color: #000000 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* 长文本自适应解构 */
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

/* =========================================================================
 * 📌 【第五部分：次级分镜优化 ➔ 岁骸记录（紧凑内聚贴合化）】
 * 结构级锁定：精准定位玩家状态框内部嵌套的第一个次级 details
 * =========================================================================
 */
details.status-container:first-of-type details {
    border: 2px solid #000000 !important;
    border-radius: 14px !important;
    box-shadow: 2.5px 2.5px 0px #000000 !important;
    margin: 6px 0 4px 0 !important; /* 大幅缩减外边距，形成完美的依附贴合感 */
}
details.status-container:first-of-type details > summary {
    background: #ffffff !important;
    border-bottom: 2px solid #000000 !important;
    padding: 5px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
}
details.status-container:first-of-type details > summary::before { content: "🕸️ " !important; }
details.status-container:first-of-type details tp { padding: 8px 12px !important; background: #ffffff !important; }

/* =========================================================================
 * 📌 【第六部分：终极阵法重塑 ➔ 身体状态 · 2×2 绝对田字格矩阵】
 * 结构级锁定：精准抓取互动角色状态（第二个容器）中嵌套的最底层子 details tp 容器
 * =========================================================================
 */
details.status-container + details.status-container details {
    border: 2.5px dashed #000000 !important; /* 标志性的虚线炉鼎分镜 */
    border-radius: 16px !important;
    margin: 12px 0 4px 0 !important;
    box-shadow: 3px 3px 0px #000000 !important;
}
details.status-container + details.status-container details > summary {
    background: #ffffff !important;
    border-bottom: 2px solid #000000 !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
}
details.status-container + details.status-container details > summary::before { content: "🎲 " !important; }

/* 🧠 田字格布局重编：强行在子 tp 容器上开启双列均分 Grid，100% 规整 */
details.status-container + details.status-container details > tp {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 绝对等分两列 */
    gap: 12px !important; /* 十字交叉核心间距 */
    padding: 12px !important;
    background: #ffffff !important;
}

/* 强制使田字格里的四个部位段落转换为独立的分镜小方块 */
details.status-container + details.status-container details > tp p {
    display: flex !important;
    flex-direction: column !important; /* 部位名在顶，数据在底 */
    align-items: stretch !important;
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    padding: 8px !important;
    margin: 0 !important;
    box-shadow: 2.5px 2.5px 0px #000000 !important;
    font-size: 0.76rem !important;
    color: #000000 !important;
    line-height: 1.4 !important;
}

/* =========================================================================
 * 📌 【第七部分：极简漫画风格数据批注胶囊（.value）】
 * =========================================================================
 */
.value {
    flex: 1 1 auto !important;
    min-width: 95px !important;
    max-width: 100% !important;
    text-align: left !important;
    border: 2px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 0.76rem !important;
    padding: 5px 12px !important;
    border-radius: 10px !important;
    box-shadow: 3px 3px 0px #000000 !important;
    display: inline-block !important;
    word-break: break-all !important;
}

/* 当处于田字格内部时，微调数据值外观使其在格子里绝对撑满并居中 */
details.status-container + details.status-container details .value {
    text-align: center !important;
    box-shadow: none !important; /* 移除内层嵌套阴影，防繁杂 */
    border: 1.5px solid #000000 !important;
    background: #fdfdfd !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    margin-top: 6px !important;
    width: 100% !important;
}

/* =========================================================================
 * 📌 【第八部分：尾部末端微件特调 —— 识海记忆区 & 天道行动推荐】
 * =========================================================================
 */
details:not(.status-container):nth-last-of-type(2) {
    border: 2.5px solid #000000 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    margin: 14px 0 !important;
    overflow: hidden !important;
    box-shadow: 4px 4px 0px #000000 !important;
    font-family: 'Consolas', monospace !important;
}
details:not(.status-container):nth-last-of-type(2) > summary {
    background: #f3f3f3 !important;
    border-bottom: 2.5px dashed #000000 !important;
    padding: 9px 14px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    list-style: none !important;
}
details:not(.status-container):nth-last-of-type(2) > summary::before { content: "📜 " !important; }

details:not(.status-container):last-of-type {
    border: 3px dashed #000000 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    margin: 14px 0 !important;
    overflow: hidden !important;
    box-shadow: 4px 4px 0px #000000 !important;
}
details:not(.status-container):last-of-type > summary {
    background: #f3f3f3 !important;
    border-bottom: 2.5px solid #000000 !important;
    padding: 9px 14px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    list-style: none !important;
}
details:not(.status-container):last-of-type > summary::before { content: "🎲 " !important; }

.details-content ol, tp > ol { padding-left: 20px !important; margin: 0 !important; }
.details-content li, tp > ol li { font-size: 0.8rem !important; font-weight: 600 !important; margin-bottom: 6px !important; color: #000000 !important; }
.details-content li::marker, tp > ol li::marker { color: #000000 !important; font-weight: 900 !important; }

/* =========================================================================
 * 📌 【第九部分：固有高级 UI 固件面板全量美化】
 * =========================================================================
 */
[class*="w-full relative"] .truncate { color: #000000 !important; font-weight: 900 !important; }

.MuiStack-root.text-purple-500.mt-1, .css-1kz283j {
    background: #ffffff !important; border: 2.5px solid #000000 !important; border-radius: 20px !important; padding: 6px 14px !important; display: inline-flex !important; box-shadow: 3px 3px 0px #000000 !important; margin-top: 10px !important;
}
.MuiStack-root.text-purple-500.mt-1 p, .css-1kz283j p { color: #000000 !important; font-weight: 800 !important; font-size: 0.72rem !important; }

.MuiButtonBase-root.MuiButton-root.MuiButton-text, .flex.items-center.gap-2 button {
    background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; border-radius: 12px !important; font-weight: 800 !important; font-size: 0.72rem !important; padding: 4px 12px !important; box-shadow: 2.5px 2.5px 0px #000000 !important;
}

.flex.items-center.gap-2.pb-2 > button {
    background: #ffffff !important; color: #000000 !important; border: 3px solid #000000 !important; border-radius: 40px !important; font-weight: 900 !important; font-size: 0.78rem !important; padding: 8px 16px !important; box-shadow: 4px 4px 0px #000000 !important; text-transform: none !important; transition: all 0.1s ease-in-out !important;
}
.flex.items-center.gap-2.pb-2 > button:hover { transform: translate(4px, 4px) !important; box-shadow: 0px 0px 0px #000000 !important; }

/* 🎬 6.6 核心修正：优化为绝对安全、干净的“单行真言”，彻底杜绝不兼容导致的塌陷故障 */
.flex.items-center.justify-center.w-6.h-5 {
    width: auto !important; 
    height: auto !important; 
    padding: 6px 18px !important; 
    background: #ffffff !important; 
    border: 2.5px solid #000000 !important; 
    border-radius: 30px !important; 
    box-shadow: 3px 3px 0px #000000 !important; 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 10px auto !important;
    animation: m-pulse 0.8s infinite alternate !important; /* 保留舒适的外框呼吸动效 */
}

/* 隐藏原有圆点 */
.flex.items-center.justify-center.w-6.h-5 > div,
[class*="style_dot-flashing"] { 
    display: none !important; 
}

/* 渲染单行大字体真言，永不抖动 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: "如果鬼是成熟体，人是幼年，那人鬼是不是🐴拉🚛" !important; 
    font-size: 0.76rem !important; 
    font-weight: 900 !important; 
    color: #000000 !important;
    white-space: nowrap !important;
}

/* 底部输入长栏 */
#ai-chat-input {
    background-color: #ffffff !important; border: 3px solid #000000 !important; border-radius: 30px !important; color: #000000 !important; font-size: 0.86rem !important; box-shadow: inset 2.5px 2.5px 0px rgba(0, 0, 0, 0.15) !important;
}
#ai-chat-input:focus-within { box-shadow: 3px 3px 0px #000000, inset 2.5px 2.5px 0px rgba(0, 0, 0, 0.15) !important; }
#ai-chat-bottom-input { background: transparent !important; backdrop-filter: none !important; }

@keyframes m-pulse { 0% { transform: scale(0.97); } 100% { transform: scale(1.03); } }