/* BuddySocial v10.79 - mobile collapsed chat button fix
   Mobile/PWA only. No site palette changes. */
@media (max-width:1100px){
  /* Only the collapsed launcher becomes a fixed-size BuddySocial icon button. */
  #friend-chat.friend-chat.is-collapsed{
    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
    right:10px !important;
    bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;
    border-radius:14px !important;
    overflow:visible !important;
  }

  #friend-chat.friend-chat.is-collapsed .friend-chat-head{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:14px !important;
    overflow:visible !important;
  }

  #friend-chat.friend-chat.is-collapsed .friend-chat-toggle{
    position:relative !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    border-radius:14px !important;
    overflow:visible !important;
    line-height:1 !important;
    box-sizing:border-box !important;
  }

  #friend-chat.friend-chat.is-collapsed .friend-chat-toggle::before{
    content:'💬' !important;
    display:block !important;
    flex:0 0 auto !important;
    margin:0 !important;
    font-size:25px !important;
    line-height:1 !important;
    transform:none !important;
  }

  /* Remove the elements that caused the launcher to stretch horizontally. */
  #friend-chat.friend-chat.is-collapsed .friend-chat-toggle > b,
  #friend-chat.friend-chat.is-collapsed .friend-chat-toggle > .chat-online-count,
  #friend-chat.friend-chat.is-collapsed .friend-chat-toggle > .chat-chevron{
    display:none !important;
  }

  /* Tiny status dot stays visible without affecting button dimensions. */
  #friend-chat.friend-chat.is-collapsed .friend-chat-toggle > .chat-presence-dot{
    position:absolute !important;
    right:5px !important;
    bottom:5px !important;
    width:10px !important;
    height:10px !important;
    min-width:10px !important;
    min-height:10px !important;
    margin:0 !important;
    border-radius:50% !important;
    z-index:2 !important;
  }

  /* Unread messages appear as a small badge on the corner. */
  #friend-chat.friend-chat.is-collapsed .friend-chat-toggle > .chat-unread-badge:not([hidden]){
    position:absolute !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    top:-5px !important;
    right:-5px !important;
    min-width:20px !important;
    height:20px !important;
    padding:0 5px !important;
    margin:0 !important;
    border-radius:10px !important;
    font-size:10px !important;
    line-height:20px !important;
    z-index:3 !important;
    box-sizing:border-box !important;
  }

  #friend-chat.friend-chat.is-collapsed .friend-chat-body,
  #friend-chat.friend-chat.is-collapsed .chat-unread-summary{
    display:none !important;
  }
}

@media (max-width:420px){
  #friend-chat.friend-chat.is-collapsed{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    right:8px !important;
  }
  #friend-chat.friend-chat.is-collapsed .friend-chat-head,
  #friend-chat.friend-chat.is-collapsed .friend-chat-toggle{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
  }
  #friend-chat.friend-chat.is-collapsed .friend-chat-toggle::before{
    font-size:23px !important;
  }
}