/* HappyGram V45 — hard mobile viewport reset.
   This layer intentionally overrides legacy desktop rules that were accumulated
   in previous versions. It does not change the PHP/API layer. */
@media (max-width: 760px){
  html{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    zoom:1!important;
  }
  body{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    zoom:1!important;
    transform:none!important;
    font-size:16px!important;
  }
  #screen-app{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    overflow:hidden!important;
    transform:none!important;
  }
  .app-shell{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    transform:none!important;
    scale:1!important;
    zoom:1!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  /* Home/chat list: one normal phone-width column, never a scaled desktop panel. */
  .app-shell:not([data-view="chat"]) .sidebar{
    position:absolute!important;
    inset:0 0 68px 0!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    padding:0 0 4px!important;
    margin:0!important;
    transform:none!important;
    zoom:1!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
  }
  .app-shell:not([data-view="chat"]) .rail{
    position:absolute!important;
    left:10px!important;
    right:10px!important;
    bottom:8px!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    height:56px!important;
    min-height:56px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-around!important;
    padding:5px 7px!important;
    margin:0!important;
    transform:none!important;
    zoom:1!important;
    z-index:200!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;zoom:1!important;
  }
  .app-shell:not([data-view="chat"]) .sidebar-top{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding:12px 12px 8px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
  }
  .app-shell:not([data-view="chat"]) .sidebar-top .me{
    min-width:0!important;
    width:auto!important;
    max-width:calc(100% - 88px)!important;
    flex:1 1 auto!important;
  }
  .app-shell:not([data-view="chat"]) .search-new{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    margin:4px 12px 9px!important;
    padding:0!important;
  }
  .app-shell:not([data-view="chat"]) .search-new input{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:46px!important;
    font-size:16px!important;
  }
  .app-shell:not([data-view="chat"]) .story-strip{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    margin:0 12px 8px!important;
    padding:7px!important;
  }
  .app-shell:not([data-view="chat"]) .chat-list{
    flex:1 1 auto!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    padding:0 9px 8px!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    transform:none!important;
    zoom:1!important;
  }
  .app-shell:not([data-view="chat"]) .chat-item{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:66px!important;
    margin:2px 0!important;
    padding:9px!important;
    transform:none!important;
  }
  .chat-item .avatar-wrap,
  .chat-item .avatar{
    flex:0 0 46px!important;
    width:46px!important;height:46px!important;
    min-width:46px!important;min-height:46px!important;
    max-width:46px!important;max-height:46px!important;
  }
  .chat-item .avatar img,
  .chat-item .avatar-wrap img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:center!important;
    border-radius:50%!important;display:block!important;
  }
  .chat-item-body{min-width:0!important;max-width:none!important;overflow:hidden!important}
  .chat-item-name,.chat-item-preview{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  /* Conversation: exactly one viewport, no desktop scaling. */
  .app-shell[data-view="chat"] .rail{display:none!important}
  .app-shell[data-view="chat"] .sidebar{display:none!important}
  .app-shell[data-view="chat"] .conversation{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    transform:none!important;
    zoom:1!important;
    border:0!important;border-radius:0!important;
  }
  .conversation-active{width:100%!important;max-width:none!important;min-width:0!important;height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important}
  .conv-header{width:100%!important;max-width:none!important;min-width:0!important;flex:0 0 64px!important;height:64px!important;min-height:64px!important;padding:6px 8px!important}
  .conv-header-left{min-width:0!important;max-width:calc(100% - 118px)!important;overflow:hidden!important}
  .conv-header-actions{min-width:0!important;max-width:118px!important;overflow:hidden!important;gap:2px!important}
  .messages{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:12px 9px 10px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    transform:none!important;
    zoom:1!important;
  }
  .msg-row{width:100%!important;max-width:100%!important;min-width:0!important}
  .msg{max-width:88%!important;min-width:0!important}
  .msg-image{width:auto!important;height:auto!important;max-width:100%!important;max-height:62dvh!important;object-fit:contain!important;object-position:center!important}
  .composer{
    position:relative!important;
    left:auto!important;right:auto!important;bottom:auto!important;
    flex:0 0 60px!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    height:60px!important;min-height:60px!important;
    margin:0!important;padding:6px 7px!important;
    transform:none!important;zoom:1!important;
  }
  .composer input{width:auto!important;min-width:0!important;flex:1 1 auto!important;font-size:16px!important}

  /* Remove accidental fixed/large transforms inherited by overlays and cards. */
  .panel-overlay,.call-overlay,.qr-overlay{
    position:fixed!important;inset:0!important;width:100%!important;height:100%!important;
    max-width:none!important;transform:none!important;zoom:1!important;
  }
  .panel-card,.call-card,.qr-card,.wallpaper-chat-panel{
    width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;
    min-width:0!important;transform:none!important;zoom:1!important;
  }
}