.collaboration-controls { display: flex; align-items: center; gap: inherit; flex: none; }
.collaboration-controls:not(:has(.share-entry, .collaborators:not([hidden]))) { display: none; }
.collaborators { position: relative; flex: 0 0 auto; }
.collaborators[hidden] { display: none; }
.collaborators > summary { cursor: pointer; list-style: none; display: flex; align-items: center; padding: 0; min-height: 32px; border-radius: 7px; }
.collaborators > summary::-webkit-details-marker { display: none; }
.collaborators > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.collaborator-stack { display: flex; padding-left: 0; }
.collaborator-tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--surface); border-radius: 7px; background: var(--sunken); color: var(--ink-3); font: 600 11px/1 var(--ui); flex-shrink: 0; }
.collaborator-stack .collaborator-tile + .collaborator-tile { margin-left: -12px; }
.collaborator-tile[data-online="true"] { background: hsl(var(--collaborator-hue, 210) 70% 83%); color: hsl(var(--collaborator-hue, 210) 65% 25%); }
.collaborator-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(280px, calc(100vw - 24px)); padding: 14px; background: var(--surface); color: var(--ink, #222); border: 1px solid var(--line, #ddd); border-radius: 12px; box-shadow: 0 8px 30px #0002; z-index: 100; }
.collaborator-pop > strong { font-size: var(--t-sm); }
.collaborator-pop ul { list-style: none; padding: 0; margin: 10px 0 0; max-height: 50vh; overflow: auto; }
.collaborator-pop li { display: flex; align-items: center; gap: 9px; margin: 10px 0; font-size: var(--t-sm); }
.collaborator-pop small { display: block; font-size: var(--t-3xs); opacity: .65; margin-top: 2px; }
.collaborator-error { font-size: var(--t-xs); }
@media (max-width: 700px) {
  .collaborators > summary { min-height: 44px; }
  .collaborator-stack .collaborator-tile { width: 44px; height: 44px; font-size: var(--t-sm); }
  .collaborator-stack .collaborator-tile + .collaborator-tile { margin-left: -26px; }
  .collaborator-pop { position: fixed; top: 58px; right: 12px; }
}

.collaborator-empty[hidden] { display: none; }

.topbar:has(.collaborators[open]) { z-index: 120; }

@media (max-width: 380px) {
  .collaborator-stack .collaborator-tile:nth-child(n + 3) { display: none; }
}