:root{
  --card:#0f172a; --ink:#e2e8f0; --muted:#94a3b8; --accent:#4f46e5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#0b1020; color:var(--ink);
  font:16px/1.6 "Inter", system-ui, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{max-width:980px;margin:40px auto;padding:0 16px}
button{background:var(--accent);color:#fff;border:0;padding:10px 16px;border-radius:12px;cursor:pointer}
button[disabled]{opacity:.5;cursor:not-allowed}

/* 叙事文本字体（更有氛围） */
#twInner, .subs{font-family:"Spectral", Georgia, "Times New Roman", serif}

/* ====== 开场舞台（全屏） ====== */
#stage{position:fixed;inset:0;z-index:10;background:#000;overflow:hidden}
#stage video,#stage #freezeCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#stage #freezeCanvas{display:none}
#stage .skip{
  position:absolute;right:16px;bottom:16px;background:rgba(15,23,42,.6);
  color:#fff;border:1px solid rgba(255,255,255,.15);padding:8px 12px;border-radius:999px;
  cursor:pointer;backdrop-filter:blur(6px)
}

/* 锚点：确定停靠位置（视频人物下方） */
#dockAnchor{position:absolute;left:var(--ax,50%);top:var(--ay,70%);width:0;height:0}

/* 打字机文本层（置于视频上方） */
#typewriter{
  position:absolute;inset:auto 0 18%;
  display:flex;justify-content:center;pointer-events:none;padding:0 24px;
}
#twInner{
  max-width:min(920px, 86vw);
  color:#e6edf6;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
  font-size:clamp(16px, 2.2vw, 22px);
  line-height:1.8;
  white-space:pre-wrap;
  opacity:0;
  transition:opacity .4s ease;
  will-change:contents, opacity;
}
#twInner.show{opacity:1}

/* 站点 UI 淡入 */
.container.is-hidden{opacity:0;pointer-events:none}
body.ready .container{opacity:1;transition:opacity .6s ease}

/* ================== AI 面板 ================== */
.panels{display:block}

/* 固定高度 + 溢出滚动（保留你的原逻辑） */
.ai-chat{
  width:min(520px, 86vw);
  height:clamp(240px, 42vh, 460px);  /* 固定可视高度 */
  max-height:none;
  overflow-y:auto;                   /* 垂直滚动条 */
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.86));
  padding:16px;border-radius:16px;box-shadow:0 12px 38px rgba(0,0,0,.45);backdrop-filter:blur(6px);
}

.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}

/* 内容换行，避免横向滚动；保留最小高度以撑开卡片 */
.subs{
  min-height:160px;
  white-space:pre-wrap;
  line-height:1.7;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
#aiAudio{display:none}

/* Sam says 与正文的区分样式（颜色+字号区分） */
.seg-header{
  color: var(--accent);
  font-weight: 600;
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.7;
  margin: 10px 0 4px;
  text-shadow: 0 1px 10px rgba(79,70,229,.25);
}
.seg-content{
  color: var(--ink);
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.8;
  margin: 0 0 8px;
}

/* 停靠容器：把 .panels（含 Start/Stop + AI 面板）固定到锚点下方 */
@media (min-width: 860px){
  .ai-dock{
    position:fixed;z-index:11;transform:translate(-50%, -8px);max-width:min(720px, 92vw)
  }
  .dock-controls{
    position:relative;display:flex;gap:10px;margin-bottom:10px;
    padding:8px;background:rgba(2,6,23,.55);border:1px solid rgba(255,255,255,.14);border-radius:999px;
    backdrop-filter:blur(6px)
  }
}

/* 小屏：不固定，正常文档流 */
@media (max-width: 859px){
  .ai-dock{position:static;transform:none;margin:12px auto 0}
  .dock-controls{display:flex;gap:10px;margin:0 0 12px 0}
}

.page-tip{margin-top:20px;color:var(--muted);font-size:13px}

/* 可见滚动条（桌面端更明显） */
.ai-chat::-webkit-scrollbar{ width:10px }
.ai-chat::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:999px }
.ai-chat::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:999px }
.ai-chat::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.38) }