【女性视角】💋真实出轨系统&婊子模拟器！

/* 
 * ==========================================
 * 【夜莺系统】八卦剪报风聊天框 & 定制加载动画
 * 风格：新粗野主义、高对比撞色、轻喜剧
 * ==========================================
 */

/* --- 1. 聊天框基础样式 (纸张底色 + 粗黑框 + 撞色硬阴影) --- */
.bg-gray-100\/90.relative.inline-block {
    background-color: #fdfbf7 !important; /* 泛黄纸张底色 */
    border: 3px solid #1a1a1a !important; /* 夸张粗黑边框 */
    border-radius: 0px !important; /* 拒绝圆滑，保持粗野 */
    /* 默认阴影为荧光粉，并叠加波普网点背景 */
    box-shadow: 6px 6px 0px #ff007f !important; 
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.02) 10px, rgba(0,0,0,0.02) 20px) !important;
    padding: 15px !important;
    transition: transform 0.2s ease !important;
}

/* 区分用户输入的聊天框 (使用青色硬阴影产生撞色对比) */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    box-shadow: 6px 6px 0px #00ffff !important;
}

/* --- 2. 绝对可读性保证 (深色粗体文本) --- */
.markdown-body {
    color: #1a1a1a !important;
    font-weight: bold !important;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* 底部附加元素(按钮/Token等)适配浅色背景 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #1a1a1a !important;
    font-weight: 800 !important;
}

/* --- 3. 巨型定制加载动画 --- */
/* 隐藏默认三个点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text { 
    display: none !important; 
}

/* 重构加载容器：巨大化、八卦警示风背景 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 100% !important; 
    min-height: 280px !important; /* 撑开巨大空间 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #fff000 !important; /* 警示亮黄 */
    border: 3px dashed #1a1a1a !important; /* 虚线剪裁边框 */
    margin: 10px 0 !important;
    padding: 20px 0 !important;
    overflow: hidden !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1) !important;
}

/* 图片层：插入用户指定图片，原比例居中，带心跳/弹跳动画 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    display: block !important;
    width: 90% !important; 
    height: 140px !important; /* 限制高度确保不超出 */
    /* 插入指定图片 */
    background-image: url('https://catai.wiki/08c67ad0-218b-4ca9-8906-10d11b9bdf00/w=3000') !important;
    background-size: contain !important; /* 原比例自适应 */
    background-position: center !important;
    background-repeat: no-repeat !important;
    animation: popPulse 1s infinite alternate cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    z-index: 2 !important;
}

