/* ============================================================
   综漫日常融合世界 · 漫画风格CSS美化（融合加强版）
   设计哲学：黑白灰主调 + 角色专属对话色 + 漫画分镜格 + LINE聊天样式
   融合来源：1css.txt（主框架）+ CSS美化v2.0（LINE/表格/代码组件）
   更新：2026-08-18 · 新增世界信息面板 & 人际关系网络面板样式
   ============================================================ */

/* ==================== 一、全局基础 ==================== */

* {
    font-family: "Comic Sans MS", "Mochiy Pop P One", "Zen Dots", "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
    box-sizing: border-box;
}

body,
.grow.overflow-hidden {
    background: #f8f4ef !important;
    position: relative;
}

/* 网点纹理——三层叠加 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 10px 10px, rgba(0, 0, 0, 0.06) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 1;
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 20px 20px, rgba(0, 0, 0, 0.03) 3px, transparent 3px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

/* 斜线纹理——仅PC */
@media (min-width: 1024px) {
    .grow.overflow-hidden::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: repeating-linear-gradient(45deg,
                transparent,
                transparent 60px,
                rgba(0, 0, 0, 0.015) 60px,
                rgba(0, 0, 0, 0.015) 61px);
        pointer-events: none;
        z-index: 0;
    }
}

/* ==================== 二、侧边栏·漫画分镜格 ==================== */

.relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white {
    background: #fcf9f5 !important;
    border-right: 8px solid #0a0a0a !important;
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.08) !important;
    position: relative;
}

/* 四角L形角标 */
.relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white::before {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 40px;
    height: 40px;
    border-top: 8px solid #0a0a0a;
    border-right: 8px solid #0a0a0a;
    z-index: 3;
    background: transparent;
}
.relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: -6px;
    width: 40px;
    height: 40px;
    border-bottom: 8px solid #0a0a0a;
    border-left: 8px solid #0a0a0a;
    z-index: 3;
    background: transparent;
}

/* 侧边栏标题——漫画标题框 */
.text-zinc-800.text-xl.font-semibold {
    font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    background: #0a0a0a !important;
    color: #fcf9f5 !important;
    padding: 6px 18px !important;
    display: inline-block !important;
    letter-spacing: 2px !important;
    border: none !important;
    text-shadow: none !important;
    transform: skew(-4deg) !important;
}

/* ==================== 三、对话列表·漫画目录 ==================== */

.MuiStack-root.css-v6pit4,
.bg-gray-100.bg-gray-100 {
    background: #0a0a0a !important;
    border: 4px solid #0a0a0a !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.08) !important;
    position: relative;
    color: #fcf9f5 !important;
}

.MuiStack-root.css-v6pit4::before,
.bg-gray-100.bg-gray-100::before {
    content: "▶";
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    color: #e63946;
    font-size: 24px;
    font-weight: 900;
    animation: pulse-arrow 1.2s ease-in-out infinite;
}

@keyframes pulse-arrow {
    0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.6; }
}

.MuiStack-root.css-hffw0f {
    background: #fcf9f5 !important;
    border-bottom: 3px solid #d0c8c0 !important;
    transition: all 0.2s ease !important;
    padding: 8px 12px !important;
}

.MuiStack-root.css-hffw0f:hover {
    background: #fff5ee !important;
    border-left: 6px solid #e63946 !important;
    transform: translateX(6px) !important;
}

/* ==================== 四、对话气泡·核心美化 ==================== */

/* ----- 通用对话气泡基础样式 ----- */
.relative.inline-block.px-4.py-3.max-w-full.text-gray-900.bg-gray-100\/90,
.chat-answer-container .relative.inline-block {
    border: 5px solid #0a0a0a !important;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.06) !important;
    padding: 18px 22px !important;
    margin: 8px 4px 16px 4px !important;
    position: relative;
}

/* 对话框尾巴 */
.relative.inline-block.px-4.py-3.max-w-full.text-gray-900.bg-gray-100\/90::after {
    content: "";
    position: absolute;
    bottom: -18px;
    right: 16px;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 18px solid #0a0a0a;
}
.relative.inline-block.px-4.py-3.max-w-full.text-gray-900.bg-gray-100\/90::before {
    content: "";
    position: absolute;
    bottom: -11px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid #ffffff;
    z-index: 2;
}

.chat-answer-container .relative.inline-block::after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 18px solid #0a0a0a;
}
.chat-answer-container .relative.inline-block::before {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid #fcf9f5;
    z-index: 2;
}

/* ----- 用户消息（右侧）——白底 ----- */
.relative.inline-block.px-4.py-3.max-w-full.text-gray-900.bg-gray-100\/90 {
    background: #ffffff !important;
    border-radius: 4px 4px 4px 28px !important;
}

/* ----- AI消息（左侧）——米白底 ----- */
.chat-answer-container .relative.inline-block {
    background: #fcf9f5 !important;
    border-radius: 4px 4px 28px 4px !important;
}

/* ----- 对话内容文字样式 ----- */
.relative.inline-block.px-4.py-3.max-w-full.text-gray-900.bg-gray-100\/90,
.chat-answer-container .relative.inline-block {
    color: #0a0a0a !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
}

/* ==================== 五、对话角色专属配色 ==================== */

