/* 声声 · 通话界面
   主题锁定为暗色：这是一个夜间语音通话场景，不做明暗切换。
   圆角规则：可交互元素 = 胶囊；面板与字幕 = 14px；头像 = 正圆。
   强调色全页只有一个：琥珀。分身说话时是琥珀，你说话时是中性白。 */

:root {
  --ink:      #0a0a0b;
  --ink-2:    #121214;
  --line:     rgba(255, 255, 255, .09);

  --fg:       #f2f0ec;
  --fg-2:     rgba(242, 240, 236, .60);
  --fg-3:     rgba(242, 240, 236, .46);

  --amber:    #e6a94b;
  --on-amber: #16130d;

  --r-panel:  14px;
  --r-pill:   999px;

  --ease:     cubic-bezier(.16, 1, .3, 1);
  --gutter:   20px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--fg);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans CJK SC",
               "Source Han Sans SC", "Microsoft YaHei", -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* 极低强度的背景层次，避免纯平黑 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(230, 169, 75, .07), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(255, 255, 255, .03), transparent 70%);
  z-index: 0;
}

.stage {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: max(24px, env(safe-area-inset-top)) var(--gutter)
           calc(24px + env(safe-area-inset-bottom));
  animation: screen-in .5s var(--ease) both;
}
.screen[hidden] { display: none; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 接通前 ---------- */

.screen-idle { overflow-y: auto; }

.idle-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-bottom: 6%;
}

[data-anim] { animation: rise .7s var(--ease) both; }
[data-anim="1"] { animation-delay: .04s; }
[data-anim="2"] { animation-delay: .12s; }
[data-anim="3"] { animation-delay: .20s; }
[data-anim="4"] { animation-delay: .28s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.portrait { position: relative; width: 96px; height: 96px; }

.breath {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(230, 169, 75, .5);
  animation: breath 4.6s var(--ease) infinite;
}
@keyframes breath {
  0%   { transform: scale(.98); opacity: .55; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

.photo {
  margin: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(150deg, #24211c, #141315);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
  display: grid;
  place-items: center;
  flex: none;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mono-fallback {
  font-size: 30px;
  font-weight: 300;
  color: var(--amber);
  letter-spacing: .01em;
  user-select: none;
}

.identity { margin-top: 26px; }

h1 {
  margin: 0;
  font-size: clamp(28px, 7.4vw, 34px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.tagline {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--fg-3);
  letter-spacing: .01em;
}

.brief {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-2);
  max-width: 30em;
}

.actions { width: 100%; flex: none; }

.note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--fg-3);
  text-align: center;
}

/* ---------- 按钮 ---------- */

.btn {
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), opacity .18s var(--ease),
              background-color .18s var(--ease);
}
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.btn-primary { background: var(--amber); color: var(--on-amber); }
.btn-primary:hover { background: #efb65c; }
.btn-primary:disabled { opacity: .55; cursor: default; transform: none; }

.btn-ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--line);
}
.btn-ghost:hover { color: var(--fg); border-color: rgba(255, 255, 255, .2); }

/* ---------- 通话中 ---------- */

.bar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 16px;
}
.bar-id { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }

.bar-name { font-size: 15px; font-weight: 500; }

.bar-status {
  font-size: 13px;
  color: var(--fg-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-time {
  font-size: 15px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  flex: none;
}

.visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: 8px 0 4px;
  flex: none;
}

/* 短屏上让声波环让位给字幕 */
#viz {
  width: min(300px, 74vw, 34dvh);
  height: min(300px, 74vw, 34dvh);
  display: block;
}

.photo-sm {
  position: absolute;
  width: min(118px, 29vw, 13.4dvh);
  height: min(118px, 29vw, 13.4dvh);
}
.photo-sm .mono-fallback { font-size: 34px; }

/* ---------- 字幕 ---------- */

.feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px);
}
.feed::-webkit-scrollbar { display: none; }

.feed-static { -webkit-mask-image: none; mask-image: none; padding-top: 4px; }

.line {
  font-size: 15px;
  line-height: 1.72;
  max-width: 88%;
  white-space: pre-wrap;
  word-break: break-word;
  animation: line-in .38s var(--ease) both;
}

@keyframes line-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 分身：满亮度，无容器 */
.line-them { color: var(--fg); align-self: flex-start; }

/* 你：靠右，轻底色，无描边 */
.line-me {
  align-self: flex-end;
  color: var(--fg-2);
  background: rgba(255, 255, 255, .05);
  padding: 9px 15px;
  border-radius: var(--r-panel);
}
.line-interim { opacity: .5; }

/* 红包口令。全页唯一一次把强调色用在内容上，就该给这一下 */
.reward {
  align-self: stretch;
  margin: 4px 0;
  padding: 16px 18px;
  border-radius: var(--r-panel);
  background: rgba(230, 169, 75, .10);
  box-shadow: inset 0 0 0 1px rgba(230, 169, 75, .32);
  cursor: pointer;
  animation: reward-in .5s var(--ease) both;
}
.reward:active { transform: scale(.99); }

@keyframes reward-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.reward-title {
  font-size: 13px;
  color: var(--amber);
  letter-spacing: .04em;
}

.reward-code {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: .04em;
  word-break: break-all;
}

.reward-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--fg-2);
}

/* ---------- 结束 ---------- */

.screen-end { justify-content: flex-start; }

/* 没有对话记录时（比如根本没接通），把那句话摆到视线中间 */
.screen-end.is-bare { justify-content: center; }
.screen-end.is-bare .feed-static { flex: none; }
.screen-end.is-bare .end-line { text-align: center; }
.screen-end.is-bare .btn { margin-top: 28px; }

.end-line {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--fg-3);
}

.screen-end .btn { margin-top: 20px; }

/* ---------- 无障碍 ---------- */

@media (prefers-reduced-motion: reduce) {
  .breath { animation: none; opacity: .28; }
  [data-anim], .screen, .line { animation: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}