/* ==========================================================================
           1. CSS 变量与基础重置 (Design System Foundation)
           ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
    overscroll-behavior-y: none;
}

:root {
    /* ==========================================================================
               CSS 全局样式参考手册 (Global Style Handbook)
               - 仅建议修改颜色/字体/阴影/圆角/动画等“视觉项”
               - 避免修改核心布局锁定项（position / z-index / width / height / padding / margin 等）
               ========================================================================== */

    --view-padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));

    /* 天空蓝卡通主题 (Sky Blue Cartoon Theme) */
    --theme-sky-50: #e0f4ff;
    --theme-sky-100: #cfeeff;
    --theme-sky-200: #bde6ff;
    --theme-sky-300: #a6dcff;
    --theme-sky-400: #87ceeb;
    --theme-sky-500: #4aa3df;
    --theme-ink: #0a2c5c;
    --theme-ink-soft: rgba(10, 44, 92, 0.75);
    --theme-cloud: rgba(255, 255, 255, 0.85);
    --theme-border: rgba(33, 150, 243, 0.35);
    --theme-shadow: rgba(66, 165, 245, 0.25);
    --theme-heart-red: #ff6b6b;

    /* 15. 加载动画配置 (AI Loader System)
       - 适用范围：角色设定/生成等“AI 等待中”场景的 ❤ 跳动加载动画（见 `.heart-loading`）
       - 仅建议修改视觉项；不要改动 `.heart-loading` / `@keyframes heartBeat` 等结构性选择器

       颜色 (Color & Glow)
       --ai-loader-color:       主色/填充色
       --ai-loader-shadow:      发光/投影

       形状 (Shape & Layout)
       --ai-loader-shape:       单个图形字符（默认 ❤，也可替换为 '●' 等）
       --ai-loader-gap:         多个图形之间间距

       大小 (Size & Scale)
       --ai-loader-size:        单个图形字号（决定视觉大小）
       --ai-loader-scale-min:   动画缩放最小值
       --ai-loader-scale-max:   动画缩放最大值

       动画 (Animation)
       --ai-loader-duration:    心跳周期
       --ai-loader-opacity-min: 动画透明度最小值
       --ai-loader-opacity-max: 动画透明度最大值
    */
    --ai-loader-color: var(--theme-heart-red);
    --ai-loader-shape: '❤';
    --ai-loader-size: 1.5rem;
    --ai-loader-gap: 10px;
    --ai-loader-shadow: 0 0 10px rgba(255, 107, 107, 0.4);
    --ai-loader-duration: 1.2s;
    --ai-loader-scale-min: 0.8;
    --ai-loader-scale-max: 1.3;
    --ai-loader-opacity-min: 0.6;
    --ai-loader-opacity-max: 1;

    /* 1. 界面设计系统 (Interface Design System) */
    --hue-primary: 210;
    --hue-mystery: 270;
    --hue-cyber: 190;
    --hue-danger: 0;
    --hue-success: 140;
    --hue-warning: 40;

    --c-bg-deep: #e3f2fd;
    --c-bg-panel: rgba(255, 255, 255, 0.7);
    --c-accent: var(--theme-sky-500);
    --c-accent-glow: rgba(74, 163, 223, 0.3);
    --c-secondary: var(--theme-sky-400);
    --c-text-main: var(--theme-ink);
    --c-text-dim: var(--theme-ink-soft);
    --c-border: var(--theme-border);

    /* 尺寸 */
    --nav-h: 70px;
    --head-h: 60px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;

    /* 效果 */
    --glass-blur: blur(12px);
    --webkit-glass-blur: blur(12px);
    --shadow-float: 0 15px 35px var(--theme-shadow);
    --anim-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* 组件颜色变量 (Component Colors) */
    --c-inventory-start: #6c5ce7;
    --c-inventory-end: #a29bfe;
    --c-social-start: #00b894;
    --c-social-end: #55efc4;
    --c-history-start: #0984e3;
    --c-history-end: #74b9ff;
    /* 标签文字颜色 */
    --panel-tag-radius: 15px;
    /* 标签圆角 */

    /* 8. 稀有度颜色 (Rarity) */
    --c-common: #b2bec3;
    --c-rare: #0984e3;
    --c-epic: #a29bfe;
    --c-legend: #fdcb6e;
    --c-success: #00b894;
    --c-warning: #f39c12;
    --c-danger: #ff4b5c;
    --c-info: #3498db;
    --c-special: #9b59b6;

    /* 9. 状态条颜色 (Status Bars) - 支持世界观动态驱动 */
    --status-label-color: var(--c-text-main);
    --status-val-color: var(--c-accent);
    --status-bar-bg: rgba(0, 0, 0, 0.05);
    --status-bar-fill: var(--c-accent);
    --status-font-family: var(--ui-font-body);

    --color-health: var(--c-success);
    --color-mood: #e17055;
    --color-prestige: var(--c-legend);
    --color-beauty: #fd79a8;
    --color-beauty-end: #e84393;
    --color-female: #ff7675;
    --color-male: #74b9ff;

    /* 10. 背包与物品 (Inventory & Items) */
    --item-common-border: #636e72;
    --item-rare-border: #0984e3;
    --item-rare-shadow: rgba(9, 132, 227, 0.4);
    --item-epic-border: #a29bfe;
    --item-epic-shadow: rgba(162, 155, 254, 0.5);
    --item-legend-border: #fdcb6e;
    --item-legend-shadow: rgba(253, 203, 110, 0.5);
    --item-legend-bg: linear-gradient(135deg, rgba(253, 203, 110, 0.1), rgba(225, 112, 85, 0.1));

    /* 11. 面板底部功能按钮 (Profile Action Buttons) */
    --btn-inventory-bg: linear-gradient(135deg, #6c5ce7, #a29bfe);
    --btn-inventory-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
    --btn-history-bg: linear-gradient(135deg, #0984e3, #74b9ff);
    --btn-history-shadow: 0 4px 15px rgba(9, 132, 227, 0.3);
    --btn-social-bg: linear-gradient(135deg, #00b894, #55efc4);
    --btn-social-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);

    /* 12. 特效与特殊块 (Special FX & Blocks) */
    --producer-glow-bg: rgba(0, 0, 0, 0.4);
    --producer-glow-color: #ffffff;
    --producer-glow-border: rgba(160, 140, 230, 0.3);
    --producer-glow-shadow: 0 0 15px rgba(100, 100, 255, 0.1);
    --producer-glow-text-shadow: 0 0 5px rgba(160, 140, 230, 0.8);

    /* 自定义光标 */
    --cursor-default: auto;
    --cursor-pointer: pointer;
    --cursor-text: text;

    /* 战斗操作按钮 */
    --btn-attack-bg: linear-gradient(135deg, #e74c3c, #c0392b);
    --btn-attack-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
    --btn-defend-bg: linear-gradient(135deg, #3498db, #2980b9);
    --btn-defend-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
    --btn-skill-bg: linear-gradient(135deg, #9b59b6, #8e44ad);
    --btn-skill-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
    --btn-rest-bg: linear-gradient(135deg, #1abc9c, #16a085);
    --btn-rest-shadow: 0 4px 15px rgba(26, 188, 156, 0.4);
    --btn-trade-bg: linear-gradient(135deg, #f39c12, #e67e22);
    --btn-trade-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
    --btn-leave-bg: linear-gradient(135deg, #95a5a6, #7f8c8d);

    /* 13. 对话标注系统 (Dialogue System) - 样式由动态世界观控制 */
    --dialogue-npc-bg: transparent;
    --dialogue-npc-border: var(--c-accent);
    --dialogue-player-bg: transparent;
    --dialogue-player-border: var(--c-secondary);
    --dialogue-sys-bg: transparent;
    --dialogue-sys-border: var(--c-info);
    --dialogue-narration-bg: transparent;
    --dialogue-narration-border: var(--c-text-dim);

    /* 14. 线下与线上聊天气泡 (Chat Bubble Details) */
    --chat-bubble-self-font: var(--ui-font-body);
    --chat-bubble-npc-font: var(--ui-font-body);
    --chat-bubble-self-style: normal;
    --chat-bubble-npc-style: normal;
    --chat-msg-loading-color: #888;
    --chat-online-bg: rgba(20, 20, 20, 0.6);
    --chat-bubble-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

    /* 15. 设置与存档按钮 (Config & Save Buttons) */
    /* [样式装饰] - 允许用户通过全局自定义 CSS 修改颜色、圆角和发光 */
    --config-btn-font: var(--ui-font-body);
    --config-btn-bg: var(--c-accent);
    --config-btn-color: #ffffff;
    --config-btn-weight: 600;
    --config-btn-radius: 20px;
    --config-btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --config-btn-hover-transform: translateY(-2px);

    --config-btn-secondary-bg: rgba(255, 255, 255, 0.05);
    --config-btn-secondary-border: 1px solid var(--c-border);
    --config-btn-secondary-color: var(--c-text-main);
    --config-btn-secondary-hover-bg: var(--c-accent);
    --config-btn-secondary-hover-color: #fff;

    /* [布局锁定] - 按钮尺寸与边距等布局属性，不包含在用户自定义模板中 */
    --config-btn-padding: 10px 18px;
    --config-btn-min-width: 80px;
    --config-btn-size: 0.85rem;
    --config-btn-secondary-min-width: 40px;
    --chat-input-height: 40px;
    --chat-send-btn-size: 40px;
    --interaction-padding: 15px;
    --profile-actions-padding: 10px 15px;
    --profile-actions-gap: 10px;
    --action-btn-padding: 12px;
    --action-btn-radius: 8px;
    --action-btn-size: 0.9rem;
    --offline-bubble-radius: 12px;
    --offline-bubble-padding: 10px 15px;
    --dialogue-modal-max-height: 80vh;
    --dialogue-modal-padding: 10px;
    --dialogue-modal-radius: 12px;
    --card-config-margin: 0 0 10px 0;
    --card-config-padding: 10px;
    --card-config-radius: 12px;
    --empty-state-padding: 20px;

    /* ==========================================================================
               16. 新增内部布局变量 (New Internal Layout Variables)
               * 这些变量控制核心布局，已被提取但默认不暴露给普通用户更改
               ========================================================================== */
    --scrollbar-width: 4px;
    --scrollbar-radius: 2px;
    --view-padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));

    --tactics-btn-size: 44px;
    --tactics-btn-icon-size: 1.1rem;
    --send-btn-size: 48px;
    --send-btn-icon-size: 1.2rem;

    --input-padding: 12px 16px;
    --input-font-size: 1rem;

    --dialogue-header-padding: 10px 15px;
    --dialogue-header-bg: rgba(0, 0, 0, 0.2);
    --dialogue-title-size: 0.95rem;

    --card-padding: 15px;
    --card-margin-bottom: 10px;
    --card-bg-gradient: linear-gradient(145deg, rgba(30, 30, 45, 0.8), rgba(20, 20, 30, 0.9));

    --modal-width: 90%;
    --modal-max-width: 400px;
    --modal-padding: 20px;
    --modal-radius: 16px;
    --modal-border: var(--c-border);

    --notification-top: 80px;
    --notification-right: 20px;
    --notification-padding: 15px 20px;
    --notification-radius: 8px;
    --notification-bg: rgba(20, 20, 35, 0.95);

    --form-input-padding: 10px;
    --btn-full-padding: 12px;
    --btn-full-radius: 8px;

    /* ==========================================================================
               17. 组件细节变量 (Component Details - Added for Refactor)
               ========================================================================== */
    --map-bg: #000000;
    --map-node-bg: rgba(255, 255, 255, 0.1);
    --map-node-border: var(--c-text-dim);
    --map-line-color: rgba(255, 255, 255, 0.1);
    --map-node-completed-bg: var(--c-success);
    --map-node-completed-border: var(--c-success);

    --npc-row-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent);
    --npc-row-border-left: var(--c-secondary);

    --item-slot-bg: rgba(0, 0, 0, 0.3);
    --item-slot-hover-bg: rgba(255, 255, 255, 0.05);
    --item-qty-color: #aaaaaa;
    --item-icon-size: 1.5rem;

    --char-overview-bg: rgba(255, 255, 255, 0.03);
    --char-avatar-bg: #222222;
    --char-avatar-color: #555555;

    --btn-secondary-bg: rgba(255, 255, 255, 0.05);
    --btn-secondary-border: rgba(255, 255, 255, 0.1);
    --btn-secondary-color: var(--c-text-dim);
    --btn-font-family: inherit;

    /* 16. NPC 档案与详情 (NPC Archive & Details) */
    --archive-name-color: var(--c-accent);
    --archive-title-color: #da70d6;
    --archive-attr-color: var(--c-secondary);
    --archive-header-size: 0.95rem;
    --archive-header-margin: 15px;
    --archive-desc-color: var(--c-info);
    --archive-avatar-size: 80px;
    --archive-avatar-font: 2.5rem;
    --archive-header-bg: rgba(255, 255, 255, 0.05);

    /* 17. 履历与社会关系 (History & Social Network) */
    --history-font-size: 0.85rem;
    --history-line-height: 1.6;
    --history-text-color: var(--ui-color-body);
    --history-item-bg: rgba(255, 255, 255, 0.03);
    --history-item-border-left: 2px solid var(--c-accent);
    --history-item-margin: 8px 0;
    --history-item-padding: 8px 12px;
    --history-item-radius: 4px;

    --net-item-bg: rgba(255, 255, 255, 0.03);
    --net-item-radius: 8px;
    --net-item-border-left: 3px solid var(--c-accent);
    --net-item-margin: 10px 0;
    --net-item-padding: 12px;
    --npc-relation-name-color: var(--c-accent);
    --npc-relation-name-weight: bold;
    --npc-relation-desc-color: var(--ui-color-body);
    --npc-relation-desc-size: 0.9rem;

    --social-item-bg: rgba(255, 255, 255, 0.05);
    --social-item-radius: 8px;
    --social-name-color: var(--ui-color-title);
    --social-name-weight: bold;
    --social-desc-color: var(--ui-color-label);
    --social-desc-size: 0.85rem;

    /* 18. 背包与物品系统 (Inventory & Items) */
    --item-name-size: 0.7rem;
    --item-name-color: var(--ui-color-body);
    --player-inventory-bg: var(--modal-bg);
    --item-slot-radius: 8px;

    /* 19. 系统设置卡片 (System Settings Cards) */
    --settings-card-bg: var(--card-bg-gradient);
    --settings-card-border: var(--c-border);
    --settings-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --settings-label-color: var(--ui-color-label);
    --settings-input-bg: rgba(0, 0, 0, 0.2);

    /* 20. 按钮全字库支持 (Button Typography & Styles) */
    --config-btn-font: var(--ui-font-body);
    --config-btn-style: normal;
    --func-btn-font: var(--ui-font-body);
    --func-btn-style: normal;
    --npc-detail-btn-font: var(--ui-font-body);
    --npc-detail-btn-style: normal;

    /* 21. 头像全自定义 (Avatar Details) */
    --chat-avatar-size: 40px;
    --chat-avatar-radius: 50%;
    --chat-avatar-font: 1rem;
    --chat-avatar-weight: bold;
    --chat-avatar-color: #ffffff;
    --chat-avatar-npc-bg: linear-gradient(135deg, #1abc9c, #16a085);
    --chat-avatar-player-bg: linear-gradient(135deg, var(--c-accent), #8e44ad);
    --chat-avatar-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* 22. 消息气泡全自定义 (Bubble Details) */
    --msg-user-font: var(--ui-font-body);
    --msg-user-style: normal;
    --chat-bubble-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --chat-bubble-radius: 12px;
    --offline-npc-color: var(--ui-color-body);
    --offline-npc-font: var(--ui-font-body);
    --offline-npc-style: normal;

    /* 23. [新增] 布局锁定与高级自定义 (Advanced Customization & Layout Locks) */
    /* 禁止修改部分 (不包含在模板中) */
    --layout-modal-max-width: 400px;
    --layout-modal-padding: 20px;
    --layout-btn-padding: 10px 18px;

    /* 允许修改部分 (添加至模板) */
    --npc-stat-item-bg: rgba(0, 0, 0, 0.2);
    --npc-stat-item-label: var(--c-text-dim);
    --npc-stat-item-val: var(--c-text-main);
    --npc-stat-item-border: transparent;

    --home-selection-btn-bg: rgba(255, 255, 255, 0.05);
    --home-selection-btn-border: 1px solid rgba(255, 255, 255, 0.1);
    --home-selection-btn-color: var(--c-text-main);

    --input-send-btn-bg: var(--c-accent);
    --input-send-btn-color: white;
    --input-options-btn-bg: var(--c-input-bg);
    --input-options-btn-color: var(--c-accent);

    --ai-loading-bubble-bg: rgba(20, 20, 30, 0.7);
    --ai-loading-bubble-color: var(--c-text-main);
    --ai-loading-bubble-opacity: 0.7;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* 现代浏览器支持动态视口高度 */
    overflow: hidden;
    background-color: var(--c-bg-deep);
    background-image:
        radial-gradient(circle at 10% 20%, var(--c-bg-glow-1) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, var(--c-bg-glow-2) 0%, transparent 40%);
    color: var(--ui-color-body);
    font-family: var(--ui-font-body);
    /* 适配刘海屏 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: 0;
    /* 允许用户更换光标 */
    cursor: var(--cursor-default);
}

/* 统一全局交互光标，一键修改全局应用 */
a,
button,
select,
.nav-btn,
.rpg-btn,
.action-btn,
.item-slot,
.map-node,
.fa-times,
.fa-question-circle,
.msg-checkbox,
.chat-msg-row,
.msg-user-row,
.ai-action,
[onclick] {
    cursor: var(--cursor-pointer) !important;
    pointer-events: auto !important;
    /* 确保交互元素可被点击 */
}

/* 维护文本输入光标 */
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
.cmd-input {
    cursor: var(--cursor-text) !important;
}

/* 滚动条隐藏但保留功能 */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: var(--scrollbar-radius);
}

/* ==========================================================================
           2. 布局架构 (App Structure)
           ========================================================================== */
#app-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* 顶部状态栏 */
.header-bar {
    height: var(--head-h);
    padding: 0 var(--sp-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--header-bg);
    /* backdrop-filter: var(--glass-blur);  Optimized for performance */
    border-bottom: 1px solid var(--c-border);
    z-index: 50;
}

.app-title {
    font-family: var(--ui-font-title);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: var(--ui-color-title);
    text-shadow: 0 0 10px var(--c-accent-glow);
}

/* 视图容器 */
.main-viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.view-section {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: var(--view-padding-bottom);
    /* Space for input + nav */
    animation: fadeIn 0.4s ease;
}

.view-section.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   24. 高级对话标注与增强样式 (Advanced Dialogue Styles)
   ========================================================================== */

/* 1. 侧边强调块 - 颜色随世界观变化 */
.msg-card-accent {
    background: var(--world-card-bg, rgba(255, 255, 255, 0.05));
    border-left: 4px solid var(--world-accent, var(--c-accent));
    padding: 15px;
    margin: 10px 0;
    border-radius: 4px;
    position: relative;
    color: var(--world-text, var(--c-text-main));
}

/* 2. 虚线标注块 - 颜色随世界观变化 */
.msg-card-dashed {
    border: 1px dashed var(--world-accent-alpha, rgba(255, 255, 255, 0.3));
    background: var(--world-card-bg-dim, rgba(0, 0, 0, 0.1));
    padding: 15px;
    margin: 12px 0;
    border-radius: 8px;
    position: relative;
    color: var(--world-text, var(--c-text-main));
}

/* 3. 带标签卡片 - 颜色随世界观变化 */
.msg-card-status {
    border: 1px solid var(--world-accent-alpha, rgba(255, 255, 255, 0.15));
    background: var(--world-card-bg, rgba(15, 15, 15, 0.8));
    padding: 20px 15px 15px;
    margin: 20px 0 10px;
    border-radius: 6px;
    position: relative;
    color: var(--world-text, var(--c-text-main));
}

.msg-card-status::before {
    content: attr(data-label);
    position: absolute;
    top: -12px;
    left: 15px;
    background: var(--world-accent, var(--c-danger));
    color: #fff;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 2px;
}

/* 4. 全局动态发光警告卡片 */
.msg-card-warning {
    background: var(--world-card-bg-gradient, linear-gradient(145deg, rgba(30, 0, 0, 0.9), rgba(10, 0, 0, 0.95)));
    border: 1px solid var(--world-accent, #600000);
    box-shadow: 0 0 20px var(--world-accent-glow, rgba(255, 0, 0, 0.2));
    padding: 20px;
    margin: 15px 0;
    border-radius: 12px;
    text-align: center;
    color: var(--world-text, var(--c-text-main));
}

.msg-card-warning .warning-title {
    color: var(--world-accent, #ff4b5c);
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

/* 辅助类：动态高亮文字 */
.text-world-accent {
    color: var(--world-accent) !important;
    font-weight: bold;
}

.nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--nav-bar-bg);
    /* backdrop-filter: var(--glass-blur); Optimized for performance */
    border-top: 1px solid var(--c-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

.map-fab-stack {
    position: absolute;
    right: 20px;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1100;
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--c-text-dim);
    font-size: 0.75rem;
    transition: 0.3s;
    transition: 0.3s;
    cursor: var(--cursor-pointer);
    padding: 10px;
}

.nav-btn i {
    font-size: 1.4rem;
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.nav-btn.active {
    color: var(--c-accent);
}

.nav-btn.active i {
    transform: translateY(-4px) scale(1.1);
    text-shadow: 0 0 15px var(--c-accent-glow);
}

/* ==========================================================================
           3. 聊天流与交互区 (Chat & Input)
           ========================================================================== */
#chat-stream {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    /* 性能优化：为长列表滚动创建合成层 */
    transform: translateZ(0);
    will-change: scroll-position;
}

/* AI 消息包装器：主页 HTML 渲染的核心容器 */
.ai-msg-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0;
    position: relative !important;
    overflow: hidden !important;
    /* 强制裁剪所有溢出内容 */
    contain: content;
    /* 物理隔离渲染，防止内部布局影响外部 */
    background: transparent;
    display: block !important;
    content-visibility: auto;
    contain-intrinsic-size: 50px;
}

/* 适配移动端：防止内容拉伸屏幕 */
.ai-html-sandbox-host {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    position: relative !important;
}

/* 原有的 AI 生成 HTML 安全容器（作为兼容层保留） */
.ai-html-sandbox {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    overflow: visible !important;
    border-radius: 18px;
    height: auto !important;
    min-height: min-content !important;
    position: relative !important;
}

/* 彻底解决手机端变形与文字重叠 */
.ai-html-sandbox,
.ai-html-sandbox * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    /* 禁止非正常的强制不换行 */
}

/* 适配手机屏幕阅读，禁止左右滑动 */
.ai-html-sandbox .game-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    width: 100%;
}

/* 针对垂直文字排版的修复 */
.ai-html-sandbox [style*="writing-mode: vertical-rl"],
.ai-html-sandbox [style*="writing-mode:vertical-rl"] {
    writing-mode: horizontal-tb !important;
    /* 手机端强制转回水平，防止长内容溢出 */
}

.ai-html-sandbox img,
.ai-html-sandbox svg,
.ai-html-sandbox video,
.ai-html-sandbox canvas {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

/* 强制清除所有可能导致重叠的绝对定位 */
.ai-html-sandbox [style*="position:absolute"],
.ai-html-sandbox [style*="position: absolute"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 10px;
}

/* 底部输入区（抽屉）- 默认收起，不遮挡主页 */
.interaction-area {
    position: fixed;
    left: 0;
    width: 100%;
    background: var(--c-bg-deep);
    padding: var(--sp-md);
    padding-bottom: calc(var(--sp-md) + env(safe-area-inset-bottom));
    z-index: 1100;
    transform: translateY(110%);
    transition: transform 0.35s var(--anim-pop);
    opacity: 0;
    pointer-events: none;
    bottom: 0;
}

.interaction-area.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.view-section:not(#view-home):not(#view-map) .interaction-area {
    transform: translateY(150%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 主页互动栏悬浮小按钮（固定在底部导航栏“设置”上方） */
.interaction-fab {
    position: fixed;
    right: 14px;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid var(--c-border);
    background: var(--fab-bg, #81d4fa);
    color: var(--fab-color, #0a2c5c);
    box-shadow: var(--fab-shadow, 0 8px 20px rgba(129, 212, 250, 0.4));
    font-family: var(--fab-font, var(--ui-font-body));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1101;
    cursor: var(--cursor-pointer);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.interaction-fab:active {
    transform: scale(0.96);
}

.interaction-fab.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 抽屉内关闭按钮：与发送按钮并排，避免与外部悬浮按钮重叠 */
.close-btn {
    width: var(--tactics-btn-size);
    height: var(--tactics-btn-size);
    min-width: var(--tactics-btn-size);
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: rgba(255, 255, 255, 0.9);
    color: var(--c-text-main);
    font-size: 1.2rem;
    cursor: var(--cursor-pointer);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    backdrop-filter: blur(5px);
}

.close-btn:hover {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 0 15px var(--c-accent-glow);
}

#view-map .interaction-area {
    display: none !important;
    pointer-events: none !important;
}

/* 修复地图页底部遮挡，使其填充到导航栏 */
#view-map {
    height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom)) !important;
    padding-bottom: 0 !important;
}

#view-map #map-viewport {
    height: 100% !important;
}

/* 选项抽屉 */
.choice-drawer {
    max-height: 0;
    overflow-y: auto;
    transition: 0.4s var(--anim-pop);
    background: var(--choice-drawer-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    margin: 0 0 10px 0;
}

.choice-drawer.open {
    max-height: 250px;
    padding: 10px;
}

.input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
}

/* 战术决策按钮 - 移到输入框左侧 */
.tactics-btn {
    width: var(--tactics-btn-size);
    height: var(--tactics-btn-size);
    min-width: var(--tactics-btn-size);
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--tactics-btn-bg, var(--c-input-bg));
    color: var(--c-accent);
    font-size: var(--tactics-btn-icon-size);
    cursor: var(--cursor-pointer);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    backdrop-filter: blur(5px);
}

.tactics-btn:hover {
    background: var(--c-accent);
    color: var(--tactics-btn-active-color);
    box-shadow: 0 0 15px var(--c-accent-glow);
    transform: scale(1.05);
}

.tactics-btn.active {
    background: var(--tactics-btn-active-bg);
    color: var(--tactics-btn-active-color);
    box-shadow: 0 0 20px var(--c-accent-glow);
}

.cmd-input {
    flex: 1;
    background: var(--cmd-input-bg, var(--c-input-bg));
    border: 1px solid var(--c-border);
    color: var(--cmd-input-color, var(--ui-color-body));
    padding: var(--input-padding);
    border-radius: var(--cmd-input-radius, 25px);
    font-size: var(--input-font-size);
    backdrop-filter: blur(5px);
    transition: 0.3s;
    font-family: var(--ui-font-body);
    resize: vertical;
    min-height: 48px;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
}

.cmd-input:focus {
    background: var(--c-input-bg-focus);
    border-color: var(--c-accent);
    box-shadow: 0 0 15px var(--c-accent-glow);
}

.send-btn {
    width: var(--send-btn-size);
    height: var(--send-btn-size);
    border-radius: var(--send-btn-radius, 50%);
    border: var(--send-btn-border, none);
    background: var(--send-btn-bg);
    color: var(--send-btn-color);
    font-size: var(--send-btn-icon-size);
    box-shadow: var(--send-btn-shadow);
    cursor: var(--cursor-pointer);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.send-btn:hover {
    transform: translateY(-2px);
    background: var(--send-btn-hover-bg, var(--c-accent));
    color: var(--send-btn-hover-color, #fff);
    box-shadow: 0 0 15px var(--c-accent-glow);
}

.toggle-btn {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-input-bg);
    padding: 2px 12px;
    border-radius: 10px 10px 0 0;
    font-size: 0.8rem;
    cursor: var(--cursor-pointer);
    backdrop-filter: blur(5px);
}

/* 选中模式下显示勾选框 */
.select-mode .msg-checkbox {
    display: block !important;
    opacity: 1 !important;
    margin-right: 5px;
}

/* 选中模式面板优化 */
.selection-action-panel {
    display: none;
    padding: 8px 12px;
    background: var(--selection-panel-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    border-radius: 0;
    animation: slideInDown 0.3s ease;
}

.selection-action-panel.main-panel {
    position: sticky;
    top: 0;
}

.selection-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--c-accent);
    font-weight: bold;
}

.selection-buttons {
    display: flex;
    gap: 6px;
}

.mini-btn,
.selection-panel-btn {
    background: var(--selection-btn-bg);
    border: var(--selection-btn-border);
    color: var(--selection-btn-color);
    padding: 4px 10px;
    border-radius: var(--selection-btn-radius, 6px);
    font-size: 0.75rem;
    font-family: var(--selection-btn-font);
    cursor: var(--cursor-pointer) !important;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mini-btn:hover,
.selection-panel-btn:hover {
    background: var(--selection-btn-hover-bg);
    color: white;
    border-color: var(--c-accent);
}

.mini-btn.danger:hover,
.selection-panel-btn.danger:hover {
    background: var(--c-danger);
    border-color: var(--c-danger);
}

/* 主页剧情选择按钮专用样式 */
.home-choice-btn {
    background: var(--home-choice-btn-bg);
    color: var(--home-choice-btn-color);
    font-family: var(--home-choice-btn-font);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    margin-bottom: 5px;
    text-align: left;
    width: 100%;
    padding: 10px 15px;
    border-radius: 8px;
}

.home-choice-btn:hover {
    background: var(--home-choice-btn-hover-bg);
    color: var(--home-choice-btn-hover-color);
    transform: translateX(5px);
    box-shadow: 0 0 15px var(--c-accent-glow);
}

.btn-home-select-toggle {
    background: var(--home-selection-btn-bg);
    color: var(--home-selection-btn-color);
}

/* 对话框头部优化 */
.dialogue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dialogue-header-padding);
    background: var(--dialogue-header-bg);
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid var(--dialogue-header-border, rgba(255, 255, 255, 0.05));
    box-sizing: border-box;
}

.dialogue-title {
    font-size: var(--dialogue-title-size);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.npc-name {
    color: var(--npc-name-color, var(--c-accent));
}

/* 仅修改图一(NPC列表/人物档案)与图二(NPC详情)的 NPC 姓名颜色，禁止影响主页/私聊对话 */
/* 图一：修正 ID 为 #npc-list。针对列表姓名的内联样式进行强制覆盖 */
#npc-list .npc-row div[style*="color:var(--c-accent)"],
#npc-list .npc-row div[style*="font-weight:bold"],
/* 图二：NPC详情弹窗标题里的姓名 */
#npc-detail .rpg-title span,
/* 图二：NPC详情“基础信息-姓名”字段值 */
#npc-detail .rpg-stat-val[style*="var(--archive-name-color)"] {
    color: var(--c-npc-name-purple) !important;
}

.dialogue-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ui-button-small {
    background: var(--ui-button-small-bg);
    border: var(--ui-button-small-border);
    color: var(--ui-button-small-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: var(--cursor-pointer);
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ui-button-small:hover,
.ui-button-small.active {
    background: var(--c-accent);
    color: white;
    border-color: var(--c-accent);
    box-shadow: 0 0 10px var(--c-accent-glow);
}

.mode-switch-group {
    display: flex;
    background: var(--mode-switch-bg);
    padding: 2px;
    border-radius: 8px;
    border: var(--mode-switch-border);
}

.switch-btn {
    background: transparent;
    border: none;
    color: var(--c-text-dim);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-size: 0.75rem;
    cursor: var(--cursor-pointer);
    transition: 0.2s;
}

.switch-btn.active {
    background: var(--c-accent);
    color: white;
}

.close-btn {
    background: transparent;
    border: none;
    color: var(--c-text-dim);
    padding: 5px;
    font-size: 1.1rem;
    cursor: var(--cursor-pointer);
    transition: 0.2s;
}

.close-btn:hover {
    color: var(--c-text-main);
    transform: scale(1.1);
}

/* 旁白文本块 */
.narration-block {
    background: var(--offline-narration-bg);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0;
    color: var(--ui-color-body);
    font-style: italic;
    border-left: 3px solid var(--dialogue-narration-border);
    font-size: 0.9rem;
    line-height: 1.6;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.4s ease-out;
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 默认隐藏勾选框 */
.msg-checkbox {
    display: none;
    accent-color: var(--c-accent);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: var(--cursor-pointer);
}

/* 选中模式下，点击整行可勾选 */
.select-mode .chat-msg-row,
.select-mode .msg-user,
.select-mode .rpg-card {
    cursor: var(--cursor-pointer);
}

/* ==========================================================================
            4. AI 生成的高级 HTML 卡片样式 (AI Design System)
            * 重要：这部分CSS是专门为了让AI在生成HTML时调用的
            ========================================================================== */

/* 基础容器 */
.rpg-card {
    background: var(--card-bg-gradient);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--card-padding);
    margin-bottom: var(--card-margin-bottom);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--c-accent);
    animation: slideIn 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 多种风格卡片（仅作用于 AI 消息卡片） */
.rpg-card.ai-msg-skin {
    border: 1px solid var(--ai-border, var(--c-border));
    border-radius: var(--ai-radius-md, var(--radius-md));
    border-left: 3px solid var(--ai-accent, var(--c-accent));
    box-shadow: 0 0 30px var(--ai-accent-glow, var(--c-accent-glow)), 0 4px 20px rgba(0, 0, 0, 0.3);
    background-image: var(--ai-grain-a), var(--ai-grain-b);
}

/* 5 个基础风格（保留） */
.rpg-card.ai-msg-skin.fantasy {
    border-left-color: #9b59b6;
    background: linear-gradient(145deg, rgba(155, 89, 182, 0.18), rgba(142, 68, 173, 0.12));
}

.rpg-card.ai-msg-skin.scifi {
    border-left-color: #3498db;
    background: linear-gradient(145deg, rgba(52, 152, 219, 0.18), rgba(41, 128, 185, 0.12));
}

.rpg-card.ai-msg-skin.horror {
    border-left-color: #e74c3c;
    background: linear-gradient(145deg, rgba(231, 76, 60, 0.18), rgba(192, 57, 43, 0.12));
}

.rpg-card.ai-msg-skin.wuxia {
    border-left-color: #f39c12;
    background: linear-gradient(145deg, rgba(243, 156, 18, 0.18), rgba(211, 84, 0, 0.12));
}

.rpg-card.ai-msg-skin.modern {
    border-left-color: #1abc9c;
    background: linear-gradient(145deg, rgba(26, 188, 156, 0.18), rgba(22, 160, 133, 0.12));
}

/* 补齐：neo / retro / minimal / lux / noir（风格名与视觉差异对齐 + 光效细节） */
.rpg-card.ai-msg-skin.neo {
    border-left-color: #00d4ff;
    background: linear-gradient(145deg, rgba(0, 212, 255, 0.22), rgba(120, 0, 255, 0.12));
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.12), 0 0 32px rgba(0, 212, 255, 0.18), 0 10px 28px rgba(0, 0, 0, 0.28);
}

.rpg-card.ai-msg-skin.retro {
    border-left-color: #ffcc00;
    background: linear-gradient(145deg, rgba(255, 92, 141, 0.20), rgba(255, 204, 0, 0.10));
    box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.10), 0 0 26px rgba(255, 92, 141, 0.14), 0 10px 28px rgba(0, 0, 0, 0.28);
}

.rpg-card.ai-msg-skin.minimal {
    border-left-color: rgba(255, 255, 255, 0.35);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 22px rgba(0, 0, 0, 0.22);
}

.rpg-card.ai-msg-skin.lux {
    border-left-color: #d4af37;
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.18), rgba(255, 255, 255, 0.045));
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.10), 0 0 28px rgba(212, 175, 55, 0.10), 0 10px 30px rgba(0, 0, 0, 0.30);
}

