/* ── 查手机 · 他的信息 / 通话（js/apps/phone-peek-chat.js）──
   Same palette variables as phone-peek.css (--pk-*), so every colour follows his voice palette and his light / dark mode. */

/* 信息列表：每个联系人一行；通讯录里的「呼叫」 */
.pk-chatlist{margin-top:10px}
.pk-mi-call{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--pk-edge);background:var(--pk-gl2);color:var(--pk-acc);cursor:pointer;padding:0}
.pk-mi-call svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pk-mi[data-peek-call-row]{cursor:pointer}

/* 会话页：顶部呼叫键、底部输入条 */
.pk-thread-call{margin-left:auto;flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--pk-edge);background:var(--pk-gl2);color:var(--pk-acc);cursor:pointer;padding:0}
.pk-thread-call svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pk-chat .pk-scroll{padding-bottom:14px}
.pk-composer,.pk-call-say{display:flex;align-items:center;gap:8px;margin:0 14px calc(10px + var(--sab,0px));padding:6px 6px 6px 16px;border-radius:24px;flex:none}
.pk-composer-in{flex:1;min-width:0;height:36px;border:none;background:transparent;outline:none;color:var(--pk-t1);font:inherit;font-size:16px}
.pk-composer-send{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:none;background:var(--pk-acc);color:var(--pk-on-acc);cursor:pointer;padding:0}
.pk-composer-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pk-composer-send:disabled,.pk-composer-in:disabled{opacity:.5;cursor:default}
.pk-own{cursor:pointer}
.pk-delivered{align-self:flex-end;margin:-4px 4px 0;font-size:11.5px;color:var(--pk-t3)}
.pk-typing{display:inline-flex;align-items:center;gap:4px;padding:12px 14px}
.pk-typing i{width:6px;height:6px;border-radius:50%;background:var(--pk-t3);animation:pkTyping 1.1s ease-in-out infinite}
.pk-typing i:nth-child(2){animation-delay:.18s}.pk-typing i:nth-child(3){animation-delay:.36s}
@keyframes pkTyping{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}

/* 通话：文字通话界面（盖住他的手机；颜色跟他的配色、昼夜） */
.pk-call{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;align-items:center;padding:calc(64px + env(safe-area-inset-top,0px)) 24px calc(24px + var(--sab,0px));
  color:var(--pk-t1);background:radial-gradient(90% 45% at 50% 22%,color-mix(in srgb,var(--pk-acc) 22%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--pk-mid) 24%,var(--pk-pg)),var(--pk-pg))}
.pk-call-head{text-align:center}
.pk-call-av{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:38px;font-weight:600;background:var(--pk-gl2);color:var(--pk-acc);border:1px solid var(--pk-edge);box-shadow:0 0 0 0 color-mix(in srgb,var(--pk-acc) 40%,transparent);animation:pkRing 1.8s ease-out infinite}
.pk-call.live .pk-call-av,.pk-call.missed .pk-call-av{animation:none;box-shadow:none}
@keyframes pkRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pk-acc) 40%,transparent)}100%{box-shadow:0 0 0 26px transparent}}
.pk-call-head h2{margin:0;font-size:26px;font-weight:500}
.pk-call-st{margin:6px 0 0;font-size:15px;color:var(--pk-t2);font-variant-numeric:tabular-nums}
.pk-call.missed .pk-call-st{color:#d4553f}
.pk-call-lines{scrollbar-width:none;flex:1;min-height:0;width:100%;margin:18px 0 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow-y:auto;overscroll-behavior:contain}
.pk-call-lines::-webkit-scrollbar{display:none}
.pk-call-line{align-self:flex-start;max-width:82%;padding:9px 14px;border-radius:18px 18px 18px 6px;font-size:15px;line-height:1.5;overflow-wrap:anywhere;background:var(--pk-gl2);border:1px solid var(--pk-edge)}
.pk-call-note{align-self:center;padding:2px 12px;border-radius:999px;font-size:12px;line-height:1.5;opacity:.72;background:var(--pk-gl2);border:1px solid var(--pk-edge)}
.pk-call-line.me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:color-mix(in srgb,var(--pk-acc) 20%,transparent);border-color:color-mix(in srgb,var(--pk-acc) 30%,transparent)}
.pk-call-say{width:100%;box-sizing:border-box;margin:0 0 14px;background:var(--pk-gl2);border:1px solid var(--pk-edge)}
.pk-call-say[hidden]{display:none}
.pk-call-end{flex:none;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;border:none;background:#d4553f;color:#fff;cursor:pointer;padding:0;box-shadow:0 8px 20px -8px rgba(212,85,63,.6)}
.pk-call-end svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(135deg)}
@media (prefers-reduced-motion:reduce){.pk-call-av,.pk-typing i{animation:none}}
#peek-app-root .pk-composer-in,#peek-app-root .pk-composer-in:focus{border:none;box-shadow:none;background:transparent;border-radius:18px;padding:0 10px;margin:0 -6px 0 -10px}
#peek-app-root .pk-composer-in:focus-visible{outline-offset:-3px}