/*
 * Chat message bubble (MessageComponent)
 *   .message--customer  incoming from the pet owner → left, neutral
 *   .message--employee  sent by clinic staff        → right, solid teal
 *   .message--continued not the last of its group   → no meta, the next bubble sits closer
 */
.message {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: min(75%, 34rem);
  align-self: flex-start;
}

.message__bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2xl);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-xs);
}

.message__meta {
  display: flex;
  gap: var(--space-1-5);
  padding: 0 var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

/* Incoming */
.message--customer {
  .message__bubble {
    background: var(--color-bubble-incoming);
    color: var(--color-bubble-incoming-text);
    border: var(--border);
    border-bottom-left-radius: var(--radius-sm);
  }
}

/* Outgoing */
.message--employee {
  align-self: flex-end;
  align-items: flex-end;

  .message__bubble {
    background: var(--color-bubble-admin);
    color: var(--color-bubble-admin-text);
    border-bottom-right-radius: var(--radius-sm);
  }
}

/* Grouped messages: .conversation__messages spaces them by --space-3, pull the next bubble
   up to --space-1 (the meta line under the last one keeps the groups apart). The small
   "tail" corner only goes on the group's last bubble */
.message--continued {
  margin-bottom: calc(var(--space-1) - var(--space-3));

  .message__bubble {
    border-radius: var(--radius-2xl);
  }
}