/* ═══════════════════════════════════════════════════════
   ⚡ 咒术回战 - Jujutsu Kaisen Style v3 (质感强化版)
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700;900&family=Noto+Serif+SC:wght@600;700;900&family=Ma+Shan+Zheng&display=swap');
:root {
    /* —— 主青色系（咒力） —— */
    --jjk-cyan-bright: #13E7F6;
    --jjk-cyan: #0FA8B5;
    --jjk-cyan-dark: #0C5975;
    --jjk-cyan-abyss: #001B24;
    /* —— 辅金色（六眼/宿傩印记） —— */
    --jjk-gold-bright: #F4D38A;
    --jjk-gold: #C8A050;
    --jjk-gold-dark: #6B4F1F;
    /* —— 紫色（领域/夏油） —— */
    --jjk-violet: #9D63E8;
    --jjk-violet-dark: #4A2878;
    /* —— 朱砂（宿傩/血咒） —— */
    --jjk-blood: #C4463A;
    --jjk-blood-dark: #6B1E18;
    /* —— 黑灰基底 —— */
    --jjk-bg-deep: #050810;
    --jjk-bg: #0F1419;
    --jjk-bg-mid: #1A2332;
    /* —— 文字 —— */
    --jjk-text: #CADAE3;
    --jjk-text-bright: #E8FAFF;
    --jjk-text-dim: rgba(202, 218, 227, 0.55);
    /* —— 光晕 —— */
    --glow-cyan: rgba(19, 231, 246, 0.4);
    --glow-gold: rgba(244, 211, 138, 0.35);
    --glow-violet: rgba(157, 99, 232, 0.4);
    --glow-blood: rgba(196, 70, 58, 0.4);
    /* —— 边框 —— */
    --border-dim: rgba(12, 89, 117, 0.5);
    --border-lit: rgba(19, 231, 246, 0.65);
    --border-gold: rgba(200, 160, 80, 0.55);
}
/* ═══════════════════════════════════════════════════════
   动画
   ═══════════════════════════════════════════════════════ */
@keyframes jjkFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jjkCornerGlow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes jjkSealPulse {
    0%, 100% { box-shadow: inset 0 0 0 1px var(--border-lit), 0 0 8px var(--glow-cyan); }
    50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 0 16px var(--glow-cyan), 0 0 24px var(--glow-cyan); }
}
@keyframes jjkBarShine {
    0% { left: -30%; }
    100% { left: 130%; }
}
@keyframes jjkFlowText {
    0%, 100% { text-shadow: 0 0 6px var(--glow-cyan), 0 0 2px rgba(255,255,255,0.3); }
    50% { text-shadow: 0 0 12px var(--glow-cyan), 0 0 4px rgba(255,255,255,0.6); }
}
/* ═══════════════════════════════════════════════════════
   基础
   ═══════════════════════════════════════════════════════ */
body, * {
    font-family: 'Noto Serif JP', 'Noto Serif SC', 'SimSun', serif !important;
    letter-spacing: 2px !important;
    box-sizing: border-box !important;
}
.rili-markdown-renderer {
    color: var(--jjk-text) !important;
}
/* ═══════════════════════════════════════════════════════
   主对话气泡（领域展开）
   ═══════════════════════════════════════════════════════ */
.is-user > div,
.is-assistant > div {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 28px 32px 50px 32px !important;
    overflow: visible !important;
    margin-top: 1.5em !important;
    color: var(--jjk-text) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}
