/* ── Sync indicator dot on avatar ── */
.header-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}


.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: transform .2s;
}

.theme-toggle:hover { transform: scale(1.15); }

.theme-icon--sun  { filter: invert(85%) sepia(40%) saturate(600%) hue-rotate(5deg) brightness(95%); }
.theme-icon--moon { display: none; filter: invert(40%) sepia(80%) saturate(500%) hue-rotate(175deg) brightness(95%); }

html.light .theme-icon--sun  { display: none; }
html.light .theme-icon--moon { display: block; }

.avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.sync-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ocean);
}

.sync-dot.ok {
  background: var(--kelp);
}

.sync-dot.busy {
  background: var(--tide);
  animation: sync-pulse .9s ease-in-out infinite;
}

.sync-dot.fail {
  background: var(--coral);
}

@keyframes sync-pulse {
  0%, 100% { opacity: 1 }
  50%       { opacity: .35 }
}

/* ── Modal spinner ── */
.modal-spinner {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .8rem;
  color: var(--mist);
  justify-content: center;
  padding: .75rem 0;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(79, 195, 247, .25);
  border-top-color: var(--tide);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Conflict resolution modal ── */
.conflict-rows {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 1rem 0;
}

.conflict-row {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--gb);
  border-radius: 10px;
  padding: .75rem 1rem;
}

.conflict-src {
  font-size: .75rem;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}

.conflict-detail {
  font-size: .84rem;
  color: var(--foam);
}