:root {
  --bg: #14161a;
  --bg-panel: #1c1f26;
  --bg-elev: #262a33;
  --line: #333842;
  --fg: #e6e8ec;
  --fg-dim: #9aa0ab;
  --fg-faint: #6b7280;
  --accent: #6fb3ff;
  --edge: #4a515e;
  --edge-kill: #e2574c;
  --pulse: #ffe08a;
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 13px;
  overflow: hidden;
}

#app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

/* ---- 顶栏 + 控件 ---- */
#topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
  flex-wrap: wrap;
}
#topbar h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  white-space: nowrap;
}
#controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ctl, .ctl-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-dim);
  font-size: 12px;
}
.ctl-group { gap: 4px; flex-wrap: wrap; }
#search {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  padding: 4px 10px;
  font-size: 12px;
  width: 150px;
  outline: none;
}
#search:focus { border-color: var(--accent); }
input[type="range"] { accent-color: var(--accent); cursor: pointer; width: 120px; }
input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

/* 控件芯片（阵营/状态/事件类型多选） */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--fg-dim);
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  transition: opacity .15s, border-color .15s;
}
.chip[data-on="0"] { opacity: .4; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---- 舞台：关系图 + 侧栏 ---- */
#stage {
  display: flex;
  min-height: 0;
  overflow: hidden;
}
#graph {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;   /* 显式高度：无此规则时沉浸档下flex拉伸失效,SVG回落默认150px窄带 */
  display: block;
  background:
    radial-gradient(circle at 50% 40%, #1a1d24 0%, var(--bg) 70%);
  cursor: grab;
}
#panel {
  flex: 0 0 300px;
  border-left: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 16px;
  overflow-y: auto;
}
#panel.collapsed { flex-basis: 0; width: 0; padding: 0; overflow: hidden; border-left: none; }
#panel-toggle {
  flex: 0 0 auto; align-self: stretch; width: 14px;
  background: var(--bg-panel); color: var(--fg-dim);
  border: none; border-left: 1px solid var(--line);
  cursor: pointer; padding: 0; font-size: 11px; line-height: 1;
}
#panel-toggle:hover { color: var(--fg); background: var(--bg-elev); }
.panel-empty { color: var(--fg-faint); font-size: 12px; margin-top: 40px; text-align: center; }

#panel h2 { margin: 0 0 2px; font-size: 17px; font-weight: 600; }
#panel .sub { color: var(--fg-dim); font-size: 12px; margin-bottom: 12px; }
#panel .field { display: flex; gap: 8px; margin: 4px 0; font-size: 12px; }
#panel .field .k { color: var(--fg-faint); flex: 0 0 56px; }
#panel .field .v { color: var(--fg); }
#panel .section-title { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; margin: 16px 0 6px; }

/* ---- 时间轴 ---- */
#timeline-wrap {
  border-top: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 6px 16px 10px;
}
#timeline-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 2px;
}
#timeline-label { font-size: 12px; color: var(--fg-dim); font-weight: 600; }
.play-btn {
  background: var(--accent); color: #0e1116; border: none; border-radius: 50%;
  width: 24px; height: 24px; font-size: 12px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.play-btn:hover { filter: brightness(1.1); }
.play-btn.playing { background: var(--pulse); }
#chapter-readout {
  font-size: 12px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#timeline { display: block; width: 100%; height: 48px; }
.track { stroke: var(--edge); stroke-width: 4px; stroke-linecap: round; }
.track-played { stroke: var(--accent); stroke-width: 4px; stroke-linecap: round; }

/* ---- SVG 图元 ---- */
.node circle { cursor: pointer; stroke-width: 1.5px; }
.node.dead circle { stroke: var(--fg-faint); }
.node text { fill: var(--fg); font-size: 10px; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.node.dead text { fill: var(--fg-dim); }
.link { stroke: var(--edge); fill: none; stroke-width: 1.2px; }
.link.kill { stroke: var(--edge-kill); }
.link.hold { stroke: #c9a227; opacity: .65; }
.node.artifact circle { stroke-width: 1.5px; }
.node.artifact text { fill: #d8bd5e; }
.ctl-lbl { color: var(--fg-faint); margin-right: 2px; font-size: 11px; }
.faded { opacity: .12 !important; }
.dim-label { opacity: 0 !important; }

/* 类型化别名 + 关系方向串（Phase 4d 面板） */
.aliases { display: flex; flex-wrap: wrap; gap: 4px; }
.alias { font-size: 11px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: var(--fg); }
.alias .at { color: var(--fg-faint); margin-right: 4px; }
.rel { font-size: 12px; color: var(--fg); margin: 2px 0; }

/* 关系型按 display_category 分类着色（Phase 4d） */
.link.pol { stroke: #7f8aa0; }
.link.kin { stroke: #8a7fae; }
.link.eco { stroke: #c9a227; }
.link.hostile { stroke: #8f4a43; stroke-width: 1px; }   /* 杀/敌对:暗红细线,不抢节点(item2) */
.flash-line { stroke: #ffe08a; }                         /* 播放期点事件瞬时闪(item4) */
.link.mentor { stroke: #5fa8b8; }
.link.action { stroke: #c9568a; opacity: .5; }
.link.misc { stroke: var(--edge); }

.cursor-line { stroke: var(--accent); stroke-width: 2px; cursor: ew-resize; }
.cursor-handle { fill: var(--accent); cursor: ew-resize; }
.axis text { fill: var(--fg-faint); font-size: 10px; }
.axis line, .axis path { stroke: var(--edge); }
.ll-tick { fill: var(--fg-faint); font-size: 9px; }
.ll-grid { stroke: var(--line); stroke-width: 1px; }
#lifeline { margin-top: 4px; }
#lifeline text { font-family: inherit; }

/* 沉浸全屏档：只留图 + 底部播放细线 */
body.immersive #topbar, body.immersive #panel, body.immersive #timeline-wrap,
body.immersive #panel-toggle { display: none !important; }
#hairline { position: fixed; left: 0; bottom: 0; width: 100%; height: 3px;
  background: rgba(255,255,255,.07); display: none; z-index: 60; pointer-events: none; }
body.immersive #hairline { display: block; }
#hairline-fill { height: 100%; width: 0%; background: #6aa9ff; opacity: .75; }

/* 显式钉行：沉浸档 display:none 掉 topbar 后,#stage 会自动流入第1行(auto)
   导致1fr行空置、SVG塌到150px——三个孩子各钉各行,隐藏谁都不串行 */
#topbar { grid-row: 1; }
#stage { grid-row: 2; }
#timeline-wrap { grid-row: 3; }