/* =========================================================================
 * 【全局基础与漫画分镜细节】
 * 纯黑白高对比度、复古硬阴影、网格纸质感
 * =========================================================================
 */
/* 漫画风硬轮廓滚动条 */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-track {
    background: #ffffff !important;
    border-left: 2px solid #000000 !important;
}
::-webkit-scrollbar-thumb {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}

/* 漫画高亮选中文本（反相色） */
::selection {
    background: #000000 !important;
    color: #ffffff !important;
}

/* 漫画独白引用块 */
blockquote {
    margin: 0.8rem 0 !important;
    padding: 0.6rem 1rem !important;
    border: 2px dashed #000000 !important; /* 虚线框 */
    border-radius: 16px !important;
    background: #f5f5f5 !important;
    font-size: 0.85rem !important;
    color: #000000 !important;
    box-shadow: 3px 3px 0px #000000 !important;
}

/* 分隔线与粗体字（漫画拟声词质感） */
hr {
    border: none !important;
    border-top: 3px solid #000000 !important;
    margin: 1rem 0 !important;
}
strong, b {
    color: #000000 !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 0px #ffffff, -1px -1px 0px #ffffff !important;
}

/* =========================================================================
 * 【保护色：女性心声标签专属保护】
 * 确保在黑白漫画世界中，粉红心声文字具备最高特权与冲击力
 * =========================================================================
 */
p[style*="color: #e0125e;"], 
span[style*="color: #e0125e;"],
.story-rules p[style*="color: #e0125e;"] {
    color: #e0125e !important; /* 绝对锁定色值 */
    font-weight: 700 !important;
    font-style: italic !important; /* 斜体强调 */
    background: rgba(224, 18, 94, 0.05) !important; /* 极淡的底色衬托 */
    padding: 2px 6px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

/* =========================================================================
 * 【模块一：对话气泡与聊天区域】
 * 极致椭圆化，纯黑框白底，二次元分镜感
 * =========================================================================
 */
.group .bg-gray-100\/90, 
.group .bg-primary-500\/10 {
    background: #ffffff !important; /* 纯白漫画底 */
    border: 2.5px solid #000000 !important; /* 强硬黑框 */
    border-radius: 24px !important; /* 椭圆小框 */
    box-shadow: 4px 4px 0px #000000 !important; /* 经典2D平面黑阴影 */
    color: #000000 !important;
    padding: 12px 18px !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    transition: all 0.15s ease-in-out !important;
}

/* 悬停动效：模拟漫画按压下陷 */
.group .bg-gray-100\/90:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0px #000000 !important;
}

/* =========================================================================
 * 【模块二：底部输入框与容器】
 * =========================================================================
 */
#ai-chat-input {
    background-color: #ffffff !important;
    border: 2.5px solid #000000 !important;
    border-radius: 30px !important; /* 胶囊型 */
    color: #000000 !important;
    font-size: 0.85rem !important;
    padding: 10px 16px !important;
    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.1) !important;
}

#ai-chat-input:focus-within {
    box-shadow: 3px 3px 0px #000000, inset 2px 2px 0px rgba(0, 0, 0, 0.1) !important;
}

#ai-chat-bottom-input { 
    background: transparent !important; 
    backdrop-filter: none !important; 
}

/* =========================================================================
 * 【模块三：平台按钮组 (Mod/流式/回底部等)】
 * =========================================================================
 */
.flex.items-center.gap-2.pb-2 > button,
.MuiButtonBase-root.MuiButton-root.MuiButton-text {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 40px !important; /* 完美药丸椭圆 */
    font-weight: 900 !important;
    font-size: 0.75rem !important; 
    padding: 6px 14px !important; 
    box-shadow: 3px 3px 0px #000000 !important;
    transition: all 0.1s ease !important;
}

.flex.items-center.gap-2.pb-2 > button:hover,
.MuiButtonBase-root.MuiButton-root.MuiButton-text:hover {
    background: #000000 !important; /* 反转色 */
    color: #ffffff !important;
    transform: translate(3px, 3px) !important;
    box-shadow: 0px 0px 0px #000000 !important;
}

/* =========================================================================
 * 【模块四：核心状态栏与折叠框组】
 * =========================================================================
 */
.status-container {
    border: 2.5px solid #000000 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    margin: 12px 0 !important;
    overflow: hidden !important;
    box-shadow: 4px 4px 0px #000000 !important;
}

