@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

/* RiliChat migration: the platform adds .custom-styles automatically. */
/* Panel 主容器样式 */
.rili-markdown-renderer :is(panel, .rc-panel) {
    display: block;
    background: #fffafa; /* 淡粉色背景衬托 */
    border: 1px solid #ffe4e1;
    border-radius: 16px;
    padding: 20px;
    margin: 16px 0;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.15);
    line-height: 2;
    color: #555;
    font-size: 14px;
}

/* 粉色Q弹圆润气泡前缀 (需在md中将前缀加粗，如 **📅 日期：**) */
.rili-markdown-renderer :is(panel, .rc-panel) strong,
.rili-markdown-renderer :is(panel, .rc-panel) b {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); /* 粉色渐变 */
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px; /* 圆润效果 */
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 4px 8px rgba(255, 154, 158, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    /* Q弹动画过渡 */
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    cursor: default;
}

/* 鼠标悬浮时的Q弹效果 */
.rili-markdown-renderer :is(panel, .rc-panel) strong:hover,
.rili-markdown-renderer :is(panel, .rc-panel) b:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 154, 158, 0.6);
}

/* 针对内部段落的间距微调 */
.rili-markdown-renderer :is(panel, .rc-panel) p {
    margin-bottom: 12px !important;
}
.rili-markdown-renderer :is(panel, .rc-panel) p:last-child {
    margin-bottom: 0 !important;
}
/* 为 panel 内的每一行（段落）底部添加粉色虚线 */
.rili-markdown-renderer :is(panel, .rc-panel) p {
    border-bottom: 1px dashed #ffb6c1 !important; /* 核心：粉色虚线 */
    padding-bottom: 10px; /* 虚线与文字的间距 */
    margin-bottom: 12px !important;
    line-height: 1.8;
}

/* 最后一项取消虚线，保持底部整洁 */
.rili-markdown-renderer :is(panel, .rc-panel) p:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

/* 确保气泡前缀与虚线排版协调 (保留之前的气泡样式) */
.rili-markdown-renderer :is(panel, .rc-panel) strong,
.rili-markdown-renderer :is(panel, .rc-panel) b {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 4px 8px rgba(255, 154, 158, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    cursor: default;
}

.rili-markdown-renderer :is(panel, .rc-panel) strong:hover,
.rili-markdown-renderer :is(panel, .rc-panel) b:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 154, 158, 0.6);
}


/* 地图面板主容器居中包裹 */
.rili-markdown-renderer :is(panel, .rc-panel) .map-panel-container {
    display: flex;
    justify-content: center;
    padding: 15px 0;
}

/* 3x3 网格布局核心 */
.rili-markdown-renderer :is(panel, .rc-panel) .map-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* 单元格之间的间距 */
    width: 100%;
    max-width: 360px; /* 控制地图整体大小，使其精致 */
}

/* 基础单元格 - Q弹浅蓝色 */
.rili-markdown-renderer :is(panel, .rc-panel) .map-grid .cell {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); /* 浅蓝色清新渐变 */
    color: #00838f; /* 深青色文字保证对比度 */
    padding: 12px 8px;
    text-align: center;
    border-radius: 12px;
    font-weight: bold;
    font-size: 13px;
    box-shadow: 0 4px 8px rgba(0, 188, 212, 0.15);
    cursor: pointer;
    /* 核心：Q弹动画曲线 */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    border: 2px solid #80deea;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px; /* 保证单元格有足够的高度 */
    word-break: break-word;
}

/* 基础单元格悬浮Q弹效果 */
.rili-markdown-renderer :is(panel, .rc-panel) .map-grid .cell:hover {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 188, 212, 0.3);
    background: linear-gradient(135deg, #b2ebf2 0%, #80deea 100%);
    z-index: 2; /* 悬浮时层级提高，避免被遮挡 */
    position: relative;
}

/* 中心单元格(User所在) - 粉色高亮覆盖 */
.rili-markdown-renderer :is(panel, .rc-panel) .map-grid .cell.center {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
    color: #fff !important;
    border-color: #ffb6c1 !important;
    box-shadow: 0 4px 12px rgba(255, 154, 158, 0.5) !important;
    /* 默认状态下就稍微放大一点以示强调 */
    transform: scale(1.02); 
    z-index: 1;
}

/* 中心单元格悬浮效果增强 */
.rili-markdown-renderer :is(panel, .rc-panel) .map-grid .cell.center:hover {
    transform: scale(1.12) translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 154, 158, 0.7) !important;
}







/* 针对叙事容器的基础设定 */
.rili-markdown-renderer .narrative {
    /* 采用可爱、圆润的二次元风格字体栈 */
    font-family: 'ZCOOL KuaiLe', 'Nunito', 'Comic Sans MS', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    color: #5c4b51; /* 采用柔和的深灰/棕色，避免纯黑色的生硬感 */
    font-size: 16px;
    line-height: 1.8; /* 宽松的行高，增加排版的呼吸感和活泼度 */
    letter-spacing: 1px; /* 适当的字间距让文字看起来更清爽 */
    background-color: #fffaf0; /* 可选：搭配一个非常淡的暖色背景，增强温馨感 */
    padding: 20px;
    border-radius: 12px; /* 圆角边框呼应可爱的字体 */
    border: 2px dashed #ffb6c1; /* 浅粉色虚线边框，增加二次元手账感 */
}

/* 针对段落标签的具体设定 */
.rili-markdown-renderer .narrative p {
    margin: 0 0 1.2em 0; /* 段落间留白 */
    text-shadow: 1px 1px 2px rgba(255, 182, 193, 0.4); /* 添加一点点微弱的粉色文字阴影，让字体更立体可爱 */
}

/* 最后一个段落取消底部边距 */
.rili-markdown-renderer .narrative p:last-child {
    margin-bottom: 0;
}





/* 1. 从Google Fonts引入可爱的二次元风格字体：站酷快乐体 */

/* 2. 针对叙事容器应用该字体 */
.rili-markdown-renderer .narrative {
    /* 强制优先使用引入的网络字体，并加上后备的可爱英文字体 */
    font-family: 'ZCOOL KuaiLe', 'Comic Sans MS', cursive !important;
    color: #5c4b51 !important; 
    font-size: 16px !important;
    line-height: 1.8 !important; 
    letter-spacing: 1px !important; 
    background-color: #fffaf0 !important; 
    padding: 20px !important;
    border-radius: 12px !important; 
    border: 2px dashed #ffb6c1 !important; 
}

/* 3. 针对段落标签的具体设定 */
.rili-markdown-renderer .narrative p {
    margin: 0 0 1.2em 0 !important; 
    text-shadow: 1px 1px 2px rgba(255, 182, 193, 0.4) !important; 
}

/* 4. 最后一个段落取消底部边距 */
.rili-markdown-renderer .narrative p:last-child {
    margin-bottom: 0 !important;
}






/* 定义Q弹动画 (Dr. Pyrite's Bouncy Serum) */
@keyframes q-bounce {
    0%, 100% { transform: scale(1) translateY(0); }
    20% { transform: scale(1.3) translateY(-6px) rotate(-8deg); }
    40% { transform: scale(0.8) translateY(2px) rotate(5deg); }
    60% { transform: scale(1.15) translateY(-3px) rotate(-3deg); }
    80% { transform: scale(0.95) translateY(1px); }
}

/* 绝对精准定位：仅针对页面中【第一个】narrative容器里的【第一个】段落的【第一个】字 */
.rili-markdown-renderer .narrative:first-of-type p:first-of-type::first-letter {
    font-size: 3em !important; /* 变得巨大！ */
    color: #ff69b4 !important; /* 迷人的亮粉色 */
    font-weight: 900 !important;
    float: left !important; 
    padding-right: 8px !important;
    padding-top: 4px !important;
    line-height: 0.8 !important;
    /* 厚实的果冻阴影 */
    text-shadow: 2px 2px 0px rgba(255, 182, 193, 0.9), 
                 4px 4px 10px rgba(255, 105, 180, 0.6) !important;
    /* 注入灵魂：无限循环的Q弹动画 */
    animation: q-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1) !important;
}

