/* ==========================================================================
   Wishy Toast Notification System
   Stackable, auto-dismissing toast notifications
   ========================================================================== */

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 320px;
    max-width: 420px;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid;
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: toast-slide-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: all 0.3s ease;
}

.toast.toast-removing {
    animation: toast-slide-out 0.25s ease-in forwards;
}

/* Variants */
.toast-success {
    background-color: rgb(240 253 244 / 0.95);
    border-color: #bbf7d0;
    color: #166534;
}

.dark .toast-success {
    background-color: rgb(6 78 59 / 0.9);
    border-color: rgb(34 197 94 / 0.3);
    color: #bbf7d0;
}

.toast-error {
    background-color: rgb(254 242 242 / 0.95);
    border-color: #fecaca;
    color: #991b1b;
}

.dark .toast-error {
    background-color: rgb(127 29 29 / 0.9);
    border-color: rgb(239 68 68 / 0.3);
    color: #fecaca;
}

.toast-warning {
    background-color: rgb(255 251 235 / 0.95);
    border-color: #fde68a;
    color: #92400e;
}

.dark .toast-warning {
    background-color: rgb(120 53 15 / 0.9);
    border-color: rgb(245 158 11 / 0.3);
    color: #fde68a;
}

.toast-info {
    background-color: rgb(239 246 255 / 0.95);
    border-color: #bfdbfe;
    color: #1e40af;
}

.dark .toast-info {
    background-color: rgb(30 58 138 / 0.9);
    border-color: rgb(59 130 246 / 0.3);
    color: #bfdbfe;
}

/* Elements */
.toast-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    margin: 0;
}

.toast-message {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    margin: 0.25rem 0 0 0;
    opacity: 0.85;
}

.toast-close {
    flex-shrink: 0;
    padding: 0.25rem;
    border-radius: 0.375rem;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease;
    color: inherit;
}

.toast-close:hover {
    opacity: 1;
}

/* Progress bar for auto-dismiss */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 0.75rem 0.75rem;
    animation: toast-progress linear forwards;
}

.toast-success .toast-progress { background-color: #22c55e; }
.toast-error .toast-progress { background-color: #ef4444; }
.toast-warning .toast-progress { background-color: #f59e0b; }
.toast-info .toast-progress { background-color: #3b82f6; }

/* Animations */
@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
}

@keyframes toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Responsive */
@media (max-width: 480px) {
    .toast {
        min-width: 0;
        max-width: calc(100vw - 2rem);
        width: calc(100vw - 2rem);
    }
}