/*
 * ITNAONE_CALL_UI_V67
 *
 * Audio/video responsive call screen
 * + local video placement
 * + call history.
 */

/* =========================================================
   CALL SCREEN
   ========================================================= */

#rtCallPage.itna-clean-call {
    box-sizing:border-box !important;
    position:fixed !important;
    inset:0 !important;

    width:100% !important;
    max-width:none !important;

    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;

    margin:0 !important;

    padding:
        calc(env(safe-area-inset-top,0px) + 10px)
        12px
        calc(env(safe-area-inset-bottom,0px) + 12px)
        !important;

    display:flex !important;
    flex-direction:column !important;

    gap:10px !important;

    overflow:hidden !important;

    background:
        radial-gradient(
            circle at 50% 31%,
            rgba(33,74,135,.19),
            transparent 34%
        ),
        #040c17
        !important;
}


/* =========================================================
   TOP BAR
   ========================================================= */

#rtCallPage.itna-clean-call .itna-call-top {
    position:relative !important;
    inset:auto !important;

    flex:0 0 auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;
    min-height:54px !important;

    margin:0 !important;
    padding:0 !important;

    z-index:80 !important;
}

#rtCallPage.itna-clean-call .itna-call-back,
#rtCallPage.itna-clean-call .itna-call-timer {
    position:relative !important;
    inset:auto !important;

    min-height:48px !important;

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

    border-radius:999px !important;

    background:#1b2534 !important;

    border:
        1px solid
        rgba(148,163,184,.34)
        !important;

    color:#fff !important;

    box-shadow:none !important;
}

#rtCallPage.itna-clean-call .itna-call-back {
    gap:6px !important;
    padding:0 17px !important;
}

#rtCallPage.itna-clean-call .itna-call-timer {
    gap:8px !important;
    padding:0 17px !important;
}


/* =========================================================
   PRICE PANEL
   ========================================================= */

#rtCallPage.itna-clean-call
.itna-call-price-panel-v65 {
    position:relative !important;
    inset:auto !important;

    flex:0 0 auto !important;

    width:100% !important;

    margin:0 !important;
    padding:8px !important;

    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr))
        !important;

    gap:8px !important;

    border-radius:22px !important;

    background:
        rgba(11,20,33,.91)
        !important;

    border:
        1px solid
        rgba(119,143,176,.28)
        !important;

    overflow:hidden !important;

    z-index:60 !important;
}

#rtCallPage.itna-clean-call
.itna-call-price-item-v65 {
    min-width:0 !important;
    min-height:72px !important;

    padding:8px 7px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;

    border-radius:18px !important;

    overflow:hidden !important;
}

#rtCallPage.itna-clean-call
.itna-wallet-v65 {
    grid-column:1 / -1 !important;

    min-height:62px !important;
}

#rtCallPage.itna-clean-call
.itna-call-price-item-v65 small {
    display:block !important;

    margin:0 0 4px !important;

    font-size:10px !important;
    line-height:1.15 !important;

    letter-spacing:.16em !important;

    white-space:nowrap !important;
}

#rtCallPage.itna-clean-call
.itna-call-price-item-v65 strong {
    display:block !important;

    width:100% !important;

    font-size:
        clamp(
            17px,
            4.7vw,
            24px
        )
        !important;

    line-height:1.08 !important;

    white-space:nowrap !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


/* =========================================================
   MEDIA AREA
   ========================================================= */

#rtCallPage.itna-clean-call
.itna-call-media {
    position:relative !important;

    flex:1 1 auto !important;

    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    border-radius:26px !important;

    z-index:20 !important;
}


/* network badge must never cover price cards */

#rtCallPage.itna-clean-call
.rt-network-badge,
#rtCallPage.itna-clean-call
.rt-network-status,
#rtCallPage.itna-clean-call
#rtNetworkStatus {
    position:absolute !important;

    top:10px !important;
    left:10px !important;

    right:auto !important;
    bottom:auto !important;

    z-index:75 !important;

    max-width:
        calc(100% - 20px)
        !important;
}


/* =========================================================
   REMOTE VIDEO
   ========================================================= */

#rtCallPage.itna-clean-call.is-video
#rtRemoteVideo {
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    min-width:100% !important;
    min-height:100% !important;

    object-fit:cover !important;

    border:0 !important;
    border-radius:24px !important;

    background:#07101d !important;

    z-index:1 !important;
}


/* =========================================================
   LOCAL VIDEO
   IMPORTANT: always inside media area
   ========================================================= */

#rtCallPage.itna-clean-call.is-video
#rtLocalVideo {
    display:block !important;

    position:absolute !important;

    top:12px !important;
    right:12px !important;

    left:auto !important;
    bottom:auto !important;

    width:
        clamp(
            88px,
            25vw,
            126px
        )
        !important;

    height:auto !important;

    aspect-ratio:3 / 4 !important;

    object-fit:cover !important;

    margin:0 !important;

    border-radius:20px !important;

    border:
        1px solid
        rgba(255,255,255,.38)
        !important;

    background:#101826 !important;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.38)
        !important;

    z-index:70 !important;

    transform:none !important;
}


/* =========================================================
   AUDIO
   ========================================================= */

#rtCallPage.itna-clean-call.is-audio
#rtRemoteVideo,
#rtCallPage.itna-clean-call.is-audio
#rtLocalVideo {
    display:none !important;
}


/* =========================================================
   PERSON
   ========================================================= */

#rtCallPage.itna-clean-call
.itna-call-person {
    position:relative !important;
    inset:auto !important;

    z-index:40 !important;

    width:min(100%,520px) !important;

    margin:auto !important;
    padding:12px !important;

    text-align:center !important;

    pointer-events:none !important;
}

#rtCallPage.itna-clean-call.is-video
.itna-call-person {
    align-self:flex-end !important;

    margin:
        auto auto
        18px
        !important;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.7)
        !important;
}

#rtCallPage.itna-clean-call
.itna-call-avatar {
    width:
        clamp(
            94px,
            29vw,
            132px
        )
        !important;

    height:
        clamp(
            94px,
            29vw,
            132px
        )
        !important;

    margin:
        0 auto 12px
        !important;

    font-size:
        clamp(
            30px,
            9vw,
            46px
        )
        !important;
}

#rtCallPage.itna-clean-call.is-video
.itna-call-avatar {
    width:76px !important;
    height:76px !important;

    font-size:26px !important;

    margin-bottom:7px !important;
}

#rtCallPage.itna-clean-call
.itna-call-person h1 {
    margin:
        4px 0
        !important;

    font-size:
        clamp(
            27px,
            8vw,
            42px
        )
        !important;

    line-height:1.08 !important;
}

#rtCallPage.itna-clean-call.is-video
.itna-call-person h1 {
    font-size:
        clamp(
            23px,
            6vw,
            32px
        )
        !important;
}

#rtCallPage.itna-clean-call
.itna-call-person p {
    margin:
        8px 0 5px
        !important;
}

