/* 1.76.498: Aanpassen met AI in het hostingpaneel (inc/site-ai.php) */
.nsl-sai { min-width: 0; max-width: 100%; }
.nsl-sai__buy .nsl-btn { white-space: normal; text-align: left; }
.nsl-sai__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.nsl-sai__head h3 { margin: 0 0 6px; }
.nsl-sai__head p { margin: 0; max-width: 62ch; }
.nsl-sai__bal { flex: none; display: grid; justify-items: end; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; }
.nsl-sai__bal small { color: var(--muted); font-size: .78rem; }
.nsl-sai__bal b { font: 600 1.3rem var(--f-mono); color: var(--text); }
.nsl-sai__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 18px 0 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nsl-sai__buy > span { color: var(--muted); font-size: .88rem; }
.nsl-sai__buy > div { display: flex; flex-wrap: wrap; gap: 8px; }
.nsl-sai__form { margin-top: 18px; }
.nsl-sai__form textarea { min-height: 110px; resize: vertical; }
.nsl-sai__ex { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.nsl-sai__chip { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; text-align: left; }
.nsl-sai__chip:hover { color: var(--text); border-color: var(--line-2); }
.nsl-sai__msg { margin: 16px 0 0; padding: 10px 0; color: var(--text); border-top: 1px solid var(--line); }
.nsl-sai__msg.is-bad { color: var(--pink); }
.nsl-sai__list { display: grid; gap: 12px; margin-top: 18px; }
.nsl-sai__item { padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; }
.nsl-sai__item.is-planned { border-color: #7643c8; }
.nsl-sai__item header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nsl-sai__item header b { font-weight: 600; overflow-wrap: anywhere; }
.nsl-sai__st { flex: none; color: var(--muted); font-size: .8rem; }
.nsl-sai__item.is-applied .nsl-sai__st { color: var(--text); }
.nsl-sai__item.is-failed .nsl-sai__st, .nsl-sai__item.is-rolledback .nsl-sai__st { color: var(--pink); }
.nsl-sai__item p { margin: 8px 0 0; color: var(--muted); }
.nsl-sai__ops { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: .88rem; }
.nsl-sai__ops code { font-size: .82rem; overflow-wrap: anywhere; }
.nsl-sai__item footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.nsl-sai__item footer small { color: var(--dim); }
@media (max-width: 700px) {
	.nsl-sai__head { flex-direction: column; gap: 12px; }
	.nsl-sai__bal { justify-items: start; }
	.nsl-sai__item footer > span { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
	.nsl-sai__buy > div, .nsl-sai__buy .nsl-btn { width: 100%; }
	.nsl-sai__item header { flex-direction: column; gap: 4px; }
	.nsl-sai__form [data-sai-go] { width: 100%; }
	.nsl-sai__form [data-sai-go] + small { display: block; margin-top: 8px; }
}

/* 1.76.500: bovenaan het overzicht, als chatbalk */
.nsl-sai-hero { margin: 0 0 22px; padding: 26px 28px 22px; border: 1px solid var(--line); border-left: 3px solid #7643c8; border-radius: 6px; background: rgba(118, 67, 200, .06); }
.nsl-sai-hero__k { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 600 11px/1 var(--f-mono); color: #a98be0; }
.nsl-sai-hero h2 { margin: 0 0 8px; font: 600 clamp(20px, 2vw, 26px)/1.2 var(--f-display); letter-spacing: -.02em; }
.nsl-sai-hero__txt p:last-child { margin: 0; max-width: 72ch; color: var(--muted); }
.nsl-sai-hero__form { margin-top: 18px; }
.nsl-sai-hero__bar { display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 16px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--app-bg, #0e0e10); }
.nsl-sai-hero__bar:focus-within { border-color: #7643c8; }
.nsl-sai-hero__bar textarea { flex: 1 1 auto; min-height: 28px; max-height: 160px; padding: 8px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.02rem; line-height: 1.4; resize: none; outline: none; }
.nsl-sai-hero__bar textarea::placeholder { color: var(--dim); }
.nsl-sai-hero__bar select { flex: none; max-width: 220px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: .9rem; }
.nsl-sai-hero__bar .nsl-btn { flex: none; height: 40px; }
.nsl-sai-hero__sub { margin: 10px 0 0; color: var(--dim); font-size: .84rem; }
.nsl-sai-hero__sub b { color: var(--muted); font-weight: 500; }
@media (max-width: 700px) {
	.nsl-sai-hero { padding: 20px 16px 18px; }
	.nsl-sai-hero__bar { flex-wrap: wrap; padding: 10px; }
	.nsl-sai-hero__bar textarea { flex-basis: 100%; min-height: 56px; }
	.nsl-sai-hero__bar select { flex: 1 1 auto; max-width: none; }
	.nsl-sai-hero__bar .nsl-btn { flex: 1 1 auto; }
}