/* 折叠面板恐怖风格 */
.rili-markdown-renderer details { border: 1px solid #3a0000; border-radius: 0; margin: 0.8em 0; box-shadow: 0 0 8px rgba(255, 0, 0, 0.2); position: relative; overflow: hidden; background-color: #0f0f0f; /* 确保背景颜色固定 */ }
.rili-markdown-renderer details::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,0,0,0.05) 0%, rgba(0,0,0,0) 50%, rgba(255,0,0,0.05) 100%); pointer-events: none; }
.rili-markdown-renderer details[open] { border-color: #8b0000; box-shadow: 0 0 12px rgba(255, 0, 0, 0.3);background: #fff; }
.rili-markdown-renderer details[open]::after { content: "☠"; position: absolute; bottom: 5px; right: 5px; color: #e0e0e0; /* 改为浅色确保可见性 */ text-shadow: 0 0 2px #ff0000; /* 添加红色阴影增强恐怖感 */ font-size: 1.2em; opacity: 0.9; /* 适当透明度 */ z-index: 1; /* 确保在背景之上 */ }
.rili-markdown-renderer summary { padding: 0.6em 1em; background: linear-gradient(to right, #1a0000, #3a0000); color: #e0e0e0; font-weight: bold; cursor: pointer; text-shadow: 0 0 3px #ff0000; position: relative; border-left: 3px solid #8b0000; }
.rili-markdown-renderer summary:hover { background: linear-gradient(to right, #2a0000, #4a0000); color: #fff; text-shadow: 0 0 5px #ff0000; }
.rili-markdown-renderer summary::marker { content: "▶"; color: #8b0000; }
.rili-markdown-renderer details[open] summary::marker { content: "▼"; color: #ff0000; }

/* 恐怖符号装饰 */
.rili-markdown-renderer summary::before { content: "⚠ "; color: #ff0000; margin-right: 0.5em; }

/* 状态值恐怖风格 */
.status-value { color: #8b0000; font-weight: bold; }

/* 悬停效果增强恐怖氛围 */
*:hover { transition: all 0.3s ease; }

/* --- 统一聊天框基础样式 --- */
.is-user > div, .is-assistant > div { background-color: #f8f8f8 !important; /* 浅色背景 */ border-radius: 0px !important; /* 移除圆角，使用直角设计 */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; position: relative !important; overflow: visible !important; /* 允许内容溢出，以便显示标题栏 */ }

/* --- 确保文本高可读性 --- */
.rili-markdown-renderer { color: #333333 !important; /* 深色文本在浅色背景上可读 */ padding: 10px 15px !important; margin: 0 !important;}

/* --- 输出框专属样式：添加边框和间距 --- */
.is-assistant > div { margin-top: 30px !important; /* 为顶部标题栏留出空间 */ margin-bottom: 30px !important; /* 为底部标题栏留出空间 */ border: 2px solid #000000 !important; /* 黑色实线边框 */ border-top: none !important; /* 移除顶部边框，由标题栏替代 */ border-bottom: none !important; /* 移除底部边框，由标题栏替代 */ width: calc(100% - 4px) !important; /* 确保宽度计算包含边框 */ box-sizing: border-box !important; }

/* --- 创建顶部"综恐大世界"标题栏 --- */
.is-assistant > div::before { content: '由爱故生忧，由爱故生怖' !important; position: absolute !important; top: -30px !important; /* 定位到聊天框上方 */ left: -2px !important; /* 与边框对齐 */ width: 100% !important; /* 与聊天框宽度一致 */ height: 30px !important; background-color: #000000 !important; color: #d11a2d !important; /* 红色文字 */ font-weight: bold !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 0 !important; /* 直角设计 */ letter-spacing: 1px !important; border: 2px solid #000000 !important; border-bottom: none !important; box-sizing: border-box !important; }

/* --- 创建底部黑色长条 --- */
.is-assistant > div::after { content: '' !important; position: absolute !important; bottom: -30px !important; /* 定位到聊天框下方 */ left: -2px !important; /* 与边框对齐 */ width: 100% !important; /* 与聊天框宽度一致 */ height: 30px !important; background-color: #000000 !important; border-radius: 0 !important; /* 直角设计 */ border: 2px solid #000000 !important; border-top: none !important; box-sizing: border-box !important; z-index: 2 !important; }

/* --- 在输出框右下侧添加骷髅头山装饰 --- */
.is-assistant > div .rili-markdown-renderer::after { content: '💀💀💀' !important; position: absolute !important; bottom: -25px !important; /* 放在底部黑条上 */ right: 10px !important; font-size: 16px !important; opacity: 0.9 !important; z-index: 3 !important; /* 确保在黑条上方 */ letter-spacing: -4px !important; /* 负间距让骷髅头挤在一起 */ color: white !important; /* 确保在黑色背景上可见 */ }

/* --- 响应式设计调整 --- */
@media (max-width: 768px) { 
  .is-assistant > div { margin-top: 26px !important; /* 小屏幕上标题栏稍小 */ margin-bottom: 26px !important; } 
  .is-assistant > div::before { top: -26px !important; height: 26px !important; font-size: 12px !important; } 
  .is-assistant > div::after { bottom: -26px !important; height: 26px !important; } 
  .is-assistant > div .rili-markdown-renderer::after { font-size: 14px !important; right: 8px !important; bottom: -22px !important; } 
}

/* --- 添加悬停效果，增强互动感 --- */
.is-assistant > div:hover .rili-markdown-renderer::after { animation: skull-shake 1s ease-in-out !important; }
@keyframes skull-shake { 
  0%, 100% { transform: translateY(0); } 
  25% { transform: translateY(-3px) rotate(-5deg); } 
  50% { transform: translateY(0); } 
  75% { transform: translateY(-2px) rotate(5deg); } 
}

/* --- 确保在黑暗模式下的可见性 --- */
@media (prefers-color-scheme: dark) { 
  .is-assistant > div::before { color: #ff3333 !important; /* 在黑暗模式下使用更亮的红色 */ } 
  .rili-markdown-renderer { color: #333333 !important; /* 确保文本在任何模式下都可读 */ } 
}

/* ===== 综恐主题界面美化 - 恐怖档案馆风格 ===== */

/* --- 1. 顶部栏美化：设置按钮 --- */
#header-setting-button { width: 40px !important; height: 40px !important; border: 2px solid #000000 !important; border-radius: 0 !important; background-color: transparent !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; overflow: hidden !important; }
#header-setting-button::before { content: '☠️' !important; font-size: 18px !important; position: absolute !important; transition: transform 0.4s ease !important; }
#header-setting-button:focus::before, #header-setting-button:active::before { transform: rotate(90deg) !important; }
#header-setting-button:hover { box-shadow: 0 0 8px rgba(139, 0, 0, 0.4) !important; border-color: #8b0000 !important; }
#header-setting-button svg { opacity: 0 !important; }

/* --- 2. 按钮栏美化：统一淡灰色质感按钮 --- */
#ai-mod-button2 button.MuiButton-root { background-color: #f8f8f8 !important; border: 2px solid #000000 !important; border-radius: 0 !important; color: #333333 !important; font-weight: bold !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; transition: all 0.3s ease !important; position: relative !important; }
#ai-mod-button2 button.MuiButton-root:hover { background-color: #eeeeee !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important; border-color: #8b0000 !important; }
#ai-mod-button2 button.MuiButton-root:active { transform: translateY(1px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; }
#ai-mod-button2 button.MuiButton-root svg { color: #333333 !important; transition: color 0.3s ease !important; }
#ai-mod-button2 button.MuiButton-root:hover svg { color: #8b0000 !important; }

/* --- 3. 评分星星美化 --- */
span.MuiRating-iconEmpty svg { color: transparent !important; position: relative !important; }
span.MuiRating-iconEmpty { position: relative !important; }
span.MuiRating-iconEmpty::before { content: '🩸' !important; position: absolute !important; font-size: 1em !important; filter: grayscale(100%) brightness(0.6) !important; opacity: 0.5 !important; }
span.MuiRating-iconFilled svg { color: transparent !important; }
span.MuiRating-iconFilled { position: relative !important; }
span.MuiRating-iconFilled::before { content: '🩸' !important; position: absolute !important; font-size: 1em !important; filter: none !important; opacity: 1 !important; }

/* --- 4. 发送按钮美化 --- */
div.cursor-pointer.group.flex.items-center.justify-center { background-color: #000000 !important; border-radius: 0 !important; width: 44px !important; height: 44px !important; transition: all 0.3s ease !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; }
div.cursor-pointer.group.flex.items-center.justify-center:hover { background-color: #1a1a1a !important; box-shadow: 0 0 12px rgba(139, 0, 0, 0.5) !important; }
div[data-state="closed"] svg[data-icon="Send03"] { color: #d11a2d !important; transition: all 0.3s ease !important; }
div.cursor-pointer.group.flex.items-center.justify-center:hover svg[data-icon="Send03"] { color: #ff3333 !important; transform: scale(1.1) !important; }

/* --- 5. 评论项卡片档案标签 --- */
div.group.ml-0 { position: relative !important; overflow: visible !important; }
div.group.ml-0::before { content: '档案通过 ✔️' !important; position: absolute !important; top: 8px !important; right: 8px !important; background-color: #2a2a2a !important; color: #a0a0a0 !important; font-size: 11px !important; font-weight: bold !important; padding: 4px 10px !important; border: 2px solid #444444 !important; border-radius: 0 !important; z-index: 10 !important; transition: all 0.3s ease !important; letter-spacing: 1px !important; }
div.group.ml-0:hover::before, div.group.ml-0:focus-within::before, div.group.ml-0:active::before { content: '逃生开始 ⭕️' !important; background-color: #1a0000 !important; color: #d11a2d !important; border-color: #8b0000 !important; text-shadow: 0 0 4px rgba(139, 0, 0, 0.6) !important; animation: blood-drip 0.5s ease !important; }
@keyframes blood-drip { 
  0% { opacity: 0.7; transform: translateY(-2px); } 
  50% { opacity: 1; } 
  100% { opacity: 1; transform: translateY(0); } 
}

/* --- 响应式设计 --- */
@media (max-width: 768px) { 
  #header-setting-button { width: 36px !important; height: 36px !important; } 
  #header-setting-button::before { font-size: 16px !important; } 
  div.cursor-pointer.group.flex.items-center.justify-center { width: 40px !important; height: 40px !important; } 
  div.group.ml-0::before { font-size: 10px !important; padding: 3px 8px !important; top: 5px !important; right: 5px !important; } 
}
@media (max-width: 480px) { 
  #header-setting-button { width: 32px !important; height: 32px !important; } 
  div.group.ml-0::before { font-size: 9px !important; padding: 2px 6px !important; } 
}

/* ===== 顶部栏模型选择器 - 恐怖电影海报风格 ===== */

/* --- 模型选择器容器边框 --- */
#ai-model-selector .group.flex.items-center { border: 1.5px solid #333333 !important; border-radius: 0 !important; padding: 4px 10px !important; background-color: transparent !important; transition: all 0.3s ease !important; position: relative !important; }
#ai-model-selector .group.flex.items-center:hover { border-color: #8b0000 !important; box-shadow: 0 0 6px rgba(139, 0, 0, 0.3) !important; }

/* --- 模型名称电影海报字体风格 --- */
#ai-model-selector .truncate.text-\[13px\] { font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', 'Charcoal', sans-serif !important; font-weight: bold !important; font-size: 13px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: #1a1a1a !important; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; font-style: italic !important; transform: skewX(-3deg) !important; }
#ai-model-selector .group.flex.items-center:hover .truncate.text-\[13px\] { color: #8b0000 !important; text-shadow: 0 0 4px rgba(139, 0, 0, 0.4) !important; }

/* --- 下拉箭头样式 --- */
#ai-model-selector .shrink-0.flex.items-center svg { color: #333333 !important; transition: all 0.3s ease !important; width: 14px !important; height: 14px !important; }
#ai-model-selector .group.flex.items-center:hover .shrink-0.flex.items-center svg { color: #8b0000 !important; transform: translateY(2px) !important; }

/* --- 响应式设计 --- */
@media (max-width: 768px) { 
  #ai-model-selector .group.flex.items-center { padding: 3px 8px !important; border-width: 1px !important; } 
  #ai-model-selector .truncate.text-\[13px\] { font-size: 11px !important; letter-spacing: 1px !important; } 
  #ai-model-selector .shrink-0.flex.items-center svg { width: 12px !important; height: 12px !important; } 
}
@media (max-width: 480px) { 
  #ai-model-selector .group.flex.items-center { padding: 2px 6px !important; } 
  #ai-model-selector .truncate.text-\[13px\] { font-size: 10px !important; letter-spacing: 0.5px !important; } 
}

/* ===== 评论区排序按钮 - 综恐主题统一美化 ===== */

/* --- 排序按钮容器 --- */
.MuiStack-root.css-1dmzxoz { gap: 8px !important; }

/* --- 排序按钮通用基础样式 --- */
button.MuiButton-containedPrimary, button.MuiButton-outlinedPrimary { background-color: #f8f8f8 !important; background-image: none !important; border: 2px solid #2a2a2a !important; border-radius: 0 !important; color: #333333 !important; font-weight: bold !important; font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif !important; letter-spacing: 1px !important; text-transform: uppercase !important; box-shadow: 3px 3px 0 #1a1a1a, 0 4px 12px rgba(0, 0, 0, 0.15) !important; transition: all 0.25s ease !important; position: relative !important; overflow: hidden !important; }

/* 按钮装饰性伪元素 - 斜角切割效果 */
button.MuiButton-containedPrimary::before, button.MuiButton-outlinedPrimary::before { content: '' !important; position: absolute !important; top: 0 !important; right: 0 !important; width: 0 !important; height: 0 !important; border-style: solid !important; border-width: 0 12px 12px 0 !important; border-color: transparent #8b0000 transparent transparent !important; opacity: 0 !important; transition: opacity 0.3s ease !important; }

/* 按钮底部装饰线 */
button.MuiButton-containedPrimary::after, button.MuiButton-outlinedPrimary::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 50% !important; width: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, #8b0000, #d11a2d, #8b0000, transparent) !important; transform: translateX(-50%) !important; transition: width 0.3s ease !important; }

/* --- 悬浮状态 --- */
button.MuiButton-containedPrimary:hover, button.MuiButton-outlinedPrimary:hover { background-color: #eeeeee !important; border-color: #8b0000 !important; color: #8b0000 !important; box-shadow: 4px 4px 0 #5c0000, 0 6px 16px rgba(139, 0, 0, 0.3) !important; transform: translate(-1px, -1px) !important; }
button.MuiButton-containedPrimary:hover::before, button.MuiButton-outlinedPrimary:hover::before { opacity: 1 !important; }
button.MuiButton-containedPrimary:hover::after, button.MuiButton-outlinedPrimary:hover::after { width: 80% !important; }

/* --- 点击/激活状态 --- */
button.MuiButton-containedPrimary:active, button.MuiButton-outlinedPrimary:active { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 #1a1a1a, 0 2px 8px rgba(0, 0, 0, 0.2) !important; background-color: #e8e8e8 !important; }

/* --- 选中状态（已选中的排序按钮） --- */
button.MuiButton-containedPrimary.Mui-selected, button.MuiButton-containedPrimary[aria-pressed="true"], .MuiStack-root.css-1dmzxoz button.MuiButton-containedPrimary { background-color: #1a1a1a !important; color: #d11a2d !important; border-color: #8b0000 !important; box-shadow: inset 0 0 10px rgba(139, 0, 0, 0.3), 0 0 12px rgba(139, 0, 0, 0.4), 3px 3px 0 #5c0000 !important; text-shadow: 0 0 6px rgba(209, 26, 45, 0.5) !important; }
button.MuiButton-containedPrimary.Mui-selected::before, button.MuiButton-containedPrimary[aria-pressed="true"]::before { opacity: 1 !important; border-color: transparent #d11a2d transparent transparent !important; }
button.MuiButton-containedPrimary.Mui-selected::after, button.MuiButton-containedPrimary[aria-pressed="true"]::after { width: 60% !important; background: linear-gradient(90deg, transparent, #d11a2d, #ff4444, #d11a2d, transparent) !important; animation: bloodPulse 2s ease-in-out infinite !important; }

/* --- 未选中状态（轮廓按钮） --- */
button.MuiButton-outlinedPrimary { background-color: transparent !important; color: #4a4a4a !important; border-color: #666666 !important; box-shadow: 2px 2px 0 #333333, 0 2px 8px rgba(0, 0, 0, 0.1) !important; }
button.MuiButton-outlinedPrimary:hover { background-color: rgba(139, 0, 0, 0.08) !important; color: #8b0000 !important; border-color: #8b0000 !important; }

/* --- 血液脉动动画 --- */
@keyframes bloodPulse { 
  0%, 100% { opacity: 0.7 !important; } 
  50% { opacity: 1 !important; } 
}

/* --- 禁用状态 --- */
button.MuiButton-containedPrimary:disabled, button.MuiButton-outlinedPrimary:disabled { background-color: #cccccc !important; color: #888888 !important; border-color: #999999 !important; box-shadow: none !important; cursor: not-allowed !important; }
button.MuiButton-containedPrimary:disabled::before, button.MuiButton-containedPrimary:disabled::after, button.MuiButton-outlinedPrimary:disabled::before, button.MuiButton-outlinedPrimary:disabled::after { display: none !important; }

/* --- 聚焦状态（键盘导航） --- */
button.MuiButton-containedPrimary:focus-visible, button.MuiButton-outlinedPrimary:focus-visible { outline: 2px dashed #8b0000 !important; outline-offset: 3px !important; }

/* --- 响应式设计 --- */
@media (max-width: 768px) { 
  button.MuiButton-containedPrimary, button.MuiButton-outlinedPrimary { font-size: 11px !important; letter-spacing: 0.5px !important; border-width: 1.5px !important; box-shadow: 2px 2px 0 #1a1a1a, 0 3px 8px rgba(0, 0, 0, 0.12) !important; } 
  button.MuiButton-containedPrimary::before, button.MuiButton-outlinedPrimary::before { border-width: 0 10px 10px 0 !important; } 
  .MuiStack-root.css-1dmzxoz { gap: 6px !important; } 
}
@media (max-width: 480px) { 
  button.MuiButton-containedPrimary, button.MuiButton-outlinedPrimary { font-size: 10px !important; letter-spacing: 0.3px !important; border-width: 1px !important; box-shadow: 1px 1px 0 #1a1a1a, 0 2px 6px rgba(0, 0, 0, 0.1) !important; } 
  button.MuiButton-containedPrimary::before, button.MuiButton-outlinedPrimary::before { border-width: 0 8px 8px 0 !important; } 
  .MuiStack-root.css-1dmzxoz { gap: 4px !important; } 
}