/* =========================================================
 * 《绯月怪谈·2018 县城诡录》 (Rilichat 深度适配版)
 * 怪奇凄美 × 深夜校园 × 压抑叙事
 * ======================================================= */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;600;800&family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    --cm-bg-dark: #1a0f26;
    --cm-bg-darker: #0f0817;
    --cm-blood: #8b0000;
    --cm-blood-light: rgba(139, 0, 0, 0.4);
    --cm-gold: #d4af37;
    --cm-brass: rgba(139, 109, 61, 0.4);
    --cm-text-main: #c5b3d9;
    --cm-text-muted: #a389bd;
    --cm-purple: rgba(75, 0, 130, 0.2);
}

/* === 0. 全局背景：深夜校园 === */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -9999;
    background: 
        radial-gradient(circle at 10% 20%, rgba(75, 0, 130, 0.3), transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(139, 0, 0, 0.2), transparent 50%),
        linear-gradient(180deg, #0a0612, #1a0f26);
    animation: bgShift 20s ease-in-out infinite alternate;
}

@keyframes bgShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(15deg); }
}

/* === 1. 全局字体与排版 (覆盖 Rilichat 默认字体) === */
.rili-markdown-renderer {
    color: var(--cm-text-main) !important;
    font-family: 'M PLUS Rounded 1c', 'Noto Sans SC', sans-serif !important;
    letter-spacing: 0.3px !important;
}

.rili-markdown-renderer p,
.rili-markdown-renderer li,
.rili-markdown-renderer span,
.rili-markdown-renderer div,
.rili-markdown-renderer blockquote {
    font-size: 16px !important;
    line-height: 1.8 !important;
    font-family: 'M PLUS Rounded 1c', 'Noto Sans SC', sans-serif !important;
    color: var(--cm-text-muted) !important;
}

.rili-markdown-renderer pre,
.rili-markdown-renderer code {
    font-family: 'JetBrains Mono', monospace !important;
}

/* 诡异标题 */
.rili-markdown-renderer h1, 
.rili-markdown-renderer h2, 
.rili-markdown-renderer h3 {
    font-family: 'Ma Shan Zheng', serif !important;
    color: var(--cm-gold) !important;
    font-weight: 700 !important;
    margin: 0 0 16px !important;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(139, 0, 0, 0.5) !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8);
    position: relative;
    animation: titleGlitch 3s ease-in-out infinite;
}

@keyframes titleGlitch {
    0%, 90%, 100% { transform: translateX(0); }
    92% { transform: translateX(-2px); }
    94% { transform: translateX(2px); }
    96% { transform: translateX(-1px); }
}

.rili-markdown-renderer strong {
    color: var(--cm-blood) !important;
    font-weight: 700 !important;
    background: linear-gradient(to top, rgba(139, 0, 0, 0.2) 50%, transparent 50%);
    text-shadow: 0 0 5px rgba(139, 0, 0, 0.5);
}

/* === 2. 聊天气泡：诡异档案袋与血管脉动 === */
.is-user > div, 
.is-assistant > div {
    position: relative !important;
    background: linear-gradient(135deg, var(--cm-bg-dark) 0%, var(--cm-bg-darker) 100%) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 2px solid var(--cm-blood-light) !important;
    box-shadow: 0 0 30px rgba(139, 0, 0, 0.3), inset 0 0 60px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    animation: containerPulse 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes containerPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(139, 0, 0, 0.3), inset 0 0 40px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 0 40px rgba(139, 0, 0, 0.5), inset 0 0 60px rgba(0, 0, 0, 0.7); }
}

/* 气泡内的血管纹理背景 */
.is-user > div::before, 
.is-assistant > div::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(139, 0, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(75, 0, 130, 0.1) 0%, transparent 50%),
        repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(139, 109, 61, 0.03) 2px, rgba(139, 109, 61, 0.03) 4px);
    opacity: 0.6;
    animation: veinsFlow 8s linear infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes veinsFlow {
    0% { background-position: 0 0, 100% 100%, 0 0; }
    100% { background-position: 100% 100%, 0 0, 40px 0; }
}

/* 气泡底部操作按钮 (复制, 编辑等) */
.is-assistant > div button,
.is-user > div button {
    background: rgba(26, 15, 38, 0.8) !important;
    color: var(--cm-gold) !important;
    border: 1px solid var(--cm-blood-light) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease !important;
}

.is-assistant > div button:hover,
.is-user > div button:hover {
    background: rgba(139, 0, 0, 0.4) !important;
    color: #ff4444 !important;
    border-color: var(--cm-blood) !important;
    box-shadow: 0 0 15px rgba(139,0,0,0.6) !important;
}