.is-user > div::before,
.is-assistant > div::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(19, 231, 246, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(157, 99, 232, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #0F1419 0%, #1A2332 25%, #0F1419 60%, #060a0f 85%, #000000 100%) !important;
    border: 4px solid #000000 !important;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.9),
        inset 0 0 0 1px var(--border-lit),
        inset 0 1px 0 rgba(244, 211, 138, 0.15),
        inset 0 -90px 70px -50px rgba(0, 0, 0, 0.9) !important;
    clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
    z-index: 0 !important;
}
.is-assistant > div::after {
    content: '';
    position: absolute;
    bottom: 12px; right: 12px;
    width: 100px; height: 100px;
    background-image: url('https://pic1.imgdb.cn/item/68f20402c5157e1a887d4835.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 8px var(--glow-cyan));
}
.is-user > div > *,
.is-assistant > div > * {
    position: relative;
    z-index: 2 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
/* ═══════════════════════════════════════════════════════
   按钮（操作栏）
   ═══════════════════════════════════════════════════════ */
.is-assistant > div button,
.is-user > div button {
    background: linear-gradient(135deg, rgba(15, 20, 25, 0.85), rgba(12, 89, 117, 0.25)) !important;
    color: var(--jjk-cyan-bright) !important;
    border: 1px solid var(--jjk-cyan-dark) !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
    padding: 3px 8px !important;
    font-size: 0.8em !important;
    box-shadow: inset 0 0 0 1px rgba(19, 231, 246, 0.2), inset 0 1px 0 rgba(244, 211, 138, 0.15) !important;
    margin-right: 6px !important;
    position: relative;
    z-index: 5 !important;
}
.is-assistant > div button:hover,
.is-user > div button:hover {
    background: linear-gradient(135deg, rgba(19, 231, 246, 0.2), rgba(12, 89, 117, 0.35)) !important;
    color: #FFFFFF !important;
    border-color: var(--jjk-cyan-bright) !important;
    box-shadow: inset 0 0 0 1px var(--jjk-cyan-bright), 0 0 10px var(--glow-cyan), inset 0 1px 0 rgba(244, 211, 138, 0.25) !important;
    transform: translateY(-1px) !important;
}
.is-assistant > div button svg,
.is-user > div button svg { stroke: var(--jjk-cyan-bright) !important; }
/* ═══════════════════════════════════════════════════════
   标题
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer h1,
.rili-markdown-renderer h2,
.rili-markdown-renderer h3 {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 1.65em !important;
    letter-spacing: 5px !important;
    color: var(--jjk-cyan-bright) !important;
    border-bottom: none !important;
    text-shadow:
        2px 2px 0px #000000,
        0 0 12px var(--glow-cyan),
        3px 3px 8px rgba(0, 0, 0, 0.7) !important;
    padding-bottom: 10px;
    margin: 22px 0 16px !important;
    position: relative;
    font-weight: 900 !important;
}
.rili-markdown-renderer h1::before,
.rili-markdown-renderer h2::before,
.rili-markdown-renderer h3::before {
    content: '◈';
    margin-right: 12px;
    color: var(--jjk-gold-bright);
    font-size: 0.75em;
    text-shadow: 0 0 8px var(--glow-gold);
}
.rili-markdown-renderer h1::after,
.rili-markdown-renderer h2::after,
.rili-markdown-renderer h3::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 60%; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jjk-gold-dark) 10%,
        var(--jjk-gold-bright) 30%,
        var(--jjk-cyan-bright) 55%,
        var(--jjk-cyan-dark) 80%,
        transparent 100%);
    box-shadow: 0 0 6px var(--glow-cyan);
}
/* ═══════════════════════════════════════════════════════
   强调与链接
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer strong {
    color: var(--jjk-gold-bright) !important;
    font-weight: 900 !important;
    background: linear-gradient(90deg, rgba(244, 211, 138, 0.1), rgba(19, 231, 246, 0.08)) !important;
    padding: 1px 6px !important;
    border-left: 2px solid var(--jjk-gold) !important;
    border-right: 2px solid var(--jjk-cyan-dark) !important;
    display: inline-block !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px var(--glow-gold) !important;
}
.rili-markdown-renderer a {
    color: var(--jjk-cyan-bright) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed var(--jjk-cyan) !important;
    transition: all 0.25s ease !important;
    font-weight: 700 !important;
}
.rili-markdown-renderer a:hover {
    color: var(--jjk-gold-bright) !important;
    border-bottom: 2px solid var(--jjk-gold-bright) !important;
    text-shadow: 0 0 6px var(--glow-gold) !important;
}
/* ═══════════════════════════════════════════════════════
   引用块
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer blockquote {
    border-left: 4px solid var(--jjk-cyan-bright) !important;
    background: linear-gradient(90deg,
        rgba(12, 89, 117, 0.25) 0%,
        rgba(15, 20, 25, 0.95) 50%,
        rgba(15, 20, 25, 0.95) 100%) !important;
    padding: 14px 20px !important;
    color: var(--jjk-text) !important;
    margin: 14px 0 !important;
    position: relative !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(244, 211, 138, 0.12) !important;
}
.rili-markdown-renderer blockquote::before {
    content: '「';
    position: absolute;
    top: -18px; left: 15px;
    font-size: 3.5em;
    color: var(--jjk-cyan);
    opacity: 0.3;
    font-family: 'Ma Shan Zheng', serif;
}
/* ═══════════════════════════════════════════════════════
   清除 summary 内的下划线
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer summary,
.rili-markdown-renderer summary *,
.rili-markdown-renderer summary strong,
.rili-markdown-renderer summary a {
    text-decoration: none !important;
    border-bottom: none !important;
}
.rili-markdown-renderer summary strong {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-shadow: 0 0 6px rgba(0, 27, 36, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}
/* ═══════════════════════════════════════════════════════
   Details 外壳 —— 多层叠加 + 暗金描边
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer details {
    background:
        linear-gradient(135deg,
            rgba(12, 89, 117, 0.18) 0%,
            rgba(15, 20, 25, 0.95) 35%,
            rgba(10, 14, 20, 0.98) 70%,
            rgba(74, 40, 120, 0.08) 100%) !important;
    border: 1px solid var(--jjk-cyan-dark) !important;
    border-left: 4px solid var(--jjk-cyan-bright) !important;
    outline: none !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 3 !important;
    overflow: hidden !important;
    border-radius: 0 6px 6px 0 !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
    will-change: box-shadow, border-color !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    box-shadow:
        inset 0 0 0 1px rgba(244, 211, 138, 0.12),
        inset 0 1px 0 rgba(244, 211, 138, 0.18),
        inset 0 -1px 0 rgba(19, 231, 246, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.75) !important;
}
/* 左下角咒纹回字装饰 */
.rili-markdown-renderer details::before {
    content: '';
    position: absolute;
    bottom: 5px; left: 8px;
    width: 18px; height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M0 18 L0 0 L4 0 L4 14 L14 14 L14 9 L9 9 L9 4 L18 4' stroke='%23F4D38A' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: 8;
    pointer-events: none;
    animation: jjkCornerGlow 3.5s ease-in-out infinite;
}
/* 右上角对应装饰 */
.rili-markdown-renderer details > summary::after,
.rili-markdown-renderer details::after {
    content: '';
    position: absolute;
    top: 5px; right: 8px;
    width: 18px; height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M18 0 L18 18 L14 18 L14 4 L4 4 L4 9 L9 9 L9 14 L0 14' stroke='%2313E7F6' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: 8;
    pointer-events: none;
    animation: jjkCornerGlow 3.5s ease-in-out infinite 1.5s;
}
.rili-markdown-renderer details:hover {
    border-color: var(--jjk-cyan-bright) !important;
    box-shadow:
        inset 0 0 0 1px rgba(244, 211, 138, 0.25),
        inset 0 1px 0 rgba(244, 211, 138, 0.35),
        0 6px 22px rgba(0, 0, 0, 0.85),
        0 0 20px var(--glow-cyan) !important;
}
.rili-markdown-renderer details[open] { /* no transform to prevent flicker */ }
.rili-markdown-renderer details[open]:hover { /* no transform to prevent flicker */ }
/* ═══════════════════════════════════════════════════════
   Summary —— 6 段渐变 + 右侧菱形咒纹 + 流光扫过
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer summary {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 1.12em !important;
    letter-spacing: 3px !important;
    padding: 13px 25px 13px 54px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    position: relative !important;
    z-index: 4 !important;
    color: var(--jjk-text-bright) !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    background: linear-gradient(90deg,
        var(--jjk-cyan) 0%,
        var(--jjk-cyan-bright) 18%,
        #0DD8E8 35%,
        var(--jjk-cyan) 55%,
        var(--jjk-cyan-dark) 78%,
        var(--jjk-cyan-abyss) 100%) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 6px rgba(244, 211, 138, 0.3) !important;
    border-bottom: 1px solid rgba(244, 211, 138, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(244, 211, 138, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
    transition: all 0.35s ease !important;
    overflow: hidden;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}
.rili-markdown-renderer summary::-webkit-details-marker { display: none !important; }
/* 右侧咒纹菱形纹路（mask 渐显） */
.rili-markdown-renderer summary::after {
    content: '' !important;
    position: absolute !important;
    right: 0; top: 0; bottom: 0;
    width: 62% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M25 3 L47 25 L25 47 L3 25 Z' stroke='%23F4D38A' stroke-width='2.5' fill='none'/%3E%3Ccircle cx='25' cy='25' r='2.5' fill='%23F4D38A' opacity='0.7'/%3E%3C/svg%3E") !important;
    background-size: 26px 26px !important;
    background-repeat: repeat !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 25%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,1) 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 25%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,1) 100%) !important;
    opacity: 0.4;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: opacity 0.4s ease !important;
    animation: none !important;
    width: 62%; height: auto;
    top: 0;
}
/* 左侧"咒"字印章 */
.rili-markdown-renderer summary::before {
    content: '咒' !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Ma Shan Zheng', cursive !important;
    font-size: 0.95em !important;
    color: var(--jjk-text-bright) !important;
    background: linear-gradient(135deg, var(--jjk-cyan-abyss) 0%, var(--jjk-cyan-dark) 50%, var(--jjk-cyan-abyss) 100%) !important;
    width: 30px; height: 30px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px !important;
    border: 1px solid var(--jjk-gold-dark) !important;
    box-shadow:
        inset 0 0 0 1px var(--border-lit),
        inset 0 1px 0 rgba(244, 211, 138, 0.3),
        0 2px 8px var(--glow-cyan) !important;
    text-shadow: 0 0 6px var(--jjk-cyan-bright), 0 0 2px #FFFFFF !important;
    letter-spacing: 0 !important;
    transition: all 0.4s ease !important;
    z-index: 5 !important;
}
.rili-markdown-renderer details[open] > summary::before {
    content: '展' !important;
    background: linear-gradient(135deg, var(--jjk-cyan-bright) 0%, #FFFFFF 50%, var(--jjk-cyan-bright) 100%) !important;
    color: var(--jjk-cyan-abyss) !important;
    text-shadow: none !important;
    animation: jjkSealPulse 2.2s ease-in-out infinite !important;
}
.rili-markdown-renderer summary:hover {
    background: linear-gradient(90deg,
        var(--jjk-cyan-bright) 0%,
        #80F0FF 18%,
        var(--jjk-cyan-bright) 38%,
        var(--jjk-cyan) 60%,
        var(--jjk-cyan-dark) 85%,
        var(--jjk-cyan-abyss) 100%) !important;
    color: var(--jjk-cyan-abyss) !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.rili-markdown-renderer summary:hover::after { opacity: 0.85 !important; }
.rili-markdown-renderer summary:hover::before {
    background: linear-gradient(135deg, var(--jjk-gold-bright) 0%, #FFFFFF 50%, var(--jjk-gold-bright) 100%) !important;
    color: var(--jjk-blood-dark) !important;
    border-color: var(--jjk-gold-bright) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 0 18px var(--glow-gold) !important;
    text-shadow: none !important;
}
/* ═══════════════════════════════════════════════════════
   ★ Details 内容区 —— 卷轴质感（核心美化）★
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer details > *:not(summary) {
    padding: 18px 24px 22px 24px !important;
    /* 三层背景叠加：径向中心受光 + 主色暗渐变 + 咒纹repeat水印 */
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%,
            rgba(19, 231, 246, 0.08) 0%,
            transparent 70%),
        radial-gradient(ellipse 60% 100% at 50% 100%,
            rgba(244, 211, 138, 0.04) 0%,
            transparent 70%),
        linear-gradient(180deg,
            rgba(10, 14, 20, 0.98) 0%,
            rgba(15, 22, 32, 0.95) 30%,
            rgba(12, 18, 28, 0.97) 70%,
            rgba(8, 12, 18, 1) 100%) !important;
    border: none !important;
    margin: 0 !important;
    color: var(--jjk-text) !important;
    font-size: 1.02em !important;
    line-height: 1.85 !important;
    z-index: 2 !important;
    position: relative !important;
    border-radius: 0 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    /* 多层 inset 阴影制造"嵌入感" */
    box-shadow:
        inset 0 8px 18px -10px rgba(0, 0, 0, 0.95),
        inset 0 -6px 14px -8px rgba(0, 0, 0, 0.8),
        inset 4px 0 0 var(--jjk-cyan-bright),
        inset 5px 0 8px -3px var(--glow-cyan) !important;
    animation: none !important;
}
/* 顶部双线：金 + 青 */
.rili-markdown-renderer details > *:not(summary)::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jjk-gold-dark) 15%,
        var(--jjk-gold-bright) 50%,
        var(--jjk-gold-dark) 85%,
        transparent 100%);
    box-shadow: 0 0 4px var(--glow-gold), 0 2px 0 -1px var(--jjk-cyan);
    pointer-events: none;
}
/* 底部对称装饰 + 流光扫过 */
.rili-markdown-renderer details > *:not(summary)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jjk-cyan-dark) 20%,
        var(--jjk-cyan-bright) 50%,
        var(--jjk-cyan-dark) 80%,
        transparent 100%);
    box-shadow: 0 0 4px var(--glow-cyan);
    pointer-events: none;
}
/* ═══════════════════════════════════════════════════════
   分色面板 —— 不同 class 不同色域身份
   ═══════════════════════════════════════════════════════ */
