/* ============================================================
   Toast Notification System
   ============================================================ */

#kg-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-height: 100vh;
    overflow: hidden;
}

/* ---- Individual toast ---- */
.kg-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 340px;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 0.9rem;
    color: #e0e0e0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    opacity: 0;
    transform: translateX(100%);
    transition: none;
}

.kg-toast--visible {
    animation: kg-toast-in 0.35s ease forwards;
}

.kg-toast--out {
    animation: kg-toast-out 0.3s ease forwards;
}

/* Type colours */
.kg-toast--success { background: #0d3320; border-color: #328727; }
.kg-toast--error   { background: #3d1318; border-color: #cc520d; }
.kg-toast--warning { background: #3d2e0a; border-color: #d48a0c; }
.kg-toast--info    { background: #0d2136; border-color: #1a73e8; }

/* Icon */
.kg-toast__icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1;
}
.kg-toast--success .kg-toast__icon { color: #4caf50; }
.kg-toast--error   .kg-toast__icon { color: #ef5350; }
.kg-toast--warning .kg-toast__icon { color: #ffa726; }
.kg-toast--info    .kg-toast__icon { color: #42a5f5; }

/* Message */
.kg-toast__msg {
    flex: 1;
    word-break: break-word;
}

/* Close button */
.kg-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0 0 0.4rem;
    cursor: pointer;
    transition: color 0.15s;
}
.kg-toast__close:hover {
    color: #fff;
}

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

/* ---- Responsive: full-width on small screens ---- */
@media (max-width: 480px) {
    #kg-toast-container {
        top: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
    }
    .kg-toast {
        width: 100%;
        max-width: 100%;
    }
}