/* call-incoming.css v1 (09-16) · 他打过来时盖上来的来电卡。
   底=通话页那张壁纸(/static/call-bg.jpg)+ 和 call2 同款面纱;卡=磨砂玻璃,透明度用 --ci-glass 调。
   颜色照 call2:金 #e6a3ad / 苔 #9fc2b0;名字细体大字距,和通话页一个语言。 */
.ci-root { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif; color: #eef0f3;
  opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.ci-root.on { opacity: 1; pointer-events: auto; }
.ci-wall { position: absolute; inset: 0; background: url("/static/call-bg.jpg") center center / cover no-repeat; transform: scale(1.04); }
.ci-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,11,15,var(--ci-veil-top, .60)) 0%, rgba(9,11,15,var(--ci-veil-mid, .38)) 45%, rgba(9,11,15,var(--ci-veil-bot, .78)) 100%); }
.ci-card { position: relative; width: min(340px, 100%); padding: 34px 26px 28px; border-radius: 26px; text-align: center;
  background: var(--ci-glass, rgba(14,18,26,.40)); box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  transform: translateY(18px) scale(.98); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ci-root.on .ci-card { transform: none; }
.ci-ring { position: relative; width: 104px; height: 104px; margin: 0 auto; }
.ci-ring img { position: relative; z-index: 2; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.07); }
.ci-ring i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(230,163,173,.55); animation: ci-pulse 2.4s ease-out infinite; }
.ci-ring i:nth-child(3) { animation-delay: 1.2s; }
.ci-ring::before { content: ""; position: absolute; inset: -26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,163,173,.30) 0%, rgba(230,163,173,.12) 55%, rgba(230,163,173,0) 72%); animation: ci-breathe 2.4s ease-in-out infinite; }
@keyframes ci-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ci-breathe { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
.ci-name { margin-top: 22px; font-size: 26px; font-weight: 300; letter-spacing: .14em; }
.ci-kicker { margin-top: 8px; font-size: 11px; letter-spacing: .34em; color: rgba(238,240,243,.5); padding-left: .34em; }
.ci-quote { margin: 22px 4px 0; font-size: 15px; line-height: 1.8; color: rgba(238,240,243,.88); letter-spacing: .02em; word-break: break-word; }
.ci-quote:empty { display: none; }
.ci-acts { display: flex; justify-content: center; gap: 56px; margin-top: 34px; }
.ci-btn { border: 0; background: transparent; color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; -webkit-tap-highlight-color: transparent; font-family: inherit; }
.ci-btn .ci-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06); transition: transform .18s ease, background .25s ease; }
.ci-btn:active .ci-ic { transform: scale(.94); }
.ci-btn.no .ci-ic { background: rgba(255,255,255,.12); color: rgba(238,240,243,.9); }
.ci-btn.no svg { transform: rotate(135deg); }
.ci-btn.yes .ci-ic { background: #9fc2b0; color: #0a0c10; animation: ci-nudge 2.4s ease-in-out infinite; }
@keyframes ci-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ci-btn small { font-size: 12px; letter-spacing: .2em; color: rgba(238,240,243,.75); }
.ci-btn svg { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) { .ci-ring i, .ci-ring::before, .ci-btn.yes .ci-ic { animation: none; } .ci-card, .ci-root { transition: none; } }