/* === 容器与基础配色 === */
ai {
  display: block;
  font-family: 'SimSun', 'STSong', serif;
  font-size: 14px;
  line-height: 1.6;
  color: #3a2a1a;
  background: linear-gradient(135deg, #f9f6f0 0%, #ede4d3 100%);
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
  --era-red: #b92b27;
  --era-gold: #c59b27;
  --era-green: #2e5b3c;
  --era-blue: #2c4957;
  --era-pink: #881b4c;
  --paper-bg: #fdfaf2;
  --border-light: #d4c5a9;
}

/* 动态纸张纹理背景 */
ai::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0px, transparent 1px, transparent 2px, rgba(0,0,0,0.02) 3px),
    repeating-linear-gradient(0deg, rgba(139,69,19,0.03) 0px, transparent 1px, transparent 2px, rgba(139,69,19,0.03) 3px);
  background-size: 3px 3px, 120px 120px;
  opacity: 0.4;
  pointer-events: none;
  animation: paper-drift 60s linear infinite;
  z-index: 0;
}

@keyframes paper-drift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 120px 120px; }
}

ai > * {
  position: relative;
  z-index: 1;
}

/* === 思维链状态栏（科技感深蓝） === */
ai details:first-of-type summary {
  background: linear-gradient(135deg, #1a2332 0%, #2c3e50 100%);
  color: #64b5f6;
  border: 1px solid #34495e;
  box-shadow: 0 2px 8px rgba(28,37,48,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

ai details:first-of-type summary::before {
  content: '';
  position: absolute;
  top: 50%; left: 10px;
  width: 20px; height: 20px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364b5f6" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M1 12h6m6 0h6"/><path d="m4.22 4.22 4.24 4.24m5.08 5.08 4.24 4.24M4.22 19.78l4.24-4.24m5.08-5.08 4.24-4.24"/></svg>') no-repeat center;
  background-size: contain;
  animation: gear-spin 8s linear infinite;
  opacity: 0.5;
}

@keyframes gear-spin {
  to { transform: rotate(360deg); }
}

ai details:first-of-type .th {
  background: linear-gradient(to bottom, #263847 0%, #1e2b38 100%);
  border: 1px solid #34495e;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  color: #aed581;
}

ai details:first-of-type .th p {
  background: rgba(255,255,255,0.03);
  margin: 4px 0;
  padding: 6px 10px;
  border-left: 3px solid #42a5f5;
  border-radius: 2px;
  transition: all 0.3s ease;
}

ai details:first-of-type .th p:hover {
  background: rgba(66,165,245,0.1);
  border-left-color: #64b5f6;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(66,165,245,0.2);
}

ai details:first-of-type .th p[t]::before {
  content: '▸ ' attr(t) ':';
  display: block;
  color: #64b5f6;
  font-weight: bold;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

ai details:first-of-type .th d {
  display: block;
  color: #e0e0e0;
  padding-left: 12px;
  line-height: 1.8;
}

/* === 时间地点栏（红旗金边） === */
hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #2b1d14 0%, #4a3324 100%);
  padding: 10px 16px;
  border-radius: 6px;
  border: 2px solid var(--era-gold);
  color: #fcf6ea;
  margin-bottom: 12px;
  box-shadow: 0 3px 12px rgba(139,69,19,0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

hd::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(197,155,39,0.1) 50%, transparent 70%);
  animation: light-sweep 6s linear infinite;
}

@keyframes light-sweep {
  0% { transform: translate(-100%, -100%) rotate(45deg); }
  100% { transform: translate(100%, 100%) rotate(45deg); }
}

hd f {
  position: relative;
  z-index: 1;
  font-weight: bold;
  color: #ffd54f;
  transition: all 0.3s ease;
}

hd:hover {
  border-color: #ffd54f;
  box-shadow: 0 4px 16px rgba(197,155,39,0.5), inset 0 0 20px rgba(255,213,79,0.1);
  transform: translateY(-2px);
}

hd:hover f {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,213,79,0.8);
}

/* === 叙事正文 === */
article {
  background: var(--paper-bg);
  padding: 16px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  line-height: 1.9;
}

article p {
  text-indent: 2em;
  margin: 10px 0;
  color: #2a1a0a;
}

/* === 通用summary样式 === */
.h {
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid;
  margin-top: 10px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.h::after {
  content: '';
  position: absolute;
  top: 50%; right: 12px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.3s ease;
  transform: translateY(-50%);
}

details[open] .h::after {
  transform: translateY(-50%) rotate(180deg);
}

.h:hover {
  transform: translateX(4px);
  box-shadow: -4px 4px 12px rgba(0,0,0,0.15);
}

/* === 记忆回廊 === */
details:has(.mem) .h {
  background: linear-gradient(135deg, #8d2422 0%, #b92b27 100%);
  color: #fff;
  border-color: #6d1210;
}

.mem {
  background: var(--paper-bg);
  padding: 12px;
  border: 1px solid var(--border-light);
  margin-top: 6px;
  font-size: 12px;
  border-radius: 4px;
}

.mem strong {
  display: block;
  color: var(--era-red);
  margin-bottom: 8px;
  font-size: 13px;
  padding-left: 8px;
  border-left: 4px solid var(--era-red);
}

.mem table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.mem th {
  background: linear-gradient(to bottom, #ebdcc3 0%, #d4c5a9 100%);
  color: #4a3728;
  padding: 6px 8px;
  border: 1px solid #ccc;
  font-size: 11px;
  text-align: center;
}

.mem td {
  border: 1px solid #ddd;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.6;
  transition: background 0.3s ease;
}

.mem tbody tr:nth-child(even) td {
  background: #fafafa;
}

.mem tbody tr:hover td {
  background: #fff8e1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--era-gold);
}

/* === 情报网 === */
details:has(.info) .h {
  background: linear-gradient(135deg, #1e4b3c 0%, #2e5b4c 100%);
  color: #a7d0bf;
  border-color: #163a2e;
}

.info {
  background: linear-gradient(to bottom, #f2f9f5 0%, #e8f5e9 100%);
  padding: 10px;
  border: 1px solid #a7d0bf;
  margin-top: 6px;
  font-size: 13px;
}

.info p[t]::before {
  content: '📌 ' attr(t);
  display: block;
  color: var(--era-green);
  font-weight: bold;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: rgba(46,91,60,0.1);
  border-radius: 3px;
  border-left: 3px solid var(--era-green);
}

.info d {
  display: block;
  padding: 6px 10px;
  margin: 4px 0;
  background: #fff;
  border-radius: 3px;
  border-left: 2px solid #81c784;
  transition: all 0.3s ease;
}

.info d:hover {
  background: #f1f8e9;
  border-left-width: 4px;
  transform: translateX(6px);
  box-shadow: 0 2px 8px rgba(46,91,60,0.15);
}

/* === 角色心声 === */
details:has(.voice) .h {
  background: linear-gradient(135deg, #2e5b70 0%, #3a6f88 100%);
  color: #d0e4ee;
  border-color: #1e3a4a;
}

.voice {
  background: linear-gradient(to bottom, #f0f7fa 0%, #e3f2fd 100%);
  padding: 10px;
  border: 1px solid #b2cfdc;
  margin-top: 6px;
  font-size: 13px;
}

.voice d {
  display: block;
  padding: 8px 12px;
  margin: 6px 0;
  background: #fff;
  border-radius: 4px;
  border-left: 3px solid #42a5f5;
  transition: all 0.3s ease;
}

.voice d:hover {
  background: #e1f5fe;
  border-left-width: 5px;
  transform: translateX(4px);
  box-shadow: 0 3px 10px rgba(42,165,245,0.2);
}

.voice i {
  color: #1976d2;
  font-style: italic;
}

/* === 主控档案 === */
details:has(.pc) .h {
  background: linear-gradient(135deg, #1e4b3c 0%, #2e6b4c 100%);
  color: #cfe7dc;
  border-color: #0f3a2a;
}

.pc {
  background: linear-gradient(to bottom, #f2f9f5 0%, #e8f4ef 100%);
  padding: 12px;
  border: 1px solid #a7d0bf;
  margin-top: 6px;
  font-size: 13px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.pc p {
  background: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  border-left: 3px solid var(--era-green);
  transition: all 0.3s ease;
  margin: 0;
}

.pc p:hover {
  background: #f1f8f5;
  border-left-width: 5px;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46,91,60,0.15);
}

.pc f {
  font-weight: bold;
  color: var(--era-green);
  margin-right: 8px;
}

.pc f::after {
  content: ':';
}

/* === 女性档案（粉色柔光 + 好感度柱状图） === */
details:has(.npc-f) .h {
  background: linear-gradient(135deg, #881b4c 0%, #ad1457 100%);
  color: #fad1e2;
  border-color: #5d1234;
}

.npc-f {
  background: linear-gradient(to bottom, #fdf5f8 0%, #fce4ec 100%);
  padding: 12px;
  border: 1px solid #eeb4ce;
  margin-top: 6px;
  font-size: 13px;
}

.npc-f p {
  background: rgba(255,255,255,0.7);
  padding: 6px 10px;
  border-radius: 4px;
  margin: 4px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  transition: all 0.3s ease;
}

.npc-f p:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(136,27,76,0.1);
}

.npc-f f {
  font-weight: bold;
  color: var(--era-pink);
  min-width: 80px;
}

.npc-f f::after {
  content: ':';
  margin-right: 4px;
}

/* 好感度/仇恨度柱状图 */
.npc-f d.af, .npc-f d.ht {
  position: relative;
  display: inline-block;
  min-width: 120px;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}

.npc-f d.af::before, .npc-f d.ht::before {
  content: attr(data-value);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  z-index: 2;
  pointer-events: none;
}

.npc-f d.af::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--affection, 0%);
  background: linear-gradient(90deg,
    #9e9e9e 0%, #9e9e9e 20%,
    #66bb6a 20%, #66bb6a 40%,
    #42a5f5 40%, #42a5f5 60%,
    #ab47bc 60%, #ab47bc 80%,
    #ffd700 80%, #ffd700 100%
  );
  background-size: 500% 100%;
  background-position: calc((100 - var(--affection, 0)) * 5%) 0;
  border-radius: 10px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.3);
  animation: affection-pulse 2s ease-in-out infinite;
}

@keyframes affection-pulse {
  0%, 100% { box-shadow: inset 0 0 10px rgba(255,255,255,0.3); }
  50% { box-shadow: inset 0 0 20px rgba(255,255,255,0.6); }
}

.npc-f d.af:hover::after {
  box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 0 15px rgba(255,215,0,0.4);
  filter: brightness(1.1);
}

.npc-f d.ht::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--hatred, 0%);
  background: linear-gradient(90deg, #424242 0%, #d32f2f 50%, #b71c1c 100%);
  border-radius: 10px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.npc-f d.ht:hover::after {
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 15px rgba(183,28,28,0.4);
}

/* 生理追踪区块 */
.npc-f .body {
  background: rgba(255,255,255,0.5);
  padding: 10px;
  border: 1px dashed #f3c7d9;
  border-radius: 4px;
  margin: 8px 0;
  transition: all 0.3s ease;
}

.npc-f .body:hover {
  background: rgba(255,255,255,0.9);
  border-style: solid;
  box-shadow: 0 3px 12px rgba(136,27,76,0.15);
}

.npc-f .body strong {
  display: block;
  color: var(--era-pink);
  margin-bottom: 6px;
  font-size: 13px;
}

.npc-f .body p {
  background: #fff;
  padding: 4px 8px;
  margin: 3px 0;
  border-left: 2px solid #f48fb1;
  font-size: 12px;
  transition: all 0.3s ease;
}

.npc-f .body p:hover {
  border-left-width: 4px;
  border-left-color: #e91e63;
  background: #fce4ec;
  transform: translateX(4px);
}

/* === 男性NPC档案 === */
details:has(.npc-m) .h {
  background: linear-gradient(135deg, #37474f 0%, #546e7a 100%);
  color: #cfd8dc;
  border-color: #263238;
}

.npc-m {
  background: linear-gradient(to bottom, #eceff1 0%, #e0e5e8 100%);
  padding: 10px;
  border: 1px solid #b0bec5;
  margin-top: 6px;
  font-size: 13px;
}

.npc-m p {
  background: #fff;
  padding: 6px 10px;
  margin: 4px 0;
  border-left: 3px solid #607d8b;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  transition: all 0.3s ease;
}

.npc-m p:hover {
  background: #f5f5f5;
  border-left-width: 5px;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(96,125,139,0.2);
}

.npc-m f {
  font-weight: bold;
  color: #455a64;
}

.npc-m f::after {
  content: ':';
  margin-right: 4px;
}

/* === 其他交集NPC === */
details:has(.npc-o) .h {
  background: linear-gradient(135deg, #5d4037 0%, #6d4c41 100%);
  color: #d7ccc8;
  border-color: #3e2723;
}

.npc-o {
  background: linear-gradient(to bottom, #efebe9 0%, #d7ccc8 100%);
  padding: 10px;
  border: 1px solid #bcaaa4;
  margin-top: 6px;
  font-size: 12px;
}

.npc-o d {
  display: block;
  background: #fff;
  padding: 6px 10px;
  margin: 4px 0;
  border-left: 3px solid #8d6e63;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.npc-o d:hover {
  background: #fafafa;
  border-left-width: 5px;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(141,110,99,0.2);
}

/* === 行动分支 === */
.act {
  background: linear-gradient(to bottom, var(--paper-bg) 0%, #f9f3e8 100%);
  padding: 14px;
  border: 2px solid var(--era-gold);
  border-radius: 6px;
  margin-top: 12px;
  box-shadow: 0 4px 16px rgba(197,155,39,0.2);
  transition: all 0.4s ease;
}

.act:hover {
  box-shadow: 0 6px 24px rgba(197,155,39,0.35);
  transform: translateY(-2px);
}

.act > strong {
  display: block;
  color: var(--era-red);
  font-size: 15px;
  margin-bottom: 10px;
  padding-left: 12px;
  border-left: 4px solid var(--era-red);
}

.act .o {
  display: block;
  background: #fff;
  padding: 10px 12px;
  margin: 6px 0;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.7;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.act .o::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(197,155,39,0.1), transparent);
  transition: left 0.5s ease;
}

.act .o:hover {
  background: #fffbf0;
  border-color: var(--era-gold);
  transform: translateX(8px) scale(1.02);
  box-shadow: -6px 6px 20px rgba(197,155,39,0.25), 0 0 0 2px rgba(197,155,39,0.3);
}

.act .o:hover::before {
  left: 100%;
}

.act .o strong {
  color: var(--era-red);
  margin-right: 8px;
  font-size: 14px;
}

/* === 响应式调整 === */
@media (max-width: 600px) {
  ai { padding: 12px; font-size: 13px; }
  hd { flex-direction: column; gap: 6px; text-align: center; }
  .pc, .npc-f p, .npc-m p { grid-template-columns: 1fr; }
  .mem table { font-size: 10px; }
  .mem th, .mem td { padding: 4px; }
}

/* === 通用工具类 === */
d { display: block; color: #4a3728; }
f { font-weight: bold; }
i { font-style: italic; }
sec { display: block; }
p[t] { margin: 6px 0; }

/* === 用户消息框统一美化（需根据平台实际类名调整） === */
/* 假设平台用户消息容器为 .user-message 或 .message-user */
.user-message, .message-user, [class*="user"][class*="message"] {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
  border: 1px solid #64b5f6 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-shadow: 0 3px 12px rgba(33,150,243,0.2) !important;
  font-family: 'SimSun', serif !important;
  transition: all 0.3s ease !important;
}

.user-message:hover, .message-user:hover, [class*="user"][class*="message"]:hover {
  box-shadow: 0 4px 16px rgba(33,150,243,0.35) !important;
  transform: translateY(-2px) !important;
}