.rpg-card.ai-msg-skin.noir {
    border-left-color: rgba(255, 255, 255, 0.20);
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.32), rgba(20, 20, 26, 0.18));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.40);
}

/* 200+ 扩展渐变底色（style-1 ~ style-200） */
.rpg-card.ai-msg-skin.style-1 {
    border-left-color: #ff6b6b;
    background: linear-gradient(145deg, rgba(255, 107, 107, .18), rgba(255, 159, 67, .10));
}

.rpg-card.ai-msg-skin.style-2 {
    border-left-color: #ff9ff3;
    background: linear-gradient(145deg, rgba(255, 159, 243, .18), rgba(72, 219, 251, .08));
}

.rpg-card.ai-msg-skin.style-3 {
    border-left-color: #48dbfb;
    background: linear-gradient(145deg, rgba(72, 219, 251, .16), rgba(29, 209, 161, .10));
}

.rpg-card.ai-msg-skin.style-4 {
    border-left-color: #1dd1a1;
    background: linear-gradient(145deg, rgba(29, 209, 161, .16), rgba(16, 172, 132, .10));
}

.rpg-card.ai-msg-skin.style-5 {
    border-left-color: #5f27cd;
    background: linear-gradient(145deg, rgba(95, 39, 205, .16), rgba(52, 31, 151, .10));
}

