/* SkabStudio v2.8.5 — mobile notification and member-profile positioning */

/* Keep the bell visually light and separate from the account circle. */
.garage-notification-button{
  width:42px!important;
  height:42px!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(5,12,20,.72)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.garage-notification-button:hover,
.garage-notification-button:focus-visible{
  background:rgba(8,20,29,.92)!important;
  outline:1px solid rgba(44,232,255,.55)!important;
  outline-offset:2px;
}
.garage-notification-button svg{width:21px!important;height:21px!important}

/* Public member profiles are standalone pages and must not inherit the
   fixed homepage header offset. */
body.member-profile-page,
body.member-profile-page:not(.tool-view-open){
  padding-top:0!important;
  margin-top:0!important;
}
body.member-profile-page>header{display:none!important}
body.member-profile-page .members-page{
  margin-top:0!important;
  padding-top:5px!important;
}

@media(max-width:720px){
  .garage-notification-button{
    right:62px!important;
    top:11px!important;
  }

  /* Open from the top as a proper overlay instead of appearing halfway
     down the page like a bottom sheet. */
  .member-notification-drawer{
    align-items:flex-start!important;
    justify-content:center!important;
    padding:max(8px,env(safe-area-inset-top)) 8px 8px!important;
    overflow:hidden!important;
  }
  .member-notification-panel{
    width:100%!important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)))!important;
    border:1px solid rgba(90,231,255,.35)!important;
    margin:0!important;
  }
  .member-notification-head{
    position:sticky;
    top:0;
    z-index:2;
    background:#070d14;
    padding:12px!important;
  }
  .member-notification-head h4{font-size:20px!important}
  .member-notification-actions{gap:6px!important}
  .member-notification-actions button{padding:8px!important;font-size:8px!important}
  .member-notification-list{min-height:120px}

  body.member-profile-page .members-page{padding-top:4px!important}
}
