/* ════ 深渊少女 · 暗黑赛博样式表 ════ */

.abyss-card {
  font-family: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  color: #e8d8ff;
  line-height: 1.78;
  font-size: 15px;
}

/* ── details 基础容器 ── */
.abyss-card details {
  background: rgba(12, 4, 28, 0.92);
  border: 1px solid rgba(120, 40, 200, 0.38);
  border-radius: 8px;
  margin: 6px 0;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(80, 0, 160, 0.12);
  transition: box-shadow 0.3s;
}
.abyss-card details:hover {
  box-shadow: 0 2px 22px rgba(160, 50, 255, 0.22);
}

/* ── summary 折叠栏 ── */
.abyss-card summary {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.87em;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, rgba(65,12,120,0.78) 0%, rgba(25,5,55,0.55) 100%);
  color: #cc99ff;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.25s, color 0.25s;
  user-select: none;
  -webkit-user-select: none;
  border-bottom: 1px solid transparent;
}
.abyss-card details[open] > summary {
  border-bottom: 1px solid rgba(120, 40, 200, 0.35);
  color: #e0b8ff;
  background: linear-gradient(90deg, rgba(85,18,155,0.85) 0%, rgba(35,8,75,0.6) 100%);
}
.abyss-card summary:hover {
  color: #f0d0ff;
  background: linear-gradient(90deg, rgba(90,20,165,0.9) 0%, rgba(40,10,80,0.65) 100%);
}
.abyss-card summary::before {
  content: '▶';
  font-size: 0.65em;
  color: #9944dd;
  transition: transform 0.25s;
  display: inline-block;
}
.abyss-card details[open] > summary::before {
  transform: rotate(90deg);
}

/* ── details 内容区 padding ── */
.abyss-card details > p,
.abyss-card details > table,
.abyss-card details > details {
  margin: 0;
  padding: 10px 14px;
}

/* ════ 各模块差异化配色 ════ */

