/* HappyGram V46 — hard mobile/tablet repair.  Designed to survive browser zoom and legacy CSS. */
@media (max-width:1100px){
  html,body{width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;overflow-x:hidden!important;zoom:1!important;transform:none!important}
  body{font-size:16px!important}
  #screen-app{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;min-height:100dvh!important;padding:0!important;margin:0!important;display:block!important;overflow:hidden!important}
  .app-shell{position:relative!important;width:100%!important;max-width:none!important;height:100dvh!important;min-height:100dvh!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;display:block!important;overflow:hidden!important;transform:none!important;scale:1!important;zoom:1!important}

  /* Mobile home */
  .app-shell:not([data-view="chat"]) .conversation{display:none!important}
  .app-shell:not([data-view="chat"]) .sidebar{display:flex!important;position:absolute!important;inset:0 0 76px 0!important;width:100%!important;max-width:none!important;min-width:0!important;height:auto!important;transform:none!important;zoom:1!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:linear-gradient(180deg,#0b0f19,#070a12)!important}
  .app-shell[data-view="chat"] .sidebar{display:none!important}

  /* bottom navigation */
  .app-shell:not([data-view="chat"]) .rail{position:absolute!important;left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;width:auto!important;height:58px!important;display:flex!important;align-items:center!important;justify-content:space-around!important;gap:4px!important;padding:5px 8px!important;z-index:500!important;border-radius:19px!important;overflow:hidden!important}
  .app-shell:not([data-view="chat"]) .rail-brand{display:none!important}
  .app-shell:not([data-view="chat"]) .rail-btn{width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;flex:0 0 44px!important;margin:0!important;padding:0!important;transform:none!important;scale:1!important;zoom:1!important}
  .app-shell[data-view="chat"] .rail{display:none!important}

  /* Header — absolutely bounded avatar; no legacy .avatar.big can enlarge it. */
  .sidebar-top{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;min-width:0!important;min-height:70px!important;height:auto!important;padding:12px 12px 8px!important;overflow:hidden!important}
  .sidebar-top .me{display:flex!important;align-items:center!important;gap:9px!important;flex:1 1 auto!important;min-width:0!important;max-width:calc(100% - 92px)!important;padding:6px!important;overflow:hidden!important;transform:none!important;scale:1!important}
  .sidebar-top .me > .avatar-wrap,
  .sidebar-top .me .avatar-wrap,
  .sidebar-top .me #me-avatar,
  .sidebar-top .me #me-avatar.avatar,
  .sidebar-top .me .avatar-wrap .avatar,
  .sidebar-top .me .avatar-wrap .avatar img,
  .sidebar-top .me #me-avatar img{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;flex:0 0 44px!important;flex-basis:44px!important;transform:none!important;scale:1!important;zoom:1!important;border-radius:50%!important;overflow:hidden!important;object-fit:cover!important;object-position:center!important;display:block!important;margin:0!important;padding:0!important
  }
  .sidebar-top .me > div{min-width:0!important;max-width:100%!important;overflow:hidden!important}
  .sidebar-top>.icon-btn{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;flex:0 0 40px!important}

  .search-new{width:auto!important;max-width:none!important;margin:4px 12px 10px!important;padding:0!important;transform:none!important;scale:1!important}
  .search-new input{width:100%!important;height:46px!important;min-height:46px!important;max-height:46px!important;font-size:16px!important;transform:none!important;scale:1!important}
  .story-strip{width:auto!important;max-width:none!important;margin:0!important;padding:0 12px 9px!important;overflow:hidden!important}
  .story-add{max-width:100%!important;overflow:hidden!important}
  .story-add-avatar{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;flex:0 0 40px!important}
  .chat-list{width:100%!important;max-width:none!important;min-width:0!important;flex:1 1 auto!important;padding:0 10px 14px!important;margin:0!important;overflow-x:hidden!important;overflow-y:auto!important;transform:none!important;scale:1!important;zoom:1!important}
  .chat-item{width:100%!important;max-width:none!important;min-width:0!important;min-height:68px!important;padding:9px 10px!important;margin:2px 0!important;transform:none!important;scale:1!important}
  .chat-item .avatar-wrap,.chat-item .avatar-wrap .avatar,.chat-item .avatar-wrap .avatar img,.chat-item .avatar,#me-avatar{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;max-width:48px!important;max-height:48px!important;flex:0 0 48px!important;flex-basis:48px!important;border-radius:50%!important;overflow:hidden!important;object-fit:cover!important;object-position:center!important;transform:none!important;scale:1!important;zoom:1!important}

  /* Chat */
  .app-shell[data-view="chat"] .conversation{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100dvh!important;min-height:100dvh!important;max-width:none!important;border:0!important;border-radius:0!important;transform:none!important;scale:1!important;zoom:1!important;overflow:hidden!important}
  .conversation-active{width:100%!important;height:100%!important;min-width:0!important;display:flex!important;flex-direction:column!important;transform:none!important;scale:1!important;zoom:1!important}
  .conv-header{width:100%!important;height:64px!important;min-height:64px!important;flex:0 0 64px!important;padding:7px 8px!important;transform:none!important;scale:1!important}
  .conv-header .header-avatar-wrap,.conv-header #peer-avatar,.conv-header #peer-avatar.avatar,.conv-header .header-avatar-wrap .avatar,.conv-header .header-avatar-wrap img{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;flex:0 0 44px!important;border-radius:50%!important;overflow:hidden!important;object-fit:cover!important;object-position:center!important;transform:none!important;scale:1!important;zoom:1!important}
  .messages{width:100%!important;max-width:none!important;min-width:0!important;flex:1 1 auto!important;min-height:0!important;padding:12px 10px!important;overflow-x:hidden!important;overflow-y:auto!important;transform:none!important;scale:1!important;zoom:1!important}
  .msg{max-width:88%!important;transform:none!important;scale:1!important}
  .msg-image{max-width:100%!important;height:auto!important;max-height:64dvh!important;object-fit:contain!important}
  .composer{width:calc(100% - 16px)!important;max-width:none!important;min-width:0!important;height:58px!important;min-height:58px!important;margin:7px 8px 8px!important;padding:5px!important;transform:none!important;scale:1!important;zoom:1!important}
  .composer input{min-width:0!important;flex:1 1 auto!important;font-size:16px!important;transform:none!important;scale:1!important}
}

/* If the browser is reporting a desktop-like viewport on a phone, keep the avatar small anyway. */
@media (pointer:coarse) and (max-width:1300px){
  .sidebar-top .me .avatar-wrap,.sidebar-top .me #me-avatar,.sidebar-top .me #me-avatar.avatar{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;flex-basis:44px!important}
  .sidebar-top .me .avatar-wrap img,.sidebar-top .me #me-avatar img{width:44px!important;height:44px!important;max-width:44px!important;max-height:44px!important}
}