.presence-trigger{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:5px 8px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text);white-space:nowrap;cursor:pointer}.presence-trigger:hover{background:var(--surface);border-color:var(--line)}.presence-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.presence-avatar-stack{display:flex;align-items:center;padding-right:2px}.presence-avatar{display:flex;align-items:center;justify-content:center;width:29px;height:29px;flex-shrink:0;border-radius:50%;border:2px solid var(--bg,#0f0f0f);overflow:hidden;background:var(--surface);color:var(--text);font-size:11px;font-weight:600}.presence-avatar img{display:block;width:100%;height:100%;object-fit:cover}.presence-avatar-stack .presence-avatar+.presence-avatar{margin-left:-9px}.presence-avatar-stack .presence-avatar:nth-child(2n){background:var(--hover);color:var(--text)}.presence-avatar-stack .presence-avatar:nth-child(3n){background:color-mix(in srgb,var(--text) 8%,var(--panel));color:var(--text)}.presence-count{font-size:12px;font-variant-numeric:tabular-nums;font-weight:600}.presence-trigger-label{font-size:11px;color:var(--muted)}.presence-dot{width:5px;height:5px;border-radius:50%;background:var(--text);margin-left:1px}.presence-dot[data-available=false]{background:var(--faint)}.presence-placeholder{display:flex;align-items:center;justify-content:center;width:29px;height:29px;color:var(--muted)}.presence-placeholder svg{width:18px;height:18px}.presence-unavailable{opacity:.7}.presence-dialog{width:390px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 48px);padding:0;margin:auto;border:1px solid var(--line);border-radius:13px;background:var(--panel,#161616);color:var(--text);box-shadow:0 22px 80px #0008;overflow:auto}.presence-dialog::backdrop{background:#0008;backdrop-filter:blur(2px)}.presence-dialog>header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--panel);z-index:1}.presence-dialog h2{font-size:17px;font-weight:600;letter-spacing:-.25px}.presence-dialog header p{font-size:11px;color:var(--muted);margin-top:5px}.presence-dialog header .icon-btn{min-width:44px;min-height:44px}.presence-roster{padding:10px}.presence-person{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border-radius:7px;text-align:left;color:var(--text);cursor:pointer}.presence-person:hover{background:var(--surface)}.presence-person:focus-visible{outline:2px solid var(--accent);outline-offset:0}.presence-person>.presence-avatar{width:38px;height:38px;border:1px solid var(--line);font-size:15px}.presence-person>span:nth-child(2){min-width:0;flex:1}.presence-person strong{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:550;overflow-wrap:anywhere}.presence-person strong small{font-size:10px;color:var(--muted);font-weight:400}.presence-person-status{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);margin-top:5px}.presence-person-status i{width:5px;height:5px;border-radius:50%;background:var(--text)}.presence-person>svg{width:14px;height:14px;color:var(--faint);flex-shrink:0}.presence-note{font-size:12px;color:var(--muted);padding:10px;line-height:1.6}.presence-footnote{font-size:11px;color:var(--muted);line-height:1.65;border-top:1px solid var(--line);margin:8px 10px 0;padding:14px 0 5px}.presence-empty{font-size:13px;color:var(--muted);padding:25px 10px;text-align:center}.presence-trigger,.presence-person{transition:background .15s,border-color .15s}.presence-trigger:active,.presence-person:active{transform:translateY(1px)}
@media(max-width:900px){.presence-trigger-label{display:none}.presence-avatar-stack .presence-avatar:nth-child(n+3){display:none}}
@media(max-width:620px){.presence-trigger{gap:4px;padding:4px}.presence-avatar-stack .presence-avatar:nth-child(n+2){display:none}.presence-dot{display:none}}
@media(prefers-reduced-motion:reduce){.presence-trigger,.presence-person{transition:none}.presence-trigger:active,.presence-person:active{transform:none}}
.presence-avatar{position:relative}.presence-avatar img{position:absolute;inset:0;background:var(--panel)}
#website-presence:empty{display:none}
/* Keep search in its own 44px track; added presence must never squeeze it. */
@media(max-width:600px){
  .portal-header .portal-topbar{grid-template-columns:44px minmax(0,1fr);column-gap:8px;align-items:start}
  .portal-header .portal-topbar .brand-home{grid-column:1/-1;min-width:0}
  .portal-header .portal-topbar .command-trigger{grid-column:1;grid-row:2;width:44px;min-width:44px;max-width:44px;min-height:44px;height:44px;align-self:start}
  .portal-header .portal-topbar .portal-actions{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;width:100%;min-width:0;max-width:100%;gap:5px;margin:0}
  .portal-header .portal-actions>button,.portal-header .portal-actions>#website-presence{flex:0 0 44px;width:44px;min-width:44px;max-width:44px;min-height:44px;box-sizing:border-box}
  .portal-header .portal-actions>button{padding:0;justify-content:center;gap:3px}
  .portal-header .portal-actions .presence-trigger{position:relative;width:44px;min-width:44px;max-width:44px;height:44px;padding:0;justify-content:center;gap:0}
  .portal-header .portal-actions .presence-avatar-stack{padding-right:0}
  .portal-header .portal-actions .presence-count{position:absolute;right:1px;bottom:1px;min-width:14px;max-width:32px;padding:1px 3px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:9px;line-height:12px;text-align:center;overflow:hidden;text-overflow:ellipsis}
  .portal-header .portal-actions .modcall-count{min-width:15px;font-size:10px}
}
@media(max-width:360px){
  .portal-header .portal-topbar .portal-actions{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:6px;justify-items:center}
}