/* Shared compact picker. Page surfaces and typography remain unchanged. */
.emoji-panel[data-emoji-panel] {
  display: block; top: auto; bottom: calc(100% + 8px);
  width: min(430px, 100%); max-height: min(42dvh, 330px);
  padding: 12px; overflow-y: auto; overscroll-behavior: contain;
}
.emoji-library {
  display: grid; gap: 16px; min-width: 0;
  color: #cedbdc; color-scheme: dark;
}
.emoji-library .emoji-library__filter {
  position: sticky; top: -12px; z-index: 3;
  width: 100%; min-height: 44px; margin: 0; padding: 8px;
  border: 0; border-bottom: 1px solid rgba(172, 201, 205, .2);
  border-radius: 0; background: #122124; color: #d6e5e7;
  font-family: inherit; font-size: 12px; line-height: 1.5; cursor: pointer;
}
.emoji-library .letters__emoji-group { display: grid; gap: 7px; }
.emoji-library .letters__emoji-group[hidden] { display: none !important; }
.emoji-library .letters__emoji-group h4 {
  position: static; margin: 0; padding: 0; background: none;
  color: #acbfc2; font-size: 12px; font-weight: 400; line-height: 1.5;
}
.emoji-library .letters__emoji-group > div {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px;
}
.emoji-library .letters__emoji-group button {
  display: grid; place-items: center; width: 100%; height: 38px; min-width: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; cursor: pointer;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 20px; line-height: 1;
}
.emoji-library .letters__emoji-group button:hover { background: rgba(159, 191, 198, .12); }
.emoji-library button:focus-visible, .emoji-library select:focus-visible { outline: 2px solid #aacdd3; outline-offset: -2px; }
.letters__compose-dialog .letters__emoji-panel { scrollbar-width: thin; scrollbar-color: #527078 transparent; }
.emoji-panel[data-emoji-panel] { scrollbar-width: thin; scrollbar-color: #527078 transparent; }
@media (max-width: 600px), (pointer: coarse) {
  .emoji-library .letters__emoji-group > div { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
  .emoji-library .letters__emoji-group button,
  .letters__compose-dialog .emoji-library .letters__emoji-group button { width: 100%; height: 44px; }
}