:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #11100e;
  color: #f7f1e7;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body { margin: 0; overflow: hidden; background: #11100e; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hold { touch-action: none; user-select: none; -webkit-user-select: none; }

.app {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background: #11100e;
}

.stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #26211d;
}

.avatar-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #26211d url('./idle-fallback-16fps.webp?v=20260904l') center 24% / cover no-repeat;
  transform: translateY(-23%) scale(1.22);
  transform-origin: center top;
}

.talking-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #26211d url('./talking-fallback.webp?v=20260904j') center 24% / cover no-repeat;
  transform: translateY(-23%) scale(1.22);
  transform-origin: center top;
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.stage.talking .talking-fallback { opacity: 1; }

.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  transform: translateY(-23%) scale(1.22);
  transform-origin: center top;
  opacity: 0;
  transition: opacity 260ms ease-in-out;
}
.stage video { z-index: 2; }

.app.video-ready .stage video#idle { opacity: 1; }
.app.video-ready .stage.talking video#idle { opacity: 0; }
.app.video-ready .stage.talking video.talking-video.is-visible { opacity: 1; }

.stage-vignette {
  /* 人物视频本身就是主画面，取消整层黑色渐变遮罩，避免压暗人物。 */
  display: none;
}

.app-loader {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #11100e;
  color: #f7f1e7;
  opacity: 1;
  transition: opacity 280ms ease-out;
}
.app-loader.done { opacity: 0; pointer-events: none; }
.loader-content { width: min(72vw, 310px); text-align: center; }
.loader-kicker { display: block; color: #b88b58; font-size: 10px; letter-spacing: 2px; line-height: 1.4; }
.loader-content strong { display: block; margin-top: 13px; color: #fff8ed; font-family: Georgia, "Songti SC", serif; font-size: 35px; font-weight: 500; letter-spacing: 7px; line-height: 1.1; }
.loader-text { display: block; margin-top: 15px; color: #a69c90; font-size: 13px; letter-spacing: 1px; }
.loader-track { height: 3px; margin-top: 19px; overflow: hidden; background: rgba(184,139,88,.20); }
.loader-track i { display: block; width: 8%; height: 100%; background: #c68c4d; transition: width 180ms ease-out; }
.loader-number { display: block; margin-top: 9px; color: #756d63; font-size: 11px; }

.topbar {
  position: absolute;
  z-index: 4;
  top: 0; right: 0; left: 0;
  min-height: 118px;
  padding: calc(20px + env(safe-area-inset-top)) 22px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(180deg, rgba(12, 11, 10, .72), rgba(12, 11, 10, 0));
}

.identity { min-width: 0; }
.identity small {
  display: block;
  overflow: hidden;
  color: #b88b58;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 1.7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.identity h1 {
  margin: 5px 0 0;
  color: #fffaf1;
  font-family: Georgia, "Songti SC", serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 4px;
}
.identity p {
  margin: 5px 0 0;
  color: #9b958d;
  font-size: 13px;
  letter-spacing: 1px;
}
.online {
  flex: none;
  min-width: 58px;
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(178, 172, 162, .22);
  border-radius: 4px;
  background: rgba(17, 16, 14, .28);
  color: #b2aca2;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.online i {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: #86c7a5; box-shadow: 0 0 7px rgba(134,199,165,.8);
}
.online.busy i { background: #e2a65d; box-shadow: 0 0 7px rgba(226,166,93,.75); }
.online b { font-weight: 400; }

.conversation {
  position: absolute;
  z-index: 3;
  right: 11px;
  bottom: calc(150px + env(safe-area-inset-bottom));
  left: 11px;
  height: min(36vh, 260px);
  padding: 7px 4px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.conversation::-webkit-scrollbar { display: none; }
.welcome {
  min-height: 100%;
  padding: 42px 4px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.welcome .quote {
  height: 25px;
  color: #c68c4d;
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: .8;
}
.welcome strong {
  color: #f3ede4;
  font-family: Georgia, "Songti SC", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}
.welcome em {
  margin-top: 7px;
  color: #b3aaa0;
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
}
.message-row { margin-bottom: 9px; }
.message-row.user { text-align: right; }
.message-meta {
  margin: 0 3px 3px;
  color: rgba(245, 235, 221, .74);
  font-size: 10px;
  line-height: 1.4;
}
.bubble {
  display: inline-block;
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.58;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
}
.bubble.user {
  border: 1px solid rgba(255, 218, 168, .30);
  background: rgba(215,155,89,.48);
  color: #22170e;
}
.bubble.assistant {
  border: 1px solid rgba(212,224,231,.22);
  background: rgba(28,36,42,.45);
  color: #f3f0ea;
}

.composer-wrap {
  position: absolute;
  z-index: 5;
  right: 0; bottom: 0; left: 0;
  padding: 10px 16px calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(48,42,37,.88);
  background: rgba(17,16,14,.68);
  box-shadow: 0 -8px 20px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.composer { display: flex; align-items: center; gap: 7px; }
.composer input {
  flex: 1; min-width: 0; height: 38px; padding: 0 11px;
  border: 1px solid #4a4035; border-radius: 5px; background: rgba(33,30,27,.93);
  color: #f8f3eb; font-size: 14px; outline: none;
}
.composer input::placeholder { color: #81786f; }
.composer input:focus { border-color: #a87642; }
.composer button {
  width: 56px; height: 38px; padding: 0; border: 0; border-radius: 5px;
  background: #d79b59; color: #22170e; font-size: 14px; font-weight: 600;
}
.composer button:disabled { opacity: .45; }
.hold {
  width: 100%; height: 42px; margin-top: 8px; padding: 0;
  border: 1px solid #9e6e3b; border-radius: 5px; background: rgba(20,17,14,.16);
  color: #e8b878; font-size: 15px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.hold span { margin-right: 6px; font-size: 15px; }
.hold:active, .hold.recording {
  border-color: #e6af68; background: #704629; color: #fff4df;
}
.status {
  min-height: 15px; margin: 7px 4px 0; overflow: hidden;
  color: #a19a92; font-size: 11px; line-height: 1.4; text-align: center;
  white-space: nowrap; text-overflow: ellipsis;
}

@media (max-height: 680px) {
  .topbar { min-height: 96px; padding-top: calc(12px + env(safe-area-inset-top)); }
  .identity small, .identity p { display: none; }
  .identity h1 { margin-top: 0; font-size: 26px; }
  .conversation { bottom: calc(133px + env(safe-area-inset-bottom)); height: min(37vh, 210px); }
  .composer-wrap { padding-top: 8px; padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
  .hold { height: 37px; margin-top: 6px; }
  .status { margin-top: 5px; }
}