.rpg-card.ai-msg-skin.style-6 {
    border-left-color: #54a0ff;
    background: linear-gradient(145deg, rgba(84, 160, 255, .16), rgba(46, 134, 222, .10));
}

.rpg-card.ai-msg-skin.style-7 {
    border-left-color: #00d2d3;
    background: linear-gradient(145deg, rgba(0, 210, 211, .16), rgba(1, 163, 164, .10));
}

.rpg-card.ai-msg-skin.style-8 {
    border-left-color: #feca57;
    background: linear-gradient(145deg, rgba(254, 202, 87, .16), rgba(255, 159, 67, .10));
}

.rpg-card.ai-msg-skin.style-9 {
    border-left-color: #ff793f;
    background: linear-gradient(145deg, rgba(255, 121, 63, .16), rgba(255, 82, 82, .10));
}

.rpg-card.ai-msg-skin.style-10 {
    border-left-color: #34ace0;
    background: linear-gradient(145deg, rgba(52, 172, 224, .16), rgba(33, 140, 116, .10));
}

.rpg-card.ai-msg-skin.style-11 {
    border-left-color: #33d9b2;
    background: linear-gradient(145deg, rgba(51, 217, 178, .16), rgba(47, 53, 66, .06));
}

.rpg-card.ai-msg-skin.style-12 {
    border-left-color: #ffb142;
    background: linear-gradient(145deg, rgba(255, 177, 66, .16), rgba(255, 82, 82, .10));
}

.rpg-card.ai-msg-skin.style-13 {
    border-left-color: #2c2c54;
    background: linear-gradient(145deg, rgba(44, 44, 84, .16), rgba(64, 64, 122, .10));
}

.rpg-card.ai-msg-skin.style-14 {
    border-left-color: #706fd3;
    background: linear-gradient(145deg, rgba(112, 111, 211, .16), rgba(71, 71, 135, .10));
}

.rpg-card.ai-msg-skin.style-15 {
    border-left-color: #474787;
    background: linear-gradient(145deg, rgba(71, 71, 135, .16), rgba(112, 111, 211, .08));
}

.rpg-card.ai-msg-skin.style-16 {
    border-left-color: #ffda79;
    background: linear-gradient(145deg, rgba(255, 218, 121, .16), rgba(255, 94, 87, .10));
}

.rpg-card.ai-msg-skin.style-17 {
    border-left-color: #ff5e57;
    background: linear-gradient(145deg, rgba(255, 94, 87, .16), rgba(255, 107, 107, .10));
}

.rpg-card.ai-msg-skin.style-18 {
    border-left-color: #0be881;
    background: linear-gradient(145deg, rgba(11, 232, 129, .16), rgba(5, 196, 107, .10));
}

.rpg-card.ai-msg-skin.style-19 {
    border-left-color: #3c40c6;
    background: linear-gradient(145deg, rgba(60, 64, 198, .16), rgba(87, 95, 207, .10));
}

.rpg-card.ai-msg-skin.style-20 {
    border-left-color: #575fcf;
    background: linear-gradient(145deg, rgba(87, 95, 207, .16), rgba(60, 64, 198, .10));
}

.rpg-card.ai-msg-skin.style-21 {
    border-left-color: #ff3f34;
    background: linear-gradient(145deg, rgba(255, 63, 52, .16), rgba(255, 211, 42, .08));
}

.rpg-card.ai-msg-skin.style-22 {
    border-left-color: #ffd32a;
    background: linear-gradient(145deg, rgba(255, 211, 42, .16), rgba(255, 63, 52, .08));
}

.rpg-card.ai-msg-skin.style-23 {
    border-left-color: #00a8ff;
    background: linear-gradient(145deg, rgba(0, 168, 255, .16), rgba(156, 136, 255, .10));
}

.rpg-card.ai-msg-skin.style-24 {
    border-left-color: #9c88ff;
    background: linear-gradient(145deg, rgba(156, 136, 255, .16), rgba(0, 168, 255, .10));
}

.rpg-card.ai-msg-skin.style-25 {
    border-left-color: #c56cf0;
    background: linear-gradient(145deg, rgba(197, 108, 240, .16), rgba(255, 204, 0, .08));
}

.rpg-card.ai-msg-skin.style-26 {
    border-left-color: #7bed9f;
    background: linear-gradient(145deg, rgba(123, 237, 159, .16), rgba(30, 144, 255, .08));
}

.rpg-card.ai-msg-skin.style-27 {
    border-left-color: #70a1ff;
    background: linear-gradient(145deg, rgba(112, 161, 255, .16), rgba(83, 82, 237, .10));
}

.rpg-card.ai-msg-skin.style-28 {
    border-left-color: #5352ed;
    background: linear-gradient(145deg, rgba(83, 82, 237, .16), rgba(140, 122, 230, .10));
}

.rpg-card.ai-msg-skin.style-29 {
    border-left-color: #2ed573;
    background: linear-gradient(145deg, rgba(46, 213, 115, .16), rgba(255, 71, 87, .08));
}

.rpg-card.ai-msg-skin.style-30 {
    border-left-color: #ff4757;
    background: linear-gradient(145deg, rgba(255, 71, 87, .16), rgba(255, 165, 2, .08));
}

.rpg-card.ai-msg-skin.style-31 {
    border-left-color: #ffa502;
    background: linear-gradient(145deg, rgba(255, 165, 2, .16), rgba(255, 71, 87, .08));
}

.rpg-card.ai-msg-skin.style-32 {
    border-left-color: #3742fa;
    background: linear-gradient(145deg, rgba(55, 66, 250, .16), rgba(30, 144, 255, .08));
}

.rpg-card.ai-msg-skin.style-33 {
    border-left-color: #1e90ff;
    background: linear-gradient(145deg, rgba(30, 144, 255, .16), rgba(46, 213, 115, .08));
}

.rpg-card.ai-msg-skin.style-34 {
    border-left-color: #a4b0be;
    background: linear-gradient(145deg, rgba(164, 176, 190, .14), rgba(87, 96, 111, .08));
}

.rpg-card.ai-msg-skin.style-35 {
    border-left-color: #57606f;
    background: linear-gradient(145deg, rgba(87, 96, 111, .16), rgba(164, 176, 190, .08));
}

.rpg-card.ai-msg-skin.style-36 {
    border-left-color: #ff7f50;
    background: linear-gradient(145deg, rgba(255, 127, 80, .16), rgba(255, 99, 72, .10));
}

.rpg-card.ai-msg-skin.style-37 {
    border-left-color: #ff6348;
    background: linear-gradient(145deg, rgba(255, 99, 72, .16), rgba(255, 127, 80, .10));
}

.rpg-card.ai-msg-skin.style-38 {
    border-left-color: #ffa07a;
    background: linear-gradient(145deg, rgba(255, 160, 122, .16), rgba(255, 127, 80, .08));
}

.rpg-card.ai-msg-skin.style-39 {
    border-left-color: #eccc68;
    background: linear-gradient(145deg, rgba(236, 204, 104, .16), rgba(255, 160, 122, .08));
}

.rpg-card.ai-msg-skin.style-40 {
    border-left-color: #7bed9f;
    background: linear-gradient(145deg, rgba(123, 237, 159, .14), rgba(236, 204, 104, .08));
}

.rpg-card.ai-msg-skin.style-41 {
    border-left-color: #2f3542;
    background: linear-gradient(145deg, rgba(47, 53, 66, .18), rgba(87, 96, 111, .10));
}

.rpg-card.ai-msg-skin.style-42 {
    border-left-color: #ced6e0;
    background: linear-gradient(145deg, rgba(206, 214, 224, .14), rgba(47, 53, 66, .08));
}

.rpg-card.ai-msg-skin.style-43 {
    border-left-color: #e056fd;
    background: linear-gradient(145deg, rgba(224, 86, 253, .16), rgba(72, 52, 212, .10));
}

.rpg-card.ai-msg-skin.style-44 {
    border-left-color: #4834d4;
    background: linear-gradient(145deg, rgba(72, 52, 212, .16), rgba(224, 86, 253, .10));
}

.rpg-card.ai-msg-skin.style-45 {
    border-left-color: #22a6b3;
    background: linear-gradient(145deg, rgba(34, 166, 179, .16), rgba(19, 15, 64, .08));
}

.rpg-card.ai-msg-skin.style-46 {
    border-left-color: #130f40;
    background: linear-gradient(145deg, rgba(19, 15, 64, .18), rgba(34, 166, 179, .08));
}

