/* “极乐岛”直播聊天框美化方案 */

/* 1. 用户（玩家）输入气泡框 */
.group.is-user > div:first-child {
  background: linear-gradient(135deg, rgba(255, 0, 150, 0.85), rgba(100, 0, 255, 0.85)) !important;
  border: none !important;
  border-radius: 20px 20px 5px 20px !important;
  padding: 15px 20px !important;
  box-shadow: 0 5px 20px rgba(255, 0, 150, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
/* 用户气泡动效背景层 */
.group.is-user > div:first-child::before {
  content: '';
  position: absolute !important;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, rgba(255, 255, 255, 0.1), transparent 30%);
  animation: rotate 10s linear infinite !important;
  z-index: -1 !important;
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}

/* 2. AI（游戏引擎/旁白）输出气泡框 */
.group.is-assistant > div:first-child {
  background: rgba(20, 20, 40, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(100, 100, 255, 0.3) !important;
  border-radius: 20px 20px 20px 5px !important;
  padding: 20px !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 150, 255, 0.1) !important;
  position: relative !important;
}
/* AI气泡左侧霓虹灯装饰条 */
.group.is-assistant > div:first-child::after {
  content: '';
  position: absolute !important;
  top: 10px;
  left: -8px;
  width: 4px;
  height: calc(100% - 20px);
  background: linear-gradient(to bottom, #00ccff, #ff00ff) !important;
  border-radius: 2px;
  box-shadow: 0 0 8px #00ccff;
}

/* 3. 统一聊天气泡内文字样式 (最高优先级覆盖) */
.rili-markdown-renderer, .rili-markdown-renderer * {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
/* 确保链接等在深色背景下可见 */
.rili-markdown-renderer a {
  color: #66ccff !important;
  text-decoration: underline !important;
}

/* 4. AI聊天框底部附加信息 (Token/模型) */
.text-xs.font-mono.text-muted-foreground {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.8rem !important;
  margin-top: 8px !important;
}
/* 修饰蓝点/绿点 */
.text-xs.font-mono.text-muted-foreground > span:first-child {
  filter: drop-shadow(0 0 3px currentColor) !important;
}

/* 5. 底部操作按钮区 */
.bg-muted.rounded.flex {
  background: rgba(40, 40, 70, 0.8) !important;
  backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(100, 100, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  margin-top: 10px !important;
  /* 强制按钮一直显示 */
  opacity: 1 !important;
}
/* 单个按钮 */
.bg-muted.rounded.flex button {
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px !important;
  transition: all 0.2s ease !important;
}
.bg-muted.rounded.flex button:hover {
  background: rgba(255, 0, 150, 0.2) !important;
  transform: translateY(-2px) !important;
}
/* 按钮内图标 */
.bg-muted.rounded.flex button svg.lucide {
  stroke: rgba(255, 255, 255, 0.9) !important;
  width: 18px !important;
  height: 18px !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 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'%3E%3Ccircle cx='15' cy='15' r='12' fill='none' stroke='%23ff00ff' stroke-width='3' opacity='0.8'%3E%3Canimate attributeName='r' values='12;6;12' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.8;0.4;0.8' dur='1.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='60' cy='15' r='12' fill='none' stroke='%2300ccff' stroke-width='3' opacity='0.8'%3E%3Canimate attributeName='r' values='12;6;12' dur='1.2s' begin='0.4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.8;0.4;0.8' dur='1.2s' begin='0.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='105' cy='15' r='12' fill='none' stroke='%23ffff00' stroke-width='3' opacity='0.8'%3E%3Canimate attributeName='r' values='12;6;12' dur='1.2s' begin='0.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.8;0.4;0.8' dur='1.2s' begin='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") no-repeat center !important;
  background-size: 120px 30px !important;
  min-height: 60px !important;
}

/* 7. 整体聊天区域微调 */
/* 为聊天历史区域添加极 subtle 的网格背景 */
.main-chat-container { /* 假设的主容器选择器，可能需要根据实际平台调整 */
  background-image: 
    linear-gradient(rgba(100, 100, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 100, 255, 0.05) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}