/*
 * ITNAONE_CALL_RESPONSIVE_V66_2
 * Final responsive layer for the normalized V66.2 DOM.
 */

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

body.itna-call-layout-v66-2-active{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

/* Kill old fixed fullscreen positioning after V66.2 owns layout. */
body.itna-call-layout-v66-2-active #rtCallPage,
body.itna-call-layout-v66-2-active #rtCallPage .rt-call-stage,
body.itna-call-layout-v66-2-active #rtCallPage .rt-native-call-stage,
body.itna-call-layout-v66-2-active #rtCallPage .itna-call-stage{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;

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

  margin:0!important;
  box-sizing:border-box!important;

  overflow:visible!important;
  background:#030c19!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body.itna-call-layout-v66-2-active #rtCallPage{
  padding:
    max(10px,env(safe-area-inset-top))
    12px
    max(22px,env(safe-area-inset-bottom))
    !important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-stage,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-stage,
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-stage{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;

  max-width:920px!important;
  margin:0 auto!important;
  padding:0!important;
}

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

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

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

  width:100%!important;
  order:1!important;

  gap:12px!important;
  margin:0 0 10px!important;
  padding:0!important;

  z-index:100!important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-back,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-top a,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-top a{
  position:relative!important;
  inset:auto!important;

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

  width:auto!important;
  min-width:118px!important;
  max-width:46%!important;
  min-height:50px!important;
  height:auto!important;

  padding:0 18px!important;

  border:1px solid rgba(148,163,184,.36)!important;
  border-radius:999px!important;

  background:#1b2738!important;
  color:#fff!important;

  font-size:16px!important;
  font-weight:800!important;
  text-decoration:none!important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-time-chip,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-top > span{
  position:relative!important;
  inset:auto!important;

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

  width:auto!important;
  min-width:108px!important;
  max-width:46%!important;
  min-height:50px!important;
  height:auto!important;

  padding:0 17px!important;

  border:1px solid rgba(148,163,184,.36)!important;
  border-radius:999px!important;

  background:#1b2738!important;
  color:#fff!important;

  font-size:16px!important;
  font-weight:800!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:relative!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  transform:none!important;

  order:2!important;
  align-self:flex-start!important;

  display:inline-flex!important;
  width:auto!important;
  max-width:90%!important;

  margin:0 0 10px 8px!important;

  z-index:90!important;
}

/* ---------- RATE PANEL ---------- */

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

  order:3!important;

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

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

  margin:0 0 22px!important;
  padding:10px!important;
  gap:10px!important;

  box-sizing:border-box!important;

  border:1px solid rgba(148,163,184,.25)!important;
  border-radius:24px!important;

  background:rgba(9,18,31,.9)!important;

  z-index:30!important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-price-item-v65{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;

  min-width:0!important;
  min-height:96px!important;

  padding:10px 7px!important;

  border-radius:20px!important;
  background:#172334!important;

  overflow:hidden!important;
  text-align:center!important;
}

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

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-price-item-v65 small{
  display:block!important;
  width:100%!important;

  margin:0 0 7px!important;

  color:#a5b8d6!important;

  font-size:11px!important;
  font-weight:850!important;
  line-height:1.1!important;
  letter-spacing:.15em!important;

  white-space:normal!important;
  text-transform:uppercase!important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-price-item-v65 strong{
  display:block!important;
  width:100%!important;

  margin:0!important;

  color:#fff!important;

  font-size:clamp(18px,5vw,27px)!important;
  font-weight:850!important;
  line-height:1.12!important;

  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
}

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

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

  order:4!important;

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

  margin:0 0 20px!important;

  border-radius:24px!important;
  overflow:hidden!important;

  z-index:20!important;
}

/* On audio calls, don't reserve video area. */
body.itna-call-layout-v66-2-active
#rtCallPage.itna-v66-audio .rt-native-media-stage{
  min-height:0!important;
  height:0!important;
  margin:0!important;
  overflow:visible!important;
}

/* ---------- AUDIO IDENTITY ---------- */

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,
body.itna-call-layout-v66-2-active
#rtCallPage .itna-call-person{
  position:relative!important;
  inset:auto!important;
  transform:none!important;

  order:5!important;

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

  width:100%!important;

  margin:0!important;
  padding:10px 12px 22px!important;

  text-align:center!important;

  z-index:20!important;
}

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

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

  width:126px!important;
  height:126px!important;

  margin:0 auto 15px!important;

  border-radius:50%!important;

  background:linear-gradient(145deg,#58749c,#293b56)!important;
  color:#fff!important;

  font-size:40px!important;
  font-weight:850!important;

  box-shadow:
    0 0 0 28px rgba(40,105,195,.04),
    0 0 0 54px rgba(40,105,195,.02)
    !important;
}

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,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-person h1{
  display:block!important;

  margin:7px 0 9px!important;

  color:#fff!important;

  font-size:clamp(30px,8vw,44px)!important;
  font-weight:850!important;
  line-height:1!important;
}