/*
 * 使用说明：
 * 在文风系统中，对话格式为：
 * <p style="color:角色配色;">"对话内容"</p>
 * 以下CSS针对不同的角色配色值自动添加额外装饰
 */

/* ---- GBC 团队 ---- */

/* 仁菜 · 红 #c0392b —— 倔强的火焰 */
p[style*="color:#c0392b"],
p[style*="color:#c0392b;"],
p[style*="color: #c0392b"] {
    border-left: 6px solid #c0392b !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
    position: relative;
}
p[style*="color:#c0392b"]::before,
p[style*="color:#c0392b;"]::before,
p[style*="color: #c0392b"]::before {
    content: "◆";
    color: #c0392b;
    margin-right: 6px;
    font-size: 12px;
}

/* 桃香 · 蓝 #2980b9 —— 沉静的海 */
p[style*="color:#2980b9"],
p[style*="color:#2980b9;"],
p[style*="color: #2980b9"] {
    border-left: 6px solid #2980b9 !important;
    padding-left: 12px !important;
    font-weight: 600 !important;
    opacity: 0.92;
}

/* 昴 · 紫 #8e44ad —— 温柔的犹豫 */
p[style*="color:#8e44ad"],
p[style*="color:#8e44ad;"],
p[style*="color: #8e44ad"] {
    border-left: 6px solid #8e44ad !important;
    padding-left: 12px !important;
    font-style: italic !important;
}