.rpg-card.ai-msg-skin.style-47 {
    border-left-color: #f0932b;
    background: linear-gradient(145deg, rgba(240, 147, 43, .16), rgba(235, 77, 75, .10));
}

.rpg-card.ai-msg-skin.style-48 {
    border-left-color: #eb4d4b;
    background: linear-gradient(145deg, rgba(235, 77, 75, .16), rgba(240, 147, 43, .10));
}

.rpg-card.ai-msg-skin.style-49 {
    border-left-color: #6ab04c;
    background: linear-gradient(145deg, rgba(106, 176, 76, .16), rgba(34, 166, 179, .08));
}

.rpg-card.ai-msg-skin.style-50 {
    border-left-color: #30336b;
    background: linear-gradient(145deg, rgba(48, 51, 107, .18), rgba(72, 52, 212, .08));
}

.rpg-card.ai-msg-skin.style-51 {
    border-left-color: #be2edd;
    background: linear-gradient(145deg, rgba(190, 46, 221, .16), rgba(104, 109, 224, .10));
}

.rpg-card.ai-msg-skin.style-52 {
    border-left-color: #686de0;
    background: linear-gradient(145deg, rgba(104, 109, 224, .16), rgba(190, 46, 221, .10));
}

.rpg-card.ai-msg-skin.style-53 {
    border-left-color: #badc58;
    background: linear-gradient(145deg, rgba(186, 220, 88, .16), rgba(255, 190, 118, .08));
}

.rpg-card.ai-msg-skin.style-54 {
    border-left-color: #ffbe76;
    background: linear-gradient(145deg, rgba(255, 190, 118, .16), rgba(235, 77, 75, .08));
}

.rpg-card.ai-msg-skin.style-55 {
    border-left-color: #ff7979;
    background: linear-gradient(145deg, rgba(255, 121, 121, .16), rgba(255, 190, 118, .08));
}

.rpg-card.ai-msg-skin.style-56 {
    border-left-color: #f6e58d;
    background: linear-gradient(145deg, rgba(246, 229, 141, .16), rgba(255, 121, 121, .08));
}

.rpg-card.ai-msg-skin.style-57 {
    border-left-color: #7ed6df;
    background: linear-gradient(145deg, rgba(126, 214, 223, .16), rgba(34, 166, 179, .08));
}

.rpg-card.ai-msg-skin.style-58 {
    border-left-color: #e15f41;
    background: linear-gradient(145deg, rgba(225, 95, 65, .16), rgba(240, 147, 43, .08));
}

.rpg-card.ai-msg-skin.style-59 {
    border-left-color: #95afc0;
    background: linear-gradient(145deg, rgba(149, 175, 192, .16), rgba(48, 51, 107, .08));
}

.rpg-card.ai-msg-skin.style-60 {
    border-left-color: #22a6b3;
    background: linear-gradient(145deg, rgba(34, 166, 179, .14), rgba(104, 109, 224, .08));
}

.rpg-card.ai-msg-skin.style-61 {
    border-left-color: #12cbc4;
    background: linear-gradient(145deg, rgba(18, 203, 196, .16), rgba(237, 76, 103, .08));
}

.rpg-card.ai-msg-skin.style-62 {
    border-left-color: #ed4c67;
    background: linear-gradient(145deg, rgba(237, 76, 103, .16), rgba(181, 52, 113, .10));
}

.rpg-card.ai-msg-skin.style-63 {
    border-left-color: #b53471;
    background: linear-gradient(145deg, rgba(181, 52, 113, .16), rgba(237, 76, 103, .08));
}

.rpg-card.ai-msg-skin.style-64 {
    border-left-color: #f79f1f;
    background: linear-gradient(145deg, rgba(247, 159, 31, .16), rgba(238, 90, 36, .10));
}

.rpg-card.ai-msg-skin.style-65 {
    border-left-color: #ee5a24;
    background: linear-gradient(145deg, rgba(238, 90, 36, .16), rgba(247, 159, 31, .08));
}

.rpg-card.ai-msg-skin.style-66 {
    border-left-color: #a55eea;
    background: linear-gradient(145deg, rgba(165, 94, 234, .16), rgba(45, 152, 218, .10));
}

.rpg-card.ai-msg-skin.style-67 {
    border-left-color: #2d98da;
    background: linear-gradient(145deg, rgba(45, 152, 218, .16), rgba(165, 94, 234, .10));
}

.rpg-card.ai-msg-skin.style-68 {
    border-left-color: #3867d6;
    background: linear-gradient(145deg, rgba(56, 103, 214, .16), rgba(75, 123, 236, .10));
}

.rpg-card.ai-msg-skin.style-69 {
    border-left-color: #4b7bec;
    background: linear-gradient(145deg, rgba(75, 123, 236, .16), rgba(56, 103, 214, .10));
}

.rpg-card.ai-msg-skin.style-70 {
    border-left-color: #20bf6b;
    background: linear-gradient(145deg, rgba(32, 191, 107, .16), rgba(10, 189, 227, .08));
}

.rpg-card.ai-msg-skin.style-71 {
    border-left-color: #0abde3;
    background: linear-gradient(145deg, rgba(10, 189, 227, .16), rgba(84, 160, 255, .08));
}

.rpg-card.ai-msg-skin.style-72 {
    border-left-color: #54a0ff;
    background: linear-gradient(145deg, rgba(84, 160, 255, .16), rgba(95, 39, 205, .08));
}

.rpg-card.ai-msg-skin.style-73 {
    border-left-color: #10ac84;
    background: linear-gradient(145deg, rgba(16, 172, 132, .16), rgba(1, 163, 164, .08));
}

.rpg-card.ai-msg-skin.style-74 {
    border-left-color: #01a3a4;
    background: linear-gradient(145deg, rgba(1, 163, 164, .16), rgba(52, 152, 219, .08));
}

.rpg-card.ai-msg-skin.style-75 {
    border-left-color: #2980b9;
    background: linear-gradient(145deg, rgba(41, 128, 185, .16), rgba(142, 68, 173, .08));
}

.rpg-card.ai-msg-skin.style-76 {
    border-left-color: #8e44ad;
    background: linear-gradient(145deg, rgba(142, 68, 173, .16), rgba(41, 128, 185, .08));
}

.rpg-card.ai-msg-skin.style-77 {
    border-left-color: #16a085;
    background: linear-gradient(145deg, rgba(22, 160, 133, .16), rgba(39, 174, 96, .08));
}

.rpg-card.ai-msg-skin.style-78 {
    border-left-color: #27ae60;
    background: linear-gradient(145deg, rgba(39, 174, 96, .16), rgba(22, 160, 133, .08));
}

.rpg-card.ai-msg-skin.style-79 {
    border-left-color: #c0392b;
    background: linear-gradient(145deg, rgba(192, 57, 43, .16), rgba(231, 76, 60, .08));
}

.rpg-card.ai-msg-skin.style-80 {
    border-left-color: #e74c3c;
    background: linear-gradient(145deg, rgba(231, 76, 60, .16), rgba(192, 57, 43, .08));
}

.rpg-card.ai-msg-skin.style-81 {
    border-left-color: #f1c40f;
    background: linear-gradient(145deg, rgba(241, 196, 15, .16), rgba(230, 126, 34, .08));
}

.rpg-card.ai-msg-skin.style-82 {
    border-left-color: #e67e22;
    background: linear-gradient(145deg, rgba(230, 126, 34, .16), rgba(241, 196, 15, .08));
}

.rpg-card.ai-msg-skin.style-83 {
    border-left-color: #bdc3c7;
    background: linear-gradient(145deg, rgba(189, 195, 199, .14), rgba(127, 140, 141, .08));
}

.rpg-card.ai-msg-skin.style-84 {
    border-left-color: #7f8c8d;
    background: linear-gradient(145deg, rgba(127, 140, 141, .16), rgba(189, 195, 199, .08));
}

.rpg-card.ai-msg-skin.style-85 {
    border-left-color: #2ecc71;
    background: linear-gradient(145deg, rgba(46, 204, 113, .16), rgba(52, 152, 219, .08));
}

.rpg-card.ai-msg-skin.style-86 {
    border-left-color: #3498db;
    background: linear-gradient(145deg, rgba(52, 152, 219, .16), rgba(155, 89, 182, .08));
}

.rpg-card.ai-msg-skin.style-87 {
    border-left-color: #9b59b6;
    background: linear-gradient(145deg, rgba(155, 89, 182, .16), rgba(52, 152, 219, .08));
}

.rpg-card.ai-msg-skin.style-88 {
    border-left-color: #1abc9c;
    background: linear-gradient(145deg, rgba(26, 188, 156, .16), rgba(46, 204, 113, .08));
}

.rpg-card.ai-msg-skin.style-89 {
    border-left-color: #e84393;
    background: linear-gradient(145deg, rgba(232, 67, 147, .16), rgba(9, 132, 227, .08));
}

.rpg-card.ai-msg-skin.style-90 {
    border-left-color: #0984e3;
    background: linear-gradient(145deg, rgba(9, 132, 227, .16), rgba(162, 155, 254, .08));
}

/* 发光效果卡片 */
.rpg-card.glow {
    box-shadow: 0 0 30px var(--c-accent-glow), 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: pulseGlow 3s infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px var(--c-accent-glow);
    }

    50% {
        box-shadow: 0 0 40px var(--c-accent-glow);
    }
}

/* 战斗卡片 */
.rpg-card.battle {
    background: linear-gradient(145deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.15));
    border: 2px solid #e74c3c;
    animation: shake 0.5s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* 卡片标题 */
.rpg-title {
    font-family: var(--ui-font-title);
    color: var(--ui-color-title);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 描述文本 */
.rpg-text {
    line-height: 1.6;
    color: var(--ui-color-body);
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.rpg-text strong {
    color: #ffd700;
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
}

.rpg-text em {
    color: #00d4ff;
    font-style: normal;
}

/* 属性网格 */
.rpg-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 10px 0;
    background: var(--npc-stat-item-bg);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--npc-stat-item-border);
}

.rpg-stat-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.rpg-stat-label {
    color: var(--npc-stat-item-label);
}

.rpg-stat-val {
    color: var(--npc-stat-item-val);
    font-weight: bold;
}

/* 进度条 */
.rpg-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.rpg-progress-fill {
    height: 100%;
    background: var(--c-accent);
    width: 0%;
    transition: width 0.5s;
    box-shadow: 0 0 5px var(--c-accent);
}

.bg-red {
    background: var(--c-danger);
    box-shadow: 0 0 5px var(--c-danger);
}

.bg-green {
    background: var(--c-success);
    box-shadow: 0 0 5px var(--c-success);
}

/* Utility Classes for Status Colors */
.c-health {
    color: var(--color-health);
}

.c-mood {
    color: var(--color-mood);
}

.c-prestige {
    color: var(--color-prestige);
}

.c-beauty {
    color: var(--color-beauty);
}

.tag-neg {
    color: var(--c-danger);
}

.tag-rare {
    color: var(--c-rare);
}

.tag-pos {
    color: var(--c-success);
}

.attr-val {
    color: var(--c-text-main);
}

.attr-label {
    color: var(--c-text-dim);
}

/* Background Utils */
.bg-health {
    background: var(--color-health);
    box-shadow: 0 0 5px var(--color-health);
}

.bg-mood {
    background: var(--color-mood);
    box-shadow: 0 0 5px var(--color-mood);
}

.bg-prestige {
    background: var(--color-prestige);
    box-shadow: 0 0 5px var(--color-prestige);
}

/* 交互按钮组 */
.rpg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.rpg-btn {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--c-border);
    color: var(--c-text-main);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-family: var(--btn-font-family);
    cursor: var(--cursor-pointer);
    flex: 1;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.rpg-btn:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    box-shadow: 0 0 15px var(--c-accent-glow);
    transform: translateY(-2px);
}

.rpg-btn:active {
    transform: translateY(0) scale(0.95);
}

/* 设置界面专属按钮样式 - 增强一致性 */
.config-btn,
.config-btn-secondary {
    font-family: var(--config-btn-font);
    font-weight: var(--config-btn-weight);
    font-size: var(--config-btn-size);
    padding: var(--config-btn-padding);
    border-radius: var(--config-btn-radius);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: var(--cursor-pointer);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    text-align: center;
    border: none;
}

.config-btn {
    background: var(--config-btn-bg);
    color: var(--config-btn-color);
    min-width: var(--config-btn-min-width);
    box-shadow: var(--config-btn-shadow);
}

/* 主页顶部[选择]按钮 */
.nav-btn-action {
    padding: 5px 15px;
    background: var(--home-selection-btn-bg);
    border: var(--home-selection-btn-border);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--home-selection-btn-color);
    transition: 0.3s;
}

.nav-btn-action:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px var(--c-accent-glow);
}

.config-btn:hover {
    filter: brightness(1.1);
    transform: var(--config-btn-hover-transform);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.config-btn-secondary {
    background: var(--config-btn-secondary-bg);
    border: var(--config-btn-secondary-border);
    color: var(--config-btn-secondary-color);
    min-width: var(--config-btn-secondary-min-width);
}

.config-btn-secondary:hover {
    background: var(--config-btn-secondary-hover-bg);
    color: var(--config-btn-secondary-hover-color);
    border-color: var(--config-btn-secondary-hover-bg);
    transform: var(--config-btn-hover-transform);
    box-shadow: 0 4px 12px var(--c-accent-glow);
}

/* 危险操作按钮 (删除/清空) */
.btn-danger {
    background: var(--btn-danger-bg, rgba(255, 75, 92, 0.1));
    color: var(--btn-danger-color, var(--c-danger));
    border: 1px solid var(--btn-danger-border, var(--c-danger));
}

.btn-danger:hover {
    background: var(--btn-danger-hover-bg, var(--c-danger));
    color: var(--btn-danger-hover-color, #fff);
}

/* 统一拉取、测试、导出等所有按钮为次要风格 (用户要求保持一致) */

.rpg-btn.secondary {
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-color);
}

.rpg-btn.secondary:hover {
    background: var(--c-secondary);
    color: #000;
}

/* NPC详情界面按钮系统 - 全面支持全局变量覆盖 */
.npc-detail-btn,
.npc-detail-btn-secondary {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* 布局锁定属性 */
    padding: var(--config-btn-padding, 10px 18px) !important;
    border-radius: var(--config-btn-radius, 20px) !important;
    font-size: var(--config-btn-size, 0.85rem) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    flex: 1;
    cursor: var(--cursor-pointer) !important;
    /* 默认共有样式 (可被手动覆盖) */
    font-family: var(--npc-detail-btn-font, var(--ui-font-body));
    border: 1px solid transparent;
}

.npc-detail-btn {
    background: var(--npc-detail-btn-primary-bg);
    color: var(--npc-detail-btn-primary-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.npc-detail-btn-secondary {
    background: var(--npc-detail-btn-secondary-bg);
    color: var(--npc-detail-btn-secondary-color);
    border: 1px solid var(--c-border);
}

.npc-detail-btn:hover,
.npc-detail-btn-secondary:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
}

/* 细分到个别按钮的变量映射（确保最高优先级的自定义） */
.btn-npc-chat {
    background: var(--btn-npc-chat-bg, var(--npc-detail-btn-primary-bg, var(--c-accent))) !important;
    color: var(--btn-npc-chat-color, var(--npc-detail-btn-primary-color, #fff)) !important;
}

.btn-npc-relation {
    background: var(--btn-npc-relation-bg);
    color: var(--btn-npc-relation-color);
}

.btn-npc-network {
    background: var(--btn-npc-network-bg);
    color: var(--btn-npc-network-color);
}

.btn-npc-inventory {
    background: var(--btn-npc-inventory-bg);
    color: var(--btn-npc-inventory-color);
}

.btn-npc-history {
    background: var(--btn-npc-history-bg);
    color: var(--btn-npc-history-color);
}

.btn-npc-inventory {
    background: var(--btn-npc-inventory-bg) !important;
    color: var(--btn-npc-inventory-color) !important;
    font-family: var(--btn-npc-inventory-font) !important;
}

.btn-npc-history {
    background: var(--btn-npc-history-bg) !important;
    color: var(--btn-npc-history-color) !important;
    font-family: var(--btn-npc-history-font) !important;
}

/* 稀有度标签 */
.rpg-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-right: 5px;
    border: 1px solid currentColor;
}

.tag-common {
    color: var(--c-common);
    border-color: rgba(255, 255, 255, 0.2);
}

.tag-rare {
    color: var(--c-rare);
    border-color: var(--c-rare);
}

.tag-epic {
    color: var(--c-epic);
    border-color: var(--c-epic);
}

.tag-legend {
    color: var(--c-legend);
    border-color: var(--c-legend);
    text-shadow: 0 0 5px var(--c-legend-glow);
}

/* 用户消息行容器 */
.msg-user-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    margin: 2px 0 8px 0;
    width: 100%;
}

/* 用户消息气泡 */
.msg-user-bubble {
    background: var(--msg-user-bg);
    color: white;
    padding: 10px 15px;
    border-radius: 12px 0 12px 12px;
    box-shadow: var(--msg-user-shadow);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 85%;
    position: relative;
}



/* [强制] 手机适配与排版修正 (Mobile Layout Fixes) */
.ai-msg-content,
.ai-msg-content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    /* 彻底解决压缩/裁剪问题 */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    display: flow-root !important;
    height: auto !important;
    /* 强制高度自适应 */
    min-height: min-content;
}

.ai-msg-content img,
.ai-msg-content-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    display: block;
    margin: 10px auto;
}

