/* ═══════════════════════════════════════════════════════════
   泛娱乐数据枢纽 · HUD渲染引擎 v2.1 — LIGHT EDITION
   Pan-Entertainment Data Hub · Status Bar Render Engine
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   §1  顶层折叠面板 · details / summary 基础
   ──────────────────────────────────────────────────────────
   ⚠ overflow 改为 visible，解决悬浮窗被裁切问题
   ────────────────────────────────────────────────────────── */

details {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin: 6px 0;
  overflow: visible;
  transition: border-color 0.35s, box-shadow 0.35s;
}

details[open] {
  border-color: #cbd5e1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

summary {
  padding: 10px 14px;
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
  cursor: pointer;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: "";
}

summary::before {
  content: "▸";
  display: inline-block;
  font-size: 11px;
  color: #2563eb;
  transition: transform 0.3s ease, color 0.3s;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details[open] > summary {
  border-bottom-color: #e2e8f0;
  background: linear-gradient(135deg, #f1f5f9 0%, #eef2f7 100%);
  color: #0f172a;
}

summary:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e8edf4 100%);
}

summary:hover::before {
  color: #3b82f6;
}

/* ──────────────────────────────────────────────────────────
   §2  思维链容器 · .cot-container
   ────────────────────────────────────────────────────────── */

.cot-container {
  margin-bottom: 8px;
}

.cot-container > details {
  background: #f8fafc;
  border-color: #e5e7eb;
  position: relative;
  overflow: visible;
}

.cot-container > details::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(37, 99, 235, 0.018) 3px,
    rgba(37, 99, 235, 0.018) 4px
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 6px;
}

.cot-container > details > summary {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #f8fafc, #f3f4f6);
  position: relative;
  z-index: 1;
}

.cot-container > details > summary::before {
  content: "⟐";
  color: #cbd5e1;
  font-size: 12px;
}

.cot-container > details[open] > summary {
  color: #64748b;
  background: linear-gradient(135deg, #f5f7fa, #f0f2f5);
  border-bottom-color: #e5e7eb;
}

.cot-container > details[open] > summary::before {
  color: #94a3b8;
  transform: none;
}

/* CoT 内部内容区 —— 终端日志风格 */
.cot-container > details > div,
.cot-container > details > ul,
.cot-container > details > ol,
.cot-container > details > p {
  position: relative;
  z-index: 1;
  padding: 10px 14px;
  color: #94a3b8;
  font-size: 12.5px;
  line-height: 1.7;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
}

.cot-container li {
  color: #94a3b8;
  font-size: 12.5px;
  margin: 2px 0;
}

.cot-container strong,
.cot-container b {
  color: #64748b;
  font-weight: 700;
}

.cot-container hr {
  border: none;
  border-top: 1px dashed #e2e8f0;
  margin: 8px 0;
}

/* ──────────────────────────────────────────────────────────
   §3  世界信息面板
   ────────────────────────────────────────────────────────── */

details > div:not([class]) {
  padding: 12px 14px;
  color: #475569;
  font-size: 14px;
  line-height: 1.8;
}

/* ──────────────────────────────────────────────────────────
   §4  叙事正文区 · .main-body
   ────────────────────────────────────────────────────────── */

.main-body {
  padding: 20px 18px 20px 22px;
  color: #374151;
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: 0.015em;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin: 6px 0;
  position: relative;
  overflow: hidden;
}

.main-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    180deg,
    #06b6d4 0%,
    #3b82f6 35%,
    #8b5cf6 70%,
    #ec4899 100%
  );
  border-radius: 3px 0 0 3px;
}

.main-body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 60px;
  height: 100%;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.025), transparent);
  pointer-events: none;
}

.main-body p {
  margin: 0.6em 0;
  text-indent: 0;
}

.main-body em,
.main-body i {
  color: #64748b;
  font-style: italic;
}

