Index: src/assets/css/ward.css
===================================================================
--- src/assets/css/ward.css	(revision 5412cbbcf42cb02fb3fb6d67ef433290c95bb38c)
+++ src/assets/css/ward.css	(revision 2086ea255ae8ea5a474fc805eda10bd71146c947)
@@ -166,2 +166,28 @@
 .friend .wie { display: flex; flex-direction: column; }
 #friends-cancel { margin-top: 12px; border: 0; background: none; color: var(--dim); font: inherit; }
+
+/* ── De composer ──────────────────────────────────────────────────────── */
+.feed-head { display: flex; align-items: center; gap: 12px; }
+.feed-head h2 { margin: 24px 0 10px; }
+#compose-open { margin-left: auto; border: 0; border-radius: 999px; padding: 8px 16px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
+
+dialog#compose-dialog {
+  border: 0; border-radius: 16px; padding: 16px; max-width: 480px; width: calc(100% - 32px);
+  background: var(--card); color: var(--ink);
+}
+dialog#compose-dialog::backdrop { background: rgba(0,0,0,.5); }
+.compose-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+.compose-head #compose-cancel { border: 0; background: #2a3342; color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 1rem; }
+.compose-head #compose-vis { flex: 1; border-radius: 10px; border: 1px solid #2a3342; background: #131a25; color: var(--ink); padding: 8px; font: inherit; }
+.compose-head .primary { border: 0; border-radius: 10px; padding: 8px 16px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
+.compose-head .primary:disabled { background: #3a3f4d; color: var(--dim); }
+#compose-text { width: 100%; border-radius: 12px; border: 1px solid #2a3342; background: #131a25; color: var(--ink); padding: 10px; font: inherit; resize: vertical; }
+.compose-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.media-chip { position: relative; display: flex; align-items: center; gap: 6px; background: #131a25; border-radius: 10px; padding: 6px 8px; }
+.media-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
+.media-chip .kind { font-size: 1.2rem; }
+.media-chip .name { font-size: .8rem; color: var(--dim); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.media-chip .drop { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #000; color: #fff; font-size: .75rem; line-height: 1; }
+.compose-tools { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
+.compose-tools .tool { font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 10px; background: #131a25; }
+.compose-tools .hint { margin-left: auto; }