/* 电话 App (docs/PHONE_CALL_REDESIGN.md) + 夜航蓝改版 (claude/phone-app-redesign-2026-10-15.md).
   The page background, ink and surfaces follow the app's own theme tokens (--bg/--surface/--ink/--ink2/
   --panel-glass), which the theme engine swaps for every color theme AND for light/dark. On top of that
   电话 has its own signature colour, 夜航蓝, defined ONCE below as --pn-* tokens (light + the two dark
   blocks, same pattern as worldbook.css's --wb-*), so every rule further down only names tokens. */
#v-phone,.phone-call-screen,.phone-page{
  --pn:#4f78b8;--pn-2:#86a8dc;--pn-text:#3f659f;--pn-pale:rgba(79,120,184,.12);--pn-soft:rgba(79,120,184,.07);--pn-glow:rgba(79,120,184,.2);
  --pn-glass:rgba(255,255,255,.55);--pn-edge:rgba(255,255,255,.9);--pn-solid:#fbfdff;--pn-line:rgba(47,63,90,.06);
  --pn-shadow:0 18px 40px -24px rgba(60,85,125,.28),0 2px 6px -3px rgba(60,85,125,.08);
  --pn-ok:#8db8a0;--pn-busy:#dcc19a;--pn-sleep:#a9b0cf;--pn-miss:#b06f69;--pn-miss-bg:rgba(192,138,133,.12);
  --pn-rose:linear-gradient(150deg,#eab3ae,#cf8882);--pn-rose-shadow:0 14px 28px -12px rgba(207,136,130,.7);
  --pn-blue:linear-gradient(150deg,#86a8dc,#4f78b8);--pn-blue-shadow:0 14px 28px -12px rgba(79,120,184,.7);--pn-on:#fff;
  --pn-dim:rgba(40,55,80,.2)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(#v-phone,.phone-call-screen,.phone-page){
  --pn:#94b2e0;--pn-2:#86a8dc;--pn-text:#a9c2e8;--pn-pale:rgba(148,178,224,.16);--pn-soft:rgba(148,178,224,.08);--pn-glow:rgba(148,178,224,.14);
  --pn-glass:rgba(255,255,255,.06);--pn-edge:rgba(255,255,255,.1);--pn-solid:rgba(255,255,255,.1);--pn-line:rgba(255,255,255,.07);
  --pn-shadow:0 18px 40px -24px rgba(0,0,0,.6);--pn-miss:#e0a29c;--pn-miss-bg:rgba(224,162,156,.12);
  --pn-rose-shadow:0 14px 28px -12px rgba(0,0,0,.5);--pn-blue-shadow:0 14px 28px -12px rgba(0,0,0,.5);--pn-dim:rgba(0,0,0,.45)}}
:root[data-theme="dark"] :is(#v-phone,.phone-call-screen,.phone-page){
  --pn:#94b2e0;--pn-2:#86a8dc;--pn-text:#a9c2e8;--pn-pale:rgba(148,178,224,.16);--pn-soft:rgba(148,178,224,.08);--pn-glow:rgba(148,178,224,.14);
  --pn-glass:rgba(255,255,255,.06);--pn-edge:rgba(255,255,255,.1);--pn-solid:rgba(255,255,255,.1);--pn-line:rgba(255,255,255,.07);
  --pn-shadow:0 18px 40px -24px rgba(0,0,0,.6);--pn-miss:#e0a29c;--pn-miss-bg:rgba(224,162,156,.12);
  --pn-rose-shadow:0 14px 28px -12px rgba(0,0,0,.5);--pn-blue-shadow:0 14px 28px -12px rgba(0,0,0,.5);--pn-dim:rgba(0,0,0,.45)}

/* ── §2 首页: 3-tab glass pill nav ── */
.phone-shell{flex:1;min-height:0;display:flex;flex-direction:column;background:radial-gradient(130% 40% at 50% 0%,var(--pn-glow),transparent 72%),var(--bg)}
.phone-screen{display:none;flex-direction:column;flex:1;min-height:0}
.phone-screen.active{display:flex}
.phone-tabs{flex-shrink:0;display:flex;gap:2px;margin:0 16px calc(16px + var(--sab));padding:6px;border-radius:28px;background:var(--pn-glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:var(--pn-shadow);border:1px solid var(--pn-edge)}
.phone-tabs button{flex:1;min-width:0;border:none;background:none;color:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 0;border-radius:22px;font-family:var(--font-body);font-size:11.5px;font-weight:500;cursor:pointer;transition:background var(--mo-base,.18s),color var(--mo-base,.18s)}
.phone-tabs button.active{color:var(--pn-text);background:var(--pn-solid)}
.phone-tabs svg{width:20px;height:20px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.phone-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 0}
.phone-rb{width:40px;height:40px;border-radius:50%;border:1px solid var(--pn-edge);display:grid;place-items:center;background:var(--pn-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--pn-shadow);color:var(--ink);flex-shrink:0;cursor:pointer;transition:transform var(--mo-release,.38s) var(--mo-ease-bounce,ease)}
.phone-rb:active{transform:scale(.88);transition-duration:var(--mo-fast,.09s)}
.phone-rb svg{width:19px;height:19px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.phone-h1{margin:16px 18px 0;font:600 30px var(--font-display);color:var(--ink);letter-spacing:.02em}
/* 拨号键盘 calls phoneTopBar('') - collapse the empty title row */
.phone-h1:empty{display:none}

.phone-card{margin:8px 18px 0;border-radius:26px;background:var(--pn-glass);border:1px solid var(--pn-edge);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--pn-shadow);overflow:hidden}
.phone-empty{margin:40px 24px 0;text-align:center;color:var(--ink2);font-size:13px;line-height:1.7}
.phone-gl{margin:20px 22px 0;font-size:12px;color:var(--ink2);letter-spacing:.12em}
.phone-avw{position:relative;flex-shrink:0;display:block}
.phone-dot{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface);background:var(--pn-ok)}
.phone-dot.busy{background:var(--pn-busy)}
.phone-dot.sleep{background:var(--pn-sleep)}
/* expandable rows / cards share one grid-rows trick (animates to the content's own height) */
.phone-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--mo-slow,.24s) var(--mo-ease-spring,ease)}
.phone-more>div{overflow:hidden;min-height:0}
.open>.phone-more{grid-template-rows:1fr}

