/* Mantém conversas, áudios e barra de escrita dentro da janela. */
.conversation,
.messages,
.composer,
.message,
.message-media,
.message-audio {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.messages {
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

.message {
  overflow-wrap: anywhere;
}

.message:has(.message-audio),
.message:has(audio) {
  width: auto !important;
  min-width: min(330px, calc(100% - 20px)) !important;
  max-width: 88% !important;
}

.message-audio,
.message audio {
  display: block;
  width: clamp(230px, 34vw, 300px) !important;
  min-width: clamp(230px, 34vw, 300px) !important;
  max-width: calc(100vw - 120px) !important;
}

.message video,
.message img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

.composer {
  width: 100%;
  overflow: hidden;
}

.composer > input:not(.attachment-file) {
  min-width: 0;
}

/* Dá mais espaço à conversa quando a janela do computador fica estreita. */
@media (min-width: 681px) and (max-width: 1100px) {
  .app {
    grid-template-columns: 78px minmax(285px, 34vw) minmax(0, 1fr) !important;
  }

  .rail {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .messages {
    padding-left: clamp(14px, 3vw, 28px) !important;
    padding-right: clamp(14px, 3vw, 28px) !important;
  }

  .composer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 680px) {
  .message {
    max-width: 88% !important;
  }

  .message-audio,
  .message audio {
    width: clamp(220px, 68vw, 300px) !important;
    min-width: clamp(220px, 68vw, 300px) !important;
    max-width: calc(100vw - 92px) !important;
  }
}