.message {
  align-items: flex-end;
  align-self: center;
  animation: mirai-message-visible 200ms cubic-bezier(0.1, 0.1, 0.25, 0.9); /* ! TODO: Why variables dont' work? */
  gap: calc(var(--mirai-chat-space) / 2);
  max-width: var(--mirai-chat-content-max-width);
  width: 100%;
}

.message.synapse {
  justify-content: left;
}

.message:not(.synapse) {
  justify-content: right;
  padding: 0 var(--mirai-chat-space);
}

.content.busy {
  background-color: transparent;
  overflow: visible;
  padding: var(--mirai-ui-space-XS) 0;
  position: relative;
}

.content:not(.synapse) {
  border-radius: var(--mirai-chat-border-radius);
}

.content:not(.synapse):not(.busy) {
  background-color: var(--mirai-chat-accent);
  border-bottom-right-radius: 0;
}

.content .text {
  font-family: var(--mirai-chat-text-font);
  font-size: var(--mirai-chat-text-font-size);
  font-weight: var(--mirai-chat-text-font-weight);
  line-height: var(--mirai-chat-text-line-height);
  white-space: pre-line;
  width: fit-content;
}

.content.synapse .text {
  color: var(--mirai-ui-content);
}

.content.synapse .text > ui-a {
  display: inline;
}

.content:not(.synapse) .text {
  color: var(--mirai-chat-background);
  padding: var(--mirai-chat-message-offset);
}

.content.synapse .gallery {
  border-radius: var(--mirai-chat-border-radius);
  margin-top: calc(var(--mirai-chat-space) / 2);
}

.spinner {
  animation: mirai-message-spinner 0.8s infinite linear alternate;
  animation-delay: 0.4s;
  color: var(--mirai-ui-content);
  margin-left: calc(var(--mirai-chat-space) * 0.75);
  position: absolute;
}

.content .card {
  background-color: var(--mirai-ui-base);
  border-radius: var(--mirai-chat-border-radius);
  box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-content-border);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: calc(var(--mirai-chat-space) / 2);
  margin-top: calc(var(--mirai-chat-space) / 2);
  max-width: 100%;
  padding: var(--mirai-chat-message-offset);
}

.content .card:hover {
  background-color: var(--mirai-ui-content);
}

.content .card:hover * {
  color: var(--mirai-ui-base);
}

.content .card .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spinner,
.spinner::before,
.spinner::after {
  background-color: var(--mirai-ui-content);
  border-radius: 50%;
  color: var(--mirai-ui-content);
  height: calc(var(--mirai-chat-space) / 2.5);
  width: calc(var(--mirai-chat-space) / 2.5);
}

.spinner::before,
.spinner::after {
  animation: mirai-message-spinner 0.8s infinite alternate;
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.spinner::before {
  animation-delay: 0s;
  left: calc(var(--mirai-chat-space) * -0.65);
}

.spinner::after {
  animation-delay: 0.8s;
  left: calc(var(--mirai-chat-space) * 0.65);
}

/* S  */
@media only screen and (max-width: 480px) {
  .content {
    max-width: 100%;
  }

  .message.synapse {
    padding: 0 var(--mirai-chat-space);
  }
}

/* M & L  */
@media only screen and (min-width: 481px) {
  .content {
    max-width: 100%;
  }
}

@keyframes mirai-message-spinner {
  0% {
    background-color: var(--mirai-ui-content-light);
  }
  50%,
  100% {
    background-color: var(--mirai-ui-content-border);
  }
}

@keyframes mirai-message-visible {
  from {
    opacity: 0;
    transform: translateY(var(--mirai-chat-space));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
