/* ========================================
   《斩！赤红之瞳》黑暗残酷风格 - 全局改造
   ======================================== */

/* ==================== 一、消息气泡区 ==================== */

/* 用户消息气泡 - 深灰黑渐变 + 锋利红色边框 */
.group .bg-gray-100\/90 {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid #8B0000 !important;
  border-left: 4px solid #DC143C !important;
  box-shadow: 
    inset 0 0 20px rgba(139, 0, 0, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(220, 20, 60, 0.2) !important;
  position: relative !important;
  isolation: isolate !important;
}

/* 用户消息气泡 - 血迹纹理背景 */
.group .bg-gray-100\/90::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(139, 0, 0, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 0, 0, 0.1) 0%, transparent 40%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139, 0, 0, 0.05) 10px, rgba(139, 0, 0, 0.05) 20px) !important;
  border-radius: inherit !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* AI消息气泡 - 深灰黑渐变 + 锋利红色边框 */
.chat-answer-container .bg-gray-100\/90 {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid #8B0000 !important;
  border-left: 4px solid #DC143C !important;
  box-shadow: 
    inset 0 0 20px rgba(139, 0, 0, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(220, 20, 60, 0.2) !important;
  position: relative !important;
  isolation: isolate !important;
}

/* AI消息气泡 - 血迹纹理背景 */
.chat-answer-container .bg-gray-100\/90::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(139, 0, 0, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 0, 0, 0.1) 0%, transparent 40%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139, 0, 0, 0.05) 10px, rgba(139, 0, 0, 0.05) 20px) !important;
  border-radius: inherit !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 消息文本层 - 确保文本在纹理之上 */
.group .markdown-body,
#ai-chat-answer .markdown-body {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  color: #f5f5f5 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 气泡圆角 - 锋利切割效果 */
.group .rounded-xl,
.chat-answer-container .rounded-xl {
  border-radius: 4px !important;
  clip-path: polygon(
    0 8px, 8px 0, 
    calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px)
  ) !important;
}

