/*
 * Meetus workspace47
 * Message spacing, channel emoji layout,
 * receipt visibility and Twemoji rendering.
 */


/* ==========================================
 * Spacing between ordinary messages
 * ========================================== */

#messageArea
> .message-row {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}


/* Emoji-only messages need slightly more air */

#messageArea
> .message-row.workspace17-emoji-row,
#messageArea
> .message-row.workspace19-emoji-row {
  min-height: auto !important;

  margin:
    10px
    0 !important;

  padding: 0 !important;

  line-height: normal !important;
}


/* ==========================================
 * Twemoji inside every message
 * ========================================== */

.message-text
img.workspace47-twemoji,
.chat-preview
img.workspace47-twemoji,
.message-reply-quote
img.workspace47-twemoji,
.community2-comment-text
img.workspace47-twemoji,
.community2-reply-text
img.workspace47-twemoji {
  display: inline-block !important;

  width: 1em !important;
  height: 1em !important;

  margin:
    0
    0.04em !important;

  vertical-align:
    -0.12em !important;

  object-fit: contain !important;

  pointer-events: none !important;
}


/* ==========================================
 * Channel emoji card
 * ========================================== */

html body
.message-bubble.workspace40-channel-emoji {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  grid-auto-flow: row !important;

  align-items: end !important;

  box-sizing: border-box !important;

  overflow: hidden !important;
}


/*
 * Multiple emoji must be placed horizontally,
 * not vertically.
 */

html body
.message-bubble.workspace40-channel-emoji
> .message-text {
  grid-column:
    1
    /
    -1 !important;

  display: flex !important;

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

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

  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  min-height: 58px !important;

  margin:
    0
    0
    4px !important;

  padding:
    4px
    2px !important;

  gap: 4px !important;

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

  white-space: normal !important;
  word-break: normal !important;

  background: transparent !important;

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


/*
 * Fixed-size local SVG emoji inside channel cards.
 */

html body
.message-bubble.workspace40-channel-emoji
> .message-text
img.emoji,
html body
.message-bubble.workspace40-channel-emoji
> .message-text
img.workspace40-twemoji,
html body
.message-bubble.workspace40-channel-emoji
> .message-text
img.workspace47-twemoji {
  display: block !important;

  flex:
    0
    0
    40px !important;

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

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

  margin: 2px !important;

  object-fit: contain !important;

  vertical-align: middle !important;
}


/* ==========================================
 * Time and delivery check in channel card
 * ========================================== */

html body
.message-bubble.workspace40-channel-emoji
> .message-meta {
  grid-column:
    1
    /
    -1 !important;

  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: inline-flex !important;

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

  justify-self: end !important;

  min-height: 18px !important;

  margin:
    -2px
    2px
    7px
    0 !important;

  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;

  z-index: 7 !important;
}


html body
.message-bubble.workspace40-channel-emoji
> .message-meta
.message-time,
html body
.message-bubble.workspace40-channel-emoji
> .message-meta
.message-check {
  display: inline-flex !important;

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

  opacity: 1 !important;
  visibility: visible !important;

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


html body
.message-bubble.workspace40-channel-emoji
> .message-meta
.message-check
svg {
  display: block !important;

  width: 18px !important;
  height: 12px !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/* ==========================================
 * Elements below the channel publication
 * ========================================== */

html body
.message-bubble.workspace40-channel-emoji
> .message-reactions,
html body
.message-bubble.workspace40-channel-emoji
> .channel-comment-bar,
html body
.message-bubble.workspace40-channel-emoji
> .workspace-comment-toggle-chip {
  grid-column:
    1
    /
    -1 !important;

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


/* ==========================================
 * Mobile
 * ========================================== */

@media (max-width: 700px) {
  #messageArea
  > .message-row {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  #messageArea
  > .message-row.workspace17-emoji-row,
  #messageArea
  > .message-row.workspace19-emoji-row {
    margin:
      10px
      0 !important;
  }

  html body
  .message-bubble.workspace40-channel-emoji
  > .message-text {
    min-height: 54px !important;

    font-size: 38px !important;

    gap: 3px !important;
  }

  html body
  .message-bubble.workspace40-channel-emoji
  > .message-text
  img.emoji,
  html body
  .message-bubble.workspace40-channel-emoji
  > .message-text
  img.workspace40-twemoji,
  html body
  .message-bubble.workspace40-channel-emoji
  > .message-text
  img.workspace47-twemoji {
    flex-basis: 38px !important;

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

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}