/* ============================================================
   对话系统：打字机对话框 / 旁白 / 分支选项
   ============================================================ */

#dialog-layer {
  position: absolute; left: 0; right: 0;
  /* 背包栏高约 72px(48槽位+2*12内边距) + 自身底距 12px，整体上移到其上方避免遮挡 */
  bottom: calc(72px + var(--sp-3) + var(--sp-3));
  z-index: 30;   /* 需高于背包栏(25)与场景导航(25)，避免选项被遮挡 */
  padding: 0 var(--sp-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  /* 容器本身不拦截场景点击（热点/NPC），只由内部对话框响应 */
  pointer-events: none;
}
#dialog-box, #narration-box, #choice-box { pointer-events: auto; }

/* ---------- 对话框 ---------- */
#dialog-box {
  position: relative;
  width: min(860px, 94vw);
  min-height: 128px;
  background: linear-gradient(180deg, rgba(22,27,38,.94), rgba(13,17,23,.96));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
}
#speaker-name {
  position: absolute; top: -16px; left: var(--sp-5);
  padding: 2px 18px;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--accent);
  letter-spacing: .15em;
}
#speaker-name.speaker-narration { display: none; }
#dialog-text {
  margin-top: var(--sp-2);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .04em;
  min-height: 62px;
}
#dialog-text .text-caret {
  display: inline-block; width: 8px;
  border-right: 2px solid var(--accent);
  animation: caretBlink .8s infinite;
  margin-left: 2px;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.dialog-next {
  position: absolute; right: var(--sp-4); bottom: var(--sp-2);
  color: var(--accent);
  font-size: var(--fs-xs);
  letter-spacing: .15em;
  animation: nextBounce 1.2s infinite;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.dialog-next.visible { opacity: 1; }
@keyframes nextBounce { 50% { transform: translateY(4px); } }

/* ---------- 旁白 ---------- */
#narration-box {
  width: min(760px, 92vw);
  text-align: center;
  padding: var(--sp-4) var(--sp-6);
  background: rgba(8,11,16,.7);
  border-radius: var(--r-md);
  color: var(--ink-dim);
  font-size: var(--fs-lg);
  letter-spacing: .12em;
  line-height: 2;
  font-family: var(--font-title);
  animation: fadeIn .6s ease both;
  cursor: pointer;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}

/* ---------- 分支选项 ---------- */
.choice-box {
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(560px, 92vw);
  margin-bottom: var(--sp-2);
}
.choice-btn {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(22,27,38,.92);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--fs-md);
  transition: border-color .18s, background .18s, transform .12s;
  animation: choiceIn .3s ease both;
}
.choice-btn:nth-child(2) { animation-delay: .06s; }
.choice-btn:nth-child(3) { animation-delay: .12s; }
.choice-btn:nth-child(4) { animation-delay: .18s; }
.choice-btn:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateX(6px);
}
.choice-btn .choice-tag {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  vertical-align: 1px;
}
.choice-tag.tag-observe { background: rgba(212,175,55,.2); color: var(--gold); border: 1px solid rgba(212,175,55,.4); }
.choice-tag.tag-doubt { background: rgba(192,132,252,.15); color: #c084fc; border: 1px solid rgba(192,132,252,.4); }
.choice-tag.tag-item { background: rgba(94,234,212,.12); color: var(--accent); border: 1px solid rgba(94,234,212,.4); }
@keyframes choiceIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }