<script>
    import { fragmentQuote } from '../stores/quoteStore.js';
</script>

{#if $fragmentQuote}
    {#key $fragmentQuote.key}
        <div
            class="toast"
            style="border-color: {$fragmentQuote.color}; --accent: {$fragmentQuote.color}"
        >
            <p>{$fragmentQuote.text}</p>
        </div>
    {/key}
{/if}

<style>
    .toast {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 380px;
        padding: 5px 20px;
        background: rgba(6, 6, 6, 0.60);
        border-bottom: 2px solid var(--accent);
        color: rgba(255, 255, 255, 0.85);
        font-family: 'Courier New', Courier, monospace;
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
        letter-spacing: 0.02em;
        pointer-events: none;
        animation: toastIn 4.2s ease forwards;
        z-index: 20;
    }

    @keyframes toastIn {
        0%   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
        12%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
        78%  { opacity: 1; }
        100% { opacity: 0; }
    }
</style>
