/* Discord-like bottom-left user popout menu */

.me-popout{
  position: fixed;
  z-index: 9999;
  width: 360px;
  max-width: calc(100vw - 24px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

.me-popout[hidden]{ display:none !important; }

.me-popout-banner{
  height: 92px;
  background:
    radial-gradient(160px 120px at 15% 40%, rgba(0,255,240,.20), transparent 70%),
    radial-gradient(200px 140px at 80% 40%, rgba(255,0,200,.22), transparent 72%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
}

.me-popout-body{
  padding: 12px 12px 12px;
}

.me-popout-user{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-top: -44px;
  padding-bottom: 10px;
}

.me-popout-avatar{
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 4px solid rgba(20,20,26,.95);
  position: relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.me-popout-avatar.has-image{ background-size: cover; background-position: center; }

.me-popout-avatar .avatar-initial{ font-weight: 800; font-size: 28px; opacity:.9 }

.me-popout-avatar .presence-dot{
  position:absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 3px solid rgba(20,20,26,.95);
}

.me-popout-names{ min-width:0; }
.me-popout-name{ font-weight: 800; font-size: 18px; line-height: 1.1; }
.me-popout-sub{ opacity:.7; font-size: 13px; margin-top: 3px; }

.me-popout-actions{ display:flex; gap: 10px; }
.me-popout-actions .me-btn{
  flex:1;
  border-radius: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-weight: 700;
}
.me-popout-actions .me-btn:hover{ background: rgba(255,255,255,.10); }
.me-popout-actions .me-btn.ghost{ background: rgba(255,255,255,.03); }

.me-popout-sep{ height:1px; background: rgba(255,255,255,.10); margin: 12px 0; }

.me-popout-title{ font-size: 12px; opacity:.75; font-weight: 800; letter-spacing: .02em; margin-bottom: 6px; }

.me-status-list{ display:flex; flex-direction: column; gap: 6px; }

.me-status-btn{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  color: rgba(255,255,255,.92);
}

.me-status-btn:hover{ background: rgba(255,255,255,.08); }

.me-status-btn .swatch{ width: 12px; height: 12px; border-radius: 999px; }
.me-status-btn .label{ flex:1; text-align:left; font-weight: 700; }
.me-status-btn .chev{ opacity:.65; font-size: 16px; }

.me-submenu{
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  width: 220px;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.me-submenu[hidden]{ display:none !important; }

.me-submenu .me-submenu-body{ padding: 10px; }

.me-submenu .me-subitem{
  width:100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  color: rgba(255,255,255,.92);
  text-align:left;
  font-weight: 700;
}
.me-submenu .me-subitem:hover{ background: rgba(255,255,255,.08); }

/* Presence colors (reuse existing dot classes) */
.swatch.is-online{ background: #2bd9a3; }
.swatch.is-away{ background: #f3c243; }
.swatch.is-dnd{ background: #ff4d4f; }
.swatch.is-offline{ background: #6b7280; }
.swatch.is-invisible{ background: #6b7280; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }