/* =======================================================
   1. 全局与底层 UI 隐藏 (碧蓝之海：青春海洋风)
======================================================= */
[class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] { display: none !important; }

/* 🌟 玩家气泡 (靠右、阳光沙滩金) */
.is-user { display: flex !important; justify-content: flex-end !important; width: 100% !important; padding-right: 10px !important; }
.is-user > .border.border-muted {
    background: #FFF9E6 !important; 
    border: 4px solid #FFB703 !important; 
    box-shadow: -6px 6px 0px rgba(255, 183, 3, 0.4) !important; 
    border-radius: 18px 0 18px 18px !important; /* 气泡尾巴朝右 */
    position: relative !important;
    overflow: visible !important;
    margin-left: 20% !important; /* 限制最大宽度 */
}

/* 🌟 助手气泡 (靠左、清爽海风蓝) */
.is-assistant { display: flex !important; justify-content: flex-start !important; width: 100% !important; padding-left: 10px !important; }
.is-assistant > .border.border-muted {
    background: #F4FBFF !important; 
    border: 4px solid #102A43 !important; 
    box-shadow: 6px 6px 0px #0077B6 !important; 
    border-radius: 0 18px 18px 18px !important; /* 气泡尾巴朝左 */
    position: relative !important;
    overflow: visible !important;
    margin-right: 10% !important;
}

