/* Wachtlijst-assistent: aanvulling op sales-hub.css (wl- prefix) */
.wl-mock { display: flex; flex-direction: column; align-items: center; }
.wl-phone { width: min(360px, 100%); background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 14px; box-shadow: 0 40px 80px -40px rgba(10,10,10,.45); animation: sh-rise .7s ease both .2s; }
.wl-ph-top { display: flex; gap: 10px; align-items: center; padding: 6px 6px 12px; border-bottom: 1px solid var(--border); }
.wl-ph-top b { display: block; font-size: 14px; } .wl-ph-top small { font-size: 12px; color: var(--muted); }
.wl-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.wl-chat { display: flex; flex-direction: column; gap: 8px; padding: 14px 4px 4px; background: var(--paper); border-radius: 0 0 18px 18px; margin: 0 -14px -14px; padding: 14px; }
.wl-chat p { margin: 0; max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.wl-in { align-self: flex-start; background: #fff; border: 1px solid var(--border); }
.wl-out { align-self: flex-end; background: #dcf8c6; }
.wl-sys { align-self: center; font-size: 11.5px !important; color: var(--muted); background: none !important; padding: 2px 0 !important; text-transform: uppercase; letter-spacing: .06em; }

/* Demo-dashboard */
.wl-app { border-radius: 22px; overflow: hidden; background: #0f1115; color: #e8e9ee; border: 1px solid #23262e; box-shadow: 0 60px 120px -50px rgba(10,10,10,.55), 0 0 0 1px rgba(255,255,255,.02) inset; }
.wl-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #23262e; background: linear-gradient(180deg, #161920, #12141a); }
.wl-brand { display: flex; align-items: center; gap: 10px; } .wl-brand b { display: block; font-size: 14.5px; color: #fff; } .wl-brand small { font-size: 12px; color: #8b90a0; }
.wl-logo .sh-ic { background: linear-gradient(135deg, var(--accent), #ff8a50); color: #fff; }
.wl-brand .sh-demo-tag { margin-left: 6px; }
.wl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; color: #d8dae2; background: #1b1e26; border: 1px solid #2b2f39; border-radius: 10px; padding: 8px 12px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.wl-btn:hover { border-color: #3a3f4b; color: #fff; } .wl-btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.wl-btn.act { box-shadow: 0 0 0 2px rgba(255,87,34,.45); } .wl-btn.ghost { background: none; }
.wl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sh-ic.xs { width: 16px; height: 16px; background: none; border-radius: 0; color: inherit; } .sh-ic.xs svg { width: 15px; height: 15px; }
.wl-shell { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 520px; }
.wl-side { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid #23262e; background: #12141a; }
.wl-side > span { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; font-size: 13px; color: #8b90a0; }
.wl-side > span.on { background: #1d2029; color: #fff; }
.wl-side em { margin-top: auto; display: flex; align-items: center; gap: 8px; font-style: normal; font-size: 12px; color: #8b90a0; padding: 10px; }
.wl-side em i, .wl-pulse i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: wl-pulse 2s infinite; }
@keyframes wl-pulse { 70% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.wl-main { padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.wl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wl-kpis > div { position: relative; padding: 14px 16px; border-radius: 14px; background: #161920; border: 1px solid #23262e; overflow: hidden; }
.wl-kpis small { display: block; font-size: 12px; color: #8b90a0; } .wl-kpis b { display: block; font-size: 28px; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; margin-top: 4px; }
.wl-kpis span { font-size: 12px; color: #8b90a0; } .wl-kpis span.dn { color: #3ddc84; }
.wl-kpis .hl { background: linear-gradient(135deg, rgba(255,87,34,.22), rgba(255,87,34,.04)); border-color: rgba(255,87,34,.4); }
.wl-kpis .bump b { animation: wl-bump .6s ease; } @keyframes wl-bump { 40% { color: var(--accent); transform: translateY(-2px); } }
.wl-spark { position: absolute; right: 12px; bottom: 12px; width: 44%; height: 28px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wl-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.wl-panel { border-radius: 16px; background: #161920; border: 1px solid #23262e; padding: 14px; min-width: 0; }
.wl-ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; } .wl-ph b { font-size: 13.5px; color: #fff; }
.wl-chips { display: flex; gap: 6px; } .wl-chips i { font-style: normal; font-size: 11.5px; padding: 4px 9px; border-radius: 999px; color: #8b90a0; border: 1px solid #2b2f39; } .wl-chips i.on { color: #fff; background: #23262e; }
.wl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.wl-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; background: #1b1e26; border: 1px solid transparent; transition: background .35s, border-color .35s, opacity .35s, transform .35s; }
.wl-row.eerder { background: #181b22; }
.wl-ava { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: var(--c); }
.wl-who { flex: 1; min-width: 0; } .wl-who b { display: block; font-size: 13.5px; color: #fff; } .wl-who small { display: block; font-size: 11.5px; color: #8b90a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-st { flex: none; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: #23262e; color: #b9bdc9; }
.wl-row.s-uit, .wl-row.s-check { border-color: rgba(255,87,34,.55); background: rgba(255,87,34,.1); } .wl-row.s-uit .wl-st, .wl-row.s-check .wl-st { background: var(--accent); color: #fff; }
.wl-row.s-ja, .wl-row.s-plek, .wl-row.s-blijft { border-color: rgba(61,220,132,.45); background: rgba(61,220,132,.08); } .wl-row.s-ja .wl-st, .wl-row.s-plek .wl-st, .wl-row.s-blijft .wl-st { background: #2e9e5b; color: #fff; }
.wl-row.s-nee { opacity: .55; } .wl-row.s-weg { opacity: .35; transform: translateX(8px); } .wl-row.s-weg b { text-decoration: line-through; }
.wl-timer { display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .wl-timer i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; animation: wl-count 4s linear forwards; }
@keyframes wl-count { to { transform: scaleX(.15); } }
.wl-pulse { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #3ddc84; }
.wl-msg { position: relative; padding: 14px; border-radius: 14px; background: #0b3d2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff10'/%3E%3C/svg%3E"); min-height: 132px; display: flex; flex-direction: column; gap: 8px; }
.wl-msg-to { font-size: 11.5px; color: #9fd9bf; text-transform: uppercase; letter-spacing: .06em; }
.wl-bub { align-self: flex-end; max-width: 92%; margin: 0; padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: #005c4b; color: #fff; font-size: 13.5px; line-height: 1.45; min-height: 20px; }
.wl-tick { align-self: flex-end; font-size: 11px; color: #53bdeb; }
.wl-msg .wl-muted { margin: 0; color: #9fd9bf; font-size: 13.5px; }
.wl-log { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; max-height: 250px; overflow: auto; }
.wl-log li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; font-size: 13px; line-height: 1.45; color: #c9ccd6; padding: 8px 10px; border-radius: 10px; background: #1b1e26; animation: sh-rise .4s ease both; }
.wl-log li time { color: #6d7282; font-variant-numeric: tabular-nums; } .wl-log li b { color: #fff; }
.wl-log li.wl-ok { background: rgba(61,220,132,.1); color: #d7f5e4; }
.wl-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
@media (max-width: 1000px) { .wl-shell { grid-template-columns: minmax(0, 1fr); } .wl-side { display: none; } }
@media (max-width: 900px) {
  .wl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wl-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-main { padding: 12px; } .wl-top { padding: 12px; }
  .wl-plans { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .wl-phone, .wl-log li, .wl-timer i, .wl-side em i, .wl-pulse i, .wl-kpis .bump b { animation: none; } .wl-row, .wl-btn { transition: none; } }