/* HappyGram V40 — desktop rail stability + true circular avatars */
:root{--hg-rail-w:76px;--hg-sidebar-w:360px;--hg-violet:#8b5cf6;--hg-cyan:#22d3ee}

/* ===== DESKTOP SHELL / LEFT ICON RAIL ===== */
@media (min-width:761px){
  #screen-app{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;overflow:hidden!important;}
  #screen-app .app-shell{
    width:min(100vw - 28px, 1700px)!important;height:min(100dvh - 28px, 980px)!important;
    margin:14px auto!important;display:grid!important;
    grid-template-columns:var(--hg-rail-w) minmax(300px,var(--hg-sidebar-w)) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;overflow:hidden!important;
    min-width:0!important;min-height:0!important;
  }
  #screen-app .rail{
    width:var(--hg-rail-w)!important;min-width:var(--hg-rail-w)!important;max-width:var(--hg-rail-w)!important;
    box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:flex-start!important;gap:9px!important;padding:18px 12px!important;
    overflow:hidden!important;position:relative!important;z-index:5!important;
  }
  #screen-app .rail-brand{display:block!important;width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;flex:0 0 44px!important;margin:0 0 12px!important;border-radius:14px!important;object-fit:cover!important;}
  #screen-app .rail-btn{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;flex:0 0 44px!important;padding:0!important;margin:0!important;border-radius:14px!important;box-sizing:border-box!important;line-height:0!important;}
  #screen-app .rail-btn svg{width:20px!important;height:20px!important;display:block!important;flex:0 0 auto!important;}
  #screen-app .rail-btn:last-child{margin-top:auto!important;}
  #screen-app .sidebar,#screen-app .conversation{min-width:0!important;min-height:0!important;overflow:hidden!important;}
  #screen-app .sidebar{width:auto!important;max-width:none!important;}
  #screen-app .conversation{width:auto!important;max-width:none!important;}
  #screen-app .bottom-nav{display:none!important;}
}

/* ===== TRUE CIRCULAR USER AVATARS ===== */
.avatar-wrap,.avatar-wrap .avatar,
.avatar,.avatar img,
.chat-item .avatar-wrap,.chat-item .avatar,
.chat-item .avatar img,
.me .avatar-wrap,.me .avatar,.me .avatar img,
.msg-avatar,.msg-avatar .avatar,.msg-avatar img,
.story-add-avatar,.story-add-avatar img,
.public-profile-avatar,.public-profile-avatar img,
.qr-profile-avatar,.qr-profile-avatar img,
#me-avatar,#me-avatar img,
#peer-avatar,#peer-avatar img,
#edit-avatar-preview,#edit-avatar-preview img{
  border-radius:50%!important;
  clip-path:circle(50% at 50% 50%)!important;
  overflow:hidden!important;
  -webkit-mask-image:-webkit-radial-gradient(white,black)!important;
}
.avatar,.chat-item .avatar,.me .avatar,.msg-avatar,.story-add-avatar,#me-avatar,#peer-avatar,#edit-avatar-preview{
  aspect-ratio:1/1!important;
  box-sizing:border-box!important;
  isolation:isolate!important;
}
.avatar img,.chat-item .avatar img,.me .avatar img,.msg-avatar img,.story-add-avatar img,#me-avatar img,#peer-avatar img,#edit-avatar-preview img{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  display:block!important;object-fit:cover!important;object-position:center!important;
  border-radius:50%!important;clip-path:circle(50% at 50% 50%)!important;
}

/* Header avatar: circular frame, never the old rounded-square style */
.header-avatar-wrap,.conv-header .header-avatar-wrap{
  width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;
  flex:0 0 54px!important;padding:2px!important;border-radius:50%!important;overflow:visible!important;
  display:grid!important;place-items:center!important;
}
.header-avatar-wrap #peer-avatar,.conv-header .header-avatar-wrap #peer-avatar{
  width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;
  flex:0 0 50px!important;border-radius:50%!important;overflow:hidden!important;
}
.header-avatar-wrap #peer-avatar img,.conv-header .header-avatar-wrap #peer-avatar img{
  border-radius:50%!important;clip-path:circle(50% at 50% 50%)!important;object-fit:cover!important;
}
.header-avatar-wrap .online-dot{border-radius:50%!important;clip-path:none!important;}

/* Chat list avatars are always circles even when inline styles exist */
.chat-item .avatar-wrap{width:46px!important;height:46px!important;min-width:46px!important;flex:0 0 46px!important;display:grid!important;place-items:center!important;overflow:visible!important;}
.chat-item .avatar{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;}

/* ===== CLEAN DESKTOP HEADER ACTIONS ===== */
@media (min-width:761px){
  .conv-header-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex:0 0 auto!important;min-width:0!important;white-space:nowrap!important;}
  .conv-header-actions .icon-btn{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;border-radius:13px!important;box-sizing:border-box!important;}
  .conv-header-actions .icon-btn svg{width:18px!important;height:18px!important;display:block!important;}
  .conv-header-left{min-width:0!important;flex:1 1 auto!important;overflow:hidden!important;}
  .conv-header-info{min-width:0!important;overflow:hidden!important;}
}

/* Make the entire icon rail feel intentional rather than a loose stack */
#screen-app .rail-btn{position:relative!important;outline:none!important;}
#screen-app .rail-btn:hover{transform:translateY(-1px)!important;}
#screen-app .rail-btn.is-active:after{content:'';position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:99px;background:linear-gradient(180deg,var(--hg-cyan),var(--hg-violet));box-shadow:0 0 12px rgba(139,92,246,.65);}

/* Keep the rail from colliding with content at narrower desktop widths */
@media (min-width:761px) and (max-width:1100px){
  :root{--hg-rail-w:68px;--hg-sidebar-w:310px}
  #screen-app .app-shell{width:100vw!important;height:100dvh!important;margin:0!important;border-radius:0!important;}
  #screen-app .rail{padding-left:10px!important;padding-right:10px!important;}
  #screen-app .rail-btn,#screen-app .rail-brand{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important;}
  .header-avatar-wrap,.conv-header .header-avatar-wrap{width:48px!important;height:48px!important;min-width:48px!important;flex-basis:48px!important;}
  .header-avatar-wrap #peer-avatar,.conv-header .header-avatar-wrap #peer-avatar{width:44px!important;height:44px!important;min-width:44px!important;}
}

@media (max-width:760px){
  .header-avatar-wrap,.conv-header .header-avatar-wrap{width:44px!important;height:44px!important;min-width:44px!important;flex-basis:44px!important;border-radius:50%!important;}
  .header-avatar-wrap #peer-avatar,.conv-header .header-avatar-wrap #peer-avatar{width:40px!important;height:40px!important;min-width:40px!important;border-radius:50%!important;}
}