/* ============================================
   《亚尔特兰大陆》全知叙事引擎 - 专用CSS美化 (精准正文修复版 v1.3)
   设计：梦野汐 (Yumeno Shio)
   核心：精准定位.narrative-text类，彻底解决颜色污染问题
   ============================================ */

/* ---------- 全局基础设置 ---------- */
.ai {
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #f0f0e6; /* 全局默认文字色 */
  background-color: #1a2b2e;
  padding: 20px;
  border-radius: 8px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
  line-height: 1.7;
}

/* ---------- 正文叙事区域 (核心修复) ---------- */
.narrative-text {
  /* 确保以下属性存在并修正背景色 */
  display: block;
  border-left: 3px solid #8a7850;
  padding: 25px 20px; /* 增加了上下内边距，让文字不贴边 */
  margin-bottom: 30px;
  color: #f0f0e6;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 1.7;
  text-align: justify;
  
  /* +++ 新增：明确的背景色与区块效果 +++ */
  background-color: #223336; /* 比全局背景(#1a2b2e)稍亮的深青灰色，形成层次 */
  border-radius: 0 8px 8px 0; /* 右侧圆角，配合左侧边框 */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* 轻微阴影，增强“浮起”感 */
  border-right: 1px solid rgba(138, 120, 80, 0.3); /* 右侧也加一条细边，平衡视觉 */
}

.narrative-text p {
  margin-bottom: 1.2em;
}

/* 确保心理活动的薄荷绿在新区块内依然醒目 */
.narrative-text em,
.narrative-text .vet-thought {
  font-style: italic;
  color: #B2F2B2;
  font-weight: 600;
  background-color: rgba(178, 242, 178, 0.12); /* 背景色可以稍微加深一点，在新区块上更协调 */
  padding: 0 2px;
  border-radius: 2px;
}
.narrative-text {
  display: block;
  border-left: 3px solid #8a7850;
  padding-left: 20px;
  margin-bottom: 30px;
  color: #f0f0e6; /* 明确设置正文基础色为米白 */
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 1.7;
  text-align: justify;
}
.narrative-text p {
  margin-bottom: 1.2em;
  color: inherit; /* 继承.narrative-text的颜色 */
}

/* *** 核心特色：主角心理活动/兽医知识闪回 (薄荷绿强调) - 仅限正文内 *** */
.narrative-text em,
.narrative-text .vet-thought {
  font-style: italic;
  color: #B2F2B2 !important; /* 薄荷绿，仅用于强调部分 */
  font-weight: 600;
  background-color: rgba(178, 242, 178, 0.08);
  padding: 0 2px;
  border-radius: 2px;
}
/* 重要：确保正文内其他非强调文本不会变成绿色 */
.narrative-text p:not(em):not(.vet-thought) {
  color: #f0f0e6 !important;
}

/* ---------- 前置状态栏 (pre) 样式 ---------- */
pre {
  background-color: rgba(30, 40, 50, 0.9);
  color: #e0e0e0;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #4a6fa5;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.95em;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  margin-bottom: 20px;
}

/* ---------- 折叠块 (details) 通用样式 ---------- */
details {
  margin-bottom: 15px;
  border: 1px solid;
  border-radius: 6px;
  overflow: hidden; /* 确保内部圆角 */
}
details > summary {
  padding: 12px 15px;
  cursor: pointer;
  font-weight: bold;
  list-style: none; /* 移除默认箭头 */
  position: relative;
  color: #fff;
}
details > summary::-webkit-details-marker {
  display: none; /* 移除Safari/Chrome默认箭头 */
}
details > summary:after {
  content: '▶';
  position: absolute;
  right: 15px;
  transition: transform 0.2s;
}
details[open] > summary:after {
  transform: rotate(90deg);
}

