<script setup lang="ts">
import { useAppToast } from '../composables/useAppToast';

const { visible, message } = useAppToast();
</script>

<template>
  <Teleport to="body">
    <Transition name="app-toast">
      <div v-if="visible" class="app-toast" role="status" aria-live="polite">
        {{ message }}
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.app-toast {
  position: fixed;
  top: calc(var(--desktop-header-h, 56px) + 16px);
  left: 50%;
  z-index: 5000;
  transform: translateX(-50%);
  max-width: min(90vw, 360px);
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--primary);
  background: var(--bg-card);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.app-toast-enter-active,
.app-toast-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-toast-enter-from,
.app-toast-leave-to {
  opacity: 0;
  transform: translate(-50%, -8px);
}
</style>
