/* 在场 —— 晚上书桌前的一盏灯。暖、暗、安静，不是监控大屏。 */

:root {
  color-scheme: dark;   /* 原生控件（下拉框、滚动条、自动填充菜单）也按深色渲染 */
  --ink: #16130e;
  --ink-2: #1f1b14;
  --line: #322b20;
  --paper: #f2ece1;
  --dim: #9b9081;
  --lamp: #e8a33d;
  --warn: #d98324;
  --danger: #c8503c;
  --ok: #7fa05a;
  --sans: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 任何 display 规则（label 的 flex 之类）都会顶掉浏览器自带的 [hidden]。
 * 这个坑已经咬过三次（登录页孩子名、空的"已经有的"下拉框、陪读中的顶栏导航），全局了断。 */
[hidden] { display: none !important; }

body {
  background: radial-gradient(120% 90% at 50% 0%, #221c14 0%, var(--ink) 62%);
  color: var(--paper);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---- 顶栏 ---- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 15px; letter-spacing: .18em; color: var(--lamp); }
.mode { margin-left: 10px; color: var(--dim); letter-spacing: normal; font-size: 12px; }
.bar-right { display: flex; gap: 22px; }
.meter { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.meter i { font-style: normal; font-size: 11px; color: var(--dim); }
.meter b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }

.bar-nav { display: flex; align-items: center; gap: 16px; font-size: 12px; }
.bar-nav a { color: var(--dim); text-decoration: none; }
.bar-nav a:hover { color: var(--lamp); }

/* 必须排在 .bar-nav/.bar-right 之后：特异性相同，靠源顺序赢，不然藏不住 */
[data-screen-only] { display: none; }
body[data-screen="watching"] [data-screen-only="watching"] { display: flex; }
body[data-screen="setup"] [data-screen-only="setup"] { display: flex; }

/* ---- 屏幕切换 ---- */
.screen { display: none; flex: 1; }
body[data-screen="setup"] .screen.setup,
body[data-screen="done"] .screen.done {
  display: flex; align-items: center; justify-content: center; padding: 32px;
}
body[data-screen="watching"] .screen.watching {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 26px; padding: 28px;
}

/* ---- 卡片 ---- */
.card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 16px;
}
.card h1 { font-size: 22px; font-weight: 500; letter-spacing: .02em; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--dim); }
input, select {
  font: inherit; font-size: 15px; color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 11px 12px;
}
input:focus, select:focus { outline: none; border-color: var(--lamp); }

/* 浏览器自动填充会强行刷白底，用内阴影顶回去（背景色本身改不动，这是唯一正路） */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--paper);
  -webkit-box-shadow: 0 0 0 1000px var(--ink-2) inset;
  box-shadow: 0 0 0 1000px var(--ink-2) inset;
  caret-color: var(--paper);
  transition: background-color 99999s ease-out;
}