/* 智 · 橙 #e67e22 —— 尖锐的防御 */
p[style*="color:#e67e22"],
p[style*="color:#e67e22;"],
p[style*="color: #e67e22"] {
    border-left: 6px solid #e67e22 !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}
p[style*="color:#e67e22"]::after,
p[style*="color:#e67e22;"]::after,
p[style*="color: #e67e22"]::after {
    content: " ⚡";
    color: #e67e22;
    font-size: 12px;
}

/* RUPA · 绿 #2ecc71 —— 包容的锚 */
p[style*="color:#2ecc71"],
p[style*="color:#2ecc71;"],
p[style*="color: #2ecc71"] {
    border-left: 6px solid #2ecc71 !important;
    padding-left: 12px !important;
    font-weight: 500 !important;
}
p[style*="color:#2ecc71"]::before,
p[style*="color:#2ecc71;"]::before,
p[style*="color: #2ecc71"]::before {
    content: "☕ ";
    font-size: 14px;
}

/* ---- 孤独摇滚 ---- */

/* 波奇 · 粉 #e91e63 —— 社恐吉他 */
p[style*="color:#e91e63"],
p[style*="color:#e91e63;"],
p[style*="color: #e91e63"] {
    border-left: 6px solid #e91e63 !important;
    padding-left: 12px !important;
    font-weight: 600 !important;
    opacity: 0.85;
}
p[style*="color:#e91e63"]::before,
p[style*="color:#e91e63;"]::before,
p[style*="color: #e91e63"]::before {
    content: "✦";
    color: #e91e63;
    margin-right: 4px;
    font-size: 12px;
}

/* 虹夏 · 金黄 #f39c12 —— 元气队长 */
p[style*="color:#f39c12"],
p[style*="color:#f39c12;"],
p[style*="color: #f39c12"] {
    border-left: 6px solid #f39c12 !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
}
p[style*="color:#f39c12"]::after,
p[style*="color:#f39c12;"]::after,
p[style*="color: #f39c12"]::after {
    content: " ✨";
    font-size: 12px;
}

/* 凉 · 深灰 #34495e —— 冷静理性 */
p[style*="color:#34495e"],
p[style*="color:#34495e;"],
p[style*="color: #34495e"] {
    border-left: 6px solid #34495e !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

/* 喜多 · 红橙 #e74c3c —— 社交齿轮 */
p[style*="color:#e74c3c"],
p[style*="color:#e74c3c;"],
p[style*="color: #e74c3c"] {
    border-left: 6px solid #e74c3c !important;
    padding-left: 12px !important;
    font-weight: 600 !important;
}
p[style*="color:#e74c3c"]::before,
p[style*="color:#e74c3c;"]::before,
p[style*="color: #e74c3c"]::before {
    content: "♪ ";
    color: #e74c3c;
    font-size: 14px;
}

/* ---- MyGO!!!!! ---- */

/* 灯 · 青绿 #1abc9c —— 感性质朴 */
p[style*="color:#1abc9c"],
p[style*="color:#1abc9c;"],
p[style*="color: #1abc9c"] {
    border-left: 6px solid #1abc9c !important;
    padding-left: 12px !important;
    font-weight: 600 !important;
    opacity: 0.9;
}
p[style*="color:#1abc9c"]::before,
p[style*="color:#1abc9c;"]::before,
p[style*="color: #1abc9c"]::before {
    content: "✿";
    color: #1abc9c;
    margin-right: 4px;
    font-size: 14px;
}

/* 爱音 · 樱花粉 #fd79a8 —— 行动派 */
p[style*="color:#fd79a8"],
p[style*="color:#fd79a8;"],
p[style*="color: #fd79a8"] {
    border-left: 6px solid #fd79a8 !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
}
p[style*="color:#fd79a8"]::after,
p[style*="color:#fd79a8;"]::after,
p[style*="color: #fd79a8"]::after {
    content: " 🌸";
    font-size: 12px;
}

/* 立希 · 黑 #2d3436 —— 完美主义 */
p[style*="color:#2d3436"],
p[style*="color:#2d3436;"],
p[style*="color: #2d3436"] {
    border-left: 6px solid #2d3436 !important;
    padding-left: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
}

/* 素世 · 淡紫 #a29bfe —— 镜面微笑 */
p[style*="color:#a29bfe"],
p[style*="color:#a29bfe;"],
p[style*="color: #a29bfe"] {
    border-left: 6px solid #a29bfe !important;
    padding-left: 12px !important;
    font-style: italic !important;
    font-weight: 500 !important;
    opacity: 0.88;
}
p[style*="color:#a29bfe"]::before,
p[style*="color:#a29bfe;"]::before,
p[style*="color: #a29bfe"]::before {
    content: "☾ ";
    font-size: 12px;
}

/* 乐奈 · 奶油 #fdcb6e —— 自由如猫 */
p[style*="color:#fdcb6e"],
p[style*="color:#fdcb6e;"],
p[style*="color: #fdcb6e"] {
    border-left: 6px solid #fdcb6e !important;
    padding-left: 12px !important;
    font-weight: 600 !important;
}
p[style*="color:#fdcb6e"]::after,
p[style*="color:#fdcb6e;"]::after,
p[style*="color: #fdcb6e"]::after {
    content: " 🐱";
    font-size: 12px;
}

/* ---- 日常/支点 ---- */

/* 玉子 · 翡翠绿 #00b894 —— 商店街温暖 */
p[style*="color:#00b894"],
p[style*="color:#00b894;"],
p[style*="color: #00b894"] {
    border-left: 6px solid #00b894 !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
}
p[style*="color:#00b894"]::before,
p[style*="color:#00b894;"]::before,
p[style*="color: #00b894"]::before {
    content: "🍡 ";
    font-size: 14px;
}

/* 辉夜 · 贵族紫 #6c5ce7 —— 高岭之花 */
p[style*="color:#6c5ce7"],
p[style*="color:#6c5ce7;"],
p[style*="color: #6c5ce7"] {
    border-left: 6px solid #6c5ce7 !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}
p[style*="color:#6c5ce7"]::before,
p[style*="color:#6c5ce7;"]::before,
p[style*="color: #6c5ce7"]::before {
    content: "✦";
    color: #6c5ce7;
    margin-right: 6px;
    font-size: 14px;
}

/* 白银 · 深蓝 #0984e3 —— 平民天才 */
p[style*="color:#0984e3"],
p[style*="color:#0984e3;"],
p[style*="color: #0984e3"] {
    border-left: 6px solid #0984e3 !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
}
p[style*="color:#0984e3"]::after,
p[style*="color:#0984e3;"]::after,
p[style*="color: #0984e3"]::after {
    content: " 📖";
    font-size: 12px;
}

/* 藤原 · 粉桃 #fab1a0 —— 天然破局 */
p[style*="color:#fab1a0"],
p[style*="color:#fab1a0;"],
p[style*="color: #fab1a0"] {
    border-left: 6px solid #fab1a0 !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
}
p[style*="color:#fab1a0"]::before,
p[style*="color:#fab1a0;"]::before,
p[style*="color: #fab1a0"]::before {
    content: "🌸 ";
    font-size: 14px;
}

/* 石上 · 灰 #636e72 —— 吐槽役 */
p[style*="color:#636e72"],
p[style*="color:#636e72;"],
p[style*="color: #636e72"] {
    border-left: 6px solid #636e72 !important;
    padding-left: 12px !important;
    font-weight: 600 !important;
    opacity: 0.8 !important;
}
p[style*="color:#636e72"]::before,
p[style*="color:#636e72;"]::before,
p[style*="color: #636e72"]::before {
    content: "… ";
    font-size: 14px;
}

/* ---- 彩蛋角色 ---- */

/* 六花 · 中二粉 #fd79a8 —— 邪王真眼 */
p[style*="color:#fd79a8"][style*="六花"],
p[style*="color:#fd79a8;"][style*="六花"],
p[style*="color: #fd79a8"][style*="六花"] {
    border-left: 6px solid #fd79a8 !important;
    padding-left: 12px !important;
    font-weight: 900 !important;
    transform: skew(-2deg) !important;
}
p[style*="color:#fd79a8"][style*="六花"]::before,
p[style*="color:#fd79a8;"][style*="六花"]::before,
p[style*="color: #fd79a8"][style*="六花"]::before {
    content: "🔮 ";
    font-size: 14px;
}

/* 大河 · 红棕 #e17055 —— 掌中老虎 */
p[style*="color:#e17055"],
p[style*="color:#e17055;"],
p[style*="color: #e17055"] {
    border-left: 6px solid #e17055 !important;
    padding-left: 12px !important;
    font-weight: 900 !important;
}
p[style*="color:#e17055"]::before,
p[style*="color:#e17055;"]::before,
p[style*="color: #e17055"]::before {
    content: "🐯 ";
    font-size: 14px;
}

/* 八幡 · 墨 #2d3436 —— 孤高哲学 */
p[style*="color:#2d3436"][style*="八幡"],
p[style*="color:#2d3436;"][style*="八幡"],
p[style*="color: #2d3436"][style*="八幡"] {
    border-left: 6px solid #2d3436 !important;
    padding-left: 12px !important;
    font-weight: 900 !important;
}
p[style*="color:#2d3436"][style*="八幡"]::after,
p[style*="color:#2d3436;"][style*="八幡"]::after,
p[style*="color: #2d3436"][style*="八幡"]::after {
    content: " 🎭";
    font-size: 12px;
}

/* ==================== 六、LINE聊天界面样式 ==================== */
/* 融合自 CSS美化v2.0 */

.line-chat {
    background: #8ab8e6 !important;
    border-radius: 16px !important;
    padding: 0 !important;
    margin: 1em 0 !important;
    overflow: hidden !important;
    font-family: "Helvetica Neue", "Hiragino Sans", "Microsoft YaHei", sans-serif !important;
    border: 5px solid #0a0a0a !important;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.06) !important;
}

.line-header {
    background: linear-gradient(180deg, #3a4a5c 0%, #2c3e50 100%) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #fff !important;
    border-bottom: 4px solid #0a0a0a !important;
}

.line-title {
    font-weight: bold !important;
    font-size: 1.1em !important;
}

.line-fold {
    font-size: 0.85em !important;
    opacity: 0.8 !important;
    cursor: pointer !important;
}

.line-messages {
    padding: 16px !important;
    min-height: 200px !important;
    background: #8ab8e6 !important;
}

.line-msg {
    display: flex !important;
    margin-bottom: 16px !important;
    align-items: flex-start !important;
}

.line-msg.npc {
    justify-content: flex-start !important;
}

.line-msg.user {
    justify-content: flex-end !important;
}

.line-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 0.8em !important;
    flex-shrink: 0 !important;
    margin: 0 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    overflow: hidden !important;
    text-align: center !important;
    line-height: 1.1 !important;
    padding: 4px !important;
    border: 3px solid #0a0a0a !important;
}

.line-msg.npc .line-avatar {
    order: 1 !important;
}

.line-msg.user .line-avatar {
    order: 2 !important;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}

.line-bubble {
    max-width: 70% !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    position: relative !important;
    word-wrap: break-word !important;
    border: 4px solid #0a0a0a !important;
}

.npc-bubble {
    background: #fff !important;
    color: #333 !important;
    border-radius: 4px 16px 16px 16px !important;
    order: 2 !important;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.06) !important;
}

.user-bubble {
    background: linear-gradient(135deg, #8fe66b 0%, #6fd94a 100%) !important;
    color: #333 !important;
    border-radius: 16px 4px 16px 16px !important;
    order: 1 !important;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.06) !important;
}

.line-name {
    font-size: 0.8em !important;
    color: #666 !important;
    margin: 0 0 4px 0 !important;
    font-weight: bold !important;
}

.line-bubble p {
    margin: 4px 0 !important;
    line-height: 1.5 !important;
    color: #333 !important;
}

.line-sticker {
    font-size: 0.9em !important;
    color: #888 !important;
    font-style: italic !important;
    margin-top: 6px !important;
}

.line-thought {
    font-size: 0.8em !important;
    color: #999 !important;
    font-style: italic !important;
    margin-top: 4px !important;
}

/* ==================== 七、AI消息角色名标签 ==================== */

.chat-answer-container .relative.inline-block .text-sm.font-medium,
.chat-answer-container .relative.inline-block [class*="font-medium"] {
    background: #e63946 !important;
    color: #ffffff !important;
    padding: 2px 16px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    display: inline-block !important;
    border: 3px solid #0a0a0a !important;
    border-bottom: none !important;
    margin-bottom: 6px !important;
    transform: skew(-6deg) !important;
    font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
}

/* ==================== 八、发送按钮·漫画必杀技 ==================== */

#ai-send-button {
    background: #e63946 !important;
    border: 5px solid #0a0a0a !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.12) !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.08s ease !important;
    transform: rotate(-2deg) !important;
    position: relative;
}

#ai-send-button::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: repeating-linear-gradient(45deg,
            #0a0a0a 0px,
            #0a0a0a 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.3;
}