/* 气泡顶部的夏日手账胶带点缀 */
.is-user > .border.border-muted::before { content: '' !important; position: absolute !important; top: -10px !important; right: 20px !important; width: 40px !important; height: 14px !important; background: rgba(0, 180, 216, 0.9) !important; border: 3px solid #102A43 !important; transform: rotate(4deg) !important; z-index: 10 !important; }
.is-assistant > .border.border-muted::before { content: '' !important; position: absolute !important; top: -10px !important; left: 20px !important; width: 40px !important; height: 14px !important; background: rgba(255, 183, 3, 0.9) !important; border: 3px solid #102A43 !important; transform: rotate(-3deg) !important; z-index: 10 !important; }

.markdown-body, .rili-markdown-renderer {
    font-size: 1.15rem !important; line-height: 1.7 !important;
    color: #0B192C !important; 
    font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", "Marker Felt", sans-serif !important;
    font-weight: 700 !important; text-shadow: none !important; z-index: 1 !important;
}
.markdown-body strong, .rili-markdown-renderer strong { color: #102A43 !important; font-weight: 900 !important; background: #48CAE4 !important; padding: 2px 6px !important; border: 2px solid #102A43 !important; border-radius: 4px !important; box-shadow: 2px 2px 0 #102A43 !important; display: inline-block !important; }

/* =========================================
   2. 顶部栏、底部输入栏与按钮 (青春海洋风美化)
========================================= */
header, .sticky.top-0, [class*="sticky"][class*="top-0"] { background: rgba(255,255,255,0.8) !important; backdrop-filter: blur(10px) !important; border-bottom: 3px dashed #00B4D8 !important; box-shadow: 0 4px 15px rgba(0,180,216,0.1) !important; }
#ai-model-selector .group.flex.items-center { background: #E0F4FF !important; border: 3px solid #0077B6 !important; border-radius: 20px !important; box-shadow: 0 4px 0 #0077B6 !important; transition: all 0.2s ease !important; padding: 4px 12px !important; }
#ai-model-selector .group.flex.items-center:hover { background: #00B4D8 !important; color: #fff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 0 #0077B6 !important; }
#ai-model-selector .truncate.text-\[13px\] { font-weight: 900 !important; text-transform: uppercase !important; color: #102A43 !important; }

.bg-gradient-to-t { background: transparent !important; }
#ai-chat-bottom-input { background: transparent !important; }

/* 冲浪板风格输入框 */
textarea, input[type="text"] { 
    background: #F4FBFF !important; 
    border: 3px solid #00B4D8 !important; 
    border-radius: 16px !important; 
    color: #102A43 !important; 
    font-weight: 700 !important; 
    box-shadow: 0 6px 0 rgba(0, 180, 216, 0.2) !important; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
}
textarea:focus, input[type="text"]:focus { 
    background: #fff !important;
    border-color: #FFB703 !important;
    box-shadow: 0 8px 15px rgba(255, 183, 3, 0.3), 0 6px 0 #FFB703 !important; 
    outline: none !important; 
    transform: translateY(-2px) !important; 
}

/* 青春感按钮 */
button, .menu_button { 
    background: #00B4D8 !important; 
    border: 2px solid #102A43 !important; 
    border-radius: 12px !important; 
    color: #fff !important; 
    font-weight: 900 !important; 
    box-shadow: 0 4px 0 #102A43 !important; 
    transition: all 0.2s ease !important; 
}
button:hover, .menu_button:hover { 
    background: #FFB703 !important; 
    color: #102A43 !important; 
    box-shadow: 0 2px 0 #102A43 !important; 
    transform: translateY(2px) !important; 
}

/* =======================================================
   3. 虚数终端面板 UI & 🌟 2x2 对称网格布局
======================================================= */
.markdown-body .panel-grid > p, .markdown-body .scene-status-card > p, .rili-markdown-renderer .panel-grid > p, .rili-markdown-renderer .scene-status-card > p { display: contents !important; }

.markdown-body .scene-status-card, .rili-markdown-renderer .scene-status-card { background: #E0F4FF !important; border: 4px solid #102A43 !important; border-radius: 12px !important; padding: 15px !important; margin-bottom: 25px !important; box-shadow: 6px 6px 0 #0077B6 !important; position: relative !important; }
.markdown-body .scene-status-card::before, .rili-markdown-renderer .scene-status-card::before { content: 'SYSTEM / 潜水日志'; position: absolute; top: -14px; left: 15px; background: #102A43; color: #fff; padding: 2px 12px; font-size: 12px; font-weight: 900; border-radius: 6px; }

/* 🌟 核心网格容器 (2x2 完美对称) */
.markdown-body .panel-grid, .rili-markdown-renderer .panel-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    grid-template-rows: minmax(110px, auto) minmax(110px, auto) !important; 
    gap: 15px !important; 
    width: 100% !important; 
    box-sizing: border-box !important; 
    margin-bottom: 35px !important; 
}

/* 🌟 闭合状态：微倾斜对称排版 */
.markdown-body .grid-item, .rili-markdown-renderer .grid-item { margin: 0 !important; box-sizing: border-box !important; min-width: 0 !important; background: #fff !important; border: 4px solid #102A43 !important; border-radius: 12px !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; box-shadow: 6px 6px 0 #102A43 !important; position: relative !important; overflow: hidden !important; }

/* 1. 世界 (左上) */
.markdown-body .grid-item:nth-child(1):not([open]), .rili-markdown-renderer .grid-item:nth-child(1):not([open]) { grid-area: 1 / 1 / 2 / 2 !important; transform: rotate(-2deg) !important; z-index: 2; }
/* 2. 档案 (右上) */
.markdown-body .grid-item:nth-child(2):not([open]), .rili-markdown-renderer .grid-item:nth-child(2):not([open]) { grid-area: 1 / 2 / 2 / 3 !important; transform: rotate(1.5deg) !important; z-index: 1; }
/* 3. 羁绊 (左下) */
.markdown-body .grid-item:nth-child(3):not([open]), .rili-markdown-renderer .grid-item:nth-child(3):not([open]) { grid-area: 2 / 1 / 3 / 2 !important; transform: rotate(1.5deg) !important; z-index: 3; }
/* 4. 记忆 (右下) */
.markdown-body .grid-item:nth-child(4):not([open]), .rili-markdown-renderer .grid-item:nth-child(4):not([open]) { grid-area: 2 / 2 / 3 / 3 !important; transform: rotate(-1.5deg) !important; z-index: 2; }

/* 闭合时的悬浮动效 */
.markdown-body .grid-item:not([open]):hover, .rili-markdown-renderer .grid-item:not([open]):hover { transform: scale(1.05) rotate(0deg) !important; box-shadow: 10px 10px 0 #0077B6 !important; z-index: 10 !important; }

/* =======================================================
   🔥 标题框夏日色彩注入 (居中大字)
======================================================= */
.markdown-body .grid-item:not([open]) .fold-header, .rili-markdown-renderer .grid-item:not([open]) .fold-header { 
    font-size: 0 !important; 
    cursor: pointer !important; 
    display: block !important; 
    width: 100% !important; 
    height: 100% !important; 
    min-height: 110px !important; 
    border-bottom: none !important; 
    position: relative;
}

/* 统一的居中大字样式 */
.markdown-body .grid-item:not([open]) .fold-header::before, .rili-markdown-renderer .grid-item:not([open]) .fold-header::before {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #fff !important; font-size: 2.2rem !important; font-weight: 900 !important;
    letter-spacing: 12px !important; text-transform: uppercase !important; text-shadow: 4px 4px 0 #102A43 !important;
    pointer-events: none !important; transition: all 0.2s ease !important;
    width: 100%; text-align: center; margin-left: 6px; /* 补偿letter-spacing引起的偏移 */
}
.markdown-body .grid-item:not([open]):hover .fold-header::before, .rili-markdown-renderer .grid-item:not([open]):hover .fold-header::before { transform: translate(-50%, -50%) scale(1.1) !important; text-shadow: 5px 5px 0 #102A43 !important; }

/* 🎨 碧蓝之海专属调色盘 (4宫格) */
.markdown-body .grid-item:nth-child(1) .fold-header, .rili-markdown-renderer .grid-item:nth-child(1) .fold-header { background: #00B4D8 !important; } /* 清澈水蓝 */
.markdown-body .grid-item:nth-child(1):not([open]) .fold-header::before, .rili-markdown-renderer .grid-item:nth-child(1):not([open]) .fold-header::before { content: '世界'; }

.markdown-body .grid-item:nth-child(2) .fold-header, .rili-markdown-renderer .grid-item:nth-child(2) .fold-header { background: #FFB703 !important; } /* 阳光金 */
.markdown-body .grid-item:nth-child(2):not([open]) .fold-header::before, .rili-markdown-renderer .grid-item:nth-child(2):not([open]) .fold-header::before { content: '档案'; }

.markdown-body .grid-item:nth-child(3) .fold-header, .rili-markdown-renderer .grid-item:nth-child(3) .fold-header { background: #06D6A0 !important; } /* 青春绿 */
.markdown-body .grid-item:nth-child(3):not([open]) .fold-header::before, .rili-markdown-renderer .grid-item:nth-child(3):not([open]) .fold-header::before { content: '羁绊'; }

.markdown-body .grid-item:nth-child(4) .fold-header, .rili-markdown-renderer .grid-item:nth-child(4) .fold-header { background: #EF476F !important; } /* 珊瑚粉 */
.markdown-body .grid-item:nth-child(4):not([open]) .fold-header::before, .rili-markdown-renderer .grid-item:nth-child(4):not([open]) .fold-header::before { content: '记忆'; }

/* =======================================================
   🌟 展开状态：平滑全宽过渡
======================================================= */
.markdown-body .grid-item[open], .rili-markdown-renderer .grid-item[open] { 
    grid-area: auto !important;
    grid-column: 1 / -1 !important; 
    position: relative !important; 
    z-index: 10 !important; 
    transform: none !important; 
    animation: popNormal 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important; 
    border: 4px solid #102A43 !important; 
    background: #fff !important; 
    box-shadow: 8px 8px 0 #102A43 !important; 
}
@keyframes popNormal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* 展开时的顶部标题栏 */
.markdown-body .grid-item[open] .fold-header, .rili-markdown-renderer .grid-item[open] .fold-header { 
    display: block !important; 
    position: relative !important; 
    height: auto !important; 
    padding: 15px 100px 15px 20px !important; 
    white-space: normal !important; 
    border-bottom: 4px solid #102A43 !important; 
    color: #fff !important; 
    font-weight: 900 !important; 
    text-shadow: 2px 2px 0 #102A43 !important;
    text-transform: uppercase !important; 
    font-size: 1.3rem !important; 
}

/* 🌟 纯 CSS 打造的「✖ 关闭」按钮 */
.markdown-body .grid-item[open] .fold-header::after, .rili-markdown-renderer .grid-item[open] .fold-header::after {
    content: '✖ 收起' !important;
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-50%) !important;
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    box-shadow: 2px 2px 0 #102A43 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
}
.markdown-body .grid-item[open] .fold-header:hover::after, .rili-markdown-renderer .grid-item[open] .fold-header:hover::after {
    background: #fff !important;
    color: #102A43 !important;
    transform: translateY(-50%) translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 #102A43 !important;
}

/* 内部内容区 */
.markdown-body .fold-content, .rili-markdown-renderer .fold-content { padding: 20px !important; font-size: 15px !important; line-height: 1.7 !important; background: #F4FBFF !important; overflow: visible !important; color: #0B192C !important; }

/* =======================================================
   🌸 幕后茶话会 / 剧情分支
======================================================= */
.markdown-body .main-story-box, .markdown-body .omake-isolation-box, .markdown-body .purple-isolation-box, .rili-markdown-renderer .main-story-box, .rili-markdown-renderer .omake-isolation-box, .rili-markdown-renderer .purple-isolation-box { grid-column: 1 / -1 !important; width: 100% !important; display: block !important; clear: both !important; margin-top: 35px !important; margin-bottom: 25px !important; background: #fff !important; border: 4px solid #102A43 !important; border-radius: 12px !important; padding: 20px !important; position: relative !important; box-shadow: 8px 8px 0px #00B4D8 !important; transition: all 0.2s ease !important; }
.markdown-body .main-story-box:hover, .markdown-body .omake-isolation-box:hover, .rili-markdown-renderer .main-story-box:hover, .rili-markdown-renderer .omake-isolation-box:hover { transform: translateY(-4px) !important; box-shadow: 12px 12px 0px #FFB703 !important; }
.markdown-body .main-story-box .fold-header, .markdown-body .omake-isolation-box .fold-header, .rili-markdown-renderer .main-story-box .fold-header, .rili-markdown-renderer .omake-isolation-box .fold-header { background: transparent !important; border: none !important; text-align: center !important; font-size: 1.4em !important; font-weight: 900 !important; color: #102A43 !important; padding: 10px 0 !important; text-shadow: 2px 2px 0 #FFB703 !important; }
.markdown-body .main-story-box .fold-content, .markdown-body .omake-isolation-box .fold-content, .rili-markdown-renderer .main-story-box .fold-content, .rili-markdown-renderer .omake-isolation-box .fold-content { background: rgba(255,255,255,0.7) !important; border: 3px dashed #00B4D8 !important; border-radius: 8px !important; padding: 15px !important; margin-top: 10px !important; }

/* 羁绊/NPC卡片 */
.markdown-body .bond-card, .rili-markdown-renderer .bond-card { background: #06D6A0 !important; border: 4px solid #102A43 !important; border-radius: 8px !important; padding: 15px !important; margin-bottom: 15px !important; box-shadow: 4px 4px 0 #102A43 !important; color: #102A43 !important; transition: all 0.2s ease !important; }
.markdown-body .npc-card, .rili-markdown-renderer .npc-card { background: #00B4D8 !important; border: 4px solid #102A43 !important; border-radius: 8px !important; padding: 15px !important; margin-bottom: 15px !important; box-shadow: 4px 4px 0 #102A43 !important; color: #102A43 !important; transition: all 0.2s ease !important; }
.markdown-body .npc-card:hover, .markdown-body .bond-card:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 #102A43 !important; }
.markdown-body .info-grid, .rili-markdown-renderer .info-grid { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 12px !important; }
.markdown-body .info-grid span, .rili-markdown-renderer .info-grid span { background: #fff !important; padding: 6px 12px !important; border: 2px solid #102A43 !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 900 !important; color: #102A43 !important; box-shadow: 2px 2px 0 #102A43 !important; }

/* ============================================
   4. 沉浸式对话气泡系统 (正文/小剧场)
============================================ */
.mt-chat > p, .mt-content > p, .npc-chat-row > p, .npc-chat-row > div:last-child > p { display: contents !important; margin: 0 !important; padding: 0 !important; }
.mt-chat, .npc-chat-row { display: flex !important; align-items: flex-start !important; gap: 15px !important; width: 100% !important; max-width: 760px !important; margin: 25px auto !important; font-family: "Comic Sans MS", "Marker Felt", sans-serif !important; background-color: transparent !important; border: none !important; padding: 10px 0 !important; box-sizing: border-box !important; }
.mt-content, .npc-chat-row > div:last-child { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0 !important; }
.mt-name, .npc-chat-name { font-size: 1.1rem !important; font-weight: 900 !important; margin-bottom: 8px !important; color: #102A43 !important; background: #fff !important; border: 2px solid #102A43 !important; border-radius: 6px !important; padding: 2px 10px !important; display: inline-block !important; box-shadow: 2px 2px 0 #102A43 !important; align-self: flex-start !important; }
.mt-bubble, .npc-chat-bubble { position: relative !important; padding: 15px 20px !important; font-size: 1.1rem !important; line-height: 1.6 !important; box-shadow: 4px 4px 0 #102A43 !important; word-break: break-word !important; max-width: fit-content !important; border-radius: 12px !important; transition: all 0.2s ease !important; background: #fff !important; border: 3px solid #102A43 !important; color: #102A43 !important; font-weight: 700 !important; }
.mt-bubble p, .mt-bubble span, .npc-chat-bubble p, .npc-chat-bubble span { color: inherit !important; margin: 0 !important; padding: 0 !important; }

/* 默认左侧对齐 */
.mt-chat[data-align="left"], .npc-chat-row.npc-left { flex-direction: row !important; }
.mt-chat[data-align="left"] .mt-content, .npc-chat-row.npc-left > div:last-child { align-items: flex-start !important; }
.mt-chat[data-align="left"] .mt-bubble { border-top-left-radius: 0 !important; }

/* 玩家/指定靠右对齐 */
.mt-chat[data-align="right"], .npc-chat-row.npc-right { flex-direction: row-reverse !important; }
.mt-chat[data-align="right"] .mt-content, .npc-chat-row.npc-right > div:last-child { align-items: flex-end !important; }
.mt-chat[data-align="right"] .mt-name, .npc-chat-row.npc-right .npc-chat-name { align-self: flex-end !important; }
.mt-chat[data-align="right"] .mt-bubble { border-top-right-radius: 0 !important; background: #FFF9E6 !important; }

/* 男性气泡 (清爽海风蓝) */
.mt-chat[data-gender="m"] .mt-bubble, .npc-chat-row.npc-male .npc-chat-bubble { background: #E0FBFC !important; }
.mt-chat[data-gender="m"][data-align="right"] .mt-bubble { background: #FFF9E6 !important; } /* 玩家靠右时优先用黄色 */
.mt-chat[data-gender="m"] .mt-name, .npc-chat-row.npc-male .npc-chat-name { background: #48CAE4 !important; }
.mt-chat[data-gender="m"] pic.p1, .mt-chat[data-gender="m"] .mt-avatar { border: 3px solid #102A43 !important; box-shadow: 4px 4px 0 #0077B6 !important; border-radius: 12px !important; }

/* 女性气泡 (夏日珊瑚粉) */
.mt-chat[data-gender="f"] .mt-bubble, .npc-chat-row.npc-female .npc-chat-bubble { background: #FFE5EC !important; }
.mt-chat[data-gender="f"] .mt-name, .npc-chat-row.npc-female .npc-chat-name { background: #EF476F !important; color: #fff !important; }
.mt-chat[data-gender="f"] pic.p1, .mt-chat[data-gender="f"] .mt-avatar { border: 3px solid #102A43 !important; box-shadow: 4px 4px 0 #EF476F !important; border-radius: 12px !important; }

/* =======================================================
   🖼️ 5. 核心图库映射系统 (保持原版 URL)
======================================================= */
pic { display: inline-block !important; background-size: cover !important; background-position: center 20% !important; background-repeat: no-repeat !important; flex-shrink: 0 !important; --avatar: url('https://images.unsplash.com/photo-1544502062-f82887f03d1c?q=80&w=200&auto=format&fit=crop'); --banner: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop'); }
pic.p1, .mt-avatar, .npc-chat-avatar, .npc-player-img, img.p1-custom { display: block !important; width: 85px !important; height: 85px !important; min-width: 85px !important; border-radius: 12px !important; background-image: var(--avatar) !important; background-color: #fff !important; border: 3px solid #102A43 !important; box-shadow: 4px 4px 0 #102A43 !important; transition: all 0.2s ease !important; object-fit: cover !important; }
pic.p2, img.p2-custom { display: block !important; width: 50px !important; height: 50px !important; min-width: 50px !important; border-radius: 8px !important; background-image: var(--avatar) !important; border: 2px solid #102A43 !important; box-shadow: 3px 3px 0 #102A43 !important; object-fit: cover !important; }
pic.p3 { display: block !important; width: 100% !important; aspect-ratio: 3 / 2 !important; min-height: 240px !important; background-image: var(--banner) !important; background-position: center center !important; border-radius: 8px 8px 0 0 !important; }

/* ⬇️ 官方角色差分图库 (省略重复代码，与你提供的一致) ⬇️ */
pic[c="1"] { --avatar: url('https://p.uuu.ovh/2026/08/23/DuG2OgOG.png'); --banner: url('https://p.uuu.ovh/2026/08/23/XFdkLr6Y.png'); }
pic[c="1"][e="angry"] { --avatar: url('https://p.uuu.ovh/2026/08/23/H7jXm9Cm.png'); }
pic[c="1"][e="scammed"] { --avatar: url('https://p.uuu.ovh/2026/08/23/JRJAjq5D.png'); }
pic[c="2"] { --avatar: url('https://p.uuu.ovh/2026/08/23/TrIuHcFE.png'); --banner: url('https://p.uuu.ovh/2026/08/23/liguIKfm.png'); }
pic[c="2"][e="speechless"] { --avatar: url('https://p.uuu.ovh/2026/08/23/QO65JpDJ.png'); }
pic[c="3"] { --avatar: url('https://p.uuu.ovh/2026/08/23/21MOQ0aY.png'); --banner: url('https://p.uuu.ovh/2026/08/23/IQIVkmr4.png'); }
pic[c="4"] { --avatar: url('https://p.uuu.ovh/2026/08/23/PYVyvVLF.png'); --banner: url('https://p.uuu.ovh/2026/08/23/2xJri3IJ.png'); }
pic[c="5"] { --avatar: url('https://p.uuu.ovh/2026/08/23/KWd846ER.png'); --banner: url('https://p.uuu.ovh/2026/08/23/6ugvFuPi.png'); }
pic[c="5"][e="angry"] { --avatar: url('https://p.uuu.ovh/2026/08/23/PDTMIIIQ.png'); }
pic[c="5"][e="scammed"] { --avatar: url('https://p.uuu.ovh/2026/08/23/ZrDIzhCS.png'); }
pic[c="6"] { --avatar: url('https://p.uuu.ovh/2026/08/23/6VH92YLX.png'); --banner: url('https://p.uuu.ovh/2026/08/23/Ox7Inkiv.png'); }
pic[c="6"][e="drinking"] { --avatar: url('https://p.uuu.ovh/2026/08/23/t8cNiAbu.png'); }
pic[c="7"] { --avatar: url('https://p.uuu.ovh/2026/08/23/eF0zOP4V.png'); --banner: url('https://p.uuu.ovh/2026/08/23/gElVjyhQ.png'); }
pic[c="7"][e="drinking"] { --avatar: url('https://p.uuu.ovh/2026/08/23/kw50bAyn.png'); }
pic[c="8"] { --avatar: url('https://p.uuu.ovh/2026/08/23/Vxl8GZBt.png'); --banner: url('https://p.uuu.ovh/2026/08/23/xFBfswzM.png'); }
pic[c="9"] { --avatar: url('https://p.uuu.ovh/2026/08/23/hQmtLC0D.png'); --banner: url('https://p.uuu.ovh/2026/08/23/CFkl21GF.png'); }
pic[c="9"][e="makeup"] { --avatar: url('https://p.uuu.ovh/2026/08/23/WCFPHgpQ.png'); }
pic[c="10"] { --avatar: url('https://p.uuu.ovh/2026/08/23/HJWxPuMn.png'); --banner: url('https://p.uuu.ovh/2026/08/23/6P8mb1Wy.png'); }
pic[c="11"] { --avatar: url('https://p.uuu.ovh/2026/08/23/b8OYHgh5.png'); --banner: url('https://p.uuu.ovh/2026/08/23/WhVFATTG.png'); }
pic[c="12"] { --avatar: url('https://p.uuu.ovh/2026/08/23/a4tAdR55.png'); --banner: url('https://p.uuu.ovh/2026/08/23/R3irK560.png'); }
pic[c="13"] { --avatar: url('https://p.uuu.ovh/2026/08/23/XtFuqlvj.png'); }
pic[c="14"] { --avatar: url('https://p.uuu.ovh/2026/08/23/JbijWify.png'); --banner: url('https://p.uuu.ovh/2026/08/23/pRhI2XWE.png'); }
pic[c="15"] { --avatar: url('https://p.uuu.ovh/2026/08/23/Gq0FISQn.png'); }
pic[c="16"] { --avatar: url('https://p.uuu.ovh/2026/08/23/dxG5Q9Kc.png'); --banner: url('https://p.uuu.ovh/2026/08/23/i59aznxe.png'); }
pic[c="17"] { --avatar: url('https://p.uuu.ovh/2026/08/23/4qfuM1J6.png'); }
pic[c="18"] { --avatar: url('https://p.uuu.ovh/2026/08/23/PKGcX9dZ.png'); }
pic[c="20"] { --avatar: url('https://p.uuu.ovh/2026/08/23/F46CcF6T.png'); --banner: url('https://p.uuu.ovh/2026/08/23/VXGccvZG.png'); }
pic[c="21"] { --avatar: url('https://p.uuu.ovh/2026/08/23/ThPPIonh.png'); --banner: url('https://p.uuu.ovh/2026/08/23/kjIyenkJ.png'); }
pic[c="999"] { --banner: url('https://p.uuu.ovh/2026/08/21/H2S3R0w8.png'); --avatar: url('https://p.uuu.ovh/2026/08/21/H2S3R0w8.png'); }

/* =======================================================
   📱 6. 终极移动端等比例适配 (完美维持 2x2 网格)
======================================================= */
@media screen and (max-width: 768px) {
  /* 强制维持 2x2 网格，缩小高度 */
  .markdown-body .panel-grid, .rili-markdown-renderer .panel-grid { 
      grid-template-columns: 1fr 1fr !important; 
      grid-template-rows: minmax(85px, auto) minmax(85px, auto) !important; 
      gap: 10px !important; 
  }
  
  /* 标题字号等比缩小，保持居中 */
  .markdown-body .grid-item:not([open]) .fold-header::before, .rili-markdown-renderer .grid-item:not([open]) .fold-header::before {
      font-size: 1.4rem !important;
      letter-spacing: 6px !important;
      margin-left: 3px;
  }
  
  .markdown-body .grid-item[open] .fold-header, .rili-markdown-renderer .grid-item[open] .fold-header {
      font-size: 1.1rem !important;
      padding: 12px 80px 12px 15px !important;
  }
  
  /* 头像与气泡等比缩小 */
  .mt-chat, .npc-chat-row { gap: 10px !important; margin: 15px auto !important; }
  pic.p1, .mt-avatar, .npc-chat-avatar, .npc-player-img, img.p1-custom { 
      width: 60px !important; min-width: 60px !important; height: 60px !important; border-radius: 8px !important;
  }
  .mt-bubble, .npc-chat-bubble { padding: 10px 15px !important; font-size: 1rem !important; border-radius: 10px !important; }
  
  /* 气泡限制放宽 */
  .is-user > .border.border-muted { margin-left: 5% !important; }
  .is-assistant > .border.border-muted { margin-right: 5% !important; }
}

/* =======================================================
   🔥 7. 全局 Webkit 滚动条 (深海蓝风)
======================================================= */
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: #E0F4FF !important; border-left: 2px solid #102A43 !important; }
::-webkit-scrollbar-thumb { background: #00B4D8 !important; border-radius: 5px !important; border: 2px solid #E0F4FF !important; }
::-webkit-scrollbar-thumb:hover { background: #0077B6 !important; }

/* =======================================================
   10. 【纯净防吞补丁】仅修复平台按钮消失的Bug
======================================================= */
.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, .rili-bottom-actions 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; min-height: auto !important; padding: 4px !important; }
.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; }