我性格相反的两个妹妹

/* 现代哥特风兄妹日常 - 聊天框美化方案 */

/* === 全局聊天框背景（User & Assistant 通用）=== */
/* 为气泡背景层添加深邃的暗色渐变与微光，并移除平台原生边框 */
.group.is-user > div:first-child,
.group.is-assistant > div:first-child {
  background: linear-gradient(145deg, rgba(30, 20, 40, 0.95), rgba(50, 35, 70, 0.95)) !important;
  border: none !important; /* 移除原生边框 */
  border-radius: 16px !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 20px rgba(106, 76, 147, 0.3) !important;
  position: relative !important;
  isolation: isolate !important; /* 创建新的堆叠上下文 */
  overflow: hidden !important;
}

/* 为气泡添加一层动态的幽紫色边缘光晕 (仅作为装饰背景层) */
.group.is-user > div:first-child::before,
.group.is-assistant > div:first-child::before {
  content: '';
  position: absolute !important;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(45deg, transparent, rgba(162, 155, 254, 0.3), transparent) !important;
  border-radius: 18px !important;
  z-index: -1 !important; /* 置于文字内容层之下 */
  animation: subtleGlow 8s ease-in-out infinite alternate !important;
}
@keyframes subtleGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* === 【最高优先级】文字可读性覆盖 === */
/* 由于背景变深，强制将所有正文文字设为高对比度浅色 */
.rili-markdown-renderer,
.rili-markdown-renderer * {
  color: #f0e6ff !important; /* 柔和的浅紫色，高可读性 */
}

/* === 用户输入气泡 (User) 特有样式 - 左侧蓝紫色调 === */
.group.is-user > div:first-child {
  border-left: 4px solid #6c5ce7 !important; /* 左侧强调色条 */
}

/* === AI输出气泡 (Assistant) 特有样式 - 右侧粉紫色调 === */
.group.is-assistant > div:first-child {
  border-right: 4px solid #a29bfe !important; /* 右侧强调色条 */
}

/* === 底部附加信息 (Token消耗/模型信息) === */
.text-xs.font-mono.text-muted-foreground {
  color: rgba(200, 182, 255, 0.7) !important; /* 适配深背景的浅紫色 */
  font-size: 0.75rem !important;
}

/* === 底部操作按钮区 === */
/* 按钮容器 */
.bg-muted.rounded.flex {
  background-color: rgba(60, 50, 90, 0.7) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(108, 92, 231, 0.4) !important;
}
/* 单个按钮 */
.bg-muted.rounded.flex button {
  background: transparent !important;
  transition: all 0.2s ease !important;
}
.bg-muted.rounded.flex button:hover {
  background-color: rgba(108, 92, 231, 0.3) !important;
  transform: scale(1.08);
}
/* 按钮图标 (SVG) - 适配深色背景 */
.bg-muted.rounded.flex button svg.lucide {
  stroke: rgba(200, 182, 255, 0.9) !important; /* 浅紫色图标 */
}
/* 【可选】强制按钮一直显示（如果原平台有 md:opacity-0） */
.group .md\:opacity-0 {
  opacity: 1 !important;
}

/* === 加载动画改造 === */
/* 1. 隐藏原生加载点 */
.flex.gap-2.w-full.h-full.items-center.justify-center > span {
  display: none !important;
}
/* 2. 为容器设置新的SVG动画背景 */
.flex.gap-2.w-full.h-full.items-center.justify-center {
  /* 使用内联SVG创建三个跳动的、符合主题色的圆点 */
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%236c5ce7'/%3E%3Cstop offset='100%25' stop-color='%23a29bfe'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='8' fill='url(%23grad)'%3E%3Canimate attributeName='cy' values='20;10;20' dur='0.8s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='60' cy='20' r='8' fill='url(%23grad)'%3E%3Canimate attributeName='cy' values='20;10;20' dur='0.8s' repeatCount='indefinite' begin='0.2s'/%3E%3C/circle%3E%3Ccircle cx='100' cy='20' r='8' fill='url(%23grad)'%3E%3Canimate attributeName='cy' values='20;10;20' dur='0.8s' repeatCount='indefinite' begin='0.4s'/%3E%3C/circle%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  min-height: 60px !important;
}

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。