#ai-send-button:hover {
    transform: translate(4px, 4px) rotate(-2deg) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12) !important;
    background: #d62839 !important;
}

#ai-send-button:active {
    transform: translate(8px, 8px) rotate(-2deg) !important;
    box-shadow: 0px 0px 0 rgba(0, 0, 0, 0) !important;
}

/* ==================== 九、输入框·漫画分镜格 ==================== */

#ai-chat-input {
    background: #ffffff !important;
    border: 5px solid #0a0a0a !important;
    border-radius: 0 !important;
    color: #0a0a0a !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 14px 18px !important;
    box-shadow: inset 6px 6px 0 rgba(0, 0, 0, 0.02) !important;
}

#ai-chat-input::placeholder {
    color: #aaa !important;
    font-style: italic;
}

.p-\[5\.5px\].max-h-\[150px\].bg-white {
    background: #fcf9f5 !important;
    border-top: 8px solid #0a0a0a !important;
    border-bottom: none !important;
    padding: 14px 18px !important;
    box-shadow: 0 -8px 0 rgba(0, 0, 0, 0.02) !important;
}

/* ==================== 十、顶部导航栏 ==================== */

.sticky.w-full.top-0 {
    background: #fcf9f5 !important;
    border-bottom: 8px solid #0a0a0a !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    padding: 6px 0 !important;
    position: relative;
}

