/**
 * ===============================================================================
 * BALAM AI - Toast Notification Component
 * ===============================================================================
 *
 * Unified toast notification system with gradient backgrounds,
 * slide-in/out animations, and auto-dismiss progress bar.
 *
 * HTML Pattern:
 *   <div class="balam-toast-container">
 *     <div class="balam-toast balam-toast-success">
 *       <span class="balam-toast-icon"><i class="fas fa-check-circle"></i></span>
 *       <span class="balam-toast-content">Success message</span>
 *       <button class="balam-toast-close"><i class="fas fa-times"></i></button>
 *       <div class="balam-toast-progress"></div>
 *     </div>
 *   </div>
 *
 * @requires shared-variables.css
 * @version 2.0.0
 * ===============================================================================
 */

/* ===============================================================================
   Toast Container (fixed position, top-right)
   =============================================================================== */

.balam-toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: var(--balam-z-toast, 99999);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 400px;
}

/* ===============================================================================
   Toast Base
   =============================================================================== */

.balam-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: balamToastSlideIn 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.balam-toast.removing {
    animation: balamToastSlideOut 0.3s ease-in forwards;
}

/* ===============================================================================
   Slide Animations
   =============================================================================== */

@keyframes balamToastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes balamToastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ===============================================================================
   Toast Icon
   =============================================================================== */

.balam-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* ===============================================================================
   Toast Content
   =============================================================================== */

.balam-toast-content {
    flex: 1;
    font-size: 0.875rem;
    color: var(--balam-gray-200, #e5e7eb);
    line-height: 1.4;
}

/* ===============================================================================
   Toast Close Button
   =============================================================================== */

.balam-toast-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
}

.balam-toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* ===============================================================================
   Auto-dismiss Progress Bar
   =============================================================================== */

.balam-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0 0 12px 12px;
    animation: balamToastProgress var(--toast-duration, 5s) linear forwards;
}

@keyframes balamToastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ===============================================================================
   Toast Type Variants
   =============================================================================== */

/* Success */
.balam-toast-success {
    border-color: rgba(var(--balam-success-rgb, 34, 197, 94), 0.3);
    background: linear-gradient(135deg, rgba(var(--balam-success-rgb, 34, 197, 94), 0.15) 0%, rgba(26, 26, 36, 0.95) 100%);
}

.balam-toast-success .balam-toast-icon {
    color: var(--balam-success, #22c55e);
}

.balam-toast-success .balam-toast-progress {
    background: rgba(var(--balam-success-rgb, 34, 197, 94), 0.5);
}

/* Error / Danger */
.balam-toast-error,
.balam-toast-danger {
    border-color: rgba(var(--balam-danger-rgb, 239, 68, 68), 0.3);
    background: linear-gradient(135deg, rgba(var(--balam-danger-rgb, 239, 68, 68), 0.15) 0%, rgba(26, 26, 36, 0.95) 100%);
}

.balam-toast-error .balam-toast-icon,
.balam-toast-danger .balam-toast-icon {
    color: var(--balam-danger, #ef4444);
}

.balam-toast-error .balam-toast-progress,
.balam-toast-danger .balam-toast-progress {
    background: rgba(var(--balam-danger-rgb, 239, 68, 68), 0.5);
}

/* Warning */
.balam-toast-warning {
    border-color: rgba(var(--balam-warning-rgb, 245, 158, 11), 0.3);
    background: linear-gradient(135deg, rgba(var(--balam-warning-rgb, 245, 158, 11), 0.15) 0%, rgba(26, 26, 36, 0.95) 100%);
}

.balam-toast-warning .balam-toast-icon {
    color: var(--balam-warning, #f59e0b);
}

.balam-toast-warning .balam-toast-progress {
    background: rgba(var(--balam-warning-rgb, 245, 158, 11), 0.5);
}

/* Info */
.balam-toast-info {
    border-color: rgba(var(--balam-info-rgb, 76, 201, 240), 0.3);
    background: linear-gradient(135deg, rgba(var(--balam-info-rgb, 76, 201, 240), 0.15) 0%, rgba(26, 26, 36, 0.95) 100%);
}

.balam-toast-info .balam-toast-icon {
    color: var(--balam-info, #4cc9f0);
}

.balam-toast-info .balam-toast-progress {
    background: rgba(var(--balam-info-rgb, 76, 201, 240), 0.5);
}

/* ===============================================================================
   Responsive - Mobile
   =============================================================================== */

@media (max-width: 576px) {
    .balam-toast-container {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }

    .balam-toast {
        padding: 0.875rem 1rem;
    }
}