/* 顶部装饰条 - 血红刀刃效果 */
.group .bg-\[\#c9e1e9\],
.chat-answer-container .bg-\[\#F1CBCB\] {
  background: linear-gradient(90deg, #8B0000 0%, #DC143C 50%, #8B0000 100%) !important;
  height: 3px !important;
  box-shadow: 0 2px 8px rgba(220, 20, 60, 0.6) !important;
}

/* 消息操作按钮 - 刀刃风格 */
.group .MuiButton-textPrimary {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  border: 1px solid #8B0000 !important;
  color: #FF4560 !important;
  border-radius: 2px !important;
  padding: 4px 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 按钮悬停 - 锋利过渡动画 */
.group .MuiButton-textPrimary:hover {
  background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;
  border-color: #FF4560 !important;
  color: #ffffff !important;
  box-shadow: 
    0 0 15px rgba(220, 20, 60, 0.8),
    inset 0 0 10px rgba(255, 69, 96, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* 按钮刀光效果 */
.group .MuiButton-textPrimary::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%) !important;
  transform: rotate(45deg) translateX(-100%) !important;
  transition: transform 0.6s !important;
}

.group .MuiButton-textPrimary:hover::before {
  transform: rotate(45deg) translateX(100%) !important;
}

/* 模型标识 - 血红强调 */
.chat-answer-container .text-purple-500 {
  color: #FF4560 !important;
  text-shadow: 0 0 8px rgba(220, 20, 60, 0.6) !important;
}

.chat-answer-container .text-orange-500 {
  color: #FF4560 !important;
  font-weight: 600 !important;
}

/* ==================== 二、加载动画区 ==================== */

/* 隐藏默认加载动画 */
.style_dot-flashing__8L91Q {
  display: none !important;
}

/* 血滴/刀光加载动画 */
.flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cdefs%3E%3ClinearGradient id="bloodGrad" x1="0%25" y1="0%25" x2="0%25" y2="100%25"%3E%3Cstop offset="0%25" style="stop-color:%238B0000;stop-opacity:1" /%3E%3Cstop offset="100%25" style="stop-color:%23DC143C;stop-opacity:1" /%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- 血滴1 --%3E%3Cellipse cx="20" cy="50" rx="8" ry="12" fill="url(%23bloodGrad)"%3E%3Canimate attributeName="opacity" values="0.3;1;0.3" dur="1.5s" repeatCount="indefinite" /%3E%3Canimate attributeName="ry" values="12;16;12" dur="1.5s" repeatCount="indefinite" /%3E%3C/ellipse%3E%3C!-- 血滴2 --%3E%3Cellipse cx="50" cy="50" rx="8" ry="12" fill="url(%23bloodGrad)"%3E%3Canimate attributeName="opacity" values="0.3;1;0.3" dur="1.5s" begin="0.5s" repeatCount="indefinite" /%3E%3Canimate attributeName="ry" values="12;16;12" dur="1.5s" begin="0.5s" repeatCount="indefinite" /%3E%3C/ellipse%3E%3C!-- 血滴3 --%3E%3Cellipse cx="80" cy="50" rx="8" ry="12" fill="url(%23bloodGrad)"%3E%3Canimate attributeName="opacity" values="0.3;1;0.3" dur="1.5s" begin="1s" repeatCount="indefinite" /%3E%3Canimate attributeName="ry" values="12;16;12" dur="1.5s" begin="1s" repeatCount="indefinite" /%3E%3C/ellipse%3E%3C!-- 刀光效果 --%3E%3Cpath d="M10,50 L90,50" stroke="%23FF4560" stroke-width="2" opacity="0.6"%3E%3Canimate attributeName="stroke-dasharray" values="0,80;80,0;0,80" dur="2s" repeatCount="indefinite" /%3E%3C/path%3E%3C/svg%3E') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ==================== 三、界面控制区 ==================== */

/* 顶部控制栏 - 深黑背景 */
.sticky.top-0 {
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%) !important;
  border-bottom: 2px solid #8B0000 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9) !important;
}

/* 模型选择器 - 刀刃风格 */
#ai-model-selector {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  border: 2px solid #8B0000 !important;
  color: #f5f5f5 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(139, 0, 0, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#ai-model-selector:hover {
  border-color: #DC143C !important;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.6) !important;
  transform: translateY(-1px) !important;
}

/* 设置按钮 - 刀刃风格 */
#header-setting-button {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  border: 2px solid #8B0000 !important;
  color: #FF4560 !important;
  border-radius: 4px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#header-setting-button:hover {
  background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;
  border-color: #FF4560 !important;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.8) !important;
  transform: scale(1.05) !important;
}

/* 快捷按钮组 - 刀刃风格 */
#ai-mod-button2 .MuiButton-outlinedPrimary {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  border: 2px solid #8B0000 !important;
  color: #FF4560 !important;
  border-radius: 4px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
  background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;
  border-color: #FF4560 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.8) !important;
  transform: translateY(-2px) !important;
}

/* 快捷按钮刀光效果 */
#ai-mod-button2 .MuiButton-outlinedPrimary::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%) !important;
  transform: rotate(45deg) translateX(-100%) !important;
  transition: transform 0.6s !important;
}

#ai-mod-button2 .MuiButton-outlinedPrimary:hover::before {
  transform: rotate(45deg) translateX(100%) !important;
}

/* 底部输入区背景 */
.bg-gradient-to-t {
  background: linear-gradient(to top, #0a0a0a 0%, transparent 100%) !important;
}

/* 输入框容器 - 锋利边框 */
.bg-white.border-\[1\.5px\] {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid #8B0000 !important;
  border-radius: 4px !important;
  box-shadow: 
    inset 0 0 15px rgba(139, 0, 0, 0.3),
    0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

/* 主输入框 */
#ai-chat-input {
  background: transparent !important;
  color: #f5f5f5 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

#ai-chat-input::placeholder {
  color: #8B0000 !important;
  opacity: 0.6 !important;
}

#ai-chat-input::selection {
  background: rgba(220, 20, 60, 0.3) !important;
  color: #ffffff !important;
}

/* 字符计数器 */
.absolute.bottom-2.right-2 .bg-gray-100 {
  background: rgba(139, 0, 0, 0.2) !important;
  color: #FF4560 !important;
  border: 1px solid #8B0000 !important;
  border-radius: 2px !important;
}

/* 发送按钮 - 刀刃风格 */
#ai-send-button {
  background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;
  border: 2px solid #FF4560 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.6) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

