/* =====================================================================
   builtInCss · 碧蓝航线 · 全舰娘大世界（四平台通用版）
   ---------------------------------------------------------------------
   配套 Runtime：碧蓝航线全舰娘-执行指令-runtime-v1.md
     固定行序面板 v3：world 5 行 / player 6 行 / npc 12 行
  目标平台：春水 / MissAI / 夜语 / Rili（不做风月）
  主题：深海港区 / 银白界面 / 淡金锚饰 / 流动海光边框
  写法基准：builtInCss_四平台参考模板.css + 跨平台写作规范
   ---------------------------------------------------------------------
  原则：
  1. 内容层选择器严格绑定 Runtime 输出协议，零平台前缀
  2. 禁用 :is()（miss 系不识别），一律逗号展开
  3. 面板标签由模型写出（<p><b>标签：</b>值</p>），CSS 只做配色
  4. 伪元素只作装饰增强，不承载必要信息
  5. 平台差异只出现在「8. 平台容器钩子」；浅色覆盖在「9. 末尾覆盖段」+ !important
  6. 不写裸 body / :root 作为唯一作用域；不依赖外链字体（CSP 限制）
  ===================================================================== */

/* ---------- 0. 主题变量（带 fallback） ---------- */
:root {
  --accent: #3f8fe8;            /* 强调色：面板标签、链接、高亮（海蓝） */
  --accent-2: #a9dcff;          /* 强调色浅变体（海光） */
  --gold: #e2c27a;              /* 世界面板 / 关键名词（淡金锚饰） */
  --player: #8fc6e8;            /* 玩家面板（银蓝） */
  --npc: #a9dcff;               /* NPC 面板（海光蓝） */
  --bg: #061b33;                /* 内容区背景（深海） */
  --text: #eef3fb;              /* 正文主文字（银白） */
  --muted: #a9bdd6;             /* 次要文字 */
  --dim: #7b93ae;               /* 弱化文字 */
  --line: rgba(95, 150, 215, .24);
  --panel-bg: rgba(9, 28, 52, .94);
  --judge-color: #7b93ae;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

/* ---------- 1. 内容层 · 裁决块 ---------- */
details.judge {
  margin: 8px 0 16px;
  border-radius: 6px;
  overflow: hidden;
}

details.judge summary {
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted, #a9bdd6);
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 8px 12px;
}

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

details.judge[open] summary {
  color: var(--accent, #3f8fe8);
}

.judge-body {
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  font-size: 12px;
  line-height: 1.7;
  color: var(--judge-color, #7b93ae);
  padding: 10px 14px;
  border: 1px solid var(--line, rgba(95, 150, 215, .24));
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.judge-meta,
.judge-line {
  margin: 4px 0;
  padding-left: 10px;
  border-left: 2px solid var(--line, rgba(95, 150, 215, .24));
}

.judge-body > :first-child {
  border-left-color: var(--accent, #3f8fe8);
  color: var(--accent, #3f8fe8);
}

/* ---------- 2. 内容层 · 分隔线 ---------- */
hr.separator {
  border: none;
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(90deg, transparent, var(--line, rgba(95, 150, 215, .35)), transparent);
}

hr.separator::after {
  content: "◇";
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: 10px;
  color: var(--dim, #7b93ae);
}

/* ---------- 3. 内容层 · 正文 ---------- */
.story {
  padding: 20px 22px;
  font-family: var(--font-body, "Noto Sans SC", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.9;
  color: var(--text, #eef3fb);
}

.story p {
  margin: 0 0 14px;
}

.story p:last-child {
  margin-bottom: 0;
}

.story strong {
  color: var(--gold, #e2c27a);
}

.story em {
  color: var(--accent-2, #a9dcff);
}

/* ---------- 4. 内容层 · 状态面板（固定行序 v3） ---------- */
details.panel, details.world, details.player, details.npc {
  position: relative;
  isolation: isolate;
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--panel-bg, rgba(9, 28, 52, .94));
  border: 1px solid var(--line, rgba(95, 150, 215, .32));
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text, #eef3fb);
}

/* 流动海光边框（装饰；平台不支持伪元素时自动退化为普通边框） */
details.panel::before, details.world::before, details.player::before, details.npc::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 10%,
    rgba(63, 143, 232, .08) 22%,
    rgba(63, 143, 232, .95) 39%,
    rgba(169, 220, 255, .98) 50%,
    rgba(63, 143, 232, .95) 61%,
    rgba(63, 143, 232, .08) 78%,
    transparent 90%
  );
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: seaBorderFlow 5.6s linear infinite;
}

@keyframes seaBorderFlow {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}

details.panel summary, details.world summary, details.player summary, details.npc summary {
  position: relative;
  z-index: 3;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent, #3f8fe8);
  cursor: pointer;
  user-select: none;
  list-style: none;
  margin-bottom: 8px;
  letter-spacing: .08em;
}

details.panel summary::-webkit-details-marker, details.world summary::-webkit-details-marker, details.player summary::-webkit-details-marker, details.npc summary::-webkit-details-marker {
  display: none;
}

/* 面板行：Runtime 输出为 details 的直接子级 <p>，用 > 限定，不误伤 summary */
details.panel > p, details.world > p, details.player > p, details.npc > p {
  margin: 2px 0;
  padding: 2px 0;
  line-height: 1.6;
}

/* 面板标签：由模型随行写出，CSS 只做配色 */
details.panel > p b, details.world > p b, details.player > p b, details.npc > p b {
  margin-right: 6px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent, #3f8fe8);
}

/* 多面板分别着色（GM 大世界） */
details.panel.world > summary,
details.panel.world > p b,
details.world > summary,
details.world > p b {
  color: var(--gold, #e2c27a);
}

details.panel.player > summary,
details.panel.player > p b,
details.player > summary,
details.player > p b {
  color: var(--player, #8fc6e8);
}

details.panel.npc > summary,
details.panel.npc > p b,
details.npc > summary,
details.npc > p b {
  color: var(--npc, #a9dcff);
}

/* 港区立绘头像：npc 面板第一行 */
details.panel.npc img.npc-avatar, details.npc img.npc-avatar {
  display: inline-block;
  width: 112px;
  height: 112px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 1px solid rgba(124, 164, 255, .45);
  box-shadow: 0 0 18px rgba(63, 143, 232, .28), 0 4px 12px rgba(0, 0, 0, .35);
  vertical-align: middle;
  background: rgba(12, 20, 36, .6);
}

details.panel.npc > p:first-child, details.npc > p:first-child {
  text-align: center;
  padding: 6px 0 2px;
}

/* ---------- 5. 内容层 · 行动建议 ---------- */
.suggestions {
  margin: 16px 0 8px;
}

.suggestions p {
  margin: 8px 0;
  padding: 12px 16px;
  background: var(--panel-bg, rgba(9, 28, 52, .94));
  border: 1px solid var(--line, rgba(95, 150, 215, .24));
  border-radius: 6px;
  font-size: 14px;
  color: var(--text, #eef3fb);
}

.suggestions p:hover {
  border-color: var(--accent, #3f8fe8);
  color: var(--accent-2, #a9dcff);
}

/* ---------- 6. 通用元素（限定命名空间） ---------- */
.story code,
.story pre {
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  font-size: 13px;
  background: rgba(63, 143, 232, .08);
  border-radius: 4px;
}

.story code {
  padding: 2px 5px;
}

.story pre {
  padding: 12px;
  overflow-x: auto;
}

.story blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--line, rgba(95, 150, 215, .35));
  color: var(--muted, #a9bdd6);
}

.story a {
  color: var(--accent-2, #a9dcff);
  text-decoration: none;
  border-bottom: 1px solid var(--line, rgba(95, 150, 215, .35));
}

/* ---------- 7. 响应式 ---------- */
@media (max-width: 480px) {
  .story {
    padding: 14px;
    font-size: 15px;
  }
  details.panel {
    padding: 12px 14px;
  }
  details.panel.npc img.npc-avatar, details.npc img.npc-avatar {
    width: 96px;
    height: 96px;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 8. 平台容器钩子（按部署平台启用，其余删除） ---------- */

/* 8.1 春水 Live：聊天主区域 + AI 气泡 */
.bd-content-area {
  background: var(--bg, #061b33);
}
.bd-ai-msg {
  border-radius: 12px;
}

/* 8.2 MissAI：AI 回复内容容器（跟随平台明暗） */
.content-renderer-v3-container.theme-light {
  background: var(--bg, #061b33);
  color: var(--text, #eef3fb);
}
.content-renderer-v3-container.theme-dark {
  background: var(--bg, #061b33);
  color: var(--text, #eef3fb);
}

/* 8.3 夜语：builtInCss 注入容器 */
#installedBuiltInCss {
  background: var(--bg, #061b33);
}

/* 8.4 Rili：builtInCss 注入作用域（平台自动加 .custom-styles 前缀） */
.custom-styles {
  background: var(--bg, #061b33);
}

/* ---------- 9. 末尾覆盖段（浅色主题，+ !important） ---------- */
@media (prefers-color-scheme: light) {
  :root {
    --accent: #2478e5;
    --accent-2: #0d64c8;
    --gold: #a8791f;
    --player: #4e86b8;
    --npc: #2f6fb0;
    --bg: #f5f9fd;
    --text: #1e3a5f;
    --muted: #4e6a8a;
    --dim: #7890a8;
    --line: rgba(64, 108, 160, .20);
    --panel-bg: rgba(255, 255, 255, .97);
    --judge-color: #5c7690;
  }
  details.judge summary,
  .judge-body,
  details.panel,
  .story,
  .suggestions p {
    color: var(--text, #1e3a5f) !important;
  }
  details.panel, details.world, details.player, details.npc {
    background: var(--panel-bg, rgba(255, 255, 255, .97)) !important;
    border-color: rgba(64, 108, 160, .22) !important;
  }
  .story strong,
  details.panel.world > summary,
  details.panel.world > p b,
  details.world > summary,
  details.world > p b {
    color: var(--gold, #a8791f) !important;
  }
  details.panel.player > summary,
  details.panel.player > p b,
  details.player > summary,
  details.player > p b {
    color: var(--player, #4e86b8) !important;
  }
  details.panel.npc > summary,
  details.panel.npc > p b,
  details.npc > summary,
  details.npc > p b {
    color: var(--npc, #2f6fb0) !important;
  }
  details.judge[open] summary,
  .judge-body > :first-child,
  .story em,
  .story a {
    color: var(--accent, #2478e5) !important;
  }
  .suggestions p {
    background: rgba(255, 255, 255, .9) !important;
  }
}