@use '../config' as *;

// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references

// scss-docs-start chat-css-vars
$chat-tokens: () !default;
$chat-tokens: defaults(
  (
    --chat-bubbles-gap: $chat-bubbles-gap,
    --chat-bubble-padding: $chat-bubble-padding,
    --chat-bubble-title-margin-bottom: $chat-bubble-title-margin-bottom,
  ),
  $chat-tokens
);
// scss-docs-end chat-css-vars

// stylelint-enable custom-property-no-missing-var-function

.chat {
  @include tokens($chat-tokens);
}

.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: var(--font-weight-medium);
}

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

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