/* Apple artwork is local; see vendor/emoji/NOTICE.md for source and rights. */
.chat-apple-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Keep the original Unicode visible until the sheet actually loads. */
.has-apple-emoji .chat-apple-emoji {
  --chat-emoji-size: 1.18em;
  display: inline-block;
  flex-shrink: 0;
  width: var(--chat-emoji-size);
  height: var(--chat-emoji-size);
  margin-inline: .035em;
  overflow: hidden;
  vertical-align: -.2em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  white-space: nowrap;
  line-height: 1;
  background-image: url("/vendor/emoji/apple-64.webp?v=1");
  background-repeat: no-repeat;
  background-size: calc(var(--apple-width) * var(--chat-emoji-size)) calc(var(--apple-height) * var(--chat-emoji-size));
  background-position: calc(var(--apple-x) * var(--chat-emoji-size)) calc(var(--apple-y) * var(--chat-emoji-size));
}

.chat-emoji-option,
.chat-reaction-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.anteks-app .chat-emoji-option {
  padding: 0;
  min-width: 0;
}

body.anteks-app #chatEmojiSearch {
  width: calc(100% - 20px);
  min-width: 0;
  max-width: calc(100% - 20px);
  box-sizing: border-box;
}

.chat-message-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* A message preview is one inline sentence, including its emoji. */
.chat-contact-content > span:last-child { display: block; }
.chat-message-reply { display: block; }

.chat-sticker-mascot-prop .chat-apple-emoji {
  --chat-emoji-size: 1em;
  vertical-align: 0;
}

.chat-message-delivery {
  display: inline-flex;
  margin-left: 5px;
  vertical-align: -.2em;
}

.chat-message-delivery .ui-icon { width: 15px; height: 15px; }
.chat-context-action { display: flex; align-items: center; gap: 9px; }
.chat-context-action .ui-icon { flex: none; width: 18px; height: 18px; }

@media (forced-colors: active) {
  .has-apple-emoji .chat-apple-emoji {
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    background-image: none;
    width: auto;
    height: auto;
    vertical-align: baseline;
  }
}