/*
 * Every message row reserves both avatar columns permanently.
 * Only the middle column may contain metadata, bubble backgrounds, or images.
 */
.message:not([data-sender="user"]),
.message[data-sender="user"] {
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  column-gap: 10px;
  max-width: 100%;
}

.message > .avatar {
  grid-column: 1;
  grid-row: 1;
}

.message[data-sender="user"] > .avatar {
  grid-column: 3;
  grid-row: 1;
}

.message > :not(.avatar),
.message[data-sender="user"] > :not(.avatar) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
}

.message .bubble {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.message:not([data-sender="user"]) .bubble {
  margin-right: auto;
}

.message[data-sender="user"] .bubble {
  margin-left: auto;
}

.message .shots,
.message .shot {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 828px) {
  .message:not([data-sender="user"]),
  .message[data-sender="user"] {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    column-gap: 10px;
  }
}

@media (max-width: 375px) {
  .message:not([data-sender="user"]),
  .message[data-sender="user"] {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    column-gap: 10px;
  }
}