/* HappyGram V48 — mobile calls + censored-avatar system + username search cleanup */

/* Censored avatar: no photo was uploaded after legacy emoji avatars were retired. */
.avatar.avatar-censored,
.avatar-censored.avatar,
.avatar-wrap .avatar.avatar-censored,
#peer-avatar.avatar-censored,
#call-avatar.avatar-censored,
#me-avatar.avatar-censored {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#1a2030,#0c101b)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#aeb8cf!important;
  font-size:0!important;
  object-fit:contain!important;
}
.avatar.avatar-censored::before,
.avatar-censored.avatar::before {
  content:'';
  width:52%;height:52%;
  display:block;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* The username search is intentionally icon-free. */
.search-new::before{content:none!important;display:none!important}
.search-new input{padding-left:15px!important}

/* Calls must never inherit desktop scaling on phones. */
.call-overlay{
  box-sizing:border-box!important;
  width:100vw!important;height:100dvh!important;
  min-width:0!important;min-height:0!important;
  max-width:100vw!important;max-height:100dvh!important;
  overflow:hidden!important;
  transform:none!important;scale:1!important;zoom:1!important;
}
.call-card{
  box-sizing:border-box!important;
  transform:none!important;scale:1!important;zoom:1!important;
  width:min(92vw,420px)!important;max-width:min(92vw,420px)!important;
  max-height:calc(100dvh - 32px)!important;
  overflow:auto!important;
}
.call-video{box-sizing:border-box!important;width:100%!important;max-width:100%!important;max-height:42dvh!important;object-fit:contain!important}
.call-local-video{max-width:28vw!important;max-height:24dvh!important;object-fit:cover!important}
.call-avatar{flex:0 0 auto!important}

@media(max-width:760px){
  html,body{width:100%!important;min-width:0!important;max-width:100vw!important;overflow-x:hidden!important;zoom:1!important;transform:none!important}
  .call-overlay{
    position:fixed!important;inset:0!important;
    padding:max(10px,env(safe-area-inset-top,0px)) 10px max(10px,env(safe-area-inset-bottom,0px))!important;
    align-items:center!important;justify-content:center!important;
  }
  .call-card{
    width:min(94vw,430px)!important;
    max-width:min(94vw,430px)!important;
    min-width:0!important;
    max-height:calc(100dvh - 24px)!important;
    padding:24px 16px!important;
    border-radius:28px!important;
    gap:5px!important;
  }
  .call-name{font-size:17px!important;margin-top:10px!important}
  .call-status{font-size:13px!important}
  .call-video{max-height:42dvh!important;border-radius:18px!important}
  .call-local-video{top:12px!important;right:12px!important;width:82px!important;height:112px!important;max-width:82px!important;max-height:112px!important;border-radius:14px!important}
  .call-actions{gap:14px!important;margin-top:14px!important;flex-wrap:wrap;justify-content:center}
  .call-round{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important}
}

/* Keep every avatar image centered and clipped on every screen. */
.avatar,.avatar-wrap,.avatar-wrap .avatar,.avatar img,.avatar-wrap img{
  object-position:center center!important;
}
.avatar img,.avatar-wrap .avatar img{
  display:block!important;width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  object-fit:cover!important;object-position:center!important;
}
.avatar-retired-notice{
  width:100%;box-sizing:border-box;padding:16px 18px;border-radius:18px;
  background:linear-gradient(145deg,rgba(124,92,255,.12),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;gap:6px;
  color:#eef2ff;text-align:left;
}
.avatar-retired-notice b{font-size:14px}
.avatar-retired-notice span{font-size:12px;line-height:1.5;color:#9da8bd}