/* battle-status —— 朱砂红（战斗/血咒） */
.rili-markdown-renderer details.battle-status {
    border-left-color: var(--jjk-blood) !important;
    background:
        linear-gradient(135deg,
            rgba(107, 30, 24, 0.25) 0%,
            rgba(15, 20, 25, 0.95) 35%,
            rgba(10, 14, 20, 0.98) 100%) !important;
}
.rili-markdown-renderer details.battle-status > summary {
    background: linear-gradient(90deg,
        #C4463A 0%, #E05744 18%, #C4463A 38%,
        #8B2820 60%, #4A0D10 85%, #1A0508 100%) !important;
}
.rili-markdown-renderer details.battle-status > summary::before {
    content: '战' !important;
    background: linear-gradient(135deg, #1A0508 0%, #6B1E18 50%, #1A0508 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(196, 70, 58, 0.7),
        inset 0 1px 0 rgba(244, 211, 138, 0.25),
        0 2px 8px var(--glow-blood) !important;
    text-shadow: 0 0 6px var(--jjk-blood), 0 0 2px #FFE0DD !important;
}
.rili-markdown-renderer details.battle-status > *:not(summary) {
    box-shadow:
        inset 0 8px 18px -10px rgba(0, 0, 0, 0.95),
        inset 0 -6px 14px -8px rgba(0, 0, 0, 0.8),
        inset 4px 0 0 var(--jjk-blood),
        inset 5px 0 8px -3px var(--glow-blood) !important;
}
/* profile-card —— 默认青色（咒术师） */
.rili-markdown-renderer details.profile-card > summary::before { content: '术' !important; }
/* party-card —— 紫色（领域/咒术栏） */
.rili-markdown-renderer details.party-card {
    border-left-color: var(--jjk-violet) !important;
    background:
        linear-gradient(135deg,
            rgba(74, 40, 120, 0.25) 0%,
            rgba(15, 20, 25, 0.95) 35%,
            rgba(10, 14, 20, 0.98) 100%) !important;
}
.rili-markdown-renderer details.party-card > summary {
    background: linear-gradient(90deg,
        #9D63E8 0%, #B47BFF 18%, #9D63E8 38%,
        #6A3FAF 60%, #3E2274 85%, #1A0D33 100%) !important;
}
.rili-markdown-renderer details.party-card > summary::before {
    content: '式' !important;
    background: linear-gradient(135deg, #1A0D33 0%, #4A2878 50%, #1A0D33 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(157, 99, 232, 0.7),
        inset 0 1px 0 rgba(244, 211, 138, 0.25),
        0 2px 8px var(--glow-violet) !important;
    text-shadow: 0 0 6px var(--jjk-violet), 0 0 2px #F0E0FF !important;
}
.rili-markdown-renderer details.party-card > *:not(summary) {
    box-shadow:
        inset 0 8px 18px -10px rgba(0, 0, 0, 0.95),
        inset 0 -6px 14px -8px rgba(0, 0, 0, 0.8),
        inset 4px 0 0 var(--jjk-violet),
        inset 5px 0 8px -3px var(--glow-violet) !important;
}
/* interaction-panel —— 暗金（情报/档案） */
.rili-markdown-renderer details.interaction-panel {
    border-left-color: var(--jjk-gold-bright) !important;
    background:
        linear-gradient(135deg,
            rgba(107, 79, 31, 0.25) 0%,
            rgba(15, 20, 25, 0.95) 35%,
            rgba(10, 14, 20, 0.98) 100%) !important;
}
.rili-markdown-renderer details.interaction-panel > summary {
    background: linear-gradient(90deg,
        #C8A050 0%, #F4D38A 18%, #C8A050 38%,
        #8A6A20 60%, #4A3810 85%, #1F1604 100%) !important;
    color: #1F1604 !important;
    text-shadow: 0 1px 2px rgba(255, 230, 180, 0.4) !important;
}
.rili-markdown-renderer details.interaction-panel > summary::before {
    content: '档' !important;
    background: linear-gradient(135deg, #1F1604 0%, #6B4F1F 50%, #1F1604 100%) !important;
    color: var(--jjk-gold-bright) !important;
    box-shadow:
        inset 0 0 0 1px rgba(244, 211, 138, 0.7),
        inset 0 1px 0 rgba(244, 211, 138, 0.4),
        0 2px 8px var(--glow-gold) !important;
    text-shadow: 0 0 6px var(--jjk-gold-bright) !important;
}
.rili-markdown-renderer details.interaction-panel > *:not(summary) {
    box-shadow:
        inset 0 8px 18px -10px rgba(0, 0, 0, 0.95),
        inset 0 -6px 14px -8px rgba(0, 0, 0, 0.8),
        inset 4px 0 0 var(--jjk-gold-bright),
        inset 5px 0 8px -3px var(--glow-gold) !important;
}
/* 嵌套小面板压缩 */
.rili-markdown-renderer details.nested-detail > summary,
.rili-markdown-renderer details.technique-slot > summary,
.rili-markdown-renderer details.npc-profile > summary,
.rili-markdown-renderer details.cursed-tool > summary,
.rili-markdown-renderer details.inventory-detail > summary,
.rili-markdown-renderer details.bond-detail > summary,
.rili-markdown-renderer details.memory-section > summary,
.rili-markdown-renderer details.archive-section > summary,
.rili-markdown-renderer details.npc-technique > summary {
    font-size: 0.98em !important;
    padding: 10px 18px 10px 44px !important;
    min-height: 36px !important;
}
.rili-markdown-renderer details.nested-detail > summary::before,
.rili-markdown-renderer details.technique-slot > summary::before,
.rili-markdown-renderer details.npc-profile > summary::before,
.rili-markdown-renderer details.cursed-tool > summary::before,
.rili-markdown-renderer details.inventory-detail > summary::before,
.rili-markdown-renderer details.bond-detail > summary::before,
.rili-markdown-renderer details.memory-section > summary::before,
.rili-markdown-renderer details.archive-section > summary::before,
.rili-markdown-renderer details.npc-technique > summary::before {
    width: 24px; height: 24px;
    font-size: 0.8em !important;
    left: 11px;
}
.rili-markdown-renderer details.technique-slot > summary::before { content: '术' !important; }
.rili-markdown-renderer details.cursed-tool > summary::before { content: '具' !important; }
.rili-markdown-renderer details.inventory-detail > summary::before { content: '袋' !important; }
.rili-markdown-renderer details.npc-profile > summary::before { content: '人' !important; }
.rili-markdown-renderer details.npc-technique > summary::before { content: '式' !important; }
.rili-markdown-renderer details.bond-detail > summary::before { content: '羁' !important; }
.rili-markdown-renderer details.memory-section > summary::before { content: '忆' !important; }
.rili-markdown-renderer details.archive-section > summary::before { content: '档' !important; }
.rili-markdown-renderer details.nested-detail > summary::before { content: '势' !important; }
/* ═══════════════════════════════════════════════════════
   表格
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer table {
    border: 3px solid #000000 !important;
    background: linear-gradient(180deg,
        rgba(15, 20, 25, 0.98) 0%,
        rgba(10, 14, 20, 1) 100%) !important;
    font-size: 1em !important;
    clip-path: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px)) !important;
    border-collapse: collapse !important;
    width: 100% !important;
    box-shadow:
        inset 0 0 0 1px var(--border-gold),
        inset 0 1px 0 rgba(244, 211, 138, 0.2) !important;
}
.rili-markdown-renderer th {
    background: linear-gradient(135deg,
        var(--jjk-cyan-dark) 0%,
        var(--jjk-cyan) 50%,
        var(--jjk-cyan-dark) 100%) !important;
    color: var(--jjk-text-bright) !important;
    border: 1px solid #000000 !important;
    padding: 11px 16px !important;
    letter-spacing: 2px !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 6px var(--glow-cyan) !important;
}
.rili-markdown-renderer td {
    border: 1px solid rgba(12, 89, 117, 0.5) !important;
    color: var(--jjk-text) !important;
    padding: 10px 16px !important;
    transition: background 0.25s ease;
}
.rili-markdown-renderer tr:hover td {
    background: rgba(19, 231, 246, 0.06) !important;
}
/* ═══════════════════════════════════════════════════════
   代码块
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer code {
    background: rgba(15, 20, 25, 0.9) !important;
    color: var(--jjk-gold-bright) !important;
    border: 1px solid var(--jjk-cyan-dark) !important;
    box-shadow: inset 0 0 0 1px rgba(244, 211, 138, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 0 !important;
    font-size: 0.92em !important;
    font-family: 'Courier New', monospace !important;
}
.rili-markdown-renderer pre {
    white-space: pre-wrap !important;
    background: linear-gradient(180deg, #0F1419, #050810) !important;
    border-left: 4px solid var(--jjk-gold-bright) !important;
    padding: 14px 18px !important;
}
/* ═══════════════════════════════════════════════════════
   输入框区域（保留原方案）
   ═══════════════════════════════════════════════════════ */
form#prompt-input {
    background-color: transparent !important;
    box-shadow: none !important;
}
div[data-slot="input-group"] {
    background: linear-gradient(135deg, rgba(15, 20, 25, 1), rgba(12, 89, 117, 0.15)) !important;
    border: 2px solid var(--jjk-cyan-dark) !important;
    border-radius: 4px !important;
    box-shadow:
        inset 0 0 0 1px rgba(244, 211, 138, 0.15),
        inset 0 1px 0 rgba(244, 211, 138, 0.25) !important;
    transition: all 0.3s ease !important;
}
div[data-slot="input-group"]:focus-within {
    box-shadow:
        inset 0 0 0 1px var(--jjk-cyan-bright),
        inset 0 1px 0 rgba(244, 211, 138, 0.35),
        0 0 18px var(--glow-cyan) !important;
    border-color: var(--jjk-cyan-bright) !important;
}
#prompt-input textarea {
    background-color: transparent !important;
    border: none !important;
    color: var(--jjk-text-bright) !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
}
#prompt-input textarea::placeholder { color: rgba(74, 143, 173, 0.5) !important; }
#prompt-input-header button,
#prompt-input-footer button:not([type="submit"]) {
    background: linear-gradient(135deg, rgba(15, 20, 25, 0.9), rgba(12, 89, 117, 0.2)) !important;
    color: var(--jjk-cyan-bright) !important;
    border: 1px solid var(--jjk-cyan-dark) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 0 rgba(244, 211, 138, 0.2) !important;
    transition: all 0.25s ease !important;
}
#prompt-input-header button:hover,
#prompt-input-footer button:not([type="submit"]):hover {
    border-color: var(--jjk-gold-bright) !important;
    box-shadow: 0 0 10px var(--glow-cyan), inset 0 1px 0 rgba(244, 211, 138, 0.3) !important;
    color: var(--jjk-gold-bright) !important;
}
#prompt-input-footer button[type="submit"] {
    background: linear-gradient(135deg, var(--jjk-cyan-dark) 0%, var(--jjk-cyan-bright) 100%) !important;
    color: var(--jjk-cyan-abyss) !important;
    border: 1px solid var(--jjk-gold) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 2px 8px var(--glow-cyan) !important;
    font-weight: 900 !important;
}
#prompt-input-footer button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--jjk-cyan-bright) 0%, var(--jjk-gold-bright) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 4px 14px var(--glow-gold) !important;
    transform: translateY(-2px) !important;
}
/* ═══════════════════════════════════════════════════════
   加载动画
   ═══════════════════════════════════════════════════════ */