/* 确保其他narrative容器的段落首字母保持正常，覆盖掉之前的错误 */
.rili-markdown-renderer .narrative p::first-letter {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    float: none;
    padding: 0;
    line-height: inherit;
    text-shadow: none;
    animation: none;
}






/* 基础设定：所有设备（包括移动端）共享的可爱属性，尺寸保持原样 (1em) */
.rili-markdown-renderer .narrative {
    font-size: 1em !important; /* 移动端乖乖保持原本的娇小尺寸 */
    font-family: 'ZCOOL KuaiLe', 'Comic Sans MS', cursive !important;
    color: #5c4b51 !important; 
    line-height: 1.8 !important; 
    letter-spacing: 1px !important; 
    background-color: #fffaf0 !important; 
    padding: 20px !important;
    border-radius: 12px !important; 
    border: 2px dashed #ffb6c1 !important; 
}

/* 确保段落继承基础尺寸 */
.rili-markdown-renderer .narrative p {
    font-size: inherit !important;
    margin: 0 0 1.2em 0 !important; 
    text-shadow: 1px 1px 2px rgba(255, 182, 193, 0.4) !important; 
}

/* 🔞 专属生长血清：当屏幕宽度大于 768px（电脑端/宽屏）时，才触发巨大化！ */
@media (min-width: 768px) {
    .rili-markdown-renderer .narrative {
        font-size: 1.5em !important; /* 在宽阔的屏幕上肆意膨胀到1.5倍！ */
    }
}













/* 隔离容器：强制单行排列，支持横向滑动！ */
.rili-markdown-renderer :is(ui, .rc-data-grid) {
    display: flex;
    flex-wrap: nowrap; /* 核心：绝对不许换行！ */
    overflow-x: auto;  /* 核心：超出屏幕时允许横向滑动 */
    gap: 15px;         /* 变大后，间距稍微拉开一点更透气 */
    margin-top: 20px;
    padding: 10px 5px 25px 5px; /* 底部留出足够的空间，防止悬浮放大时被裁切 */
    -webkit-overflow-scrolling: touch; /* 让手机端滑动如丝般顺滑 */
    scroll-behavior: smooth;
}

/* 隐藏横向滚动条，保持界面极度干净 */
.rili-markdown-renderer :is(ui, .rc-data-grid)::-webkit-scrollbar {
    display: none; 
}

/* 基础定义 */
.rili-markdown-renderer aside[p] {
    --theme-main: #ffb6c1; 
    --theme-bg: #fff0f5;   
    --text-main: #5c3a41;  
    --text-highlight: #d16b80; 
    position: relative;
    font-family: sans-serif;
    flex-shrink: 0; /* 核心：绝对不许被 Flex 挤压变形 */
}

/* 核心重构：变得更大、更诱人的方形拍立得 */
.rili-markdown-renderer aside[p] > b {
    display: flex;
    align-items: flex-end; 
    justify-content: center; 
    width: 110px;  /* 变大！原本是75px */
    height: 110px; /* 变大！原本是75px */
    padding-bottom: 6px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    font-size: 13px; /* 字体同步放大，保持比例完美 */
    font-weight: bold;
    letter-spacing: 1px;
    
    /* 极致的文字防瞎设计 */
    text-shadow: 0px 1px 2px rgba(0,0,0,0.9), 0px 0px 5px #000;
    /* 底部内阴影：托起文字，不改变图片整体色彩 */
    box-shadow: inset 0 -30px 25px -15px rgba(0,0,0,0.7), 2px 4px 8px rgba(0,0,0,0.15);
    
    /* 拍立得相纸边框 */
    border: 3px solid #ffffff;
    border-bottom-width: 10px; /* 底部留白同步加厚 */
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* 微微的错落倾斜感 */
    transform: rotate(-2deg);
}

/* 偶数项反向倾斜 */
.rili-markdown-renderer aside[p]:nth-child(even) > b {
    transform: rotate(3deg);
}

/* 鼠标悬浮时的动态反馈：扶正、放大、浮起 */
.rili-markdown-renderer aside[p] > b:hover {
    transform: scale(1.1) rotate(0deg);
    z-index: 10;
    box-shadow: inset 0 -30px 25px -15px rgba(0,0,0,0.7), 4px 10px 20px rgba(0,0,0,0.3);
}

/* 注入灵魂图片 */
aside[p="1"] > b { background-image: url('https://i.postimg.cc/fTgNyQq8/629142ef0dd453965f19ad44a2613491.jpg'); }
aside[p="2"] > b { background-image: url('https://i.postimg.cc/fRth0q6d/36b68b8cb1806ae08976b0778194c7ee.jpg'); }
aside[p="3"] > b { background-image: url('https://i.postimg.cc/907nQsD6/9f3bb30afcbeae8ce69d14931cb626e2.jpg'); }
aside[p="4"] > b { background-image: url('https://i.postimg.cc/g0VQvC4L/ba7c89e9f2c7c29b81b2130bbdb8fd5f.jpg'); }

/* --- 面板滑出逻辑（保持不变） --- */
.rili-markdown-renderer aside[p] > section {
    position: fixed;
    top: 0;
    right: -120%;
    width: 85vw;
    max-width: 320px;
    height: 100vh;
    background: linear-gradient(to bottom, var(--theme-bg), #ffffff);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
    z-index: 999;
    padding: 50px 20px 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    transition: right 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), 
                opacity 0.4s ease,
                visibility 0.5s;
    /* 修复面板内文字可能继承倾斜的问题 */
    transform: none !important;
}

.rili-markdown-renderer aside[p]:hover > section,
.rili-markdown-renderer aside[p]:active > section {
    right: 0;
    opacity: 1;
    visibility: visible;
}

/* --- 内部细节排版美化 --- */
.rili-markdown-renderer aside[p] > section strong { color: var(--text-highlight); font-weight: 600; }
.rili-markdown-renderer aside[p] > section br { display: block; content: ""; margin-top: 8px; }