.itna-call-detail-line-v67 {
    display:flex;
    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:5px;

    margin-top:7px;

    color:#7f91aa;

    font-size:11px;
    line-height:1.35;
}

#rtCallPage.is-video
.itna-call-detail-line-v67 {
    color:
        rgba(255,255,255,.74);
}

.itna-call-history-link-v67 {
    position:relative;

    z-index:100;

    display:inline-flex;

    margin-top:8px;

    padding:7px 11px;

    border-radius:999px;

    color:#80b5ff;

    background:
        rgba(24,53,89,.55);

    border:
        1px solid
        rgba(102,160,238,.25);

    text-decoration:none;

    font-size:11px;
    font-weight:700;

    pointer-events:auto;
}


/* =========================================================
   SOUND UNLOCK PROMPT
   ========================================================= */

#rtCallPage
.itna-v67-sound-prompt {
    position:absolute !important;

    left:12px !important;
    right:12px !important;

    top:auto !important;
    bottom:10px !important;

    width:auto !important;
    max-width:520px !important;

    margin:0 auto !important;

    z-index:120 !important;

    transform:none !important;
}


/* =========================================================
   CONTROLS
   ========================================================= */

#rtCallPage.itna-clean-call
.itna-call-controls {
    position:relative !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    transform:none !important;

    flex:0 0 auto !important;

    width:100% !important;

    min-height:88px !important;

    margin:0 !important;

    padding:6px 4px 2px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:
        clamp(
            14px,
            5vw,
            34px
        )
        !important;

    background:transparent !important;

    z-index:90 !important;
}

#rtCallPage.itna-clean-call
.itna-call-controls
.itna-call-control {
    flex:0 0 auto !important;
}


/* =========================================================
   INCOMING ACCEPT / DECLINE
   ========================================================= */

#rtCallPage.itna-clean-call
.itna-incoming-actions {
    position:absolute !important;

    left:0 !important;
    right:0 !important;

    bottom:
        calc(
            env(safe-area-inset-bottom,0px)
            + 104px
        )
        !important;

    z-index:150 !important;
}


/* =========================================================
   CALL HISTORY
   ========================================================= */

.itna-call-history-v67 {
    width:
        min(
            100%,
            1100px
        );

    margin:
        24px auto
        90px;

    padding:
        0 14px;
}

.itna-call-history-head-v67 {
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:16px;

    margin-bottom:13px;
}

.itna-call-history-head-v67 span {
    display:block;

    margin-bottom:4px;

    color:#3578df;

    font-size:11px;
    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;
}

.itna-call-history-head-v67 h2 {
    margin:0;

    color:#172033;

    font-size:
        clamp(
            22px,
            4vw,
            31px
        );
}

.itna-call-history-head-v67 p {
    margin:
        6px 0 0;

    color:#6e7a8f;

    font-size:13px;
}

.itna-call-history-list-v67 {
    display:grid;

    gap:9px;
}

.itna-call-history-row-v67 {
    display:grid;

    grid-template-columns:
        48px
        minmax(0,1fr)
        auto;

    gap:11px;

    align-items:center;

    padding:13px;

    border-radius:19px;

    background:
        rgba(255,255,255,.92);

    border:
        1px solid
        #dce5f0;

    box-shadow:
        0 7px 22px
        rgba(25,47,79,.06);
}

.itna-call-history-icon-v67 {
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:#edf4ff;

    color:#1768ef;

    font-size:20px;
}

.itna-call-history-main-v67 {
    min-width:0;
}

.itna-call-history-name-v67 {
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;
}

.itna-call-history-name-v67 strong {
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#182235;

    font-size:14px;
}

.itna-call-history-name-v67 span {
    padding:3px 7px;

    border-radius:999px;

    background:#edf4ff;

    color:#2369d5;

    font-size:10px;
    font-weight:700;
}