/* ---------- 各个折叠块的个性化配色 ---------- */
/* 世界状态总览 - 冷色调，权威感 */
details:nth-of-type(1) {
  border-color: #4a6fa5;
}
details:nth-of-type(1) > summary {
  background: linear-gradient(to right, #2c3e5a, #4a6fa5);
}

/* 主角面板 - 中性偏暖，突出“玩家”信息 */
details:nth-of-type(2) {
  border-color: #8a7850;
}
details:nth-of-type(2) > summary {
  background: linear-gradient(to right, #5d4c3a, #8a7850);
}

/* 当前互动焦点 - 关注色，略带警示 */
details:nth-of-type(3) {
  border-color: #d4a259;
}
details:nth-of-type(3) > summary {
  background: linear-gradient(to right, #8b6b3d, #d4a259);
}

/* 世界态势与系统提示 - 神秘深邃感 */
details:nth-of-type(4) {
  border-color: #6b8e6b;
}
details:nth-of-type(4) > summary {
  background: linear-gradient(to right, #3a523a, #6b8e6b);
}

/* 奴隶资产列表 - 权力与束缚感，暗红/黑色调 */
details:nth-of-type(5) {
  border-color: #a05252;
}
details:nth-of-type(5) > summary {
  background: linear-gradient(to right, #5a2c2c, #a05252);
}

/* 记忆与日志 - 古朴的档案感 */
details:nth-of-type(6) {
  border-color: #7a7a7a;
}
details:nth-of-type(6) > summary {
  background: linear-gradient(to right, #4a4a4a, #7a7a7a);
}

/* ---------- 折叠块内部内容样式 ---------- */
details section {
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.05); /* 半透明白色背景，提高内容可读性 */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
details section h4 {
  color: #d4a259; /* 标题使用金色，醒目 */
  margin-top: 0;
  border-bottom: 1px dashed #8a7850;
  padding-bottom: 5px;
}
details section ul,
details section ol {
  padding-left: 20px;
}
details section li {
  margin-bottom: 5px;
}
/* 修正：折叠块内部的<pre>（如系统提示中的代码块）使用原有样式，但颜色微调 */
details section pre {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  color: #d0e0d0; /* 比之前稍亮一点的绿色 */
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  border: none; /* 折叠块内的pre不需要边框 */
}

/* ---------- 表格样式 (用于记忆区、奴隶列表) ---------- */
details table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.9em;
}
details table thead {
  background-color: rgba(0, 0, 0, 0.4);
}
details table th {
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #8a7850;
  color: #f0d890;
}
details table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.03); /* 斑马纹 */
}
details table tbody tr:hover {
  background-color: rgba(178, 242, 178, 0.1); /* 悬停时使用薄荷绿透明色，呼应主题 */
}
details table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}

/* ---------- 行动选项面板 ---------- */
.choice-block {
  margin-top: 25px;
}
.choice-panel {
  background-color: rgba(42, 52, 65, 0.8);
  border: 2px solid #4a6fa5;
  border-radius: 8px;
  padding: 20px;
}
.choice-panel > p:first-child {
  color: #b0d0ff;
  font-weight: bold;
  margin-top: 0;
}
.choice-list {
  list-style-type: none;
  padding-left: 0;
}
.choice-list li {
  margin-bottom: 12px;
  padding: 10px 15px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 4px solid #d4a259; /* 选项前的装饰条 */
  border-radius: 4px;
  transition: all 0.2s;
}
.choice-list li:hover {
  background-color: rgba(212, 162, 89, 0.15);
  border-left-color: #f0d890;
  transform: translateX(3px);
}
.choice-list li strong {
  color: #f0d890;
  margin-right: 8px;
}

/* ---------- 响应式基础调整 (可选) ---------- */
@media (max-width: 768px) {
  .ai {
    padding: 10px;
  }
  text {
    padding-left: 10px;
  }
  pre {
    padding: 10px !important;
    font-size: 0.85em !important;
  }
  details section,
  details > summary {
    padding: 10px;
  }
  details table {
    font-size: 0.85em;
  }
  details table th,
  details table td {
    padding: 6px 8px;
  }
}