.main-body strong,
.main-body b {
  color: #1e293b;
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────────
   §5  HUD通用内容区 · .hud-content
   ────────────────────────────────────────────────────────── */

.hud-content {
  padding: 12px 14px;
  color: #475569;
  font-size: 14px;
  line-height: 1.8;
  overflow: visible;
}

.hud-content br {
  display: block;
  content: "";
  margin-top: 1px;
}

/* ──────────────────────────────────────────────────────────
   §6  自定义语义标签 · name / info / SL / abli
   ────────────────────────────────────────────────────────── */

name {
  color: #0e7490;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
}

info {
  color: #6b7280;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.2px;
}

SL {
  display: inline-block;
  color: #b45309;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
}

abli {
  color: #7c3aed;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.2px;
}

/* ──────────────────────────────────────────────────────────
   §7  子系统折叠面板 · .sub-sys
   ──────────────────────────────────────────────────────────
   ⚠ overflow: visible 确保子层悬浮窗不被裁切
   ────────────────────────────────────────────────────────── */

details.sub-sys {
  background: #f8fafc;
  border-color: #e5eaf0;
  margin: 5px 0;
  border-radius: 4px;
  overflow: visible;
}

details.sub-sys[open] {
  border-color: #cbd5e1;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

details.sub-sys > summary {
  padding: 7px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748b;
  background: linear-gradient(135deg, #f8fafc, #f3f6f9);
  letter-spacing: 0.3px;
  border-radius: 4px 4px 0 0;
}

details.sub-sys > summary::before {
  content: "›";
  font-size: 14px;
  font-weight: 700;
  color: #3b82f6;
  width: 12px;
}

details.sub-sys[open] > summary {
  color: #334155;
  background: linear-gradient(135deg, #f3f6f9, #eef2f7);
  border-bottom-color: #e5eaf0;
}

details.sub-sys[open] > summary::before {
  transform: rotate(90deg);
  color: #2563eb;
}

details.sub-sys > summary:hover {
  color: #475569;
  background: linear-gradient(135deg, #f1f5f9, #ebeef3);
}

/* ──────────────────────────────────────────────────────────
   §8  系统条目 · .sys-content / .sys-item
   ────────────────────────────────────────────────────────── */

.sys-content {
  padding: 6px 10px;
  overflow: visible;
}

.sys-item {
  padding: 5px 10px;
  margin: 2px 0;
  border-radius: 3px;
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.7;
  border-left: 2px solid transparent;
  transition: background 0.2s, border-color 0.25s;
  overflow: visible;
  position: relative;
}

.sys-item:hover {
  background: rgba(37, 99, 235, 0.04);
  border-left-color: rgba(37, 99, 235, 0.4);
}

.sys-item > b:first-child {
  color: #1e293b;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   §9  悬浮信息窗系统 · .pop-info
   ──────────────────────────────────────────────────────────
   ⚠ 核心修复：
   1. 所有祖先容器 overflow: visible（§1/§7/§8 已处理）
   2. 提示框 z-index 足够高
   3. 箭头与内容框对齐修正
   ────────────────────────────────────────────────────────── */

.pop-info {
  position: relative;
  display: inline;
  cursor: help;
  color: #0891b2;
  font-weight: 600;
  border-bottom: 1px dashed rgba(8, 145, 178, 0.4);
  transition: color 0.25s, border-color 0.25s;
  z-index: 1;
}

.pop-info:hover,
.pop-info:focus {
  color: #0e7490;
  border-bottom-color: rgba(14, 116, 144, 0.7);
  outline: none;
}

/* ── 提示框主体（出现在元素下方） ── */
.pop-info::after {
  content: "〔 " attr(data-rarity) " 〕\A\A" attr(data-desc);
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 99999;
  min-width: 230px;
  max-width: 340px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #3b82f6;
  border-radius: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(59, 130, 246, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.pop-info:hover::after,
.pop-info:focus::after {
  opacity: 1;
  transform: translateY(0);
}

/* ── 提示框箭头（朝上） ── */
.pop-info::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 20px;
  z-index: 100000;
  border: 6px solid transparent;
  border-bottom-color: #3b82f6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.pop-info:hover::before,
.pop-info:focus::before {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────
   §9b  品质 / 稀有度颜色映射（浅色主题版）
   ────────────────────────────────────────────────────────── */

/* ── 普通 / Common / R / 一星~二星 / 小杯 ── */
.pop-info[data-rarity="普通"]::after,
.pop-info[data-rarity="Common"]::after,
.pop-info[data-rarity="R"]::after,
.pop-info[data-rarity="一星"]::after,
.pop-info[data-rarity="二星"]::after,
.pop-info[data-rarity="小杯"]::after {
  border-color: #9ca3af;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pop-info[data-rarity="普通"]::before,
.pop-info[data-rarity="Common"]::before,
.pop-info[data-rarity="R"]::before,
.pop-info[data-rarity="一星"]::before,
.pop-info[data-rarity="二星"]::before,
.pop-info[data-rarity="小杯"]::before {
  border-bottom-color: #9ca3af;
}

.pop-info[data-rarity="普通"],
.pop-info[data-rarity="Common"],
.pop-info[data-rarity="R"],
.pop-info[data-rarity="一星"],
.pop-info[data-rarity="二星"],
.pop-info[data-rarity="小杯"] {
  color: #6b7280;
  border-bottom-color: rgba(107, 114, 128, 0.4);
}

/* ── 精良 / Uncommon / 三星 / 中杯 ── */
.pop-info[data-rarity="精良"]::after,
.pop-info[data-rarity="Uncommon"]::after,
.pop-info[data-rarity="三星"]::after,
.pop-info[data-rarity="中杯"]::after {
  border-color: #059669;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 0 12px rgba(5, 150, 105, 0.08);
}

.pop-info[data-rarity="精良"]::before,
.pop-info[data-rarity="Uncommon"]::before,
.pop-info[data-rarity="三星"]::before,
.pop-info[data-rarity="中杯"]::before {
  border-bottom-color: #059669;
}

.pop-info[data-rarity="精良"],
.pop-info[data-rarity="Uncommon"],
.pop-info[data-rarity="三星"],
.pop-info[data-rarity="中杯"] {
  color: #059669;
  border-bottom-color: rgba(5, 150, 105, 0.4);
}

/* ── 稀有 / Rare / SR / 四星 / 大杯 ── */
.pop-info[data-rarity="稀有"]::after,
.pop-info[data-rarity="Rare"]::after,
.pop-info[data-rarity="SR"]::after,
.pop-info[data-rarity="四星"]::after,
.pop-info[data-rarity="大杯"]::after {
  border-color: #2563eb;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 0 14px rgba(37, 99, 235, 0.08);
}

.pop-info[data-rarity="稀有"]::before,
.pop-info[data-rarity="Rare"]::before,
.pop-info[data-rarity="SR"]::before,
.pop-info[data-rarity="四星"]::before,
.pop-info[data-rarity="大杯"]::before {
  border-bottom-color: #2563eb;
}

.pop-info[data-rarity="稀有"],
.pop-info[data-rarity="Rare"],
.pop-info[data-rarity="SR"],
.pop-info[data-rarity="四星"],
.pop-info[data-rarity="大杯"] {
  color: #2563eb;
  border-bottom-color: rgba(37, 99, 235, 0.4);
}

/* ── 史诗 / Epic / SSR / 五星 / 超大杯 ── */
.pop-info[data-rarity="史诗"]::after,
.pop-info[data-rarity="Epic"]::after,
.pop-info[data-rarity="SSR"]::after,
.pop-info[data-rarity="五星"]::after,
.pop-info[data-rarity="超大杯"]::after {
  border-color: #7c3aed;
  background: linear-gradient(145deg, #faf5ff 0%, #f5f0ff 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 0 18px rgba(124, 58, 237, 0.08);
}

.pop-info[data-rarity="史诗"]::before,
.pop-info[data-rarity="Epic"]::before,
.pop-info[data-rarity="SSR"]::before,
.pop-info[data-rarity="五星"]::before,
.pop-info[data-rarity="超大杯"]::before {
  border-bottom-color: #7c3aed;
}

.pop-info[data-rarity="史诗"],
.pop-info[data-rarity="Epic"],
.pop-info[data-rarity="SSR"],
.pop-info[data-rarity="五星"],
.pop-info[data-rarity="超大杯"] {
  color: #7c3aed;
  border-bottom-color: rgba(124, 58, 237, 0.45);
}

.pop-info[data-rarity="史诗"]:hover,
.pop-info[data-rarity="Epic"]:hover,
.pop-info[data-rarity="SSR"]:hover,
.pop-info[data-rarity="五星"]:hover,
.pop-info[data-rarity="超大杯"]:hover {
  color: #6d28d9;
}

/* ── 传说 / Legendary / UR / 限定 / 幻神 ── */
.pop-info[data-rarity="传说"]::after,
.pop-info[data-rarity="Legendary"]::after,
.pop-info[data-rarity="UR"]::after,
.pop-info[data-rarity="限定"]::after,
.pop-info[data-rarity="幻神"]::after {
  border-color: #d97706;
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(217, 119, 6, 0.1),
    inset 0 0 16px rgba(217, 119, 6, 0.03);
}

.pop-info[data-rarity="传说"]::before,
.pop-info[data-rarity="Legendary"]::before,
.pop-info[data-rarity="UR"]::before,
.pop-info[data-rarity="限定"]::before,
.pop-info[data-rarity="幻神"]::before {
  border-bottom-color: #d97706;
}

.pop-info[data-rarity="传说"],
.pop-info[data-rarity="Legendary"],
.pop-info[data-rarity="UR"],
.pop-info[data-rarity="限定"],
.pop-info[data-rarity="幻神"] {
  color: #b45309;
  border-bottom-color: rgba(180, 83, 9, 0.45);
}

.pop-info[data-rarity="传说"]:hover,
.pop-info[data-rarity="Legendary"]:hover,
.pop-info[data-rarity="UR"]:hover,
.pop-info[data-rarity="限定"]:hover,
.pop-info[data-rarity="幻神"]:hover {
  color: #92400e;
}

/* ── 论坛公告/活动 专用 ── */
.pop-info[data-rarity="公告"]::after {
  border-color: #d97706;
  background: linear-gradient(145deg, #fffbeb, #fef3c7);
}

.pop-info[data-rarity="公告"]::before {
  border-bottom-color: #d97706;
}

.pop-info[data-rarity="活动"]::after {
  border-color: #db2777;
  background: linear-gradient(145deg, #fdf2f8, #fce7f3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 0 16px rgba(219, 39, 119, 0.06);
}

.pop-info[data-rarity="活动"]::before {
  border-bottom-color: #db2777;
}

/* ──────────────────────────────────────────────────────────
   §10  羁绊网络 · RELATIONSHIP
   ────────────────────────────────────────────────────────── */

/* 羁绊网络使用通用 .hud-content 样式 */
/* 内部结构: <name>[角色名]</name>：{状态/数值} */
/* 无需额外覆盖，name 标签样式已在 §6 定义 */

/* ══════════════════════════════════════════════════════════
   §11  玩家论坛渲染系统 · FORUM ENGINE
   ══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   §11a  论坛板块容器（sub-sys 特化）
   ────────────────────────────────────────────────────────── */

/* 论坛内的 .sub-sys 继承 §7 基础样式 */
/* 论坛板块 summary 带 emoji，无需额外处理 */

/* 论坛板块内的 .sys-content 添加线程计数器 */
.hud-content > .sub-sys > .sys-content {
  counter-reset: forum-threads;
}

/* ──────────────────────────────────────────────────────────
   §11b  论坛线程容器 · .forum-thread
   ────────────────────────────────────────────────────────── */

.forum-thread {
  counter-increment: forum-threads;
  background: #ffffff;
  border: 1px solid #e5eaf0;
  border-left: 3px solid #bfcad6;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 8px 0;
  position: relative;
  overflow: visible;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.forum-thread:hover {
  background: #f8fafc;
  border-left-color: #3b82f6;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.06);
}

/* 线程编号 —— 右上角显示 # */
.forum-thread::after {
  content: "#" counter(forum-threads);
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #d1d5db;
  font-family: "Consolas", "Monaco", monospace;
  letter-spacing: 0.5px;
  pointer-events: none;
  transition: color 0.3s;
}

.forum-thread:hover::after {
  color: #9ca3af;
}

/* 论坛线程内的 .sys-item 覆盖基础样式 */
.forum-thread .sys-item {
  border-left: none;
  padding: 4px 8px;
  margin: 2px 0;
  border-radius: 2px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #4b5563;
  overflow: visible;
}

.forum-thread .sys-item:hover {
  background: rgba(37, 99, 235, 0.025);
  border-left: none;
}

/* 主楼（每个 .forum-thread 的第一个 .sys-item） */
.forum-thread > .sys-item:first-child {
  padding: 6px 8px;
  font-size: 14px;
  color: #374151;
  line-height: 1.75;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
  margin-bottom: 4px;
}

/* ── 主楼作者名（无 class 的 <b>） ── */
.forum-thread > .sys-item:first-child > b:not([class]) {
  color: #0369a1;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  transition: color 0.2s;
}

.forum-thread > .sys-item:first-child > b:not([class]):hover {
  color: #0284c7;
}

/* ──────────────────────────────────────────────────────────
   §11c  论坛标签系统 · .forum-tag
   ────────────────────────────────────────────────────────── */

.forum-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 5px;
  vertical-align: middle;
  background: #f1f5f9;
  color: #6b7280;
  border: 1px solid #e2e8f0;
  letter-spacing: 0.8px;
  line-height: 1.7;
  transition: box-shadow 0.3s;
}

/* [热] 标签 */
.forum-tag-hot {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 1px 6px rgba(239, 68, 68, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.forum-tag-hot:hover {
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.3);
}

/* [神]/[爆] 标签 */
.forum-tag-explode {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 1px 8px rgba(168, 85, 247, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  animation: tag-pulse-light 2.8s ease-in-out infinite;
}

.forum-tag-explode:hover {
  box-shadow: 0 2px 16px rgba(168, 85, 247, 0.4);
}

/* [精华] 标签 */
.forum-tag-elite {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  border-color: #10b981;
  box-shadow: 0 1px 6px rgba(16, 185, 129, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.forum-tag-elite:hover {
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.3);
}

@keyframes tag-pulse-light {
  0%,
  100% {
    box-shadow: 0 1px 8px rgba(168, 85, 247, 0.2);
  }
  50% {
    box-shadow: 0 2px 18px rgba(168, 85, 247, 0.4),
      0 0 6px rgba(192, 38, 211, 0.2);
  }
}

/* ──────────────────────────────────────────────────────────
   §11d  置顶标识 · .forum-pin
   ────────────────────────────────────────────────────────── */

.forum-pin {
  color: #d97706;
  font-weight: 800;
  font-size: 11.5px;
  margin-right: 4px;
  letter-spacing: 0.5px;
  animation: pin-glow-light 3s ease-in-out infinite;
}

@keyframes pin-glow-light {
  0%,
  100% {
    color: #d97706;
  }
  50% {
    color: #b45309;
  }
}

/* ──────────────────────────────────────────────────────────
   §11e  回复层级系统 · .reply-l1 / .reply-l2
   ────────────────────────────────────────────────────────── */

.reply-l1 {
  padding-left: 22px;
  margin-left: 8px;
  margin-top: 2px;
  border-left: 2px solid #e5eaf0;
  font-size: 13px;
  color: #6b7280;
  position: relative;
  overflow: visible;
  transition: border-color 0.25s, background 0.2s;
}

.reply-l1:hover {
  border-left-color: #cbd5e1;
  background: rgba(37, 99, 235, 0.02);
}

.reply-l2 {
  padding-left: 22px;
  margin-left: 30px;
  margin-top: 2px;
  border-left: 2px solid #f1f5f9;
  font-size: 12.5px;
  color: #9ca3af;
  position: relative;
  overflow: visible;
  transition: border-color 0.25s, background 0.2s;
}

.reply-l2:hover {
  border-left-color: #e2e8f0;
  background: rgba(37, 99, 235, 0.015);
}

/* ── 回复中的作者名 ── */
.reply-l1 > b:not([class]),
.reply-l1 > b:first-of-type:not([class]) {
  color: #2563eb;
  font-weight: 600;
  font-size: 12.5px;
  transition: color 0.2s;
}

.reply-l1 > b:not([class]):hover {
  color: #1d4ed8;
}

.reply-l2 > b:not([class]),
.reply-l2 > b:first-of-type:not([class]) {
  color: #3b82f6;
  font-weight: 600;
  font-size: 12px;
  transition: color 0.2s;
}

.reply-l2 > b:not([class]):hover {
  color: #2563eb;
}

/* ── 树状引导符号 ── */
.reply-l1,
.reply-l2 {
  word-spacing: 1px;
}

/* ──────────────────────────────────────────────────────────
   §11f  论坛线程首尾装饰
   ────────────────────────────────────────────────────────── */

.sys-content > .forum-thread:first-child {
  margin-top: 4px;
}

.sys-content > .forum-thread:last-child {
  margin-bottom: 4px;
}

.forum-thread + .forum-thread {
  margin-top: 6px;
}

/* ══════════════════════════════════════════════════════════
   §12  记忆档案系统
   ══════════════════════════════════════════════════════════ */

.hud-content > .sub-sys .sys-item::first-line {
  color: #64748b;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   §13  行动选项系统 · .ygg-opts / .opt-btn
   ══════════════════════════════════════════════════════════ */

.ygg-opts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 0 2px;
}

.opt-btn {
  padding: 10px 14px 10px 18px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid #e2e8f0;
  border-left: 3px solid #93c5fd;
  border-radius: 4px;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.28s ease;
  position: relative;
  overflow: hidden;
}

.opt-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.04), transparent);
  transition: width 0.35s ease;
  pointer-events: none;
}

.opt-btn:hover {
  background: linear-gradient(135deg, #f1f5f9, #e8edf4);
  border-left-color: #3b82f6;
  color: #1e293b;
  transform: translateX(4px);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.08);
}

.opt-btn:hover::before {
  width: 100%;
}

.opt-btn:active {
  transform: translateX(6px);
  border-left-color: #2563eb;
  box-shadow: 0 2px 14px rgba(37, 99, 235, 0.12);
}

/* 第4个选项（主线推进）特殊样式 */
.opt-btn:nth-child(4) {
  border-left-color: #fbbf24;
}

.opt-btn:nth-child(4):hover {
  border-left-color: #d97706;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.08);
}

.opt-btn:nth-child(4)::before {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.04), transparent);
}

/* 第5个选项（时间跳过）特殊样式 */
.opt-btn:nth-child(5) {
  border-left-color: #a5b4fc;
}

.opt-btn:nth-child(5):hover {
  border-left-color: #6366f1;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.08);
}

.opt-btn:nth-child(5)::before {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.04), transparent);
}

/* ══════════════════════════════════════════════════════════
   §14  全局动画定义
   ══════════════════════════════════════════════════════════ */

@keyframes subtle-fadein {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* details 展开时内容区淡入 */
details[open] > .hud-content,
details[open] > .sys-content,
details[open] > div {
  animation: subtle-fadein 0.3s ease forwards;
}

/* ══════════════════════════════════════════════════════════
   §15  移动端适配 · @media
   ══════════════════════════════════════════════════════════ */

@media (max-width: 520px) {
  summary {
    padding: 8px 10px;
    font-size: 14px;
  }

  .hud-content {
    padding: 10px 10px;
    font-size: 13.5px;
  }

  .main-body {
    padding: 14px 12px 14px 16px;
    font-size: 14.5px;
    line-height: 1.8;
  }

  /* pop-info 提示框移动端全宽底栏 */
  .pop-info::after {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: auto;
    max-width: none;
    width: 100%;
    border-radius: 12px 12px 0 0;
    padding: 16px 18px 20px;
    font-size: 13.5px;
    z-index: 999999;
    transform: translateY(10px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  }

  .pop-info:hover::after,
  .pop-info:focus::after {
    transform: translateY(0);
  }

  /* 移动端隐藏箭头 */
  .pop-info::before {
    display: none;
  }

  .reply-l1 {
    padding-left: 14px;
    margin-left: 4px;
  }

  .reply-l2 {
    padding-left: 14px;
    margin-left: 18px;
  }

  .forum-thread {
    padding: 8px 8px;
  }

  .forum-thread::after {
    font-size: 10px;
    top: 6px;
    right: 6px;
  }

  .opt-btn {
    padding: 8px 10px 8px 14px;
    font-size: 13.5px;
  }

  .opt-btn:hover {
    transform: translateX(2px);
  }

  .sys-item {
    padding: 4px 6px;
    font-size: 13px;
  }

  details.sub-sys > summary {
    padding: 6px 10px;
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .main-body {
    padding: 12px 10px 12px 14px;
    font-size: 14px;
    line-height: 1.75;
  }

  summary {
    font-size: 13.5px;
    padding: 7px 8px;
  }

  .hud-content {
    padding: 8px 8px;
    font-size: 13px;
    line-height: 1.7;
  }

  .forum-thread {
    padding: 6px 6px;
    margin: 5px 0;
  }

  .reply-l1 {
    padding-left: 10px;
    margin-left: 2px;
    font-size: 12px;
  }

  .reply-l2 {
    padding-left: 10px;
    margin-left: 12px;
    font-size: 11.5px;
  }

  .forum-tag {
    font-size: 10px;
    padding: 1px 5px;
  }

  .opt-btn {
    padding: 7px 8px 7px 12px;
    font-size: 13px;
  }

  name {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════════════════════
   §16  滚动条美化（webkit 内核）
   ══════════════════════════════════════════════════════════ */

.hud-content::-webkit-scrollbar,
.sys-content::-webkit-scrollbar,
.main-body::-webkit-scrollbar {
  width: 4px;
}

.hud-content::-webkit-scrollbar-track,
.sys-content::-webkit-scrollbar-track,
.main-body::-webkit-scrollbar-track {
  background: transparent;
}

.hud-content::-webkit-scrollbar-thumb,
.sys-content::-webkit-scrollbar-thumb,
.main-body::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.hud-content::-webkit-scrollbar-thumb:hover,
.sys-content::-webkit-scrollbar-thumb:hover,
.main-body::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* =================================================================
   TenSura Theme: Rimuru Tempest & Federation of Jura (Gacha Game UI Edition)
   转生史莱姆主题：利姆鲁 · 智慧之王 · 魔国联邦 (二次元手游UI重构版)
   核心风格：全息玻璃拟物化 + 异世界终端面板 + 流光动效
   ================================================================= */

/* --- 动画定义区 (二次元游戏动态效果) --- */
@keyframes sage-pulse {
    0% { box-shadow: inset 0 0 8px rgba(0, 229, 255, 0.2), 0 0 5px rgba(0, 229, 255, 0.2); }
    50% { box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.5), 0 0 10px rgba(0, 229, 255, 0.4); }
    100% { box-shadow: inset 0 0 8px rgba(0, 229, 255, 0.2), 0 0 5px rgba(0, 229, 255, 0.2); }
}

@keyframes button-shine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* --- 1. 顶部栏净化 (清除原版杂色) --- */
.sticky.w-full.top-0 [class*="bg-[#F1CBCB]"], 
.sticky.w-full.top-0 [class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 1. 顶部栏 (异世界系统HUD面板) --- */
.sticky.w-full.top-0.flex.items-center {
    /* 背景：高斯模糊 + 数据网格暗纹 */
    background: linear-gradient(90deg, rgba(2, 56, 110, 0.85), rgba(66, 165, 245, 0.75)),
                repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px) !important;
    backdrop-filter: blur(16px) saturate(120%) !important; /* 二次元毛玻璃效果 */
    border-bottom: 2px solid #00e5ff !important; /* 智慧之王高亮蓝 */
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.25), inset 0 -2px 10px rgba(0, 229, 255, 0.15) !important;
}

/* 模型名称 - 【大贤者/智慧之王】全息标签 */
#ai-model-selector .truncate.text-\[13px\] {
    color: #e0f7fa !important;
    text-shadow: 0 0 8px #00e5ff !important;
    font-weight: 900 !important;
    font-family: "Consolas", "Microsoft YaHei", sans-serif !important;
    letter-spacing: 1.5px !important;
    background: rgba(0, 229, 255, 0.1) !important;
    border: 1px solid rgba(0, 229, 255, 0.4) !important;
    padding: 2px 10px !important;
    border-radius: 4px 12px 4px 12px !important; /* 科技感切角 */
    animation: sage-pulse 3s infinite !important; /* 呼吸灯特效 */
}

#ai-model-selector .truncate.text-\[13px\]::before {
    content: "«告» "; /* 采用原著小说标准括号 */
    color: #ce93d8 !important; 
    text-shadow: 0 0 8px rgba(206, 147, 216, 0.8);
}

#ai-model-selector .truncate.text-\[13px\]::after {
    content: " [解析完毕]";
    color: #ce93d8 !important;
    font-size: 0.85em !important;
    opacity: 0.9;
}

/* --- 2. 聊天气泡 (史莱姆果冻拟物态) --- */
.bg-gray-100\/90.relative.inline-block {
    /* 背景：史莱姆高光渐变质感 */
    background: linear-gradient(135deg, rgba(225, 245, 254, 0.95) 0%, rgba(179, 229, 252, 0.85) 50%, rgba(129, 212, 250, 0.9) 100%) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 4px 24px 24px 24px !important; /* 游戏对话框经典不对称圆角 */
    box-shadow: 
        0 8px 25px rgba(3, 169, 244, 0.2), 
        inset 2px 2px 5px rgba(255, 255, 255, 0.9), /* 顶部高光 */
        inset -3px -3px 10px rgba(1, 87, 155, 0.15) !important; /* 底部暗部 */
    color: #263238 !important; 
    position: relative !important;
    overflow: hidden !important;
}

/* 气泡文字 */
.bg-gray-100\/90.relative.inline-block .markdown-body {
    color: #1c2833 !important; 
    font-family: "Microsoft YaHei", sans-serif !important;
    line-height: 1.6 !important;
}

/* 强调文字 (红丸/黑炎 - 游戏高亮词条风格) */
.bg-gray-100\/90.relative.inline-block .markdown-body strong {
    color: #ff3d00 !important; 
    text-shadow: 0px 0px 8px rgba(255, 61, 0, 0.4) !important;
    font-weight: 900 !important;
    background: linear-gradient(90deg, transparent, rgba(255, 61, 0, 0.08), transparent) !important;
    padding: 0 4px !important;
    border-bottom: 2px solid #ff3d00 !important; /* 词条下划线 */
}

/* 代码块背景适配 (白老/剑术秘籍卷轴) */
.bg-gray-100\/90.relative.inline-block pre {
    background: linear-gradient(to bottom right, rgba(255, 255, 248, 0.9), rgba(245, 245, 235, 0.9)) !important;
    border: 1px solid #b0bec5 !important; 
    border-left: 4px solid #78909c !important; /* 卷轴轴心 */
    border-radius: 4px 8px 8px 4px !important;
    color: #212121 !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05) !important;
}

/* --- 3. 按钮组 (朱菜巫女服 - 抽卡游戏UI切角按钮) --- */
#ai-mod-button2 button.MuiButton-root,
#header-setting-button {
    background: linear-gradient(135deg, #f8bbd0 0%, #f48fb1 100%) !important; 
    color: #880e4f !important; 
    border: 2px solid #fce4ec !important;
    border-radius: 0 12px 0 12px !important; /* 二次元标志性斜切角 */
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.25), inset 0 2px 4px rgba(255,255,255,0.6) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 按钮扫光特效 */
#ai-mod-button2 button.MuiButton-root::after,
#header-setting-button::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(-25deg);
    animation: button-shine 4s infinite;
}

#ai-mod-button2 button.MuiButton-root:hover,
#header-setting-button:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f8bbd0 100%) !important;
    color: #6a1b9a !important; /* 紫苑魔力共鸣 */
    border-color: #ce93d8 !important;
    box-shadow: 0 6px 15px rgba(171, 71, 188, 0.4), inset 0 0 10px rgba(206, 147, 216, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* 分页按钮 (史莱姆核心) */
.MuiPaginationItem-root.Mui-selected {
    background: linear-gradient(135deg, #4fc3f7, #0288d1) !important; 
    color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 12px rgba(79, 195, 247, 0.8) !important;
    font-weight: bold !important;
}

/* --- 4. 底部输入框 (苍影/暗部指令台) --- */
#ai-chat-input {
    background: rgba(236, 239, 241, 0.85) !important; 
    backdrop-filter: blur(10px) !important;
    color: #263238 !important; 
    border: 1px solid #cfd8dc !important;
    border-left: 4px solid #546e7a !important; /* 苍影的苦无色 */
    border-radius: 0 8px 8px 0 !important; /* 终端输入框造型 */
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
}

#ai-chat-input:focus {
    background: #ffffff !important;
    border-color: #00e5ff !important; 
    border-left: 4px solid #00e5ff !important; 
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.25), inset 0 2px 6px rgba(0,0,0,0.02) !important;
}

#ai-chat-input::placeholder {
    color: rgba(84, 110, 122, 0.6) !important;
    font-style: italic !important;
}

/* --- 6. 评论区 (魔国联邦底座/毛玻璃悬浮坞) --- */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(to top, rgba(227, 242, 253, 0.95), rgba(255, 255, 255, 0.8)) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 2px solid rgba(129, 212, 250, 0.6) !important;
    box-shadow: 0 -4px 25px rgba(3, 169, 244, 0.15) !important;
}

/* 发送按钮 (史莱姆水滴) */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.cursor-pointer.group.flex.items-center.justify-center {
    background: linear-gradient(135deg, #42a5f5, #1565c0) !important; 
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.4) !important;
    transition: transform 0.2s !important;
}
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.cursor-pointer.group.flex.items-center.justify-center:active {
    transform: scale(0.95) !important;
}

/* --- 7. 系统日志文字注入 (智慧之王系统提示框) --- */
.system-log-1 .loading-text, 
.system-log-2 .loading-text {
    color: #00e5ff !important;
    font-family: "Consolas", monospace !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important;
    background: rgba(0, 24, 48, 0.85) !important; /* 终端黑底 */
    padding: 4px 12px !important;
    border: 1px solid rgba(0, 229, 255, 0.5) !important;
    border-radius: 4px !important;
    display: inline-block !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2) !important;
}

.system-log-1 .loading-text::before { content: '«告» 正在构筑异世界干涉回路...' !important; }
.system-log-2 .loading-text::before { content: '«告» 个体名:玩家 灵魂波长解析中...' !important; }

/* ===== 论坛帖子内嵌图片基础样式 ===== */
.sub-sys img {
  display: block;
  max-width: min(65%, 220px);
  height: auto;
  margin: 6px 0 2px 0;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  object-fit: contain;
}

/* 回复楼层的图片稍微再小一点，区分层级感 */
.sub-sys .reply-l1 img,
.sub-sys .reply-l2 img {
  max-width: min(50%, 170px);
  margin-left: 4px;
}

/* 悬停放大效果 - 鼠标/长按预览感 */
.sub-sys img:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.15);
}

/* GIF图片加个微妙的呼吸光效提示"这是动图" */
.sub-sys img[src$=".gif"] {
  border-color: rgba(120, 200, 255, 0.2);
  box-shadow: 0 2px 8px rgba(120, 200, 255, 0.12);
}

.sub-sys img[src$=".gif"]:hover {
  border-color: rgba(120, 200, 255, 0.35);
  box-shadow: 0 4px 18px rgba(120, 200, 255, 0.2);
}

/* ===== 图片加载状态优化 ===== */
/* 图片加载前占位，防止布局跳动 */
.sub-sys img {
  min-height: 40px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 100%);
}