function getSizeCode(message) {
  const len = message.length;
  if (len <= 30) return 's';
  if (len <= 80) return 'm';
  if (len <= 160) return 'l';
  return 'x';
}

function addGuestbookReply({ role, message }) {
  // role is "u" for anon/you-visitor, "a" for ammy/your reply
  const wall = document.getElementById('reply-wall');
  const card = document.createElement('div');
  card.className = 'reply-card';

  const sizeCode = getSizeCode(message);
  const headerImg = `gu3stb00k/${role}${sizeCode}.png`;

  card.innerHTML = `
    <div class="reply-header"><img src="${headerImg}" alt=""></div>
    <div class="reply-text">${message}</div>
  `;

  makeCardClickable(card);
  const maxTop = wall.offsetHeight - 140;
  const maxLeft = wall.offsetWidth - 320;
  card.style.top = `${Math.random() * Math.max(maxTop, 0)}px`;
  card.style.left = `${Math.random() * Math.max(maxLeft, 0)}px`;
  wall.appendChild(card);
}

// example calls
addGuestbookReply({ role: "u", message: "hii!!" });                          // → gu3stb00k/us.png
addGuestbookReply({ role: "a", message: "np bestie, thanks for stopping by! this made my whole day tbh" }); // → gu3stb00k/am.png