/* LUB Shakthi — ringing, and the call itself. */

/* ───────────────────────────────────────── the incoming call */

.ring {
    position: fixed; z-index: 90;
    right: 18px; bottom: 18px; left: 18px;
    max-width: 380px; margin-left: auto;
}

.ring-card {
    display: flex; align-items: center; gap: 12px;
    background: #14171F; color: #FAF9F6;
    border-radius: 16px; padding: 13px 14px;
    box-shadow: 0 14px 40px rgba(16,20,28,.34);
    animation: ring-in .22s ease-out;
}

@keyframes ring-in {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.ring-ico {
    width: 42px; height: 42px; flex: none;
    border-radius: 50%; display: grid; place-items: center;
    background: rgba(74,222,128,.16); color: #4ADE80;
}
/* The pulse is what makes it read as ringing rather than as a notification. */
@media (prefers-reduced-motion: no-preference) {
    .ring-ico { animation: ring-pulse 1.4s ease-in-out infinite; }
    @keyframes ring-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.34); }
        60% { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
    }
}

.ring-card .grow { min-width: 0; }
.ring-card strong { display: block; font-size: 14px; line-height: 1.25; }
.ring-card span#ring_what { display: block; font-size: 12px; color: #B8BEC9; }

.ring-yes, .ring-no {
    width: 40px; height: 40px; flex: none;
    border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; color: #fff;
}
.ring-yes { background: #16A34A; }
.ring-yes:hover { background: #15803D; }
.ring-no { background: #DC2626; }
.ring-no:hover { background: #B91C1C; }

@media (max-width: 560px) {
    .ring { left: 12px; right: 12px; bottom: 76px; max-width: none; }
}

/* ───────────────────────────────────────── the call itself */

body.page-call { background: #0B0D12; }

.call-shell {
    display: flex; flex-direction: column;
    height: calc(100dvh - var(--mtop-h, 62px) - var(--mtabs-h, 0px) - var(--mbot-h, 0px));
    min-height: 460px;
    color: #FAF9F6;
}

.call-top {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; flex: none;
}
.call-top .n { font-weight: 700; font-size: 15px; }
.call-top .d { font-size: 12px; color: #9BA3B0; }
.call-top .icon-btn {
    background: rgba(250,249,246,.08);
    border-color: rgba(250,249,246,.14);
    color: #FAF9F6;
}

.call-stage {
    flex: 1; min-height: 0;
    border-radius: 14px; overflow: hidden;
    background: #000;
}
.call-stage iframe { width: 100%; height: 100%; border: 0; display: block; }

.call-fail { padding: 40px 20px; text-align: center; color: #9BA3B0; font-size: 14px; }

.call-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 2px; flex: none;
}
.call-foot .btn-2 {
    background: rgba(250,249,246,.08);
    border-color: rgba(250,249,246,.16);
    color: #FAF9F6;
}
.call-foot .btn-2:hover { background: rgba(250,249,246,.14); }

.call-hangup {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: #DC2626; color: #fff;
    font-size: 14px; font-weight: 650; padding: 11px 20px;
}
.call-hangup:hover { background: #B91C1C; }