/* ── 查手机 · 偷看与设置 (js/apps/phone-peek-sneak.js; previews _handoff/phone-peek/peek-risk.html, peek-settings.html) ──
   Only TA's side and a few lines of what she hears: no pulse, no darkened edges (J). */

/* ── 偷看: TA's side, drawn over his phone ── */
#peek-app-root .pks{position:absolute;inset:0;z-index:40;pointer-events:none;color:#eef2ef;--left:1;--amp:1;--sp:.5s;--lc:rgba(190,220,205,.9)}
#peek-app-root .pks.late{--lc:rgba(240,160,120,.95)}
.pks button{font:inherit;color:inherit}
.pks-side{position:absolute;pointer-events:auto;border:0;padding:0;background:none;cursor:pointer;display:none}
.pks-light,.pks-sound,.pks-tag{display:none}
/* 门缝光: a thin light along the top edge, closing in from both sides, cool to warm; a taller invisible tap area under it */
.pks[data-style="light"] .pks-side{display:flex;top:calc(4px + env(safe-area-inset-top,0px));left:30px;right:30px;height:30px;justify-content:center;align-items:flex-start}
.pks[data-style="light"] .pks-light{display:flex;justify-content:center;width:100%}
.pks-light i{display:block;height:3px;width:calc(var(--left) * 100%);border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,var(--lc) 18%,var(--lc) 82%,transparent);box-shadow:0 0 14px 3px var(--lc);transition:width .3s,background .4s,box-shadow .4s}
/* 声波: the camera island widens and shows what you can hear from over there */
.pks[data-style="sound"] .pks-side{display:flex;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%)}
.pks[data-style="sound"] .pks-sound{display:flex;align-items:center;gap:10px;height:32px;padding:0 14px;border-radius:18px;background:#000;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.pks-sound b{font-size:12px;font-weight:400;opacity:.75;width:14px;text-align:center}
.pks-wave{display:flex;align-items:center;gap:2.5px;height:18px}
.pks-wave i{width:2.5px;border-radius:2px;background:linear-gradient(#e7f0ea,#9fb7aa);height:calc(3px + var(--amp) * 15px * var(--h));opacity:calc(.35 + var(--amp) * .65);animation:pks-wv var(--sp) ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1s)}
.pks.late .pks-wave i{background:linear-gradient(#ffd7c2,#e8a17a)}
@keyframes pks-wv{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.pks-sound small{font-size:11.5px;opacity:.7;white-space:nowrap}
/* 玻璃标签: a small liquid-glass tag, the line under it drains */
.pks[data-style="tag"] .pks-side{display:flex;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%)}
.pks[data-style="tag"] .pks-tag{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 16px 9px;border-radius:16px;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.25)}
.pks-tag .t{font-size:12.5px;letter-spacing:.08em;white-space:nowrap}
.pks-tag .t span{opacity:.6;margin-left:6px;font-size:11.5px}
.pks-tag .bar{width:92px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.pks-tag .bar i{display:block;height:100%;width:calc(var(--left) * 100%);background:#e7f0ea;border-radius:2px;transition:width .3s,background .4s}
.pks.late .pks-tag .bar i{background:#e8a17a}
/* tap TA's side: what TA is doing, for two seconds */
.pks-what,.pks-cue{position:absolute;left:50%;z-index:2;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;color:#fff}
.pks-what{top:calc(50px + env(safe-area-inset-top,0px));transform:translate(-50%,-6px) scale(.96);padding:9px 16px;border-radius:14px;font-size:13.5px;text-align:center;
  background:linear-gradient(180deg,rgba(40,48,56,.55),rgba(30,36,42,.45));border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.pks-what.on{opacity:1;transform:translate(-50%,0) scale(1)}
.pks-what small{display:block;margin-top:2px;font-size:11.5px;opacity:.7}
/* a line of what she hears from over there */
.pks-cue{top:calc(96px + env(safe-area-inset-top,0px));transform:translate(-50%,-6px);padding:8px 14px;border-radius:12px;font-size:13px;
  background:rgba(10,12,14,.72);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .4s,transform .4s}
.pks-cue.on{opacity:1;transform:translate(-50%,0)}
/* 放回: always there, in the status bar's empty right corner (at the bottom it would cover his dock - 信息 / 搜索) */
.pks-put{position:absolute;right:14px;top:calc(8px + env(safe-area-inset-top,0px));pointer-events:auto;border:1px solid rgba(255,255,255,.28);
  background:rgba(30,36,42,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-size:13px;font-weight:600;padding:6px 16px;border-radius:999px;cursor:pointer;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.pks-put:focus-visible,.pks-side:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.pks-wave i{animation:none}.pks-what,.pks-cue,.pks-light i,.pks-tag .bar i{transition:none}}

/* ── 选人页: the three states ── */
.pkp-gear{margin-left:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--ink);background:var(--wx-glass);border:1px solid var(--wx-glass-line);box-shadow:0 8px 20px -14px rgba(50,75,110,.5)}
.pkp-gear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pkp-mode{margin:4px 22px 0;font-size:12px;color:var(--ink3,var(--ink2));opacity:.85}
.pkp-tag{position:absolute;left:50%;top:-14px;transform:translateX(-50%);z-index:3;white-space:nowrap;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;
  background:rgba(255,255,255,.85);border:1px solid #fff;color:#364554;box-shadow:0 6px 14px -8px rgba(50,75,110,.4)}
.pkp-sneak .pkp-tag{background:#fff7ea;border-color:#f3dfbd;color:#7a5520}
.pkp-away .pkp-tag{background:rgba(255,255,255,.7);color:#586879}
/* 暂时无法查看: greyed, cannot be opened, says when there may be a chance */
.pkp-slot.pkp-away .pkp-ph{cursor:not-allowed;filter:grayscale(.95) brightness(.92)}
.pkp-slot.pkp-away .pkp-ls::after{content:"";position:absolute;inset:0;background:rgba(240,244,248,.16);pointer-events:none}
.pkp-awaycard{position:relative;z-index:1;display:block;margin-top:auto;margin-bottom:12px;width:calc(100% - 26px);box-sizing:border-box;padding:12px 14px;border-radius:18px;text-align:left;font-size:12px;line-height:1.6}
.pkp-awaycard b{display:block;font-size:13px;font-weight:600;margin-bottom:2px}

/* ── 查手机设置 ── */
#peek-app-root .pks-set{background:var(--wx-bw);color:var(--ink);display:flex;flex-direction:column}
#peek-app-root .pks-set .peek-back{background:var(--wx-glass);border:1px solid var(--wx-glass-line);color:var(--ink);box-shadow:0 8px 20px -14px rgba(50,75,110,.5)}
.pks-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top,0px)) 18px 6px;min-height:52px;box-sizing:border-box}
.pks-top h1{position:absolute;left:50%;transform:translateX(-50%);margin:0;font-size:18px;font-weight:700;letter-spacing:.06em;white-space:nowrap;color:var(--ink)}
.pks-top .sp{width:40px}
/* the list fades out under the bar instead of being cut off by a hard edge */
#peek-app-root .pks-scroll{flex:1;min-height:0;overflow-y:auto;padding:10px 18px calc(30px + env(safe-area-inset-bottom,0px));scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
#peek-app-root .pks-scroll::-webkit-scrollbar{display:none}
.pks-sec{margin:20px 6px 8px;font-size:12.5px;color:var(--ink2)}
.pks-sec:first-child{margin-top:8px}
.pks-card{border-radius:20px;overflow:hidden;background:var(--wx-glass);border:1px solid var(--wx-glass-line);box-shadow:0 8px 20px -14px rgba(50,75,110,.5)}
.pks-row{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:14px 16px;border:0;border-top:1px solid rgba(180,195,210,.25);background:none;font:inherit;font-size:14px;color:var(--ink);text-align:left}
.pks-card > .pks-row:first-child,.pks-card > div:first-child > .pks-row:first-child,.pks-hlist .pks-row:first-child{border-top:0}
.pks-row .m{flex:1;min-width:0}
.pks-row b{font-weight:500}
.pks-row small{display:block;margin-top:3px;font-size:12px;line-height:1.55;color:var(--ink2)}
.pks-link{cursor:pointer}
.pks-link em{font-style:normal;font-size:13px;color:var(--ink2);white-space:nowrap}
.pks-dim{opacity:.45;pointer-events:none}
.pks-sw{position:relative;width:46px;height:28px;border-radius:14px;background:#cfd8e1;border:0;padding:0;cursor:pointer;flex-shrink:0;transition:background .25s}
.pks-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:transform .25s}
.pks-sw.on{background:#5f7893}.pks-sw.on::after{transform:translateX(18px)}
.pks-seg{display:flex;gap:4px;padding:3px;border-radius:12px;background:rgba(180,195,210,.25);flex-shrink:0}
.pks-seg button{border:0;background:none;font:inherit;font-size:12.5px;padding:6px 10px;border-radius:9px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.pks-seg button.on{background:#fff;color:#364554;box-shadow:0 2px 6px rgba(60,90,130,.12)}
.pks-styles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
.pks-sty{border:1px solid transparent;border-radius:14px;padding:8px;background:rgba(255,255,255,.5);cursor:pointer;font:inherit;font-size:12px;color:var(--ink2);display:flex;flex-direction:column;align-items:center;gap:6px}
.pks-sty.on{border-color:#5f7893;color:var(--ink)}
.pks-mini{width:100%;height:44px;border-radius:10px;background:linear-gradient(180deg,#2a3431,#121816);position:relative;overflow:hidden}
.pks-mini.light::before{content:"";position:absolute;top:2px;left:18%;right:18%;height:2px;border-radius:2px;background:#cfe6da;box-shadow:0 0 8px 2px rgba(207,230,218,.8)}
.pks-mini.sound::before{content:"≈ ıılıIılı";position:absolute;top:5px;left:50%;transform:translateX(-50%);background:#000;color:#dfe9e3;font-size:9px;padding:2px 7px;border-radius:8px;white-space:nowrap;letter-spacing:-.5px}
.pks-mini.tag::before{content:"洗澡 · 进行中";position:absolute;top:6px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:9px;padding:2px 7px;border-radius:7px;white-space:nowrap}
.pks-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;display:grid;place-items:center}
.pks-av > *{width:100%;height:100%}
.pks-foot{margin:18px 6px 0;font-size:12px;line-height:1.7;color:var(--ink2)}
/* 重置图鉴 / 显示的角色 (centred dialogs) */
.pks-pick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 12px}
.pks-pick button{border:1px solid rgba(180,195,210,.5);background:rgba(255,255,255,.6);border-radius:999px;padding:8px 16px;font:inherit;font-size:13px;color:#364554;cursor:pointer}
.pks-hlist{max-height:46vh;overflow-y:auto;margin:4px -4px 10px;scrollbar-width:none}
.pks-hlist::-webkit-scrollbar{display:none}
.pks-hlist .pks-row{padding:10px 4px}
@media(prefers-reduced-motion:reduce){.pks-sw,.pks-sw::after{transition:none}}
/* 允许查看: what he would not show her to her face is not there (js/apps/phone-peek-sneak.js peekAllowedFilter) */
#peek-app-root [data-peek-allowed-hidden]{display:none !important}