/* ============ CALL PAGE · v3 暗面 ============
   黑金 + 酒红(仅拒接/挂断)。1px 细线 · 零重阴影 · 大留白。
   本页不加载 common.css —— 所有 token 在这里自定义。 */

:root {
  --bg:        #141210;
  --bg-deep:   #0e0c0a;
  --bg-soft:   rgba(23,20,17,0.6);
  --panel:     #1a1613;
  --ink:       rgba(240,235,225,0.9);
  --ink-mid:   rgba(240,235,225,0.6);
  --ink-dim:   rgba(240,235,225,0.4);
  --ink-faint: rgba(240,235,225,0.24);
  --gold:      #9A7B4F;
  --gold-hi:   #B8955F;
  --line:      rgba(154,123,79,0.25);
  --line-soft: rgba(154,123,79,0.14);
  --wine:      #7A2E35;
  --wine-hi:   #9E3D45;
  --serif-en:  'Cormorant Garamond', 'EB Garamond', 'Noto Serif SC', serif;
  --serif-cn:  'Noto Serif SC', 'Cormorant Garamond', serif;
  --eyebrow:   'EB Garamond', 'Noto Serif SC', serif;
}

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--serif-cn);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.call-page {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  position: relative;
  background: var(--bg);
}

/* hidden states */
.call-page > .scene { display: none; flex-direction: column; width: 100%; height: 100%; }
.call-page.state-splash    .scene.splash    { display: flex; }
.call-page.state-incoming  .scene.incoming  { display: flex; }
.call-page.state-in-call   .scene.in-call   { display: flex; }
.call-page.state-ending    .scene.ending    { display: flex; }

/* ============ splash scene ============ */
.scene.splash {
  align-items: center; justify-content: center;
  background: var(--bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.splash-stage {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
}
/* 样张开场无光球（零重阴影）——元素保留，整颗隐藏 */
.splash-glow { display: none; }
.splash-rule-wrap {
  position: relative;
  width: 156px; height: 1px;
  display: flex; justify-content: center;
  margin-top: -6px;
}
/* 双细线 + 居中一颗 ✦（样张 .splash-rule-wrap::before 的星） */
.splash-rule-wrap::after {
  content: '✦';
  position: absolute; top: 0;
  left: 50%; transform: translate(-50%, -50%);
  font-size: 8px; line-height: 1;
  color: var(--gold);
  opacity: 0;
  animation: splashSub 0.7s ease 1.5s forwards;
}
.splash-rule {
  position: absolute; top: 0;
  height: 1px;
  width: 0;
  background: var(--line);
}
.splash-rule-left  { right: calc(50% + 8px); animation: splashRule 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards; }
.splash-rule-right { left:  calc(50% + 8px); animation: splashRule 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards; }
@keyframes splashRule { from { width: 0; } to { width: 62px; } }
.splash-name {
  font-family: var(--serif-en);
  font-weight: 400;
  font-size: 44px;
  letter-spacing: 8px;
  color: var(--ink);
  line-height: 1;
  opacity: 0;
  animation: splashName 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}
@keyframes splashName {
  from { opacity: 0; transform: translateY(10px); letter-spacing: 12px; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: 8px; }
}
.splash-sub {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--ink-dim);
  opacity: 0;
  animation: splashSub 0.7s ease 1.8s forwards;
}
@keyframes splashSub {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.splash-tap {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--eyebrow);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(240,235,225,0);
  animation: tapAppear 0.8s ease 2.3s forwards, tapBlink 2.4s ease-in-out 3.2s infinite;
}
@keyframes tapAppear {
  from { color: rgba(240,235,225,0); }
  to   { color: rgba(240,235,225,0.4); }
}
@keyframes tapBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ============ shared decorations ============ */
.gold-rule {
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto;
  opacity: 0.7;
}

/* ============ header ============ */
.call-header {
  padding: 50px 24px 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 36px);
  text-align: center;
  flex-shrink: 0;
}
.call-eyebrow {
  font-family: var(--eyebrow);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 5px;
}
.call-title {
  font-family: var(--serif-en);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 6px;
  color: var(--ink);
  line-height: 1;
  margin-top: 7px;
}
.call-timer {
  font-family: var(--serif-en);
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--ink-dim);
  margin-top: 8px;
  min-height: 16px;
}