.sticky.w-full.top-0::after {
    content: "◆ ◇ ◆ ◇ ◆ ◇ ◆";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    letter-spacing: 10px;
    color: #e63946;
    background: #fcf9f5;
    padding: 0 20px;
    font-weight: 900;
}

.sticky.w-full.top-0::before {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(90deg,
            #0a0a0a 0px,
            #0a0a0a 12px,
            transparent 12px,
            transparent 20px);
    opacity: 0.15;
}

/* ==================== 十一、通用按钮 ==================== */

.MuiButton-outlined {
    background: #ffffff !important;
    border: 5px solid #0a0a0a !important;
    border-radius: 0 !important;
    color: #0a0a0a !important;
    font-weight: 900 !important;
    font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.06) !important;
    transition: all 0.08s ease !important;
    text-transform: none !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
}

.MuiButton-outlined:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06) !important;
}

.MuiButton-contained {
    background: #0a0a0a !important;
    border: 5px solid #0a0a0a !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1) !important;
    transition: all 0.08s ease !important;
    text-transform: none !important;
    padding: 8px 20px !important;
    letter-spacing: 1px !important;
}

.MuiButton-contained:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ==================== 十二、滚动条·漫画网点条纹 ==================== */

::-webkit-scrollbar {
    width: 18px;
    height: 18px;
}

::-webkit-scrollbar-track {
    background: #f5f0eb;
    border-left: 3px solid #d0c8c0;
}

::-webkit-scrollbar-thumb {
    background: repeating-linear-gradient(45deg,
            #0a0a0a 0px,
            #0a0a0a 5px,
            #fcf9f5 5px,
            #fcf9f5 10px);
    border: 3px solid #0a0a0a;
    border-radius: 0;
    box-shadow: inset 0 0 0 2px #fcf9f5;
}

::-webkit-scrollbar-thumb:hover {
    background: repeating-linear-gradient(45deg,
            #e63946 0px,
            #e63946 5px,
            #fcf9f5 5px,
            #fcf9f5 10px);
}

/* ==================== 十三、折叠面板·漫画情报框 ==================== */

details {
    background: #fcf9f5 !important;
    border: 6px solid #0a0a0a !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    margin: 16px 0 !important;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.04) !important;
    position: relative;
}

details::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    width: 24px;
    height: 24px;
    border-top: 6px solid #e63946;
    border-left: 6px solid #e63946;
    z-index: 2;
}
details::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-bottom: 6px solid #e63946;
    border-right: 6px solid #e63946;
    z-index: 2;
}

summary {
    font-family: "Zen Dots", "Comic Sans MS", "Noto Sans SC", sans-serif !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    color: #0a0a0a !important;
    cursor: pointer !important;
    padding: 10px 6px !important;
    border-bottom: 4px dashed #d0c8c0 !important;
    letter-spacing: 1px !important;
}

summary:hover {
    color: #e63946 !important;
}

/* 折叠面板内的表格和状态网格 */
details table,
details .sc-stat-grid {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 4px solid #0a0a0a !important;
    font-size: 14px !important;
}

details table td,
details table th,
details .sc-stat-grid .sc-stat-row {
    border: 3px solid #0a0a0a !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
}

details table th {
    background: #0a0a0a !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* ==================== 十四、Markdown渲染 ==================== */

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    font-family: "Zen Dots", "Comic Sans MS", "Noto Sans SC", sans-serif !important;
    font-weight: 900 !important;
    border-bottom: 6px solid #0a0a0a !important;
    padding-bottom: 6px !important;
    display: inline-block !important;
    letter-spacing: 2px !important;
    background: #fcf9f5 !important;
    padding: 0 16px 6px 0 !important;
}

.markdown-body h1 {
    font-size: 32px !important;
    transform: skew(-3deg) !important;
}
.markdown-body h2 {
    font-size: 26px !important;
    border-bottom-color: #e63946 !important;
}
.markdown-body h3 {
    font-size: 20px !important;
    border-bottom-style: dotted !important;
}

.markdown-body ul {
    list-style: none !important;
    padding-left: 28px !important;
}
.markdown-body ul li::before {
    content: "◆" !important;
    color: #e63946 !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    margin-right: 10px !important;
    display: inline-block !important;
}
.markdown-body ul li {
    border-bottom: 2px dotted #e8e0d8 !important;
    padding: 4px 0 !important;
}

.markdown-body ol {
    list-style: none !important;
    padding-left: 28px !important;
    counter-reset: manga-counter !important;
}
.markdown-body ol li {
    counter-increment: manga-counter !important;
    border-bottom: 2px dotted #e8e0d8 !important;
    padding: 4px 0 !important;
}
.markdown-body ol li::before {
    content: counter(manga-counter) ". " !important;
    color: #e63946 !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    margin-right: 8px !important;
    display: inline-block !important;
}

.markdown-body blockquote {
    border-left: 8px solid #0a0a0a !important;
    background: #fcf9f5 !important;
    padding: 16px 24px !important;
    margin: 16px 0 !important;
    font-style: italic !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.04) !important;
    position: relative;
}
.markdown-body blockquote::before {
    content: "『";
    font-size: 32px;
    color: #e63946;
    font-weight: 900;
}
.markdown-body blockquote::after {
    content: "』";
    font-size: 32px;
    color: #e63946;
    font-weight: 900;
}

