/* The group picker follows the personal avatar modal's markup and dimensions. */
#qcgAvatarDialog { width: min(800px, calc(100vw - 1rem)); border-radius: 12px; }
#qcgAvatarDialog:focus { outline: none; }
#qcgAvatarDialog [hidden] { display: none !important; }
#qcgAvatarDialog .qcg-crop-dialog-head { padding: .5rem 1rem; }
#qcgAvatarDialog .qcg-crop-dialog-body { display: block; padding: 1rem; }
#qcgAvatarDialog .qcg-crop-dialog-foot { justify-content: flex-end; gap: 0; padding: .5rem 20px; }
#qcgAvatarDialog .qcg-crop-container { display: block; min-height: 0; max-height: 400px; padding: 0; border-radius: 4px; background: #f8f9fa; }
#qcgAvatarDialog .qcg-crop-controls { gap: 8px; }
#qcgAvatarDialog .qcg-crop-controls .btn { font-size: 12px; padding: 4px 8px; border-radius: 4px; }
#qcgAvatarDialog .qcg-crop-dialog-body .form-label { display: block; margin-bottom: .5rem; }
#qcgAvatarDialog .qchat-native-cropper-stage #qcgCropImage { max-width: none !important; max-height: none !important; }
@media (min-width: 576px) and (max-width: 991.98px) { #qcgAvatarDialog { width: 500px; } }

/* One control geometry for private and group composers; the existing DM
   wrapper and the group form each provide their 8px outer inset. */
html body #appSection :is(#message_div, #qcgMessageForm).qchat-composer {
  display: flex !important;
  align-items: flex-end !important;
  flex-wrap: nowrap !important;
  min-height: 40px !important;
  gap: 0 !important;
  box-sizing: border-box;
}
html body #appSection :is(#message_div, #qcgMessageForm) > :is(#messageInput, #qcgMessageText).qchat-message-textarea {
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  max-height: 140px !important;
  line-height: 1.5 !important;
  font-size: 1rem !important;
  padding-block: calc((40px - 1.5em - 2px) / 2) !important;
  padding-inline: .75rem !important;
  border-radius: 0 !important;
}
html body #appSection :is(#message_div, #qcgMessageForm) > :is(#uploadFileBtn, #emojiToggleBtn, #voiceRecordBtn, #qcgAttach, #qcgEmoji, #qcgVoice) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-end !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}
html body #appSection :is(#message_div, #qcgMessageForm) > :is(#sendMessageBtn, #qcgSend).qchat-send-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-end !important;
  flex: 0 0 100px !important;
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
@media (max-width: 767.98px) {
  html body #appSection :is(#message_div, #qcgMessageForm).qchat-composer {
    display: grid !important;
    grid-template-columns: 38px 38px minmax(0, 1fr) 38px 38px !important;
  }
  html body #appSection :is(#message_div, #qcgMessageForm) > :is(#messageInput, #qcgMessageText).qchat-message-textarea {
    width: 100% !important;
    font-size: max(16px, 1rem) !important;
  }
  html body #appSection :is(#message_div, #qcgMessageForm) > :is(#sendMessageBtn, #qcgSend).qchat-send-action {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
  }
}