/*
 * 校园三维展陈 · 数字人讲解员
 * 300×420 竖版 / 透明画布 / 深蓝展台语境下的冷色边缘光 + 柔和接触阴影
 * 页面本身不提供聊天框与动作按钮墙，交互完全由父页面通过 postMessage 驱动。
 */
:root {
  --ink: #eef7ff;
  --dim: #8fb6d8;
  --dim-2: rgba(143, 182, 216, .62);
  --cyan: #4fd2ff;
  --mint: #79f0cd;
  --panel: rgba(6, 18, 34, .64);
  --panel-strong: rgba(6, 18, 34, .84);
  --line: rgba(124, 194, 255, .22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 关键：透明背景，父页面深蓝场景直接透出 */
  background: transparent;
}

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- 3D 舞台 ---------- */
#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: none;
}

/* 模型加载 / 失败提示，不遮挡透明背景 */
#loading {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--dim);
  white-space: nowrap;
}
#loading[hidden] { display: none; }

#loading .spinner {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse .9s ease-in-out infinite;
}

#error {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(58, 10, 18, .82);
  border: 1px solid rgba(255, 132, 132, .38);
  color: #ffd2d2;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#error[hidden] { display: none; }

/* 自动播放被拦截时的一次性解锁提示 */
#audio-hint {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(124, 194, 255, .4);
  background: var(--panel-strong);
  color: #cfeaff;
  font: inherit;
  font-size: 11px;
  letter-spacing: .04em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: hintFloat 2.6s ease-in-out infinite;
}
#audio-hint[hidden] { display: none; }

/* ---------- 字幕区 ---------- */
/* 父页面承担字幕与状态；iframe 只画角色，保持完全透明、无面板。 */
#caption { display: none; }

#subtitle {
  min-height: 46px;
  padding: 8px 11px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: #f4fbff;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  transition: opacity .18s ease, visibility .18s ease;
}
#subtitle.is-placeholder { color: var(--dim); font-weight: 500; }

/* 父页面已有大字幕条：朗读时隐藏 iframe 内部字幕，避免同一句话显示两遍。 */
body.caption-hidden #subtitle {
  visibility: hidden;
  opacity: 0;
}

#status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 3px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--dim-2);
  white-space: nowrap;
}

#state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#state .dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 7px var(--cyan);
  animation: pulse 2.6s ease-in-out infinite;
}

body.speaking #state .dot {
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  animation-duration: .9s;
}

body.speaking #state-text { color: #b9f6e6; }

body.silent #state .dot {
  background: #ffb469;
  box-shadow: 0 0 8px #ffb469;
}

#brand { color: rgba(140, 180, 215, .58); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}

@keyframes hintFloat {
  0%, 100% { transform: translateY(0); opacity: .92; }
  50% { transform: translateY(-2px); opacity: 1; }
}

/* 小尺寸 / 大屏放大时都保持稳定构图 */
@media (max-height: 404px) {
  #subtitle { font-size: 15px; min-height: 42px; padding: 7px 10px; }
  #status-row { font-size: 10px; }
  #caption { padding: 0 9px 7px; }
}

@media (max-width: 282px) {
  #subtitle { font-size: 14px; }
  #brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #loading .spinner, #audio-hint, #state .dot { animation: none; }
}