.shared-user-avatar {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  flex: 0 0 auto;
  background-color: var(--color-control-bg, #eee7da);
  background-position: center;
  background-size: cover;
  color: var(--color-text, #2b2925);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: var(--user-avatar-font-size, 1em);
  line-height: 1;
  text-align: center;
}

.shared-user-avatar[data-avatar-kind="emoji"] {
  padding: 0;
}

.shared-user-avatar[data-avatar-kind="emoji"]::before {
  content: attr(data-avatar-emoji);
  display: block;
  line-height: 1;
  transform: translate(
    var(--user-avatar-optical-x, -1px),
    var(--user-avatar-optical-y, -1px)
  );
}

.emoji-picker {
  position: fixed;
  z-index: 1800;
  width: min(360px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 24px));
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--color-border, #b8aa96);
  border-radius: 14px;
  background: var(--color-panel-bg, var(--color-surface, #f1eadf));
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.24);
}

.emoji-picker[hidden] {
  display: none;
}

.emoji-picker-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 0 9px;
  scrollbar-width: thin;
}

.emoji-picker-tab {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-soft, #746c61);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.emoji-picker-tab:hover,
.emoji-picker-tab.is-active {
  background: var(--color-control-bg-hover, #e3d8c8);
  color: var(--color-text, #2b2925);
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  max-height: 290px;
  overflow-y: auto;
  padding: 2px;
}

.emoji-picker-option {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.emoji-picker-option:hover,
.emoji-picker-option:focus-visible {
  border-color: var(--color-border, #b8aa96);
  background: var(--color-control-bg-hover, #e3d8c8);
  outline: none;
}

.emoji-picker-option.is-selected {
  border-color: var(--color-text-soft, #746c61);
  background: var(--color-control-bg-active, #d8cab6);
}

@media (max-width: 520px) {
  .emoji-picker-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}