// MessageBubble is a pure structural container.
// Visual styles (background, border-radius, overflow) are now owned by
// each message type component via _bubble-mixins.scss.
// Only highlight animations are retained here.

.message-bubble {
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;

  &--highlight-normal {
    animation: background-highlight 1s ease-in-out infinite;
  }

  &--highlight-media {
    animation: media-highlight 1s ease-in-out infinite;
  }
}

@keyframes background-highlight {
  50% {
    background-color: rgba(255, 156, 25, 1);
  }
}

@keyframes media-highlight {
  50% {
    box-shadow: 0 1px 20px 0 rgb(255, 150, 13);
  }
}