/* 语音通话：压印圆章 + 三圈压凹环跟着他的声音动，实时字幕，四个按钮 */
.call { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 0 calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; --lv: 0; }
.call-top { width: 100%; padding: 0 16px; display: flex; align-items: center; }
.call-top .time { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); text-shadow: var(--deboss-text); }
.call-top .gap { width: 42px; }
.call-who { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.call-who b { font-family: var(--font-serif); font-size: 26px; font-weight: 700; }
.call-who small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* 圆章 */
.medal { position: relative; margin-top: 30px; width: min(290px, 74vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex: none; }
.medal .ring { position: absolute; border-radius: 50%; }
.medal .r1 { inset: 0; background: var(--paper); box-shadow: var(--well-in); }
.medal .r2 { inset: 9%; background: #F1EEE7; transition: box-shadow .12s;
  /* 声音越大压得越深 */
  box-shadow:
    inset calc(var(--lx) * (3px + var(--lv) * 5px)) calc(var(--ly) * (5px + var(--lv) * 6px)) calc(10px + var(--lv) * 10px) rgba(var(--sh), calc(.16 + var(--lv) * .12)),
    inset calc(var(--lx) * 1px) calc(var(--ly) * 2px) 2px rgba(var(--sh), .16),
    inset calc(var(--lx) * -2px) calc(var(--ly) * -2px) 0 rgba(var(--hi), .95); }
.medal .r3 { inset: 17.5%; background: #EEEAE2; box-shadow: var(--well-in); }
.medal svg.arc { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; }
.medal svg.arc circle { stroke: var(--accent); }
.call.speaking .medal svg.arc { opacity: .85; animation: spin 6s linear infinite; }
.medal .disc { position: relative; width: 51%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: calc(var(--lx) * -2px) calc(var(--ly) * -2px) 0 rgba(var(--hi), .95), calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(var(--sh), .12), calc(var(--lx) * 6px) calc(var(--ly) * 10px) 16px rgba(var(--sh), .14), calc(var(--lx) * 18px) calc(var(--ly) * 30px) 56px rgba(var(--sh), .18);
  transform: scale(calc(1 + var(--lv) * .03)); transition: transform .12s; }
.medal .disc span { font-family: var(--font-serif); font-size: clamp(44px, 15vw, 58px); font-weight: 700; color: #ECE8DF; text-shadow: calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(var(--hi), .95), calc(var(--lx) * 1px) calc(var(--ly) * 2px) 2px rgba(var(--sh), .28); }
.medal .disc img { width: 100%; height: 100%; object-fit: cover; }
.call.connecting .medal .disc { animation: breathe-disc 1.6s ease-in-out infinite; }
@keyframes breathe-disc { 50% { transform: scale(.97); } }

/* 状态牌 */
.call-state { margin-top: 22px; height: 32px; padding: 0 14px; border-radius: 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); flex: none; }
.call-state .bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.call-state .bars i { width: 3px; border-radius: 2px; background: var(--accent); height: 4px; transition: height .12s; }
.call.speaking .call-state .bars i:nth-child(1) { height: calc(4px + var(--lv) * 4px); }
.call.speaking .call-state .bars i:nth-child(2) { height: calc(4px + var(--lv) * 8px); }
.call.speaking .call-state .bars i:nth-child(3) { height: calc(4px + var(--lv) * 5px); }
.call.speaking .call-state .bars i:nth-child(4) { height: calc(4px + var(--lv) * 7px); }
.call.listening .call-state .bars i { background: var(--ok); animation: breathe 1.2s ease-in-out infinite; }
.call.listening .call-state .bars i:nth-child(2) { animation-delay: .15s; }
.call.listening .call-state .bars i:nth-child(3) { animation-delay: .3s; }
.call.listening .call-state .bars i:nth-child(4) { animation-delay: .45s; }

/* 字幕 */
.caps { margin-top: 22px; width: calc(100% - 40px); max-width: 350px; border-radius: 20px; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 92px; flex: none; }
.caps .ln { display: flex; gap: 8px; line-height: 1.6; font-size: 13px; color: var(--ink-3); }
.caps .ln.new { animation: emboss .4s var(--ease-paper); }
.caps .ln.from-him { font-size: 15px; color: var(--ink); line-height: 1.65; }
.caps .ln b { flex: none; font-weight: 400; font-size: 13px; color: var(--ink-3); padding-top: 1px; }
.caps .ln em { font-style: normal; color: var(--accent-ink); }
.caps-tip { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); flex: none; }
.call.no-caps .caps, .call.no-caps .caps-tip { visibility: hidden; }

/* 按钮 */
.call-btns { margin-top: auto; padding-top: 24px; width: 100%; max-width: 390px; padding-left: 30px; padding-right: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.call-btns label { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.call-btns button { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.call-btns button svg { width: 22px; height: 22px; }
.call-btns button[aria-pressed="true"] { background: var(--well); box-shadow: var(--well-in); color: var(--accent-ink); }
.call-btns .hang { background: var(--err-ink); color: #fff; box-shadow: var(--raise); }
.call-btns .hang svg { width: 24px; height: 24px; transform: rotate(135deg); }

/* 收起后浮在聊天页顶上的小条 */
.call-pill { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); z-index: 60; transform: translateX(-50%); height: 34px; padding: 0 14px; border-radius: 17px; display: flex; align-items: center; gap: 8px; font-size: 13px; text-decoration: none; color: var(--ink); background: var(--paper); box-shadow: var(--raise); animation: rise .3s var(--ease-paper); }
.call-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: breathe 1.2s infinite; }
.call-pill .mono { font-size: 12px; color: var(--ink-3); }
.shell.open ~ .call-pill { display: none; }