<script setup lang="ts">
defineProps<{ text: string }>()
</script>

<template>
  <div class="row">
    <div class="bubble">{{ text }}</div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  justify-content: flex-end;
}

.bubble {
  max-width: 78%;
  padding: 11px var(--s-6);
  color: var(--c-text);
  overflow-wrap: anywhere;
  background: var(--c-surface-user);
  border: 1px solid var(--c-line-user);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 12px;
}
</style>
