/* ═══ B平台表格修正（自动注入）═══ */
.rili-markdown-renderer table { display:table!important; table-layout:auto!important; width:100%!important; border-collapse:collapse!important; }
.rili-markdown-renderer table caption { display:table-caption!important; caption-side:top!important; text-align:center!important; padding:8px!important; }
.rili-markdown-renderer thead { display:table-header-group!important; }
.rili-markdown-renderer tbody { display:table-row-group!important; }
.rili-markdown-renderer tr { display:table-row!important; }
.rili-markdown-renderer th, .rili-markdown-renderer td { display:table-cell!important; }

/* ═══ B平台按钮组保护（自动注入 — 防止按钮消失）═══
   原理：B平台消息操作按钮结构为：
   .flex.items-center.gap-1.ml-auto (hover显隐包装)
     └── .bg-muted.rounded.flex.p-0.5 (按钮组容器)
           └── button.rounded-full.size-7 (单个按钮)
   以下规则使用高specificity + !important确保按钮
   不被任何转换后/透传的CSS规则意外隐藏
   ═══════════════════════════════════════════════ */
/* 按钮组容器保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5,
.is-user .bg-muted.rounded.flex.p-0\.5,
.is-assistant .bg-muted.rounded.flex.p-0\.5 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}
/* 单个按钮保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5 > button,
.is-user .bg-muted.rounded.flex.p-0\.5 > button,
.is-assistant .bg-muted.rounded.flex.p-0\.5 > button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  clip: auto !important;
  clip-path: none !important;
}
/* hover显隐包装层保护 — 仅保留B平台原生的opacity过渡 */
.flex.items-center.gap-1.ml-auto.md\:opacity-0.group-hover\:opacity-100 {
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
/* 操作行保护 */
.flex.w-full.items-center.justify-between.gap-2.px-2 {
  display: flex !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* =============================================
   🌸 樱花日和 · 柔光社交 — 日间主题
   适配「误入coser聊天群」互动卡
   ============================================= */

/* ═══════════════════════════════════════════
   第一部分：全局排版基础
   ═══════════════════════════════════════════ */

/* 主容器文字基调 */
.message,
.response,
.assistant-message,
.mes_text,
[data-role="assistant"] {
    font-family:
        "PingFang SC",
        "Hiragino Sans GB",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans SC",
        "Microsoft YaHei",
        sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: #3d3535;
    letter-spacing: 0.3px;
    word-spacing: 1px;
}

/* ═══════════════════════════════════════════
   第二部分：场景头部卡片（Scene Header）
   ═══════════════════════════════════════════ */

.scene-header {
    background: linear-gradient(
        135deg,
        #fff5f7 0%,
        #fce4ec 30%,
        #f3e5f5 70%,
        #e8eaf6 100%
    );
    border: 1px solid rgba(206, 147, 178, 0.35);
    border-left: 5px solid #e48aaa;
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 24px;
    margin-top: 8px;
    box-shadow:
        0 4px 16px rgba(228, 138, 170, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

/* 右上角装饰光晕 */
.scene-header::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 90px;
    height: 90px;
    background: radial-gradient(
        circle,
        rgba(255, 183, 197, 0.25) 0%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
}

/* 左下角装饰光晕 */
.scene-header::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: -25px;
    width: 70px;
    height: 70px;
    background: radial-gradient(
        circle,
        rgba(206, 176, 232, 0.2) 0%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
}

.scene-header p {
    margin: 5px 0;
    font-size: 0.93em;
    color: #5d4157;
    position: relative;
    z-index: 1;
}

/* 场景标题（第一行 📍）加粗突出 */
.scene-header p:first-child {
    font-weight: 700;
    font-size: 1.05em;
    color: #c0577a;
    margin-bottom: 8px;
}

/* 时间行（第二行 🕐） */
.scene-header p:nth-child(2) {
    color: #7e6b8a;
    font-size: 0.88em;
}

/* 氛围行（第三行 🌡️） */
.scene-header p:nth-child(3) {
    color: #8d6e97;
    font-style: italic;
    font-size: 0.88em;
}

/* ═══════════════════════════════════════════
   第三部分：叙事正文排版（<text> 标签）
   ═══════════════════════════════════════════ */

text {
    display: block;
    line-height: 1.9;
    color: #3d3535;
    font-size: 1em;
    padding: 8px 6px;
}

text p {
    margin-bottom: 16px;
    text-align: justify;
}

/* 正文中的强调文字 */
text strong, text b {
    color: #c0577a;
    font-weight: 700;
}

text em, text i {
    color: #8d6e97;
    font-style: italic;
}

/* ═══════════════════════════════════════════
   第四部分：聊天容器与消息气泡
   ═══════════════════════════════════════════ */

/* 聊天区域外框 — 模拟手机聊天窗口 */
.chat-box {
    background: linear-gradient(
        180deg,
        #fef9f4 0%,
        #fdf6f0 100%
    );
    border: 1px solid rgba(206, 147, 178, 0.2);
    border-radius: 20px;
    padding: 20px 16px;
    margin: 20px 0;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.03),
        0 2px 10px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* 聊天窗口顶部装饰条 — 模拟APP标题栏 */
.chat-box::before {
    content: '💬 次元突破口🌀';
    display: block;
    text-align: center;
    font-size: 0.82em;
    color: #b07da0;
    padding: 4px 0 14px;
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(176, 125, 160, 0.2);
    letter-spacing: 1px;
    font-weight: 600;
}

/* 单条消息容器 */
.chat-msg {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    animation: msgSlideIn 0.35s ease-out;
}

/* 玩家自己的消息 — 靠右对齐 */
.chat-msg.user {
    align-items: flex-end;
}

/* 发言人昵称行 */
.chat-name {
    font-size: 0.78em;
    color: #c0577a;
    margin-bottom: 5px;
    margin-left: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-msg.user .chat-name {
    color: #7c6bc4;
    margin-left: 0;
    margin-right: 10px;
    flex-direction: row-reverse;
}

/* 时间戳 */
.chat-time {
    color: #b8a9c1;
    font-size: 0.85em;
    font-weight: 400;
}

/* NPC消息气泡 */
.chat-bubble {
    background: #ffffff;
    color: #3d3535;
    padding: 12px 16px;
    border-radius: 4px 18px 18px 18px;
    max-width: 82%;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04);
    line-height: 1.6;
    word-wrap: break-word;
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

/* 玩家消息气泡 — 薰衣草紫 */
.chat-msg.user .chat-bubble {
    background: linear-gradient(
        135deg,
        #e8d5f5 0%,
        #dcc8f0 100%
    );
    color: #3d3535;
    border-radius: 18px 4px 18px 18px;
    border: 1px solid rgba(124, 107, 196, 0.15);
    box-shadow:
        0 2px 8px rgba(124, 107, 196, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

/* 气泡内的表情包/图片描述 */
.chat-bubble em {
    display: inline-block;
    background: #fef3e2;
    border: 1px dashed #e0c9a0;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.88em;
    color: #9e8a6a;
    font-style: italic;
    margin: 4px 0;
}

/* 系统消息/提示消息 */
.chat-msg.system {
    align-items: center;
}

.chat-msg.system .chat-bubble {
    background: rgba(232, 213, 245, 0.3);
    color: #8d6e97;
    font-size: 0.82em;
    border-radius: 12px;
    max-width: 70%;
    text-align: center;
    border: 1px dashed rgba(141, 110, 151, 0.25);
    box-shadow: none;
}

/* 消息入场动画 */
@keyframes msgSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════
   第五部分：NPC昵称颜色区分系统
   为每位NPC分配不同的名字颜色
   通过 chat-name 中包含的文字自动染色
   ═══════════════════════════════════════════ */

/* NPC1 — 玫瑰粉 */
.chat-msg.npc1 .chat-name {
    color: #d4617b;
}
.chat-msg.npc1 .chat-bubble {
    border-left: 3px solid rgba(212, 97, 123, 0.3);
}

/* NPC2 — 琥珀橘 */
.chat-msg.npc2 .chat-name {
    color: #d48a3e;
}
.chat-msg.npc2 .chat-bubble {
    border-left: 3px solid rgba(212, 138, 62, 0.3);
}

/* NPC3 — 森林绿 */
.chat-msg.npc3 .chat-name {
    color: #5ba67d;
}
.chat-msg.npc3 .chat-bubble {
    border-left: 3px solid rgba(91, 166, 125, 0.3);
}

/* NPC4 — 星空蓝 */
.chat-msg.npc4 .chat-name {
    color: #5b8ec4;
}
.chat-msg.npc4 .chat-bubble {
    border-left: 3px solid rgba(91, 142, 196, 0.3);
}

/* NPC5 — 紫藤紫 */
.chat-msg.npc5 .chat-name {
    color: #9b6bb4;
}
.chat-msg.npc5 .chat-bubble {
    border-left: 3px solid rgba(155, 107, 180, 0.3);
}

/* ═══════════════════════════════════════════
   第六部分：选项交互区
   ═══════════════════════════════════════════ */

.options {
    background: linear-gradient(
        135deg,
        #fef9f4 0%,
        #fdf2f6 50%,
        #f5f0fa 100%
    );
    border: 1px solid rgba(206, 147, 178, 0.25);
    border-radius: 16px;
    padding: 18px 16px;
    margin: 24px 0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

/* 选项按钮 */
.options p {
    margin: 8px 0;
    padding: 13px 18px;
    background: #ffffff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #4a3f50;
    border: 1px solid rgba(206, 147, 178, 0.15);
    border-left: 4px solid transparent;
    font-size: 0.93em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

/* 选项悬浮效果 */
.options p:hover {
    background: linear-gradient(
        135deg,
        #fff5f7 0%,
        #fce4ec 100%
    );
    border-left: 4px solid #e48aaa;
    transform: translateX(5px);
    box-shadow: 0 4px 14px rgba(228, 138, 170, 0.15);
    color: #5d4157;
}

/* 选项悬浮时的微光效果 */
.options p:hover::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 183, 197, 0.1)
    );
    pointer-events: none;
}

/* 分割线（首尾两个p）样式重置 */
.options p:first-child,
.options p:last-child {
    background: transparent !important;
    color: #cdb8d4;
    text-align: center;
    pointer-events: none;
    border: none !important;
    padding: 2px 0;
    margin: 4px 0;
    box-shadow: none !important;
    transform: none !important;
    font-size: 0.85em;
    letter-spacing: 3px;
}

/* 选项编号圆圈样式 — 让①②③④⑤更醒目 */
.options p:not(:first-child):not(:last-child)::before {
    display: inline-block;
    min-width: 1.2em;
    color: #c0577a;
    font-weight: 700;
}

/* ═══════════════════════════════════════════
   第七部分：折叠面板（details / summary）
   ═══════════════════════════════════════════ */

details {
    background: #fefcfa;
    border: 1px solid rgba(206, 147, 178, 0.2);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 4px 18px;
    transition: all 0.35s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

details:hover {
    border-color: rgba(206, 147, 178, 0.35);
    box-shadow: 0 2px 8px rgba(228, 138, 170, 0.08);
}

summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 0;
    font-weight: 700;
    color: #c0577a;
    font-size: 1em;
    display: flex;
    align-items: center;
    user-select: none;
    transition: color 0.3s ease;
}

summary:hover {
    color: #a04468;
}

/* 隐藏默认三角 */
summary::-webkit-details-marker {
    display: none;
}
summary::marker {
    display: none;
    content: '';
}

/* 自定义折叠指示符 */
summary::before {
    content: '❀';
    margin-right: 10px;
    font-size: 1.1em;
    transition: transform 0.4s ease;
    display: inline-block;
}

details[open] summary::before {
    transform: rotate(135deg);
}

/* 展开后面板高亮 */
details[open] {
    padding-bottom: 18px;
    background: linear-gradient(
        180deg,
        #fefcfa 0%,
        #fdf5f8 100%
    );
    border-color: rgba(228, 138, 170, 0.3);
    box-shadow:
        0 3px 12px rgba(228, 138, 170, 0.08),
        inset 0 -2px 8px rgba(228, 138, 170, 0.03);
}

details[open] summary {
    border-bottom: 1px solid rgba(206, 147, 178, 0.15);
    padding-bottom: 12px;
    margin-bottom: 8px;
}

/* 面板内文字 */
details p,
details ul,
details li {
    color: #4a3f50;
    font-size: 0.9em;
    line-height: 1.75;
}

details li {
    margin-bottom: 4px;
}

/* 面板内无序列表圆点 */
details ul {
    list-style: none;
    padding-left: 0;
}

details ul li::before {
    content: '◦ ';
    color: #d4a0b5;
    font-weight: bold;
    margin-right: 4px;
}

/* ═══════════════════════════════════════════
   第八部分：面板内小标题（h3 — NPC名字等）
   ═══════════════════════════════════════════ */

details h3 {
    font-size: 0.95em;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* 📊 主角状态面板的h3 */
details:nth-of-type(1) h3 {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    color: #4a7c59;
    border-left: 4px solid #81c784;
}

/* 💕 NPC关系面板的h3 — 交替配色让5位NPC视觉区分 */
details:nth-of-type(2) h3:nth-of-type(1) {
    background: linear-gradient(135deg, #fce4ec 0%, #fff0f3 100%);
    color: #c0577a;
    border-left: 4px solid #e48aaa;
}

details:nth-of-type(2) h3:nth-of-type(2) {
    background: linear-gradient(135deg, #fff3e0 0%, #fff8f0 100%);
    color: #c4843e;
    border-left: 4px solid #e8a85c;
}

details:nth-of-type(2) h3:nth-of-type(3) {
    background: linear-gradient(135deg, #e8f5e9 0%, #f0faf2 100%);
    color: #4a7c59;
    border-left: 4px solid #81c784;
}

details:nth-of-type(2) h3:nth-of-type(4) {
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
    color: #4a7499;
    border-left: 4px solid #64b5f6;
}

details:nth-of-type(2) h3:nth-of-type(5) {
    background: linear-gradient(135deg, #f3e5f5 0%, #f9f0fc 100%);
    color: #7b5a8e;
    border-left: 4px solid #ba68c8;
}

/* 🧠 记忆区面板的h3 */
details:nth-of-type(3) h3 {
    background: linear-gradient(135deg, #e8eaf6 0%, #f0f1fa 100%);
    color: #5c6099;
    border-left: 4px solid #7986cb;
}

/* 📡 群生态速报面板的h3 */
details:nth-of-type(4) h3 {
    background: linear-gradient(135deg, #e0f7fa 0%, #f0fcfd 100%);
    color: #3d8a8a;
    border-left: 4px solid #4dd0e1;
}

/* ═══════════════════════════════════════════
   第九部分：数值关键词高亮
   让好感度/暧昧值等数字在面板中更醒目
   ═══════════════════════════════════════════ */

/* 面板内加粗文字（数值名称）*/
details strong, details b {
    color: #c0577a;
    font-weight: 700;
}

/* 面板内斜体（补充说明）*/
details em, details i {
    color: #8d6e97;
    font-style: italic;
    font-size: 0.9em;
}

/* ═══════════════════════════════════════════
   第十部分：分割线与装饰性元素
   ═══════════════════════════════════════════ */

hr {
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(228, 138, 170, 0.3) 20%,
        rgba(228, 138, 170, 0.3) 80%,
        transparent 100%
    );
    margin: 24px 0;
}

/* 引用块 — 用于回忆/内心独白片段 */
blockquote {
    background: linear-gradient(
        135deg,
        #fef9f4 0%,
        #fdf5f8 100%
    );
    border-left: 4px solid #e8b4c8;
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin: 16px 0;
    color: #6e5770;
    font-style: italic;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

blockquote::before {
    content: '💭 ';
    font-style: normal;
}

/* 行内代码 — 用于专业术语/cos术语标注 */
code {
    background: #f3e5f5;
    color: #7b5a8e;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: inherit;
    border: 1px solid rgba(186, 104, 200, 0.15);
}

/* ═══════════════════════════════════════════
   第十一部分：表格样式（数值表格适用）
   ═══════════════════════════════════════════ */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    margin: 16px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(206, 147, 178, 0.2);
}

thead th {
    background: linear-gradient(
        135deg,
        #fce4ec 0%,
        #f3e5f5 100%
    );
    color: #5d4157;
    font-weight: 700;
    padding: 12px 14px;
    font-size: 0.88em;
    text-align: left;
    border-bottom: 2px solid rgba(228, 138, 170, 0.2);
}

tbody td {
    padding: 10px 14px;
    background: #fefcfa;
    font-size: 0.88em;
    color: #4a3f50;
    border-bottom: 1px solid rgba(206, 147, 178, 0.1);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover td {
    background: #fff5f7;
}

/* ═══════════════════════════════════════════
   第十二部分：滚动条美化
   ═══════════════════════════════════════════ */

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

::-webkit-scrollbar-track {
    background: #fdf5f8;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #e8b4c8;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d4899f;
}

/* ═══════════════════════════════════════════
   第十三部分：特殊场景标记（可选增强）
   通过在正文中添加class来切换场景氛围色
   ═══════════════════════════════════════════ */

/* 暧昧场景 — 粉红加深 */
.scene-header.romantic {
    background: linear-gradient(
        135deg,
        #fce4ec 0%,
        #f8bbd0 40%,
        #f3e5f5 100%
    );
    border-left-color: #e91e63;
}

/* 日常欢脱场景 — 明亮暖黄 */
.scene-header.daily {
    background: linear-gradient(
        135deg,
        #fffde7 0%,
        #fff9c4 40%,
        #fff3e0 100%
    );
    border-left-color: #ffb74d;
}

/* 紧张/冲突场景 — 灰蓝冷调 */
.scene-header.tension {
    background: linear-gradient(
        135deg,
        #eceff1 0%,
        #e3f2fd 40%,
        #e8eaf6 100%
    );
    border-left-color: #78909c;
}

/* 深夜连麦场景 — 夜幕暗调 */
.scene-header.night {
    background: linear-gradient(
        135deg,
        #4a3f5e 0%,
        #3d3555 40%,
        #352d4a 100%
    );
    border-left-color: #b39ddb;
}
.scene-header.night p {
    color: #d7cfe6;
}
.scene-header.night p:first-child {
    color: #e8b4c8;
}

/* ═══════════════════════════════════════════
   第十四部分：思维链隐藏
   确保AI的推演过程不会显示给玩家
   ═══════════════════════════════════════════ */

/* HTML注释本身不会渲染，这里是双保险 */
think, .think, [data-think] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    max-height: 0 !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════
   第十五部分：进度条/数值条可视化
   在NPC面板中如果AI输出了数值，用背景渐变
   直观表示数值高低
   ═══════════════════════════════════════════ */

/* 好感度相关数值行 — 如果AI用了<span class="bar-XX">格式 */
.bar-low {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #ffcdd2 0%,
        #ffcdd2 var(--val, 20%),
        #f5f5f5 var(--val, 20%)
    );
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    color: #c0577a;
    border: 1px solid rgba(255, 205, 210, 0.5);
}

.bar-mid {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #ffe0b2 0%,
        #ffe0b2 var(--val, 50%),
        #f5f5f5 var(--val, 50%)
    );
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    color: #c4843e;
    border: 1px solid rgba(255, 224, 178, 0.5);
}

.bar-high {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #f8bbd0 0%,
        #f8bbd0 var(--val, 80%),
        #f5f5f5 var(--val, 80%)
    );
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    color: #ad1457;
    border: 1px solid rgba(248, 187, 208, 0.5);
}

/* ═══════════════════════════════════════════
   第十六部分：语音条模拟
   群聊中NPC发语音时的视觉样式
   ═══════════════════════════════════════════ */

.voice-msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(
        90deg,
        #f3e5f5 0%,
        #fce4ec 100%
    );
    padding: 8px 16px;
    border-radius: 18px;
    color: #7b5a8e;
    font-size: 0.88em;
    min-width: 120px;
}

.voice-msg::before {
    content: '🎙️';
    font-size: 1.1em;
}

.voice-msg::after {
    content: '〰〰〰';
    letter-spacing: 2px;
    color: #ba68c8;
    font-size: 0.8em;
    animation: voiceWave 1.5s ease-in-out infinite;
}

@keyframes voiceWave {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════════════
   第十七部分：图片/表情包描述框
   当AI描述某张表情包或图片时的容器
   ═══════════════════════════════════════════ */

.sticker {
    display: inline-block;
    background: #fef9f4;
    border: 2px dashed #e8b4c8;
    border-radius: 14px;
    padding: 16px 22px;
    margin: 6px 0;
    text-align: center;
    color: #8d6e97;
    font-size: 0.85em;
    font-style: italic;
    min-width: 100px;
    max-width: 200px;
}

.sticker::before {
    content: '🖼️ ';
    font-style: normal;
}

/* ═══════════════════════════════════════════
   第十八部分：@提及样式
   群聊中@某人时的高亮
   ═══════════════════════════════════════════ */

.mention {
    background: linear-gradient(
        135deg,
        rgba(228, 138, 170, 0.15) 0%,
        rgba(186, 104, 200, 0.15) 100%
    );
    color: #c0577a;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.92em;
}

/* ═══════════════════════════════════════════
   第十九部分：已撤回消息样式
   ═══════════════════════════════════════════ */

.chat-msg.recalled .chat-bubble {
    background: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.1);
    color: #b8a9c1;
    font-size: 0.82em;
    font-style: italic;
    box-shadow: none;
    text-align: center;
}

.chat-msg.recalled .chat-bubble::before {
    content: '⤺ ';
}

/* ═══════════════════════════════════════════
   第二十部分：红包/群投票等特殊消息卡片
   ═══════════════════════════════════════════ */

/* 红包消息 */
.red-packet {
    background: linear-gradient(
        135deg,
        #ff8a65 0%,
        #ef5350 100%
    );
    color: #fff;
    padding: 14px 20px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    box-shadow: 0 3px 10px rgba(239, 83, 80, 0.25);
    max-width: 200px;
}

.red-packet::before {
    content: '🧧';
    font-size: 1.6em;
}

/* 投票卡片 */
.poll-card {
    background: #ffffff;
    border: 1px solid rgba(206, 147, 178, 0.25);
    border-radius: 14px;
    padding: 16px 18px;
    max-width: 280px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.poll-card .poll-title {
    font-weight: 700;
    color: #5d4157;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.poll-card .poll-option {
    background: #fef9f4;
    border: 1px solid rgba(206, 147, 178, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 6px 0;
    font-size: 0.85em;
    color: #4a3f50;
    cursor: pointer;
    transition: all 0.2s ease;
}

.poll-card .poll-option:hover {
    background: #fce4ec;
    border-color: #e48aaa;
}

/* ═══════════════════════════════════════════
   第二十一部分：通知栏/系统提示条
   如"XXX邀请XXX加入了群聊"
   ═══════════════════════════════════════════ */

.sys-notice {
    text-align: center;
    color: #b8a9c1;
    font-size: 0.78em;
    padding: 8px 0;
    margin: 12px 0;
    position: relative;
}

.sys-notice::before,
.sys-notice::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 1px;
    background: rgba(184, 169, 193, 0.3);
    vertical-align: middle;
    margin: 0 10px;
}

/* ═══════════════════════════════════════════
   第二十二部分：关系阶段徽章
   在NPC面板中关系阶段后添加视觉标记
   ═══════════════════════════════════════════ */

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.badge.stranger {
    background: #f5f5f5;
    color: #9e9e9e;
    border: 1px solid #e0e0e0;
}

.badge.acquaintance {
    background: #e3f2fd;
    color: #5b8ec4;
    border: 1px solid rgba(91, 142, 196, 0.3);
}

.badge.friend {
    background: #e8f5e9;
    color: #5ba67d;
    border: 1px solid rgba(91, 166, 125, 0.3);
}

.badge.close-friend {
    background: #fff3e0;
    color: #d48a3e;
    border: 1px solid rgba(212, 138, 62, 0.3);
}

.badge.crush {
    background: #fce4ec;
    color: #c0577a;
    border: 1px solid rgba(192, 87, 122, 0.3);
}

.badge.lover {
    background: linear-gradient(
        135deg,
        #fce4ec 0%,
        #f3e5f5 100%
    );
    color: #ad1457;
    border: 1px solid rgba(173, 20, 87, 0.3);
    box-shadow: 0 0 8px rgba(173, 20, 87, 0.1);
}

/* ═══════════════════════════════════════════
   第二十三部分：朋友圈/动态卡片
   NPC发的社交媒体动态展示
   ═══════════════════════════════════════════ */

.moment-card {
    background: #ffffff;
    border: 1px solid rgba(206, 147, 178, 0.18);
    border-radius: 14px;
    padding: 16px 18px;
    margin: 14px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    max-width: 360px;
}

.moment-card .moment-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(206, 147, 178, 0.1);
}

.moment-card .moment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #fce4ec,
        #f3e5f5
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}

.moment-card .moment-name {
    font-weight: 700;
    color: #5d4157;
    font-size: 0.9em;
}

.moment-card .moment-time {
    font-size: 0.75em;
    color: #b8a9c1;
}

.moment-card .moment-content {
    color: #3d3535;
    font-size: 0.9em;
    line-height: 1.65;
    margin-bottom: 10px;
}

.moment-card .moment-img {
    background: #fef3e2;
    border: 2px dashed #e0c9a0;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: #9e8a6a;
    font-style: italic;
    font-size: 0.82em;
    margin-bottom: 10px;
}

.moment-card .moment-actions {
    display: flex;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid rgba(206, 147, 178, 0.1);
    font-size: 0.8em;
    color: #b8a9c1;
}

/* ═══════════════════════════════════════════
   第二十四部分：私聊界面切换标识
   当场景从群聊切到私聊时的视觉区分
   ═══════════════════════════════════════════ */

.chat-box.private {
    background: linear-gradient(
        180deg,
        #f9f4fe 0%,
        #f5eefa 100%
    );
    border: 1px solid rgba(186, 104, 200, 0.2);
}

.chat-box.private::before {
    content: '🔒 私聊';
    color: #9b6bb4;
    border-bottom-color: rgba(155, 107, 180, 0.2);
}

/* ═══════════════════════════════════════════
   第二十五部分：NPC在线状态指示灯
   ═══════════════════════════════════════════ */

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.status-dot.online {
    background: #66bb6a;
    box-shadow: 0 0 6px rgba(102, 187, 106, 0.4);
}

.status-dot.offline {
    background: #bdbdbd;
}

.status-dot.busy {
    background: #ff7043;
    box-shadow: 0 0 6px rgba(255, 112, 67, 0.4);
}

.status-dot.dnd {
    background: #ef5350;
    box-shadow: 0 0 6px rgba(239, 83, 80, 0.4);
}

/* ═══════════════════════════════════════════
   第二十六部分：打字中动画
   ═══════════════════════════════════════════ */

.typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: #f5f5f5;
    border-radius: 18px;
    margin: 4px 0;
}

.typing span {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #d4a0b5;
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing span:nth-child(1) { animation-delay: 0s; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════
   第二十七部分：吃醋/暧昧等情绪浮层
   当NPC进入特定情绪时气泡外围发光
   ═══════════════════════════════════════════ */

/* 暧昧中 — 粉色柔光 */
.chat-msg.mood-flirty .chat-bubble {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 12px rgba(228, 138, 170, 0.2);
    border-color: rgba(228, 138, 170, 0.25);
}

/* 吃醋中 — 橙色暗涌 */
.chat-msg.mood-jealous .chat-bubble {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 12px rgba(255, 152, 0, 0.18);
    border-color: rgba(255, 152, 0, 0.2);
}

/* 生气中 — 红色警告 */
.chat-msg.mood-angry .chat-bubble {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 12px rgba(239, 83, 80, 0.2);
    border-color: rgba(239, 83, 80, 0.2);
}

/* 害羞中 — 玫瑰色颤抖 */
.chat-msg.mood-shy .chat-bubble {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 14px rgba(240, 98, 146, 0.2);
    animation: shyTremble 0.4s ease-in-out;
}

@keyframes shyTremble {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* 感动/温暖 — 金色暖光 */
.chat-msg.mood-warm .chat-bubble {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 14px rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.2);
}

/* ═══════════════════════════════════════════
   第二十八部分：响应式适配
   确保在不同屏幕宽度下都能正常显示
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .scene-header {
        padding: 14px 16px;
        border-radius: 12px;
    }

    .chat-box {
        padding: 14px 10px;
        border-radius: 14px;
    }

    .chat-bubble {
        max-width: 90%;
        padding: 10px 13px;
        font-size: 0.92em;
    }

    .options p {
        padding: 11px 14px;
        font-size: 0.9em;
    }

    details {
        padding: 4px 12px;
    }

    summary {
        font-size: 0.95em;
        padding: 12px 0;
    }

    .moment-card {
        max-width: 100%;
    }

    details h3 {
        font-size: 0.9em;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .scene-header p {
        font-size: 0.85em;
    }

    .chat-name {
        font-size: 0.72em;
    }

    .chat-bubble {
        max-width: 92%;
        font-size: 0.88em;
        padding: 9px 11px;
    }

    .options p {
        padding: 10px 12px;
        font-size: 0.87em;
    }

    text {
        font-size: 0.93em;
        line-height: 1.75;
    }
}

/* ═══════════════════════════════════════════
   第二十九部分：过渡与微交互
   ═══════════════════════════════════════════ */

/* 所有交互元素的统一过渡 */
.options p,
details,
summary,
.chat-bubble,
.poll-card .poll-option,
.badge {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 面板标题悬浮亮色 */
details h3:hover {
    filter: brightness(1.05);
}

/* 气泡悬浮微浮效果 */
.chat-bubble:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 徽章悬浮放大 */
.badge:hover {
    transform: scale(1.05);
}

/* ═══════════════════════════════════════════
   第三十部分：打印样式（备用）
   万一有人想截图/打印存档
   ═══════════════════════════════════════════ */

@media print {
    .options {
        border: 1px solid #ccc;
    }

    .options p:hover {
        transform: none;
        box-shadow: none;
    }

    details {
        border: 1px solid #ddd;
    }

    .chat-box {
        border: 1px solid #ddd;
        box-shadow: none;
    }

    .scene-header {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .chat-bubble:hover {
        transform: none;
        box-shadow: none;
    }
}