/* 🧠 思维链 —冷青绿，像终端输出 */
.abyss-card .think-box {
  border-color: rgba(0, 200, 160, 0.28);
  background: rgba(0, 16, 20, 0.95);
}
.abyss-card .think-box > summary {
  background: linear-gradient(90deg, rgba(0,80,65,0.75) 0%, rgba(0,20,18,0.5) 100%);
  color: #66ffcc;
}
.abyss-card .think-box > summary::before { color: #00cc99; }
.abyss-card .think-box p {
  font-size: 0.82em;
  color: #99eedd;
  line-height: 1.65;
  padding: 3px 14px;
}
.abyss-card .think-box b {
  color: #00ffb2;
  font-size: 0.8em;
  letter-spacing: 0.06em;
}

/* 📍 场景 — 冷蓝银，像监控画面 */
.abyss-card .scene-box {
  border-color: rgba(80, 160, 255, 0.3);
  background: rgba(4, 10, 28, 0.93);
}
.abyss-card .scene-box > summary {
  background: linear-gradient(90deg, rgba(20,50,110,0.8) 0%, rgba(8,15,40,0.5) 100%);
  color: #99ccff;
}
.abyss-card .scene-box > summary::before { color: #5599ee; }
.abyss-card .scene-box p {
  font-size: 0.86em;
  color: #b8d4ff;
  padding: 8px 14px;
}

/* 👤 user状态 /🎭 NPC — 深紫，核心数据感*/
.abyss-card .user-box,
.abyss-card .npc-box {
  border-color: rgba(150, 60, 220, 0.4);
}
.abyss-card .user-box > summary {
  color: #ddaaff;
  background: linear-gradient(90deg, rgba(80,20,140,0.82) 0%, rgba(30,8,60,0.55) 100%);
}
.abyss-card .npc-box > summary {
  color: #ffaacc;
  background: linear-gradient(90deg, rgba(110,15,70,0.82) 0%, rgba(40,5,30,0.55) 100%);
}
.abyss-card .npc-box { border-color: rgba(220, 60, 130, 0.35); }
.abyss-card .npc-box > summary::before { color: #ee4499; }

/* ── 表格样式（user/NPC状态栏）── */
.abyss-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84em;
  margin: 2px 0;
}
.abyss-card th {
  text-align: left;
  width: 28%;
  padding: 5px 10px;
  color: #aa88cc;
  font-weight: 500;
  border-bottom: 1px solid rgba(100, 40, 160, 0.2);
  white-space: nowrap;
}
.abyss-card td {
  padding: 5px 10px;
  color: #ddc8f5;
  border-bottom: 1px solid rgba(80, 30, 120, 0.15);
  word-break: break-all;
}
.abyss-card tr:last-child th,
.abyss-card tr:last-child td {
  border-bottom: none;
}
.abyss-card tr:hover td,
.abyss-card tr:hover th {
  background: rgba(120, 40, 200, 0.08);
}

/* ── 嵌套details(💋身体状态)── */
.abyss-card .npc-box details {
  border-color: rgba(255, 60, 120, 0.25);
  background: rgba(25, 3, 18, 0.9);
  margin: 8px 10px;
}
.abyss-card .npc-box details > summary {
  font-size: 0.8em;
  background: linear-gradient(90deg, rgba(100,10,55,0.7) 0%, rgba(30,3,20,0.5) 100%);
  color: #ff88bb;
  padding: 6px 12px;
}

/* 📱 手机系统 — 荧光绿黑，赛博手机感 */
.abyss-card .phone-box {
  border-color: rgba(50, 220, 100, 0.3);
  background: rgba(2, 14, 8, 0.96);
}
.abyss-card .phone-box > summary {
  background: linear-gradient(90deg, rgba(10,65,30,0.8) 0%, rgba(2,18,8,0.5) 100%);
  color: #66ee99;
}
.abyss-card .phone-box > summary::before { color: #33cc66; }
.abyss-card .phone-box details {
  background: rgba(3, 18, 10, 0.9);
  border-color: rgba(40, 180, 80, 0.2);
  margin: 6px 10px;
}
.abyss-card .phone-box details > summary {
  font-size: 0.82em;
  color: #55dd88;
  background: linear-gradient(90deg, rgba(8,50,22,0.75) 0%, rgba(2,14,8,0.45) 100%);
}
.abyss-card .phone-box p {
  font-size: 0.82em;
  color: #aaeebb;
  line-height: 1.7;
  padding: 5px 14px;
}
.abyss-card .phone-box b {
  color: #44ff88;
  font-size: 0.8em;
}

/* 🌊 暗流涌动 — 血红，警告感 */
.abyss-card .dark-box {
  border-color: rgba(220, 40, 40, 0.38);
  background: rgba(18, 3, 3, 0.96);
}
.abyss-card .dark-box > summary {
  background: linear-gradient(90deg, rgba(100,15,15,0.82) 0%, rgba(35,5,5,0.55) 100%);
  color: #ff7777;
}
.abyss-card .dark-box > summary::before { color: #dd2222; }
.abyss-card .dark-box th { color: #cc6666; }
.abyss-card .dark-box td { color: #ffbbbb; }
.abyss-card .dark-box tr:hover td,
.abyss-card .dark-box tr:hover th {
  background: rgba(180, 30, 30, 0.1);
}

/* 🗂️ 人物关系 — 琥珀金*/
.abyss-card .map-box {
  border-color: rgba(200, 160, 40, 0.3);
  background: rgba(16, 12, 2, 0.94);
}
.abyss-card .map-box > summary {
  background: linear-gradient(90deg, rgba(80,58,8,0.8) 0%, rgba(22,16,2,0.5) 100%);
  color: #ddbb66;
}
.abyss-card .map-box > summary::before { color: #cc9922; }
.abyss-card .map-box th { color: #bb9944; }
.abyss-card .map-box td { color: #eedda0; }

/* 📖📚 记忆区 — 冷灰蓝，档案感 */
.abyss-card .memory-box {
  border-color: rgba(100, 130, 200, 0.28);
  background: rgba(5, 8, 22, 0.95);
}
.abyss-card .memory-box > summary {
  background: linear-gradient(90deg, rgba(25,38,90,0.78) 0%, rgba(8,12,30,0.5) 100%);
  color: #99aadd;
}
.abyss-card .memory-box > summary::before { color: #6677bb; }
.abyss-card .memory-box p {
  font-size: 0.83em;
  color: #b0bedd;
  line-height: 1.72;
  padding: 5px 14px;
}
.abyss-card .memory-box b { color: #aabbff; }

/* 🎯 可行动方向 — 荧光紫白，操控台感 */
.abyss-card .action-box {
  border-color: rgba(180, 100, 255, 0.4);
  background: rgba(10, 4, 26, 0.96);
}
.abyss-card .action-box > summary {
  background: linear-gradient(90deg, rgba(70,22,140,0.85) 0%, rgba(22,7,50,0.55) 100%);
  color: #cc88ff;
}
.abyss-card .action-box > summary::before { color: #aa44ee; }
.abyss-card .action-box p {
  font-size: 0.88em;
  color: #ddbbff;
  padding: 5px 14px;transition: color 0.2s, padding-left 0.2s;cursor: default;
}
.abyss-card .action-box p:hover {
  color: #ffffff;
  padding-left: 22px;
}

/* ════ 正文区域 ════ */
.abyss-card .scroll-body {
  display: block;
  background: rgba(8, 3, 20, 0.88);
  border: 1px solid rgba(100, 35, 180, 0.3);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 6px 0;
  font-size: 0.93em;
  line-height: 1.95;
  color: #e2d0f8;
  box-shadow: inset 0 0 30px rgba(60, 0, 120, 0.1);
}
.abyss-card .scroll-body p {
  margin: 0 0 12px 0;
  text-indent: 2em;
}
.abyss-card .scroll-body p:last-child { margin-bottom: 0; }

/* ════ 滚动条美化 ════ */
.abyss-card ::-webkit-scrollbar { width: 4px; }
.abyss-card ::-webkit-scrollbar-track { background: rgba(10,2,25,0.5); }
.abyss-card ::-webkit-scrollbar-thumb {
  background: rgba(120, 40, 200, 0.5);
  border-radius: 2px;
}

/* ════ 分割线 ════ */
.abyss-card hr {
  border: none;
  border-top: 1px solid rgba(120, 40, 200, 0.25);
  margin: 8px 0;
}