const colorPicker = document.getElementById("user-color-picker");

// generate a random hex color for the user
var userColor = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');

// if color picker exists, set its value and bind events
if (colorPicker) {
  colorPicker.value = userColor;
  colorPicker.addEventListener('input', (e) => {
    userColor = e.target.value;
    displayUserColor(userColor);
  });
}

displayUserColor(userColor);

function displayUserColor(color) {
  document.documentElement.style.setProperty('--user-custom-color', color);
  const userMessageBox = document.getElementById("user-message-box");
  if (userMessageBox) {
    const header = userMessageBox.querySelector('.message-header');
    if (header) {
      header.style.color = color;
    }
  }
}