.contextmenu {
  position: fixed;
  width: 80px;
  padding: 2px;
  z-index: 99999;
}

/* Override modal's display:none when contextmenu is shown via JS */
.contextmenu.modal {
  /* display is set by JS, z-index should be highest */
  z-index: 99999;
}

.contextmenu>.menu-header {
  background-image: url("/png/bg2.png");
  cursor: auto;
  text-align: center;
  padding: 2px;
}

.contextmenu button:not(.friend-emoji-cell) {
  display: block;
  width: 100%;
  padding: 2px;
  border: 0px;
  border-radius: 0px;
  margin: 0px;
}

/* The friend entry menu is deliberately contiguous: the wrapper has no
   margin/gap, while the grid escapes the main rectangle as an anchored
   submenu instead of adding rows to it. */
#friend-list-menu {
  width: 96px;
  padding: 2px;
  background-image: url("/png/bg.png");
}

#friend-list-menu>button,
#friend-list-menu>.friend-emoji-anchor>button {
  display: block;
  width: 100%;
  padding: 2px;
  border: 0px;
  border-radius: 0px;
  margin: 0;
  background-image: url("/png/bg3.png");
}

#friend-list-menu>.friend-emoji-anchor {
  display: block;
  width: 100%;
  margin: 0;
  position: relative;
}

.friend-emoji-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 100000;
  width: 90px;
  padding: 2px;
  border: 1px solid black;
  background-image: url("/png/bg.png");
  box-shadow: 0 0 6px black;
  pointer-events: auto;
}

.friend-emoji-grid {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  grid-template-rows: repeat(3, 28px);
  gap: 0;
  margin: 0;
  padding: 0;
}

.friend-emoji-cell {
  display: block;
  width: 28px;
  height: 28px;
  padding: 1px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.friend-emoji-cell:hover,
.friend-emoji-cell:focus-visible {
  border-color: white;
  outline: none;
  background-image: url("/png/bg2.png");
}

/* Explicit restore: generic .contextmenu button reset is scoped with
   :not(.friend-emoji-cell), but this higher-specificity rule keeps the
   28px grid + focus border intact even if the cascade shifts. */
.contextmenu button.friend-emoji-cell {
  width: 28px;
  height: 28px;
  padding: 1px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 0;
}

.friend-emoji-glyph {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
}

.friend-emoji-icon {
  display: inline-block;
  margin-left: 4px;
  color: white;
  font-size: 10px;
  vertical-align: middle;
}