.itna-call-history-route-v67 {
    margin-top:4px;

    overflow:hidden;

    color:#718096;

    font-size:10px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.itna-call-history-route-v67 span {
    margin:
        0 4px;
}

.itna-call-history-meta-v67 {
    display:flex;

    flex-wrap:wrap;

    gap:5px 10px;

    margin-top:6px;

    color:#7b8799;

    font-size:10.5px;
}

.itna-call-history-money-v67 {
    text-align:right;

    white-space:nowrap;
}

.itna-call-history-money-v67 strong {
    display:block;

    color:#1768ef;

    font-size:15px;
}

.itna-call-history-money-v67 small {
    display:block;

    margin-top:3px;

    color:#8a96a7;

    font-size:9px;
}

.itna-call-history-empty-v67 {
    padding:26px;

    border-radius:18px;

    text-align:center;

    color:#7a8798;

    background:#fff;

    border:
        1px solid
        #dfe7f0;
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width:430px) {

    #rtCallPage.itna-clean-call {
        padding-left:8px !important;
        padding-right:8px !important;

        gap:7px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-top {
        min-height:48px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-back,
    #rtCallPage.itna-clean-call
    .itna-call-timer {
        min-height:44px !important;
        padding:
            0 13px
            !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-price-panel-v65 {
        padding:6px !important;
        gap:6px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-price-item-v65 {
        min-height:61px !important;
        border-radius:15px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-wallet-v65 {
        min-height:52px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-price-item-v65 strong {
        font-size:
            clamp(
                16px,
                5vw,
                21px
            )
            !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-price-item-v65 small {
        font-size:9px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-controls {
        min-height:80px !important;
    }

    .itna-call-history-row-v67 {
        grid-template-columns:
            42px
            minmax(0,1fr);

        padding:11px;
    }

    .itna-call-history-icon-v67 {
        width:40px;
        height:40px;

        border-radius:13px;
    }

    .itna-call-history-money-v67 {
        grid-column:2;

        display:flex;

        align-items:center;

        gap:8px;

        text-align:left;
    }
}


/* =========================================================
   SHORT PHONES
   ========================================================= */

@media
(max-height:720px)
and
(max-width:600px) {

    #rtCallPage.itna-clean-call
    .itna-call-price-item-v65 {
        min-height:54px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-wallet-v65 {
        min-height:46px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-avatar {
        width:78px !important;
        height:78px !important;

        font-size:27px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-person h1 {
        font-size:25px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-controls {
        min-height:70px !important;

        padding-top:2px !important;
    }
}


/* =========================================================
   TABLETS / DESKTOP
   ========================================================= */

@media (min-width:768px) {

    #rtCallPage.itna-clean-call {
        padding-left:24px !important;
        padding-right:24px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-price-panel-v65 {
        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            )
            !important;

        max-width:1100px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    #rtCallPage.itna-clean-call
    .itna-wallet-v65 {
        grid-column:auto !important;
    }

    #rtCallPage.itna-clean-call.is-video
    #rtLocalVideo {
        width:
            clamp(
                130px,
                16vw,
                190px
            )
            !important;
    }
}


/* =========================================================
   LANDSCAPE
   ========================================================= */

@media
(orientation:landscape)
and
(max-height:650px) {

    #rtCallPage.itna-clean-call {
        gap:5px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-price-panel-v65 {
        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            )
            !important;
    }

    #rtCallPage.itna-clean-call
    .itna-wallet-v65 {
        grid-column:auto !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-price-item-v65 {
        min-height:48px !important;
    }

    #rtCallPage.itna-clean-call
    .itna-call-controls {
        min-height:58px !important;
    }
}


/* =========================================================
   ITNAONE_CALL_FIX_V67_1
   Final sound prompt + mobile call spacing
   ========================================================= */

#rtCallPage.itna-v67-1-call {
    box-sizing:border-box !important;
}

.itna-v67-1-sound-prompt {
    position:fixed !important;

    left:50% !important;
    right:auto !important;

    bottom:
        calc(
            env(safe-area-inset-bottom, 0px)
            + 118px
        )
        !important;

    transform:translateX(-50%) !important;

    width:
        min(
            calc(100vw - 32px),
            560px
        )
        !important;

    max-width:
        calc(100vw - 32px)
        !important;

    margin:0 !important;

    z-index:2147483000 !important;
}


/*
 * Call media must retain enough bottom space
 * for Mic/Camera/Flip/End controls.
 */
#rtCallPage.itna-v67-1-call
.itna-call-media {
    min-height:0 !important;
}


/*
 * Prevent price text clipping.
 */
#rtCallPage.itna-v67-1-call
.itna-call-price-item-v65 {
    min-width:0 !important;
    overflow:hidden !important;
}

#rtCallPage.itna-v67-1-call
.itna-call-price-item-v65 strong {
    display:block !important;

    max-width:100% !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

    white-space:nowrap !important;
}


/*
 * Controls always visible.
 */
#rtCallPage.itna-v67-1-call
.itna-call-controls {
    position:relative !important;

    flex-shrink:0 !important;

    width:100% !important;

    box-sizing:border-box !important;

    overflow:visible !important;
}


/* iPhone / Android phones */
@media (max-width:600px) {

    .itna-v67-1-sound-prompt {
        bottom:
            calc(
                env(safe-area-inset-bottom, 0px)
                + 108px
            )
            !important;

        width:
            calc(100vw - 28px)
            !important;
    }

    #rtCallPage.itna-v67-1-call
    .itna-call-price-panel-v65 {
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
    }

    #rtCallPage.itna-v67-1-call
    .itna-wallet-v65 {
        grid-column:1 / -1 !important;
    }

    #rtCallPage.itna-v67-1-call
    .itna-call-price-item-v65 strong {
        font-size:
            clamp(
                16px,
                5vw,
                22px
            )
            !important;
    }
}


/* Narrow phones */
@media (max-width:374px) {

    .itna-v67-1-sound-prompt {
        width:
            calc(100vw - 20px)
            !important;
    }

    #rtCallPage.itna-v67-1-call
    .itna-call-price-item-v65 strong {
        font-size:
            clamp(
                14px,
                4.8vw,
                19px
            )
            !important;
    }
}


/* Short screens */
@media
(max-width:600px)
and
(max-height:740px) {

    .itna-v67-1-sound-prompt {
        bottom:
            calc(
                env(safe-area-inset-bottom, 0px)
                + 92px
            )
            !important;
    }

    #rtCallPage.itna-v67-1-call
    .itna-call-avatar {
        width:76px !important;
        height:76px !important;

        font-size:26px !important;
    }

    #rtCallPage.itna-v67-1-call
    .itna-call-person h1 {
        font-size:24px !important;
    }
}


/* Tablet */
@media (min-width:768px) {

    .itna-v67-1-sound-prompt {
        bottom:120px !important;
    }
}


/* Landscape phone */
@media
(orientation:landscape)
and
(max-height:650px) {

    .itna-v67-1-sound-prompt {
        left:18px !important;

        bottom:18px !important;

        transform:none !important;

        width:
            min(
                360px,
                calc(50vw - 26px)
            )
            !important;
    }
}

/* =========================================================
   ITNAONE_CALL_FRAME_V67_7
   Final mobile/iPhone frame authority.
   Keeps engine/billing untouched.
   ========================================================= */

html.itna-call-layout-v66-2-active,
html.itna-call-layout-v66-2-active body{
    height:100%;
    min-height:100%;
    overflow:hidden !important;
    background:#030c19 !important;
}

body.itna-call-layout-v66-2-active #rtCallPage{
    position:relative !important;
    inset:auto !important;
    transform:none !important;

    width:100% !important;
    max-width:none !important;

    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;

    padding:
        max(6px,env(safe-area-inset-top))
        10px
        max(8px,env(safe-area-inset-bottom))
        !important;

    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;

    overflow:hidden !important;
    box-sizing:border-box !important;
}

/* top bar */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-top,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-top,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-top{
    position:relative !important;
    inset:auto !important;
    transform:none !important;

    flex:0 0 auto !important;

    min-height:50px !important;
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
}

/* back + timer chips smaller on iPhone */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-back,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-back,
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-timer,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-time-chip{
    min-height:44px !important;
    height:44px !important;
    padding:0 14px !important;
    font-size:16px !important;
    border-radius:999px !important;
}

/* billing panel compact */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-price-panel-v65{
    position:relative !important;
    inset:auto !important;
    transform:none !important;

    flex:0 0 auto !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:7px !important;
    gap:7px !important;

    border-radius:20px !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-price-item-v65{
    min-height:58px !important;
    height:auto !important;
    padding:6px 5px !important;
    border-radius:15px !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-wallet-v65{
    grid-column:1/-1 !important;
    min-height:46px !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-price-item-v65 small{
    margin:0 0 3px !important;
    font-size:8px !important;
    line-height:1.05 !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-price-item-v65 strong{
    font-size:clamp(17px,4.7vw,22px) !important;
    line-height:1.05 !important;
}

/* media area becomes the flexible center frame */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-media-stage{
    position:relative !important;
    inset:auto !important;
    transform:none !important;

    flex:1 1 auto !important;

    width:100% !important;
    min-height:0 !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:20px !important;
    overflow:hidden !important;
}

/* remote fills media stage */
body.itna-call-layout-v66-2-active
#rtCallPage #rtRemoteVideo{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}

/* identity centered inside available media space */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-audio-identity,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-person{
    position:absolute !important;
    inset:0 !important;
    transform:none !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:14px 90px 14px 14px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
    pointer-events:none !important;

    z-index:5 !important;
}

/* avatar smaller */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-avatar{
    position:relative !important;
    inset:auto !important;
    transform:none !important;

    width:86px !important;
    height:86px !important;

    margin:0 auto 10px !important;

    font-size:28px !important;

    box-shadow:
        0 0 0 20px rgba(40,105,195,.035),
        0 0 0 38px rgba(40,105,195,.018)
        !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-person h1,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-audio-identity h1,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-person h1{
    margin:4px 0 6px !important;
    font-size:clamp(24px,7vw,32px) !important;
    line-height:1 !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-person p,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-audio-identity p,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-person p{
    margin:0 0 4px !important;
    font-size:15px !important;
}

/* network compact, pinned inside media */
body.itna-call-layout-v66-2-active
#rtCallPage #rtNetworkStatus,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-network-badge,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-network-status{
    position:absolute !important;
    top:10px !important;
    left:10px !important;
    right:auto !important;
    bottom:auto !important;

    margin:0 !important;
    padding:5px 9px !important;

    max-width:46% !important;
    min-height:30px !important;

    font-size:11px !important;
    border-radius:999px !important;

    z-index:20 !important;
}

/* local preview fixed top-right inside media */
body.itna-call-layout-v66-2-active
#rtCallPage #rtLocalVideo{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    bottom:auto !important;
    left:auto !important;

    width:92px !important;
    height:122px !important;

    border-radius:17px !important;
    object-fit:cover !important;

    z-index:21 !important;
}

/* history button stays compact */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-history-button-v67,
body.itna-call-layout-v66-2-active
#rtCallPage [class*="call-history"][role="button"]{
    position:relative !important;
    z-index:8 !important;
}

/* sound unlock becomes a small chip, never a large banner */
body.itna-call-layout-v66-2-active
.itna-call-sound-unlock-v65,
body.itna-call-layout-v66-2-active
.itna-v67-1-sound-prompt{
    position:fixed !important;

    left:50% !important;
    right:auto !important;
    top:auto !important;

    bottom:
        calc(
            94px +
            env(safe-area-inset-bottom,0px)
        )
        !important;

    transform:translateX(-50%) !important;

    width:min(330px,calc(100vw - 32px)) !important;
    min-height:48px !important;

    margin:0 !important;
    padding:7px 10px !important;

    gap:8px !important;

    border-radius:14px !important;

    z-index:2147483000 !important;
}

body.itna-call-layout-v66-2-active
.itna-call-sound-unlock-v65
.itna-call-sound-icon-v65{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    font-size:16px !important;
    border-radius:10px !important;
}

body.itna-call-layout-v66-2-active
.itna-call-sound-unlock-v65 strong{
    font-size:12px !important;
}

body.itna-call-layout-v66-2-active
.itna-call-sound-unlock-v65 small{
    font-size:9px !important;
}

/* bottom controls */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-controls{
    position:relative !important;
    inset:auto !important;
    transform:none !important;

    flex:0 0 auto !important;

    width:100% !important;
    min-height:78px !important;

    margin:0 !important;
    padding:6px 6px 2px !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    justify-content:space-around !important;

    gap:6px !important;

    background:transparent !important;

    z-index:50 !important;
}

/* button sizing */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-controls button,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-controls button,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-controls button{
    min-width:62px !important;
    width:62px !important;
    max-width:62px !important;
}

/* incoming actions same bottom area */
body.itna-call-layout-v66-2-active
#rtCallPage .itna-incoming-actions,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-incoming-actions,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-incoming-actions{
    position:relative !important;
    inset:auto !important;
    transform:none !important;

    flex:0 0 auto !important;

    width:100% !important;

    margin:0 !important;
    padding:8px !important;

    gap:34px !important;

    z-index:50 !important;
}

/* Very short iPhones */
@media (max-height:760px) and (max-width:500px){

    body.itna-call-layout-v66-2-active
    #rtCallPage{
        gap:4px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-call-price-item-v65{
        min-height:50px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-wallet-v65{
        min-height:40px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-call-avatar,
    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-native-call-avatar{
        width:72px !important;
        height:72px !important;
        font-size:24px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage #rtLocalVideo{
        width:78px !important;
        height:104px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-call-controls,
    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-native-call-controls{
        min-height:68px !important;
        padding-top:3px !important;
    }

    body.itna-call-layout-v66-2-active
    .itna-call-sound-unlock-v65{
        bottom:
            calc(
                82px +
                env(safe-area-inset-bottom,0px)
            )
            !important;
    }
}

/* landscape */
@media (orientation:landscape) and (max-height:650px){

    body.itna-call-layout-v66-2-active
    #rtCallPage{
        padding:4px 8px !important;
        gap:4px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-call-price-panel-v65{
        grid-template-columns:
            repeat(5,minmax(0,1fr))
            !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-wallet-v65{
        grid-column:auto !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-call-price-item-v65{
        min-height:42px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage #rtLocalVideo{
        width:84px !important;
        height:96px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-call-controls{
        min-height:56px !important;
    }
}


/* ==========================================================
   ITNAONE_CALL_UI_V68_2
   UI only. No billing / WebRTC logic changes.
   ========================================================== */


/* ---------- CALL PAGE ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage {
    min-height:100dvh !important;
    padding-bottom:
        max(
            18px,
            calc(env(safe-area-inset-bottom,0px) + 10px)
        )
        !important;
}


/* ---------- BILLING PANEL ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-price-panel-v65 {
    margin-bottom:6px !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-price-item-v65 {
    min-height:58px !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-wallet-v65 {
    min-height:44px !important;
}


/* ---------- MEDIA AREA ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-media-stage {
    min-height:300px !important;

    border-radius:24px !important;

    background:#030c19 !important;
}


/* Video call gets a real media frame */
body.itna-call-layout-v66-2-active
#rtCallPage.video-mode .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage.video-mode .rt-native-media-stage {
    min-height:
        clamp(
            360px,
            48dvh,
            620px
        )
        !important;

    overflow:hidden !important;
}


/* Audio should NOT reserve giant video space */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-media-stage,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-media-stage {
    min-height:205px !important;
    height:auto !important;
}


/* ---------- REMOTE VIDEO ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage #rtRemoteVideo {
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    border-radius:inherit !important;
}


/* ---------- LOCAL VIDEO ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage #rtLocalVideo {
    position:absolute !important;

    top:14px !important;
    right:12px !important;
    bottom:auto !important;
    left:auto !important;

    width:92px !important;
    height:124px !important;

    object-fit:cover !important;

    border-radius:18px !important;

    border:
        1.5px solid rgba(255,255,255,.72)
        !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,.35)
        !important;

    z-index:50 !important;
}


/* ---------- NETWORK ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage #rtNetworkStatus,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-network-badge,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-network-status {
    position:absolute !important;

    top:14px !important;
    left:12px !important;
    right:auto !important;
    bottom:auto !important;

    min-height:30px !important;

    max-width:
        calc(100% - 125px)
        !important;

    padding:
        5px
        10px
        !important;

    border-radius:999px !important;

    font-size:12px !important;

    z-index:51 !important;
}


/* ---------- CALLER IDENTITY ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-audio-identity,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-person {
    width:100% !important;

    margin:0 !important;

    padding:
        10px
        12px
        8px
        !important;

    text-align:center !important;
}


/* Audio caller sits centrally */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-audio-identity,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-audio-identity {
    min-height:190px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
}


/* Video identity becomes a bottom overlay */
body.itna-call-layout-v66-2-active
#rtCallPage.video-mode .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage.video-mode .rt-native-audio-identity,
body.itna-call-layout-v66-2-active
#rtCallPage.video-mode .rt-native-call-person {
    position:absolute !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;

    min-height:0 !important;

    padding:
        62px
        14px
        16px
        !important;

    background:
        linear-gradient(
            to bottom,
            rgba(3,12,25,0),
            rgba(3,12,25,.82)
        )
        !important;

    z-index:35 !important;

    pointer-events:none !important;
}


/* Smaller avatar during video */
body.itna-call-layout-v66-2-active
#rtCallPage.video-mode .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.video-mode .rt-native-call-avatar {
    width:68px !important;
    height:68px !important;

    margin:0 auto 7px !important;

    font-size:24px !important;

    box-shadow:none !important;
}


/* Audio avatar */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-call-avatar {
    width:88px !important;
    height:88px !important;

    margin:0 auto 10px !important;

    font-size:29px !important;
}


/* ---------- TEXT SIZES ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-person h1,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-audio-identity h1 {
    margin:5px 0 !important;

    font-size:
        clamp(25px,7vw,34px)
        !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-person p,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-audio-identity p {
    margin:3px 0 !important;

    font-size:15px !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-person small,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-audio-identity small {
    margin:3px 0 !important;

    font-size:12px !important;
}


/* ---------- HISTORY BUTTON ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-history-button-v67 {
    min-height:34px !important;

    padding:
        0
        13px
        !important;

    margin-top:6px !important;

    font-size:12px !important;

    pointer-events:auto !important;
}


/* ---------- CONTROLS ---------- */

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-controls {
    position:relative !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    justify-content:space-evenly !important;
    align-items:flex-start !important;

    width:100% !important;

    min-height:96px !important;

    margin:0 !important;

    padding:
        8px
        4px
        max(
            12px,
            env(safe-area-inset-bottom,0px)
        )
        !important;

    gap:6px !important;

    background:#030c19 !important;

    z-index:100 !important;
}


/* ---------- SOUND UNLOCK ---------- */

body.itna-call-layout-v66-2-active
#itnaoneCallSoundUnlockV65,
body.itna-call-layout-v66-2-active
.itna-call-sound-unlock-v65 {
    position:fixed !important;

    left:50% !important;

    bottom:
        calc(
            104px +
            env(safe-area-inset-bottom,0px)
        )
        !important;

    transform:
        translateX(-50%)
        !important;

    width:
        min(
            270px,
            calc(100vw - 34px)
        )
        !important;

    min-height:46px !important;

    padding:
        6px
        9px
        !important;

    gap:7px !important;

    border-radius:14px !important;

    z-index:2147483000 !important;
}

body.itna-call-layout-v66-2-active
#itnaoneCallSoundUnlockV65
.itna-call-sound-icon-v65 {
    width:32px !important;
    height:32px !important;

    flex:
        0 0 32px
        !important;

    font-size:15px !important;
}

body.itna-call-layout-v66-2-active
#itnaoneCallSoundUnlockV65 strong {
    font-size:11.5px !important;
}

body.itna-call-layout-v66-2-active
#itnaoneCallSoundUnlockV65 small {
    font-size:9px !important;
}


/* ---------- SMALL IPHONE ---------- */

@media(max-width:430px) {

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-call-price-item-v65 {
        min-height:54px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-wallet-v65 {
        min-height:40px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage.video-mode
    .itna-call-media,
    body.itna-call-layout-v66-2-active
    #rtCallPage.video-mode
    .rt-native-media-stage {
        min-height:
            clamp(
                330px,
                46dvh,
                520px
            )
            !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode
    .itna-call-media,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio
    .itna-call-media {
        min-height:185px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage #rtLocalVideo {
        width:82px !important;
        height:108px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-call-controls {
        min-height:90px !important;
    }
}


/* ---------- SHORT IPHONE ---------- */

@media
(max-height:760px)
and
(max-width:600px) {

    body.itna-call-layout-v66-2-active
    #rtCallPage.video-mode
    .itna-call-media,
    body.itna-call-layout-v66-2-active
    #rtCallPage.video-mode
    .rt-native-media-stage {
        min-height:300px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode
    .itna-call-media,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio
    .itna-call-media {
        min-height:160px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .itna-call-controls {
        min-height:82px !important;
    }
}


/* ==========================================================
   ITNAONE_CALL_DESIGN_V68_3
   Match approved centered call layout.
   Audio call only. Video layout preserved.
   ========================================================== */


/* Main audio frame */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio {
    display:flex !important;
    flex-direction:column !important;

    min-height:100dvh !important;

    overflow:hidden !important;
}


/* Billing remains compact at top */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-price-panel-v65,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-price-panel-v65 {
    flex:0 0 auto !important;

    margin-bottom:8px !important;
}


/* Audio media becomes middle stage */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-media-stage,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-media-stage {
    position:relative !important;

    flex:1 1 auto !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    min-height:390px !important;

    margin:0 !important;
    padding:
        34px
        14px
        20px
        !important;

    overflow:visible !important;

    background:#030c19 !important;

    border-radius:0 !important;
}


/* Network chip top-left of middle stage */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtNetworkStatus,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtNetworkStatus,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-network-badge,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-network-badge {
    position:absolute !important;

    top:10px !important;
    left:12px !important;
    right:auto !important;

    max-width:180px !important;

    z-index:20 !important;
}


/* Caller block fully centered and moved down */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-audio-identity,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-audio-identity {
    position:relative !important;

    inset:auto !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    min-height:0 !important;

    margin:42px 0 0 !important;

    padding:0 !important;

    transform:none !important;

    text-align:center !important;

    z-index:10 !important;
}


/* Avatar */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-call-avatar {
    position:relative !important;

    width:112px !important;
    height:112px !important;

    margin:0 auto 13px !important;

    font-size:38px !important;

    transform:none !important;

    box-shadow:
        0 0 0 24px rgba(50,110,200,.035),
        0 0 0 52px rgba(50,110,200,.018)
        !important;
}


/* Caller name */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-person h1,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-person h1,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-audio-identity h1,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-audio-identity h1 {
    margin:5px 0 8px !important;

    font-size:
        clamp(32px,8vw,42px)
        !important;

    line-height:1 !important;
}


/* Ringing / connected status */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtCallStatus,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtCallStatus {
    margin:0 0 10px !important;

    font-size:
        clamp(24px,6vw,34px)
        !important;

    line-height:1.1 !important;
}


/* Mic status */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtMediaState,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtMediaState {
    margin:3px 0 8px !important;

    font-size:17px !important;
}


/* Direction/date detail */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-details-v67,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-details-v67 {
    margin-top:3px !important;

    font-size:13px !important;

    opacity:.85 !important;
}


/* Call history */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-history-button-v67,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-history-button-v67 {
    margin-top:10px !important;

    min-height:38px !important;

    padding:0 17px !important;

    font-size:13px !important;

    border-radius:999px !important;
}


/* Audio control row */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-call-controls {
    position:relative !important;

    flex:0 0 auto !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:flex-start !important;
    justify-content:center !important;

    width:100% !important;

    min-height:118px !important;

    margin:0 !important;

    padding:
        12px
        20px
        10px
        !important;

    gap:64px !important;

    background:#030c19 !important;
}


/* Hide unusable camera / flip controls on audio call */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtCameraBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtFlipCameraBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtCameraBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtFlipCameraBtn {
    display:none !important;
}


/* Mic + End larger and centered */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtMuteBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #itnaCleanEndBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtMuteBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #itnaCleanEndBtn {
    flex:0 0 88px !important;

    min-width:88px !important;
}


/* Sound unlock: centered just above bottom nav */
body.itna-call-layout-v66-2-active
#itnaoneCallSoundUnlockV65 {
    position:fixed !important;

    left:50% !important;
    right:auto !important;

    bottom:
        calc(
            88px +
            env(safe-area-inset-bottom,0px)
        )
        !important;

    transform:
        translateX(-50%)
        !important;

    width:
        min(
            330px,
            calc(100vw - 30px)
        )
        !important;

    min-height:58px !important;

    padding:
        9px
        12px
        !important;

    border-radius:18px !important;

    z-index:2147483000 !important;
}


/* Bottom navigation must not cover controls */
body.itna-call-layout-v66-2-active
.itnaone-mobile-bottom-nav,
body.itna-call-layout-v66-2-active
.mail-mobile-bottom-nav {
    z-index:200 !important;
}


/* iPhone portrait tuning */
@media(max-width:430px) {

    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-media,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-media {
        min-height:420px !important;

        padding-top:42px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-person,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-person {
        margin-top:52px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-avatar,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-avatar {
        width:104px !important;
        height:104px !important;

        font-size:35px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-controls,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-controls {
        gap:52px !important;

        min-height:110px !important;
    }
}


/* ==========================================================
   ITNAONE_AUDIO_CALL_CENTER_V68_4
   Target:
   billing top
   avatar/name centered below
   Mic + End immediately below
   sound prompt above bottom nav
   VIDEO UNCHANGED
   ========================================================== */


/* ----------------------------------------------------------
   AUDIO PAGE
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio {

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    min-height:100dvh !important;
    height:auto !important;

    padding:
        max(6px,env(safe-area-inset-top))
        6px
        150px
        !important;

    gap:0 !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    box-sizing:border-box !important;

    background:#030c19 !important;
}


/* ----------------------------------------------------------
   TOP BAR
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-top,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-top {

    flex:0 0 auto !important;

    margin:0 0 9px !important;

    order:1 !important;
}


/* ----------------------------------------------------------
   BILLING PANEL
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-price-panel-v65,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-price-panel-v65 {

    position:relative !important;

    flex:0 0 auto !important;

    width:100% !important;

    margin:0 !important;

    order:2 !important;

    z-index:20 !important;
}


/* ----------------------------------------------------------
   AUDIO DOES NOT NEED A VIDEO MEDIA BOX
   This removes the huge blank flex area.
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-media-stage,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-media-stage {

    position:relative !important;

    flex:0 0 0 !important;

    width:100% !important;

    min-height:0 !important;
    height:0 !important;
    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    order:3 !important;
}


/* Hide remote/local video completely on audio */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtRemoteVideo,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtLocalVideo,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtRemoteVideo,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtLocalVideo {

    display:none !important;
}


/* Network badge is not needed in the clean audio layout */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtNetworkStatus,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-network-badge,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-network-status,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtNetworkStatus,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-network-badge,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-network-status {

    display:none !important;
}


/* ----------------------------------------------------------
   IDENTITY — FULLY BELOW BILLING PANEL
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-audio-identity,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-call-person,

body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-audio-identity,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-call-person {

    position:relative !important;

    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;

    flex:0 0 auto !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;

    min-height:0 !important;
    height:auto !important;

    margin:0 !important;

    padding:
        42px
        12px
        18px
        !important;

    text-align:center !important;

    background:transparent !important;

    order:4 !important;

    z-index:10 !important;

    box-sizing:border-box !important;
}


/* ----------------------------------------------------------
   AVATAR
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-call-avatar,

body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-call-avatar {

    position:relative !important;

    inset:auto !important;

    display:grid !important;
    place-items:center !important;

    width:118px !important;
    height:118px !important;

    min-width:118px !important;
    min-height:118px !important;

    margin:
        0
        auto
        15px
        !important;

    border-radius:50% !important;

    transform:none !important;

    font-size:40px !important;
    line-height:1 !important;

    overflow:hidden !important;

    box-shadow:
        0 0 0 22px rgba(50,110,200,.035),
        0 0 0 48px rgba(50,110,200,.016)
        !important;

    z-index:5 !important;
}


/* ----------------------------------------------------------
   NAME / STATUS
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-person h1,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-audio-identity h1,

body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-person h1,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-audio-identity h1 {

    margin:
        0
        0
        9px
        !important;

    font-size:
        clamp(
            32px,
            8.5vw,
            42px
        )
        !important;

    line-height:1.02 !important;

    font-weight:850 !important;
}


body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtCallStatus,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtCallStatus {

    margin:
        0
        0
        11px
        !important;

    font-size:
        clamp(
            24px,
            6.7vw,
            32px
        )
        !important;

    line-height:1.08 !important;
}


body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtMediaState,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtMediaState {

    margin:
        0
        0
        8px
        !important;

    font-size:17px !important;

    line-height:1.2 !important;
}


/* Direction / date */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-details-v67,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-details-v67 {

    margin:
        0
        0
        8px
        !important;

    font-size:13px !important;

    line-height:1.25 !important;

    opacity:.84 !important;
}


/* History */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-history-button-v67,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-history-button-v67 {

    min-height:38px !important;

    margin:
        4px
        auto
        0
        !important;

    padding:
        0
        17px
        !important;

    border-radius:999px !important;

    font-size:13px !important;

    pointer-events:auto !important;
}


/* ----------------------------------------------------------
   AUDIO CONTROLS
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .itna-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-native-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode .rt-call-controls,

body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-call-controls {

    position:relative !important;

    inset:auto !important;

    transform:none !important;

    flex:0 0 auto !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:flex-start !important;
    justify-content:center !important;

    width:100% !important;

    min-height:116px !important;
    height:auto !important;

    margin:0 !important;

    padding:
        9px
        20px
        12px
        !important;

    gap:72px !important;

    background:transparent !important;

    order:5 !important;

    z-index:100 !important;
}


/* Only Mic + End for audio */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtCameraBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtFlipCameraBtn,

body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtCameraBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtFlipCameraBtn {

    display:none !important;
}


/* Mic / End control columns */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #rtMuteBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #itnaCleanEndForm,

body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtMuteBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #itnaCleanEndForm {

    flex:
        0 0 92px
        !important;

    width:92px !important;
    max-width:92px !important;

    margin:0 !important;
}


/* End button */
body.itna-call-layout-v66-2-active
#rtCallPage.audio-mode #itnaCleanEndBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #itnaCleanEndBtn {

    margin:0 auto !important;
}


/* ----------------------------------------------------------
   SOUND UNLOCK
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
#itnaoneCallSoundUnlockV65 {

    position:fixed !important;

    left:50% !important;
    right:auto !important;

    top:auto !important;

    bottom:
        calc(
            92px +
            env(safe-area-inset-bottom,0px)
        )
        !important;

    transform:
        translateX(-50%)
        !important;

    width:
        min(
            360px,
            calc(100vw - 28px)
        )
        !important;

    min-height:62px !important;

    margin:0 !important;

    padding:
        9px
        12px
        !important;

    border-radius:18px !important;

    z-index:2147483000 !important;
}


/* ----------------------------------------------------------
   MOBILE BOTTOM NAV
   ---------------------------------------------------------- */

body.itna-call-layout-v66-2-active
.itnaone-mobile-bottom-nav,
body.itna-call-layout-v66-2-active
.mail-mobile-bottom-nav {

    z-index:2147482000 !important;
}


/* ----------------------------------------------------------
   IPHONE PORTRAIT
   ---------------------------------------------------------- */

@media(max-width:430px) {

    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-person,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-person,
    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .rt-native-audio-identity,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .rt-native-audio-identity {

        padding-top:36px !important;
        padding-bottom:14px !important;
    }


    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-avatar,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-avatar,
    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .rt-native-call-avatar,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .rt-native-call-avatar {

        width:108px !important;
        height:108px !important;

        min-width:108px !important;
        min-height:108px !important;

        font-size:36px !important;
    }


    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-controls,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-controls {

        gap:58px !important;

        min-height:110px !important;
    }
}


/* ----------------------------------------------------------
   SHORT IPHONE
   ---------------------------------------------------------- */

@media
(max-width:430px)
and
(max-height:760px) {

    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-person,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-person {

        padding-top:20px !important;
        padding-bottom:8px !important;
    }


    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-avatar,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-avatar {

        width:88px !important;
        height:88px !important;

        min-width:88px !important;
        min-height:88px !important;

        margin-bottom:9px !important;

        font-size:30px !important;
    }


    body.itna-call-layout-v66-2-active
    #rtCallPage.audio-mode .itna-call-controls,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-controls {

        min-height:94px !important;

        padding-top:5px !important;
    }
}


/* ==========================================================
   ITNAONE_AUDIO_UI_FINAL_V68_5
   AUDIO ONLY — VIDEO MUST REMAIN UNCHANGED
   ========================================================== */

/*
 * Actual call.php audio page uses .itna-call-media and
 * .itna-call-person. Make these normal document-flow elements.
 */

body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .itna-call-media,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-media {
    position:relative !important;
    inset:auto !important;
    transform:none !important;

    display:block !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;

    order:4 !important;
}

/* Audio has no video canvas. */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) #rtRemoteVideo,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) #rtLocalVideo,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtRemoteVideo,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtLocalVideo {
    display:none !important;
}

/* Remove Network chip from audio UI. */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) #rtNetworkStatus,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .rt-network-badge,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .rt-network-status,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtNetworkStatus,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-network-badge,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-network-status {
    display:none !important;
}

/*
 * The important fix:
 * caller/avatar becomes a normal block AFTER the billing panel,
 * never absolute and never underneath it.
 */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .rt-native-audio-identity,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .rt-native-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-person,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-audio-identity,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-call-person {
    position:relative !important;

    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;

    padding:
        clamp(24px,4.5vh,42px)
        12px
        12px
        !important;

    background:transparent !important;

    text-align:center !important;

    order:5 !important;

    z-index:10 !important;

    overflow:visible !important;

    box-sizing:border-box !important;
}

/* Complete visible avatar like reference image. */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .rt-native-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-avatar,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-call-avatar {
    position:relative !important;

    inset:auto !important;
    transform:none !important;

    display:grid !important;
    place-items:center !important;

    width:112px !important;
    height:112px !important;
    min-width:112px !important;
    min-height:112px !important;

    margin:0 auto 14px !important;

    border-radius:50% !important;

    overflow:hidden !important;

    font-size:38px !important;
    line-height:1 !important;

    z-index:5 !important;
}

/* Name. */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .itna-call-person h1,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .rt-native-audio-identity h1,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-person h1,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-audio-identity h1 {
    margin:0 0 8px !important;

    font-size:clamp(31px,8vw,40px) !important;
    line-height:1.03 !important;

    color:#fff !important;
}

/* Ringing / connected. */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) #rtCallStatus,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtCallStatus {
    margin:0 0 10px !important;

    font-size:clamp(23px,6vw,30px) !important;
    line-height:1.08 !important;
}

/* Microphone status. */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) #rtMediaState,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtMediaState {
    margin:0 0 8px !important;

    font-size:16px !important;
    line-height:1.2 !important;
}

/* Outgoing · Audio · date. */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .itna-call-details-v67,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-details-v67 {
    margin:0 0 9px !important;

    font-size:13px !important;
    line-height:1.3 !important;
}

/* History directly below details. */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .itna-call-history-button-v67,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-history-button-v67 {
    min-height:38px !important;

    margin:3px auto 0 !important;

    padding:0 17px !important;

    border-radius:999px !important;

    font-size:13px !important;

    pointer-events:auto !important;
}

/*
 * Mic and End immediately underneath caller section.
 * Do not push them to viewport bottom.
 */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .itna-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .rt-native-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) .rt-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .itna-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-call-controls,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-call-controls {
    position:relative !important;

    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:flex-start !important;
    justify-content:center !important;

    width:100% !important;

    height:auto !important;
    min-height:108px !important;

    margin:0 !important;

    padding:8px 18px 12px !important;

    gap:66px !important;

    background:transparent !important;

    order:6 !important;

    z-index:100 !important;
}

/* Audio only needs Mic + End. */
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) #rtCameraBtn,
body.itna-call-layout-v66-2-active
#rtCallPage:not(.video-mode) #rtFlipCameraBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtCameraBtn,
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio #rtFlipCameraBtn {
    display:none !important;
}

/*
 * Sound unlock should be below controls in normal flow style,
 * not a giant floating overlay covering the screen.
 */
body.itna-call-layout-v66-2-active
#itnaoneCallSoundUnlockV65 {
    position:fixed !important;

    left:50% !important;
    right:auto !important;

    top:auto !important;

    bottom:
        calc(
            82px +
            env(safe-area-inset-bottom,0px)
        )
        !important;

    transform:translateX(-50%) !important;

    width:min(350px,calc(100vw - 30px)) !important;

    min-height:58px !important;

    padding:8px 11px !important;

    border-radius:18px !important;
}

/* Compact audio page on iPhone. */
@media(max-width:430px) {

    body.itna-call-layout-v66-2-active
    #rtCallPage:not(.video-mode) .itna-call-person,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-person {
        padding-top:25px !important;
        padding-bottom:10px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage:not(.video-mode) .itna-call-avatar,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-avatar {
        width:100px !important;
        height:100px !important;

        min-width:100px !important;
        min-height:100px !important;

        font-size:34px !important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage:not(.video-mode) .itna-call-controls,
    body.itna-call-layout-v66-2-active
    #rtCallPage.itna-v66-audio .itna-call-controls {
        gap:52px !important;
        min-height:102px !important;
    }
}


/* ==========================================================
   ITNAONE_AUDIO_REAL_DOM_V68_6

   Uses server-rendered:
     #rtCallPage.is-audio[data-media="audio"]

   VIDEO IS NOT TOUCHED.
   ========================================================== */

#rtCallPage.is-audio[data-media="audio"] {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}


/* ---------- BILLING ---------- */

#rtCallPage.is-audio[data-media="audio"]
.itna-call-price-panel-v65 {
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    margin: 0 0 10px !important;
    flex: 0 0 auto !important;
}


/* ---------- AUDIO MEDIA AREA ---------- */

#rtCallPage.is-audio[data-media="audio"]
.itna-call-media {
    position: relative !important;
    inset: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;

    padding:
        clamp(12px, 2vh, 22px)
        18px
        132px !important;

    overflow: hidden !important;
}


/* Audio has no video canvas */

#rtCallPage.is-audio[data-media="audio"]
#rtRemoteVideo,

#rtCallPage.is-audio[data-media="audio"]
#rtLocalVideo {
    display: none !important;
}


/* ---------- NETWORK ---------- */
/* Do not allow network badge to cover avatar */

#rtCallPage.is-audio[data-media="audio"]
#rtNetworkStatus,

#rtCallPage.is-audio[data-media="audio"]
.rt-network-badge,

#rtCallPage.is-audio[data-media="audio"]
.rt-network-status {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    align-self: flex-start !important;

    margin:
        0
        0
        clamp(10px, 1.5vh, 16px)
        0 !important;

    z-index: 3 !important;
}


/* ---------- PERSON ---------- */

#rtCallPage.is-audio[data-media="audio"]
.itna-call-person {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: min(100%, 520px) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;

    z-index: 2 !important;
}


/* ---------- RINGS ---------- */

#rtCallPage.is-audio[data-media="audio"]
.itna-call-rings {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;

    width: 160px !important;
    height: 160px !important;

    transform: translateX(-50%) !important;

    pointer-events: none !important;
}


/* ---------- AVATAR ---------- */

#rtCallPage.is-audio[data-media="audio"]
.itna-call-avatar {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    width: clamp(100px, 27vw, 132px) !important;
    height: clamp(100px, 27vw, 132px) !important;

    min-width: 100px !important;
    min-height: 100px !important;

    margin: 0 auto 14px !important;

    border-radius: 50% !important;

    display: grid !important;
    place-items: center !important;

    font-size: clamp(38px, 10vw, 54px) !important;
    line-height: 1 !important;

    z-index: 2 !important;
}


/* ---------- NAME ---------- */

#rtCallPage.is-audio[data-media="audio"]
.itna-call-person h1 {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    margin: 0 0 6px !important;

    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.08 !important;
}


/* ---------- STATUS ---------- */

#rtCallPage.is-audio[data-media="audio"]
#rtCallStatus {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    margin: 0 0 8px !important;

    font-size: clamp(23px, 6vw, 30px) !important;
    line-height: 1.15 !important;
}


/* ---------- MEDIA STATE ---------- */

#rtCallPage.is-audio[data-media="audio"]
#rtMediaState {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: block !important;

    margin: 0 0 8px !important;

    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.25 !important;
}


/* ---------- REAL V67 DETAILS CLASS ---------- */

#rtCallPage.is-audio[data-media="audio"]
.itna-call-detail-line-v67 {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;

    width: 100% !important;

    margin: 0 0 10px !important;

    font-size: clamp(13px, 3.6vw, 16px) !important;
    line-height: 1.25 !important;
}


/* ---------- REAL V67 HISTORY CLASS ---------- */

#rtCallPage.is-audio[data-media="audio"]
.itna-call-history-link-v67 {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

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

    margin: 0 auto !important;

    z-index: 4 !important;
}


/* ---------- AUDIO CONTROLS ---------- */

#rtCallPage.is-audio[data-media="audio"]
.itna-call-controls {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;
    bottom:
        calc(
            env(safe-area-inset-bottom, 0px)
            + 12px
        ) !important;

    top: auto !important;

    transform: translateX(-50%) !important;

    width: min(310px, calc(100vw - 40px)) !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    gap: clamp(52px, 15vw, 82px) !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 100 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Only Mic + End exist on audio */

#rtCallPage.is-audio[data-media="audio"]
#rtMuteBtn,

#rtCallPage.is-audio[data-media="audio"]
#itnaCleanEndForm {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    margin: 0 !important;
}


/* Safety: never show camera controls on audio */

#rtCallPage.is-audio[data-media="audio"]
#rtCameraBtn,

#rtCallPage.is-audio[data-media="audio"]
#rtFlipCameraBtn {
    display: none !important;
}


