<template>
  <Transition name="toast">
    <div v-if="toastText" class="toast" role="status" aria-live="polite">{{ toastText }}</div>
  </Transition>
</template>

<script setup>
defineProps({
  toastText: String
})
</script>

<style scoped>
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: min(380px, calc(100vw - 44px));
  padding: 14px 16px;
  border-radius: 12px;
  background: #0b1220;
  color: #fff;
  box-shadow: 0 18px 48px rgba(16,24,40,.16);
  z-index: 120;
  animation: fadeUp 180ms var(--ease) both;
}
.toast-enter-active { transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.toast-leave-active { transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.toast-enter-from { opacity: 0; transform: translateY(10px); }
.toast-leave-to { opacity: 0; transform: translateY(-6px); }
</style>
