/*
 * components/toast.css — SfxToast canonical chrome.
 *
 * Stacked top-right on desktop, top-center on phone. Max 3 concurrent
 * via JS. Enter/exit animations are compositor-only (transform +
 * opacity) so they run smoothly on weaker devices.
 */

@layer components {
    /* Wave 13: stack pinned TOP-CENTER on every breakpoint (was top-right
     * on desktop). Toasts read more prominently from the top, away from
     * the right-side overlays (FAB, room pill) and the bottom-edge mobile
     * navigation. */
    .sfx-toast-stack {
        position: fixed;
        top: calc(16px + env(safe-area-inset-top, 0px));
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 11500;
        pointer-events: none;
        width: min(92vw, 380px);
    }
    .sfx-toast-stack > * { pointer-events: auto; }

    .sfx-toast {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        background: linear-gradient(160deg,
            rgba(20, 14, 38, 0.97),
            rgba(12, 8, 24, 0.98));
        border: 1px solid rgba(var(--primary-rgb), 0.35);
        border-radius: 14px;
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.5),
            0 0 18px rgba(var(--primary-rgb), 0.12);
        color: var(--text-primary);
        font-size: 0.88rem;
        line-height: 1.4;
        opacity: 0;
        /* Wave 13: slide DOWN from above (top-center placement) instead of
         * the older slide-in-from-right. */
        transform: translateY(-16px) scale(0.96);
        transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .sfx-toast.sfx-toast-in {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .sfx-toast.sfx-toast-out {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }

    .sfx-toast-icon {
        display: inline-flex;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .sfx-toast-icon .sfx-icon {
        width: 18px;
        height: 18px;
    }
    .sfx-toast-msg {
        color: var(--text-primary);
        word-break: break-word;
        min-width: 0;
    }
    .sfx-toast-action {
        background: transparent;
        border: 1px solid rgba(var(--primary-rgb), 0.4);
        color: var(--primary);
        border-radius: 8px;
        padding: 5px 12px;
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .sfx-toast-action:hover {
        background: rgba(var(--primary-rgb), 0.15);
    }
    .sfx-toast-close {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.55);
        font-size: 1.15rem;
        line-height: 1;
        width: 24px;
        height: 24px;
        padding: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .sfx-toast-close:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-primary);
    }

    /* Kind-specific accent — border + icon tint. Body + background
     * stays neutral so 3 stacked toasts of different kinds read as a
     * coherent group. */
    .sfx-toast-info .sfx-toast-icon {
        background: rgba(var(--primary-rgb), 0.18);
        color: var(--primary);
    }
    .sfx-toast-success {
        border-color: rgba(46, 213, 115, 0.45);
    }
    .sfx-toast-success .sfx-toast-icon {
        background: rgba(46, 213, 115, 0.2);
        color: #2ed573;
    }
    .sfx-toast-warning {
        border-color: rgba(245, 158, 11, 0.5);
    }
    .sfx-toast-warning .sfx-toast-icon {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }
    .sfx-toast-error {
        border-color: rgba(239, 68, 68, 0.5);
    }
    .sfx-toast-error .sfx-toast-icon {
        background: rgba(239, 68, 68, 0.22);
        color: #ef4444;
    }

    /* Phone — narrow the card; stack stays top-center via the desktop rules. */
    @media (max-width: 600px) {
        .sfx-toast-stack {
            top: calc(12px + env(safe-area-inset-top, 0px));
            width: min(94vw, 380px);
        }
        .sfx-toast {
            padding: 10px 12px;
            font-size: 0.84rem;
        }
    }

    html[data-motion="reduced"] .sfx-toast {
        transition-duration: 0.1s;
    }
    html[data-motion="off"] .sfx-toast {
        transition: none !important;
    }
    @media (prefers-reduced-motion: reduce) {
        .sfx-toast {
            transition-duration: 0.01ms !important;
        }
    }
}