.status-container > summary, 
.status-summary {
    background: #eeeeee !important; /* 网格灰网底色 */
    border-bottom: 2.5px solid #000000 !important;
    padding: 8px 14px !important; 
    font-weight: 800 !important;
    font-size: 0.85rem !important; 
    cursor: pointer !important;
    list-style: none !important;
    color: #000000 !important;
}

.status-container > summary:hover, 
.status-summary:hover {
    background: #cccccc !important;
}

/* 漫画效果前缀 */
.status-container > summary::-webkit-details-marker { display: none !important; }
.status-container > summary::before {
    content: "💬" !important;
    display: inline-block !important;
    margin-right: 8px !important;
    transition: transform 0.2s ease !important;
}
.status-container[open] > summary::before {
    transform: scale(1.2) rotate(10deg) !important;
}

.status-content {
    padding: 10px 14px !important;
    background: #ffffff !important;
    font-size: 0.8rem !important;
    color: #000000 !important;
}

/* 子折叠块 */
.sub-status {
    border: 1.5px solid #000000 !important;
    border-radius: 16px !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

.sub-status summary {
    background: #f5f5f5 !important;
    border-bottom: 1.5px solid #000000 !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

/* 数值标签标签化 */
.value {
    border: 1px solid #000000 !important;
    display: inline-block !important;
    min-width: 60px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    font-size: 0.75rem !important;
    background: #eeeeee !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
}

/* =========================================================================
 * 【模块五：专属区 —— 世界状态栏】
 * =========================================================================
 */
details:has(summary:contains("世界状态")) {
    border: 2.5px solid #000000 !important;
    border-radius: 20px !important;
    box-shadow: 4px 4px 0px #000000 !important;
}

details:has(summary:contains("世界状态")) > summary {
    background: #000000 !important; /* 黑化标题栏 */
    color: #ffffff !important;      /* 白字 */
    padding: 8px 14px !important;
}

details:has(summary:contains("世界状态")) > summary::before {
    content: "👁️‍🗨️" !important;
}

details:has(summary:contains("世界状态")) p,
details:has(summary:contains("世界状态")) div {
    font-family: 'Consolas', monospace !important;
    color: #000000 !important;
    font-size: 0.78rem !important;
}

/* =========================================================================
 * 【模块六：专属区 —— 记忆区美化】
 * =========================================================================
 */
details:has(summary:contains("记忆区")) {
    border: 2px solid #000000 !important;
    border-radius: 20px !important;
}

details:has(summary:contains("记忆区")) > summary {
    background: #f5f5f5 !important;
    border-bottom: 2px dashed #000000 !important;
    color: #000000 !important;
}

details:has(summary:contains("记忆区")) > summary::before {
    content: "📜" !important;
}

/* =========================================================================
 * 【模块七：更新重构 —— 行动推荐（骰子随机流）】
 * =========================================================================
 */
details:has(summary:contains("行动推荐")) {
    border: 2.5px solid #000000 !important;
    border-radius: 20px !important;
    box-shadow: 4px 4px 0px #000000 !important;
}

details:has(summary:contains("行动推荐")) > summary {
    background: #ffffff !important;
    border-bottom: 2.5px solid #000000 !important;
    color: #000000 !important;
}

/* 换成骰子图标，契合绝对随机概率 */
details:has(summary:contains("行动推荐")) > summary::before {
    content: "🎲" !important;
    font-size: 0.9rem !important;
}

.details-content li {
    font-size: 0.8rem !important;
    color: #000000 !important;
    margin-bottom: 6px !important;
}

/* 漫画黑体序号 */
.details-content li::marker {
    color: #000000 !important;
    font-weight: 900 !important;
    font-size: 0.85rem !important;
}

/* =========================================================================
 * 【模块八：固件组件统一化】
 * =========================================================================
 */
.MuiStack-root.text-purple-500.mt-1 {
    background: #ffffff !important;
    border: 1.5px solid #000000 !important;
    border-radius: 20px !important;
    box-shadow: 2px 2px 0px #000000 !important;
}
.MuiStack-root p { color: #000000 !important; font-weight: 700 !important; }

#ai-model-selector .group {
    background: #ffffff !important;
    border: 1.5px solid #000000 !important;
    border-radius: 20px !important;
}
#ai-model-selector .truncate { color: #000000 !important; font-weight: 700 !important; }