/* static/css/toast-system.css */
/* KITEAI Centralized Toast Notification System */

/* 1. Toast Container */
/* Positions the toast area on the screen */
.toast-container-kiteai {
    position: fixed;
    top: 80px; /* Position below the navbar */
    right: 20px;
    z-index: 1090; /* High z-index to appear above other elements */
    width: 90vw; /* Responsive width */
    max-width: 550px; /* Max width on large screens for readability */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 2. Individual Toast Styling */
.kiteai-toast {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    color: white;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); /* Smooth slide-in animation */
    position: relative;
    overflow: hidden; /* For the progress bar */
}

.kiteai-toast.show {
    opacity: 1;
    transform: translateX(0);
}

/* 3. Toast Content (Icon, Text, Close Button) */
.kiteai-toast__icon {
    font-size: 1.5rem; /* 24px */
    margin-right: 1rem;
    flex-shrink: 0;
}

.kiteai-toast__message {
    flex-grow: 1;
    font-weight: 500;
}

.kiteai-toast__close {
    background: transparent;
    border: none;
    color: white;
    opacity: 0.7;
    font-size: 1.5rem;
    margin-left: 1rem;
    padding: 0 0.5rem;
}

.kiteai-toast__close:hover {
    opacity: 1;
}

/* 4. Toast Types (Color Themes) */
.kiteai-toast--success {
    background: linear-gradient(135deg, #28a745, #20c997);
}
.kiteai-toast--info {
    background: linear-gradient(135deg, #0d6efd, #3b82f6);
}
.kiteai-toast--warning {
    background: linear-gradient(135deg, #ffc107, #f59e0b);
    color: #1f2937; /* Darker text for better contrast on yellow */
}
.kiteai-toast--warning .kiteai-toast__close {
    color: #1f2937;
}
.kiteai-toast--error {
    background: linear-gradient(135deg, #dc3545, #ef4444);
}
.kiteai-toast--debug {
    background: linear-gradient(135deg, #6f42c1, #8a63d2);
}

/* 5. Progress Bar */
.kiteai-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    animation: kiteai-toast-countdown linear 1 forwards;
    transform-origin: right; /* Set origin to the right for a left-to-right depletion */
}

@keyframes kiteai-toast-countdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}