/* 代码块 —— 融合漫画风格 + v2.0细节 */
.markdown-body pre {
    background: #fcf9f5 !important;
    border: 5px solid #0a0a0a !important;
    border-radius: 0 !important;
    padding: 20px !important;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.04) !important;
    overflow-x: auto !important;
}

.markdown-body code {
    background: #f5f0eb !important;
    border: 3px solid #0a0a0a !important;
    border-radius: 0 !important;
    padding: 2px 12px !important;
    font-family: "Courier New", monospace !important;
    font-size: 0.9em !important;
    color: #0a0a0a !important;
    font-weight: 700 !important;
}

pre code {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* 表格 —— 融合漫画风格 + v2.0条纹 */
.markdown-body table {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 6px solid #0a0a0a !important;
}
.markdown-body table th {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 3px solid #0a0a0a !important;
    padding: 10px 14px !important;
    font-weight: 900 !important;
    font-family: "Zen Dots", sans-serif !important;
    letter-spacing: 1px !important;
}
.markdown-body table td {
    border: 3px solid #0a0a0a !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
}
.markdown-body table tr:nth-child(even) td {
    background: #f8f4ef !important;
}

/* ==================== 十五、链接·漫画撕纸风格 ==================== */

a {
    color: #0a0a0a !important;
    text-decoration: none !important;
    border-bottom: 4px solid #e63946 !important;
    font-weight: 900 !important;
    transition: all 0.1s ease !important;
    padding: 0 2px !important;
    position: relative;
}

a::after {
    content: "▶";
    font-size: 10px;
    color: #e63946;
    margin-left: 4px;
}

a:hover {
    background: #e63946 !important;
    color: #ffffff !important;
    border-bottom: 4px solid #0a0a0a !important;
}
a:hover::after {
    color: #ffffff !important;
}

/* ==================== 十六、拟声词·漫画爆炸效果 ==================== */

@media (min-width: 1024px) {
    body .manga-onomatopoeia-1 {
        content: "💥 ドドドド 💥";
        position: fixed;
        bottom: 40px;
        left: 30px;
        font-size: 28px;
        font-weight: 900;
        color: rgba(230, 57, 70, 0.04);
        letter-spacing: 16px;
        font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
        transform: rotate(-6deg) scale(1.2);
        pointer-events: none;
        z-index: 0;
        animation: onomatopoeia-float 8s ease-in-out infinite;
    }

    body .manga-onomatopoeia-2 {
        content: "⚡ バキッ！ ⚡";
        position: fixed;
        top: 100px;
        right: 30px;
        font-size: 24px;
        font-weight: 900;
        color: rgba(0, 0, 0, 0.03);
        letter-spacing: 12px;
        font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
        transform: rotate(8deg);
        pointer-events: none;
        z-index: 0;
        animation: onomatopoeia-float 6s ease-in-out infinite reverse;
    }

    body .manga-onomatopoeia-3 {
        content: "✨ キラキラ ✨";
        position: fixed;
        top: 50%;
        right: 50px;
        font-size: 20px;
        font-weight: 900;
        color: rgba(230, 57, 70, 0.03);
        letter-spacing: 8px;
        font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
        transform: rotate(-12deg);
        pointer-events: none;
        z-index: 0;
        animation: onomatopoeia-float 10s ease-in-out infinite 2s;
    }

    @keyframes onomatopoeia-float {
        0%, 100% { transform: rotate(var(--rot, -6deg)) translateY(0); }
        50% { transform: rotate(var(--rot, -6deg)) translateY(-20px); }
    }

    body .manga-onomatopoeia-1 { --rot: -6deg; }
    body .manga-onomatopoeia-2 { --rot: 8deg; }
    body .manga-onomatopoeia-3 { --rot: -12deg; }

    .grow.overflow-hidden::after {
        content: "▼ つづく →";
        position: fixed;
        bottom: 12px;
        right: 24px;
        font-size: 14px;
        font-weight: 900;
        color: rgba(0, 0, 0, 0.06);
        font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
        letter-spacing: 4px;
        pointer-events: none;
        z-index: 2;
    }
}

/* ==================== 十七、角色面板·漫画角色卡 ==================== */

.sc-panel {
    background: #fcf9f5 !important;
    border: 6px solid #0a0a0a !important;
    border-radius: 0 !important;
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.04) !important;
    padding: 10px 14px !important;
    margin: 14px 0 !important;
    position: relative;
}

.sc-panel summary {
    font-family: "Zen Dots", "Comic Sans MS", "Noto Sans SC", sans-serif !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    letter-spacing: 2px !important;
}

.sc-dex-item {
    border: 5px solid #0a0a0a !important;
    background: #ffffff !important;
    padding: 14px 18px !important;
    margin: 10px 0 !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.04) !important;
    position: relative;
}

.sc-dex-name {
    font-family: "Zen Dots", "Comic Sans MS", "Noto Sans SC", sans-serif !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    color: #0a0a0a !important;
    border-bottom: 6px solid #e63946 !important;
    padding-bottom: 6px !important;
    margin-bottom: 10px !important;
    letter-spacing: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.sc-dex-name::before {
    content: "◆";
    color: #e63946;
    font-size: 18px;
}

.sc-dex-line {
    padding: 4px 0 !important;
    border-bottom: 2px dotted #e8e0d8 !important;
    font-size: 15px !important;
}
.sc-dex-line b {
    color: #e63946 !important;
    font-weight: 900 !important;
    margin-right: 6px !important;
}

/* ==================== 十八、世界信息面板（新增） ==================== */

.sc-world-panel .sc-world-grid {
    display: block !important;
}

.sc-world-panel .sc-stat-block {
    background: #ffffff !important;
    border: 4px solid #0a0a0a !important;
    padding: 12px 16px !important;
    margin: 6px 0 !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.04) !important;
}