button {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 11px 18px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--ink-2); color: var(--paper);
  transition: border-color .15s, color .15s;
}
button:hover { border-color: var(--lamp); }
button.primary { background: var(--lamp); color: #2a1d08; border-color: var(--lamp); font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.ghost { background: transparent; color: var(--dim); }

.fine { font-size: 12px; color: var(--dim); line-height: 1.7; }
.fine a { color: var(--lamp); }
.msg { font-size: 13px; color: var(--dim); line-height: 1.6; }
.msg:empty { display: none; }

/* ---- 角色 ---- */
.stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.portrait-wrap {
  position: relative;   /* 按句视频 overlay 的定位基准 */
  width: min(46vh, 340px); aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  box-shadow: 0 0 0 10px rgba(232,163,61,.04), 0 26px 60px -22px #000;
  display: grid; place-items: center;
  transition: box-shadow .4s, transform .4s;
}
/* 三层（垫帧 img、待机 video、台词 video）必须同一套几何：绝对定位铺满圆框、同样裁切。
   之前 img/video 是 grid 子项，height:100% 在 aspect-ratio 容器里不生效，
   底层视频按整条竖版完整显示、说话层却按正方形裁切——同一张脸差出三成，像被放大。 */
.portrait-wrap img,
.portrait-wrap video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-wrap [hidden] { display: none; }
/* 视频模式：视频铺满圆框、居中不缩放。唯一的构图规则是裁切从画面顶部开始——
   居中裁切会把发顶齐头切平。脸的大小由素材景别决定，不在显示层动手脚。 */
[data-mode="video"] .portrait-wrap img,
[data-mode="video"] .portrait-wrap video {
  object-position: 50% 0%;
}
/* 按句视频盖在待机视频上面淡入淡出——不换底层 src，切换永远没有黑帧 */
.portrait-wrap .line-clip {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .15s ease;
}
.portrait-wrap .line-clip.on { opacity: 1; }
.no-portrait .portrait-wrap img { display: none; }
.fallback { display: none; font-size: 34px; letter-spacing: .3em; color: var(--line); }
.no-portrait .fallback { display: block; }

.glance .portrait-wrap { box-shadow: 0 0 0 10px rgba(232,163,61,.16), 0 26px 60px -22px #000; transform: scale(1.015); }
.talking .portrait-wrap { box-shadow: 0 0 0 10px rgba(232,163,61,.22), 0 26px 60px -22px #000; }

.name { font-size: 13px; color: var(--dim); letter-spacing: .1em; }

.bubble {
  position: absolute; top: -6px; left: 50%;
  transform: translate(-50%, -100%) translateY(6px);
  max-width: 22ch; padding: 12px 16px;
  background: var(--paper); color: #241f17;
  border-radius: 14px 14px 14px 3px;
  font-size: 17px; line-height: 1.5;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.7);
  opacity: 0; transition: opacity .09s ease-out, transform .16s ease-out;
  pointer-events: none; white-space: pre-wrap;
}
.bubble.visible { opacity: 1; transform: translate(-50%, -100%) translateY(0); }

/* ---- 状态行 ---- */
.statusline { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--dim); }
.statusline .sep { opacity: .4; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
[data-role="status"][data-tone="warn"] { color: var(--warn); }
[data-role="status"][data-tone="danger"] { color: var(--danger); }
[data-role="status"][data-tone="rest"] { color: var(--lamp); }

.controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---- 摄像头自监视：小、角落、始终可见（孩子知道它在） ---- */
.cam {
  position: fixed; right: 18px; bottom: 18px;
  width: 132px; border-radius: 3px;
  border: 1px solid var(--line); opacity: .5;
  transform: scaleX(-1);
}
.cam:hover { opacity: 1; }

/* ---- 全屏陪读：满屏只有妈妈 ----
 * 全屏不是"页面放大"，是妈妈占主导：头像放到视口七成高，气泡跟着放大，
 * 顶栏和操作按钮淡出（鼠标移动/触摸时浮现）。摄像头小窗始终在——不做隐蔽模式。 */
html:fullscreen .portrait-wrap { width: min(72vh, 80vw); }
html:fullscreen .bubble { font-size: clamp(20px, 3.2vh, 30px); max-width: 26ch; padding: 16px 22px; }
html:fullscreen .name { font-size: 16px; }
html:fullscreen .statusline { font-size: 15px; }
html:fullscreen .bar,
html:fullscreen .controls { opacity: 0; transition: opacity .3s; }
html:fullscreen .bar:hover,
html:fullscreen .controls:hover,
html:fullscreen.show-ui .bar,
html:fullscreen.show-ui .controls { opacity: 1; }

/* ---- 总结 ---- */
.summary { display: flex; flex-direction: column; gap: 2px; }
.summary > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.summary dt { font-size: 13px; color: var(--dim); }
.summary dd { font-size: 17px; font-variant-numeric: tabular-nums; }
.summary dd.hero { font-size: 25px; color: var(--lamp); }

@media (max-width: 560px) {
  .portrait-wrap { width: 62vw; }
  .cam { width: 92px; }
  .bar-right { gap: 14px; }
}

/* ---- 上传换脸 ---- */
.upload { display: flex; flex-direction: column; gap: 8px; }
.upload button { align-self: flex-start; }
.up-status { font-size: 12px; color: var(--dim); min-height: 1em; }