@use '../config' as *;

.chat {
  // scss-docs-start chat-css-vars
  --chat-bubbles-gap: #{$chat-bubbles-gap};
  --chat-bubble-padding: #{$chat-bubble-padding};
  --chat-bubble-title-margin-bottom: #{$chat-bubble-title-margin-bottom};
  // scss-docs-end chat-css-vars
}

.chat-bubbles {
  display: flex;
  flex-direction: column;
  gap: var(--chat-bubbles-gap);
}

.chat-bubble {
  position: relative;
  padding: var(--chat-bubble-padding);
  background: var(--bg-surface-secondary);
  @include border-radius(var(--border-radius-lg));
}

.chat-bubble-me {
  background-color: var(--primary-lt);
  box-shadow: none;
}

.chat-bubble-title {
  margin-bottom: var(--chat-bubble-title-margin-bottom);
}

.chat-bubble-author {
  font-weight: 600;
}

.chat-bubble-date {
  color: var(--secondary);
}

.chat-bubble-body {
  > *:last-child {
    margin-bottom: 0;
  }
}