/* One geometry for every presence surface, including the native tray.
   The away crescent opens upper-left, toward an avatar at its upper-left. */
:root {
  --presence-available-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E");
  --presence-away-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cg transform='translate(24 0) scale(-1 1)'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z'/%3E%3C/g%3E%3C/svg%3E");
  --presence-dnd-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.3 1.3 21.4 21.4'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M7.5 12h9' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --presence-offline-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 1.5 21 21'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3C/svg%3E");
}
.presence-icon[data-activity] {
  --presence-shape:var(--presence-available-mask);
  --presence-color:var(--theme-success,#29db91);
  position:relative;display:inline-block;flex:none;width:10px;height:10px;
  background:transparent;border-radius:0;
}
.presence-icon[data-activity=away] {--presence-shape:var(--presence-away-mask);--presence-color:#3498ff;}
.presence-icon[data-activity=dnd] {--presence-shape:var(--presence-dnd-mask);--presence-color:#ef405a;}
.presence-icon[data-activity=offline] {--presence-shape:var(--presence-offline-mask);--presence-color:#9ca3af;}
.presence-icon[data-activity]::before {
  content:'';position:absolute;inset:0;display:block;background:var(--presence-color);
  mask:var(--presence-shape) center / contain no-repeat;
}
.presence-icon[data-activity]::after {content:none;}
.social-activity-option .presence-icon[data-activity] {width:20px;height:20px;}
.social-presence .presence-icon[data-activity] {width:10px;height:10px;}
.social-presence .presence-icon[data-activity=available] {width:6px;height:6px;}
.social-panel .social-person-name .social-presence.is-away,
.social-presence.is-away.is-online {color:#3498ff;}
[data-own-activity][data-activity=away] {--own-activity-text:#3498ff;--own-activity-dot:#3498ff;}
[data-own-activity] .presence-icon[data-activity] {background:transparent;}
#account-menu.account-menu-trigger [data-own-activity] .presence-icon[data-activity]:not([data-activity=available]),
.home-account-chip [data-own-activity] .presence-icon[data-activity]:not([data-activity=available]),
.account-user-menu header .account-menu-status .presence-icon[data-activity]:not([data-activity=available]) {width:10px;height:10px;}
.account-profile-avatar .presence-icon[data-activity] {
  position:absolute;right:0;bottom:0;
  width:calc(31px * var(--profile-scale));height:calc(31px * var(--profile-scale));
  /* The profile has its own surface, even when the app uses the white theme.
     A masked crescent must reveal this backing rather than a white disk. */
  background:var(--profile-surface,#0c0d10);border-color:var(--profile-surface,#0c0d10);border-radius:50%;
}
.account-profile-avatar .presence-icon[data-activity]::after {content:none;}
#tray .tray-status-dot.presence-icon[data-activity] {width:14px;height:14px;background:transparent;}
.tray-header small .presence-icon[data-activity] {width:10px;height:10px;background:transparent;}

/* Join belongs to the friend's identity, with space for its complete label.
   Message and options retain their own column on the right. */
.social-panel .social-friend-room-action {flex-basis:100%;min-width:0;}
.social-panel .social-friend-room-action:empty {display:none;}
.social-panel .social-friend-room-action > .social-room-join {
  flex-basis:auto;align-self:start;justify-self:start;max-width:100%;width:max-content;
  min-height:30px;margin-top:4px;padding:5px 9px;font-size:11px;line-height:1.2;gap:6px;
}
.social-panel .social-friend-room-action > .social-room-join svg {width:14px;height:14px;flex:none;}
.social-panel .social-person-actions {align-self:center;}
.social-panel .social-person-name:has(> .social-friend-room-action) {column-gap:6px;row-gap:4px;}
.appearance-example-status>span {display:inline-flex;align-items:center;gap:5px;}