body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-audio-identity p,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-audio-identity small,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-person p,
body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-person p{
  position:relative!important;

  display:block!important;

  margin:0 0 6px!important;

  color:rgba(255,255,255,.72)!important;

  font-size:17px!important;
  line-height:1.25!important;
}

/* ---------- PERMISSION ---------- */

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

  order:6!important;

  width:100%!important;

  margin:0 0 15px!important;

  box-sizing:border-box!important;
}

/* ---------- INCOMING ---------- */

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

  order:7!important;

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

  width:100%!important;

  gap:48px!important;

  margin:auto 0 0!important;
  padding:20px 10px!important;

  background:transparent!important;

  z-index:40!important;
}

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

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

  order:8!important;

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

  width:100%!important;

  gap:32px!important;

  margin:auto 0 0!important;
  padding:22px 10px 12px!important;

  background:transparent!important;

  z-index:40!important;
}

/* Restore readable labels hidden by old messenger CSS. */
body.itna-call-layout-v66-2-active
#rtCallPage .rt-control-label{
  position:relative!important;

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

  margin-top:6px!important;

  clip:auto!important;
  overflow:visible!important;

  color:#fff!important;

  font-size:13px!important;
  line-height:1!important;
  white-space:normal!important;
}

/* ---------- PHONES ---------- */

@media(max-width:600px){

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

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

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

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

  body.itna-call-layout-v66-2-active
  #rtCallPage .rt-native-call-avatar{
    width:112px!important;
    height:112px!important;

    font-size:36px!important;
  }
}

/* ---------- VERY SMALL ---------- */

@media(max-width:374px){

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

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

  body.itna-call-layout-v66-2-active
  #rtCallPage .itna-call-price-item-v65 strong{
    font-size:17px!important;
  }

  body.itna-call-layout-v66-2-active
  #rtCallPage .rt-native-call-avatar{
    width:94px!important;
    height:94px!important;
  }
}

/* ---------- SHORT PHONE ---------- */

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

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

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

  body.itna-call-layout-v66-2-active
  #rtCallPage .rt-native-call-avatar{
    width:76px!important;
    height:76px!important;

    margin-bottom:6px!important;

    font-size:27px!important;
  }

  body.itna-call-layout-v66-2-active
  #rtCallPage .rt-native-audio-identity{
    padding-top:4px!important;
    padding-bottom:6px!important;
  }

  body.itna-call-layout-v66-2-active
  #rtCallPage .rt-native-audio-identity h1{
    margin:3px 0 4px!important;
    font-size:25px!important;
  }
}

/* ---------- LANDSCAPE ---------- */

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

  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:62px!important;
  }
}

/* ---------- TABLET / DESKTOP ---------- */

@media(min-width:768px){

  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;
  }
}

