/* Fake Call Screen */

/* Reuse the compact selector look from other fake-* tools */
.compact-screen-selector { display: flex; flex-wrap: wrap; gap: 10px; }
.screen-option .screen-input { position: absolute; opacity: 0; }
.screen-option .screen-label {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    border: 2px solid var(--bs-border-color); border-radius: 10px; cursor: pointer;
    transition: border-color .15s;
}
.screen-option .screen-input:checked + .screen-label {
    border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle);
}
.screen-option .screen-icon { width: 22px; height: 22px; }

/* ---------- Fullscreen overlay ---------- */
.fake-call-overlay {
    position: fixed; inset: 0; z-index: 99999; background: #000; color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    user-select: none;
}
.fc-exit {
    position: absolute; top: 14px; right: 16px; z-index: 5;
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1;
    opacity: .8; transition: opacity .4s;
}
.fc-exit-hidden { opacity: 0; pointer-events: none; }

/* Lock-screen wait phase */
.fc-wait {
    height: 100%; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; padding-top: 18vh;
    background: linear-gradient(180deg, #0b1026 0%, #1a1c33 60%, #0b0d1c 100%);
}
.fc-clock { font-size: clamp(64px, 16vw, 110px); font-weight: 200; letter-spacing: 2px; }
.fc-date { font-size: clamp(16px, 3.5vw, 22px); opacity: .85; margin-top: 4px; }

/* Incoming phase */
.fc-incoming, .fc-incall {
    height: 100%; display: flex; flex-direction: column; justify-content: space-between;
    padding: 12vh 24px 8vh;
}
.fc-top { text-align: center; }
.fc-avatar {
    width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%;
    background: linear-gradient(135deg, #8e9aaf, #5c677d);
    display: flex; align-items: center; justify-content: center;
    font-size: 44px; font-weight: 500;
}
.fc-name { font-size: clamp(30px, 7vw, 44px); font-weight: 400; }
.fc-sub { font-size: clamp(15px, 3.5vw, 20px); opacity: .75; margin-top: 6px; }
.fc-timer { font-size: clamp(17px, 4vw, 22px); opacity: .85; margin-top: 10px; font-variant-numeric: tabular-nums; }

.fc-actions { display: flex; justify-content: space-between; padding: 0 8vw; }
.fc-actions-center { justify-content: center; }
.fc-action { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fc-action-label { font-size: 14px; opacity: .85; }

.fc-btn {
    width: 72px; height: 72px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
}
.fc-btn-icon { width: 32px; height: 32px; filter: invert(1); }
.fc-icon-decline { transform: rotate(0deg); }
.fc-accept { background: #34c759; animation: fc-pulse 1.6s infinite; }
.fc-decline { background: #ff3b30; }
@keyframes fc-pulse {
    0% { box-shadow: 0 0 0 0 rgba(52,199,89,.55); }
    70% { box-shadow: 0 0 0 22px rgba(52,199,89,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}

/* In-call icon grid */
.fc-grid { display: flex; justify-content: center; gap: 34px; }
.fc-grid-item {
    width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.14);
    display: flex; align-items: center; justify-content: center;
}
.fc-grid-item img { width: 28px; height: 28px; filter: invert(1); opacity: .9; }

/* iOS look */
.fc-style-iphone .fc-incoming,
.fc-style-iphone .fc-incall {
    background: linear-gradient(180deg, #1c1c2e 0%, #101018 100%);
}

/* Android (Material) look */
.fc-style-android .fc-incoming,
.fc-style-android .fc-incall {
    background: linear-gradient(180deg, #062e24 0%, #0b1214 70%);
}
.fc-style-android .fc-avatar { background: linear-gradient(135deg, #26a69a, #00695c); border-radius: 28%; }
.fc-style-android .fc-btn { border-radius: 30%; }
.fc-style-android .fc-accept { background: #00c853; }
.fc-style-android .fc-decline { background: #d50000; }

@media (max-width: 480px) {
    .fc-btn { width: 64px; height: 64px; }
    .fc-actions { padding: 0 10vw; }
}