/* ChatBase — "What's New" popup (whatsnew.js). Sits below sign-in/consent/welcome (99990+). */
#wnModal, #anModal {
    position: fixed;
    inset: 0;
    z-index: 99980;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s var(--neo-ease, ease);
}
#wnModal[hidden], #anModal[hidden] { display: none; }
#wnModal, #wnModal *, #anModal, #anModal * { box-sizing: border-box; }
#wnModal.wn-in, #anModal.wn-in { opacity: 1; }

.wn-box {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px 24px 22px;
    border-radius: 24px;
    background: var(--neo-ink, #0a0a0d);
    border: 1px solid var(--neo-line-hi, rgba(255, 255, 255, 0.16));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px var(--neo-glow, rgba(138, 180, 255, 0.35));
    color: var(--neo-text, #f5f5f7);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.4s var(--neo-spring, ease);
}
#wnModal.wn-in .wn-box, #anModal.wn-in .wn-box { transform: none; }

.wn-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--neo-line, rgba(255, 255, 255, 0.08));
    background: var(--neo-raised, rgba(36, 36, 44, 0.55));
    color: var(--neo-dim, rgba(235, 235, 245, 0.6));
    cursor: pointer;
    font-size: 14px;
}
.wn-x:hover { color: var(--neo-text, #fff); }

.wn-head { text-align: center; margin-bottom: 20px; }
.wn-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1, #a855f7));
}
.wn-head h2 {
    margin: 12px 0 6px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, var(--neo-text, #fff), var(--neo-accent, #8ab4ff));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wn-head p { margin: 0; color: var(--neo-dim, rgba(235, 235, 245, 0.6)); font-size: 14px; }

.wn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.wn-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    text-align: left;
    border-radius: 16px;
    border: 1px solid var(--neo-line, rgba(255, 255, 255, 0.08));
    background: var(--neo-surface, rgba(22, 22, 28, 0.55));
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
#wnModal.wn-in .wn-item, #anModal.wn-in .wn-item {
    animation: wn-pop 0.45s var(--neo-ease, ease) forwards;
    animation-delay: calc(var(--i) * 40ms + 120ms);
}
.wn-item:hover,
.wn-item:focus-visible {
    border-color: var(--neo-accent, #8ab4ff);
    background: var(--neo-raised, rgba(36, 36, 44, 0.55));
}
.wn-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.wn-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wn-txt b { font-size: 14px; font-weight: 700; }
.wn-txt span { font-size: 12.5px; line-height: 1.35; color: var(--neo-dim, rgba(235, 235, 245, 0.6)); }

.wn-go {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1, #a855f7));
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}
.wn-go:hover { filter: brightness(1.1); transform: translateY(-1px); }

@keyframes wn-pop { to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
    .wn-grid { grid-template-columns: 1fr; }
    .wn-head h2 { font-size: 23px; }
    .wn-box { padding: 24px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    #wnModal, .wn-box, .wn-item, #anModal { transition: none; }
#wnModal.wn-in .wn-item, #anModal.wn-in .wn-item { animation: none; opacity: 1; transform: none; }
}

/* Admin What's New (adminnew.js) — same look, bigger + grouped by admin page */
#anModal .wn-box { max-width: 860px; max-height: 88vh; overflow-y: auto; }
#anModal .wn-badge { background: linear-gradient(135deg, #ff9f43, #ff5e7e); }
.an-sec { margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--neo-dim, rgba(235, 235, 245, 0.6)); display: flex; align-items: center; gap: 8px; }
.an-sec button { margin-left: auto; font: inherit; font-size: 11px; text-transform: none; letter-spacing: 0; padding: 4px 10px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: transparent; color: inherit; cursor: pointer; }
.an-sec button:hover { color: var(--neo-text, #fff); border-color: rgba(255,255,255,.35); }
#anModal .wn-go { position: sticky; bottom: 0; margin-top: 16px; }