/* ════════════════════════════════════════════════════════════════════
   通话 + 语音条 样式（从旧版单文件 index.html 原样搬到 v2）
   来源：index.html.bak_20260903_before_v2
     · 893–918   通话系统变量（旧版挂在 :root）
     · 920–1364  通话画布 / 迷你条 / 来电卡
     · 861–866   语音条「按住说话」录音态
   搬的时候只动了三处，其余一个字没改：
     ① 旧版的变量原来挂在 :root，v2 的 :root 上已经有同名的 --accent / --bg，
        直接挂上去会把整个小家的强调色改掉 —— 所以全部收进 .call-overlay 作用域里。
     ② env(safe-area-inset-top/bottom) 换成 var(--call-safe-top/bottom)，后者优先取 v2 的
        --safe-top（v2 坑 32：WKWebView 里 env() 可能读到 0，app.js 的 guardSafeTop 会兜成 44px）。
     ③ 文件末尾「v2 接入」一节：抵消 v2 全局 button svg 规则、拨号键和话筒键的位置。
   ════════════════════════════════════════════════════════════════════ */

/* ── 变量（作用域：两张通话浮层）──
   旧版写死的是一套浅色值。v2 有日/夜两套主题，写死浅色字在夜间深底上看不见，
   所以这里默认把「字色 / 底色 / 玻璃」接到 v2 的主题变量上，跟着日夜走；尺寸、字体、缓动、
   挂断红、接听绿等保持旧版原值。
   想要通话画面固定回旧版那套浅色，把下面这一块换成文件最底下注释里的「旧版原值」即可。 */