/* 最近通话 */
.phone-stats{margin:12px 18px 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--ink2)}
.phone-stats b{font:600 15px var(--font-display);color:var(--pn-text);font-variant-numeric:tabular-nums}
.phone-stats i{font-style:normal;opacity:.6}
.phone-now{margin:14px 18px 0;display:flex;align-items:center;gap:10px;padding:11px 12px 11px 14px;border-radius:22px;background:linear-gradient(120deg,var(--pn-pale),var(--pn-glass));border:1px solid var(--pn-edge);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--pn-shadow);animation:moRise var(--mo-base,.18s) var(--mo-ease-out,ease) backwards}
.phone-now-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0}
.phone-now-av img{width:100%;height:100%;object-fit:cover}
.phone-now-tx{flex:1;min-width:0}
.phone-now-tx b{display:block;font:500 13px var(--font-display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-now-tx small{display:block;font-size:11px;color:var(--ink2);margin-top:1px}
.phone-pill-btn{border:none;border-radius:999px;padding:7px 15px;font:inherit;font-size:12px;background:var(--pn-solid);color:var(--pn-text);box-shadow:var(--pn-shadow);cursor:pointer;flex-shrink:0;transition:transform var(--mo-release,.38s) var(--mo-ease-bounce,ease)}
.phone-pill-btn:active{transform:scale(.9);transition-duration:var(--mo-fast,.09s)}
.phone-seg{position:relative;display:flex;padding:3px;margin:14px 18px 0;border-radius:14px;background:var(--pn-pale)}
.phone-seg span{position:relative;z-index:1;flex:1;text-align:center;font-size:13.5px;padding:8px 0;color:var(--ink2);cursor:pointer;transition:color .25s}
.phone-seg span.on{color:var(--ink)}
.phone-seg-knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:11px;background:var(--surface);box-shadow:var(--pn-shadow);transition:transform .45s var(--mo-ease-bounce,ease)}
.phone-seg[data-f="missed"] .phone-seg-knob{transform:translateX(100%)}
.phone-cr{display:block;padding:13px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:moRise var(--mo-base,.18s) var(--mo-ease-out,ease) backwards;animation-delay:calc(var(--i,0) * 40ms)}
.phone-cr.settled{animation:none}
.phone-cr+.phone-cr{border-top:1px solid var(--pn-line)}
.phone-cr:focus-visible{outline:2px solid var(--pn);outline-offset:-2px;border-radius:20px}
.phone-cr-r1{display:flex;align-items:center;gap:12px}
.phone-cr-av{width:44px;height:44px;border-radius:50%;overflow:hidden;display:block}
.phone-cr-av img{width:100%;height:100%;object-fit:cover}
.phone-cr-main{flex:1;min-width:0}
.phone-cr-main b{display:block;font:600 15.5px var(--font-display);color:var(--ink)}
.phone-cr-main small{display:block;font-size:12px;color:var(--ink2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-cr.miss .phone-cr-main b{color:var(--pn-miss)}
.phone-dir{display:inline-block}
.phone-cr-time{font-size:12px;color:var(--ink2);flex-shrink:0;font-variant-numeric:tabular-nums}
.phone-cr-cb{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--pn-pale);color:var(--pn);border:none;cursor:pointer;transition:transform var(--mo-release,.38s) var(--mo-ease-bounce,ease)}
.phone-cr-cb:active{transform:scale(.86);transition-duration:var(--mo-fast,.09s)}
.phone-cr-cb svg{width:16px;height:16px;stroke-width:1.8}
.phone-cr-note{margin:9px 0 0 56px;padding:9px 12px;border-radius:16px 16px 16px 6px;font:12.5px/1.6 var(--font-display);color:var(--ink);background:var(--pn-soft)}
.phone-cr-note em{display:block;font-style:normal;font-size:10.5px;color:var(--ink2);margin-bottom:2px;letter-spacing:.06em}
.phone-cr-note.why{background:var(--pn-miss-bg)}
.phone-cr-note.why em{color:var(--pn-miss)}
.phone-cr-sum{margin:9px 0 0 56px;font-size:12px;line-height:1.6;color:var(--ink2)}
.phone-cr-sum b{font-weight:500;margin-right:5px;color:var(--pn-text)}
.phone-cr-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px 56px}
.phone-cr-acts button{font:inherit;font-size:12px;padding:6px 13px;border-radius:999px;background:var(--pn-glass);border:1px solid var(--pn-pale);color:var(--pn-text);cursor:pointer;transition:transform var(--mo-release,.38s) var(--mo-ease-bounce,ease)}
.phone-cr-acts button:active{transform:scale(.92);transition-duration:var(--mo-fast,.09s)}
.phone-dev-sim{display:block;margin:18px auto 0;border:none;background:none;color:var(--ink2);font-size:11.5px;text-decoration:underline;opacity:.6;cursor:pointer}

/* 通讯录 */
.phone-srch{display:flex;align-items:center;gap:10px;margin:14px 18px 0;height:42px;padding:0 15px;border-radius:21px;background:var(--pn-glass);border:1px solid var(--pn-edge);box-shadow:var(--pn-shadow);color:var(--ink2);font-size:14px}
.phone-srch svg{width:16px;height:16px;stroke-width:1.8}
.phone-srch input{flex:1;min-width:0;border:none;background:none;color:var(--ink);font:inherit;outline:none}
.phone-cards{display:flex;flex-direction:column;gap:12px;margin:16px 18px 0}
.phone-ccd{padding:16px;border-radius:26px;background:var(--pn-glass);border:1px solid var(--pn-edge);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--pn-shadow);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:moRise var(--mo-base,.18s) var(--mo-ease-out,ease) backwards;animation-delay:calc(var(--i,0) * 50ms)}
.phone-ccd.settled{animation:none}
.phone-ccd:focus-visible{outline:2px solid var(--pn);outline-offset:2px}
.phone-ccd-r1{display:flex;align-items:center;gap:13px}
.phone-ccd-av{width:54px;height:54px;border-radius:50%;overflow:hidden;display:block}
.phone-ccd-av img{width:100%;height:100%;object-fit:cover}
.phone-ccd-r1 .phone-dot{width:13px;height:13px}
.phone-ccd-main{flex:1;min-width:0}
.phone-ccd-main b{display:block;font:600 17px var(--font-display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-ccd-main small{display:block;font-size:12px;color:var(--ink2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-rel{font-size:11px;padding:3px 10px;border-radius:999px;background:var(--pn-pale);color:var(--pn-text);letter-spacing:.06em;flex-shrink:0}
.phone-cmeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}
.phone-cmeta div{padding:9px 11px;border-radius:16px;background:var(--pn-soft);min-width:0}
.phone-cmeta div.wide{grid-column:1/-1}
.phone-cmeta em{display:block;font-style:normal;font-size:10.5px;color:var(--ink2);letter-spacing:.06em}
.phone-cmeta span{display:block;font-size:13px;color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.phone-cacts{display:flex;gap:8px;margin-top:12px}
.phone-cacts button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:none;padding:10px 0;border-radius:16px;font:inherit;font-size:13px;background:var(--pn-solid);color:var(--pn-text);box-shadow:var(--pn-shadow);cursor:pointer;transition:transform var(--mo-release,.38s) var(--mo-ease-bounce,ease)}
.phone-cacts button:active{transform:scale(.92);transition-duration:var(--mo-fast,.09s)}
.phone-cacts button.pri{background:var(--pn-blue);color:var(--pn-on)}
.phone-cacts svg{width:15px;height:15px;stroke-width:1.8}

/* 拨号键盘 */
.phone-disp-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:118px;padding:0 18px}
.phone-disp{display:flex;justify-content:center;font:400 34px var(--font-display);letter-spacing:.06em;min-height:46px;color:var(--ink);font-variant-numeric:tabular-nums}
.phone-disp.ph{font-size:14px;color:var(--ink2);letter-spacing:.1em;align-items:flex-end;padding-bottom:10px}
.phone-disp span{display:inline-block}
.phone-disp span.land{animation:phoneLand .5s var(--mo-ease-bounce,ease) both}
.phone-match{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:40px;margin-top:4px}
.phone-mt{display:flex;align-items:center;gap:8px;padding:4px 13px 4px 4px;border-radius:999px;border:1px solid var(--pn-edge);background:var(--pn-glass);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);font:inherit;font-size:13px;color:var(--ink);cursor:pointer;animation:phoneKeyJelly .4s ease-out both}
.phone-mt-av{width:28px;height:28px;border-radius:50%;overflow:hidden;display:block}
.phone-mt-av img{width:100%;height:100%;object-fit:cover}
.phone-mt u{text-decoration:none;color:var(--pn-text);font-weight:600}
.phone-mt small{font-size:11px;color:var(--ink2)}
.phone-keys{display:grid;grid-template-columns:repeat(3,72px);gap:16px 28px;justify-content:center;margin-top:12px}
#phone-keypad-body{position:relative}
.phone-key{position:relative;width:72px;height:72px;border-radius:50%;border:none;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:inherit;color:var(--ink);cursor:pointer;isolation:isolate;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.phone-key b{position:relative;z-index:3;font:500 28px/1 var(--font-display);pointer-events:none;transition:color .3s}
.phone-key small{position:relative;z-index:3;font:600 9px var(--font-body);letter-spacing:.18em;color:var(--ink2);margin-top:3px;min-height:10px;pointer-events:none}
.phone-key-tool{width:72px;height:72px;border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink2);font:inherit;cursor:pointer}
.phone-key-tool svg{width:22px;height:22px;stroke-width:1.7}
.phone-key-tool small{font-size:10.5px;letter-spacing:.06em}
.phone-key-tool:disabled{opacity:.3;cursor:default}
.phone-key-tool.pop{animation:phoneKeyJelly .4s ease-out both}
.phone-callb{position:relative;width:72px;height:72px;border-radius:50%;margin:20px auto 0;display:grid;place-items:center;border:none;cursor:pointer;color:var(--pn-on);background:var(--pn-blue);box-shadow:var(--pn-blue-shadow);isolation:isolate;overflow:visible;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.phone-callb svg{position:relative;z-index:3;width:26px;height:26px;stroke-width:1.8}
.phone-call-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--pn-2);pointer-events:none;animation:phoneHalo .8s ease-out forwards}
.phone-fly{position:absolute;z-index:5;font:500 28px var(--font-display);color:var(--pn);pointer-events:none;transition:transform .4s cubic-bezier(.5,0,.3,1),opacity .4s ease}
/* 按键样式 (电话设置): A 新拟态 · B 玻璃球面 · C 实体按键 · D 液态玻璃 (default) */
.ks-neu .phone-key{background:linear-gradient(145deg,var(--pn-solid),var(--pn-soft));box-shadow:6px 6px 14px var(--pn-glow),-6px -6px 14px var(--pn-edge);transition:box-shadow .25s,transform .45s var(--mo-ease-bounce,ease)}
.ks-neu .phone-key.down{box-shadow:inset 5px 5px 10px var(--pn-glow),inset -5px -5px 10px var(--pn-edge);transform:scale(.97);transition-duration:.08s}
.ks-glass .phone-key{background:radial-gradient(70% 55% at 35% 25%,var(--pn-edge),transparent 60%),radial-gradient(90% 90% at 60% 75%,var(--pn-pale),var(--pn-glass) 70%);border:1px solid var(--pn-edge);box-shadow:inset 0 -6px 12px var(--pn-pale),0 14px 24px -14px var(--pn-glow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .5s var(--mo-ease-bounce,ease)}
.ks-glass .phone-key.down{transform:scale(.9);transition-duration:.1s}
.ks-solid .phone-key{background:linear-gradient(180deg,var(--pn-solid),var(--surface));box-shadow:0 5px 0 var(--pn-pale),0 12px 18px -8px var(--pn-glow);transition:transform .35s cubic-bezier(.34,1.8,.64,1),box-shadow .35s cubic-bezier(.34,1.8,.64,1)}
.ks-solid .phone-key.down{transform:translateY(4px);box-shadow:0 1px 0 var(--pn-pale),0 4px 8px -6px var(--pn-glow);transition-duration:.06s}
.ks-liquid .phone-key,.phone-callb.ks-liquid{background-image:linear-gradient(160deg,var(--pn-edge),var(--pn-glass) 55%,var(--pn-pale));backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1.5px 1px var(--pn-edge),inset 0 -2px 4px var(--pn-pale),inset 0 0 0 1px var(--pn-edge),0 10px 22px -14px var(--pn-glow)}
.phone-callb.ks-liquid{background-image:linear-gradient(160deg,var(--pn-2),var(--pn));box-shadow:inset 0 1.5px 1px var(--pn-edge),inset 0 -3px 6px var(--pn-glow),var(--pn-blue-shadow)}
.ks-liquid .phone-key::before,.phone-callb.ks-liquid::before{content:"";position:absolute;left:14%;top:9%;width:46%;height:30%;border-radius:50%;background:radial-gradient(closest-side,var(--pn-edge),transparent);transform:rotate(-20deg);z-index:1;pointer-events:none;transition:transform .5s var(--mo-ease-bounce,ease)}
.ks-liquid .phone-key.down,.phone-callb.ks-liquid.down{transform:scale(1.04,.95);transition:transform .09s ease-out}
.ks-liquid .phone-key.down::before,.phone-callb.ks-liquid.down::before{transform:rotate(-20deg) translate(6px,4px) scale(1.25)}
.ks-liquid .phone-key.pop,.phone-callb.ks-liquid.pop{animation:phoneKeyJelly .4s ease-out both}
.ks-neu .phone-key.down b,.ks-solid .phone-key.down b,.ks-liquid .phone-key.down b{color:var(--pn-text)}
.phone-key-ripple{position:absolute;z-index:1;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--pn-glow),transparent 70%);animation:phoneRipple .6s ease-out forwards}
.phone-key-glow{position:absolute;z-index:2;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,var(--pn-edge),var(--pn-glow) 45%,transparent);filter:blur(3px);animation:phoneWell .75s cubic-bezier(.2,.8,.3,1) forwards}
.phone-key-rim{position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1.5px var(--pn-edge),inset 0 0 14px var(--pn-glow),0 0 18px var(--pn-glow);animation:phoneRim .7s ease-out forwards}
.ks-neu .phone-key-rim,.ks-solid .phone-key-rim{display:none}
@keyframes phoneKeyJelly{0%{transform:scale(1.04,.95)}45%{transform:scale(.98,1.03)}100%{transform:none}}
@keyframes phoneWell{0%{transform:scale(.15);opacity:0}25%{transform:scale(.7);opacity:1}60%{transform:scale(1.05) translateY(-4px);opacity:.8}100%{transform:scale(1.3) translateY(-8px);opacity:0}}
@keyframes phoneRim{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes phoneRipple{to{transform:scale(7);opacity:0}}
@keyframes phoneHalo{from{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}
@keyframes phoneLand{from{transform:translateY(-6px) scale(1.25);color:var(--pn)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.phone-key,.phone-callb,.phone-mt,.phone-cr,.phone-ccd,.phone-now,.phone-disp span.land{animation:none!important;transition:none!important}.phone-key-glow,.phone-key-ripple,.phone-key-rim,.phone-call-ring{display:none}}

/* ═══ §4 通话界面: a global overlay outside every .view, over everything except 锁屏 ═══ */
/* body{max-width:430px;margin:0 auto} is the app's own phone-frame-on-desktop convention
   (see index.html) - position:fixed descendants of body still size to the real VIEWPORT, not
   to that 430px frame, unless they self-constrain the same way .lockscreen already does. */
.phone-call-screen{position:fixed;inset:0;left:0;right:0;margin:0 auto;max-width:430px;z-index:60;overflow:hidden;color:var(--ink);font-family:var(--font-body)}
.pc-bg{position:absolute;inset:0;
  background:radial-gradient(70% 38% at 50% 24%,rgba(255,255,255,.95),transparent 70%),radial-gradient(55% 35% at 10% 95%,color-mix(in srgb,var(--pri) 25%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,#fff),var(--bg))}
.pc-bg.warm{background:radial-gradient(70% 34% at 50% 20%,color-mix(in srgb,var(--pri) 18%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,#fff),var(--bg))}
:root[data-theme="dark"] .pc-bg{background:radial-gradient(60% 38% at 50% 26%,color-mix(in srgb,var(--pri) 20%,transparent),transparent 70%),linear-gradient(180deg,var(--surface),var(--bg))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-bg{background:radial-gradient(60% 38% at 50% 26%,color-mix(in srgb,var(--pri) 20%,transparent),transparent 70%),linear-gradient(180deg,var(--surface),var(--bg))}}
:root[data-theme="dark"] .pc-bg.warm{background:radial-gradient(60% 34% at 50% 20%,color-mix(in srgb,var(--pri) 16%,transparent),transparent 70%),linear-gradient(180deg,var(--surface),var(--bg))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-bg.warm{background:radial-gradient(60% 34% at 50% 20%,color-mix(in srgb,var(--pri) 16%,transparent),transparent 70%),linear-gradient(180deg,var(--surface),var(--bg))}}

.pc-cw{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:calc(90px + var(--sat,0px))}
.pc-av{width:110px;height:110px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 18px 30px -16px rgba(30,40,60,.4);display:block}
.pc-av img{width:100%;height:100%;object-fit:cover}
.pc-av.pc-halo{box-shadow:0 0 0 14px rgba(255,255,255,.55),0 0 0 32px rgba(255,255,255,.28),0 24px 40px -16px rgba(60,85,125,.4);animation:pc-breathe 2.6s ease-in-out infinite}
:root[data-theme="dark"] .pc-av.pc-halo{box-shadow:0 0 0 14px color-mix(in srgb,var(--pri) 14%,transparent),0 0 0 32px color-mix(in srgb,var(--pri) 7%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-av.pc-halo{box-shadow:0 0 0 14px color-mix(in srgb,var(--pri) 14%,transparent),0 0 0 32px color-mix(in srgb,var(--pri) 7%,transparent)}}
@media(prefers-reduced-motion:reduce){.pc-av.pc-halo{animation:none}}
@keyframes pc-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.pc-cw b{margin-top:18px;font:600 28px var(--font-display);letter-spacing:.06em;color:var(--ink)}
.pc-cw small{margin-top:8px;font-size:14px;color:var(--ink2);letter-spacing:.2em}

.pc-ctl{position:absolute;left:0;right:0;bottom:calc(60px + var(--sab));display:flex;justify-content:center;gap:34px}
.phone-cb{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--ink2);cursor:pointer}
.phone-cb i{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:rgba(255,255,255,.7);border:1px solid #fff;color:var(--pri-deep);box-shadow:0 10px 22px -12px rgba(60,85,125,.35)}
:root[data-theme="dark"] .phone-cb i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone-cb i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);box-shadow:none}}
.phone-cb i svg{width:24px;height:24px;stroke-width:1.7}
.phone-cb.off{opacity:.45}
.phone-cb.end i{color:#c0685f;background:linear-gradient(180deg,#fff,rgba(250,226,222,.85));border-color:rgba(230,170,160,.6)}
:root[data-theme="dark"] .phone-cb.end i{color:#e59a91;background:rgba(229,154,145,.12);border-color:rgba(229,154,145,.3)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone-cb.end i{color:#e59a91;background:rgba(229,154,145,.12);border-color:rgba(229,154,145,.3)}}
.phone-cb.ans i{color:#4f8a62;background:linear-gradient(180deg,#fff,rgba(222,240,226,.9));border-color:rgba(160,205,172,.7)}
:root[data-theme="dark"] .phone-cb.ans i{color:#9fd0ad;background:rgba(159,208,173,.12);border-color:rgba(159,208,173,.3)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone-cb.ans i{color:#9fd0ad;background:rgba(159,208,173,.12);border-color:rgba(159,208,173,.3)}}

/* 通话中 */
/* docs/phone-call-preview.html's .ih (通话中): avatar/name/duration stacked and centered at the top,
   not a left-aligned row - re-checked against the current file (it changed after this was first built
   from an earlier copy; .ih here was display:flex with no flex-direction, i.e. a row). */
.pc-ih{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:calc(28px + var(--sat,0px))}
.pc-ih .pc-av{width:64px;height:64px;border-width:2px}
.pc-ih b{margin-top:10px;font:600 18px var(--font-display);color:var(--ink)}
.pc-ih small{display:block;font:13px 'Outfit',var(--font-display);letter-spacing:.15em;color:var(--ink2);margin-top:2px}
.pc-wave{display:block;margin:10px auto 0;width:180px;height:30px;opacity:.4;transition:opacity .2s}
.pc-wave.on{opacity:1}
.pc-subs{position:relative;padding:20px 24px 0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:calc(100% - 320px);scrollbar-width:none}
.pc-subs::-webkit-scrollbar{display:none}
/* docs/phone-call-v2.png: the subtitle area is always-on now (the Aa size-cycle button that drove
   .pc-size-N is gone per item 1 of that task - no toggle, no stored font step). */
.pc-sub{font:19px/1.75 var(--font-display);color:var(--ink)}
.pc-sub.old{font-size:14.5px;color:var(--ink2);opacity:.75}
.pc-sub.me{font-size:14.5px;color:var(--ink2);text-align:right}
.pc-act{display:block;font-size:13.5px;font-style:italic;color:var(--ink2);margin-bottom:4px}
/* a turn that is ONLY a parenthetical (splitCallAction left c empty) reads as its own centered
   narration line, not a prefix glued to a spoken bubble - matches docs/phone-call-v2.png's .sub p.na. */
.pc-sub[data-call-line]{align-self:flex-start;max-width:100%;box-sizing:border-box;cursor:pointer;border-radius:12px;margin:-4px -8px;padding:4px 8px;transition:background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.pc-sub[data-call-line]:focus-visible{outline:2px solid color-mix(in srgb,var(--pri) 60%,transparent);outline-offset:2px}
.pc-sub.me[data-call-line]{align-self:flex-end}
.pc-sub.picked{background:color-mix(in srgb,var(--pri) 14%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pri) 45%,transparent);opacity:1}
.pc-sub.kept::after{content:"";display:inline-block;width:8px;height:11px;margin-left:6px;vertical-align:-1px;background:color-mix(in srgb,var(--pri) 70%,transparent);clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
.pc-sub.na{font-style:italic;font-size:12.5px;text-align:center;color:var(--ink2);opacity:.7}
.pc-typing{font-size:13.5px;color:var(--ink2);font-style:italic}
.pc-sub-dots{display:flex;gap:5px;padding:4px 0}
.pc-sub-dots span{width:6px;height:6px;border-radius:50%;background:var(--ink2);opacity:.5;animation:pc-dot 1.1s ease-in-out infinite}
.pc-sub-dots span:nth-child(2){animation-delay:.15s}
.pc-sub-dots span:nth-child(3){animation-delay:.3s}
.pc-cin{position:absolute;left:16px;right:16px;bottom:calc(118px + var(--sab));display:flex;align-items:center;padding:6px 6px 6px 18px;border-radius:26px;background:rgba(255,255,255,.65);border:1px solid #fff;backdrop-filter:blur(20px);box-shadow:0 12px 26px -14px rgba(60,85,125,.3);font-size:14px}
:root[data-theme="dark"] .pc-cin{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-cin{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:none}}
/* The input itself must never show its own chrome (some browsers still paint a focus ring / inset
   shadow through border:none+outline:none alone) - any "the pill is active" glow belongs on the
   pill container, via :focus-within, not on the <input>. index.html's own global text-field focus
   rule (`input:where(...):focus{border-color:...!important;box-shadow:...!important}`) outranks a
   plain border:0/box-shadow:none here since it is !important, so the :focus state needs its own
   !important override to actually win. */
.pc-cin input{flex:1;appearance:none;-webkit-appearance:none;border:0;background:transparent;outline:none;box-shadow:none;color:var(--ink);font:inherit}
.pc-cin input:focus{border-color:transparent!important;box-shadow:none!important}
.pc-cin input::placeholder{color:var(--ink2)}
.pc-cin:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--pri) 45%,transparent),0 12px 26px -14px rgba(60,85,125,.3)}
:root[data-theme="dark"] .pc-cin:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--pri) 55%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-cin:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--pri) 55%,transparent)}}
.pc-cin i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--pri-deep);font-style:normal;box-shadow:0 4px 10px -4px rgba(60,85,125,.3);cursor:pointer;flex-shrink:0}
:root[data-theme="dark"] .pc-cin i{background:rgba(255,255,255,.14);color:var(--ink);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-cin i{background:rgba(255,255,255,.14);color:var(--ink);box-shadow:none}}
.pc-cin i svg{width:18px;height:18px;stroke-width:2}

/* docs/phone-call-v2.png: the in-call bottom row is now 动作/挂断/记住这句 (replaces the old
   语音·敬请期待 / 挂断 / Aa 字幕 row - .pc-ctl/.phone-cb's base rules stay as they are, still used by
   呼叫中/来电/这个新行自己也复用 .phone-cb; only the sizing/position and the two modifiers below are new). */
.pc-ctl2{position:absolute;left:0;right:0;bottom:calc(26px + var(--sab));display:flex;justify-content:center;gap:28px}
.pc-ctl2 .phone-cb{width:70px}
.pc-ctl2 .phone-cb i{width:58px;height:58px}
.pc-ctl2 .phone-cb.hang i{width:70px;height:70px;background:linear-gradient(160deg,color-mix(in srgb,var(--coral) 42%,#fff),var(--coral));border:0;color:var(--on-coral,#fff);box-shadow:0 14px 28px -10px color-mix(in srgb,var(--coral) 60%,transparent)}
.pc-ctl2 .phone-cb.hang i svg{width:24px;height:24px}
.pc-ctl2 .phone-cb.hang{color:var(--coral-text)}
.pc-ctl2 .phone-cb.remember.saved i{background:var(--pri-pale);color:var(--pri-deep)}
:root[data-theme="dark"] .pc-ctl2 .phone-cb.remember.saved i{background:color-mix(in srgb,var(--pri) 30%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-ctl2 .phone-cb.remember.saved i{background:color-mix(in srgb,var(--pri) 30%,transparent)}}
/* 动作 popover: preset parenthetical chips + a free-text option, sits right above .pc-cin. */
.pc-action-pop{position:absolute;left:16px;right:16px;bottom:calc(176px + var(--sab));padding:12px;border-radius:20px;background:rgba(255,255,255,.94);border:1px solid #fff;box-shadow:0 20px 40px -18px rgba(40,55,80,.5);display:flex;flex-wrap:wrap;gap:7px;z-index:5}
:root[data-theme="dark"] .pc-action-pop{background:rgba(44,50,60,.92);border-color:rgba(255,255,255,.12)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-action-pop{background:rgba(44,50,60,.92);border-color:rgba(255,255,255,.12)}}
.pc-action-pop b{width:100%;font:600 12px var(--font-display);color:var(--ink2);margin:0 0 2px}
.pc-action-pop button{border:none;font:inherit;padding:7px 12px;border-radius:14px;background:var(--pri-pale);color:var(--accent-text);font-size:12.5px;font-style:italic;cursor:pointer}
.pc-action-pop button.custom{font-style:normal;background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--border)}
.pc-action-pop .cust-row{display:flex;align-items:center;gap:8px;width:100%;padding:4px 4px 4px 12px;border-radius:16px;background:var(--surface-alt,var(--bg))}
.pc-action-pop .cust-row input{flex:1;border:0;background:transparent;outline:none;box-shadow:none;color:var(--ink);font:14px/1.4 var(--font-display)}
.pc-action-pop .cust-row input:focus{box-shadow:none!important}
.pc-action-pop .cust-row button{flex-shrink:0;width:32px;height:32px;padding:0;display:grid;place-items:center;background:var(--pri-deep);color:#fff;font-style:normal}

/* TA 打来 */
.pc-why{position:relative;margin:22px 40px 0;text-align:center;font:15px/1.8 var(--font-display);color:var(--ink);padding:14px 18px;border-radius:20px;background:rgba(255,255,255,.55);border:1px solid #fff}
:root[data-theme="dark"] .pc-why{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-why{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}}
.pc-reply-link{position:absolute;left:0;right:0;bottom:calc(180px + var(--sab));text-align:center}
.pc-reply-link button{border:none;background:none;font-size:12.5px;color:var(--ink2);cursor:pointer}

/* 挂断后 */
.pc-ih2{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:calc(60px + var(--sat,0px))}
.pc-ih2 .pc-av{width:84px;height:84px}
.pc-ih2 b{margin-top:14px;font:600 20px var(--font-display);color:var(--ink)}
.pc-endtime{position:relative;text-align:center;margin-top:26px}
.pc-endtime b{font:200 54px 'Outfit',var(--font-display);letter-spacing:.04em;color:var(--ink)}
.pc-endtime small{display:block;font-size:12.5px;letter-spacing:.25em;color:var(--ink2)}
.pc-note{position:relative;margin:26px 22px 0;padding:22px;border-radius:24px;background:rgba(255,255,255,.62);border:1px solid #fff;box-shadow:0 14px 30px -18px rgba(60,85,125,.3)}
:root[data-theme="dark"] .pc-note{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-note{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);box-shadow:none}}
.pc-note small{font-size:11.5px;letter-spacing:.15em;color:var(--ink2)}
.pc-note p{margin:10px 0 0;font:16.5px/1.9 var(--font-display);color:var(--ink)}
.pc-note-sg{text-align:right;margin-top:8px;font:13.5px var(--font-display);color:var(--ink2)}
.pc-note.pc-loading{display:flex;gap:6px;justify-content:center;padding:26px}
.pc-note.pc-loading span{width:7px;height:7px;border-radius:50%;background:var(--pri-deep);opacity:.5;animation:pc-dot 1.1s ease-in-out infinite}
.pc-note.pc-loading span:nth-child(2){animation-delay:.15s}
.pc-note.pc-loading span:nth-child(3){animation-delay:.3s}
@keyframes pc-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.pc-endb{position:absolute;left:22px;right:22px;bottom:calc(44px + var(--sab));display:flex;gap:10px}
.pc-endb button{flex:1;height:52px;border-radius:26px;border:none;display:grid;place-items:center;font:600 15px var(--font-display);background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--accent-text);cursor:pointer}
.pc-endb button.w{background:#fff;box-shadow:0 10px 20px -12px rgba(60,85,125,.35);color:var(--ink)}
:root[data-theme="dark"] .pc-endb button.w{background:rgba(255,255,255,.12);color:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-endb button.w{background:rgba(255,255,255,.12);color:var(--ink)}}

/* ── 全局悬浮通话胶囊 (§4): kept outside #v-* so it survives app switches; the calling-answer path's own fallback. ── */
.phone-call-pill{position:fixed;left:50%;top:calc(10px + var(--sat,0px));transform:translateX(-50%);z-index:55;border:none;border-radius:999px;padding:8px 18px;font:600 13px var(--font-display);color:var(--ink);background:var(--panel-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 24px -12px rgba(40,55,80,.4);border:1px solid var(--line-soft,rgba(255,255,255,.7));cursor:pointer}

/* ── 通话气泡 (docs/call-bubble-preview.html, docs/call-bubble.png) ──
   Two shapes: a small pill for a call that never connected (.phone-call-pill-row), and a collapsible
   card for one that did (.phone-cc). Only the preview's LIGHT variables exist (no .D/dark block in
   that file) - dark mode here follows the one formula the task itself specifies (white-6% bg,
   white-12% border, no shadow), the same two-rule pattern every other dark override in this file uses. */
.phone-call-pill-row{display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:20px;background:rgba(255,255,255,.62);border:1px solid #fff;font-size:13px;color:var(--ink2)}
:root[data-theme="dark"] .phone-call-pill-row{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone-call-pill-row{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}}
.phone-call-pill-row i{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-style:normal;background:var(--pri-pale);color:var(--pri-deep)}
.phone-call-pill-row i svg{width:15px;height:15px;stroke-width:1.8}
.phone-call-pill-row i.miss{background:rgba(184,112,106,.12);color:#b8706a}
.phone-call-pill-cb{margin-left:4px;padding:4px 11px;border:none;border-radius:12px;background:#fff;color:var(--accent-text);font-size:12px;font-weight:600;box-shadow:0 4px 10px -6px rgba(60,85,125,.4);cursor:pointer}
:root[data-theme="dark"] .phone-call-pill-cb{background:rgba(255,255,255,.14);color:var(--ink);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone-call-pill-cb{background:rgba(255,255,255,.14);color:var(--ink);box-shadow:none}}

.phone-cc{width:236px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.72);border:1px solid #fff;backdrop-filter:blur(20px);box-shadow:0 12px 26px -14px rgba(40,55,80,.45)}
:root[data-theme="dark"] .phone-cc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone-cc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}}
.phone-cc:has(.phone-cc-tr){width:270px}
.phone-cc-h{display:flex;align-items:center;gap:10px;padding:12px 14px}
.phone-cc-ic{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--pri-pale);color:var(--pri-deep)}
.phone-cc-ic svg{width:15px;height:15px;stroke-width:1.8}
.phone-cc-ic.in{background:rgba(111,154,124,.14);color:#6f9a7c}
.phone-cc-h div{flex:1;min-width:0}
.phone-cc-h b{display:block;font:600 14px var(--font-display);color:var(--ink)}
.phone-cc-h small{display:block;font-size:11.5px;color:var(--ink2);margin-top:2px}
.phone-cc-du{font:400 20px 'Outfit',var(--font-display);color:var(--ink);flex-shrink:0}
.phone-cc-tr{padding:4px 14px 10px;display:flex;flex-direction:column;gap:7px;max-height:260px;overflow-y:auto;scrollbar-width:none}
.phone-cc-tr::-webkit-scrollbar{display:none}
.phone-cc-tr p{margin:0;font:13px/1.6 var(--font-display);color:var(--ink)}
.phone-cc-tr p.me{text-align:right;color:var(--ink2)}
.phone-cc-tr p i{font-style:italic;color:var(--ink2);font-size:12px}
.phone-cc-more{text-align:center;font-size:11.5px;color:var(--ink2)}
.phone-cc-ft{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-top:1px solid color-mix(in srgb,var(--pri) 13%,transparent);font-size:12px;color:var(--accent-text)}
.phone-cc-ft span{color:var(--ink2)}
.phone-cc-ft button{border:none;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}

/* ── §3 联系人页 (frontend/js/apps/wechat.js: openWechatContactProfile) ── */
/* §3 联系人页: floating glass circles (reuses .phone-rb, same as 最近/通讯录/拨号's own .phone-top),
   not a solid bar - matches docs/phone-call.png's "联系人" panel exactly (two .rb circles, no bg/title
   row behind them). Replaces the old WeChat .wechat-profile-nav bar this page used to inherit. */
.phone-ct-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 0}
.phone-ct{display:flex;flex-direction:column;align-items:center;margin-top:12px}
.phone-ct-av{width:104px;height:104px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 18px 30px -16px rgba(30,40,60,.4)}
.phone-ct-av img{width:100%;height:100%;object-fit:cover}
.phone-ct b{margin-top:14px;font:600 26px var(--font-display);color:var(--ink)}
.phone-ct-tag{margin-top:6px;font-size:12px;padding:3px 12px;border-radius:12px;background:color-mix(in srgb,#F7D27A 35%,transparent);color:var(--ink)}
.phone-acts{display:flex;gap:10px;margin:20px 18px 0}
.phone-acts button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 0;border-radius:18px;border:none;background:var(--panel-glass);border:1px solid var(--line-soft,rgba(255,255,255,.7));font-size:12px;color:var(--accent-text);box-shadow:0 8px 16px -12px rgba(40,55,80,.3);cursor:pointer;font-family:inherit}
.phone-acts button svg{width:18px;height:18px;stroke-width:1.7}
.phone-ir{padding:12px 16px}
.phone-ir+.phone-ir{border-top:1px solid var(--border)}
.phone-ir small{display:block;font-size:11.5px;color:var(--ink2)}
.phone-ir div{font-size:15px;margin-top:2px;color:var(--ink)}
.phone-ir .num{font:16px 'Outfit',var(--font-display);letter-spacing:.04em;color:var(--accent-text);display:flex;align-items:center;gap:8px;cursor:pointer}
.phone-ir .num svg{width:14px;height:14px;stroke-width:1.8;opacity:.6}
.phone-rl{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;font-size:14px;color:var(--ink);border:none;background:none;width:100%;font-family:inherit;cursor:pointer;text-align:left}
.phone-rl+.phone-rl{border-top:1px solid var(--border)}
.phone-rl span{color:var(--ink2);font-size:12.5px}

/* ===== Call polish (hand-written, keep LAST) =====
   input pill gets room above the 3 buttons; send = filled round button (like the chat composer);
   hang-up icon white on a deeper coral (--on-coral is near-black, which read as a grey icon on pink). */
.pc-cin{bottom:calc(142px + var(--sab))}
.pc-action-pop{bottom:calc(200px + var(--sab))}
.pc-subs{max-height:calc(100% - 350px)}
.pc-cin i{background:var(--pri-deep);color:var(--on-pri-deep,#fff);box-shadow:0 4px 10px -4px color-mix(in srgb,var(--pri-deep) 60%,transparent)}
:root[data-theme="dark"] .pc-cin i{background:var(--pri-deep);color:#16181e}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-cin i{background:var(--pri-deep);color:#16181e}}
.pc-ctl2 .phone-cb.hang i{background:linear-gradient(160deg,color-mix(in srgb,var(--coral) 72%,#fff),color-mix(in srgb,var(--coral) 78%,#7a2e25));color:#fff}
.pc-ctl2 .phone-cb.hang i svg{stroke:#fff}

/* ===== Keypad + 空号 polish (hand-written, keep LAST) ===== */
.phone-keys .phone-key-tool{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink2);cursor:pointer}
.phone-keys .phone-key-tool svg{width:24px;height:24px;stroke-width:1.7}
.phone-keys .phone-key-tool small{margin-top:4px;letter-spacing:.08em}
.phone-keys .phone-key-tool:disabled{opacity:.3;cursor:default}
.phone-keys .phone-key-tool:not(:disabled):active{background:var(--panel-glass)}
.pc-empty{padding-top:calc(150px + var(--sat,0px));cursor:pointer}
.pc-empty-ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--panel-glass,rgba(255,255,255,.7));border:1px solid rgba(255,255,255,.8);color:var(--coral-text,#b8706a);box-shadow:0 12px 26px -14px rgba(60,85,125,.35)}
.pc-empty .pc-empty-ic svg{width:30px;height:30px;stroke-width:1.8}
.pc-empty b{margin-top:22px;font:300 34px 'Outfit',var(--font-display);letter-spacing:.06em;color:var(--ink)}
.pc-empty small{margin-top:10px;font-size:15px;letter-spacing:.04em;color:var(--ink)}
.pc-empty em{margin-top:6px;font-style:normal;font-size:12.5px;color:var(--ink2)}
:root[data-theme="dark"] .pc-empty-ic{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-empty-ic{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);box-shadow:none}}

/* ===== 来电「回一条消息」popup (hand-written, keep LAST) ===== */
.pc-reply-link button{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:18px;background:var(--panel-glass,rgba(255,255,255,.7));border:1px solid rgba(255,255,255,.8);color:var(--ink);font-family:inherit;font-size:13px;box-shadow:0 8px 18px -12px rgba(60,85,125,.35)}
.pc-reply-link button svg{width:15px;height:15px;color:var(--pri-deep)}
:root[data-theme="dark"] .pc-reply-link button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);box-shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-reply-link button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);box-shadow:none}}
:lang(en) .pc-cw small{letter-spacing:.04em}
.pc-qr{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:0 22px;background:rgba(40,55,80,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .16s}
.pc-qr-card{width:100%;max-width:360px;border-radius:26px;padding:18px;background:rgba(255,255,255,.9);border:1px solid #fff;box-shadow:0 24px 50px -20px rgba(40,55,80,.45);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.pc-qr-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc-qr-head b{font:600 16px var(--font-display);color:var(--ink)}
.pc-qr-x{width:30px;height:30px;border:none;border-radius:50%;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink2);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.pc-qr-x svg{width:15px;height:15px}
.pc-qr-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pc-qr-list button{text-align:left;border:1px solid color-mix(in srgb,var(--pri) 18%,transparent);background:color-mix(in srgb,var(--pri) 8%,#fff);color:var(--ink);border-radius:16px;padding:11px 14px;font-family:inherit;font-size:14px;cursor:pointer}
.pc-qr-list button:active{background:color-mix(in srgb,var(--pri) 18%,#fff)}
.pc-qr-input{display:flex;align-items:center;gap:6px;margin-top:10px;padding:5px 5px 5px 14px;border-radius:22px;background:#fff;border:1px solid color-mix(in srgb,var(--pri) 18%,transparent)}
.pc-qr-input input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--ink);font:inherit;font-size:14px}
.pc-qr-input input:focus{box-shadow:none!important;border-color:transparent!important}
.pc-qr-input button{width:32px;height:32px;border:none;border-radius:50%;display:grid;place-items:center;background:var(--pri-deep);color:var(--on-pri-deep,#fff);cursor:pointer;flex-shrink:0}
.pc-qr-input button:disabled{opacity:.35;cursor:default}
.pc-qr-input button svg{width:16px;height:16px}
:root[data-theme="dark"] .pc-qr{background:rgba(0,0,0,.45)}
:root[data-theme="dark"] .pc-qr-card{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .pc-qr-list button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .pc-qr-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .pc-qr-input button{color:#16181e}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-qr{background:rgba(0,0,0,.45)}:root:not([data-theme="light"]) .pc-qr-card{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:rgba(255,255,255,.1)}:root:not([data-theme="light"]) .pc-qr-list button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}:root:not([data-theme="light"]) .pc-qr-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}:root:not([data-theme="light"]) .pc-qr-input button{color:#16181e}}

/* 通话结束 auto-closes; English letter-spacing like the other call labels */
:lang(en) .pc-endtime small{letter-spacing:.04em}

/* focus polish (hand-written, keep LAST): 通讯录搜索 - same bug/fix as .pc-cin above. */
.phone-srch input{-webkit-appearance:none;appearance:none}
.phone-srch input:focus{outline:none!important;border-color:transparent!important;box-shadow:none!important}
.phone-srch:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 22%,transparent)}

/* ===== 夜航蓝 通话层 (claude/phone-app-redesign-2026-10-15.md; keep LAST) =====
   Same elements as before, only the look: a soft 夜航蓝 glow over the theme background, two rings spreading
   from the avatar while it rings, frosted-glass controls, rose 挂断/拒接 and 夜航蓝 接听. The layer floats
   in (grows from slightly smaller + fades) and leaves the same way reversed. */
.phone-call-screen .pc-bg,.phone-call-screen .pc-bg.warm{background:radial-gradient(90% 45% at 50% 22%,var(--pn-glow),transparent 72%),linear-gradient(180deg,var(--surface),var(--bg))}
.pc-bg-av{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(36px) saturate(.9);opacity:.5;transform:scale(1.1)}
.pc-bg-av::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--pn-glass),var(--bg))}
.phone-call-screen.pc-entering{animation:pcLayerIn var(--mo-slow,.24s) var(--mo-ease-out,ease) both}
.phone-call-screen.pc-leaving{animation:pcLayerOut .22s ease-in both;pointer-events:none}
@keyframes pcLayerIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes pcLayerOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.97)}}
.pc-avw{position:relative;display:block;width:112px;height:112px}
.pc-avw .pc-av{width:112px;height:112px;border:none;box-shadow:0 18px 40px -16px var(--pn-glow)}
.pc-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--pn-glow);animation:pcRing 2.4s ease-out infinite}
.pc-ring.r2{animation-delay:1.2s}
@keyframes pcRing{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.pc-ring{animation:none;opacity:.5;transform:scale(1.15)}.phone-call-screen.pc-entering,.phone-call-screen.pc-leaving{animation:none}}
.pc-cw small{letter-spacing:.16em}
.phone-cb i{background:var(--pn-glass);border:1px solid var(--pn-edge);color:var(--ink);box-shadow:var(--pn-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:transform var(--mo-release,.38s) var(--mo-ease-bounce,ease)}
.phone-cb:active i{transform:scale(.88);transition-duration:var(--mo-fast,.09s)}
.phone-cb.end i,.pc-ctl2 .phone-cb.hang i{background:var(--pn-rose);border:0;color:var(--pn-on);box-shadow:var(--pn-rose-shadow)}
.phone-cb.end i svg,.pc-ctl2 .phone-cb.hang i svg{stroke:var(--pn-on)}
.pc-ctl2 .phone-cb.hang{color:var(--ink2)}
.phone-cb.ans i{background:var(--pn-blue);border:0;color:var(--pn-on);box-shadow:var(--pn-blue-shadow);animation:pcNudge 1.6s ease-in-out infinite}
@keyframes pcNudge{0%,100%{transform:none}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.phone-cb.ans i{animation:none}}
.phone-cb.on i,.pc-ctl2 .phone-cb.remember.saved i{background:var(--pn-pale);color:var(--pn)}
.pc-ctl-in{gap:96px}
.pc-wave{color:var(--pn)}
.pc-wave path{stroke-dasharray:6 4;animation:pcFlow 1.2s linear infinite;animation-play-state:paused}
.pc-wave.on path{animation-play-state:running}
@keyframes pcFlow{to{stroke-dashoffset:-20}}
/* 通话中 字幕: TA's latest line centred, older ones fade back; the user's own lines sit right in pale 夜航蓝 bubbles */
.pc-subs{scroll-behavior:smooth;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
.pc-sub{text-align:center;align-self:center;animation:moRise var(--mo-base,.18s) var(--mo-ease-out,ease) backwards}
.pc-sub[data-call-line]{align-self:center}
.pc-sub.me,.pc-sub.me[data-call-line]{align-self:flex-end;max-width:80%;text-align:right;font-size:13.5px;color:var(--pn-text);padding:7px 13px;margin:0;border-radius:16px 16px 6px 16px;background:var(--pn-pale);opacity:1}
.phone-call-screen[data-fs="s"] .pc-sub{font-size:16px}.phone-call-screen[data-fs="s"] .pc-sub.old{font-size:13px}
.phone-call-screen[data-fs="l"] .pc-sub{font-size:22px}.phone-call-screen[data-fs="l"] .pc-sub.old{font-size:16.5px}.phone-call-screen[data-fs="l"] .pc-sub.me{font-size:15.5px}
.pc-cin{background:var(--pn-glass);border-color:var(--pn-edge);box-shadow:var(--pn-shadow)}
.pc-cin i,.pc-qr-input button{background:var(--pn-blue);color:var(--pn-on);box-shadow:none}
.pc-cin:focus-within{box-shadow:0 0 0 2px var(--pn-glow),var(--pn-shadow)}
.pc-action-pop{background:var(--pn-glass);border-color:var(--pn-edge);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:var(--pn-shadow);border-radius:22px;padding:14px;animation:moDialogIn var(--mo-slow,.24s) var(--mo-ease-out,ease) backwards}
.pc-action-pop b{font-weight:500;letter-spacing:.08em}
.pc-action-pop button{background:var(--pn-solid);color:var(--ink);box-shadow:inset 0 0 0 1px var(--pn-pale);border-radius:999px;font-style:normal}
.pc-action-pop button.custom{color:var(--pn-text)}
/* 来电 */
.pc-why{background:var(--pn-glass);border-color:var(--pn-edge);box-shadow:var(--pn-shadow);border-radius:20px 20px 20px 6px;font-size:14px;line-height:1.6;max-width:280px;margin:26px auto 0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.pc-why em{display:block;font-style:normal;font-size:10.5px;color:var(--ink2);letter-spacing:.1em;margin-bottom:3px}
.pc-reply-link button{background:none;border:none;box-shadow:none;color:var(--pn-text)}
.pc-reply-link button svg{color:var(--pn)}
.pc-qr{background:var(--pn-dim)}
.pc-qr.closing{animation:moFade .18s ease-in reverse both}
.pc-qr-card{animation:moDialogIn var(--mo-slow,.24s) var(--mo-ease-out,ease) backwards}
.pc-qr.closing .pc-qr-card{transform:scale(.96);opacity:0;transition:transform .18s ease-in,opacity .18s ease-in}
.pc-qr-list button{background:var(--pn-soft);border-color:var(--pn-pale)}
/* 结束 */
.pc-endtime b{font-weight:400}
.pc-endtime small{letter-spacing:.3em}
.pc-note{background:var(--pn-glass);border-color:var(--pn-edge);box-shadow:var(--pn-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:moDialogIn var(--mo-slow,.24s) var(--mo-ease-out,ease) backwards}
.pc-note small{letter-spacing:.12em}
.pc-note.pc-loading span{background:var(--pn)}
.pc-endb button{background:var(--pn-solid);color:var(--pn-text);box-shadow:var(--pn-shadow);transition:transform var(--mo-release,.38s) var(--mo-ease-bounce,ease)}
.pc-endb button:active{transform:scale(.94);transition-duration:var(--mo-fast,.09s)}
.pc-endb button.w{background:var(--pn-blue);color:var(--pn-on);box-shadow:var(--pn-blue-shadow)}
.pc-empty-ic{background:var(--pn-miss-bg);border:none;color:var(--pn-miss);box-shadow:none}

/* ===== 全屏页: 电话设置 / 完整通话记录 ===== */
.phone-page{position:fixed;inset:0;left:0;right:0;margin:0 auto;max-width:430px;z-index:58;color:var(--ink);font-family:var(--font-body)}
.phone-page-dim{position:absolute;inset:0;background:var(--pn-dim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:moFade var(--mo-base,.18s) ease-out backwards}
.phone-page-panel{position:absolute;inset:0;background:radial-gradient(130% 40% at 50% 0%,var(--pn-glow),transparent 72%),var(--bg);animation:moPageIn var(--mo-slow,.24s) var(--mo-ease-out,ease) backwards;display:flex;flex-direction:column}
.phone-page.leaving .phone-page-dim{animation:moFade .2s ease-in reverse both}
.phone-page.leaving .phone-page-panel{animation:pcLayerOut .22s ease-in both}
.phone-page-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding-top:var(--sat,0px)}
.phone-page-scroll::-webkit-scrollbar{display:none}
.phone-page-end{height:calc(36px + var(--sab))}
.phone-page-end.tall{height:calc(110px + var(--sab))}
.phone-sec{margin:26px 22px 8px;font-size:12px;color:var(--ink2);letter-spacing:.14em}
.phone-grp{margin:0 18px;border-radius:24px;overflow:hidden;background:var(--pn-glass);border:1px solid var(--pn-edge);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--pn-shadow)}
.phone-it{display:block;width:100%;padding:14px 16px;border:none;background:none;text-align:left;font:inherit;color:inherit}
.phone-it+.phone-it{border-top:1px solid var(--pn-line)}
.phone-ih{display:flex;align-items:center;gap:12px}
.phone-ih>div{flex:1;min-width:0}
.phone-ih b{display:block;font:500 14.5px var(--font-display);color:var(--ink)}
.phone-ih small{display:block;font-size:11.5px;color:var(--ink2);margin-top:3px;line-height:1.5}
.phone-go{cursor:pointer}
.phone-go .phone-ih>span{display:flex;align-items:center;gap:2px;font-size:12.5px;color:var(--ink2);flex-shrink:0}
.phone-go svg{width:14px;height:14px;stroke-width:1.8}
.phone-badge{font-size:10px;font-weight:400;padding:2px 8px;border-radius:999px;background:var(--pn-pale);color:var(--pn-text);margin-left:6px;vertical-align:2px;letter-spacing:.06em}
.phone-tg{position:relative;width:50px;height:30px;border-radius:999px;border:none;flex-shrink:0;cursor:pointer;background:var(--pn-pale);transition:background .3s}
.phone-tg::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:var(--pn-shadow);transition:transform .45s var(--mo-ease-bounce,ease)}
.phone-tg.on{background:var(--pn-blue)}
.phone-tg.on::after{transform:translateX(20px)}
.phone-sseg{display:flex;margin-top:11px;padding:3px;border-radius:14px;background:var(--pn-pale)}
.phone-sseg button{flex:1;border:none;background:none;padding:7px 0;border-radius:11px;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;transition:background .3s var(--mo-ease-bounce,ease),color .25s,box-shadow .3s}
.phone-sseg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--pn-shadow)}
.phone-sseg.dis{opacity:.4}
.phone-kp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.phone-kc{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0 10px;border-radius:18px;border:1.5px solid transparent;background:var(--pn-soft);font:inherit;font-size:11.5px;color:var(--ink2);cursor:pointer;transition:border-color .25s,background .25s}
.phone-kc.on{border-color:var(--pn);background:var(--pn-pale);color:var(--pn-text)}
.phone-keys.mini{display:block;margin:0}
.phone-keys.mini .phone-key{width:48px;height:48px}
.phone-keys.mini .phone-key b{font-size:20px}
.phone-subp{margin-top:12px;padding:14px;border-radius:16px;background:var(--pn-soft);text-align:center;font:16px/1.65 var(--font-display);color:var(--ink);transition:font-size .3s}
.phone-subp.fs-s{font-size:13.5px}.phone-subp.fs-l{font-size:19px}
.phone-subp em{display:block;font-size:.75em;color:var(--ink2)}
.phone-bgc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.phone-bgc button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:16px;border:1.5px solid transparent;background:var(--pn-soft);font:inherit;font-size:11.5px;color:var(--ink2);cursor:pointer}
.phone-bgc button.on{border-color:var(--pn);color:var(--pn-text)}
.phone-bgc i{display:block;width:100%;height:64px;border-radius:11px}
.phone-bgc .bg-theme{background:radial-gradient(90% 60% at 50% 25%,var(--pn-glow),transparent 72%),linear-gradient(180deg,var(--surface),var(--bg))}
.phone-bgc .bg-avatar{background:radial-gradient(circle at 50% 40%,var(--pn-2),var(--pn));filter:blur(1px) saturate(.8)}
.phone-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.phone-chip{display:flex;align-items:center;gap:4px;padding:6px 7px 6px 12px;border-radius:999px;background:var(--pn-solid);border:1px solid var(--pn-pale);font-size:12.5px;color:var(--ink)}
.phone-chip button,.phone-rl2 button{width:20px;height:20px;border:none;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--pn-pale);color:var(--ink2);cursor:pointer;flex-shrink:0}
.phone-chip svg,.phone-rl2 svg{width:10px;height:10px;stroke-width:2.2}
.phone-rlist{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.phone-rl2{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 13px;border-radius:14px;background:var(--pn-solid);border:1px solid var(--pn-pale);font-size:12.5px;color:var(--ink)}
.phone-rl2 span{flex:1;min-width:0}
.phone-add{display:flex;align-items:center;gap:6px;margin-top:9px}
.phone-add input{flex:1;min-width:0;border:1px solid var(--pn-pale);background:var(--pn-glass);border-radius:14px;padding:8px 12px;font:inherit;font-size:12.5px;color:var(--ink);outline:none}
.phone-add input:focus{border-color:var(--pn)!important;box-shadow:none!important}
.phone-add button{border:none;border-radius:12px;padding:8px 13px;font:inherit;font-size:12.5px;background:var(--pn-blue);color:var(--pn-on);cursor:pointer;flex-shrink:0}
.phone-cost{margin:10px 22px 0;font-size:11.5px;line-height:1.6;color:var(--ink2)}
/* 完整通话记录 */
.phone-tr-hd{display:flex;align-items:center;gap:13px;margin:18px 18px 0}
.phone-tr-av{width:54px;height:54px;border-radius:50%;overflow:hidden;flex-shrink:0}
.phone-tr-av img{width:100%;height:100%;object-fit:cover}
.phone-tr-hd b{display:block;font:600 20px var(--font-display);color:var(--ink)}
.phone-tr-hd small{display:block;font-size:12px;color:var(--ink2);margin-top:3px}
.phone-tr-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 18px 0}
.phone-tr-tags span{font-size:11.5px;padding:4px 11px;border-radius:999px;background:var(--pn-pale);color:var(--pn-text);letter-spacing:.04em}
.phone-tr-card{margin:16px 18px 0;padding:14px 16px;border-radius:22px;background:var(--pn-glass);border:1px solid var(--pn-edge);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--pn-shadow)}
.phone-tr-card.note{margin-top:22px}
.phone-tr-card em{display:block;font-style:normal;font-size:10.5px;color:var(--ink2);letter-spacing:.12em;margin-bottom:5px}
.phone-tr-card p{margin:0;font:14px/1.7 var(--font-display);color:var(--ink)}
.phone-tr-card .sg{text-align:right;font-size:12px;color:var(--ink2);margin-top:6px}
.phone-tr-dv{display:flex;align-items:center;gap:10px;margin:22px 22px 6px;font-size:11px;color:var(--ink2);letter-spacing:.2em}
.phone-tr-dv::before,.phone-tr-dv::after{content:"";flex:1;height:1px;background:var(--pn-pale)}
.phone-tr-lines{display:flex;flex-direction:column;gap:14px;padding:6px 18px}
.phone-tl{position:relative;max-width:86%;animation:moRise var(--mo-base,.18s) var(--mo-ease-out,ease) backwards;animation-delay:calc(var(--i,0) * 35ms)}
.phone-tl time{display:block;font-size:10.5px;color:var(--ink2);margin-bottom:3px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.phone-tl p{margin:0;font:15px/1.65 var(--font-display);color:var(--ink);padding:2px 4px;border-radius:12px;transition:background .3s,box-shadow .3s}
.phone-tl.ta{align-self:flex-start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.phone-tl.me{align-self:flex-end;text-align:right}
.phone-tl.me p{font-size:13.5px;color:var(--pn-text);padding:7px 13px;border-radius:16px 16px 6px 16px;background:var(--pn-pale)}
.phone-tl.na{align-self:center;max-width:100%;text-align:center;font-size:12.5px;font-style:italic;color:var(--ink2)}
.phone-tl.ta.holding p{background:var(--pn-pale);box-shadow:0 0 0 6px var(--pn-soft)}
.phone-tl.ta.kept p{background:var(--pn-soft)}
.phone-tl.ta.kept::after{content:"";position:absolute;right:-18px;top:22px;width:9px;height:12px;background:var(--pn);clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);animation:phoneKeyJelly .4s ease-out both}
.phone-tr-hint{margin:14px 22px 0;text-align:center;font-size:11px;color:var(--ink2);letter-spacing:.06em}
.phone-tr-bar{position:absolute;left:14px;right:14px;bottom:calc(14px + var(--sab));display:flex;gap:10px;padding:8px;border-radius:26px;background:var(--pn-glass);border:1px solid var(--pn-edge);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:var(--pn-shadow);animation:moRise var(--mo-slow,.24s) var(--mo-ease-out,ease) .08s backwards}
.phone-tr-bar button{flex:1;border:none;padding:12px 0;border-radius:19px;font:inherit;font-size:14px;background:var(--pn-solid);color:var(--pn-text);cursor:pointer;transition:transform var(--mo-release,.38s) var(--mo-ease-bounce,ease)}
.phone-tr-bar button:active{transform:scale(.94);transition-duration:var(--mo-fast,.09s)}
.phone-tr-bar button.pri{background:var(--pn-blue);color:var(--pn-on)}
/* the older dark-mode rules further up name these same elements with :root[data-theme] in front (higher
   specificity), so the 夜航蓝 look restates them for dark once more - only tokens, both dark blocks. */
:root[data-theme="dark"] .phone-call-screen :is(.pc-bg,.pc-bg.warm){background:radial-gradient(90% 45% at 50% 22%,var(--pn-glow),transparent 72%),linear-gradient(180deg,var(--surface),var(--bg))}
:root[data-theme="dark"] .phone-call-screen :is(.phone-cb.end i,.pc-ctl2 .phone-cb.hang i){background:var(--pn-rose);border:0;color:var(--pn-on)}
:root[data-theme="dark"] .phone-call-screen .phone-cb.ans i,:root[data-theme="dark"] .phone-call-screen :is(.pc-cin i,.pc-endb button.w,.pc-qr-input button){background:var(--pn-blue);border:0;color:var(--pn-on)}
:root[data-theme="dark"] .phone-call-screen .pc-reply-link button{background:none;border:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .phone-call-screen :is(.pc-bg,.pc-bg.warm){background:radial-gradient(90% 45% at 50% 22%,var(--pn-glow),transparent 72%),linear-gradient(180deg,var(--surface),var(--bg))}
  :root:not([data-theme="light"]) .phone-call-screen :is(.phone-cb.end i,.pc-ctl2 .phone-cb.hang i){background:var(--pn-rose);border:0;color:var(--pn-on)}
  :root:not([data-theme="light"]) .phone-call-screen .phone-cb.ans i,:root:not([data-theme="light"]) .phone-call-screen :is(.pc-cin i,.pc-endb button.w,.pc-qr-input button){background:var(--pn-blue);border:0;color:var(--pn-on)}
  :root:not([data-theme="light"]) .phone-call-screen .pc-reply-link button{background:none;border:none}
}