.ai-msg-content table,
.ai-msg-content-wrapper table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 15px;
}

.ai-msg-content th,
.ai-msg-content td {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rpg-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 8px 0;
    /* 增加卡片间距 */
}

/* 更好的长文本阅读体验 */
.rpg-text p {
    margin-bottom: 12px;
    line-height: 1.6;
    text-align: justify;
    /* 两端对齐更整齐 */
}

/* 确保所有容器都是流式的 */
div,
section,
article {
    max-width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
           5. 面板与功能页样式
           ========================================================================== */
.panel-container {
    padding: 20px;
    display: grid;
    gap: 20px;
}

/* 角色卡片 */
.char-overview {
    background: var(--char-overview-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    backdrop-filter: blur(10px);
}

.char-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--char-avatar-bg);
    border: 2px solid var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--char-avatar-color);
    box-shadow: 0 0 15px var(--c-accent-glow);
}

.char-details h2 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.char-details p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--c-text-dim);
}

/* 通用Grid */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* 背包与NPC列表 */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
}

.item-slot {
    aspect-ratio: 1;
    background: var(--item-slot-bg);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: var(--cursor-pointer);
    position: relative;
    transition: 0.2s;
}

.item-slot:hover {
    border-color: var(--c-secondary);
    background: var(--item-slot-hover-bg);
}

.item-icon {
    font-size: var(--item-icon-size);
    margin-bottom: 5px;
}

.item-qty {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.7rem;
    color: var(--item-qty-color);
}

/* NPC 卡片 */
.npc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--npc-row-bg);
    padding: 12px;
    border-radius: 8px;
    border-left: 2px solid var(--npc-row-border-left);
    margin-bottom: 10px;
}

/* 导航栏专用世界地图节点 */
#map-world .world-map-node {
    position: absolute;
    width: var(--world-map-node-size, 45px);
    height: var(--world-map-node-size, 45px);
    border-radius: 50%;
    background: var(--world-map-node-bg);
    border: 2px solid var(--world-map-node-border);
    transform: translate(-50%, -50%);
    cursor: var(--cursor-pointer);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s var(--anim-pop);
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#map-world .world-map-node .node-label {
    position: absolute;
    bottom: -25px;
    white-space: nowrap;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    background: none;
    padding: 0;
    border-radius: 0;
}

#map-world .world-map-node.active {
    background: var(--c-accent);
    border-color: #fff;
    box-shadow: 0 0 20px var(--c-accent-glow);
    z-index: 10;
}

#map-world .world-map-node.active .node-label {
    color: #fff;
    font-weight: bold;
}

#map-world .world-map-node:hover {
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 15;
    border-color: var(--c-accent);
}

/* 主页聊天区域内嵌地图 (AI 生成) */
.map-wrapper {
    width: 100%;
    height: 220px;
    background: linear-gradient(to bottom, rgba(10, 10, 20, 0.6), rgba(20, 20, 40, 0.4));
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 10px 0;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.map-node {
    position: absolute;
    width: var(--home-map-node-size, 32px);
    height: var(--home-map-node-size, 32px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.map-node.active {
    background: var(--c-accent);
    border-color: #fff;
    box-shadow: 0 0 10px var(--c-accent-glow);
    z-index: 10;
}

.map-node .node-label {
    position: absolute;
    bottom: -18px;
    white-space: nowrap;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.map-line {
    position: absolute;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* 模态框 */
.modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-mask.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-box {
    background: var(--modal-bg);
    width: 92%;
    max-width: 420px;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    transform: translateY(30px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 30px rgba(33, 150, 243, 0.18);
    border: 2px solid var(--modal-border, #2196f3) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* 事件弹窗 (Event Modal) - 独立样式，不受通用样式影响 */
#event-modal .modal-box {
    background: #0f111a !important;
    border: 2px solid var(--event-color, #00d4aa) !important;
    box-shadow: 0 0 30px rgba(var(--event-color-rgb, 0, 212, 170), 0.2) !important;
}


.modal-mask.open .modal-box {
    transform: translateY(0) scale(1);
}

.event-modal-container {
    position: relative;
    border-radius: 16px;
    padding: 0;
    background: transparent;
}

.event-modal-inner {
    background: transparent;
    border-radius: 14px;
    padding: 0;
    border: none;
}

.event-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
}

.event-icon {
    position: absolute;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--event-color, #00d4aa);
    color: #0f111a;
    border: none;
    box-shadow: 0 0 15px rgba(var(--event-color-rgb, 0, 212, 170), 0.4);
    animation: icon-pulse 2s infinite ease-in-out;
    z-index: 2;
}

@keyframes icon-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.event-title {
    flex: none;
    font-family: var(--ui-font-title);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--event-color, #00d4aa);
    letter-spacing: 2px;
    text-align: center;
}

.event-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--event-color, #00d4aa);
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.3s;
    opacity: 0.6;
}

.event-close i {
    color: var(--event-color, #00d4aa);
}

.event-close:hover {
    color: #fff;
    transform: translateY(-50%) rotate(90deg);
    opacity: 1;
}

.event-divider {
    height: 1px;
    background: rgba(var(--event-color-rgb, 0, 212, 170), 0.3);
    margin-bottom: 20px;
}

.event-body {
    color: #e0e0f0;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 25px;
    white-space: pre-wrap;
    text-align: left;
    padding-left: 0;
    text-indent: 0 !important;
}

/* 奖励区块 */
.event-rewards {
    background: rgba(0, 15, 20, 0.8);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 25px;
    border-left: 3px solid var(--event-color, #00d4aa);
    /* 改用变量 */
    position: relative;
    overflow: hidden;
}

.reward-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--event-color, #00d4aa);
    /* 改用变量 */
    margin-bottom: 15px;
    font-weight: bold;
}

.reward-label i {
    color: var(--event-color, #00d4aa);
    /* 改用变量 */
}

.reward-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reward-item:last-child {
    border: none;
}

.reward-name {
    color: #ffffff;
    /* 物品/名称改为白色 */
    font-size: 0.95rem;
}

.reward-value {
    font-family: var(--ui-font-mono);
    font-weight: bold;
}

.reward-value.plus {
    color: #00e5ff;
    /* 经验值/数值改为海蓝色 */
}

.reward-value.minus {
    color: #ff4b5c;
}

/* 弹窗按钮 */
.event-footer {
    display: flex;
    gap: 12px;
}

.event-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: var(--event-color, #00d4aa);
    color: #ffffff;
    /* 按钮文字为白色 */
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(var(--event-color-rgb, 0, 212, 170), 0.2);
}

.event-btn i {
    color: #ffffff !important;
    /* 强制按钮内的图标为白色 */
    font-size: 0.9rem;
}

.event-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(var(--event-color-rgb, 0, 212, 170), 0.4);
}

.event-btn:active {
    transform: scale(0.96);
}

/* 类型主题变量 - 事件主题与主题色（基础内置） */
.type-info {
    --event-color: #3498db;
    --event-color-rgb: 52, 152, 219;
}

.type-success {
    --event-color: #00b894;
    --event-color-rgb: 0, 184, 148;
}

.type-warning {
    --event-color: #f39c12;
    --event-color-rgb: 243, 156, 18;
}

.type-danger {
    --event-color: #e74c3c;
    --event-color-rgb: 231, 76, 60;
}

.type-mystery {
    --event-color: #9b59b6;
    --event-color-rgb: 155, 89, 182;
}

/* 扩展主题（100+）不通过 CSS 类硬编码，改为 JS 直接向 .modal-box 注入 --event-color/--event-color-rgb */

.form-group {
    margin-bottom: 15px;
}

.form-label {
    display: block;
    font-size: 0.85rem;
    color: var(--ui-color-label);
    margin-bottom: 5px;
}

.form-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    padding: var(--form-input-padding);
    border-radius: var(--input-radius);
    color: var(--input-text);
}

/* 修复 Select 选项背景色 */
select.form-input option {
    background-color: var(--select-option-bg);
    color: var(--input-text);
}

.btn-full {
    width: 100%;
    padding: var(--btn-full-padding);
    background: var(--btn-primary-bg);
    border: none;
    border-radius: var(--btn-full-radius);
    color: var(--btn-primary-color);
    font-weight: bold;
    font-family: var(--btn-font-family);
    cursor: var(--cursor-pointer);
}

/* ==========================================================================
           6. 扩展样式 - 通知、加载、特效
           ========================================================================== */

/* 通知系统 */
.notification {
    position: fixed;
    top: var(--notification-top);
    right: var(--notification-right);
    background: var(--notification-bg);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--notification-radius);
    padding: var(--notification-padding);
    min-width: 250px;
    max-width: 350px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    animation: slideInRight 0.3s ease-out;
    z-index: 9999;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification.success {
    border-left-color: var(--c-success);
}

.notification.error {
    border-left-color: var(--c-danger);
}

.notification.warning {
    border-left-color: var(--c-warning);
}

/* 加载动画 */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* [新增] 三个❤跳动加载动画 - 天空蓝卡通主题专用 */
.heart-loading-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    border: none !important;
    box-shadow: none !important;
}

.heart-loading {
    display: flex;
    gap: var(--ai-loader-gap, 10px);
}

.author-breath-box {
    animation: authorBreath 2.8s ease-in-out infinite;
    transform-origin: center;
}

@keyframes authorBreath {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 20px rgba(162, 155, 254, 0.2);
    }

    50% {
        transform: scale(1.03);
        filter: brightness(1.06);
        box-shadow: 0 0 28px rgba(162, 155, 254, 0.35);
    }
}

.heart-loading .heart {
    position: relative;
    font-size: var(--ai-loader-size, 1.5rem);
    width: 1.2em;
    height: 1.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: heartBeat var(--ai-loader-duration, 1.2s) infinite ease-in-out;

    /* 彻底隐藏 JS 硬编码的原字符，防止灰蓝色叠影 */
    color: transparent !important;
    text-shadow: none !important;
    -webkit-text-fill-color: transparent !important;
    user-select: none;
}

.heart-loading .heart::before {
    content: var(--ai-loader-shape, '❤');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ai-loader-color, var(--theme-heart-red, #ff6b6b)) !important;
    text-shadow: var(--ai-loader-shadow, 0 0 10px rgba(255, 107, 107, 0.4)) !important;
    -webkit-text-fill-color: initial !important;
    line-height: 1;
    visibility: visible !important;
}

.heart-loading .heart:nth-child(2) {
    animation-delay: 0.2s;
}

.heart-loading .heart:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes heartBeat {

    0%,
    100% {
        transform: scale(var(--ai-loader-scale-min, 0.8));
        opacity: var(--ai-loader-opacity-min, 0.6);
    }

    50% {
        transform: scale(var(--ai-loader-scale-max, 1.3));
        opacity: var(--ai-loader-opacity-max, 1);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 徽章 */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    background: var(--c-accent);
    color: white;
    margin-left: 5px;
}

/* 分隔线 */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-border), transparent);
    margin: 20px 0;
}

/* 工具提示 */
.tooltip {
    position: relative;
    cursor: help;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    margin-bottom: 5px;
}

.tooltip:hover::after {
    opacity: 1;
}

/* 图标增强 */
.tutorial-hint {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.92em;
    font-weight: 700;
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.35);
    animation: tutorial-hint-breathe 1.6s infinite ease-in-out;
}

@keyframes tutorial-hint-breathe {

    0%,
    100% {
        opacity: 0.55;
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-1px) scale(1.03);
        filter: saturate(1.25);
    }
}

.icon-pulse {
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.icon-rotate {
    animation: iconRotate 3s linear infinite;
}

@keyframes iconRotate {
    to {
        transform: rotate(360deg);
    }
}

/* 卡片悬浮效果 */
.rpg-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
    transition: 0.3s;
}

/* 按钮点击效果 */
.rpg-btn:active {
    transform: scale(0.95);
}

/* 渐变文字 */
.gradient-text {
    background: linear-gradient(90deg, var(--c-accent), var(--c-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 发光文字 */
.glow-text {
    text-shadow: 0 0 10px var(--c-accent-glow), 0 0 20px var(--c-accent-glow);
}

/* 背包格子增强 */
.item-slot.empty {
    opacity: 0.3;
}

.item-slot.common {
    border-color: var(--item-common-border);
}

.item-slot.rare {
    border: 2px solid var(--item-rare-border);
    box-shadow: 0 0 8px var(--item-rare-shadow);
}

.item-slot.epic {
    border: 2px solid var(--item-epic-border);
    box-shadow: 0 0 10px var(--item-epic-shadow);
    animation: pulseGlow 3s infinite;
}

.item-slot.legend,
.item-slot.legendary {
    border: 2px solid var(--item-legend-border);
    box-shadow: 0 0 15px var(--item-legend-shadow);
    animation: pulseGlow 2s infinite;
    background: var(--item-legend-bg);
}

/* 地图节点增强 */
.map-node:hover {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 0 25px var(--c-accent);
}

.map-node.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.map-node.completed {
    background: var(--map-node-completed-bg, var(--c-success));
    border-color: var(--map-node-completed-border, var(--c-success));
}

/* 响应式优化 */
@media (max-width: 600px) {
    .rpg-stats-grid {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .modal-box {
        width: 95%;
        max-width: none;
    }

    .notification {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* ==========================================================================
           3. 高级玩家面板样式 (核心修改区域)
           ========================================================================== */
.profile-container {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 统一卡片风格 */
.info-card {
    background: var(--panel-card-bg);
    border: 1px solid var(--panel-card-border);
    border-radius: var(--panel-card-radius);
    padding: 16px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: var(--panel-card-shadow);
    transition: transform 0.2s;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--card-color, var(--c-accent));
    opacity: 0.8;
}

/* [玩家面板小卡片独立精细控制] */
.player-status-card {
    background: var(--player-status-card-bg, var(--panel-card-bg));
    border: var(--player-status-card-border, 1px solid var(--panel-card-border));
    border-radius: var(--player-status-card-radius, var(--panel-card-radius));
}

.player-info-card {
    background: var(--player-info-card-bg, var(--panel-card-bg));
    border: var(--player-info-card-border, 1px solid var(--panel-card-border));
    border-radius: var(--player-info-card-radius, var(--panel-card-radius));
}

.player-look-card {
    background: var(--player-look-card-bg, var(--panel-card-bg));
    border: var(--player-look-card-border, 1px solid var(--panel-card-border));
    border-radius: var(--player-look-card-radius, var(--panel-card-radius));
}

.player-ability-card {
    background: var(--player-ability-card-bg, var(--panel-card-bg));
    border: var(--player-ability-card-border, 1px solid var(--panel-card-border));
    border-radius: var(--player-ability-card-radius, var(--panel-card-radius));
}

.player-social-card {
    background: var(--player-social-card-bg, var(--panel-card-bg));
    border: var(--player-social-card-border, 1px solid var(--panel-card-border));
    border-radius: var(--player-social-card-radius, var(--panel-card-radius));
}

.player-resource-card {
    background: var(--player-resource-card-bg, var(--panel-card-bg));
    border: var(--player-resource-card-border, 1px solid var(--panel-card-border));
    border-radius: var(--player-resource-card-radius, var(--panel-card-radius));
}

/* 卡片标题 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-title {
    font-weight: bold;
    color: var(--card-color, var(--ui-color-title));
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.card-subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    font-family: var(--ui-font-title);
}

/* [字体全局应用] */
.app-title {
    font-family: var(--ui-font-art, 'Cinzel'), serif;
    font-size: 1.8rem;
    font-weight: var(--ui-font-weight-bold);
    background: linear-gradient(135deg, #a29bfe, #74b9ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(162, 155, 254, 0.3);
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 统一字体设置 */
body,
input,
textarea,
button,
select {
    font-family: var(--ui-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.rpg-title,
.card-title {
    font-family: var(--ui-font-title);
}

code,
pre,
.monospace {
    font-family: var(--ui-font-mono);
}

/* 头部：角色概览 */
.char-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--char-header-bg);
    border: var(--char-header-border);
    padding: 20px;
    border-radius: 20px;
    position: relative;
}

.char-avatar-box {
    position: relative;
    flex-shrink: 0;
}

.char-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--panel-avatar-bg);
    border: 2px solid var(--panel-avatar-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--panel-avatar-text);
    box-shadow: var(--panel-avatar-shadow);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.chat-modal-footer .form-input {
    flex: 1;
    height: var(--chat-input-height, 40px);
    resize: none;
    line-height: 20px;
    width: 100%;
    min-width: 0;
    /* Fix flex shrink issue */
}

.chat-modal-footer .send-btn {
    width: var(--chat-send-btn-size, 40px);
    height: var(--chat-send-btn-size, 40px);
    font-size: 1rem;
    background: var(--input-send-btn-bg);
    color: var(--input-send-btn-color);
}

.char-level-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--panel-level-bg);
    border: 1px solid var(--panel-level-text);
    color: var(--panel-level-text);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
}

.char-main-info {
    flex: 1;
}

.char-name {
    font-size: var(--ui-font-size-xl);
    font-weight: bold;
    color: var(--ui-color-body);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.char-title {
    font-size: 0.85rem;
    color: var(--panel-title-text);
    background: var(--panel-title-bg);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid var(--panel-title-border);
}

/* 属性网格 */
.attr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 15px;
    font-size: var(--ui-font-size-base);
}

.attr-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed var(--panel-attr-item-border, var(--panel-attr-border));
}

.attr-label {
    color: var(--panel-attr-label);
}

.attr-val {
    color: var(--panel-attr-val);
    font-weight: 500;
    text-align: right;
}

/* 标签云 */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--panel-tag-gap, 6px);
}

.attr-tag {
    font-size: var(--ui-font-size-sm);
    padding: 4px 10px;
    border-radius: var(--panel-tag-radius, 15px);
    background: var(--panel-tag-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--panel-tag-text);
}

.tag-pos {
    border-color: var(--panel-tag-pos);
    color: var(--panel-tag-pos);
    background: rgba(0, 184, 148, 0.1);
}

.tag-neg {
    border-color: var(--panel-tag-neg);
    color: var(--panel-tag-neg);
    background: rgba(214, 48, 49, 0.1);
}

.tag-rare {
    border-color: var(--panel-tag-rare);
    color: var(--panel-tag-rare);
    background: rgba(253, 203, 110, 0.1);
}

/* 状态进度条 */
.status-row {
    margin-bottom: 15px;
}

.status-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.9rem;
    font-family: var(--status-font-family, inherit);
}

.status-head span:first-child {
    color: var(--status-label-color, var(--c-text-main));
}

.status-head span:last-child {
    color: var(--status-val-color, var(--c-accent));
    font-family: var(--ui-font-mono);
    font-weight: bold;
}

.status-bar-bg {
    height: 8px;
    background: var(--status-bar-bg, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
    overflow: hidden;
}

.status-bar-fill {
    height: 100%;
    background: var(--status-bar-fill, var(--c-accent));
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.status-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* 颜色定义 */
.c-health {
    color: var(--color-health);
}

.bg-health {
    background: var(--color-health);
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.4);
}

.c-mood {
    color: var(--color-mood);
}

.bg-mood {
    background: var(--color-mood);
    box-shadow: 0 0 10px rgba(225, 112, 85, 0.4);
}

.c-prestige {
    color: var(--color-prestige);
}

.bg-prestige {
    background: var(--color-prestige);
    box-shadow: 0 0 10px rgba(253, 203, 110, 0.4);
}

.c-beauty {
    color: var(--color-beauty-end);
}

.bg-beauty {
    background: linear-gradient(90deg, var(--color-beauty), var(--color-beauty-end));
}

/* 文本块 */
.desc-text {
    font-size: var(--panel-desc-font-size, 0.9rem);
    line-height: 1.6;
    color: var(--panel-desc-color, var(--ui-color-body));
    background: var(--panel-desc-bg);
    padding: var(--panel-desc-padding, 10px);
    border-radius: var(--panel-desc-radius, 8px);
    border-left: 2px solid var(--panel-desc-border);
}

.highlight {
    color: var(--c-accent);
    font-weight: bold;
}

.beauty-score-box {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.beauty-score-main {
    flex: 1;
}

.beauty-score-val {
    font-size: var(--panel-beauty-score-size, 2rem);
    font-weight: bold;
    color: var(--color-beauty-end);
    line-height: 1;
}

.beauty-score-label {
    font-size: 0.75rem;
    color: var(--ui-color-label);
}

.beauty-score-meta {
    text-align: right;
}

.beauty-score-status {
    font-size: 1.1rem;
    font-weight: bold;
}

.beauty-score-desc {
    font-size: 0.75rem;
    color: var(--ui-color-label);
}

.special-link-box {
    margin-top: 10px;
    background: rgba(253, 121, 168, 0.1);
    padding: 8px;
    border-radius: 6px;
    text-align: center;
}

.special-link-text {
    color: var(--color-beauty);
}

.hobby-box {
    margin-top: 10px;
    font-size: 0.9rem;
    border-top: 1px dashed var(--c-border);
    padding-top: 8px;
}

/* 底部固定操作栏 - 覆盖原有样式 */
.profile-actions {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    width: 100%;
    padding: var(--profile-actions-padding, 10px 15px);
    background: var(--profile-actions-bg);
    display: flex;
    gap: var(--profile-actions-gap, 10px);
    border-top: 1px solid var(--profile-actions-border, rgba(255, 255, 255, 0.1));
    z-index: 40;
    backdrop-filter: blur(10px);
    transition: transform 0.3s;
}

#view-panel.active .profile-actions {
    transform: none;
}

.action-btn {
    flex: 1;
    border: var(--func-btn-border);
    padding: var(--action-btn-padding, 12px);
    border-radius: var(--action-btn-radius, 8px);
    font-weight: var(--action-btn-weight, bold);
    font-size: var(--action-btn-size, 0.9rem);
    font-family: var(--func-btn-font);
    font-style: var(--func-btn-style);
    cursor: var(--cursor-pointer);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--func-btn-color, #fff);
    transition: 0.2s;
}

.btn-inventory {
    background: var(--func-btn-bg, var(--btn-inventory-bg));
    box-shadow: var(--btn-inventory-shadow);
}

.btn-history {
    background: var(--func-btn-bg, var(--btn-history-bg));
    box-shadow: var(--btn-history-shadow);
}

.btn-social {
    background: var(--func-btn-bg, var(--btn-social-bg));
    box-shadow: var(--btn-social-shadow);
}

/* 应用爱心光标到全局 */
* {
    cursor: var(--cursor-default);
}

button,
a,
[role="button"],
input[type="submit"],
input[type="button"] {
    cursor: var(--cursor-pointer);
}

input[type="text"],
input[type="number"],
textarea,
select,
[contenteditable="true"] {
    cursor: var(--cursor-text);
}

/* 添加卡通字体的文字阴影效果，增强可读性 */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    color: var(--ui-color-title);
}

body,
.message,
.bubble,
.modal-content,
.card {
    text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.5);
    color: var(--ui-color-body);
}

/* 为按钮添加卡通风格的圆角和阴影 */
/* [Optimization] Avoid animating 'all' for better performance */
button,
.btn {
    border-radius: 12px !important;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
    will-change: transform;
    /* Hint for browser optimization */
}

button:hover,
.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(33, 150, 243, 0.3) !important;
}

