/* 语音通话。2026-10-02 从 index.html 拆出来；加载顺序见 index.html 的 <link>，前后顺序就是层叠顺序，别乱调 */
  /* ── 语音通话：雨夜 ──────────────────────────────────────────────
     打电话的时候天黑下来：深墨蓝到暮色玫瑰，顶上一点月光，背景有很淡的雨丝。
     头像外一圈圈雨滴涟漪代替声纹竖条，声音越大涟漪越明显(--ring-level，voice-call.js 写)。
     整页从底下滑上来，不做淡入——半透明的时候会和聊天页叠在一起。 */
  .call-overlay{ position:fixed; inset:0; z-index:150; pointer-events:none; }
  .call-scrim{ display:none; }
  .call-sheet{
    position:absolute; inset:0; overflow:hidden;
    display:flex; flex-direction:column; align-items:center;
    padding:calc(env(safe-area-inset-top) + 56px) 24px calc(env(safe-area-inset-bottom) + 5vh);
    text-align:center; color:#F2F0F5;
    background:
      radial-gradient(64% 30% at 50% -4%, rgba(214,222,240,.24), transparent 72%),
      radial-gradient(90% 42% at 50% 104%, rgba(205,150,162,.34), transparent 70%),
      linear-gradient(180deg, #222B44 0%, #303B59 40%, #4A4B68 72%, #6A5A6D 100%);
    transform:translateY(100%); pointer-events:none;
    transition:transform .42s var(--ease-soft);
    will-change:transform;
  }
  .call-overlay.open .call-sheet{ transform:none; pointer-events:auto; }

  .call-rain{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
  .call-rain i{
    position:absolute; top:-12%; width:1px; height:var(--len, 56px);
    background:linear-gradient(180deg, transparent, rgba(236,240,250,.24));
    transform:rotate(9deg);
    animation:callDrop var(--dur, 1.4s) linear var(--delay, 0s) infinite;
  }
  @keyframes callDrop{ to{ transform:rotate(9deg) translateY(125vh); } }
  @media (prefers-reduced-motion:reduce){ .call-rain{ display:none; } }

  .call-minimize-top{
    position:absolute; z-index:2; top:calc(env(safe-area-inset-top) + 14px); left:16px;
    width:36px; height:36px; border-radius:50%; padding:0; cursor:pointer;
    border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08);
    color:rgba(240,240,248,.82); display:grid; place-items:center;
  }
  .call-minimize-top:active{ transform:scale(.92); }
  .call-minimize-top svg{ width:18px; height:18px; display:block; }

  /* 头像 + 涟漪 */
  /* 头像那一组 + 我说的话，上下用两个 auto 边距把多出来的空白平分，整组落在按钮上方区域的正中 */
  .call-avatar-stage{ position:relative; z-index:1; display:grid; place-items:center; width:240px; height:220px; flex:none; margin-top:auto; }
  .call-vu{ display:none; }
  .call-avatar-ring{ --ring-level:0; position:relative; width:120px; height:120px; display:grid; place-items:center; }
  .call-avatar-ring::before{
    content:""; position:absolute; inset:-26px; border-radius:50%;
    background:radial-gradient(circle, rgba(214,222,240,.30), transparent 68%);
    opacity:calc(.55 + var(--ring-level) * .45);
    transform:scale(calc(1 + var(--ring-level) * .14));
    transition:transform .14s linear, opacity .14s linear;
  }
  .call-ripples{ position:absolute; inset:0; pointer-events:none; opacity:calc(.28 + var(--ring-level, 0) * .72); transition:opacity .16s linear; }
  .call-ripples i{
    position:absolute; inset:0; border-radius:50%;
    border:1px solid rgba(232,236,248,.6);
    animation:callRipple 3.6s cubic-bezier(.2,.6,.35,1) infinite;
  }
  .call-ripples i:nth-child(2){ animation-delay:-1.2s; }
  .call-ripples i:nth-child(3){ animation-delay:-2.4s; }
  @keyframes callRipple{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.95); opacity:0; } }
  @media (prefers-reduced-motion:reduce){ .call-ripples i{ animation:none; opacity:.3; } }
  .call-avatar-img, .incoming-call-avatar{
    position:relative; width:120px; height:120px; border-radius:50%;
    background:#F6F4F7 var(--avatar-default) center/cover no-repeat;
    box-shadow:0 0 0 1px rgba(255,255,255,.32), 0 16px 40px rgba(10,14,30,.45);
  }

  .call-name{
    position:relative; z-index:1;
    font-family:var(--font-cn); font-weight:500; font-size:22px; letter-spacing:.14em; color:#F5F3F7;
    margin-bottom:8px;
  }
  .call-status{
    position:relative; z-index:1; display:flex; align-items:baseline; justify-content:center; gap:8px;
    font-family:var(--font-cn); font-size:12px; letter-spacing:.18em; color:rgba(236,238,246,.6);
  }
  .call-timer{ font-family:var(--font-en); font-size:13.5px; letter-spacing:.08em; }

  /* 我说的话：一句一句像歌词那样亮起来 */
  .call-quote{
    position:relative; z-index:1; flex:0 1 auto; min-height:110px; max-height:36vh; width:100%;
    display:flex; align-items:center; justify-content:center; margin:4vh 0 0;
  }
  .call-quote-text{
    max-height:100%; overflow-y:auto; scrollbar-width:none;
    font-family:var(--font-cn); font-size:19px; line-height:1.75; letter-spacing:.04em;
    color:rgba(248,246,250,.95); text-wrap:balance;
  }
  .call-quote-text::-webkit-scrollbar{ display:none; }
  .call-quote-text.hint{ font-size:15px; letter-spacing:.14em; color:rgba(236,238,246,.55); }
  .call-quote-text.lyric-mode{ display:flex; flex-direction:column; gap:10px; }
  .lyric-line{ display:block; color:rgba(240,240,248,.34); transition:color .45s var(--ease-soft); }
  .lyric-line.active{ color:rgba(250,248,252,.98); }
  .call-dots{ display:inline-flex; align-items:center; gap:4px; }
  .call-dots i{ width:4px; height:4px; border-radius:50%; background:currentColor; animation:typingDot 1.25s ease-in-out infinite; }
  .call-dots i:nth-child(2){ animation-delay:.16s; }
  .call-dots i:nth-child(3){ animation-delay:.32s; }
  .call-dots-quote{ margin-left:8px; vertical-align:middle; }

  /* 她说的话：下面淡淡一行，不套框 */
  .call-transcript-bar{
    position:relative; z-index:1; width:100%; min-height:22px; max-height:46px; overflow:hidden;
    font-family:var(--font-cn); font-size:13.5px; line-height:1.65; color:rgba(236,238,246,.62);
    margin:auto 0 4vh; padding-top:14px;
  }
  .call-transcript-bar .caret{
    display:inline-block; width:1px; height:1em; margin-left:3px; vertical-align:-2px;
    background:rgba(236,238,246,.7); animation:callCaret 1s step-start infinite;
  }
  @keyframes callCaret{ 50%{ opacity:0; } }

  /* 底部一排：静音 · 挂断 · 私密 */
  .call-controls{ position:relative; z-index:1; width:100%; max-width:330px; display:flex; align-items:flex-start; justify-content:space-between; padding:0 6px; }
  .call-ctrl-btn, .call-hangup-slot{
    display:flex; flex-direction:column; align-items:center; gap:9px;
    padding:0; border:0; background:none; cursor:pointer;
    font-family:var(--font-cn); font-size:11.5px; letter-spacing:.1em; color:rgba(240,240,248,.62);
  }
  .call-ctrl-btn > svg{
    box-sizing:content-box; width:23px; height:23px; padding:18px; margin:6px 0; border-radius:50%;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:#F2F0F6;
    transition:background .2s var(--ease-soft), color .2s var(--ease-soft), transform .15s var(--ease-soft);
  }
  .call-ctrl-btn:active > svg{ transform:scale(.92); }
  .call-ctrl-btn.active > svg{ background:rgba(250,248,252,.92); border-color:transparent; color:#303B59; }
  .call-ctrl-btn .mute-slash{ opacity:0; transition:opacity .2s; }
  .call-ctrl-btn.active .mute-slash{ opacity:1; }
  .call-hangup, .incoming-call-btn{
    width:73px; height:73px; border-radius:50%; border:0; padding:0; cursor:pointer;
    display:grid; place-items:center; transition:transform .15s var(--ease-soft);
  }
  .call-hangup:active, .incoming-call-btn:active{ transform:scale(.92); }
  .call-hangup, .incoming-call-btn.decline{ background:#C98790; color:#fff; box-shadow:0 12px 30px rgba(201,135,144,.42); }
  .call-hangup svg, .incoming-call-btn svg{ width:30px; height:30px; display:block; }
  .call-hangup svg, .incoming-call-btn.decline svg{ transform:rotate(135deg); }

  /* 收起后：顶栏下面一枚深色小胶囊，点一下展开 */
  .call-mini{
    display:none; position:fixed; z-index:151; pointer-events:auto; cursor:pointer;
    top:calc(env(safe-area-inset-top) + 66px); left:50%; transform:translateX(-50%);
    align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
    background:rgba(255,255,255,.78); color:#6E5A5C; border:1px solid rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
    font-family:var(--font-cn); font-size:12.5px; letter-spacing:.06em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(64,76,112,.14);
  }
  .call-mini:active{ transform:translateX(-50%) scale(.97); }
  .call-mini-dot{ width:6px; height:6px; border-radius:50%; background:#BDA0A1; animation:callMiniPulse 1.6s ease-in-out infinite; }
  @keyframes callMiniPulse{ 50%{ opacity:.35; } }
  .call-mini-timer{ font-family:var(--font-en); letter-spacing:.06em; opacity:.8; }
  .call-overlay.open.minimized{ pointer-events:none; }
  .call-overlay.open.minimized .call-sheet{ transform:translateY(100%); pointer-events:none; }
  .call-overlay.open.minimized .call-mini{ display:flex; }

  /* 来电：同一个雨夜，涟漪一直轻轻荡开像在响铃；接听是珍珠白，拒绝是暗玫瑰 */
  .incoming-call-overlay{ z-index:151; }
  .incoming-call-overlay .call-sheet{ padding-top:calc(env(safe-area-inset-top) + 13vh); }
  .call-caption{
    position:relative; z-index:1; display:flex; align-items:center; gap:9px; margin-bottom:26px;
    font-family:var(--font-en); font-style:italic; font-size:14px; letter-spacing:.16em; color:rgba(236,238,246,.6);
  }
  .call-caption .call-star{ display:grid; place-items:center; color:rgba(236,238,246,.5); }
  .call-caption .call-star svg{ width:14px; height:14px; display:block; }
  .incoming-ring{ position:relative; z-index:1; display:grid; place-items:center; width:120px; height:120px; margin:38px 0 46px; }
  .incoming-ring .call-ripples{ opacity:.85; }
  .incoming-call-title{
    position:relative; z-index:1;
    font-family:var(--font-cn); font-weight:500; font-size:24px; letter-spacing:.12em; color:#F5F3F7; margin-bottom:12px;
  }
  .incoming-call-text{
    position:relative; z-index:1; max-width:290px;
    font-family:var(--font-cn); font-size:14.5px; line-height:1.85; color:rgba(236,238,246,.72);
  }
  .incoming-call-actions{ position:relative; z-index:1; display:flex; gap:76px; margin-top:auto; }
  .incoming-call-slot{ display:flex; flex-direction:column; align-items:center; gap:11px; }
  .incoming-call-label{ font-family:var(--font-cn); font-size:12px; letter-spacing:.12em; color:rgba(236,238,246,.62); }
  .incoming-call-btn.accept{
    background:#F6F3F5; color:#303B59;
    box-shadow:0 12px 30px rgba(10,14,30,.35);
    animation:acceptGlow 2s ease-in-out infinite;
  }
  @keyframes acceptGlow{
    0%,100%{ box-shadow:0 12px 30px rgba(10,14,30,.35), 0 0 0 0 rgba(246,243,245,.35); }
    50%{ box-shadow:0 12px 30px rgba(10,14,30,.35), 0 0 0 14px rgba(246,243,245,0); }
  }
  @media (prefers-reduced-motion:reduce){ .incoming-call-btn.accept{ animation:none; } }
  /* 白天(6:00–18:00)：同一个雨天，只是亮着。voice-call.js 给 .call-overlay 加 .is-day */
  .call-overlay.is-day .call-sheet{
    color:#2B2F36;
    background:
      radial-gradient(64% 30% at 50% -4%, rgba(255,255,255,.75), transparent 72%),
      radial-gradient(90% 42% at 50% 104%, rgba(255,204,204,.38), transparent 70%),
      linear-gradient(180deg, #DCE4F1 0%, #E6E8F2 45%, #EEE7EE 75%, #F5E8EA 100%);
  }
  .call-overlay.is-day .call-rain i{ background:linear-gradient(180deg, transparent, rgba(90,110,150,.22)); }
  .call-overlay.is-day .call-minimize-top{ border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.5); color:#5E6C86; }
  .call-overlay.is-day .call-avatar-ring::before{ background:radial-gradient(circle, rgba(255,255,255,.75), transparent 68%); }
  .call-overlay.is-day .call-ripples i{ border-color:rgba(94,108,134,.42); }
  .call-overlay.is-day .call-avatar-img,
  .call-overlay.is-day .incoming-call-avatar{ box-shadow:0 0 0 1px rgba(255,255,255,.85), 0 16px 40px rgba(64,76,112,.18); }
  .call-overlay.is-day .call-name,
  .call-overlay.is-day .incoming-call-title{ color:#2B2F36; }
  .call-overlay.is-day .call-status,
  .call-overlay.is-day .call-caption,
  .call-overlay.is-day .incoming-call-label,
  .call-overlay.is-day .call-ctrl-btn,
  .call-overlay.is-day .call-hangup-slot{ color:rgba(78,90,108,.72); }
  .call-overlay.is-day .call-caption .call-star{ color:rgba(78,90,108,.5); }
  .call-overlay.is-day .call-quote-text{ color:#2B2F36; }
  .call-overlay.is-day .call-quote-text.hint{ color:rgba(78,90,108,.6); }
  .call-overlay.is-day .lyric-line{ color:rgba(43,47,54,.3); }
  .call-overlay.is-day .lyric-line.active{ color:#2B2F36; }
  .call-overlay.is-day .call-transcript-bar{ color:rgba(78,90,108,.75); }
  .call-overlay.is-day .call-transcript-bar .caret{ background:rgba(78,90,108,.7); }
  .call-overlay.is-day .call-ctrl-btn > svg{ background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.75); color:#4A5675; }
  .call-overlay.is-day .call-ctrl-btn.active > svg{ background:#BDA0A1; border-color:transparent; color:#fff; }
  .call-overlay.is-day .incoming-call-text{ color:rgba(43,47,54,.7); }
  .call-overlay.is-day .incoming-call-btn.accept{ background:#fff; color:#9A7A7C; animation-name:acceptGlowDay; }
  @keyframes acceptGlowDay{
    0%,100%{ box-shadow:0 12px 30px rgba(64,76,112,.2), 0 0 0 0 rgba(255,255,255,.9); }
    50%{ box-shadow:0 12px 30px rgba(64,76,112,.2), 0 0 0 14px rgba(255,255,255,0); }
  }

  /* 通话中(包括收起了)顶栏的电话图标：灰粉，慢慢呼吸，提醒还连着 */
  .topbtn.call.active{ color: var(--badge); animation: callMiniPulse 1.8s ease-in-out infinite; }
  @media (prefers-reduced-motion:reduce){ .topbtn.call.active{ animation:none; } }