/* app 頁的回撥來電浮層（2026-08-27，CROSS-PAGE 呈現層刀）。
 *
 * ── 邊界 ──────────────────────────────────────────────────────────────
 * **全部 scoped 在 `.wco`**，零全域選擇器、零 styles.css 改動。
 * 比照 `onboarding-tour.css` 的 per-feature scoped 慣例。
 *
 * ── 視覺是功能態，不是定版 ────────────────────────────────────────────
 * 結構與行為先行，美術微調待 Galant 真機截圖後裁（本刀明文）。
 * 顏色一律走既有 token（`--primary` / `--card` / `--text` …），
 * 主題層（kumo-theme-cream-navy）因此自動套用，不需要第二份色票。
 *
 * ⚠️ 浮層掛在 `document.body`，**不掛在任何 `overflow:hidden` 容器裡**——
 * 那是 CLAUDE.md 已踩過兩次的坑（角色圖鑑氣泡、口說選擇器鎖頭）。
 * ⚠️ 同理 `position: fixed`：祖先鏈上任何 `transform` / `filter` /
 * `will-change` 都會讓它改為相對該祖先定位。掛 body 是唯一安全的做法。
 */

.wco {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 不擋住整頁互動的視覺重量——這是「她打來了」不是 modal 錯誤 */
    background: rgba(0, 0, 0, 0.34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* 呼吸光暈。裁決題 3：autoplay 被拒時它是**主提示**，不是裝飾。
   ⚠️ 用 `inset: 0` + 內縮陰影而不是外擴 box-shadow——外擴會被自己的
   border-box 裁掉，留下一圈亮邊（2026-08-26「第二支手機」那個缺陷的形狀）。 */
.wco__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--primary, #1E3A5F) 26%, transparent) 0%,
        transparent 62%);
    animation: wcoBreathe 2.4s ease-in-out infinite;
}

@keyframes wcoBreathe {
    0%, 100% { opacity: 0.42; }
    50%      { opacity: 1; }
}

/* 尊重系統偏好。動畫是提示不是必要資訊——關掉之後光暈仍在，只是不呼吸。 */
@media (prefers-reduced-motion: reduce) {
    .wco__glow { animation: none; opacity: 0.8; }
    .wco__card { animation: none; }
}

/* v2：把功能態白卡收成一支迷你手機。這裡的日文按鍵是擬真物件的一部分，
   依 2026-08-27 裁決豁免三語並列；可及性名稱仍由 dialog / button 提供。 */
.wco__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    width: min(82vw, 304px);
    min-height: min(520px, 72dvh);
    padding: 66px 24px 45px;
    border: 9px solid var(--text, #1E3A5F);
    border-radius: 42px;
    overflow: hidden;
    background: linear-gradient(
        160deg,
        var(--card, #fff) 0%,
        color-mix(in srgb, var(--card, #fff) 88%, var(--primary, #1E3A5F)) 100%);
    color: var(--text, #1a1a1a);
    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px color-mix(in srgb, var(--card, #fff) 75%, transparent);
    animation: wcoPhoneShake 2.2s ease-in-out infinite;
}

/* 頂部聽筒／感測器與底部 home indicator：只用 CSS，不增裝飾 DOM。 */
.wco__card::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    width: 62px;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text, #1E3A5F) 82%, transparent);
    transform: translateX(-50%);
    box-shadow: 42px 0 0 -1px color-mix(in srgb, var(--text, #1E3A5F) 62%, transparent);
}

.wco__card::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 88px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text, #1E3A5F) 72%, transparent);
    transform: translateX(-50%);
}

/* 一個週期只在開頭左右輕震，後段留白；像口袋裡的來電，不像警報器。 */
@keyframes wcoPhoneShake {
    0%, 18%, 100% { transform: translateX(0) rotate(0); }
    3%  { transform: translateX(-4px) rotate(-0.7deg); }
    6%  { transform: translateX(4px) rotate(0.7deg); }
    9%  { transform: translateX(-3px) rotate(-0.5deg); }
    12% { transform: translateX(3px) rotate(0.5deg); }
    15% { transform: translateX(-1px) rotate(-0.2deg); }
}

/* ⚠️ 頭像是圓形裁切 ⟹ 它自己是 `overflow:hidden`。
   **任何角標／徽章都不得掛在它身上**，要掛就掛 `.wco__card`。
   這條在 CLAUDE.md 有兩次前科，寫在這裡是為了讓下一個人在改樣式時看得到。 */
.wco__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
    background: var(--muted, #eee);
    border: 3px solid color-mix(in srgb, var(--primary, #1E3A5F) 24%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary, #1E3A5F) 18%, transparent);
}

.wco__name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.wco__status {
    font-size: 13px;
    opacity: 0.68;
}

.wco__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: auto;
}

.wco__btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    min-width: 108px;
    min-height: 50px;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 999px;
    transition: filter 0.16s ease, transform 0.16s ease;
}

.wco__btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.wco__btn--answer {
    background: var(--primary, #1E3A5F);
    color: #fff;
    font-weight: 600;
}

.wco__btn--decline {
    background: color-mix(in srgb, var(--sub, #667) 14%, transparent);
    color: var(--text, #1a1a1a);
    order: 0;
}