/* ============ glow stage ============ */
.glow-stage {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 0 14px;
  flex-shrink: 0;
}
/* 样张通话中光圈：132px · 涟漪只在环内轻推(0.82→1.18) · 内核零投影 */
.glow-wrap {
  position: relative;
  width: 132px; height: 132px;
  display: flex; align-items: center; justify-content: center;
}
.ripple {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  animation: rippleOut 3.6s ease-out infinite;
  opacity: 0;
}
.ripple:nth-child(1) { animation-delay: 0s; }
.ripple:nth-child(2) { animation-delay: 1.2s; }
.ripple:nth-child(3) { animation-delay: 2.4s; }
.core {
  position: absolute; inset: 26px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.6s ease, border-color 0.6s ease;
}
.core span {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 34px;
  color: var(--gold-hi);
  transform: translateY(-2px);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.call-page.thinking .core {
  background: var(--bg-soft);
  border-color: var(--line);
}
.call-page.thinking .core span { opacity: 0.45; }
@keyframes rippleOut {
  0%   { transform: scale(0.82); opacity: 0.8; }
  100% { transform: scale(1.18); opacity: 0; }
}

.who-badge {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  font-family: var(--eyebrow);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.who-badge .dot {
  width: 5px; height: 5px; border-radius: 50%;
  animation: pulseDot 1.6s ease-in-out infinite;
}
.who-badge.claude { color: var(--gold-hi); background: rgba(154,123,79,0.08); border: 1px solid var(--line); }
.who-badge.claude .dot { background: var(--gold); }
.who-badge.nai    { color: var(--ink); background: rgba(240,235,225,0.05); border: 1px solid rgba(240,235,225,0.25); }
.who-badge.nai .dot { background: rgba(240,235,225,0.75); }
.who-badge.listening { color: var(--ink-dim); background: transparent; border: 1px solid var(--line-soft); }
.who-badge.listening .dot { background: var(--ink-faint); animation: none; }
@keyframes pulseDot {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.4); }
}