.sc-world-panel .sc-stat-h {
    font-family: "Zen Dots", "Comic Sans MS", "Noto Sans SC", sans-serif !important;
    font-weight: 900 !important;
    font-size: 17px !important;
    color: #0a0a0a !important;
    border-bottom: 4px solid #e63946 !important;
    padding-bottom: 6px !important;
    margin-bottom: 10px !important;
    letter-spacing: 1px !important;
}

.sc-world-panel .sc-stat-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 6px 4px !important;
    border-bottom: 2px dotted #e8e0d8 !important;
    font-size: 14px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}
.sc-world-panel .sc-stat-row:last-child {
    border-bottom: none !important;
}

.sc-world-panel .sc-stat-row span:first-child {
    font-weight: 700 !important;
    color: #555 !important;
    min-width: 80px !important;
}
.sc-world-panel .sc-stat-row span:last-child {
    font-weight: 500 !important;
    color: #0a0a0a !important;
    text-align: right !important;
    flex: 1 !important;
}

/* 状态标签：开启/关闭指示 */
.sc-status-tag {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    padding: 0 12px !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 3px solid #0a0a0a !important;
    font-family: "Zen Dots", sans-serif !important;
    letter-spacing: 1px !important;
}
.sc-status-tag.active {
    background: #2ecc71 !important;
    color: #0a0a0a !important;
}
.sc-status-tag.inactive {
    background: #e63946 !important;
    color: #ffffff !important;
}

/* ==================== 十九、人际关系网络面板（新增） ==================== */

.sc-relation-panel .sc-relation-graph {
    background: #ffffff !important;
    border: 4px solid #0a0a0a !important;
    padding: 12px 16px !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.04) !important;
}

.sc-rel-item {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding: 6px 4px !important;
    border-bottom: 2px dotted #e8e0d8 !important;
    font-size: 14px !important;
}
.sc-rel-item:last-child {
    border-bottom: none !important;
}

.sc-rel-you {
    font-weight: 900 !important;
    color: #0a0a0a !important;
    background: #f5f0eb !important;
    padding: 0 10px !important;
    border: 3px solid #0a0a0a !important;
    font-family: "Zen Dots", sans-serif !important;
    font-size: 13px !important;
}

.sc-rel-arrow {
    color: #e63946 !important;
    font-weight: 900 !important;
    font-size: 18px !important;
}

.sc-rel-npc {
    font-weight: 700 !important;
    color: #0a0a0a !important;
    background: #fcf9f5 !important;
    padding: 0 10px !important;
    border: 3px solid #0a0a0a !important;
    font-family: "Zen Dots", sans-serif !important;
    font-size: 13px !important;
}

.sc-rel-label {
    display: inline-block !important;
    background: #e63946 !important;
    color: #ffffff !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    border: 3px solid #0a0a0a !important;
    font-family: "Zen Dots", sans-serif !important;
}

.sc-rel-desc {
    font-size: 13px !important;
    color: #666 !important;
    font-style: italic !important;
    flex: 1 !important;
    min-width: 80px !important;
}

.sc-rel-empty {
    color: #aaa !important;
    font-style: italic !important;
    padding: 12px 0 !important;
    text-align: center !important;
    font-size: 15px !important;
}

/* ==================== 二十、行动选项·漫画分镜 ==================== */

.sm-actions,
.sm-panel {
    background: #fcf9f5 !important;
    border: 6px solid #0a0a0a !important;
    border-radius: 0 !important;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.04) !important;
    padding: 14px 18px !important;
    margin: 14px 0 !important;
}

.sm-panel-h {
    font-family: "Zen Dots", "Comic Sans MS", "Noto Sans SC", sans-serif !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    border-bottom: 6px solid #0a0a0a !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    letter-spacing: 2px !important;
}

.sm-actions pre {
    font-family: "Comic Sans MS", "Mochiy Pop P One", "Noto Sans SC", monospace !important;
    font-size: 16px !important;
    line-height: 2.6 !important;
    color: #0a0a0a !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.sm-actions pre .sm-num,
.sm-actions pre .option-num {
    display: inline-block;
    background: #0a0a0a;
    color: #ffffff;
    padding: 0 14px;
    margin-right: 10px;
    font-weight: 900;
    font-family: "Zen Dots", sans-serif !important;
    font-size: 14px !important;
}

/* ==================== 二十一、时间/日期标签 ==================== */

.sc-seg-h {
    background: #0a0a0a !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    font-family: "Zen Dots", "Comic Sans MS", "Noto Sans SC", sans-serif !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    letter-spacing: 2px !important;
    border: none !important;
    display: inline-block !important;
    margin-bottom: 14px !important;
    transform: skew(-4deg) !important;
}

.sc-seg-h .sc-weather {
    background: #e63946 !important;
    color: #ffffff !important;
    padding: 0 14px !important;
    margin-left: 10px !important;
    transform: skew(4deg) !important;
}

/* ==================== 二十二、事件卡片 ==================== */

.sc-event {
    border: 5px solid #0a0a0a !important;
    background: #ffffff !important;
    padding: 14px 18px !important;
    margin: 12px 0 !important;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.04) !important;
    position: relative;
}

