/* ==========================================================
   ULTRON INDIVIDUAL INTERNET VOICE CALL V1
   Direct-chat-only additions.
   Existing message/group styles are intentionally untouched.
   ========================================================== */

.ultron-direct-call-button-v1 {
    width: 36px;
    height: 36px;
    min-width: 36px;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

    color: inherit;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease;

    flex: 0 0 auto;
}

.ultron-direct-call-button-v1:hover {
    transform:
        translateY(-1px);

    background:
        rgba(255, 255, 255, 0.10);

    border-color:
        rgba(255, 255, 255, 0.22);
}

.ultron-direct-call-button-v1:active {
    transform: none;
}

.ultron-direct-call-button-v1[hidden] {
    display: none !important;
}

.ultron-direct-call-button-v1 svg,
.ultron-voice-call-layer-v1 svg {
    width: 18px;
    height: 18px;

    fill: currentColor;
}


/* Main call overlay */

.ultron-voice-call-layer-v1 {
    position: fixed;

    inset: 0;

    z-index: 2147483000;

    pointer-events: none;

    font-family: inherit;
}


.ultron-voice-call-active-v1 {
    position: absolute;

    top: 18px;
    right: 18px;

    width:
        min(
            320px,
            calc(100vw - 36px)
        );

    padding: 20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 22px;

    background:
        rgba(18, 18, 22, 0.97);

    color: #ffffff;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.38);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-10px)
        scale(0.98);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;

    pointer-events: auto;

    text-align: center;
}


.ultron-voice-call-active-v1.is-visible {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


.ultron-call-avatar-v1 {
    width: 58px;
    height: 58px;

    margin:
        0 auto 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.06);

    display: flex;

    align-items: center;

    justify-content: center;
}


.ultron-call-peer-v1 {
    font-size: 17px;

    font-weight: 700;
}


.ultron-call-status-v1 {
    margin-top: 5px;

    font-size: 13px;

    opacity: 0.68;
}


.ultron-call-actions-v1 {
    display: flex;

    justify-content: center;

    gap: 14px;

    margin-top: 18px;
}


.ultron-call-action-v1 {
    min-width: 76px;
    min-height: 58px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.06);

    color: #ffffff;

    cursor: pointer;

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;
}


.ultron-call-action-v1 span {
    font-size: 11px;
}


.ultron-call-action-v1.is-muted {
    opacity: 0.60;
}


.ultron-call-end-v1 {
    background:
        rgba(220, 45, 60, 0.90);
}


/* Incoming call */

.ultron-call-incoming-v1 {
    position: absolute;

    left: 50%;

    top: 22px;

    width:
        min(
            520px,
            calc(100vw - 32px)
        );

    padding:
        14px 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 20px;

    background:
        rgba(18, 18, 22, 0.98);

    color: #ffffff;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.38);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    opacity: 0;

    visibility: hidden;

    transform:
        translate(
            -50%,
            -16px
        );

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;

    pointer-events: auto;
}


.ultron-call-incoming-v1.is-visible {
    opacity: 1;

    visibility: visible;

    transform:
        translate(
            -50%,
            0
        );
}


.ultron-call-incoming-label-v1 {
    font-size: 11px;

    opacity: 0.65;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.ultron-call-incoming-name-v1 {
    margin-top: 4px;

    font-size: 16px;

    font-weight: 700;
}


.ultron-call-incoming-actions-v1 {
    display: flex;

    gap: 10px;
}


.ultron-call-round-v1 {
    width: 44px;
    height: 44px;

    border: 0;

    border-radius: 50%;

    color: #ffffff;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


.ultron-call-reject-v1 {
    background:
        rgba(220, 45, 60, 0.94);
}


.ultron-call-answer-v1 {
    background:
        rgba(38, 171, 89, 0.94);
}


@media (max-width: 640px) {

    .ultron-voice-call-active-v1 {
        top: 12px;

        left: 12px;

        right: 12px;

        width: auto;
    }


    .ultron-call-incoming-v1 {
        top: 12px;

        width:
            calc(
                100vw - 24px
            );
    }


    .ultron-direct-call-button-v1 {
        width: 34px;

        height: 34px;

        min-width: 34px;
    }
}