/* 5.28: sichtbarer, projektweiter Kollaborations- und Live-Sync-Status */
.collaboration-sync-chip {
  min-height: 36px;
  max-width: 190px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 78%, var(--primary) 22%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-container-lowest) 88%, var(--primary) 12%);
  color: var(--on-surface);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
}
.collaboration-sync-chip:hover,
.collaboration-sync-chip:focus-visible {
  border-color: var(--primary);
  outline: none;
  background: color-mix(in srgb, var(--surface-container-lowest) 78%, var(--primary) 22%);
}
.collaboration-sync-chip .material-symbols-outlined {
  position: static;
  transform: none;
  font-size: 19px;
  color: var(--primary);
}
.collaboration-sync-chip strong { font-size: 12px; font-weight: 800; }
.collaboration-sync-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25a765;
  box-shadow: 0 0 0 3px color-mix(in srgb, #25a765 18%, transparent);
}
.collaboration-sync-chip.is-syncing .material-symbols-outlined,
.collaboration-sync-chip.is-saving .material-symbols-outlined,
.collaboration-sync-chip.is-merging .material-symbols-outlined { animation: collaboration-sync-spin 1s linear infinite; }
.collaboration-sync-chip.is-saving i,
.collaboration-sync-chip.is-syncing i,
.collaboration-sync-chip.is-merging i { background: var(--primary); }
.collaboration-sync-chip.is-deferred i { background: #d89516; box-shadow: 0 0 0 3px color-mix(in srgb, #d89516 20%, transparent); }
.collaboration-sync-chip.is-offline i { background: var(--error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 20%, transparent); }
.collaboration-sync-chip.is-offline .material-symbols-outlined { color: var(--error); }
@keyframes collaboration-sync-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .collaboration-sync-chip .material-symbols-outlined { animation: none !important; }
}
@media (max-width: 1050px) {
  .collaboration-sync-chip { width: 38px; min-width: 38px; padding: 6px; justify-content: center; }
  .collaboration-sync-chip strong,
  .collaboration-sync-chip i { display: none; }
}
@media (max-width: 520px) {
  .collaboration-sync-chip { width: 34px; min-width: 34px; min-height: 34px; }
}