Mit "@" jemanden im Chat ansprechen

Filipe: "ich will das man die leute mit @ markieren kann im chat."

MARKIEREN IST KEINE FARBE, SONDERN EINE ANSPRACHE. Sie funktioniert
nur, wenn drei Dinge zusammen stimmen: Der Richtige ist gemeint, er
MERKT es, und man sieht es im Satz. Fehlt eines davon, ist es eine
Attrappe -- und zwar eine, die gut aussieht.

WER GEMEINT IST, ENTSCHEIDET DER SERVER. Der Browser schickt nur Text.
Damit wirkt ein von Hand getipptes "@VanVan" genauso wie eines aus der
Auswahlliste, und niemand kann jemanden ansprechen, der gar nicht im
Raum sitzt -- auch nicht ueber die Schnittstelle.

Die Regeln stehen in server/chat-erwaehnung.js, jede mit Begruendung.
Zwei davon sind keine Feinheit, sondern der Unterschied zwischen
brauchbar und laestig:

  * Das Zeichen VOR dem "@" darf kein Buchstabe sein. Sonst piepst
    jede E-Mail-Adresse im Chat jemanden an
    ("[email protected]").
  * Das Zeichen DANACH auch nicht, und der laengste Name gewinnt.
    Sonst spricht "@Tilikum" Tili an.

MAN MERKT ES AUCH OHNE OFFENEN RAUM. Eine Zahl in der Gespraechsliste
sagt "hier ist etwas" -- nicht, ob es an dich war. Wer morgens vier
Raeume mit Zahlen sieht, macht den lautesten zuerst auf, und dort
steht selten das, was auf ihn wartet. Jetzt steht ein "@" daneben.

UND DIE MELDUNG AUFS HANDY SAGT ES: "VanVan hat dich erwaehnt" statt
"Nachricht von VanVan". Als EIGENE Art, die sich getrennt abschalten
laesst -- wer den lauten Chat stumm stellt, will trotzdem wissen, wenn
ihn jemand direkt anspricht. Ohne Ausnahme von der Ruhezeit: Ein Anruf
wartet auf eine Antwort, ein "@Anna" nicht.

DIE AUSWAHL BEIM TIPPEN loest drei Dinge, die man sonst selbst wissen
muesste: wie die Person genau heisst, wer ueberhaupt im Raum ist, und
ob man sich vertippt hat. Tastatur zuerst (Pfeile, Enter, Tab, Escape).
Sie erzwingt nichts -- wer weitertippt, schreibt einfach weiter.

ZWEI RECHNUNGEN, EINE ANTWORT: Der Browser braucht dieselbe Aufloesung,
um sofort hervorzuheben. Genau dort laufen Dinge auseinander, und dann
haette die Seite jemanden hervorgehoben, den niemand benachrichtigt
hat. pruef-erwaehnung LIEST die Browserfassung aus der Datei und fuehrt
sie aus -- ein Nachbau wuerde pruefen, ob ich zweimal dasselbe
schreiben kann.

---- DABEI GEFUNDEN: "gelesen bis 999999" ----------------------------

Der Server nahm fuer den Lesestand JEDE ganze Zahl an. Wer einmal eine
Zahl hinter allem Vorhandenen schickte, sah in diesem Gespraech nie
wieder einen Zaehler und nie wieder ein @-Zeichen: Alles Kuenftige galt
als gelesen, bevor es geschrieben war. Das faellt niemandem als
Zusammenhang auf -- man merkt nur, dass "die Benachrichtigungen nicht
gehen".

Der Browser schickt heute immer die letzte gesehene Nummer, ist also
nicht der Grund. Aber eine Grenze, die nur davon lebt, dass der
Aufrufer sich benimmt, ist keine. Jetzt wird auf die juengste
Nachricht des Raums begrenzt -- abgeleitet, nicht geraten.

Gefunden hat es meine eigene Pruefung: Sie setzte zum Aufraeumen 99999
und wunderte sich danach, warum das frische "@" nicht leuchtete.

WOHER MAN ERFAEHRT, DASS ES DAS GIBT: Im Chat gibt es keinen
Hilfeknopf. Der Hinweis steht deshalb im Leersatz einer neuen Gruppe --
dort, wo man beim ersten Oeffnen ohnehin hinsieht, und nur ab drei
Leuten. In einem Zweiergespraech waere er Ballast.

GEPRUEFT: pruef-erwaehnung 67/0 (neu) -- 13 Regelfaelle ohne Server,
der Weg durch die Schnittstelle, das Zeichen in der Liste samt
Gegenprobe bei jemandem, der dabei aber nicht gemeint war, beide
Aufloesungen nebeneinander, und der ganze Ablauf am echten Bildschirm
bis "Enter waehlt und schickt NICHT ab".
Dazu pruef-chat 48/0, pruef-chat-optik 36/0, pruef-treffchat 110/0,
pruef-chat-kanaele 79/0, pruef-glocke 31/0, pruef-push 24/0,
pruef-anruf-klingelt, pruef-css-klassen, pruef-meldungen,
pruef-nachfrage, pruef-tippziele.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/chat.css

@@ -1992,3 +1992,124 @@
     border: 2px solid CanvasText;
   }
 }