/* ---------- SOUND UNLOCK ---------- */
/* Keep above controls without covering identity */

#rtCallPage.is-audio[data-media="audio"]
~ .itna-v67-sound-prompt,

#rtCallPage.is-audio[data-media="audio"]
.itna-v67-sound-prompt {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    bottom:
        calc(
            env(safe-area-inset-bottom, 0px)
            + 116px
        ) !important;

    top: auto !important;

    transform: translateX(-50%) !important;

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

    margin: 0 !important;

    z-index: 110 !important;
}


/* ---------- SHORT IPHONES ---------- */

@media (max-height: 760px) {

    #rtCallPage.is-audio[data-media="audio"]
    .itna-call-media {
        padding-top: 8px !important;
        padding-bottom: 112px !important;
    }

    #rtCallPage.is-audio[data-media="audio"]
    .itna-call-avatar {
        width: 88px !important;
        height: 88px !important;

        min-width: 88px !important;
        min-height: 88px !important;

        font-size: 38px !important;
        margin-bottom: 8px !important;
    }

    #rtCallPage.is-audio[data-media="audio"]
    .itna-call-person h1 {
        font-size: 30px !important;
    }

    #rtCallPage.is-audio[data-media="audio"]
    #rtCallStatus {
        font-size: 23px !important;
        margin-bottom: 5px !important;
    }

    #rtCallPage.is-audio[data-media="audio"]
    #rtMediaState {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }
}


/* ---------- VERY NARROW ---------- */

@media (max-width: 390px) {

    #rtCallPage.is-audio[data-media="audio"]
    .itna-call-controls {
        width: min(280px, calc(100vw - 28px)) !important;
        gap: 46px !important;
    }
}