.is-assistant > div button svg,
.is-user > div button svg {
    stroke: var(--cm-gold) !important;
}

/* === 3. 状态栏 (Details)：多层诡异边框 === */
.rili-markdown-renderer details {
    margin: 16px 0 !important;
    border-radius: 12px !important;
    background: rgba(26, 15, 38, 0.8) !important;
    border: 2px solid var(--cm-brass) !important;
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important;
    position: relative;
    animation: detailsBreath 5s ease-in-out infinite;
}

@keyframes detailsBreath {
    0%, 100% { border-color: rgba(139, 109, 61, 0.4); box-shadow: 0 0 20px rgba(139, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.6); }
    50% { border-color: rgba(139, 0, 0, 0.6); box-shadow: 0 0 35px rgba(139, 0, 0, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.8); }
}

/* 四角符文 */
.rili-markdown-renderer details::before {
    content: '◆'; position: absolute; top: 8px; left: 8px; color: rgba(139, 0, 0, 0.3); font-size: 12px; animation: runeRotate 4s linear infinite; pointer-events: none;
}
.rili-markdown-renderer details::after {
    content: '◆'; position: absolute; bottom: 8px; right: 8px; color: rgba(139, 0, 0, 0.3); font-size: 12px; animation: runeRotate 4s linear infinite reverse; pointer-events: none;
}

@keyframes runeRotate {
    0% { transform: rotate(0deg); opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { transform: rotate(360deg); opacity: 0.3; }
}

/* 状态栏标题 (Summary) */
.rili-markdown-renderer summary {
    padding: 12px 20px !important;
    cursor: pointer !important;
    background: linear-gradient(90deg, rgba(139, 0, 0, 0.2), rgba(75, 0, 130, 0.2)) !important;
    color: var(--cm-gold) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(139, 109, 61, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rili-markdown-renderer summary::-webkit-details-marker { display: none !important; }

.rili-markdown-renderer summary::before {
    content: "❖" !important;
    font-size: 1.2rem !important;
    color: var(--cm-blood) !important;
    margin-right: 10px !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: inline-block !important;
    text-shadow: 0 0 8px rgba(139, 0, 0, 0.6) !important;
    filter: none !important;
}

.rili-markdown-renderer summary:hover {
    background: linear-gradient(90deg, rgba(139, 0, 0, 0.4), rgba(75, 0, 130, 0.4)) !important;
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
    transform: translateX(4px);
}

.rili-markdown-renderer summary:hover::before {
    transform: scale(1.3) rotate(90deg) !important;
    color: #ff4444 !important;
}

.rili-markdown-renderer details[open] > summary::before {
    transform: rotate(90deg) !important;
}

/* 展开内容区：幽灵浮现 */
.rili-markdown-renderer details > pre,
.rili-markdown-renderer details > table,
.rili-markdown-renderer details > div {
    background: rgba(15, 8, 23, 0.6) !important;
    border: none !important;
    animation: ghostFadeIn 0.5s ease-out;
}

@keyframes ghostFadeIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* === 4. 表格：血迹斑驳 === */
.rili-markdown-renderer table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 12px 0 !important;
    background: rgba(26, 15, 38, 0.6) !important;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(139, 0, 0, 0.3) !important;
}

.rili-markdown-renderer th {
    background: linear-gradient(90deg, rgba(139, 0, 0, 0.3), rgba(75, 0, 130, 0.3)) !important;
    color: var(--cm-gold) !important;
    padding: 8px !important;
    font-weight: 700 !important;
    border: 1px solid rgba(139, 109, 61, 0.2) !important;
}

.rili-markdown-renderer td {
    padding: 8px !important;
    border: 1px solid rgba(139, 109, 61, 0.2) !important;
    color: var(--cm-text-muted) !important;
}

/* === 5. 输入框及周边控件：血月边框 === */
form#prompt-input { background-color: transparent !important; box-shadow: none !important; }

/* 外圈容器 */
div[data-slot="input-group"] {
    background: rgba(26, 15, 38, 0.9) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(139, 0, 0, 0.5) !important;
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

div[data-slot="input-group"]:focus-within {
    border-color: var(--cm-blood) !important;
    box-shadow: 0 0 30px rgba(139, 0, 0, 0.6), inset 0 0 15px rgba(139, 0, 0, 0.2) !important;
}

/* 输入框本体 */
#prompt-input textarea {
    color: var(--cm-text-main) !important;
    font-family: 'M PLUS Rounded 1c', 'Noto Sans SC', sans-serif !important;
}
#prompt-input textarea::placeholder { color: rgba(163, 137, 189, 0.4) !important; }

/* 输入框功能按钮 */
#prompt-input-header button,
#prompt-input-footer button {
    background: rgba(15, 8, 23, 0.8) !important;
    border: 1px solid rgba(139, 109, 61, 0.3) !important;
    color: var(--cm-gold) !important;
    border-radius: 6px !important;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.5) !important;
    transition: all 0.2s ease !important;
}

