/* === 废土风格聊天框美化 === */
/* 核心：锈蚀金属质感 + 高可读性文字 */

/* 1. 全局聊天气泡基础样式：锈蚀金属背景 */
.group.is-user > div:first-child,
.group.is-assistant > div:first-child {
  border: none !important;
  background: linear-gradient(135deg, #3a3a3a, #2a2a2a) !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(255, 165, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* 锈蚀纹理叠加层 */
.group.is-user > div:first-child::before,
.group.is-assistant > div:first-child::before {
  content: '';
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1 !important;
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(139, 0, 0, 0.05) 2px, rgba(139, 0, 0, 0.05) 4px),
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(184, 115, 51, 0.08) 1px, rgba(184, 115, 51, 0.08) 3px),
    radial-gradient(ellipse at 20% 30%, rgba(218, 165, 32, 0.15) 0%, transparent 30%),
    radial-gradient(ellipse at 80% 70%, rgba(139, 0, 0, 0.1) 0%, transparent 30%);
  opacity: 0.7 !important;
}

/* 用户气泡的独特“警示”色调 */
.group.is-user > div:first-child {
  background: linear-gradient(135deg, #4a2c2a, #3a1c1a) !important;
}
.group.is-user > div:first-child::before {
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 69, 0, 0.07) 2px, rgba(255, 69, 0, 0.07) 4px),
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(184, 134, 11, 0.1) 1px, rgba(184, 134, 11, 0.1) 3px) !important;
}

/* 2. 【强制规则】气泡内所有文本：高对比度沙色 */
.rili-markdown-renderer,
.rili-markdown-renderer * {
  color: #f5deb3 !important; /* 小麦色，在深背景上极易阅读 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; /* 增强立体感，非模糊 */
}

/* 3. 【强制规则】底部附加信息（Token/模型）：褪色橙色 */
.text-xs.font-mono.text-muted-foreground {
  color: rgba(255, 165, 0, 0.9) !important;
  opacity: 1 !important;
}

/* 4. 按钮区域：工业控制台风格 */
.bg-muted.rounded.flex {
  background: rgba(50, 50, 50, 0.9) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 140, 0, 0.3) !important;
  border-radius: 4px !important;
}
/* 按钮一直显示 */
.group .md\:opacity-0 {
  opacity: 1 !important;
}
.bg-muted.rounded.flex button {
  background: transparent !important;
}
.bg-muted.rounded.flex button:hover {
  background: rgba(255, 140, 0, 0.2) !important;
}

/* 5. 【强制规则】按钮图标：锈蚀金属色 */
.bg-muted.rounded.flex button svg.lucide {
  stroke: rgba(218, 165, 32, 0.95) !important; /* 金色描边 */
}

/* 6. 加载动画改造：模拟辐射扫描或旧式雷达脉冲 */
/* 首先隐藏原生加载点 */
.flex.gap-2.w-full.h-full.items-center.justify-center > span {
  display: none !important;
}
/* 创建一个辐射脉冲圆环动画 */
.flex.gap-2.w-full.h-full.items-center.justify-center::before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #ff8c00;
  border-right-color: rgba(255, 140, 0, 0.5);
  animation: spinPulse 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite !important;
  box-shadow: 0 0 10px #ff8c00;
}
@keyframes spinPulse {
  0% { transform: rotate(0deg); border-width: 3px; opacity: 1; }
  50% { border-width: 8px; opacity: 0.7; }
  100% { transform: rotate(360deg); border-width: 3px; opacity: 1; }
}