Index: src/assets/css/ward.css
===================================================================
--- src/assets/css/ward.css	(revision 4bb93aa4a060a71f9d58edb59da3c88711d16844)
+++ src/assets/css/ward.css	(revision 5412cbbcf42cb02fb3fb6d67ef433290c95bb38c)
@@ -150,2 +150,18 @@
 .wave-answers button { border: 0; border-radius: 10px; padding: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
 #wave-cancel { margin-top: 10px; border: 0; background: none; color: var(--dim); font: inherit; }
+
+/* ── De vriendenkiezer achter de (+) ──────────────────────────────────── */
+dialog#friends-dialog {
+  border: 0; border-radius: 16px; padding: 18px; max-width: 380px; width: calc(100% - 48px);
+  max-height: 70vh; overflow-y: auto;
+  background: var(--card); color: var(--ink);
+}
+dialog#friends-dialog::backdrop { background: rgba(0,0,0,.4); }
+dialog#friends-dialog h2 { margin: 0 0 12px; font-size: 1.05rem; }
+.friend button.row {
+  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
+  border: 0; background: none; color: var(--ink); padding: 4px 2px; font: inherit; cursor: pointer;
+}
+.friend .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
+.friend .wie { display: flex; flex-direction: column; }
+#friends-cancel { margin-top: 12px; border: 0; background: none; color: var(--dim); font: inherit; }