/* Discord-style profile popout */
.nx-popout {
  position:fixed; z-index:70; width:340px; max-height:calc(100vh - 16px); overflow:auto;
  border-radius:12px; background: var(--nx-bg, #15131b); color:var(--nx-text); scrollbar-width:none;
  box-shadow:0 0 0 1px #ffffff12, 0 16px 48px #000b;
  font-family: "gg sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; font-size:14px;
  animation: nx-popout-in .14s ease-out;
}
@keyframes nx-popout-in { from { opacity:0; transform:scale(.97) translateY(4px); } to { opacity:1; transform:none; } }
.nx-popout-banner { position:relative; height:120px; border-radius:12px 12px 0 0; }
.nx-popout-banner > img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.nx-popout-more { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:0; background:#0008; color:#fff; display:grid; place-items:center; cursor:pointer; }
.nx-popout-more:hover { background:#000a; }
.nx-popout-more .nx-icon { width:18px; height:18px; }
.nx-popout-menu { position:absolute; top:50px; right:12px; z-index:2; min-width:170px; padding:6px; border-radius:8px; background:var(--nx-rail); box-shadow:0 0 0 1px #ffffff12, 0 10px 30px #000a; }
.nx-popout-menu button { display:block; width:100%; text-align:left; border:0; background:none; color:var(--nx-text); font:inherit; padding:8px 10px; border-radius:4px; cursor:pointer; }
.nx-popout-menu button:hover { background: var(--nx-accent, #9d68e4); color:#fff; }

.nx-popout-head { position:relative; display:flex; align-items:flex-end; gap:8px; padding:0 16px; margin-top:-44px; min-height:44px; }
.nx-popout-avatar { flex:none; border-radius:50%; padding:6px; background: var(--nx-bg, #15131b); }
.nx-popout-avatar .nx-avatar { --avatar: 80px; font-size:30px; }
.nx-popout-status {
  position:relative; margin:0 0 10px; padding:8px 12px; max-width:200px; border-radius:16px;
  background:var(--nx-raised); color:var(--nx-text); font:inherit; font-size:13px; line-height:1.3; border:0; text-align:left;
  display:flex; align-items:center; gap:6px; overflow-wrap:anywhere;
}
.nx-popout-status::before { content: ''; position:absolute; left:-6px; bottom:2px; width:10px; height:10px; border-radius:50%; background:var(--nx-raised); }
.nx-popout-status.is-empty { color: var(--nx-muted, #8e879b); font-style:italic; cursor:pointer; }
.nx-popout-status.is-empty:hover { color:var(--nx-text); }
.nx-popout-status .nx-icon { width:16px; height:16px; flex:none; font-style:normal; }

.nx-popout-body { padding:8px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.nx-popout-body h3 { margin:0; font-size:20px; font-weight:700; color: var(--nx-text, #f2eff7); display:flex; align-items:center; gap:6px; overflow-wrap:anywhere; }
.nx-popout-handle { margin:-6px 0 0; font-size:14px; color: var(--nx-soft, #c9c3d4); display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.nx-popout-bio { margin:0; font-size:14px; line-height:1.4; color:var(--nx-text); overflow-wrap:anywhere; }
.nx-popout-bio a { color:var(--nx-accent-light); }
.nx-popout-since { margin:0; font-size:12px; color: var(--nx-muted, #8e879b); }

.nx-popout-roles { display:flex; flex-wrap:wrap; gap:6px; }
.nx-popout-role { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 8px; border-radius:6px; background: var(--nx-raised, #1e1b26); font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--nx-text); }
.nx-popout-role i { width:12px; height:12px; border-radius:50%; flex:none; }
.nx-popout-role button, .nx-popout-add-role button { border:0; background:none; color: var(--nx-muted, #8e879b); padding:0; display:grid; place-items:center; cursor:pointer; }
.nx-popout-role button:hover, .nx-popout-add-role button:hover { color:#fff; }
.nx-popout-role .nx-icon { width:12px; height:12px; }
.nx-popout-add-role { display:inline-flex; align-items:center; height:26px; padding:0 6px; border-radius:6px; background: var(--nx-raised, #1e1b26); }
.nx-popout-add-role .nx-icon { width:16px; height:16px; }
.nx-popout-add-role select { height:24px; border:0; background: var(--nx-raised, #1e1b26); color:var(--nx-text); font:inherit; font-size:13px; }

.nx-popout-primary { display:flex; align-items:center; justify-content:center; gap:8px; height:40px; border:0; border-radius:8px; background: var(--profile-accent, var(--nx-accent, #9d68e4)); color: var(--profile-accent-text, #fff); font:inherit; font-size:15px; font-weight:600; cursor:pointer; margin-top:4px; }
.nx-popout-primary:focus-visible { outline:2px solid var(--nx-accent); outline-offset:3px; }
.nx-popout-primary:hover { filter:brightness(1.1); }
.nx-popout-primary .nx-icon { width:18px; height:18px; }
.nx-popout-message input { width:100%; box-sizing:border-box; height:40px; border:1px solid #ffffff14; border-radius:8px; background:var(--nx-rail); color: var(--nx-text, #f2eff7); font:inherit; font-size:15px; padding:0 12px; outline:none; }
.nx-popout-message input:focus { border-color: var(--nx-accent, #9d68e4); }

.nx-popout.is-sheet { left:0 !important; right:0; top:auto !important; bottom:0; width:auto; max-height:85vh; border-radius:16px 16px 0 0; padding-bottom:env(safe-area-inset-bottom); animation: nx-sheet-in .2s ease-out; }
.nx-popout.is-sheet .nx-popout-banner { border-radius:16px 16px 0 0; }
@keyframes nx-sheet-in { from { transform:translateY(100%); } to { transform:none; } }

/* clickable names in chat */
.nx-name-button { border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer; }
.nx-name-button:hover strong { text-decoration:underline; }
.nx-dm-profile{padding:12px}.nx-dm-profile .nx-profile-card{width:100%;max-width:none;overflow:hidden}.nx-dm-profile>.nx-button{width:100%;margin-top:12px}.nx-dm-profile .nx-profile-card-body{padding:16px}.nx-dm-profile .nx-profile-banner{height:120px}