/* =========================================================
   ITNAONE_CALL_UI_FIX_V66_3
   - Top controls get their own row
   - Network chip does not cover cards
   - Sound unlock prompt does not cover Mic / End
   ========================================================= */

body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-topbar,

body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-call-topbar,

body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-header,

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;

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

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

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

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

    order:1!important;

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

    box-sizing:border-box!important;

    background:transparent!important;
    z-index:100!important;
}


/* Chat / Back button */

body.itna-call-layout-v66-2-active
#rtCallPage .rt-native-back,

body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-back,

body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-header a {

    position:relative!important;

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

    transform:none!important;

    width:auto!important;
    min-width:120px!important;
    max-width:46%!important;
    min-height:52px!important;

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

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

    border-radius:999px!important;

    background:#1c2738!important;
    color:#fff!important;

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

    font-size:17px!important;
    font-weight:800!important;
}


/* Timer */

body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-time-chip,

body.itna-call-layout-v66-2-active
#rtCallPage .rt-call-timer,

body.itna-call-layout-v66-2-active
#rtCallPage [data-call-timer] {

    position:relative!important;

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

    transform:none!important;

    width:auto!important;
    min-width:112px!important;
    max-width:46%!important;
    min-height:52px!important;

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

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

    border-radius:999px!important;

    background:#1c2738!important;
    color:#fff!important;

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

    font-size:17px!important;
    font-weight:800!important;
}


/* Network badge */

body.itna-call-layout-v66-2-active
#rtCallPage #rtNetworkStatus,

body.itna-call-layout-v66-2-active
#rtCallPage .rt-network-status,

body.itna-call-layout-v66-2-active
#rtCallPage .rt-network-badge {

    position:relative!important;

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

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

    order:2!important;

    align-self:flex-start!important;

    margin:0 0 10px 8px!important;

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

    z-index:80!important;
}


/* Billing panel follows network chip */

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

    order:3!important;

    margin-top:0!important;
}


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

/*
 * V65 can create a sound-unlock prompt dynamically.
 * Match all known/likely V65 sound prompt classes without
 * affecting the real incoming-call popup.
 */

body.itna-call-layout-v66-2-active
#rtCallPage [class*="sound"][class*="unlock"],

body.itna-call-layout-v66-2-active
#rtCallPage [class*="audio"][class*="unlock"],

body.itna-call-layout-v66-2-active
#rtCallPage [class*="call-sound"],

body.itna-call-layout-v66-2-active
.itna-call-sound-unlock-v65,

body.itna-call-layout-v66-2-active
.itna-sound-unlock-v65 {

    position:relative!important;

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

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

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

    margin:4px auto 14px!important;
    padding:11px 14px!important;

    box-sizing:border-box!important;

    border-radius:18px!important;

    z-index:45!important;

    box-shadow:0 10px 32px rgba(0,0,0,.22)!important;
}


/* prevent any V65 sound banner from sitting over controls */

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

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

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

    position:relative!important;

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

    transform:none!important;

    margin-top:auto!important;

    z-index:50!important;
}


/* iPhone / Android */

@media(max-width:600px){

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

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

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-topbar,

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-native-call-topbar,

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-header,

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-native-call-top,

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-top {

        min-height:54px!important;
        padding-left:4px!important;
        padding-right:4px!important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-native-back,

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-back,

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-header a {

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

        padding:0 15px!important;

        font-size:16px!important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-time-chip,

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-timer,

    body.itna-call-layout-v66-2-active
    #rtCallPage [data-call-timer] {

        min-width:104px!important;
        min-height:50px!important;

        padding:0 14px!important;

        font-size:16px!important;
    }

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

        margin-bottom:18px!important;
    }

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

        padding-bottom:10px!important;
    }
}


/* Very narrow phones */

@media(max-width:374px){

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-native-back,

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-back {

        min-width:98px!important;
    }

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-time-chip,

    body.itna-call-layout-v66-2-active
    #rtCallPage .rt-call-timer {

        min-width:92px!important;
    }
}