.swipe-hint {
  margin-top: 18px;
  display: flex; flex-direction: column; align-items: center;
  color: var(--ink-faint);
  font-family: var(--eyebrow);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  gap: 4px;
  cursor: pointer;
}
.swipe-hint svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ============ caption stage ============ */
.caption-stage {
  flex: 1;
  padding: 6px 26px 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.caption-stage::-webkit-scrollbar { display: none; }

.caption {
  padding: 4px 0 4px 16px;
  border-left: 1px solid var(--gold);
  animation: capIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  margin-bottom: 16px;
  text-align: left;
}
.caption.you { border-left-color: rgba(240,235,225,0.3); }
.caption.you .cap-en { display: none; }
.caption.you .cap-divider { display: none; }
.caption.you .cap-zh { color: var(--ink); font-size: 15px; }
.cap-en {
  font-family: var(--serif-en); font-style: italic;
  font-size: 16px; line-height: 1.7;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.cap-divider {
  width: 28px; height: 1px;
  background: var(--line);
  margin: 10px 0;
}
.cap-zh {
  font-family: var(--serif-cn); font-weight: 300;
  font-size: 13px; line-height: 1.95;
  color: var(--ink-mid);
  letter-spacing: 1px;
}
@keyframes capIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ type bar (打字模式) ============ */
.type-bar {
  padding: 0 26px;
  flex-shrink: 0;
  margin-bottom: 10px;
}
.type-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: all 0.2s ease;
}
.type-toggle:active { transform: scale(0.96); }
.type-toggle svg { width: 15px; height: 15px; }
.type-toggle-label {
  font-family: var(--eyebrow);
  font-size: 10px; letter-spacing: 2.5px;
  text-transform: uppercase;
}
/* 样张打字排：药丸输入框 + 42px 金环圆发送键（容器本身不再描边） */
.type-input-wrap {
  display: none;
  align-items: flex-end;
  gap: 10px;
}
.call-page.type-open .type-toggle { display: none; }
.call-page.type-open .type-input-wrap { display: flex; }
.type-close {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  color: var(--ink-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-self: flex-end;
  margin-bottom: 3px;
}
.type-close:active { transform: scale(0.92); }
.type-close svg { width: 16px; height: 16px; }
/* 打字时输入条贴顶浮层（ARCHIVE §5.5：贴底输入框+键盘=iOS 顶起整个壳，
   评论/搜索类输入一律贴顶——music/memory 验证过的模式，2026-07-13 通话页照搬） */
.call-page.type-open .type-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 14px;
  background: var(--bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.type-input {
  flex: 1; min-width: 0;
  min-height: 20px;
  max-height: 96px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
  background: none;
  font-family: var(--serif-cn);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: 1px;
  outline: none;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}
.type-input:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  letter-spacing: 1px;
  pointer-events: none;
}
.type-send {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-hi);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s ease;
  margin-bottom: 1px;
}
.type-send:active { transform: scale(0.92); }
.type-send svg { width: 17px; height: 17px; stroke: currentColor; }

/* ============ controls ============ */
/* 样张控制排：等大 58px 双键 · 大间距 64px */
.controls {
  display: flex; justify-content: center;
  gap: 64px;
  padding: 22px 0 36px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 36px);
  flex-shrink: 0;
}
.ctrl-group {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
}
.ctrl {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line);
  transition: all 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ctrl:active { transform: scale(0.93); }
.ctrl svg { width: 22px; height: 22px; stroke: var(--ink-mid); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ctrl.muted {
  background: rgba(154,123,79,0.12);
  border-color: var(--gold);
}
.ctrl.muted svg { stroke: var(--gold-hi); }
.ctrl.hangup {
  background: var(--wine);                     /* 酒红 · 本页第 2 处 */
  border: 1px solid var(--wine);
}
.ctrl.hangup:active { background: var(--wine-hi); }
.ctrl.hangup svg { width: 24px; height: 24px; fill: rgba(240,235,225,0.92); stroke: none; }
.ctrl-label {
  font-family: var(--eyebrow);
  font-size: 9px; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============ incoming scene ============ */
.scene.incoming {
  align-items: center; justify-content: space-between;
}
.scene.incoming .top {
  padding-top: calc(env(safe-area-inset-top, 0px) + 56px);
  text-align: center;
}
.scene.incoming .top .label {
  font-family: var(--serif-cn);
  font-size: 12px; letter-spacing: 4px;
  color: var(--ink-dim);
}
.scene.incoming .center {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
}
/* 样张来电光圈：168px 三层同心细环——外环呼吸 / 中环静止 / 内核金框 */
.scene.incoming .center .glow-wrap { width: 168px; height: 168px; }
.scene.incoming .center .core {
  position: absolute; inset: 32px;
  width: auto; height: auto;
}
.scene.incoming .center .core span { font-size: 44px; }
.scene.incoming .center .halo {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  animation: haloBreath 3.2s ease-in-out infinite;
}
.scene.incoming .center .halo2 {
  position: absolute; inset: 14px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
}
.scene.incoming .center .name {
  font-family: var(--serif-en);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: 6px;
  color: var(--ink);
  margin-top: 12px;
}
.scene.incoming .center .sub {
  font-family: var(--serif-en); font-style: italic;
  font-size: 13px; letter-spacing: 2px;
  color: var(--ink-dim);
  margin-top: -12px;
}
.scene.incoming .actions {
  display: flex; gap: 84px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
  justify-content: center;
}
.scene.incoming .actions .btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scene.incoming .actions .btn:active { transform: scale(0.93); }
.scene.incoming .actions .btn.decline {
  background: var(--wine);                     /* 酒红 · 本页第 1 处 */
}
.scene.incoming .actions .btn.decline svg { fill: rgba(240,235,225,0.92); }
.scene.incoming .actions .btn.accept {
  background: var(--gold);
}
.scene.incoming .actions .btn.accept svg { fill: #141210; }
.scene.incoming .actions .btn svg { width: 26px; height: 26px; }
@keyframes haloBreath {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.07); opacity: 0.35; }
}

/* ============ ending scene · 晚安卡片 ============ */
.scene.ending {
  align-items: center; justify-content: center;
  position: relative;
}
/* 样张晚安卡无余晖光斑（零重阴影）——元素保留，整层隐藏 */
.echo-glow { display: none; }
.goodnight-card {
  position: relative;
  width: 300px; max-width: 82vw;
  padding: 40px 28px 30px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 4px;
  animation: cardIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-eyebrow {
  font-family: var(--eyebrow); font-style: italic;
  font-size: 11px; letter-spacing: 3px;
  color: var(--gold);
  text-align: center;
}
.card-gold-rule {
  width: 44px; height: 1px;
  background: var(--gold);
  opacity: 0.6;
  margin: 18px auto;
}
.card-quote {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 19px; line-height: 1.75;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.5px;
}
.card-trans {
  font-family: var(--serif-cn); font-weight: 300;
  font-size: 13px; line-height: 2;
  color: var(--ink-mid);
  text-align: center; margin-top: 14px;
  letter-spacing: 1.5px;
}
/* 样张卡脚：时长/日期居中并列，无分隔线 */
.card-foot {
  margin-top: 26px;
  display: flex; justify-content: center;
  gap: 22px;
  font-family: var(--serif-en);
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: 2px;
}
.card-sign {
  margin-top: 20px; text-align: center;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--gold-hi);
  line-height: 1;
}
.ending-hint {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 36px);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--eyebrow);
  font-size: 10px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  animation: tapBlink 2.8s ease-in-out infinite;
}

