/* =========================================================
   水墨修真风格 (Ink Wash Cultivation Theme)
   ========================================================= */

/* --- 1. 用户气泡：玄墨夜影 (User Bubble) --- */
.group.is-user > div:first-child {
  background: linear-gradient(135deg, rgba(22, 26, 31, 0.95) 0%, rgba(36, 42, 48, 0.9) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px 2px 12px 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 0 15px rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(8px) !important;
  position: relative !important;
  isolation: isolate !important;
}

/* 用户气泡正文文本（月白高亮，极高可读度） */
.group.is-user .rili-markdown-renderer,
.group.is-user .rili-markdown-renderer * {
  color: #e6ebf0 !important;
}

/* --- 2. AI 气泡：淡雅宣纸 (Assistant Bubble) --- */
.group.is-assistant > div:first-child {
  background: linear-gradient(135deg, rgba(246, 244, 239, 0.96) 0%, rgba(233, 229, 220, 0.92) 100%) !important;
  border: 1px solid rgba(70, 75, 80, 0.25) !important;
  border-radius: 2px 12px 12px 12px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), inset 0 0 25px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: blur(8px) !important;
  position: relative !important;
  isolation: isolate !important;
}

/* AI 气泡正文文本（玄墨色，字迹清晰） */
.group.is-assistant .rili-markdown-renderer,
.group.is-assistant .rili-markdown-renderer * {
  color: #1a1c1e !important;
}

/* --- 3. 水墨修真风格 Markdown 细节塑造 --- */
/* 引用块 (Blockquote) - 仿竹简/墨痕笔触 */
.rili-markdown-renderer blockquote {
  border-left: 3px solid #5a646e !important;
  background: rgba(0, 0, 0, 0.04) !important;
  padding: 8px 12px !important;
  margin: 8px 0 !important;
  font-style: normal !important;
}

.group.is-user .rili-markdown-renderer blockquote {
  border-left-color: #8c9ba5 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 行内代码块 */
.rili-markdown-renderer code:not(pre code) {
  background: rgba(0, 0, 0, 0.06) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: "Courier New", Courier, monospace !important;
}

.group.is-user .rili-markdown-renderer code:not(pre code) {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* --- 4. 底部 Token 消耗信息与控制按钮联动 --- */
/* 始终保持底部操作按钮显示 */
.group .md\:opacity-0 {
  opacity: 1 !important;
}

/* 按钮容器水墨风改造 */
.bg-muted.rounded.flex {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(4px) !important;
}

.group.is-user .bg-muted.rounded.flex {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 按钮图标与文本适配 */
.bg-muted.rounded.flex button svg.lucide {
  stroke: rgba(26, 28, 30, 0.75) !important;
}

.group.is-user .bg-muted.rounded.flex button svg.lucide {
  stroke: rgba(230, 235, 240, 0.85) !important;
}

/* Token 信息文字颜色适应 */
.text-xs.font-mono.text-muted-foreground {
  color: rgba(26, 28, 30, 0.65) !important;
}

.group.is-user .text-xs.font-mono.text-muted-foreground {
  color: rgba(230, 235, 240, 0.7) !important;
}

/* --- 5. 水墨太极加载动效 (Ink Loading Animation) --- */
/* 隐藏原生 3 个跳动点 */
.flex.gap-2.w-full.h-full.items-center.justify-center > span {
  display: none !important;
}

/* 自定义水墨太极旋转 SVG 加载动画 */
.flex.gap-2.w-full.h-full.items-center.justify-center {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="36" height="36"><g><circle cx="50" cy="50" r="45" fill="none" stroke="%232c3238" stroke-width="2" stroke-dasharray="20 10"/><circle cx="50" cy="50" r="40" fill="none" stroke="%235a646e" stroke-width="1.5"/><path d="M50 10 A40 40 0 0 0 50 90 A20 20 0 0 1 50 50 A20 20 0 0 0 50 10 Z" fill="%232c3238"/><circle cx="50" cy="30" r="5" fill="%23f6f4ef"/><circle cx="50" cy="70" r="5" fill="%232c3238"/><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3s" repeatCount="indefinite"/></g></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 32px 32px !important;
  min-height: 40px !important;
}