.sc-event {
    counter-reset: event-page 0;
}
.sc-event:first-of-type {
    counter-reset: event-page 1;
}
.sc-event::before {
    content: "P." counter(event-page);
    counter-increment: event-page;
    position: absolute;
    top: -14px;
    left: -6px;
    background: #e63946;
    color: #ffffff;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
    font-family: "Zen Dots", sans-serif;
    border: 3px solid #0a0a0a;
    letter-spacing: 1px;
}

.sc-event .sc-ev-hd {
    border-bottom: 4px dashed #d0c8c0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    font-weight: 900 !important;
}

.sc-event .sc-ev-subj {
    font-size: 18px !important;
    color: #0a0a0a !important;
    font-family: "Zen Dots", "Comic Sans MS", sans-serif !important;
    letter-spacing: 1px !important;
}

.sc-event .sc-ev-time {
    background: #0a0a0a !important;
    color: #ffffff !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    float: right !important;
    font-family: "Zen Dots", sans-serif !important;
}

.sc-ev-gains .sc-gain {
    display: inline-block;
    background: #f5f0eb !important;
    border: 3px solid #0a0a0a !important;
    padding: 2px 14px !important;
    margin: 4px 4px 0 0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}
.sc-ev-gains .sc-gain.positive {
    border-color: #e63946 !important;
    background: #fff5f0 !important;
}
.sc-ev-gains .sc-gain.positive::before {
    content: "⚡";
    margin-right: 4px;
}

/* ==================== 二十三、头像美化 ==================== */

#customized-question-avatar,
#customized-answer-avatar {
    border: 4px solid #0a0a0a !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.06) !important;
}

/* ==================== 二十四、响应式适配 ==================== */

@media (max-width: 768px) {
    details, .sc-panel, .sm-actions, .sc-event {
        border-width: 4px !important;
        box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.04) !important;
        padding: 8px 10px !important;
    }

    .relative.inline-block.px-4.py-3.max-w-full.text-gray-900.bg-gray-100\/90,
    .chat-answer-container .relative.inline-block {
        padding: 12px 14px !important;
        border-width: 4px !important;
        border-radius: 2px 2px 2px 16px !important;
    }
    .chat-answer-container .relative.inline-block {
        border-radius: 2px 2px 16px 2px !important;
    }

    /* 手机端：对话框装饰简化 */
    .relative.inline-block.px-4.py-3.max-w-full.text-gray-900.bg-gray-100\/90::before,
    .relative.inline-block.px-4.py-3.max-w-full.text-gray-900.bg-gray-100\/90::after,
    .chat-answer-container .relative.inline-block::before,
    .chat-answer-container .relative.inline-block::after {
        display: none !important;
    }

    /* 手机端：角色专属边框保留但变细 */
    p[style*="color:"] {
        border-left-width: 4px !important;
        padding-left: 8px !important;
    }

    /* 手机端：隐藏拟声词和装饰 */
    .manga-onomatopoeia-1,
    .manga-onomatopoeia-2,
    .manga-onomatopoeia-3,
    .grow.overflow-hidden::after {
        display: none !important;
    }

    .relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white::before,
    .relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white::after {
        display: none !important;
    }

    .sticky.w-full.top-0::after,
    .sticky.w-full.top-0::before {
        display: none !important;
    }

    /* LINE聊天手机适配 */
    .line-chat {
        border-width: 4px !important;
        border-radius: 12px !important;
    }
    .line-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.6em !important;
        border-width: 2px !important;
    }
    .line-bubble {
        padding: 8px 12px !important;
        border-width: 3px !important;
        max-width: 80% !important;
    }
    .line-messages {
        padding: 10px !important;
        min-height: 120px !important;
    }

    #ai-send-button {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
        box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12) !important;
    }
    #ai-send-button:hover {
        transform: translate(3px, 3px) !important;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12) !important;
    }

    .markdown-body table,
    details table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    .sm-actions pre {
        font-size: 14px !important;
        line-height: 2.2 !important;
    }

    .markdown-body h1 { font-size: 24px !important; }
    .markdown-body h2 { font-size: 20px !important; }

    .sc-dex-name { font-size: 18px !important; }

    .sc-event::before {
        font-size: 10px !important;
        top: -12px !important;
        left: -4px !important;
        padding: 0 8px !important;
    }

    /* 手机端：世界信息和人际关系面板精简 */
    .sc-world-panel .sc-stat-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    .sc-world-panel .sc-stat-row span:last-child {
        text-align: left !important;
    }

    .sc-rel-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 8px 4px !important;
    }
    .sc-rel-desc {
        padding-left: 8px !important;
        border-left: 3px solid #e8e0d8 !important;
    }
}

/* ============================================================
   彩蛋：黑白反转悬停（仅PC）
   ============================================================ */

@media (min-width: 1024px) {
    .relative.overflow-auto.h-full.min-h-\[500px\].min-w-\[240px\].bg-white .text-zinc-800.text-xl.font-semibold:hover {
        background: #e63946 !important;
        color: #fcf9f5 !important;
        transform: skew(-4deg) scale(1.05) !important;
        transition: all 0.2s ease !important;
    }
}