div:has(> .style_dot-flashing__8L91Q),
.sonner-loading-wrapper {
    width: 100% !important;
    max-width: 300px !important;
    aspect-ratio: 16 / 9 !important;
    background: #0F1419 !important;
    border: 3px solid #000000 !important;
    box-shadow:
        inset 0 0 0 1px var(--border-gold),
        inset 0 1px 0 rgba(244, 211, 138, 0.2),
        0 10px 25px rgba(0, 0, 0, 0.9) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    margin: 1em 0 !important;
    clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px)) !important;
}
.style_dot-flashing__8L91Q::before,
.style_dot-flashing__8L91Q::after,
.sonner-spinner { display: none !important; }
.style_dot-flashing__8L91Q,
.sonner-loading-wrapper::before {
    content: '' !important;
    width: 100% !important; height: 100% !important;
    position: absolute !important; top: 0 !important; left: 0 !important;
    background-image: url('https://pic1.imgdb.cn/item/68f24213c5157e1a887e7506.gif') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 5 !important;
    animation: none !important;
}
/* ═══════════════════════════════════════════════════════
   三列容器 + 滚动条
   ═══════════════════════════════════════════════════════ */
.rili-markdown-renderer .triple-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin: 12px 0 !important;
    align-items: start !important;
}
.rili-markdown-renderer .triple-container > details[open] {
    grid-column: 1 / -1 !important;
}
::-webkit-scrollbar { width: 9px !important; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--jjk-gold), var(--jjk-cyan-dark)) !important;
    border: 1px solid #000000 !important;
    border-radius: 2px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--jjk-gold-bright), var(--jjk-cyan)) !important;
}
::-webkit-scrollbar-track {
    background: #0F1419 !important;
    border: 1px solid #000000 !important;
}
/* ═══════════════════════════════════════════════════════
   移动端
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body, * { letter-spacing: 1.5px !important; }
    .is-user > div, .is-assistant > div { padding: 22px 18px 45px 18px !important; }
    .rili-markdown-renderer h1, .rili-markdown-renderer h2, .rili-markdown-renderer h3 {
        font-size: 1.4em !important; letter-spacing: 3px !important;
    }
    .rili-markdown-renderer summary {
        padding: 10px 18px 10px 46px !important;
        font-size: 1em !important;
    }
    .rili-markdown-renderer summary::before { width: 26px; height: 26px; left: 10px; }
    .rili-markdown-renderer .triple-container {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}
@media (max-width: 480px) {
    .is-user > div, .is-assistant > div { padding: 18px 14px 40px 14px !important; }
}