@keyframes popPulse {
    0% { transform: scale(0.95) rotate(-2deg); filter: drop-shadow(2px 2px 0 #00ffff); }
    100% { transform: scale(1.05) rotate(2deg); filter: drop-shadow(6px 6px 0 #ff007f); }
}

/* 文本与进度条层：包含提示文字与SVG SMIL动画进度条 */
.flex.items-center.justify-center.w-6.h-5::after {
    /* 换行显示提示文字 */
    content: '【系统加载中...】\A 建议2到4游玩记忆\A 下方有快捷键，按需使用' !important;
    white-space: pre-wrap !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #1a1a1a !important;
    line-height: 1.6 !important;
    margin-top: 20px !important;
    padding: 10px 15px !important;
    width: 85% !important;
    background-color: #fff !important;
    border: 2px solid #1a1a1a !important;
    box-shadow: 4px 4px 0 #00ffff !important; /* 青色阴影 */
    z-index: 2 !important;
    
    /* 强制使用SVG SMIL实现不依赖CSS动画的伪进度条 (粉色背景不断填充) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='0%25' height='100%25' fill='%23ff007f' opacity='0.3'%3E%3Canimate attributeName='width' values='0%25;100%25;0%25' dur='2.5s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}

/* --- 4. 移动端与降动效适配 --- */
@media (max-width: 480px) {
    .flex.items-center.justify-center.w-6.h-5 { min-height: 240px !important; padding: 10px 0 !important; }
    .flex.items-center.justify-center.w-6.h-5::before { height: 100px !important; }
    .flex.items-center.justify-center.w-6.h-5::after { font-size: 12px !important; width: 90% !important; }
}

@media (prefers-reduced-motion: reduce) {
    /* 降低图片弹跳幅度与频率 */
    .flex.items-center.justify-center.w-6.h-5::before {
        animation: popPulseSlow 4s infinite alternate ease-in-out !important;
    }
    @keyframes popPulseSlow {
        0% { transform: scale(1); filter: none; }
        100% { transform: scale(1.02); filter: drop-shadow(2px 2px 0 #ff007f); }
    }
}

ai {
  display: block;
  background: #fff0f5 url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23ffb6c1' opacity='0.4'/%3E%3C/svg%3E");
  color: #111;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 15px 10px;
  border: 4px solid #111;
  box-shadow: 8px 8px 0 #ff1493;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
/* 浮动性感唇印背景动画 */
@keyframes floatKiss {
  0% { transform: scale(1) rotate(-15deg); opacity: 0.2; }
  50% { transform: scale(1.1) rotate(5deg); opacity: 0.4; }
  100% { transform: scale(1) rotate(-15deg); opacity: 0.2; }
}
ai::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ff1493' d='M20,50 Q40,30 50,50 Q60,30 80,50 Q90,60 80,70 Q60,60 50,70 Q40,60 20,70 Q10,60 20,50 Z'/%3E%3Cpath fill='%23fff' opacity='0.5' d='M30,55 Q50,45 70,55 Q50,65 30,55 Z'/%3E%3C/svg%3E") no-repeat center/contain;
  animation: floatKiss 4s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
}

/* 系统隐藏折叠 */
ai .sys {
  font-size: 12px;
  color: #666;
  background: #f4f4f4;
  border: 1px dashed #aaa;
  padding: 5px;
  margin-bottom: 15px;
  opacity: 0.8;
}
ai .sys summary { background: transparent; color: #666; border: none; box-shadow: none; margin: 0; padding: 0; }

/* 模块通用：八卦杂志剪贴风 */
ai details.mod {
  background: #fff;
  margin: 15px 0;
  border: 2px solid #111;
  padding: 12px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}
/* 胶带拼贴效果 */
ai details.mod::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 100px;
  height: 25px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #ddd;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  z-index: 10;
  pointer-events: none;
}

/* 模块色彩变体与错位阴影 */
ai .t1 { box-shadow: 5px 5px 0 #ff1493; } /* 荧光粉 - 危险/魅惑 */
ai .t2 { box-shadow: 5px 5px 0 #ffea00; } /* 明黄 - 警告/情报 */
ai .t3 { box-shadow: 5px 5px 0 #00ffff; } /* 青紫 - 个人/冷艳 */
ai .opt { box-shadow: 5px 5px 0 #ff4500; background: #fff5e6; border: 3px dashed #ff4500; } /* 亮橙 - 行动选项 */

/* 标题样式：报纸剪字风格 */
ai summary {
  font-weight: 900;
  font-size: 15px;
  background: #111;
  color: #ffea00;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  margin: -12px -12px 12px -12px;
  border-bottom: 2px solid #111;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
ai summary::-webkit-details-marker { display: none; }
ai .t1 summary { color: #ff1493; }
ai .t3 summary { color: #00ffff; }
ai .opt summary { background: #ff4500; color: #fff; border-bottom: 3px dashed #111; }

/* 布局标签 */
ai v { display: flex; flex-direction: column; gap: 6px; }
ai g { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin-bottom: 5px; }

/* 数据条目 */
ai d {
  display: block;
  font-size: 13.5px;
  padding: 6px 8px;
  background: #fdfdfd;
  border: 1px solid #eee;
  border-left: 4px solid #ccc;
}
ai d b { color: #ff1493; margin-right: 4px; font-weight: 800; }

/* 副标题（高亮胶带风） */
ai h {
  display: inline-block;
  background: #ffea00;
  color: #111;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 10px;
  margin: 12px 0 6px 0;
  border: 2px solid #111;
  transform: rotate(-1.5deg);
  box-shadow: 2px 2px 0 #ff1493;
}
ai .t3 h { background: #00ffff; box-shadow: 2px 2px 0 #111; }

/* 正文小说区：日记信纸风格 */
ai txt {
  display: block;
  padding: 20px;
  margin: 15px 0;
  background-color: #fff9e6;
  background-image: repeating-linear-gradient(transparent, transparent 27px, #ffb6c1 28px);
  border: 2px solid #111;
  box-shadow: 4px 4px 0 #111;
  font-size: 15px;
  line-height: 28px;
  color: #222;
  position: relative;
  border-radius: 2px 15px 2px 15px;
}
/* 正文钞票漂浮点缀 */
ai txt::before {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='50' font-size='50' fill='%2385bb65' opacity='0.3' text-anchor='middle' dominant-baseline='central' transform='rotate(15 50 50)'%3E%24%3C/text%3E%3C/svg%3E") no-repeat center/contain;
  pointer-events: none;
}

/* 特定颜色块美化 (夸张化) */
ai .y { background: #fff0f5; border-left-color: #ff1493; }
ai .y b { color: #c71585; }
ai .i { background: #e0ffff; border-left-color: #00ced1; }
ai .g { background: #f0fff0; border-left-color: #32cd32; }

/* 潜意识切片高亮 */
ai .hlight { background: #ff4500; color: #fff; transform: rotate(1deg); box-shadow: 2px 2px 0 #111; }
ai .hl { background: #111; color: #fff; border: none; font-style: italic; }
ai .hl b { color: #ffea00; }

/* 记忆区规则说明 */
ai mr {
  display: block;
  font-size: 12px;
  color: #fff;
  background: #111;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 4px;
}
ai mr b { color: #ffea00; }
ai .sm { margin-top: 5px; border: 1px dashed #ccc; padding: 5px; background: #fafafa; }
ai .sm summary { background: transparent; color: #111; border: none; font-size: 13px; margin: 0; padding: 5px; text-transform: none; box-shadow: none;}
ai .sm summary::before { content: '📂 '; }

/* 行动选项互动感 */
ai .opt d {
  background: #fff;
  border: 2px solid #111;
  border-left: 2px solid #111;
  margin: 6px 0;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 2px 2px 0 #ccc;
}
ai .opt d:hover { transform: translateX(5px); box-shadow: 2px 2px 0 #ff4500; border-color: #ff4500; color: #ff4500; }
ai .opt d b { color: #ff4500; font-size: 16px; margin-right: 8px;}

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