#ai-send-button:hover {
  background: linear-gradient(135deg, #FF4560 0%, #DC143C 100%) !important;
  box-shadow: 0 0 25px rgba(255, 69, 96, 0.9) !important;
  transform: scale(1.1) rotate(5deg) !important;
}

/* 发送按钮刀光效果 */
#ai-send-button::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%) !important;
  transform: rotate(45deg) translateX(-100%) !important;
  transition: transform 0.6s !important;
}

#ai-send-button:hover::before {
  transform: rotate(45deg) translateX(100%) !important;
}

/* 分页按钮 - 刀刃风格 */
.MuiPaginationItem-root {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  border: 1px solid #8B0000 !important;
  color: #f5f5f5 !important;
  border-radius: 2px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.MuiPaginationItem-root:hover {
  background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;
  border-color: #FF4560 !important;
  box-shadow: 0 0 10px rgba(220, 20, 60, 0.6) !important;
}

.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;
  border-color: #FF4560 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.8) !important;
}

/* ==================== 四、评论区 ==================== */

/* 评论面板主容器 - 深黑背景 + 锋利边框 */
.absolute.inset-x-0.bottom-0.z-20.bg-white {
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border-top: 3px solid #8B0000 !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.9) !important;
}

/* 评论标题 */
.text-lg.font-bold.pl-3 {
  color: #FF4560 !important;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.6) !important;
  font-weight: 700 !important;
}

/* 关闭按钮 - 刀刃风格 */
button[aria-label="close"] {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  border: 2px solid #8B0000 !important;
  color: #FF4560 !important;
  border-radius: 4px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button[aria-label="close"]:hover {
  background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;
  border-color: #FF4560 !important;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.8) !important;
  transform: rotate(90deg) !important;
}

/* 评分文字 */
.MuiStack-root.px-3 p.text-grey-600 {
  color: #f5f5f5 !important;
}

/* 评分星星 - 血红刀刃效果 */
.MuiRating-iconEmpty {
  color: #8B0000 !important;
  filter: drop-shadow(0 0 3px rgba(139, 0, 0, 0.6)) !important;
}

.MuiRating-iconFilled {
  color: #DC143C !important;
  filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.8)) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.MuiRating-iconFilled:hover {
  color: #FF4560 !important;
  filter: drop-shadow(0 0 12px rgba(255, 69, 96, 1)) !important;
  transform: scale(1.2) rotate(15deg) !important;
}

/* 评分数字 */
.text-orange-500.w-14 {
  color: #FF4560 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(220, 20, 60, 0.6) !important;
}

/* 评论输入框容器 - 锋利边框 */
.flex.flex-col.border-\[1\.5px\].border-gray-200 {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid #8B0000 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 15px rgba(139, 0, 0, 0.3) !important;
}

/* 评论输入框 */
textarea[placeholder="发表评论"] {
  background: transparent !important;
  color: #f5f5f5 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

textarea[placeholder="发表评论"]::placeholder {
  color: #8B0000 !important;
  opacity: 0.6 !important;
}

textarea[placeholder="发表评论"]::selection {
  background: rgba(220, 20, 60, 0.3) !important;
  color: #ffffff !important;
}

/* 字数统计 */
.bg-gray-100.text-xs.font-medium {
  background: rgba(139, 0, 0, 0.2) !important;
  color: #FF4560 !important;
  border: 1px solid #8B0000 !important;
  border-radius: 2px !important;
}

/* 评论发送按钮 - 刀刃风格 */
div[data-state="closed"] .cursor-pointer.group {
  background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;
  border: 2px solid #FF4560 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.6) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

div[data-state="closed"] .cursor-pointer.group:hover {
  background: linear-gradient(135deg, #FF4560 0%, #DC143C 100%) !important;
  box-shadow: 0 0 25px rgba(255, 69, 96, 0.9) !important;
  transform: scale(1.1) rotate(5deg) !important;
}

/* 评论发送按钮刀光效果 */
div[data-state="closed"] .cursor-pointer.group::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%) !important;
  transform: rotate(45deg) translateX(-100%) !important;
  transition: transform 0.6s !important;
}

div[data-state="closed"] .cursor-pointer.group:hover::before {
  transform: rotate(45deg) translateX(100%) !important;
}