#prompt-input-header button:hover,
#prompt-input-footer button:hover {
    background: linear-gradient(135deg, rgba(139,0,0,0.4), rgba(75,0,130,0.4)) !important;
    border-color: var(--cm-blood) !important;
    color: #ff4444 !important;
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.5) !important;
}

#prompt-input-header button svg, #prompt-input-footer button svg { stroke: var(--cm-gold) !important; }
#prompt-input-header button:hover svg, #prompt-input-footer button:hover svg { stroke: #ff4444 !important; }

#prompt-input-footer .truncate { color: var(--cm-gold) !important; }
#prompt-input-footer button:hover .truncate { color: #ff4444 !important; }

/* 发送按钮特化 - 猩红风格 */
#prompt-input-footer button[type="submit"] {
    background: linear-gradient(145deg, #8b0000, #4b0082) !important;
    color: var(--cm-gold) !important;
    border: 1px solid var(--cm-gold) !important;
    box-shadow: 0 0 15px rgba(139,0,0,0.6) !important;
}

#prompt-input-footer button[type="submit"]:hover {
    background: linear-gradient(145deg, #a30000, #5c0099) !important;
    color: #fff !important;
    box-shadow: 0 0 25px rgba(255,0,0,0.8) !important;
}
#prompt-input-footer button[type="submit"] svg { stroke: var(--cm-gold) !important; }

/* === 6. 加载动画：血月脉动与符文旋转 === */
/* 覆盖原版加载容器 */
div:has(> .style_dot-flashing__8L91Q), 
.sonner-loading-wrapper {
    position: relative !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 20px 0 40px 0 !important;
    filter: drop-shadow(0 0 15px rgba(139, 0, 0, 0.4)) !important;
}

/* 隐藏原有伪元素与多余内容 */
.style_dot-flashing__8L91Q::before,
.style_dot-flashing__8L91Q::after,
.sonner-spinner {
    display: none !important;
}

/* 外层血月脉动圆环 (注入到 Wrapper 的 before) */
div:has(> .style_dot-flashing__8L91Q)::before,
.sonner-loading-wrapper::before {
    content: "" !important;
    position: absolute !important;
    width: 60px !important;
    height: 60px !important;
    border: 3px solid rgba(139, 0, 0, 0.6) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.5), inset 0 0 20px rgba(139, 0, 0, 0.3) !important;
    animation: bloodPulse 2s ease-in-out infinite !important;
    clip-path: none !important; /* 清除古风版的五角星裁剪 */
    background: transparent !important;
    display: block !important;
}

@keyframes bloodPulse {
    0%, 100% { transform: scale(1); border-color: rgba(139, 0, 0, 0.6); box-shadow: 0 0 20px rgba(139, 0, 0, 0.5), inset 0 0 20px rgba(139, 0, 0, 0.3); }
    50% { transform: scale(1.15); border-color: rgba(139, 0, 0, 0.9); box-shadow: 0 0 35px rgba(139, 0, 0, 0.8), inset 0 0 30px rgba(139, 0, 0, 0.5); }
}

/* 内层旋转符文 (替换 Dot) */
.style_dot-flashing__8L91Q {
    content: "◆" !important;
    position: absolute !important;
    font-size: 2rem !important;
    color: var(--cm-gold) !important;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 30px rgba(139, 0, 0, 0.5) !important;
    animation: runeSpinGlow 3s linear infinite !important;
    background: transparent !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@keyframes runeSpinGlow {
    0% { transform: rotate(0deg); text-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 30px rgba(139, 0, 0, 0.5); }
    50% { text-shadow: 0 0 25px rgba(212, 175, 55, 1), 0 0 50px rgba(139, 0, 0, 0.8); }
    100% { transform: rotate(360deg); text-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 30px rgba(139, 0, 0, 0.5); }
}

/* 加载提示文字：读取记忆 */
div:has(> .style_dot-flashing__8L91Q)::after,
.sonner-loading-wrapper::after {
    content: "读取记忆..." !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 15px !important;
    margin-left: 0 !important;
    font-size: 1rem !important;
    color: var(--cm-blood) !important;
    font-family: 'Ma Shan Zheng', serif !important;
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.6) !important;
    animation: memoryFlicker 1.5s ease-in-out infinite !important;
    white-space: nowrap !important;
}

