/* MEETUS V9.1 — attachment/audio/call/file layout fixes */

/* + rotates into X without dropping toward the bottom of the composer. */
.composer #attachmentButton.attachment-plus{
  align-self:center !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* File cards must never grow past their message/container. */
.message-bubble .message-file,
.community2-source-card .message-file,
.community2-forward-card .message-file,
.community2-discussion-source .message-file{
  box-sizing:border-box !important;
  min-width:0 !important;
  max-width:100% !important;
  width:min(100%, 520px) !important;
}

.message-file .file-details{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.message-file .file-details strong,
.message-file .file-details small{
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Forward/source wrappers also need shrink permission. */
.community2-source-card,
.community2-forward-card,
.community2-discussion-source,
.message-bubble{
  min-width:0;
}

@media(max-width:640px){
  .message-bubble .message-file,
  .community2-source-card .message-file,
  .community2-forward-card .message-file,
  .community2-discussion-source .message-file{
    width:100% !important;
    max-width:100% !important;
  }
}


/* V9.2 — media preview remove button always stays above the thumbnail.
   Older rules used negative top/right offsets, so overflow containers clipped it. */
#mediaPreviewModal .media-preview-thumbnail {
  position: relative !important;
  overflow: visible !important;
}

#mediaPreviewModal .media-preview-remove {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  z-index: 12 !important;

  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;

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

  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 50% !important;

  background: rgba(20,24,32,.92) !important;
  color: #fff !important;

  box-shadow: 0 3px 10px rgba(0,0,0,.42) !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  pointer-events: auto !important;
}

#mediaPreviewModal .media-preview-remove:hover {
  background: rgba(47,53,66,.98) !important;
}

#mediaPreviewModal .media-preview-thumbnails {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-top: 4px !important;
}