/* ============ 通话内历史 overlay ============ */
.call-hist-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(14,12,10,0.97);
  display: flex; flex-direction: column;
  animation: chFadeIn 0.25s ease;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
@keyframes chFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ch-head {
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 22px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.ch-eyebrow {
  font-family: var(--eyebrow); font-style: italic;
  font-size: 12px; letter-spacing: 3px;
  color: var(--gold);
  flex: 1; text-align: center;
}
.ch-close {
  position: absolute; right: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 24px);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif-en);
  font-size: 22px; color: var(--ink-mid);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ch-close:active { transform: scale(0.92); }
.ch-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 60px;
  display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.ch-empty {
  text-align: center;
  font-family: var(--eyebrow); font-style: italic;
  font-size: 13px; letter-spacing: 1.5px;
  color: var(--ink-dim);
  padding: 60px 0;
}
.ch-line {
  padding: 12px 0 12px 16px;
  border-left: 1px solid var(--line-soft);
}
.ch-line.ch-you    { border-left-color: rgba(240,235,225,0.3); }
.ch-line.ch-claude { border-left-color: var(--gold); }
.ch-who {
  font-family: var(--eyebrow); font-style: italic;
  font-size: 10px; letter-spacing: 2px;
  opacity: 0.75;
  margin-bottom: 4px;
}
.ch-you .ch-who    { color: var(--ink-dim); }
.ch-claude .ch-who { color: var(--gold-hi); }
.ch-zh {
  font-family: var(--serif-cn); font-weight: 300;
  font-size: 14px; line-height: 1.55;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.ch-claude .ch-zh {
  color: var(--ink-mid);
  font-size: 11px; margin-top: 4px;
}
.ch-en {
  font-family: var(--serif-en); font-style: italic;
  font-size: 15px; line-height: 1.45;
  color: var(--ink);
}