/* ============================================================
   LNG UI Kit — shared primitives (Toast, Dialog, Skeleton)
   Vanilla CSS. Theme tokens mirror index :root gold/dark palette.
   Reference implementation for the cross-repo kit spec (KIT_SPEC.md).
   ============================================================ */
:root {
    /* re-declare so kit.css works standalone if loaded first */
    --kit-bg-dark: #1E1E1E;
    --kit-bg-gray: #525252;
    --kit-accent-gold: #D39B05;
    --kit-accent-bright: #FEAE02;
    --kit-ok: #2f9e44;
    --kit-err: #e03131;
    --kit-panel: #2a2a2a;
    --kit-radius: 10px;
    --kit-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* ---------- Toast ---------- */
.kit-toast-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 40px));
    pointer-events: none;
}
.kit-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--kit-radius);
    background: var(--kit-panel);
    color: #e8e8e8;
    box-shadow: var(--kit-shadow);
    border-left: 3px solid var(--kit-accent-bright);
    font-size: 0.9rem;
    line-height: 1.35;
    animation: kit-toast-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.kit-toast.leaving { animation: kit-toast-out 0.18s ease forwards; }
.kit-toast.success { border-left-color: var(--kit-ok); }
.kit-toast.error { border-left-color: var(--kit-err); }
.kit-toast .kit-toast-icon { flex-shrink: 0; font-size: 1.05rem; line-height: 1.2; }
.kit-toast .kit-toast-msg { flex: 1; word-break: break-word; }
.kit-toast .kit-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 2px;
}
.kit-toast .kit-toast-close:hover { color: #ddd; }

@keyframes kit-toast-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kit-toast-out {
    to { opacity: 0; transform: translateX(20px); }
}

/* ---------- Dialog ---------- */
.kit-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: kit-fade 0.15s ease;
}
.kit-dialog {
    width: min(420px, 100%);
    background: var(--kit-panel);
    border: 1px solid var(--kit-bg-gray);
    border-radius: 14px;
    box-shadow: var(--kit-shadow);
    padding: 22px;
    animation: kit-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.kit-dialog h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: #fff;
}
.kit-dialog p {
    margin: 0 0 20px;
    color: #bdbdbd;
    font-size: 0.92rem;
    line-height: 1.5;
}
.kit-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.kit-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.kit-btn-ghost {
    background: transparent;
    border-color: var(--kit-bg-gray);
    color: #ccc;
}
.kit-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }
.kit-btn-primary {
    background: var(--kit-accent-gold);
    color: #1a1200;
}
.kit-btn-primary:hover { background: var(--kit-accent-bright); }
.kit-btn-danger {
    background: var(--kit-err);
    color: #fff;
}
.kit-btn-danger:hover { opacity: 0.88; }

@keyframes kit-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kit-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Skeleton ---------- */
.kit-skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #2a2a2a 25%, #363636 37%, #2a2a2a 63%);
    background-size: 400% 100%;
    animation: kit-shimmer 1.3s ease-in-out infinite;
}
.kit-skel-text { height: 0.8rem; margin: 0.35rem 0; }
.kit-skel-line-70 { width: 70%; }
.kit-skel-line-90 { width: 90%; }
.kit-skel-card { height: 92px; border-radius: var(--kit-radius); }
@keyframes kit-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .kit-toast, .kit-dialog, .kit-dialog-backdrop, .kit-skel { animation: none; }
}