<template>
  <view class="chat-mine">
    <text>{{ text }}</text>
    <slot></slot>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
defineProps({
  text: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.chat-mine {
  margin: 6px 12px;
  padding: 8px 16px;

  background-color: #00a6ff;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20px 4px 20px 20px;
  border: 1px solid;
  border-color: #ffffff;

  display: flex;
  flex-direction: column;
  max-width: 100%; // ✅ 限制最大宽度
  overflow-x: hidden; // ✅ 防止横向撑开

  text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 22px;
    text-align: justify;
    font-style: normal;
    text-transform: none;
  }
}
</style>
