/* CSS Styling for EroCall App */

body {
    background: #0b0f19;
    font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.call-container {
    background: rgba(30, 35, 45, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.badge {
    padding: 0.5em 1em;
    font-family: inherit;
    font-weight: 600;
}

.pulse-green {
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
    animation: pulse-green 2s infinite;
}

.pulse-red {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(25, 135, 84, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
    }
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(220, 53, 69, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Mobile First Phone UI */
.mobile-call-screen {
    height: 100vh;
    /* Fallback */
    height: 100dvh;
    background:
        radial-gradient(ellipse 60% 40% at 50% 25%, rgba(16, 185, 129, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 80% 30% at 50% 20%, rgba(56, 189, 248, 0.06) 0%, transparent 60%),
        linear-gradient(145deg, #1c212c 0%, #000000 100%);
    position: relative;
    /* Optional: hide scrollbars if content overflows */
    overflow: hidden;
}

/* Desktop App Frame Logic */
@media (min-width: 576px) {
    body {
        /* Align the app frame to the center of the desktop */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000 !important;
        /* Extremely dark backdrop for the desktop */
    }

    .mobile-call-screen {
        /* Restrict width and height to look like a modern smartphone */
        width: 414px !important;
        height: 850px !important;
        max-height: 95vh;
        border-radius: 40px;
        box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.1), 0 0 0 10px #1a1e29, 0 0 0 12px #343b4f;
        margin: auto;
    }
}

.caller-avatar {
    width: 160px;
    height: 160px;
    background: linear-gradient(135deg, #3a4150 0%, #20242e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    color: #fff;
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05), 0 8px 30px rgba(0, 0, 0, 0.4);
}

.caller-name-display {
    font-size: 2.2rem;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.call-status-text {
    font-size: 1.15rem;
    color: #9aa0a6;
}

.call-actions-container {
    padding-bottom: 8vh;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-phone {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: white;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.btn-phone:active {
    transform: scale(0.9);
}

.btn-phone-green {
    background: #28a745;
    background: linear-gradient(145deg, #32c153 0%, #228b38 100%);
}

.btn-phone-red {
    background: #dc3545;
    background: linear-gradient(145deg, #e44252 0%, #b82633 100%);
}

/* Custom Green Switch for Availability */
.custom-switch-green:checked {
    background-color: #198754 !important;
    border-color: #198754 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.custom-switch-green:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
    border-color: #198754 !important;
}

#availability-container {
    transition: all 0.3s ease;
}

/* Creator Dashboard Zones */
.zone-a {
    background: linear-gradient(145deg, #1c212c 0%, #000000 100%);
    height: 100dvh;
}

.zone-b-c {
    background-color: #12151c !important;
}

.caller-avatar-huge {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, #3a4150 0%, #20242e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    color: #fff;
    border: 3px solid rgba(255, 255, 255, 0.1);
}