/* 为输入框添加卡通风格 */
input,
textarea,
select {
    border-radius: 10px !important;
    border: 2px solid var(--c-border) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #0a2c5c !important;
}

/* 为卡片添加卡通风格的边框和阴影 */
/* [Optimization] containment for layout performance */
.card,
.modal-content,
.panel {
    border-radius: 16px !important;
    box-shadow: 0 8px 16px rgba(33, 150, 243, 0.15) !important;
    border: 2px solid rgba(66, 165, 245, 0.3) !important;
    contain: layout style;
}

/* 为消息气泡添加卡通风格 */
.message-bubble,
.chat-bubble {
    border-radius: 20px !important;
    border: 2px solid rgba(66, 165, 245, 0.3) !important;
}

/* 应用玩家头像背景色 */
.player-avatar,
.avatar-player,
[class*="avatar-player"],
[class*="player-avatar"] {
    background: var(--panel-avatar-bg) !important;
}

/* 确保所有文字颜色都是深色，可读性高 */
* {
    color: var(--ui-color-body);
}

/* 特殊处理链接和强调文字 */
a {
    color: var(--c-accent) !important;
}

strong,
b {
    color: var(--ui-color-title) !important;
}

/* ==========================================================================
   Optimization & Compatibility Layer
   ========================================================================== */
#app-root {
    isolation: isolate;
    /* Create new stacking context */
    contain: layout paint;
    /* Optimize rendering */
}

.view-section {
    contain: content;
    /* Scope layout calculations */
}

.ai-html-sandbox {
    isolation: isolate;
}

/* Prevent global CSS bleed */
#app-root * {
    max-width: 100%;
}

/* 制作人信息特效 - 增强版 - 确保在弹窗中可见 */
.producer-glow {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    background: var(--producer-glow-bg) !important;
    color: var(--producer-glow-color) !important;
    animation: neonPulse 2s infinite alternate !important;
    padding: 12px 20px !important;
    border: 1px solid var(--producer-glow-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--producer-glow-shadow), inset 0 0 10px rgba(100, 100, 255, 0.1) !important;
    text-shadow: var(--producer-glow-text-shadow) !important;
    display: inline-block !important;
    margin: 8px !important;
    letter-spacing: 2px !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 10 !important;
}

.producer-glow::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
    transform: rotate(45deg) !important;
    animation: shimmer 3s infinite !important;
    z-index: -1 !important;
}

@keyframes neonPulse {
    from {
        filter: brightness(1) drop-shadow(0 0 10px rgba(102, 126, 234, 0.5));
        transform: scale(1);
    }

    to {
        filter: brightness(1.2) drop-shadow(0 0 20px rgba(118, 75, 162, 0.8));
        transform: scale(1.03);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* NPC对话弹窗专用样式 */
.chat-modal-body {
    height: 60vh;
    overflow-y: auto;
    background: var(--chat-modal-bg);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 隐藏滚动条 */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.chat-modal-body::-webkit-scrollbar {
    display: none;
}

.chat-modal-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px 0;
}

/* 线上聊天模式样式 - QQ/微信风格 */
.chat-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0;
    animation: slideIn 0.3s ease-out;
}

.chat-msg-row.self {
    flex-direction: row;
    /* Changed from row-reverse to handle explicit order */
    justify-content: flex-end;
}

.chat-msg-row.npc {
    flex-direction: row;
    justify-content: flex-start;
}

.chat-avatar {
    width: var(--chat-avatar-size);
    height: var(--chat-avatar-size);
    border-radius: var(--chat-avatar-radius);
    background: var(--chat-avatar-npc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--chat-avatar-font);
    font-weight: var(--chat-avatar-weight);
    color: var(--chat-avatar-color);
    flex-shrink: 0;
    box-shadow: var(--chat-avatar-shadow);
}

.chat-msg-row.self .chat-avatar {
    background: var(--chat-avatar-player-bg);
    order: 2;
}

.chat-bubble {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: var(--chat-bubble-radius);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ui-color-body);
    line-height: 1.6;
    word-wrap: break-word;
    box-shadow: var(--chat-bubble-shadow);
    position: relative;
}

.chat-msg-row.self .chat-bubble {
    background: var(--chat-bubble-self-bg);
    color: var(--chat-bubble-self-color);
    font-family: var(--chat-bubble-self-font);
    font-style: var(--chat-bubble-self-style);
    border-radius: var(--chat-bubble-radius, 12px 12px 0 12px);
    order: 1;
}

.chat-msg-row.npc .chat-bubble {
    background: var(--chat-bubble-npc-bg);
    color: var(--chat-bubble-npc-color);
    font-family: var(--chat-bubble-npc-font);
    font-style: var(--chat-bubble-npc-style);
    border-radius: var(--chat-bubble-radius, 12px 12px 12px 0);
}

/* 消息选择框样式 */
.msg-checkbox {
    opacity: 0;
    transition: opacity 0.3s;
    cursor: var(--cursor-pointer);
    width: 18px;
    height: 18px;
    margin-top: 12px;
}

.select-mode .msg-checkbox {
    opacity: 1;
}