+
+/* =====================================================================
+   "@" IM CHAT (20.09.2026)
+
+   Filipe: "ich will das man die leute mit @ markieren kann im chat."
+   ===================================================================== */
+
+/* ---- DER NAME IM SATZ ----------------------------------------------
+
+   GEDECKT, NICHT GRELL. Ein markierter Name steht mitten in einem
+   Absatz, den man liest -- er soll auffallen, ohne den Satz zu
+   zerreissen. Deshalb eine leichte Unterlage und etwas mehr Gewicht
+   statt einer Signalfarbe: Wer in einem langen Gespraech blaettert,
+   sieht sonst nur noch die Markierungen. */
+.chat-erwaehnung {
+  color: var(--akzent);
+  font-weight: 640;
+  padding: 0 3px;
+  margin: 0 -1px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--akzent) 13%, transparent);
+}
+
+/* BIN ICH GEMEINT, WIRD ES DEUTLICHER. Das ist der ganze Zweck: In
+   einem Raum mit acht Leuten soll der eigene Name aus dem Absatz
+   herausspringen. Der Rahmen kommt dazu, damit es nicht NUR die Farbe
+   ist -- wer Farben schlecht unterscheidet, sieht trotzdem eine
+   Umrandung. */
+.chat-erwaehnung[data-ich="ja"] {
+  background: color-mix(in srgb, var(--akzent) 26%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent);
+  color: var(--text);
+}
+
+/* ---- DAS ZEICHEN IN DER GESPRÄCHSLISTE ------------------------------ */
+.chat-raum__erwaehnt {
+  flex: none;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  font-size: .82rem; font-weight: 800; line-height: 1;
+  color: var(--akzent);
+  background: color-mix(in srgb, var(--akzent) 18%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 40%, transparent);
+}
+
+/* ---- DIE AUSWAHL BEIM TIPPEN ---------------------------------------
+
+   ÜBER der Schreibzeile, linksbündig: Das "@" wird links getippt, und
+   eine Liste, die woanders aufgeht als dort, wo man schreibt, sucht man
+   beim ersten Mal.
+
+   Dieselbe Verankerung wie bei der Emoji-Tafel (`bottom: 100%`), damit
+   beide sich gleich verhalten -- nur die Seite ist eine andere. */
+.erwaehn-liste {
+  position: absolute;
+  left: 14px; right: auto; bottom: calc(100% - 6px);
+  z-index: 6;
+  min-width: min(18rem, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
+  /* MEHR ALS SECHS EINTRÄGE WERDEN GEROLLT statt die halbe Seite zu
+     verdecken. Acht ist die Obergrenze im Skript; sechs passen ohne
+     Rollen auf ein Handy. */
+  max-height: 17rem; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 2px;
+  padding: 6px;
+  border-radius: 14px;
+  background: rgba(8, 12, 20, .97);
+  border: 1px solid rgba(150, 186, 220, .2);
+  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
+}
+
+.erwaehn-liste__eintrag {
+  appearance: none; border: 0; background: none;
+  display: flex; align-items: center; gap: 10px;
+  /* 44 px, wie jedes Berührziel in diesem Haus. Hier besonders: Wer
+     danebentippt, spricht den Falschen an -- und merkt es erst, wenn
+     die Nachricht schon draussen ist. */
+  width: 100%; min-height: 44px;
+  padding: 6px 10px;
+  border-radius: var(--radius-klein);
+  color: var(--text);
+  font: inherit; font-size: .92rem;
+  text-align: left; cursor: pointer;
+  transition: background var(--tempo);
+}
+.erwaehn-liste__eintrag:hover { background: rgba(255, 255, 255, .08); }
+/* VORGEMERKT heisst: Enter nimmt diesen. Das muss man sehen, sonst
+   waehlt man blind. */
+.erwaehn-liste__eintrag[data-wahl="ja"] {
+  background: color-mix(in srgb, var(--akzent) 20%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 42%, transparent);
+}
+.erwaehn-liste__eintrag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
+
+.erwaehn-liste__zeichen {
+  flex: none;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 50%;
+  font-size: .72rem; font-weight: 700; line-height: 1;
+  background: rgba(255, 255, 255, .08);
+  color: var(--text-leise);
+}
+.erwaehn-liste__name { flex: 1 1 auto; font-weight: 600; }
+.erwaehn-liste__rolle {
+  flex: none;
+  font-size: .72rem; color: var(--text-still);
+  text-transform: uppercase; letter-spacing: .06em;
+}
+
+/* ---- KONTRASTMODUS --------------------------------------------------
+
+   Dort gelten die Farben des Systems, und `color-mix` fällt weg: Eine
+   Markierung, die nur aus einer Tönung besteht, verschwindet komplett.
+   Deshalb hier ein echter Rahmen -- er überlebt jeden Farbmodus. */
+@media (forced-colors: active) {
+  .chat-erwaehnung,
+  .chat-erwaehnung[data-ich="ja"] { border: 1px solid CanvasText; }
+  .chat-raum__erwaehnt { border: 1px solid CanvasText; }
+  .erwaehn-liste__eintrag[data-wahl="ja"] { border: 2px solid Highlight; }
+}