/*
 * Meetus workspace45
 * Move emoji message menu outside the emoji itself.
 */

/* Keep enough room and allow the menu to sit outside. */
html body
.message-row.workspace17-emoji-row
.message-bubble.emoji-only-bubble:not(
  .workspace40-channel-emoji
),
html body
.message-row.workspace19-emoji-row
.message-bubble.emoji-only-bubble:not(
  .workspace40-channel-emoji
) {
  position: relative !important;
  overflow: visible !important;

  min-width: 76px !important;
  width: max-content !important;

  padding:
    2px
    4px
    3px !important;
}

/* Emoji stays centered and gets its own area. */
html body
.message-row.workspace17-emoji-row
.message-bubble.emoji-only-bubble:not(
  .workspace40-channel-emoji
)
.message-text.emoji-only-text,
html body
.message-row.workspace19-emoji-row
.message-bubble.emoji-only-bubble:not(
  .workspace40-channel-emoji
)
.message-text.emoji-only-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;

  min-height: 54px !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 40px !important;
  line-height: 1 !important;

  position: relative !important;
  z-index: 1 !important;
}

/*
 * Incoming message:
 * menu goes outside on the right.
 */
html body
.message-row:not(.mine).workspace17-emoji-row
.message-bubble.emoji-only-bubble
> .message-menu-trigger,
html body
.message-row:not(.mine).workspace19-emoji-row
.message-bubble.emoji-only-bubble
> .message-menu-trigger {
  top: -7px !important;
  right: -22px !important;
  bottom: auto !important;
  left: auto !important;
}

/*
 * Outgoing message:
 * menu goes outside on the left, so it does not
 * hit the right edge of the screen.
 */
html body
.message-row.mine.workspace17-emoji-row
.message-bubble.emoji-only-bubble
> .message-menu-trigger,
html body
.message-row.mine.workspace19-emoji-row
.message-bubble.emoji-only-bubble
> .message-menu-trigger {
  top: -7px !important;
  right: auto !important;
  bottom: auto !important;
  left: -22px !important;
}

/* Compact menu button without covering the emoji. */
html body
.message-row.workspace17-emoji-row
.message-bubble.emoji-only-bubble
> .message-menu-trigger,
html body
.message-row.workspace19-emoji-row
.message-bubble.emoji-only-bubble
> .message-menu-trigger {
  position: absolute !important;

  display: grid !important;
  place-items: center !important;

  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;

  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  inline-size: 24px !important;
  block-size: 24px !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 50% !important;

  background:
    rgba(20, 24, 29, 0.72) !important;

  transform: none !important;

  z-index: 50 !important;
}

/* Arrow icon. */
html body
.message-row.workspace17-emoji-row
.message-bubble.emoji-only-bubble
> .message-menu-trigger
svg,
html body
.message-row.workspace19-emoji-row
.message-bubble.emoji-only-bubble
> .message-menu-trigger
svg {
  width: 13px !important;
  min-width: 13px !important;
  max-width: 13px !important;

  height: 13px !important;
  min-height: 13px !important;
  max-height: 13px !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile positioning. */
@media (max-width: 700px) {
  html body
  .message-row:not(.mine).workspace17-emoji-row
  .message-bubble.emoji-only-bubble
  > .message-menu-trigger,
  html body
  .message-row:not(.mine).workspace19-emoji-row
  .message-bubble.emoji-only-bubble
  > .message-menu-trigger {
    top: -5px !important;
    right: -17px !important;
  }

  html body
  .message-row.mine.workspace17-emoji-row
  .message-bubble.emoji-only-bubble
  > .message-menu-trigger,
  html body
  .message-row.mine.workspace19-emoji-row
  .message-bubble.emoji-only-bubble
  > .message-menu-trigger {
    top: -5px !important;
    right: auto !important;
    left: -17px !important;
  }

  html body
  .message-row.workspace17-emoji-row
  .message-bubble.emoji-only-bubble
  > .message-menu-trigger,
  html body
  .message-row.workspace19-emoji-row
  .message-bubble.emoji-only-bubble
  > .message-menu-trigger {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;

    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;

    inline-size: 22px !important;
    block-size: 22px !important;
  }
}


/* ==========================================
 * Workspace45 v2
 * Keep multiple emoji in one horizontal row.
 * ========================================== */

html body
.message-row.workspace17-emoji-row
.message-bubble.emoji-only-bubble:not(
  .workspace40-channel-emoji
),
html body
.message-row.workspace19-emoji-row
.message-bubble.emoji-only-bubble:not(
  .workspace40-channel-emoji
) {
  width: max-content !important;
  min-width: 76px !important;
  max-width: none !important;
}

html body
.message-row.workspace17-emoji-row
.message-bubble.emoji-only-bubble:not(
  .workspace40-channel-emoji
)
.message-text.emoji-only-text,
html body
.message-row.workspace19-emoji-row
.message-bubble.emoji-only-bubble:not(
  .workspace40-channel-emoji
)
.message-text.emoji-only-text {
  display: inline-flex !important;

  width: max-content !important;
  min-width: 62px !important;
  max-width: none !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;

  gap: 2px !important;
}