/* 在线模式切换按钮样式 */
.online-mode-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    font-size: 0.75rem;
    cursor: var(--cursor-pointer);
    transition: all 0.3s;
}

.online-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.toggle-option {
    padding: 4px 10px;
    transition: all 0.3s;
    color: #888;
    white-space: nowrap;
}

.toggle-option.active {
    background: var(--c-accent);
    color: white;
}

/* ==========================================================================
           7. 对话标注系统 (Dialogue Annotation System) - 完整升级版
           ========================================================================== */

/* 对话容器基础样式 */
.dialogue-container {
    margin: 15px 0;
    line-height: 1.8;
}

/* 玩家对话引用框 - 紫色主题 */
.dialogue-player {
    background: var(--dialogue-player-bg);
    border-left: none;
    border-radius: 8px;
    padding: 12px 15px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.2);
    position: relative;
}



.dialogue-player .speaker {
    color: var(--dialogue-player-border);
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 6px;
    display: block;
}

.dialogue-player .content {
    color: var(--ui-color-body);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* NPC对话引用框 - 青色主题 */
.dialogue-npc {
    background: var(--dialogue-npc-bg);
    border-left: none;
    border-radius: 8px;
    padding: 12px 15px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(26, 188, 156, 0.2);
    position: relative;
}



.dialogue-npc .speaker {
    color: var(--dialogue-npc-border);
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 6px;
    display: block;
}

.dialogue-npc .content {
    color: var(--ui-color-body);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* 旁白/描述引用框 - 灰色主题 */
.dialogue-narration {
    background: var(--dialogue-narration-bg);
    border-left: none;
    border-radius: 8px;
    padding: 10px 15px;
    margin: 10px 0;
    font-style: italic;
    position: relative;
}



.dialogue-narration .content {
    color: var(--ui-color-label);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* 系统提示引用框 - 蓝色主题 */
.dialogue-system {
    background: var(--dialogue-sys-bg);
    border-left: none;
    border-radius: 8px;
    padding: 12px 15px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
    position: relative;
}



.dialogue-system .speaker {
    color: var(--dialogue-sys-border);
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 6px;
    display: block;
}

.dialogue-system .content {
    color: var(--ui-color-body);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* 内联对话标注样式（用于AI生成的HTML中） */
.speaker-player {
    color: var(--dialogue-player-border) !important;
    font-weight: bold !important;
}

.speaker-npc {
    color: var(--dialogue-npc-border) !important;
    font-weight: bold !important;
}

.speaker-narration {
    color: var(--dialogue-narration-border) !important;
    font-style: italic !important;
}

.speaker-system {
    color: var(--dialogue-sys-border) !important;
    font-weight: bold !important;
}

/* 对话文本内容样式 */
.dialogue-text {
    color: #e0e0e8 !important;
}

/* 响应式优化 */

@media (max-width: 600px) {

    .dialogue-player,
    .dialogue-npc,
    .dialogue-narration,
    .dialogue-system {
        padding: 10px 12px;
        margin: 8px 0;
    }


}

/* ==========================================================================
           8. AI场景生成通用样式 (AI Generated Scene Styles)
           ========================================================================== */

/* 通用场景容器 */
.scene-card {
    border-radius: 15px;
    padding: 20px;
    margin: 15px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border-left: 4px solid transparent;
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.scene-header {
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 修复主页排版混乱的核心样式 */
.ai-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 15px 0;
    position: relative;
    /* 确保不超出父容器 */
    max-width: 100%;
    box-sizing: border-box;
}

.ai-msg-content {
    flex: 1;
    min-width: 0;
    /* 关键：允许Flex子项收缩 */
    max-width: 100%;
    /* 强制最大宽度 */
    overflow-x: auto;
    /* 允许横向滚动而不是撑破布局 */
    word-wrap: break-word;
    /* 强制换行 */
    overflow-wrap: break-word;
}

/* 强制覆盖所有卡片的宽度限制 */
.ai-msg-content .rpg-card,
.ai-msg-content .scene-card,
.ai-msg-content table,
.ai-msg-content img,
.ai-msg-content div {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.scene-body {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
    line-height: 1.7;
    color: #e0e0e8;
}

.scene-actions {
    display: grid;
    gap: 10px;
    margin-top: 15px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

/* 战斗场景 */
.scene-card.battle {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(192, 57, 43, 0.1));
    border-color: rgba(231, 76, 60, 0.3);
    border-left-color: #e74c3c;
    animation: shake 0.5s;
}

.scene-card.battle .scene-header {
    color: #e74c3c;
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
    border-bottom-color: rgba(231, 76, 60, 0.2);
}

.battle-entity {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    border-left: 3px solid #7f8c8d;
}

.battle-entity.enemy {
    background: rgba(255, 75, 92, 0.1);
    border-left-color: #ff4b5c;
}

.battle-entity.player {
    background: rgba(0, 184, 148, 0.1);
    border-left-color: #00b894;
}

.battle-stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 5px;
}

.battle-stat-val {
    font-size: 1.1rem;
    font-weight: bold;
}

.text-danger {
    color: #ff4b5c;
}

.text-success {
    color: #00b894;
}

.text-accent {
    color: #a29bfe;
}

.highlight-danger {
    color: #ff4b5c;
    text-shadow: 0 0 5px #ff4b5c;
}

.health-bar-container {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0;
}

.health-bar-fill {
    height: 100%;
    transition: width 0.3s;
}

.fill-danger {
    background: linear-gradient(90deg, #ff4b5c, #e74c3c);
}

.fill-success {
    background: linear-gradient(90deg, #00b894, #55efc4);
}

/* 探索场景 */
.scene-card.explore {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(142, 68, 173, 0.05));
    border-color: rgba(155, 89, 182, 0.3);
    border-left-color: #9b59b6;
}

.scene-card.explore .scene-header {
    color: #a29bfe;
    border-bottom-color: rgba(155, 89, 182, 0.3);
}

/* NPC交互场景 */
.scene-card.npc-interaction {
    background: linear-gradient(135deg, rgba(26, 188, 156, 0.1), rgba(22, 160, 133, 0.05));
    border-color: rgba(26, 188, 156, 0.3);
    border-left-color: #1abc9c;
}

.scene-card.npc-interaction .scene-header {
    color: #1abc9c;
    border-bottom-color: rgba(26, 188, 156, 0.2);
}

/* ==========================================================================
           9. 聊天与消息选择系统 (Chat & Message Selection)
           ========================================================================== */

/* 禁止“双重气泡/对话标注”外框：任何来自 AI/模板的对话包裹层都强制透明无边框无阴影 */
.d-dialogue-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0;
}

/* 主页 AI 消息：如果内容本身包含对话标注块，则外层不允许再出现“气泡/卡片”视觉 */
.ai-msg-row.no-bubble-wrap .ai-msg-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ai-msg-row.no-bubble-wrap .ai-msg-content::before {
    display: none !important;
}

.ai-msg-row.no-bubble-wrap .ai-msg-content>.rpg-card,
.ai-msg-row.no-bubble-wrap .ai-msg-content>.scene-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 只保留说话人标签，不允许额外气泡框 */
.d-dialogue-label {
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1.1;
    margin: 0 0 8px 0;
}

/* 禁止动态 UI 的卡片基础样式制造“外层气泡框” */
.ai-dynamic-ui-root .d-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 场景块去卡片化：移除左侧饰条、底色、内边距（避免包裹对话产生双层气泡感） */
.ai-dynamic-ui-root .d-scene-plain {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0;
}

/* 对话内容卡只保留一个“内层气泡”：仍然允许左侧色条作为标注 */
.ai-dynamic-ui-root .d-dialogue {
    background: rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    box-shadow: none !important;
    border-left-width: 3px !important;
    border-left-style: solid !important;
}


/* 消息选中复选框 */
.msg-checkbox {
    display: none;
    /* 默认隐藏 */
    cursor: var(--cursor-pointer);
    width: 18px;
    height: 18px;
    accent-color: var(--c-accent);
    flex-shrink: 0;
}

/* 选择模式下显示复选框 */
.chat-modal-body.select-mode .msg-checkbox {
    display: block;
}

.chat-modal-body.select-mode .chat-msg-row,
.chat-modal-body.select-mode .msg-user {
    cursor: var(--cursor-pointer);
    transition: opacity 0.2s;
}

.chat-modal-body.select-mode .chat-msg-row:hover,
.chat-modal-body.select-mode .msg-user:hover {
    opacity: 0.8;
}

/* 线上聊天模式 (Online Chat Mode) */
.chat-modal-body.online-mode {
    background: var(--chat-modal-bg) !important;
    padding: 15px;
    font-family: var(--chat-online-font);
    color: var(--chat-online-color);
}

/* 线上聊天行布局 */
.chat-msg-row {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-start;
    position: relative;
}

.chat-msg-row.self {
    padding-right: 2px;
    flex-direction: row !important;
    /* CRITICAL: Ensure player stays on the right */
}

.offline-npc-bubble {
    background: var(--offline-npc-bg);
    color: var(--offline-npc-color);
    border: 1px solid var(--offline-npc-border);
    border-radius: var(--offline-bubble-radius);
    padding: var(--offline-bubble-padding);
    font-family: var(--ui-font-body);
}

.chat-msg-row.npc {
    padding-left: 2px;
    flex-direction: row !important;
    /* CRITICAL: Ensure NPC stays on the left */
}

/* 头像 */
.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--c-input-bg);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    flex-shrink: 0;
    margin: 0 10px;
    font-family: var(--ui-font-body);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 气泡 */
.chat-bubble {
    background: var(--chat-bubble-default-bg, #fff);
    color: var(--chat-bubble-default-color, #000);
    padding: 10px 14px;
    border-radius: 6px;
    position: relative;
    max-width: 70%;
    word-break: break-all;
    line-height: 1.5;
    font-size: 0.95rem;
    font-family: var(--ui-font-body);
    font-style: normal;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-msg-row.self .chat-bubble {
    background: var(--chat-bubble-self-bg);
    color: var(--chat-bubble-self-color);
    font-family: var(--chat-bubble-self-font);
    font-style: var(--chat-bubble-self-style);
    border-radius: 12px 0 12px 12px;
}

/* NPC对话气泡 - 独立样式 */
.chat-msg-row.npc .chat-bubble {
    background: var(--chat-bubble-npc-bg) !important;
    color: var(--chat-bubble-npc-color) !important;
    font-family: var(--chat-bubble-npc-font);
    font-style: normal !important;
    /* 强制非斜体 */
    border-radius: 0 12px 12px 12px;
    padding: 10px 15px;
    box-shadow: var(--chat-bubble-shadow);
    position: relative;
}

/* 旁白块 - 独立样式 */
.narration-block {
    background: var(--offline-narration-bg) !important;
    color: var(--offline-npc-color);
    font-family: var(--offline-npc-font);
    font-style: italic !important;
    /* 强制斜体 */
    padding: 10px 15px;
    border-radius: 8px;
    border-left: 3px solid var(--dialogue-narration-border);
    margin: 5px 0;
    width: 100%;
    line-height: 1.6;
}

/* 气泡箭头 */
.chat-msg-row.npc .chat-bubble::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 14px;
    border-width: 6px 8px 6px 0;
    border-style: solid;
    border-color: transparent var(--chat-bubble-npc-bg) transparent transparent;
}

.chat-msg-row.self .chat-bubble::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 14px;
    border-width: 6px 0 6px 8px;
    border-style: solid;
    border-color: transparent transparent transparent var(--chat-bubble-self-bg);
}

/* 新增 UI 统一类名 */
.dialogue-modal-box {
    margin: 0;
    max-height: var(--dialogue-modal-max-height);
    display: flex;
    flex-direction: column;
    padding: var(--dialogue-modal-padding);
    background: var(--dialogue-modal-bg);
    border-radius: var(--dialogue-modal-radius);
}

.selection-panel {
    display: none !important;
    padding: var(--selection-panel-padding);
    background: var(--selection-panel-bg);
    /* backdrop-filter: blur(10px); Optimized for performance */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.selection-panel.active {
    display: flex !important;
}

.selection-panel-btn {
    background: var(--selection-btn-bg);
    border: var(--selection-btn-border);
    color: var(--selection-btn-color);
    padding: 4px 10px;
    border-radius: var(--selection-btn-radius);
    font-size: 0.75rem;
    font-family: var(--selection-btn-font);
    cursor: var(--cursor-pointer);
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.selection-panel-btn:hover {
    background: var(--selection-btn-hover-bg);
    color: white;
    border-color: var(--selection-btn-hover-bg);
}

.selection-panel-btn.danger:hover {
    background: var(--c-danger);
    border-color: var(--c-danger);
}

/* [Selection Panel Specifics] */
.selection-info {
    color: var(--selection-info-color, var(--ui-color-title));
    font-family: var(--selection-info-font, var(--ui-font-body));
    font-size: var(--selection-info-size, 0.9rem);
    background: var(--selection-info-bg, transparent);
}

.btn-sel-all {
    background: var(--btn-sel-all-bg, var(--selection-btn-bg));
    color: var(--btn-sel-all-color, var(--selection-btn-color));
    font-family: var(--btn-sel-all-font, var(--selection-btn-font));
    font-style: var(--btn-sel-all-style, normal);
}

.btn-sel-edit {
    background: var(--btn-sel-edit-bg, var(--selection-btn-bg));
    color: var(--btn-sel-edit-color, var(--selection-btn-color));
    font-family: var(--btn-sel-edit-font, var(--selection-btn-font));
    font-style: var(--btn-sel-edit-style, normal);
}

.btn-sel-refresh {
    background: var(--btn-sel-refresh-bg, var(--selection-btn-bg));
    color: var(--btn-sel-refresh-color, var(--selection-btn-color));
    font-family: var(--btn-sel-refresh-font, var(--selection-btn-font));
    font-style: var(--btn-sel-refresh-style, normal);
}

.btn-sel-forward {
    background: var(--btn-sel-forward-bg, var(--selection-btn-bg));
    color: var(--btn-sel-forward-color, var(--selection-btn-color));
    font-family: var(--btn-sel-forward-font, var(--selection-btn-font));
    font-style: var(--btn-sel-forward-style, normal);
}

.btn-sel-delete {
    background: var(--btn-sel-delete-bg, var(--selection-btn-bg));
    color: var(--btn-sel-delete-color, var(--selection-btn-color));
    font-family: var(--btn-sel-delete-font, var(--selection-btn-font));
    font-style: var(--btn-sel-delete-style, normal);
}

.config-card {
    margin: var(--card-config-margin);
    background: var(--card-config-bg);
    padding: var(--card-config-padding);
    border-radius: var(--card-config-radius);
    border: var(--card-config-border);
}

.config-btn {
    min-width: var(--config-btn-min-width);
    font-family: var(--config-btn-font);
    font-style: var(--config-btn-style);
    background: var(--config-btn-bg);
    color: var(--config-btn-color);
    padding: var(--config-btn-padding);
    border-radius: var(--config-btn-radius);
    font-size: var(--config-btn-size);
    font-weight: var(--config-btn-weight);
}

.config-btn-secondary {
    min-width: var(--config-btn-secondary-min-width);
    font-family: var(--config-btn-font);
    font-style: var(--config-btn-style);
    background: var(--config-btn-secondary-bg);
    color: var(--config-btn-secondary-color);
    padding: var(--config-btn-padding);
    border-radius: var(--config-btn-radius);
    font-size: var(--config-btn-size);
    font-weight: var(--config-btn-weight);
}

.npc-detail-btn {
    font-family: var(--npc-detail-btn-font);
    font-style: var(--npc-detail-btn-style);
    background: var(--npc-detail-btn-primary-bg);
    color: var(--npc-detail-btn-primary-color);
    padding: var(--npc-detail-btn-padding);
    border-radius: var(--npc-detail-btn-radius);
    font-size: var(--npc-detail-btn-size);
    font-weight: var(--npc-detail-btn-weight);
}

.npc-detail-btn-secondary {
    font-family: var(--npc-detail-btn-font);
    font-style: var(--npc-detail-btn-style);
    background: var(--npc-detail-btn-secondary-bg);
    color: var(--npc-detail-btn-secondary-color);
    border: var(--npc-detail-btn-secondary-border);
    padding: var(--npc-detail-btn-padding);
    border-radius: var(--npc-detail-btn-radius);
    font-size: var(--npc-detail-btn-size);
    font-weight: var(--npc-detail-btn-weight);
}

.empty-state {
    text-align: center;
    color: var(--empty-state-color);
    padding: var(--empty-state-padding);
    font-family: var(--ui-font-body);
}


.scene-card.npc-interaction .scene-body {
    border-left: 3px solid var(--c-success);
}

.npc-info-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
}

.npc-avatar-small {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--panel-avatar-bg);
    border: 2px solid var(--item-common-border);
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 按钮通用 */
.btn-action {
    border: none;
    padding: 12px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: var(--cursor-pointer);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-action:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-attack {
    background: var(--btn-attack-bg);
    box-shadow: var(--btn-attack-shadow);
}

.btn-defend {
    background: var(--btn-defend-bg);
    box-shadow: var(--btn-defend-shadow);
}

.btn-skill {
    background: var(--btn-skill-bg);
    box-shadow: var(--btn-skill-shadow);
}

.btn-talk {
    background: var(--btn-talk-bg);
    box-shadow: var(--btn-skill-shadow);
}

.btn-explore {
    background: var(--btn-explore-bg);
    box-shadow: var(--btn-defend-shadow);
}

.btn-rest {
    background: var(--btn-rest-bg);
    box-shadow: var(--btn-rest-shadow);
}

.btn-trade {
    background: var(--btn-trade-bg);
    box-shadow: var(--btn-trade-shadow);
}

.btn-leave {
    background: var(--btn-leave-bg);
    color: white;
}

/* =========================================
           10. Refactored Dialogue & Interface Styles (CSS Variables)
           ========================================= */

/* [Settings Specific Buttons] */
.btn-fetch {
    background: var(--btn-fetch-bg, var(--config-btn-bg));
    color: var(--btn-fetch-color, var(--config-btn-color));
    font-family: var(--btn-fetch-font, var(--config-btn-font));
    font-style: var(--btn-fetch-style, var(--config-btn-style));
}

.btn-test {
    background: var(--btn-test-bg, var(--config-btn-bg));
    color: var(--btn-test-color, var(--config-btn-color));
    font-family: var(--btn-test-font, var(--config-btn-font));
    font-style: var(--btn-test-style, var(--config-btn-style));
}

.btn-save-api {
    background: var(--btn-save-api-bg, var(--config-btn-secondary-bg));
    color: var(--btn-save-api-color, var(--config-btn-secondary-color));
    font-family: var(--btn-save-api-font, var(--config-btn-font));
    font-style: var(--btn-save-api-style, var(--config-btn-style));
}

.btn-new-save {
    background: var(--btn-new-save-bg, var(--config-btn-bg));
    color: var(--btn-new-save-color, var(--config-btn-color));
    font-family: var(--btn-new-save-font, var(--config-btn-font));
    font-style: var(--btn-new-save-style, var(--config-btn-style));
}

.btn-quick-save {
    background: var(--btn-quick-save-bg, var(--config-btn-secondary-bg));
    color: var(--btn-quick-save-color, var(--config-btn-secondary-color));
    font-family: var(--btn-quick-save-font, var(--config-btn-font));
    font-style: var(--btn-quick-save-style, var(--config-btn-style));
}

.btn-export {
    background: var(--btn-export-bg, var(--config-btn-secondary-bg));
    color: var(--btn-export-color, var(--config-btn-secondary-color));
    font-family: var(--btn-export-font, var(--config-btn-font));
    font-style: var(--btn-export-style, var(--config-btn-style));
}

.btn-import {
    background: var(--btn-import-bg, var(--config-btn-secondary-bg));
    color: var(--btn-import-color, var(--config-btn-secondary-color));
    font-family: var(--btn-import-font, var(--config-btn-font));
    font-style: var(--btn-import-style, var(--config-btn-style));
}

/* [Player Panel Specific Buttons] */
/* Overrides generic .btn-inventory defined earlier */
.btn-inventory {
    background: var(--btn-inventory-bg, var(--func-btn-bg));
    color: var(--btn-inventory-color, var(--func-btn-color));
    font-family: var(--btn-inventory-font, var(--func-btn-font));
    font-style: var(--btn-inventory-style, var(--func-btn-style));
}

.btn-social {
    background: var(--btn-social-bg, var(--func-btn-bg));
    color: var(--btn-social-color, var(--func-btn-color));
    font-family: var(--btn-social-font, var(--func-btn-font));
    font-style: var(--btn-social-style, var(--func-btn-style));
}

.btn-history {
    background: var(--btn-history-bg, var(--func-btn-bg));
    color: var(--btn-history-color, var(--func-btn-color));
    font-family: var(--btn-history-font, var(--func-btn-font));
    font-style: var(--btn-history-style, var(--func-btn-style));
}

/* [NPC Detail Specific Buttons] */
.btn-npc-chat {
    background: var(--btn-npc-chat-bg, var(--npc-detail-btn-primary-bg));
    color: var(--btn-npc-chat-color, var(--npc-detail-btn-primary-color));
    font-family: var(--btn-npc-chat-font, var(--npc-detail-btn-font));
    font-style: var(--btn-npc-chat-style, var(--npc-detail-btn-style));
}

.btn-npc-relation {
    background: var(--btn-npc-relation-bg, var(--npc-detail-btn-secondary-bg));
    color: var(--btn-npc-relation-color, var(--npc-detail-btn-secondary-color));
    font-family: var(--btn-npc-relation-font, var(--npc-detail-btn-font));
    font-style: var(--btn-npc-relation-style, var(--npc-detail-btn-style));
}

.btn-npc-network {
    background: var(--btn-npc-network-bg, var(--npc-detail-btn-secondary-bg));
    color: var(--btn-npc-network-color, var(--npc-detail-btn-secondary-color));
    font-family: var(--btn-npc-network-font, var(--npc-detail-btn-font));
    font-style: var(--btn-npc-network-style, var(--npc-detail-btn-style));
}

.btn-npc-inventory {
    background: var(--btn-npc-inventory-bg, var(--npc-detail-btn-secondary-bg));
    color: var(--btn-npc-inventory-color, var(--npc-detail-btn-secondary-color));
    font-family: var(--btn-npc-inventory-font, var(--npc-detail-btn-font));
    font-style: var(--btn-npc-inventory-style, var(--npc-detail-btn-style));
}

.btn-npc-history {
    background: var(--btn-npc-history-bg, var(--npc-detail-btn-secondary-bg));
    color: var(--btn-npc-history-color, var(--npc-detail-btn-secondary-color));
    font-family: var(--btn-npc-history-font, var(--npc-detail-btn-font));
    font-style: var(--btn-npc-history-style, var(--npc-detail-btn-style));
}

/* Offline Dialogue Bubble */
.offline-npc-bubble {
    background: var(--offline-npc-bg) !important;
    border: 1px solid var(--offline-npc-border) !important;
    color: var(--offline-npc-color) !important;
    font-family: var(--offline-npc-font) !important;
    font-style: var(--offline-npc-style) !important;
    border-radius: var(--offline-bubble-radius) !important;
    padding: var(--offline-bubble-padding) !important;
    white-space: pre-wrap;
    position: relative;
}

/* User Message Bubble */
/* User Message Bubble */
.msg-user-bubble {
    background: var(--msg-user-bg);
    color: var(--msg-user-color);
    padding: 10px 15px;
    border-radius: var(--msg-user-radius, 12px 12px 0 12px);
    box-shadow: var(--msg-user-shadow, 0 2px 5px rgba(0, 0, 0, 0.2));
    font-family: var(--msg-user-font);
    font-style: var(--msg-user-style);
    white-space: pre-wrap;
    word-break: break-all;
}

/* Narration Block */
.narration-block {
    background: var(--offline-narration-bg);
    border-left: 3px solid var(--dialogue-narration-border);
    color: var(--ui-color-label);
    padding: 10px;
    border-radius: 8px;
    font-style: italic;
    width: 100%;
    margin: 5px 0;
}

/* Offline Modal Interface */
.dialogue-modal-box {
    background: var(--dialogue-modal-bg);
    border-radius: var(--dialogue-modal-radius);
    padding: var(--dialogue-modal-padding);
    display: flex;
    flex-direction: column;
    height: 80vh;
    border: 1px solid var(--c-border);
}

.dialogue-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialogue-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--ui-color-title);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dialogue-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Selection Panel (Refactored) */
.selection-panel {
    background: var(--selection-panel-bg);
    padding: var(--selection-panel-padding);
    display: none;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.selection-panel.active {
    display: flex;
}

.selection-info {
    color: var(--selection-info-color, var(--c-accent));
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

/* Button Refactoring Ensure */
.config-btn {
    background: var(--config-btn-bg);
    color: var(--config-btn-color);
}

.config-btn-secondary {
    background: var(--config-btn-secondary-bg);
    color: var(--config-btn-secondary-color);
    border: 1px solid var(--c-border);
}

/* =========================================
           9. 性能优化与CSS兼容性 (Performance & Compatibility)
           ========================================= */

/* 启用硬件加速 - 优化关键层 */
.modal-box,
.rpg-card,
.scene-card,
.char-header,
.dialogue-modal-box,
.msg-line,
.npc-row,
.settings-card {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 布局重叠保护与兼容性 (Layout Protection) */
.modal-box {
    max-height: 85vh;
    /* 稍微调小一点，确保在各种手机状态栏下可见 */
    overflow-y: auto;
    /* 核心：允许模态框内容过多时滚动，而不是切断或压缩 */
    display: block;
    /* 核心：回归普通块布局，防止 flexbox 压缩内部卡片 */
    -webkit-overflow-scrolling: touch;
}

/* 确保内容区域独立滚动 */
.rpg-text,
.panel-container,
#chat-stream,
#npc-list,
#api-config-list,
#save-list {
    overscroll-behavior: contain;
    /* 防止连锁滚动 */
}

/* 强制GPU渲染背景粒子，减少主线程压力 */
#particles {
    transform: translate3d(0, 0, 0);
}

/* 优化滚动性能 */
#chat-stream,
.chat-modal-body,
.rpg-text,
.panel-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 减少重绘区域 - 布局隔离 */
#app-root {
    contain: layout size style;
    overflow: hidden;
    /* 根容器禁止溢出 */
}

/* 防止大量文本导致的回流卡顿 */
/* 注意：content-visibility 在夸克/百度/QQ/UC等国产浏览器中支持不佳，已移除 */
.msg-content {
    display: block;
}

/* 优化输入框 */
textarea,
input {
    will-change: contents;
}

/* ==========================================================================
           11. 深度定制卡片系统 (Customizable Cards - New v8.0)
           ========================================================================== */

/* 系统设置卡片 */
.settings-card {
    background: var(--settings-card-bg, var(--card-bg-gradient));
    border: var(--settings-card-border, 1px solid var(--c-border));
    box-shadow: var(--settings-card-shadow, none);
    border-radius: var(--settings-card-radius, 12px);
}

.settings-card .rpg-title {
    color: var(--settings-title-color, var(--ui-color-title));
    font-family: var(--settings-title-font, var(--ui-font-title));
    font-size: var(--settings-title-size, 1rem);
    border-bottom: var(--settings-header-border, 1px solid rgba(255, 255, 255, 0.1));
    background: var(--settings-header-bg, transparent);
}

/* NPC 详情卡片 */
.npc-detail-card {
    background: var(--npc-detail-bg, var(--modal-bg));
    border: var(--npc-detail-border, 1px solid var(--modal-border));
    border-radius: var(--npc-detail-radius, 12px);
}

.npc-detail-card .rpg-title {
    background: var(--npc-detail-header-bg, transparent);
    color: var(--npc-detail-header-color, var(--ui-color-title));
    font-family: var(--npc-detail-header-font, var(--ui-font-title));
}

/* NPC 关系卡片 */
.npc-relation-card {
    background: var(--npc-relation-bg, var(--modal-bg));
    border: var(--npc-relation-border, 1px solid var(--modal-border));
}

/* NPC 人脉卡片 */
.npc-network-card {
    background: var(--npc-network-bg, var(--modal-bg));
    border: var(--npc-network-border, 1px solid var(--modal-border));
}

/* NPC 物品卡片 */
.npc-inventory-card {
    background: var(--npc-inventory-bg, var(--modal-bg));
    border: var(--npc-inventory-border, 1px solid var(--modal-border));
}

/* NPC 履历卡片 */
.npc-history-card {
    background: var(--npc-history-bg, var(--modal-bg));
    border: var(--npc-history-border, 1px solid var(--modal-border));
}

/* 玩家背包卡片 */
.player-inventory-card {
    background: var(--player-inventory-bg, var(--modal-bg));
    border: var(--player-inventory-border, 1px solid var(--modal-border));
}

/* 玩家人脉卡片 */
.player-social-card {
    background: var(--player-social-bg, var(--modal-bg));
    border: var(--player-social-border, 1px solid var(--modal-border));
}

/* 玩家履历卡片 */
.player-history-card {
    background: var(--player-history-bg, var(--modal-bg));
    border: var(--player-history-border, 1px solid var(--modal-border));
}

/* 修复关闭按钮光标并增强点击区域 */
.rpg-title .fa-times {
    cursor: var(--cursor-pointer) !important;
    opacity: 0.7;
    transition: 0.2s;
    position: relative;
    z-index: 100;
    padding: 10px;
    margin: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
}

.rpg-title .fa-times:hover {
    opacity: 1;
    transform: scale(1.1);
    color: var(--c-danger);
}

/* 样式存档卡片细节 */
.style-presets-card {
    background: var(--presets-card-bg, rgba(0, 0, 0, 0.2));
    border: var(--presets-card-border, 1px solid rgba(255, 255, 255, 0.05));
    border-radius: var(--presets-card-radius, 8px);
    padding: var(--presets-card-padding, 10px);
    margin-bottom: 10px;
}

.style-presets-card-title {
    font-size: var(--presets-title-size, 0.8rem);
    color: var(--presets-title-color, #ccc);
    font-family: var(--presets-title-font, inherit);
    margin-bottom: 8px;
    font-weight: bold;
}

/* =========================================
   12. 最终优化 (Final Optimizations)
   ========================================= */
#map-viewport {
    touch-action: none;
    /* 修复地图拖拽冲突 */
    will-change: transform;
}

textarea {
    resize: none;
    /* 防止布局破坏 */
}