@keyframes memoryFlicker {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.4; }
    50% { opacity: 1; }
    75% { opacity: 0.6; }
}

/* === 7. 自定义语义组件 (保留原版机制，注入 Rilichat 渲染器内) === */
.rili-markdown-renderer .npc-dialog {
    color: var(--cm-gold) !important; font-weight: 700 !important; background: rgba(139, 109, 61, 0.2) !important; padding: 2px 8px !important; border-radius: 6px !important; border-bottom: 2px solid rgba(139, 109, 61, 0.5) !important; text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

.rili-markdown-renderer .npc-thought {
    color: var(--cm-blood) !important; font-style: italic !important; background: rgba(139, 0, 0, 0.1) !important; padding: 2px 6px !important; border-left: 3px solid var(--cm-blood) !important;
}

/* YUKI-2015 容器 */
.rili-markdown-renderer .dk { background: rgba(26, 15, 38, 0.8); border-radius: 12px; padding: 12px; margin: 12px 0; border-left: 4px solid #8b6d3d; box-shadow: 0 0 15px rgba(139, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.5); position: relative; }
.rili-markdown-renderer .dk::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.5), transparent); animation: scanLine 3s linear infinite; }
@keyframes scanLine { 0% { transform: translateY(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
.rili-markdown-renderer .dk.sd { border-left-color: var(--cm-blood); }
.rili-markdown-renderer .tp { background: linear-gradient(135deg, rgba(139, 0, 0, 0.1), rgba(75, 0, 130, 0.1)); border: 1px solid rgba(139, 109, 61, 0.3); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; font-size: 0.85rem; color: var(--cm-gold); font-family: 'JetBrains Mono', monospace; display: flex; justify-content: space-between; }
.rili-markdown-renderer .mg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rili-markdown-renderer .mi { flex: 1 1 45%; background: rgba(15, 8, 23, 0.6); border: 1px solid rgba(139, 109, 61, 0.3); border-radius: 6px; padding: 5px 10px; font-size: 0.8rem; display: flex; justify-content: space-between; align-items: center; }
.rili-markdown-renderer .lb { font-weight: bold; color: #8b6d3d; margin-right: 6px; }
.rili-markdown-renderer .lb.s::after { content: "⚡ SAN"; } .rili-markdown-renderer .lb.h::after { content: "🌡️ 燥热"; } .rili-markdown-renderer .lb.r::after { content: "📊 排名"; } .rili-markdown-renderer .lb.a::after { content: "🚨 警戒"; }
.rili-markdown-renderer .vl { font-family: 'JetBrains Mono', monospace; color: var(--cm-text-main); }
.rili-markdown-renderer .vl.red { color: var(--cm-blood); font-weight: 700; animation: dangerPulse 1.5s ease-in-out infinite; }
@keyframes dangerPulse { 0%, 100% { text-shadow: 0 0 5px rgba(139, 0, 0, 0.5); } 50% { text-shadow: 0 0 15px rgba(139, 0, 0, 0.8); } }

/* 情报网纸条 */
.rili-markdown-renderer .ap { display: flex !important; flex-direction: column !important; background: rgba(26, 15, 38, 0.6) !important; padding: 8px 10px !important; border-radius: 8px !important; margin-bottom: 6px !important; border-left: 4px solid #666 !important; font-size: 0.85rem !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; }
.rili-markdown-renderer .ap.rd { border-left-color: var(--cm-blood) !important; } .rili-markdown-renderer .ap.qq { border-left-color: #4b0082 !important; } .rili-markdown-renderer .ap.wl { border-left-color: var(--cm-gold) !important; }
.rili-markdown-renderer .nt { background: rgba(255, 248, 225, 0.1) !important; color: var(--cm-gold) !important; padding: 10px !important; border: 1px solid rgba(139, 109, 61, 0.4) !important; border-radius: 6px; margin-top: 10px; animation: paperTremble 4s ease-in-out infinite; transform-origin: center top; }
@keyframes paperTremble { 0%, 100% { transform: rotate(-0.5deg) translateY(0); } 25% { transform: rotate(0.5deg) translateY(-2px); } 50% { transform: rotate(-0.3deg) translateY(0); } 75% { transform: rotate(0.3deg) translateY(-1px); } }
.rili-markdown-renderer .nt:hover { animation-play-state: paused; transform: scale(1.02) rotate(0deg); box-shadow: 0 5px 20px rgba(139, 0, 0, 0.3); }