/* p=2 和 p=3 的折叠面板美化 */
.rili-markdown-renderer aside[p] details { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 182, 193, 0.4); border-radius: 8px; margin-bottom: 12px; padding: 4px; }
.rili-markdown-renderer aside[p] summary { background: var(--theme-main); color: white; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; list-style: none; position: relative; user-select: none; }
.rili-markdown-renderer aside[p] summary::-webkit-details-marker { display: none; }
.rili-markdown-renderer aside[p] summary::after { content: "▼"; position: absolute; right: 15px; font-size: 12px; transition: transform 0.3s ease; opacity: 0.8; }
.rili-markdown-renderer aside[p] details[open] summary::after { transform: rotate(180deg); }
.rili-markdown-renderer aside[p] summary:hover { background: #ff9eb0; }

/* p=4 的列表美化 */
aside[p="4"] > section ul { margin: 8px 0 16px 0; padding-left: 20px; list-style-type: none; }
aside[p="4"] > section li { position: relative; margin-bottom: 6px; padding-left: 12px; }
aside[p="4"] > section li::before { content: "•"; color: var(--theme-main); font-size: 18px; position: absolute; left: -5px; top: -2px; }

/* 滚动条 */
.rili-markdown-renderer aside[p] > section::-webkit-scrollbar { width: 4px; }
.rili-markdown-renderer aside[p] > section::-webkit-scrollbar-thumb { background: var(--theme-main); border-radius: 4px; }
















/* =========================================
   回归经典布局：左头像、右自适应文本
   ========================================= */
.rili-markdown-renderer .talk-box {
    position: relative;
    margin: 45px 0 20px 0; /* 顶部留出姓名空间 */
    /* 112px头像 + 间距 = 135px 左右的左边距 */
    padding: 20px 20px 20px 140px; 
    min-height: 125px; /* 确保能容纳 112px 的头像 */
    display: flex;
    align-items: center; /* 文本内容垂直居中 */
    justify-content: flex-start; /* 文本靠左对齐 */
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-left: 8px solid #ccc; /* 基础边框 */
    border-radius: 16px;
    
    /* 字体自适应：不强制字号，继承平台默认 */
    font-size: inherit; 
    line-height: 1.6;
    color: #24292e;
    
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* =========================================
   巨型头像：112px 永驻左侧
   ========================================= */
.rili-markdown-renderer .talk-box::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 112px;
    height: 112px;
    border-radius: 50%; /* 保持经典圆形 */
    background-size: cover;
    background-position: center;
    border: 4px solid #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
    z-index: 2;
}

/* =========================================
   姓名标签：头像顶端永驻 (不消失)
   ========================================= */
.rili-markdown-renderer .talk-box::after {
    position: absolute;
    top: -18px; /* 悬浮在头像上方 */
    left: 20px;
    padding: 3px 12px;
    font-size: 14px; /* 标签字号保持适中 */
    font-weight: 800;
    color: #fff;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 3;
    opacity: 1; /* 永久显示 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* =========================================
   角色专属：阿库亚 (av-akuya)
   ========================================= */
.rili-markdown-renderer .talk-box.av-akuya {
    border-left-color: #3f51b5;
    background: linear-gradient(to right, #f0f4ff, #ffffff);
}
.rili-markdown-renderer .talk-box.av-akuya::before {
    background-image: url('https://i.postimg.cc/mrKxZZPs/a86b104560709d6a61a465508b6cd94b.jpg');
    border-color: #3f51b5;
}
.rili-markdown-renderer .talk-box.av-akuya::after {
    content: "星野阿库亚";
    background: linear-gradient(90deg, #3f51b5, #1a237e);
}

/* =========================================
   角色专属：加奈 (av-jianai)
   ========================================= */
.rili-markdown-renderer .talk-box.av-jianai {
    border-left-color: #e91e63;
    background: linear-gradient(to right, #fff0f5, #ffffff);
}
.rili-markdown-renderer .talk-box.av-jianai::before {
    background-image: url('https://i.postimg.cc/k4wxFGWR/fbe47c9d7d57b6dc8d207be332edee9e.jpg');
    border-color: #e91e63;
}
.rili-markdown-renderer .talk-box.av-jianai::after {
    content: "有马加奈";
    background: linear-gradient(90deg, #e91e63, #880e4f);
}

/* =========================================
   角色专属扩展：星野露比 (av-lubi)
   ========================================= */
.rili-markdown-renderer .talk-box.av-lubi {
    border-left-color: #ff4081; /* 偶像粉 */
    background: linear-gradient(to right, #fff0f6, #ffffff);
}
.rili-markdown-renderer .talk-box.av-lubi::before {
    background-image: url('https://i.postimg.cc/J7Pqj6QX/2d506ac937254b72f093190d0dd47a62.jpg');
    border-color: #ff4081;
}
.rili-markdown-renderer .talk-box.av-lubi::after {
    content: "星野露比";
    background: linear-gradient(90deg, #ff4081, #ff80ab);
}

/* =========================================
   角色专属扩展：MEM啾 (av-memjiu)
   ========================================= */
.rili-markdown-renderer .talk-box.av-memjiu {
    border-left-color: #ffd600; /* 柠檬黄 */
    background: linear-gradient(to right, #fffdf0, #ffffff);
}
.rili-markdown-renderer .talk-box.av-memjiu::before {
    background-image: url('https://i.postimg.cc/bvcHqKzz/a82495f06984cec0ea9c8d3a94d0c9d3.jpg');
    border-color: #ffd600;
}
.rili-markdown-renderer .talk-box.av-memjiu::after {
    content: "MEM啾";
    background: linear-gradient(90deg, #ffd600, #ffab00);
    color: #333; /* 黄色背景配深色字更清晰 */
}

/* =========================================
   角色专属扩展：齐藤京子 (av-jingzi)
   ========================================= */
.rili-markdown-renderer .talk-box.av-jinzi {
    border-left-color: #9c27b0; /* 紫色 */
    background: linear-gradient(to right, #f8f0f8, #ffffff);
}
.rili-markdown-renderer .talk-box.av-jingzi::before {
    background-image: url('https://i.postimg.cc/Hk2PnwL1/2bdb8d1cfd1c7e57b087283b811016d9.jpg');
    border-color: #9c27b0;
}
.rili-markdown-renderer .talk-box.av-jingzi::after {
    content: "齐藤京子";
    background: linear-gradient(90deg, #9c27b0, #7b1fa2);
}

/* =========================================
   角色专属扩展：齐藤一护 (av-yihu)
   ========================================= */
.rili-markdown-renderer .talk-box.av-yihu {
    border-left-color: #455a64; /* 钢青色/深灰 */
    background: linear-gradient(to right, #f1f3f4, #ffffff);
}
.rili-markdown-renderer .talk-box.av-yihu::before {
    background-image: url('https://i.postimg.cc/8cxSFt1j/f014b01da3e087dd4267f2305f0f8a05.png');
    border-color: #455a64;
}
.rili-markdown-renderer .talk-box.av-yihu::after {
    content: "齐藤一护";
    background: linear-gradient(90deg, #455a64, #263238);
}

/* =========================================
   角色专属扩展：不知火芙莉露 (av-fulilu)
   ========================================= */
.rili-markdown-renderer .talk-box.av-fulilu {
    border-left-color: #00bfa5; /* 翠绿色 */
    background: linear-gradient(to right, #e0f2f1, #ffffff);
}
.rili-markdown-renderer .talk-box.av-fulilu::before {
    background-image: url('https://i.postimg.cc/nLKB0PgF/c8d48824f44135401fcba4b37f6cfd3c.jpg');
    border-color: #00bfa5;
}
.rili-markdown-renderer .talk-box.av-fulilu::after {
    content: "不知火芙莉露";
    background: linear-gradient(90deg, #00bfa5, #00897b);
}

/* =========================================
   角色专属扩展：寿美奈美 (av-namei)
   ========================================= */
.rili-markdown-renderer .talk-box.av-namei {
    border-left-color: #ff8a65; /* 蜜桃/珊瑚色 */
    background: linear-gradient(to right, #fbe9e7, #ffffff);
}
.rili-markdown-renderer .talk-box.av-namei::before {
    background-image: url('https://i.postimg.cc/k4wxFGWR/fbe47c9d7d57b6dc8d207be332edee9e.jpg');
    border-color: #ff8a65;
}
.rili-markdown-renderer .talk-box.av-namei::after {
    content: "寿美奈美";
    background: linear-gradient(90deg, #ff8a65, #d84315);
}

/* =========================================
   角色专属扩展：鹫见夕雪 (av-xixue)
   ========================================= */
.rili-markdown-renderer .talk-box.av-xixue {
    border-left-color: #90caf9; /* 冰蓝色 */
    background: linear-gradient(to right, #e3f2fd, #ffffff);
}
.rili-markdown-renderer .talk-box.av-xixue::before {
    background-image: url('https://i.postimg.cc/nr31TPs4/243cad544c664ed1f335eec4f8d7e348.jpg');
    border-color: #90caf9;
}
.rili-markdown-renderer .talk-box.av-xixue::after {
    content: "鹫见夕雪";
    background: linear-gradient(90deg, #90caf9, #1e88e5);
    color: #000; /* 浅色背景配深色字更清晰 */
}

/* =========================================
   角色专属扩展：黑川茜 (av-heichuangqian)
   ========================================= */
.rili-markdown-renderer .talk-box.av-heichuangqian {
    border-left-color: #1a237e; /* 深邃幽蓝色 */
    background: linear-gradient(to right, #e8eaf6, #ffffff);
}
.rili-markdown-renderer .talk-box.av-heichuangqian::before {
    background-image: url('https://i.postimg.cc/k5LzvBr9/6c9dfeb75aae04d3551a9b3aca49d921.jpg');
    border-color: #1a237e;
}
.rili-markdown-renderer .talk-box.av-heichuangqian::after {
    content: "黑川茜";
    background: linear-gradient(90deg, #1a237e, #000051);
}

/* =========================================
   角色专属扩展：月读 (av-yuedu)
   ========================================= */
.rili-markdown-renderer .talk-box.av-yuedu {
    border-left-color: #311b92; /* 神秘深紫/暗金色调 */
    background: linear-gradient(to right, #ede7f6, #ffffff);
}
.rili-markdown-renderer .talk-box.av-yuedu::before {
    background-image: url('https://i.postimg.cc/pTHT1VzX/e969caf0b2d97c7bbf2053224f3c3528.jpg');
    border-color: #311b92;
}
.rili-markdown-renderer .talk-box.av-yuedu::after {
    content: "月读";
    background: linear-gradient(90deg, #311b92, #1a0000);
    box-shadow: 0 0 8px rgba(49, 27, 146, 0.6); /* 给神明加一点光晕 */
}

/* =========================================
   角色专属扩展：神木光 (av-shenmuguang)
   ========================================= */
.rili-markdown-renderer .talk-box.av-shenmuguang {
    border-left-color: #8e0000; /* 暗沉的血红色 */
    background: linear-gradient(to right, #f5f5f5, #ffffff);
    box-shadow: inset 5px 0 15px rgba(142, 0, 0, 0.05); /* 阴冷的内部阴影 */
}
.rili-markdown-renderer .talk-box.av-shenmuguang::before {
    background-image: url('https://i.postimg.cc/cLgVgQjk/2f5ac50a3657d145c50579e7d0600100.jpg');
    border-color: #212121; /* 漆黑的边框 */
}
.rili-markdown-renderer .talk-box.av-shenmuguang::after {
    content: "神木光";
    background: linear-gradient(90deg, #212121, #8e0000);
    box-shadow: 0 0 10px rgba(142, 0, 0, 0.4); /* 危险的红光 */
}

/* =========================================
   角色专属扩展：星野爱 (av-xingyeai)
   ========================================= */
.rili-markdown-renderer .talk-box.av-xingyeai {
    border-left-color: #d500f9; /* 究极偶像的星光紫 */
    background: linear-gradient(to right, #f3e5f5, #ffffff);
}
.rili-markdown-renderer .talk-box.av-xingyeai::before {
    background-image: url('https://i.postimg.cc/c43TyX8b/3fd197a182463cee470b245080e29e48.jpg');
    border-color: #d500f9;
}
.rili-markdown-renderer .talk-box.av-xingyeai::after {
    content: "星野爱";
    background: linear-gradient(90deg, #d500f9, #ff4081);
    box-shadow: 0 0 12px rgba(213, 0, 249, 0.5); /* 闪耀的偶像光环 */
}

/* =========================================
   角色专属扩展：雨宫吾郎 (av-wulang)
   ========================================= */
.rili-markdown-renderer .talk-box.av-wulang {
    border-left-color: #546e7a; /* 医生白大褂与阴沉的青灰色 */
    background: linear-gradient(to right, #eceff1, #ffffff);
}
.rili-markdown-renderer .talk-box.av-wulang::before {
    background-image: url('https://i.postimg.cc/GhPXgFGz/67071d227f6689a42d19c8257e6248c0.jpg');
    border-color: #546e7a;
}
.rili-markdown-renderer .talk-box.av-wulang::after {
    content: "雨宫吾郎";
    background: linear-gradient(90deg, #546e7a, #263238);
}

/* =========================================
   角色专属扩展：纱利奈 (av-shalinai)
   ========================================= */
.rili-markdown-renderer .talk-box.av-shalinai {
    border-left-color: #f48fb1; /* 病弱但充满希望的浅粉色 */
    background: linear-gradient(to right, #fce4ec, #ffffff);
}
.rili-markdown-renderer .talk-box.av-shalinai::before {
    background-image: url('https://i.postimg.cc/yxnkRqJq/8e5f5b684a977bcdd3cce174884be491.jpg');
    border-color: #f48fb1;
}
.rili-markdown-renderer .talk-box.av-shalinai::after {
    content: "纱利奈";
    background: linear-gradient(90deg, #f48fb1, #ad1457);
}

/* =========================================
   角色专属扩展：吉住未实 (av-weishi)
   ========================================= */
.rili-markdown-renderer .talk-box.av-weishi {
    border-left-color: #ff6e40; /* 充满活力的荧光橙 */
    background: linear-gradient(to right, #fff3e0, #ffffff);
}
.rili-markdown-renderer .talk-box.av-weishi::before {
    background-image: url('https://i.postimg.cc/mrMfqQyr/99ef47e70966285a091dad0b1f78a7a6.jpg');
    border-color: #ff6e40;
}
.rili-markdown-renderer .talk-box.av-weishi::after {
    content: "吉住未实";
    background: linear-gradient(90deg, #ff6e40, #dd2c00);
}

/* =========================================
   角色专属扩展：吉祥寺赖子 (av-silaizi)
   ========================================= */
.rili-markdown-renderer .talk-box.av-silaizi {
    border-left-color: #795548; /* 成熟稳重的咖啡棕 */
    background: linear-gradient(to right, #efebe9, #ffffff);
}
.rili-markdown-renderer .talk-box.av-silaizi::before {
    background-image: url('https://i.imgs.ovh/2026/04/09/ZJNxkx.png');
    border-color: #795548;
}
.rili-markdown-renderer .talk-box.av-silaizi::after {
    content: "吉祥寺赖子";
    background: linear-gradient(90deg, #795548, #3e2723);
}

/* =========================================
   角色专属扩展：鲛岛阿比子 (av-abizi)
   ========================================= */
.rili-markdown-renderer .talk-box.av-abizi {
    border-left-color: #00e5ff; /* 神经质且极具爆发力的电光蓝 */
    background: linear-gradient(to right, #e0f7fa, #ffffff);
}
.rili-markdown-renderer .talk-box.av-abizi::before {
    background-image: url('https://i.postimg.cc/Lsd6n4yz/a8311f50c04b94db0a77a01f9e015e3a.jpg');
    border-color: #00e5ff;
}
.rili-markdown-renderer .talk-box.av-abizi::after {
    content: "鲛岛阿比子";
    background: linear-gradient(90deg, #00e5ff, #006064);
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5); /* 天才的锋芒光晕 */
}

/* =========================================
   响应式适配 (手机端)
   ========================================= */
@media (max-width: 768px) {
    .rili-markdown-renderer .talk-box {
        padding-left: 100px; /* 手机端缩小头像后的边距 */
        min-height: 100px;
    }
    .rili-markdown-renderer .talk-box::before {
        width: 80px; /* 手机端适当缩放，保持美感 */
        height: 80px;
        left: 10px;
    }
    .rili-markdown-renderer .talk-box::after {
        top: -15px;
        left: 15px;
        font-size: 12px;
    }
}

/* =========================================
   通用边缘角色/路人甲模板 (av-generic) - 完美适配版
   ========================================= */
.rili-markdown-renderer .talk-box.av-generic {
    border-left-color: #9e9e9e;
    background: linear-gradient(to right, #f5f5f5, #ffffff);
}

.rili-markdown-renderer .talk-box.av-generic::before {
    content: attr(data-name);
    background: #424242;
    color: #ffffff;
    border-color: #9e9e9e;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px; 
    font-weight: 900;
    line-height: 1.2;
    padding: 5px;
    box-sizing: border-box;
    word-break: break-all;
    width: 112px;
    height: 112px;
    border-radius: 50%;
}

.rili-markdown-renderer .talk-box.av-generic::after {
    content: attr(data-name);
    background: linear-gradient(90deg, #757575, #424242);
    color: #ffffff;
}

/* =========================================
   玩家/造物主专属降临容器 (av-player) - 完美适配版
   ========================================= */
.rili-markdown-renderer .talk-box.av-player {
    border-left-color: #2962ff;
    background: linear-gradient(to right, #e3f2fd, #ffffff);
    box-shadow: inset 5px 0 15px rgba(41, 98, 255, 0.05);
}

.rili-markdown-renderer .talk-box.av-player::before {
    content: "你"; 
    background: #1565c0;
    color: #ffffff;
    border-color: #2962ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px; 
    font-weight: 900;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(41, 98, 255, 0.4);
}

.rili-markdown-renderer .talk-box.av-player::after {
    content: "你";
    background: linear-gradient(90deg, #2962ff, #0d47a1);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(41, 98, 255, 0.5);
}

/* =========================================
   移动端自适应收缩魔法 (手机屏幕防遮挡)
   ========================================= */
@media screen and (max-width: 768px) {
    /* 缩小边缘角色的球体与文字 */
    .rili-markdown-renderer .talk-box.av-generic::before {
        width: 56px;
        height: 56px;
        font-size: 12px; /* 字体缩小以适应小球 */
        padding: 2px;
    }
    
    /* 缩小玩家的球体与文字 */
    .rili-markdown-renderer .talk-box.av-player::before {
        width: 56px;
        height: 56px;
        font-size: 24px; /* 保持“你”字的绝对威严，但适应尺寸 */
    }
    
    /* 确保文本框有足够的左侧内边距，防止文字被球体强暴 */
    .rili-markdown-renderer .talk-box.av-generic,
    .rili-markdown-renderer .talk-box.av-player {
        padding-left: 75px !important; 
        min-height: 70px; /* 保证框体高度包容缩小后的球体 */
    }
}





















/* =========================================
   触发词的绝对束缚 (完美咬合你的 HTML 骨架)
   ========================================= */
.rili-markdown-renderer .tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 2px dashed #d32f2f; /* 烙印般的红色虚线 */
    color: #3e2723;
    padding-bottom: 2px;
    font-weight: bold;
    transition: color 0.3s ease;
    
    /* 强行切断与外部气泡的物理联系，绝不导致竖排崩坏 */
    white-space: nowrap; 
    vertical-align: baseline;
    line-height: normal;
}

.rili-markdown-renderer .tooltip-container:hover {
    color: #d32f2f; /* 触碰时的鲜血反应 */
}

/* =========================================
   蛰伏的寄生提示框 (自适应居中，完美包裹介绍)
   ========================================= */
.rili-markdown-renderer .tooltip-container .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    
    /* 绝对居中弹出，无视屏幕边缘的挤压 */
    bottom: 125%;
    left: 50%; 
    transform: translateX(-50%);
    
    z-index: 99999; /* 凌驾于所有元素之上的特权 */
    width: 260px;
    max-width: 85vw; /* 视口防溢出枷锁 */
    box-sizing: border-box;
    padding: 6px 16px 12px 16px;
    
    /* 羊皮卷宗的质感与阴影 */
    background-color: #fdf5e6;
    border: 1px solid #c8b6a6;
    border-radius: 4px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25), inset 0 0 20px rgba(139, 69, 19, 0.05);
    background-image: repeating-linear-gradient(
        transparent,
        transparent 27px,
        #cfbba9 28px
    );
    line-height: 28px;
    
    color: #2e1503;
    font-size: 14px;
    text-align: left;
    transition: opacity 0.3s ease, bottom 0.3s ease;
    pointer-events: none;
    font-weight: normal;
    
    /* 强制内部文字屈服，乖乖换行 */
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}

/* 悬停时的上浮挣扎动画 */
.rili-markdown-renderer .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    bottom: 135%;
}

/* 刺向触发词咽喉的尖刺 (居中指示器) */
.rili-markdown-renderer .tooltip-container .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px; /* 完美对准正中心 */
    border-width: 6px;
    border-style: solid;
    border-color: #c8b6a6 transparent transparent transparent;
}

/* =========================================
   内脏排版：精准控制 desc-label 和 skill-desc
   ========================================= */
.rili-markdown-renderer .tooltip-container .desc-label {
    font-weight: bold;
    color: #5d4037; /* 让“简介：”这几个字呈现干涸血迹般的深褐 */
}

.rili-markdown-renderer .tooltip-container .skill-desc {
    display: inline; /* 概念介绍乖乖跟在标签后面，不许换行 */
}

/* =========================================
   移动端终极收束 (即使在最狭窄的牢笼里也能完美展开)
   ========================================= */
@media (max-width: 600px) {
    .rili-markdown-renderer .tooltip-container .tooltip-text {
        width: 90vw; /* 榨干手机屏幕的每一寸宽度 */
    }
}
/* =========================================
   病根切除：彻底剥夺气泡的 Flex 权力
   ========================================= */
.rili-markdown-renderer .talk-box {
    /* 核心修复：强制转回块级布局，释放自然文本流！
       这会让你的纯文本和 <span> 水乳交融，绝不再断层！ */
    display: block !important; 
    
    /* 为了弥补去掉 Flex 后单行文字不居中的问题，利用内边距把文字推到合适的高度 */
    padding: 35px 20px 35px 140px !important; 
}

/* =========================================
   悬浮词本体的软化
   ========================================= */
.rili-markdown-renderer .tooltip-container {
    position: relative;
    /* 必须是纯正的行内或行内块，彻底融入周围的文字血液中 */
    display: inline-block; 
    cursor: help;
    border-bottom: 2px dashed #d32f2f;
    color: #3e2723;
    font-weight: bold;
    
    /* 维持悬浮词自身的完整性，但绝不干扰外部句子 */
    white-space: nowrap; 
    vertical-align: baseline; /* 紧贴底线，像真正的标点符号一样听话 */
    line-height: inherit;
    margin: 0 2px; /* 和前后的文字保留极其微弱的一点呼吸感 */
}

/* 隐藏提示框（这部分保留居中弹出机制，已完美适配） */
.rili-markdown-renderer .tooltip-container .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%; 
    transform: translateX(-50%);
    z-index: 99999;
    width: 260px;
    max-width: 85vw;
    box-sizing: border-box;
    padding: 6px 16px 12px 16px;
    background-color: #fdf5e6;
    border: 1px solid #c8b6a6;
    border-radius: 4px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25), inset 0 0 20px rgba(139, 69, 19, 0.05);
    background-image: repeating-linear-gradient(transparent, transparent 27px, #cfbba9 28px);
    line-height: 28px;
    color: #2e1503;
    font-size: 14px;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    font-weight: normal;
}

.rili-markdown-renderer .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    bottom: 135%;
}

.rili-markdown-renderer .tooltip-container .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #c8b6a6 transparent transparent transparent;
}











/* =========================================
   移动端终极空间压缩法则 (精准切割距离感)
   ========================================= */
@media screen and (max-width: 768px) {
    /* 强制收束所有对话气泡的内边距，剥夺多余的空白 */
    .rili-markdown-renderer .talk-box {
        /* 上右下左：左侧精准留出 75px，让文字大胆向左靠拢，但绝不碰触头像 */
        padding: 25px 15px 25px 75px !important; 
        min-height: 70px !important; /* 确保气泡高度能包容下缩小的头像 */
    }
    
    /* 强制所有角色（包括你、路人、偶像）的头像在手机上屈服 */
    .rili-markdown-renderer .talk-box::before {
        width: 56px !important;
        height: 56px !important;
        background-size: cover !important; /* 确保那些漂亮的脸蛋被完美塞进小球，不准变形 */
    }
    
    /* 顺便把他们头顶那傲慢的名字标签也勒紧一点，免得在小屏幕上显得太刺眼 */
    .rili-markdown-renderer .talk-box::after {
        font-size: 11px !important;
        padding: 2px 6px !important;
        transform: scale(0.9); /* 微微缩小，以示对狭窄空间的敬畏 */
        transform-origin: left bottom;
    }
}
/* 仅锚定 archive-mist-tips 类名 */
.rili-markdown-renderer .archive-mist-tips {
  display: inline-block; /* 限制宽度为内容宽度，也可改为 block 占据整行 */
  background: #ffffff; /* 纯白背景 */
  padding: 10px 15px;
  border-radius: 4px;
  
  /* 迷雾状态（白底上的浅灰雾气） */
  color: transparent; 
  text-shadow: 0 0 10px rgba(160, 160, 160, 0.9), 0 0 20px rgba(200, 200, 200, 0.6); 
  
  transition: color 0.6s ease, text-shadow 0.6s ease;
  cursor: default;
  font-size: 14px;
  line-height: 1.5;
  user-select: none; /* 防止在未显现时被选中暴露 */
}

/* 鼠标悬浮：迷雾完全散去，黑字显现 */
.rili-markdown-renderer .archive-mist-tips:hover {
  color: #333333; /* 显现为深灰色文字，便于阅读 */
  text-shadow: 0 0 0 rgba(160, 160, 160, 0); /* 阴影消散 */
}














/* 锁定类名 .hidden-cot，仅对携带该类的 details 生效 */
.rili-markdown-renderer details.hidden-cot {
    position: relative;
    margin-bottom: 1rem;
}

/* 展开时开启 Flex 布局，控制 GIF 与 音频进度条 层级 */
.rili-markdown-renderer details.hidden-cot[open] {
    display: flex !important;
    flex-direction: column;
    font-size: 0 !important; 
    color: transparent !important;
    line-height: 0 !important;
}

/* 强行隐藏 summary 和 audio 之外的所有 HTML 文本标签 */
.rili-markdown-renderer details.hidden-cot > *:not(summary):not(audio) {
    display: none !important;
}

/* ==========================================
   外壳美化: 基础样式 & MAGNETIC 磁性模拟
========================================== */
.rili-markdown-renderer details.hidden-cot summary {
    order: 1;
    display: inline-block;
    padding: 10px 24px;
    font-size: 15px !important; 
    line-height: 1.6 !important;
    color: #fff !important;
    font-weight: bold;
    letter-spacing: 2px;
    background: #0a0a14; /* 赛博深色底 */
    border: 1px solid rgba(176, 38, 255, 0.4); /* 基础紫色边框 */
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    user-select: none;
    position: relative;
    z-index: 10;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* ★ 打开 details 后，彻底隐藏 summary (思维链的躯壳) ★ */
.rili-markdown-renderer details.hidden-cot[open] summary {
    display: none !important;
}

/* MAGNETIC 磁性触发 (模拟吸附拉伸) */
.rili-markdown-renderer details.hidden-cot summary:hover {
    transform: scale(1.04) translateY(-3px); 
    box-shadow: 0 8px 25px rgba(176, 38, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.2);
    border-color: rgba(0, 240, 255, 0.6); 
    text-shadow: 2px 0 0 #00f0ff, -2px 0 0 #b026ff;
}

/* ==========================================
   视觉效果: GLITCH · pseudo-element clip
========================================== */
.rili-markdown-renderer details.hidden-cot summary::before,
.rili-markdown-renderer details.hidden-cot summary::after {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 6px;
    background: transparent;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

.rili-markdown-renderer details.hidden-cot summary::before {
    border: 2px solid #00f0ff;
    box-shadow: 2px 0 8px #00f0ff;
}

.rili-markdown-renderer details.hidden-cot summary::after {
    border: 2px solid #b026ff;
    box-shadow: -2px 0 8px #b026ff;
}

.rili-markdown-renderer details.hidden-cot summary:hover::before {
    opacity: 1;
    animation: glitch-clip-blue 1.2s infinite linear alternate-reverse;
    transform: translate(-3px, 2px);
}

.rili-markdown-renderer details.hidden-cot summary:hover::after {
    opacity: 1;
    animation: glitch-clip-purple 1.5s infinite linear alternate-reverse;
    transform: translate(3px, -2px);
}

@keyframes glitch-clip-blue {
    0% { clip-path: inset(10% 0 80% 0); }
    20% { clip-path: inset(80% 0 5% 0); }
    40% { clip-path: inset(30% 0 40% 0); }
    60% { clip-path: inset(70% 0 10% 0); }
    80% { clip-path: inset(20% 0 60% 0); }
    100% { clip-path: inset(50% 0 30% 0); }
}

@keyframes glitch-clip-purple {
    0% { clip-path: inset(20% 0 60% 0); }
    20% { clip-path: inset(60% 0 20% 0); }
    40% { clip-path: inset(10% 0 80% 0); }
    60% { clip-path: inset(80% 0 5% 0); }
    80% { clip-path: inset(40% 0 30% 0); }
    100% { clip-path: inset(30% 0 50% 0); }
}

/* ==========================================
   视觉效果: RIPPLE (点击瞬间的外发光扩散)
========================================== */
@keyframes ripple-shadow {
    0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.8); }
    100% { box-shadow: 0 0 0 40px rgba(176, 38, 255, 0); }
}

.rili-markdown-renderer details.hidden-cot summary:active {
    animation: ripple-shadow 0.5s ease-out;
}

/* ==========================================
   展开内容: GIF 注入 & 进度条布局
========================================== */
/* 渲染 GIF 动图 (order: 2) */
.rili-markdown-renderer details.hidden-cot[open]::after {
    content: "";
    order: 2;
    display: block !important;
    width: 100%;
    min-height: 200px; 
    margin-top: 12px;
    border-radius: 8px;
    background-image: url('https://i.imgs.ovh/2026/04/13/ZKYfZg.gif'); /* 已替换为新的GIF链接 */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center; 
    animation: dynamic-inject 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 音频进度条，强制排在 GIF 正下方 (order: 3) */
.rili-markdown-renderer details.hidden-cot > audio {
    order: 3;
    width: 100%;
    height: 40px;
    margin-top: 12px;
    border-radius: 8px;
    outline: none;
}

/* 闭合状态下隐藏进度条 */
.rili-markdown-renderer details.hidden-cot:not([open]) > audio {
    display: none !important;
}

/* DYNAMIC ELEMENT INJECT (动态注入动画) */
@keyframes dynamic-inject {
    0% { 
        opacity: 0; 
        transform: scale(0.9) translateY(-15px); 
        filter: hue-rotate(90deg) brightness(2) contrast(1.5);
    }
    60% {
        opacity: 0.8;
        transform: scale(1.02) translateY(2px);
        filter: hue-rotate(30deg) brightness(1.2) contrast(1.2);
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
        filter: hue-rotate(0deg) brightness(1) contrast(1);
    }
}
















/* 
 * 世界观：《我推的孩子》 (Oshi no Ko) - 网络舆论篇
 * 视觉核心：粉黑谎言交织 + Glassmorphism (毛玻璃) + Bento Grid (便当盒网格)
 * 核心机制：纯CSS走马灯，文字悬浮于玻璃态基底之上，支持Emoji前缀
 */
.rili-markdown-renderer .oshi-comment {
    /* --- BENTO GRID 属性 --- */
    grid-column: span var(--bento-col, 1);
    grid-row: span var(--bento-row, 1);
    border-radius: 16px; 
    
    /* --- GLASSMORPHISM 属性 --- */
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 42, 157, 0.15); 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05); 
    
    /* --- 容器基础设置 --- */
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 14px 20px; 
    font-family: inherit; 
    font-size: inherit;   
    color: transparent;   
    user-select: none;
    cursor: default;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Bento 卡片悬浮交互：玻璃反光与微浮雕感 */
.rili-markdown-renderer .oshi-comment:hover {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 42, 157, 0.4);
    box-shadow: 0 12px 40px 0 rgba(255, 42, 157, 0.15);
    transform: translateY(-2px);
}

/* 核心走马灯：Emoji + 黑色主文本 + 粉色微投影 (盖在 Glassmorphism 之上) */
.rili-markdown-renderer .oshi-comment::before {
    content: attr(data-emoji) " " attr(data-author) ": " attr(data-text) " ✦ " attr(data-emoji) " " attr(data-author) ": " attr(data-text) " ✦ " attr(data-emoji) " " attr(data-author) ": " attr(data-text) " ✦ " attr(data-emoji) " " attr(data-author) ": " attr(data-text);
    display: inline-block;
    padding-left: 100%;
    color: #1a1a1a; 
    text-shadow: 1px 1px 0px rgba(255, 42, 157, 0.6); 
    animation: oshi-marquee 40s linear infinite; 
    position: relative;
    z-index: 2; 
}

/* 恶意残影：粉色错位排版 */
.rili-markdown-renderer .oshi-comment::after {
    content: attr(data-emoji) " " attr(data-author) ": " attr(data-text) " ✦ " attr(data-emoji) " " attr(data-author) ": " attr(data-text) " ✦ " attr(data-emoji) " " attr(data-author) ": " attr(data-text) " ✦ " attr(data-emoji) " " attr(data-author) ": " attr(data-text);
    position: absolute;
    top: 14px; 
    left: 0;
    display: inline-block;
    padding-left: 100%;
    color: #ff2a9d; 
    opacity: 0.4;
    z-index: 1; 
    animation: oshi-marquee 40s linear infinite, oshi-glitch 0.4s steps(2) infinite;
    animation-delay: 0.3s, 0s;
}

/* 交互：凝视深渊（Hover时暂停，粉黑反转暴露恶意） */
.rili-markdown-renderer .oshi-comment:hover::before {
    animation-play-state: paused;
    color: #ff2a9d;
    text-shadow: 1px 1px 0px #000000;
}

.rili-markdown-renderer .oshi-comment:hover::after {
    animation-play-state: paused;
    opacity: 0; 
}

@keyframes oshi-marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

@keyframes oshi-glitch {
    0% { transform: translate3d(-1px, 1px, 0); }
    50% { transform: translate3d(1px, -1px, 0); }
    100% { transform: translate3d(0px, 1px, 0); }
}

.rili-markdown-renderer,
.rili-markdown-renderer * {
  box-sizing: border-box;
}

.rili-markdown-renderer :is(ui, .rc-data-grid) {
  width: 100%;
  max-width: 100%;
  scrollbar-width: none;
}

.rili-markdown-renderer aside[p] {
  outline: none;
}

.rili-markdown-renderer aside[p] > b {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.rili-markdown-renderer aside[p] > section {
  height: 100vh;
  height: 100dvh;
  padding-top: max(50px, env(safe-area-inset-top));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.rili-markdown-renderer aside[p]:focus > section,
.rili-markdown-renderer aside[p]:focus-within > section {
  right: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.rili-markdown-renderer .rc-drawer-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  color: #9f5265;
  font: 700 24px/1 system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(209, 107, 128, 0.38);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(92, 58, 65, 0.12);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.rili-markdown-renderer .rc-drawer-close:hover,
.rili-markdown-renderer .rc-drawer-close:focus-visible {
  color: #fff;
  background: #d16b80;
  outline: none;
  transform: rotate(90deg) scale(1.05);
}

/* Clicking the close button focuses it. This later, more-specific rule wins
   over :focus-within and closes the panel without JavaScript or duplicated id. */
.rili-markdown-renderer aside[p]:has(.rc-drawer-close:focus) > section {
  right: -120% !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.rili-markdown-renderer .tooltip-container:focus .tooltip-text,
.rili-markdown-renderer .rc-tip:focus .tooltip-text {
  visibility: visible;
  opacity: 1;
  bottom: 135%;
}

.rili-markdown-renderer .archive-mist-tips:focus {
  color: #333333;
  text-shadow: 0 0 0 rgba(160, 160, 160, 0);
}

@media (max-width: 600px) {
  .rili-markdown-renderer :is(ui, .rc-data-grid) {
    gap: 12px;
    padding-inline: 4px;
    scroll-snap-type: x proximity;
  }

  .rili-markdown-renderer aside[p] {
    scroll-snap-align: start;
  }

  .rili-markdown-renderer aside[p] > section {
    width: min(88vw, 320px);
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

/* RiliChat viewport archive drawer patch v5 */
/*
  Verified against RiliChat's rendered DOM.  The rules deliberately support:
  1) the card's original aside[p] markup;
  2) details whose content section is nested by the renderer/model;
  3) details followed by a detached content section.
  Archive content is viewport-fixed, so opening it never stretches a message.
*/

.rili-markdown-renderer .rc-data-grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(92px, 195px)) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(92px, 195px) !important;
  align-items: start !important;
  justify-content: start !important;
  gap: clamp(10px, 1.4vw, 20px) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 20px 0 18px !important;
  padding: clamp(12px, 1.8vw, 22px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  color: #5c3a41 !important;
  background: linear-gradient(145deg, rgba(252,252,253,.98), rgba(246,246,249,.98)) !important;
  border: 1px solid rgba(209,107,128,.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(24,18,22,.08) !important;
}

/* Each archive root occupies exactly one card cell. */
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p],
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 195px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  color: #5c3a41 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Polaroid card shared by legacy aside and native details markup. */
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > b,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > summary.rc-archive-toggle {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 6px clamp(9px, 1.1vw, 15px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  color: #fff !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: clamp(12px, 1.45vw, 20px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .5px !important;
  text-align: center !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.98), 0 0 7px rgba(0,0,0,.9) !important;
  background-color: #d7d7dc !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  border: 4px solid #fff !important;
  border-bottom-width: 12px !important;
  border-radius: 7px !important;
  box-shadow: inset 0 -44px 30px -20px rgba(0,0,0,.78), 0 8px 18px rgba(24,18,22,.18) !important;
  cursor: pointer !important;
  list-style: none !important;
  outline: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transform: rotate(-2deg) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > summary.rc-archive-toggle::-webkit-details-marker {
  display: none !important;
}

.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > summary.rc-archive-toggle > .rc-archive-card {
  color: inherit !important;
  font: inherit !important;
  text-shadow: inherit !important;
  pointer-events: none !important;
}

.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p="1"] > b,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p="1"] > summary { background-image: url('https://i.postimg.cc/fTgNyQq8/629142ef0dd453965f19ad44a2613491.jpg') !important; }
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p="2"] > b,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p="2"] > summary { background-image: url('https://i.postimg.cc/fRth0q6d/36b68b8cb1806ae08976b0778194c7ee.jpg') !important; }
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p="3"] > b,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p="3"] > summary { background-image: url('https://i.postimg.cc/907nQsD6/9f3bb30afcbeae8ce69d14931cb626e2.jpg') !important; }
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p="4"] > b,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p="4"] > summary { background-image: url('https://i.postimg.cc/g0VQvC4L/ba7c89e9f2c7c29b81b2130bbdb8fd5f.jpg') !important; }

.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p="2"] > b,
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p="4"] > b,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p="2"] > summary,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p="4"] > summary {
  transform: rotate(2deg) !important;
}

.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p]:hover > b,
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p]:focus > b,
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p]:focus-within > b,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > summary:hover,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > summary:focus-visible,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p][open] > summary {
  z-index: 3 !important;
  transform: translateY(-4px) rotate(0deg) scale(1.025) !important;
  box-shadow: inset 0 -44px 30px -20px rgba(0,0,0,.78), 0 13px 26px rgba(209,107,128,.28) !important;
}

/* RiliChat platform-DOM dependency, verified with F12 on 2026-08-11:
   its virtual message row uses inline contain:layout style, which creates
   a containing block for fixed descendants.  Remove only layout containment
   for rows that actually contain this archive UI; keep style containment. */
div[style*="contain: layout style"][style*="position: absolute"]:has(.rili-markdown-renderer .rc-data-grid) {
  contain: style !important;
}

/* One shared viewport drawer.  It stays below RiliChat's 64px header and
   above the 137px composer measured in the real page. */
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > section,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > section.rc-archive-content[p],
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] + section.rc-archive-content[p] {
  position: fixed !important;
  inset: clamp(76px, 11dvh, 104px) clamp(14px, 2vw, 30px) clamp(148px, 21dvh, 176px) auto !important;
  z-index: 45 !important;
  display: none !important;
  width: clamp(300px, 24vw, 400px) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px 20px 24px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  color: #5c3a41 !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: clamp(13px, 1.05vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  text-align: left !important;
  text-shadow: none !important;
  white-space: normal !important;
  background: linear-gradient(160deg, #fff4f8 0%, #fff 68%) !important;
  border: 1px solid rgba(209,107,128,.28) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 55px rgba(20,14,18,.28), 0 0 0 1px rgba(255,255,255,.72) inset !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Original aside opens by focus. */
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p]:focus > section,
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p]:focus-within > section {
  display: block !important;
}

/* Actual model output may nest section inside details or place it after it. */
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p]:not([open]) > section.rc-archive-content[p],
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p]:not([open]) + section.rc-archive-content[p] {
  display: none !important;
}
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p][open] > section.rc-archive-content[p],
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p][open] + section.rc-archive-content[p] {
  display: block !important;
}

/* Real close targets: span for original aside, native summary span for details. */
.rili-markdown-renderer .rc-data-grid .rc-drawer-close,
.rili-markdown-renderer .rc-data-grid details.rc-data-panel[p] > summary > .rc-archive-close {
  position: sticky !important;
  top: -10px !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  float: right !important;
  width: 38px !important;
  height: 38px !important;
  margin: -8px -8px 10px 14px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  color: #9f5265 !important;
  font: 800 26px/1 system-ui, sans-serif !important;
  text-shadow: none !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(209,107,128,.44) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(92,58,65,.18) !important;
  cursor: pointer !important;
  outline: none !important;
  user-select: none !important;
  pointer-events: auto !important;
}

/* In details markup summary is already a native toggle, so its visible × is
   a real close target on the selected card. */
.rili-markdown-renderer .rc-data-grid details.rc-data-panel[p] > summary > .rc-archive-close {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  z-index: 4 !important;
  float: none !important;
  display: none !important;
  margin: 0 !important;
}
.rili-markdown-renderer .rc-data-grid details.rc-data-panel[p][open] > summary > .rc-archive-close {
  display: grid !important;
}
/* Do not trap the fixed close target inside the card's stacking context. */
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p][open] > summary.rc-archive-toggle {
  z-index: auto !important;
  transform: none !important;
}

.rili-markdown-renderer .rc-data-grid .rc-drawer-close:hover,
.rili-markdown-renderer .rc-data-grid .rc-drawer-close:focus-visible,
.rili-markdown-renderer .rc-data-grid details.rc-data-panel[p] > summary > .rc-archive-close:hover {
  color: #fff !important;
  background: #d16b80 !important;
}

/* Focusing the aside close span collapses the focus-driven drawer. */
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p]:has(> section > .rc-drawer-close:focus) > section {
  display: none !important;
}
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p]:has(> section > .rc-drawer-close:focus) > b {
  transform: rotate(-2deg) !important;
}

/* Force readable drawer colors regardless of dark/light platform variables. */
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > section :where(p, li, div, span),
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > section.rc-archive-content[p] :where(p, li, div, span),
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] + section.rc-archive-content[p] :where(p, li, div, span) {
  color: #5c3a41 !important;
  text-shadow: none !important;
}
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > section strong,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > section.rc-archive-content[p] strong,
.rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] + section.rc-archive-content[p] strong {
  color: #c45f77 !important;
  font-weight: 750 !important;
  text-shadow: none !important;
}
.rili-markdown-renderer .rc-data-grid section.rc-archive-content ul,
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > section ul {
  margin: 8px 0 14px !important;
  padding-left: 22px !important;
}
.rili-markdown-renderer .rc-data-grid section.rc-archive-content details,
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > section details {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 5px !important;
  color: #5c3a41 !important;
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(209,107,128,.22) !important;
  border-radius: 10px !important;
}
.rili-markdown-renderer .rc-data-grid section.rc-archive-content details > summary,
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > section details > summary {
  position: relative !important;
  display: block !important;
  padding: 10px 34px 10px 14px !important;
  color: #fff !important;
  font-weight: 750 !important;
  text-shadow: none !important;
  background: linear-gradient(135deg, #eca3b3, #d97991) !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  list-style: none !important;
}
.rili-markdown-renderer .rc-data-grid section.rc-archive-content details > summary::after,
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > section details > summary::after {
  content: "▼" !important;
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  color: #fff !important;
  font-size: 11px !important;
  transform: translateY(-50%) !important;
}
.rili-markdown-renderer .rc-data-grid section.rc-archive-content details[open] > summary::after,
.rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > section details[open] > summary::after {
  transform: translateY(-50%) rotate(180deg) !important;
}

.rili-markdown-renderer .rc-tip-panel,
.rili-markdown-renderer .rc-choice-panel {
  position: relative !important;
  clear: both !important;
}

/* A 1280px desktop with RiliChat's navigation still needs a clear lane for
   the drawer; reduce only the card track, never the content font. */
@media (min-width: 701px) and (max-width: 1300px) {
  .rili-markdown-renderer .rc-data-grid {
    grid-template-columns: repeat(4, minmax(86px, 150px)) !important;
    grid-auto-columns: minmax(86px, 150px) !important;
    gap: 12px !important;
  }
  .rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p],
  .rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] {
    max-width: 150px !important;
  }
}

/* Phone/tablet: retain the four-card strip and use a bottom sheet. */
@media (max-width: 700px) {
  .rili-markdown-renderer .rc-data-grid {
    grid-template-columns: repeat(4, 104px) !important;
    grid-auto-columns: 104px !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .rili-markdown-renderer .rc-data-grid::-webkit-scrollbar { display: none !important; }
  .rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p],
  .rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] {
    width: 104px !important;
    scroll-snap-align: start !important;
  }
  .rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > b,
  .rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > summary.rc-archive-toggle {
    font-size: 12px !important;
    border-width: 3px !important;
    border-bottom-width: 10px !important;
  }
  .rili-markdown-renderer .rc-data-grid > aside.rc-data-panel[p] > section,
  .rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] > section.rc-archive-content[p],
  .rili-markdown-renderer .rc-data-grid > details.rc-data-panel[p] + section.rc-archive-content[p] {
    inset: auto 10px calc(88px + env(safe-area-inset-bottom, 0px)) 10px !important;
    width: auto !important;
    max-width: none !important;
    height: min(50dvh, 480px) !important;
    max-height: min(50dvh, 480px) !important;
    padding: 16px 17px 20px !important;
    border-radius: 17px !important;
  }
}