.call-overlay{
  --font-en: "Cormorant Garamond", Georgia, serif;
  --font-cn: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --text: var(--ink);
  --text-soft: var(--muted);
  --text-faint: color-mix(in srgb, var(--muted) 78%, transparent);
  /* --accent：直接用 v2 :root 上的，不在这里重定义 */
  --accent-fg: var(--bg);
  --think-flourish: color-mix(in srgb, var(--muted) 52%, transparent);
  --think-label: var(--muted);
  --header-h: clamp(56px, 10vw, 120px);
  --side-pad: clamp(16px, 4vw, 40px);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --card-bg: var(--panel);
  --card-line: var(--line);
  --call-glass-top: var(--panel-strong);
  --call-glass-bot: var(--panel);
  --call-glass-edge: var(--glass-edge);
  --call-glass-hi: var(--glass-highlight);
  --call-glass-glow: rgba(150,172,196,.20);
  --call-glass-shadow: var(--glass-shadow);
  --call-scrim: rgba(64,82,102,.06);
  --call-hangup-bg: #cf8d92;
  --call-hangup-shadow: rgba(176,96,104,.34);
  --wall-default: var(--bg-layer, none);
  /* 旧版没有头像功能，这里是一个渐变圆。v2 有头像：有就用头像，没有就退回旧版的渐变。 */
  --avatar-default: var(--chiyan-avatar, linear-gradient(145deg, #2A3442 0%, #45566B 55%, #C4D0E4 130%));
  --call-safe-top: var(--safe-top, env(safe-area-inset-top));
  --call-safe-bottom: var(--safe-bottom, env(safe-area-inset-bottom));
  --call-scrim-bg: linear-gradient(180deg, rgba(var(--veil-rgb),.55) 0%, rgba(var(--veil-rgb),.25) 40%, rgba(var(--veil-rgb),.45) 100%);
}
/* 云端那个打来 / 打给云端：头像换成云端那张（v2 现成的写法） */
.call-overlay[data-who="cloud"]{ --chiyan-avatar: var(--chiyan-cloud-avatar); }
/* 她设了壁纸时，通话画布跟聊天页一样铺壁纸（旧版 --wall-default 取的就是聊天背景） */
body.has-wallpaper .call-overlay{
  --wall-default: linear-gradient(rgba(var(--veil-rgb),.42), rgba(var(--veil-rgb),.58)), var(--wallpaper);
}

/* ════════ 以下 920–1364 行原样 ════════ */
  /* ── Voice call (speaking overlay · 假按键 / 纯 UI,后端以后接) ── */
  .call-overlay{
    position: fixed; inset: 0; z-index: 150;
    pointer-events: none;
  }
  .call-scrim{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,.45) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
  }
  .call-overlay.open .call-scrim{ opacity: 1; }
  .call-sheet{
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start;
    padding: calc(var(--call-safe-top) + clamp(50px, 10vw, 84px)) var(--side-pad) calc(var(--call-safe-bottom) + 26px);
    text-align: center;
    background-color: var(--bg);
    background-image: var(--wall-default);
    background-size: cover; background-position: center;
    opacity: 0; pointer-events: none;
    transform: translateY(12px);
    transition: opacity .34s var(--ease-soft), transform .34s var(--ease-soft);
    overflow: hidden;
  }
  .call-overlay.open .call-sheet{ opacity: 1; pointer-events: auto; transform: translateY(0); }

  /* ── Avatar stage: 头像 + 两翼声纹 ── */
  .call-avatar-stage{
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    gap: clamp(8px, 2.2vw, 16px);
    margin-top: clamp(4px, 3vh, 30px);
    flex-shrink: 0;
  }
  .call-vu{
    --vu-level: 0;
    flex: 1 1 0; min-width: 0;
    height: clamp(70px, 17vw, 100px);
    display: flex; align-items: center;
    gap: clamp(2.5px, 0.8vw, 4px);
  }
  .call-vu-left{ flex-direction: row-reverse; }
  .call-vu i{
    flex: 0 0 auto;
    width: clamp(2px, 0.65vw, 3px);
    height: calc(100% * var(--bar, .4) * (0.46 + 0.54 * var(--vu-level)));
    min-height: 2px;
    border-radius: 99px;
    background: var(--accent);
    opacity: calc(var(--bar-op, .4) * (0.6 + 0.4 * var(--vu-level)));
    animation: callVuIdle var(--vu-dur, 1.6s) var(--ease-soft) infinite alternate;
    animation-delay: var(--vu-delay, 0s);
    will-change: transform, opacity;
  }
  @keyframes callVuIdle{ from{ transform: scaleY(.55); } to{ transform: scaleY(1); } }
  @media (prefers-reduced-motion: reduce){ .call-vu i{ animation: none; } }

  /* ── Avatar ring ── */
  .call-avatar-ring{
    --ring-level: 0;
    position: relative;
    width: clamp(128px, 37vw, 168px); height: clamp(128px, 37vw, 168px);
    border-radius: 50%;
    display: grid; place-items: center;
    flex: 0 0 auto;
    box-shadow:
      0 10px 34px rgba(40,60,78,.16),
      0 0 calc(16px + 34px * var(--ring-level)) calc(2px + 12px * var(--ring-level)) color-mix(in srgb, var(--accent) 30%, transparent);
    transition: box-shadow .14s ease;
  }
  .call-avatar-img{
    width: 100%; height: 100%;
    border-radius: 50%;
    background-image: var(--avatar-default);
    background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  }

  /* ── Name / status / timer ── */
  .call-name{
    margin-top: clamp(18px, 4vw, 28px);
    color: var(--text);
    font-family: var(--font-cn);
    font-size: clamp(27px, 7vw, 36px);
    font-weight: 500;
    line-height: 1.2;
  }
  .call-status{
    display: inline-flex; align-items: center; gap: 11px;
    color: var(--think-label);
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(13px, 1.8vw, 15.5px);
    letter-spacing: .16em;
    line-height: 1;
    margin-top: 8px;
  }
  .call-status .call-star{ color: var(--think-flourish); display: grid; place-items: center; }
  .call-status .call-star svg{ width: 16px; height: 16px; display: block; }
  .call-timer{
    font-family: var(--font-en), var(--font-cn);
    font-variant-numeric: tabular-nums;
    font-size: clamp(19px, 5vw, 25px);
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    color: var(--text-soft);
    margin-top: 9px;
  }

  /* ── Quote (the AI's last spoken line) ── */
  .call-quote{
    flex: 1 1 auto;
    min-height: 0;                 /* 让 flex 能真正约束它,长文本不再撑破/盖住头像与字幕 */
    display: flex; align-items: center; justify-content: center;
    width: min(88vw, 400px);
    padding: clamp(8px, 2vw, 18px) clamp(8px, 2vw, 16px);
    overflow: hidden;              /* 兜底:绝不溢出到相邻区域 */
  }
  .call-quote-mark{
    color: var(--text-faint);
    font-family: var(--font-en);
    font-size: clamp(40px, 9.5vw, 56px);
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
    align-self: flex-start;
    opacity: .5;
  }
  .call-quote-mark:last-child{ align-self: flex-end; }
  .call-quote-text{
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;                 /* Firefox 隐藏滚动条 */
    color: var(--text);
    font-family: var(--font-cn);
    font-size: clamp(20px, 5.2vw, 27px);
    line-height: 1.52;
    text-align: center;
    padding: 0 clamp(6px, 1.5vw, 12px);
    overflow-wrap: break-word;
  }
  .call-quote-text::-webkit-scrollbar{ display: none; }   /* WebKit 隐藏滚动条 */
  /* 仅当文字真的溢出时(由 JS 加 .clip)才底部渐隐(顶部保持清晰,因为总是从头读起,
     渐隐只用来暗示"下面还有,全文在字幕条里") */
  .call-quote-text.clip{
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .call-quote-text.hint{
    color: var(--text-soft);
    font-size: clamp(18px, 4.8vw, 24px);
  }
  .call-quote-text.lyric-mode{
    font-size: clamp(14px, 3.8vw, 19px);
    text-align: center;
  }
  .lyric-line{
    display: block;
    opacity: 0.28;
    transition: opacity 0.45s ease, transform 0.45s ease;
    transform: scale(0.96);
    padding: 3px 0;
  }
  .lyric-line.active{
    opacity: 1;
    transform: scale(1);
  }

  /* ── Transcript section ── */
  .call-transcript-section{
    width: min(92vw, 440px);
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .call-transcript-label{
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    color: var(--text-faint);
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(12px, 1.5vw, 13px);
    letter-spacing: .06em;
  }
  .call-transcript-cap{ display: inline-flex; align-items: center; gap: 7px; }
  .call-transcript-cap::before{
    content: ""; display: inline-block;
    width: 16px; height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='4' y1='9' x2='4' y2='15'/%3E%3Cline x1='9' y1='4.5' x2='9' y2='19.5'/%3E%3Cline x1='14' y1='7.5' x2='14' y2='16.5'/%3E%3Cline x1='19' y1='10.5' x2='19' y2='13.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='4' y1='9' x2='4' y2='15'/%3E%3Cline x1='9' y1='4.5' x2='9' y2='19.5'/%3E%3Cline x1='14' y1='7.5' x2='14' y2='16.5'/%3E%3Cline x1='19' y1='10.5' x2='19' y2='13.5'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  /* 「我在想 …」跳动点(引号区,贴心提示) */
  .call-dots{ display: inline-flex; align-items: center; gap: 4px; }
  .call-dots i{
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor;
    animation: callTypingDot 1.25s ease-in-out infinite;
  }
  .call-dots i:nth-child(2){ animation-delay: .16s; }
  .call-dots i:nth-child(3){ animation-delay: .32s; }
  @keyframes callTypingDot{ 0%,70%,100%{ transform: translateY(0); opacity:.4; } 35%{ transform: translateY(-3px); opacity:1; } }
  .call-dots-quote{ margin-left: 10px; vertical-align: middle; gap: 5px; }
  .call-dots-quote i{ width: 6px; height: 6px; }
  .call-transcript-bar{
    width: 100%;
    min-height: 2em;
    padding: clamp(11px, 2.2vw, 15px) clamp(18px, 4vw, 26px);
    border-radius: clamp(18px, 3.4vw, 24px);
    background: linear-gradient(157deg, var(--call-glass-top), var(--call-glass-bot));
    border: 1px solid var(--call-glass-edge);
    box-shadow: var(--call-glass-shadow), inset 0 1px 0 var(--call-glass-hi);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
    color: var(--text);
    font-family: var(--font-cn);
    font-size: clamp(14.5px, 2vw, 16.5px);
    line-height: 1.6;
    text-align: center;
    overflow-wrap: break-word;
    max-height: clamp(72px, 16vh, 132px);   /* 长字幕也封顶,不再把控制键/挂断顶出屏外 */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .call-transcript-bar::-webkit-scrollbar{ display: none; }
  .call-transcript-bar .caret{
    display: inline-block; width: 1px; height: 1.04em; margin-left: 2px;
    background: currentColor; opacity: .55;
    vertical-align: -0.14em;
    animation: callCaret 1s steps(1) infinite;
  }
  @keyframes callCaret{ 0%,49%{ opacity:.55; } 50%,100%{ opacity:0; } }

  /* ── Controls row ── */
  .call-controls{
    display: flex; align-items: flex-start; justify-content: center;
    gap: clamp(30px, 9vw, 50px);
    margin-top: clamp(22px, 4vw, 34px);
    flex-shrink: 0;
  }
  .call-ctrl-btn{
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    border: 0; padding: 0; cursor: pointer;
    background: transparent;
    color: var(--text-soft);
    -webkit-tap-highlight-color: transparent;
  }
  .call-ctrl-btn > svg{
    width: clamp(58px, 14.5vw, 70px); height: clamp(58px, 14.5vw, 70px);
    padding: clamp(15px, 3.4vw, 19px);
    border-radius: 50%;
    background: linear-gradient(157deg, var(--call-glass-top), var(--call-glass-bot));
    border: 1px solid var(--call-glass-edge);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 8px 22px rgba(40,60,78,.10), inset 0 1px 0 var(--call-glass-hi);
    transition: background .15s ease, transform .12s ease, color .15s ease;
  }
  .call-ctrl-btn:active > svg{ transform: scale(.92); }
  .call-ctrl-btn > span{
    font-family: var(--font-cn);
    font-size: clamp(12px, 1.6vw, 13.5px);
    color: var(--text-faint);
  }
  .call-ctrl-btn.active > svg{
    background: var(--accent);
    color: var(--accent-fg);
    border-color: transparent;
  }

  /* ── Hangup ── */
  .call-hangup{
    margin-top: clamp(20px, 4vw, 32px);
    width: clamp(64px, 15.5vw, 74px); height: clamp(64px, 15.5vw, 74px);
    border: 0; border-radius: 50%; padding: 0; cursor: pointer;
    background: var(--call-hangup-bg);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 10px 26px var(--call-hangup-shadow);
    transition: transform .15s ease, filter .2s ease;
    flex-shrink: 0;
  }
  .call-hangup:hover{ filter: brightness(1.05); }
  .call-hangup:active{ transform: scale(.92); }
  .call-hangup svg{ width: clamp(26px, 5.6vw, 31px); height: clamp(26px, 5.6vw, 31px); display: block; transform: rotate(135deg); }

  /* ── Minimize (top-left) ── */
  .call-minimize-top{
    position: absolute;
    top: calc(var(--call-safe-top) + clamp(10px, 2vw, 16px));
    left: clamp(10px, 2vw, 16px);
    width: 36px; height: 36px;
    border: 0; border-radius: 50%; padding: 0; cursor: pointer;
    background: var(--card-bg);
    border: 1px solid var(--card-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--text-soft);
    display: grid; place-items: center;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .12s ease;
  }
  .call-minimize-top:active{ transform: scale(.9); }
  .call-minimize-top svg{ width: 18px; height: 18px; display: block; }

  /* ── Hide old wave (no longer visible) ── */
  .call-wave{ display: none; }

  /* ── Call mini-bar (WeChat-style green strip) ── */
  .call-mini{
    display: none;
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--header-h) + var(--call-safe-top));
    height: 34px;
    background: var(--accent);
    color: var(--accent-fg);
    font-family: var(--font-cn);
    font-size: 13px;
    align-items: center; justify-content: center;
    gap: 8px;
    z-index: 152;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .2s ease;
  }
  .call-mini:active{ filter: brightness(.88); }
  .call-mini-dot{
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: callMiniPulse 1.4s ease-in-out infinite;
  }
  @keyframes callMiniPulse{
    0%,100%{ opacity: 1; }
    50%{ opacity: .35; }
  }
  .call-mini-timer{
    font-family: var(--font-en);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
  }
  .call-overlay.open.minimized .call-scrim{ opacity: 0; pointer-events: none; }
  .call-overlay.open.minimized .call-sheet{ opacity: 0; pointer-events: none; transform: translateY(12px); }
  .call-overlay.open.minimized .call-mini{ display: flex; }
  .call-overlay.open.minimized{ pointer-events: none; }

  /* 来电:全屏(与通话中同一张画布,接听后无缝衔接,不再是顶部小卡片) */
  .incoming-call-overlay{ z-index: 151; }
  .incoming-call-overlay .call-scrim{ background: var(--call-scrim); }
  .incoming-call-overlay .call-sheet{
    justify-content: flex-start;
    gap: clamp(12px, 2.6vw, 20px);
  }
  /* caption 行(✦ incoming call ✦)——与 .call-status 同款横排 */
  .call-caption{
    display: inline-flex; align-items: center; gap: 11px;
    color: var(--think-label);
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(13px, 1.8vw, 15.5px);
    letter-spacing: .16em; line-height: 1;
    margin-top: clamp(2px, 2vh, 14px);
  }
  .call-caption .call-star{ color: var(--think-flourish); display: grid; place-items: center; }
  .call-caption .call-star svg{ width: 16px; height: 16px; display: block; }
  /* 来电大头像 + 呼吸光环 */
  .incoming-call-avatar{
    width: clamp(132px, 40vw, 184px); height: clamp(132px, 40vw, 184px);
    border-radius: 50%;
    background-image: var(--avatar-default);
    background-size: cover; background-position: center;
    box-shadow: 0 12px 38px rgba(40,60,78,.18), inset 0 0 0 1px rgba(255,255,255,.14);
    margin-top: clamp(10px, 4vh, 36px);
    animation: incomingPulse 2.4s var(--ease-soft) infinite;
  }
  @keyframes incomingPulse{
    0%   { box-shadow: 0 12px 38px rgba(40,60,78,.18), 0 0 0 0 color-mix(in srgb, var(--accent) 34%, transparent), inset 0 0 0 1px rgba(255,255,255,.14); }
    70%  { box-shadow: 0 12px 38px rgba(40,60,78,.18), 0 0 0 22px color-mix(in srgb, var(--accent) 0%, transparent), inset 0 0 0 1px rgba(255,255,255,.14); }
    100% { box-shadow: 0 12px 38px rgba(40,60,78,.18), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent), inset 0 0 0 1px rgba(255,255,255,.14); }
  }
  @media (prefers-reduced-motion: reduce){ .incoming-call-avatar{ animation: none; } }
  /* 来电动作区:推到底部,拒接/接听左右分开(iOS 式) */
  .incoming-call-actions{
    margin-top: auto;
    margin-bottom: calc(var(--call-safe-bottom) + clamp(14px, 5vh, 52px));
    display: flex; align-items: flex-end; justify-content: center;
    gap: clamp(46px, 22vw, 108px);
    width: 100%;
  }
  .incoming-call-slot{ display: flex; flex-direction: column; align-items: center; gap: 11px; }
  .incoming-call-label{
    font-family: var(--font-cn);
    font-size: clamp(12px, 1.6vw, 13.5px);
    color: var(--text-faint);
  }
  .incoming-call-title{
    margin-top: clamp(4px, 2vw, 12px);
    color: var(--text);
    font-family: var(--font-cn);
    font-size: clamp(27px, 6.6vw, 36px);
    line-height: 1.2;
    font-weight: 500;
  }
  .incoming-call-text{
    width: min(80vw, 360px);
    min-height: 1.6em;
    color: var(--text-soft);
    font-family: var(--font-cn);
    font-size: clamp(14px, 1.9vw, 16px);
    line-height: 1.6;
    text-align: center;
    overflow-wrap: break-word;
  }
  .incoming-call-actions{
    display: flex; align-items: center; justify-content: center;
    gap: clamp(18px, 6vw, 34px);
    width: 100%;
  }
  .incoming-call-btn{
    width: clamp(62px, 15.5vw, 74px); height: clamp(62px, 15.5vw, 74px);
    border: 0; border-radius: 50%; padding: 0; cursor: pointer;
    color: #fff;
    display: grid; place-items: center;
    transition: transform .15s ease, filter .2s ease;
  }
  .incoming-call-btn:hover{ filter: brightness(1.05); }
  .incoming-call-btn:active{ transform: scale(.92); }
  .incoming-call-btn svg{ width: clamp(26px, 6vw, 30px); height: clamp(26px, 6vw, 30px); display: block; }
  .incoming-call-btn.accept{
    background: #5aa77a;
    box-shadow: 0 10px 26px rgba(69,132,96,.34);
  }
  .incoming-call-btn.decline{
    background: var(--call-hangup-bg);
    box-shadow: 0 10px 26px var(--call-hangup-shadow);
  }
  .incoming-call-btn.decline svg{ transform: rotate(135deg); }
  .topbtn.call.active{ color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════
   v2 接入（旧版没有的，全在这一节；删掉这一节就是旧版原样）
   ════════════════════════════════════════════════════════════════════ */

/* 旧版遮罩是写死的白色渐变；夜间主题下淡入时会闪一下白，改成跟 v2 的纱色走 */
.call-scrim{ background: var(--call-scrim-bg); }

/* v2 app.css 有一条全局 `button svg{fill:none;stroke:currentColor;stroke-width:1.6;width:20px;height:20px}`，
   CSS 会压过 svg 标签上自己写的 fill / stroke-width —— 挂断、接听、拒接三个实心话筒会变成空心线。
   这里按旧版 HTML 里各图标原本的属性抵消回去。 */
.call-hangup svg,
.incoming-call-btn svg{ fill: currentColor; stroke: none; }
.call-ctrl-btn > svg{ fill: none; stroke: currentColor; stroke-width: 1.7; }
.call-minimize-top svg{ fill: none; stroke: currentColor; stroke-width: 2; }
/* v2 全局 `button:active{opacity:.82;transform:scale(.975)}`：通话键按旧版自己的按压反馈走 */
.call-ctrl-btn:active{ opacity: 1; transform: none; }
.call-hangup:active, .incoming-call-btn:active, .call-minimize-top:active{ opacity: 1; }

/* ── 拨号键 ──
   旧版：顶栏右侧 #callBtn（.theme-btn，right:12px）。
   v2 的聊天顶栏是「返回 | 名字 | 头像」三格网格；拨号键绝对定位贴在头像左边，不改动原来三格的排布。
   群聊里不渲染这个键。 */
.conversation-topbar .conversation-call{
  position: absolute; top: 0; right: 48px;
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%;
  display: grid; place-items: center;
}
.conversation-topbar .conversation-call svg{ width: 17px; height: 17px; }
/* 旧版 `.topbtn.call.active{ color: var(--accent); }` 的对应：通话中拨号键变强调色 */
.conversation-topbar .conversation-call.active{ color: var(--accent); }

/* ── 语音条：按住说话（旧版 861–866 行，选择器原样 #micBtn）── */
#micBtn{ touch-action:none; -webkit-user-select:none; user-select:none; }
#micBtn.recording{
  background:#d64545; color:#fff;
  animation:mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
/* 旧版话筒键在「+」快捷栏里；v2 没有快捷栏，放进输入行（附件 | 输入框 | 话筒 | 发送），多开一格 */
.app.chat-detail .conversation-shell .composer.has-mic{ grid-template-columns: 32px minmax(0,1fr) 32px 32px; }

/* ════════════════════════════════════════════════════════════════════
   备用：旧版原值（通话画面固定浅色，不跟 v2 日夜主题）
   要用就把最上面那个 .call-overlay{…} 变量块整体换成下面这块，并删掉上面的
   `.call-scrim{ background: var(--call-scrim-bg); }` 和 body.has-wallpaper 那条。

.call-overlay{
  --font-en: "Cormorant Garamond", Georgia, serif;
  --font-cn: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --bg: #F7FAFC;
  --text: #253447;
  --text-soft: #5E7080;
  --text-faint: #8A99A8;
  --accent: #4C6378;
  --accent-fg: #ffffff;
  --think-flourish: rgba(99,121,142,.52);
  --think-label: #6A7E8E;
  --header-h: clamp(56px, 10vw, 120px);
  --side-pad: clamp(16px, 4vw, 40px);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --card-bg: rgba(244,248,250,.42);
  --card-line: rgba(150,168,182,.12);
  --call-glass-top: rgba(255,255,255,.46);
  --call-glass-bot: rgba(255,255,255,.20);
  --call-glass-edge: rgba(255,255,255,.58);
  --call-glass-hi: rgba(255,255,255,.72);
  --call-glass-glow: rgba(150,172,196,.20);
  --call-glass-shadow: 0 20px 50px rgba(74,93,108,.16);
  --call-scrim: rgba(64,82,102,.06);
  --call-hangup-bg: #cf8d92;
  --call-hangup-shadow: rgba(176,96,104,.34);
  --wall-default: none;
  --avatar-default: linear-gradient(145deg, #2A3442 0%, #45566B 55%, #C4D0E4 130%);
  --call-safe-top: var(--safe-top, env(safe-area-inset-top));
  --call-safe-bottom: var(--safe-bottom, env(safe-area-inset-bottom));
}
   ════════════════════════════════════════════════════════════════════ */