#portalPresence { position: fixed; z-index: 26; right: var(--s-3); bottom: calc(var(--s-3) + var(--control-height-touch) + var(--s-2) + var(--tm-slot, 0px)); color: var(--ink); font-size: var(--t-sub); }
body:has(.crystal-page-guide__dock.is-docked, .wrap.w-bleed, .wrap.w-bleed-x) #portalPresence { display: none; }
#portalPresence.is-open { z-index: 45; }
.presence-me { position: relative; display: grid; place-items: center; width: var(--control-height-touch); height: var(--control-height-touch); padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-card); color: var(--navy); font: inherit; box-shadow: 0 3px 12px rgb(0 0 0 / .12); cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.presence-me:hover, #portalPresence.is-open .presence-me { border-color: var(--gold); box-shadow: 0 4px 16px rgb(0 0 0 / .18); }
.presence-face { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
#portalPresence .acct-character { width: 100%; height: 100%; border: 0; }
.presence-init { color: var(--navy); font-size: var(--t-sub); font-weight: 700; }
.presence-count { position: absolute; top: calc(-1 * var(--s-1)); left: calc(-1 * var(--s-1)); display: grid; place-items: center; box-sizing: border-box; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--s-1); border: 2px solid var(--surface-card); border-radius: 999px; background: var(--navy); color: var(--surface-card); font-size: var(--t-label); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.presence-count[hidden] { display: none; }
#portalPresence.is-off .presence-count { background: var(--mute-bg); color: var(--mute-fg); }
#portalPresence.is-off .presence-face { opacity: .6; }
.presence-panel { position: absolute; right: calc(100% + var(--s-2)); bottom: 0; display: flex; flex-direction: column; box-sizing: border-box; width: min(21rem, calc(100vw - var(--control-height-touch) - 3 * var(--s-3))); max-height: calc(100dvh - var(--presence-top, 0px) - var(--presence-room, 0px) - var(--s-3)); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-card); box-shadow: 0 6px 24px rgb(0 0 0 / .14); overflow-wrap: anywhere; animation: presence-in .14s ease-out; }
.presence-panel[hidden] { display: none; }
@keyframes presence-in { from { opacity: 0; transform: translateY(var(--s-1)); } }
.presence-head { display: flex; align-items: center; gap: var(--s-3); }
.presence-head-face { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-card); }
.presence-head-t { flex: 1 1 auto; min-width: 0; }
.presence-head h2 { margin: 0; color: var(--navy); font-size: var(--t-body); font-weight: 700; }
.presence-head p { margin: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.presence-close { flex: none; }
.presence-body { flex: 1 1 auto; min-height: 0; margin-top: var(--s-1); overflow-y: auto; overscroll-behavior: contain; }
.presence-list { margin: 0; padding: 0; list-style: none; }
.presence-row { display: flex; align-items: center; gap: var(--s-3); min-height: var(--control-height-touch); padding: var(--s-1) 0; box-sizing: border-box; }
.presence-av { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; background: var(--mute-bg); color: var(--navy); font-size: var(--t-label); font-weight: 700; }
.presence-av { overflow: hidden; }
.presence-av .pc-character { display: block; width: 100%; height: 100%; }
.presence-avatar-pending { width: 100%; height: 100%; background: var(--mute-bg); }
.presence-who { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.presence-name, .presence-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presence-name { font-size: var(--t-body); }
.presence-where { color: var(--muted); }
.presence-chip { flex: none; padding: 2px var(--s-2); border-radius: 999px; background: var(--info-bg); color: var(--info-fg); font-size: var(--t-label); font-weight: 600; }
.presence-body p, .presence-foot { margin: var(--s-2) 0 0; color: var(--muted); }
.presence-foot { padding-top: var(--s-2); border-top: 1px solid var(--hair); }
@media (max-width: 1099px) { body:has(#content [data-staffing-plan]) #portalPresence { display: none; } }
@media (max-width: 900px) { body.has-rail #portalPresence { bottom: calc(2 * var(--control-height-touch) + var(--s-3) + 2 * var(--s-2) + env(safe-area-inset-bottom, 0px) + var(--tm-slot, 0px)); } }
@media (max-width: 640px) {
  .presence-panel { right: 0; bottom: calc(100% + var(--s-2)); width: calc(100vw - 2 * var(--s-3)); max-height: calc(100dvh - var(--presence-top, 0px) - var(--presence-room, 0px) - var(--control-height-touch) - var(--s-2) - var(--s-3)); }
  body:has(.pdx-savebar:not(:empty)) #portalPresence, body:has(:is(input, textarea, select, [contenteditable="true"]):focus:not(#portalPresence *)) #portalPresence { display: none; }
  body:has(#verPill) #portalPresence { bottom: calc(18px + 4.5rem + var(--s-2) + var(--tm-slot, 0px)); }
  body.has-rail:has(#verPill) #portalPresence { bottom: calc(var(--control-height-touch) + 2 * var(--s-3) + 4.5rem + var(--s-2) + env(safe-area-inset-bottom, 0px) + var(--tm-slot, 0px)); } /* fetch-1865: --tm-slot lifts Live Online one slot above the Training Mode icon */
}
@media (prefers-reduced-motion: reduce) { .presence-me { transition: none; } .presence-panel { animation: none; } }
@media print { #portalPresence { display: none; } }