/* The caller sees their own live camera edge to edge until remote frames
   arrive. Connected calls then use the existing remote/main + self/tile layout. */
#callVideoArea.open[data-call-type=video].callLocalPreview > #localVideo:not(.groupFloating) {
 position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;
 min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
 aspect-ratio:auto!important;margin:0!important;padding:0!important;z-index:1!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 object-fit:cover!important;object-position:center!important;cursor:default!important;
}
/* No intermediate portrait card while the camera is opening or switched off. */
#callVideoArea.open[data-call-type=video] .audioCallIdentity {display:none!important;}
#callVideoArea .videoCallName {display:none;}
#callVideoArea.open[data-call-type=video] .videoCallName:not([hidden]) {
 display:block;box-sizing:border-box;max-width:100%;min-width:0;
 margin:0;padding:9px 16px;border:0;border-radius:14px;
 background:#fff;color:#0f172a;font:600 18px/1.3 system-ui,-apple-system,sans-serif;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
#callVideoArea.open.outgoingVideoRinging[data-call-type=video] .callReadouts {
 width:min(calc(100% - 80px),440px);
}
#callVideoArea.open.outgoingVideoRinging[data-call-type=video] .callReadouts>.callStatus {
 border-radius:999px;padding:8px 14px;font-size:15px;letter-spacing:0;
 white-space:normal;overflow-wrap:anywhere;
}
@layer vobixLight {
 #callVideoArea.open[data-call-type=video] .callReadouts>.callStatus {
  max-width:100%;font:500 14px/1.3 system-ui,-apple-system,sans-serif!important;
  letter-spacing:0!important;white-space:normal!important;overflow-wrap:anywhere;
  padding:6px 12px!important;text-overflow:clip;
 }
 #callVideoArea.open[data-call-type=video].callLocalPreview {background:#082c49!important;}
 #callVideoArea.open[data-call-type=video].callLocalPreview::after {
  background:linear-gradient(#061b35a8,transparent 28%,transparent 68%,#061b358c)!important;
 }
 #callVideoArea.open[data-call-type=video].callLocalPreview .callControls {
  background:#06233cd9!important;border-color:#ffffff30!important;box-shadow:0 10px 32px #00172b33!important;
 }
 #callVideoArea.open[data-call-type=video].callLocalPreview :is(.callControls,.callSideActions)>.callControl:not(#endCallButton) {
  background:#ffffff20!important;color:#fff!important;border-color:#ffffff30!important;
 }
 #callVideoArea.open[data-call-type=video].callLocalPreview .callControls>[aria-pressed=true]:not(#endCallButton) {
  background:#008fea!important;color:#fff!important;
 }
 #callVideoArea.open[data-call-type=video][data-call-visual=local]::after {
  background:linear-gradient(#061b35a8,transparent 28%,transparent 68%,#061b358c)!important;
 }
 #callVideoArea.open.outgoingVideoRinging[data-call-type=video] .callReadouts>.callStatus {
  background:#06304fcc!important;color:#fff!important;text-shadow:0 1px 4px #0008!important;
 }
}

/* Connected thumbnails fill their rounded frame instead of exposing the
   light video background at either side of portrait camera frames. */
#callVideoArea.open[data-call-type=video]:not(.callLocalPreview):not(.localVideoPrimary)>#localVideo,
#callVideoArea.open[data-call-type=video].localVideoPrimary>#remoteVideo,
#callVideoArea.open[data-call-type=video]>.groupFloating{
 object-fit:cover!important;object-position:center!important;
}

/* Let muted autoplay decode without exposing WebView's default video poster. */
#callVideoArea[data-call-type=video] :is(#localVideo,#remoteVideo,video[data-call-peer]):not(.vobixCallFrameReady){opacity:0!important}
#callVideoArea[data-call-type=video] :is(#localVideo,#remoteVideo,video[data-call-peer]).vobixCallFrameReady{opacity:1!important}

/* Preserve the remote thumbnail when the owner swaps their camera to full size. */
html:not(.vobix-call-pip) #callVideoArea.open[data-call-type=video]:not(:has(.groupRemoteMediaTile)):not(.callLocalPreview).localVideoPrimary>#remoteVideo:not(.groupFloating){
 width:min(43vw,190px,max(72px,calc((100dvh - 220px - var(--vobix-safe-top,env(safe-area-inset-top,0px)) - var(--vobix-safe-bottom,env(safe-area-inset-bottom,0px))) * .5625)))!important;
 height:auto!important;min-width:0!important;min-height:0!important;
 max-width:none!important;max-height:none!important;aspect-ratio:9/16!important;
}

/* The connected self view has two genuinely different shapes. These rules own
   both states; the old always-tall selector must not override idle/touch sizing.
   Keep drag position, the full startup camera, groups and OS PiP independent. */
html:not(.vobix-call-pip) #callVideoArea.open[data-call-type=video]:not(:has(.groupRemoteMediaTile)):not(.callGroupMovable):not(.callLocalPreview):not(.localVideoPrimary)>#localVideo:not(.groupFloating){
 width:min(43vw,190px,max(72px,calc((100dvh - 220px - var(--vobix-safe-top,env(safe-area-inset-top,0px)) - var(--vobix-safe-bottom,env(safe-area-inset-bottom,0px))) * .75)))!important;
 height:auto!important;min-width:0!important;min-height:0!important;
 max-width:none!important;max-height:none!important;aspect-ratio:3/4!important;
 border-radius:20px!important;
}
html:not(.vobix-call-pip) #callVideoArea.open[data-call-type=video].callControlsHidden:not(:has(.groupRemoteMediaTile)):not(.callGroupMovable):not(.callLocalPreview):not(.localVideoPrimary)>#localVideo:not(.groupFloating){
 width:min(20vw,80px,14dvh,max(36px,calc((100dvh - 220px - var(--vobix-safe-top,env(safe-area-inset-top,0px)) - var(--vobix-safe-bottom,env(safe-area-inset-bottom,0px))) * .32)))!important;height:auto!important;aspect-ratio:9/16!important;
 max-height:25dvh!important;border-radius:14px!important;
}