<template>
  <Teleport to="body">
    <div class="toast" :class="{ show: !!message }">
      <div class="toast-dot"></div>
      <span>{{ message }}</span>
    </div>
  </Teleport>
</template>

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

<style scoped>
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text);
  z-index: 9999;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
</style>
