/*
 * BOLEPIX_PWA_CHAT_RESPONSIVE_V5703Z174RESP1C1
 *
 * Responsividade horizontal do PWA.
 *
 * Objetivos:
 * - nunca permitir que o composer ultrapasse a tela;
 * - botão final/microfone sempre 100% visível;
 * - campo Mensagem absorve redução/aumento da largura;
 * - sem alterar lógica de áudio, câmera, arquivos ou mensagens.
 */


/* ============================================================
   BOX-SIZING DA ÁREA DO CHAT
   ============================================================ */

#pwaMenuContent,
#pwaMenuContent *,
.m3d-pwa-content,
.m3d-pwa-content *,
.m3d-chat-wrap,
.m3d-chat-wrap * {
  box-sizing: border-box !important;
}


/* ============================================================
   ÁREA CENTRAL
   ============================================================ */

#pwaMenuContent,
.m3d-pwa-content {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;

  overflow-x: hidden !important;
}


/*
 * Chat nunca pode ser maior que a coluna onde ele está.
 */
#pwaMenuContent .m3d-chat-wrap {
  min-width: 0 !important;
  max-width: 100% !important;

  /*
   * deixa pequena folga do lado direito para o botão
   * nunca tocar/cortar na borda da janela.
   */
  width: calc(100% - 8px) !important;

  margin-left: 0 !important;
  margin-right: 8px !important;

  overflow-x: hidden !important;
}


/* ============================================================
   MENSAGENS
   ============================================================ */

#pwaMessages,
#pwaTeamMessages,
#pwaGroupMessages,
.m3d-chat-messages {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}


/* ============================================================
   COMPOSER — CLIENTE / EQUIPE / GRUPO
   ============================================================ */

#pwaSendForm,
#pwaTeamForm,
#pwaGroupForm,
.m3d-chat-wrap .m3d-composer {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left:
    clamp(8px, 1.1vw, 16px) !important;

  padding-right:
    clamp(8px, 1.1vw, 16px) !important;

  gap:
    clamp(5px, .7vw, 10px) !important;

  overflow: visible !important;
}


/*
 * A barra normal tem vários botões.
 * Flex é mais seguro para responsividade que colunas rígidas.
 */
#pwaSendForm:not(.m3d-recording-active),
#pwaTeamForm:not(.m3d-recording-active),
#pwaGroupForm:not(.m3d-recording-active) {
  display: flex !important;

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

  align-items: center !important;
}


/* ============================================================
   BOTÕES
   ============================================================ */

#pwaSendForm > button,
#pwaTeamForm > button,
#pwaGroupForm > button {
  flex: 0 0 auto !important;

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

  width:
    clamp(38px, 3.8vw, 46px) !important;

  height:
    clamp(38px, 3.8vw, 46px) !important;

  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/*
 * Botão final — enviar/microfone.
 *
 * Nunca encolhe e nunca ultrapassa o limite.
 */
#pwaSendForm > button.send,
#pwaTeamForm > button.send,
#pwaGroupForm > button.send {
  flex:
    0 0
    clamp(40px, 3.9vw, 46px) !important;

  width:
    clamp(40px, 3.9vw, 46px) !important;

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

  margin-right: 0 !important;

  position: relative !important;
  right: auto !important;
}


/* ============================================================
   CAMPO MENSAGEM
   ============================================================ */

#pwaSendForm > input[name="text"],
#pwaTeamForm > input[name="text"],
#pwaGroupForm > input[name="text"] {
  flex: 1 1 auto !important;

  min-width: 60px !important;
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
}


/* ============================================================
   ELEMENTOS AUXILIARES
   ============================================================ */

/*
 * Status vazio não deve consumir largura.
 */
#pwaSendForm .m3d-audio-status:empty,
#pwaTeamForm .m3d-audio-status:empty,
#pwaGroupForm .m3d-audio-status:empty {
  display: none !important;
}


/*
 * Inputs file/camera hidden jamais participam do flex.
 */
#pwaSendForm > input[type="file"],
#pwaTeamForm > input[type="file"],
#pwaGroupForm > input[type="file"] {
  display: none !important;
}


/* ============================================================
   TELAS DESKTOP MÉDIAS
   ============================================================ */

@media (max-width: 1280px) {

  #pwaMenuContent .m3d-chat-wrap {
    width: calc(100% - 12px) !important;
    margin-right: 12px !important;
  }

  #pwaSendForm,
  #pwaTeamForm,
  #pwaGroupForm {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 7px !important;
  }

}


/* ============================================================
   NOTEBOOKS / JANELAS MENORES
   ============================================================ */

@media (max-width: 1100px) {

  #pwaSendForm > button,
  #pwaTeamForm > button,
  #pwaGroupForm > button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  #pwaSendForm > button.send,
  #pwaTeamForm > button.send,
  #pwaGroupForm > button.send {
    flex-basis: 40px !important;
  }

  #pwaSendForm,
  #pwaTeamForm,
  #pwaGroupForm {
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

}


/* ============================================================
   TELAS ESTREITAS
   ============================================================ */

@media (max-width: 820px) {

  #pwaMenuContent .m3d-chat-wrap {
    width: 100% !important;
    margin-right: 0 !important;
  }

  #pwaSendForm > button,
  #pwaTeamForm > button,
  #pwaGroupForm > button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  #pwaSendForm > button.send,
  #pwaTeamForm > button.send,
  #pwaGroupForm > button.send {
    flex-basis: 38px !important;
  }

  #pwaSendForm > input[name="text"],
  #pwaTeamForm > input[name="text"],
  #pwaGroupForm > input[name="text"] {
    min-width: 40px !important;
  }

}


/* ============================================================
   GARANTIA GLOBAL CONTRA ESTOURO HORIZONTAL
   ============================================================ */

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}