/* ====================================================================================
   TEAM — Chat und Kanäle (Runde 73). Namensraum tm-.
   ------------------------------------------------------------------------------------
   Grundsatz wie im Rest der App: keine harte Farbe. Flächen nehmen var(--lila|gruen|rot|
   amber|blau), Text nimmt die -t-Variante (--lilat, --rott, …). Damit stimmt der Nachtmodus
   von selbst, ohne dass hier eine einzige html.nacht-Regel nötig wäre.

   Die eine Ausnahme sind die Regeln für die Seitenleiste (.tm-side …): sie sitzen auf
   var(--ink) und arbeiten wie .nav-item in styles.css mit weißem Text und rgba-Weiß als
   Hover. Das ist keine hart geschriebene Themenfarbe, sondern dieselbe Deckschicht, die
   die Navigation darüber schon benutzt — sonst stünden zwei verschiedene Weißtöne
   untereinander in derselben Leiste.

   Höhe: .tm-wrap bekommt ihre Pixelhöhe von team.js (tmHoeheSetzen). In CSS wäre sie nicht
   sauber zu rechnen, weil Kopfzeile, Polster und die untere Leiste am Telefon verschiedene
   Höhen haben und die Tastatur am Handy noch dazukommt.
   ==================================================================================== */

/* ---------- Rahmen ---------- */

.tm-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  min-height: 320px;
}
/* Die Fadenspalte schrumpft mit. Fest genagelte 360 px ließen bei 1024 px Fensterbreite
   (iPad quer, Icon-Leiste und Seitenleiste sind da noch sichtbar) nur rund 308 px für das
   Gespräch selbst übrig: die Antwortspalte war breiter als der Strang, neben dem sie steht.
   Darunter wird ganz umgeschaltet, siehe den 1150-px-Block weiter unten. */
.tm-wrap.mit-faden { grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 360px); }

.tm-haupt {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--weiss);
  border: 1px solid var(--linie-fein);
  border-radius: var(--r4);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---------- Kopfzeile des Kanals ---------- */

/* Die Lücke muss den negativen Rand von .tm-kopf-wahl mittragen: der zieht dessen KLICKFLÄCHE
   10 px nach rechts, so dass von 12 px Lücke gemessen 2,0 px zwischen Kanalwahl und dem Knopf
   „Kanal" übrig blieben — zwei große Ziele auf Tuchfühlung, ein Fehlgriff wechselt statt zu
   bearbeiten. 20 px ergeben gemessene 10 px. (Die Lücke zu VERKLEINERN, wie zuerst
   vorgeschlagen, hätte die beiden Flächen zur Überlappung gebracht.) */
.tm-kopf {
  display: flex; align-items: center; gap: var(--s5);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.tm-kopf-wahl {
  display: flex; align-items: center; gap: 11px;
  flex: 1; min-width: 0;
  padding: 6px 10px; margin: -6px -10px;
  border-radius: var(--r2); text-align: left;
}
.tm-kopf-wahl:hover { background: var(--soft); }
.tm-kopf-ic { display: inline-flex; flex: none; }
.tm-kopf-txt { min-width: 0; display: flex; flex-direction: column; }
.tm-kopf-txt b {
  font-size: var(--fs-karte); font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-kopf-txt span {
  font-size: var(--fs-fein); color: var(--tsoft); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-kopf-chev { display: none; color: var(--tsoft); flex: none; }
.tm-kopf-rechts { display: flex; align-items: center; gap: 8px; flex: none; }

.tm-raute { display: inline-flex; align-items: center; justify-content: center; color: var(--tsoft); font-size: var(--fs-text); }
.tm-raute.gross {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--soft); color: var(--lilat); font-size: var(--fs-karte);
}

/* ---------- Nachrichtenliste ---------- */

.tm-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px 10px; }
.tm-liste:focus { outline: none; }
.tm-leer { padding: 24px 0; }

.tm-mehr {
  display: block; margin: 4px auto 10px;
  background: var(--soft); color: var(--lilat);
  font-size: var(--fs-fein); font-weight: 600;
  border-radius: var(--r-pille); padding: 5px 14px;
}
.tm-mehr:hover { background: var(--line); }

/* Tagestrenner: die beiden Linien sind Pseudo-Elemente und damit selbst Flex-Kinder. */
.tm-tag {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 4px 8px;
  color: var(--tsoft); font-size: var(--fs-fein); font-weight: 600;
}
.tm-tag::before, .tm-tag::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.tm-system {
  text-align: center; color: var(--tsoft);
  font-size: var(--fs-fein); font-weight: 500;
  margin: 8px 0;
}
.tm-system span { margin-left: 8px; opacity: .7; }

/* ---------- Ein Beitrag ---------- */

.tm-btr {
  display: flex; gap: 10px; position: relative;
  padding: 4px 10px 4px 8px; border-radius: var(--r2);
  scroll-margin: 60px;
}
.tm-btr:hover, .tm-btr.zeigt { background: var(--soft); }
.tm-btr.folge { padding-top: 1px; padding-bottom: 1px; }
/* Der Sendezustand lief über opacity: .5 auf dem GANZEN Beitrag. Die Gruppendeckung zieht jeden
   Text mit: gemessen fiel der Beitragstext auf 3,75:1 (hell) und 4,40:1 (nachts) — gefordert
   sind 4,5:1 —, die Uhrzeit daneben sogar auf 2,17:1 und 2,68:1. Wie .zt-projekt.still in
   zeit.css zeigen jetzt Fläche und Etikett den Zustand, und jeder Text behält seinen vollen
   Kontrast. Mit dem Überfahren kollidiert die Fläche nicht: an einem noch nicht gesendeten
   Beitrag gibt es keine Aktionsleiste, die hängt an n.id. */
.tm-btr.sendet { background: var(--soft); }
.tm-sendezeile {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s1); color: var(--tsoft);
  font-size: var(--fs-mikro); font-weight: 600;
}
.tm-btr-inhalt { min-width: 0; flex: 1; }
.tm-btr-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tm-btr-kopf b { font-size: var(--fs-text); font-weight: 700; }
.tm-btr-kopf time { font-size: var(--fs-mikro); color: var(--tsoft); font-weight: 500; }
.tm-bearb { font-size: var(--fs-mikro); color: var(--tsoft); font-style: italic; margin-left: 6px; }

/* Bei gruppierten Folgebeiträgen steht die Uhrzeit dort, wo sonst der Avatar sitzt —
   sichtbar erst beim Überfahren, sonst wäre die Spalte voller Zahlen. */
.tm-zeitrand {
  width: 34px; flex: none; text-align: right;
  font-size: var(--fs-mikro); color: var(--tsoft);
  opacity: 0; padding-top: 3px;
}
.tm-btr:hover .tm-zeitrand, .tm-btr.zeigt .tm-zeitrand { opacity: 1; }

.tm-av {
  width: var(--gr, 34px); height: var(--gr, 34px);
  border-radius: 50%; flex: none; overflow: hidden;
  background: var(--lila); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(var(--gr, 34px) * .38); letter-spacing: -.02em;
}
.tm-av.has-img { background: none; }
.tm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tm-text { font-size: var(--fs-text); line-height: 1.5; overflow-wrap: anywhere; }
.tm-text.weg { color: var(--tsoft); font-style: italic; }
.tm-text a { text-decoration: underline; }
.tm-code {
  background: var(--soft); color: var(--lilat);
  border-radius: var(--r1); padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}
.tm-nennung { color: var(--lilat); font-weight: 600; }
/* Werde ich selbst angesprochen, muss das im Vorbeiscrollen auffallen. */
.tm-nennung.ich { background: var(--amber-soft); color: var(--ambert); border-radius: var(--r1); padding: 0 4px; }

.tm-fehlzeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: var(--fs-fein); color: var(--rott); font-weight: 600;
}

/* ---------- Anhänge am Beitrag ---------- */

.tm-btr-anh { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tm-bild { display: block; line-height: 0; }
.tm-bild img {
  max-width: min(340px, 100%); max-height: 260px;
  border-radius: var(--r2); border: 1px solid var(--line); display: block;
}
.tm-datei {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--soft); color: var(--lilat);
  border-radius: var(--r2); padding: 7px 12px;
  font-size: var(--fs-text); font-weight: 600;
}
.tm-datei:hover { background: var(--line); }
.tm-datei em { font-style: normal; font-weight: 500; font-size: var(--fs-fein); color: var(--tsoft); }
/* Die Zeile aus TEAM > Dateien. Hier sucht man einen DATEINAMEN, und genau der war am Telefon
   weg: gemessen 0,0 px breit bei 375 px (14,2 px bei 414 px), während Größe und Herkunft ihre
   volle Breite behielten. Ursache: der Name trug flex 1 1 0% mit min-width 0 und gab alles her,
   die Herkunftszeile daneben min-width auto und gab nichts her.
   Jetzt umgekehrt: der Name bekommt mit 140 px Grundbreite (rund 20 Zeichen) eine Untergrenze,
   die Herkunft darf kürzen — und wenn beides nicht mehr nebeneinander passt, rutscht die
   Herkunft auf eine zweite Zeile, statt den Namen aufzufressen. */
.tm-datei.breit { display: flex; flex-wrap: wrap; }
.tm-datei.breit span { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-datei.breit i {
  font-style: normal; font-size: var(--fs-fein); color: var(--tsoft); font-weight: 500;
  /* flex-grow bleibt 0: mit 1 zog die Herkunft am Rechner die halbe Zeile an sich (gemessen
     500,7 statt 232,5 px) und nahm sie dem Namen wieder weg. */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Reaktionen ---------- */

.tm-reakt { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tm-reakt-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--soft); border: 1px solid transparent;
  border-radius: var(--r-pille); padding: 1px 10px; min-height: 28px;
  font-size: var(--fs-fein); line-height: 1.6;
}
.tm-reakt-chip em { font-style: normal; font-weight: 700; color: var(--lilat); }
.tm-reakt-chip.meins { border-color: var(--lilat); background: var(--weiss); }
.tm-reakt-chip:hover { background: var(--line); }

/* Gemessen 96,9x18 px bei 320, 375 und 414 px — unter den 24 px, die tools/mess-handy-regeln.js
   am Finger fordert, und das ist der EINZIGE Weg in den Gesprächsfaden. Die 5 px Außenabstand
   wandern deshalb nach innen: dieselben 5 px als Polster machen die Fläche 28 px hoch, der
   negative Rand nimmt sie im Fluss wieder heraus, die Zeile steht optisch unverändert.
   5 und 8 px sind bewusst keine Rasterstufen, sie sind die Gegenstücke zum bisherigen Abstand. */
.tm-faden-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px; margin: 0 -8px -5px;
  color: var(--lilat);
  font-size: var(--fs-fein); font-weight: 600;
}
.tm-faden-knopf:hover { text-decoration: underline; }

/* ---------- Aktionsleiste beim Überfahren ---------- */

.tm-akt {
  position: absolute; top: -14px; right: 10px; z-index: 3;
  display: none; gap: 2px; padding: 2px;
  background: var(--weiss);
  border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--shadow);
}
.tm-btr:hover .tm-akt, .tm-btr.zeigt .tm-akt { display: flex; }
/* 34 px statt 28: die Leiste wird am Telefon angetippt, und darunter trifft man zwischen
   Bearbeiten und Löschen leicht daneben. Das Bild bleibt gleich groß, nur die Fläche wächst. */
.tm-akt > button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; color: var(--tsoft);
}
.tm-akt > button:hover { background: var(--soft); color: var(--lilat); }
/* Abstand vor dem Löschen: der teuerste Fehlgriff der Leiste liegt sonst direkt neben dem
   harmlosesten Knopf. */
.tm-akt > button.weg { margin-left: 6px; }
.tm-akt > button.weg:hover { background: var(--rot-soft); color: var(--rott); }

/* Die Auswahl öffnet nach OBEN. Nach unten lag sie beim jeweils neuesten Beitrag zur Hälfte
   unter der Kante von .tm-liste (die beschneidet wegen overflow-y) — und genau auf den
   neuesten Beitrag reagiert man im Alltag. Über der Aktionsleiste ist immer Platz. */
.tm-emojiwahl {
  position: absolute; bottom: calc(100% + 4px); right: 0;
  display: flex; gap: 2px; padding: 4px;
  background: var(--weiss);
  border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--shadow-lg);
}
.tm-emojiwahl button {
  width: 30px; height: 30px; border-radius: 8px; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tm-emojiwahl button:hover { background: var(--soft); }

/* ---------- Sprung ans Ende ---------- */

.tm-ans-ende {
  align-self: center; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 8px;
  background: var(--lila); color: #fff;
  border-radius: var(--r-pille); padding: 5px 15px;
  font-size: var(--fs-fein); font-weight: 600;
  box-shadow: var(--shadow);
}

/* ---------- Eingabe ---------- */

.tm-eingabe { flex: none; border-top: 1px solid var(--line); padding: 10px 14px 12px; }
.tm-feldzeile { display: flex; align-items: flex-end; gap: 8px; }
.tm-feldbox { flex: 1; min-width: 0; position: relative; }
.tm-feldbox textarea {
  width: 100%; display: block; resize: none;
  max-height: 200px; overflow-y: auto;
  border: 1.5px solid var(--feldrand); border-radius: var(--r2);
  background: var(--bg); padding: 10px 14px;
  font-size: var(--fs-text); line-height: 1.45;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.tm-feldbox textarea:focus {
  border-color: var(--lilat);
  box-shadow: 0 0 0 4px rgba(96, 39, 166, .12);
  background: var(--weiss);
}
.tm-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r2); color: var(--tsoft);
}
.tm-knopf:hover { background: var(--soft); color: var(--lilat); }
.tm-knopf.senden { background: var(--lila); color: #fff; }
.tm-knopf.senden:hover { background: var(--lila2); color: #fff; }
.tm-hinweis { font-size: var(--fs-mikro); color: var(--tsoft); margin: 6px 0 0 48px; }

/* Vorbereitete Anhänge über dem Feld */
.tm-anhaenge { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tm-anh {
  display: flex; align-items: center; gap: 8px;
  background: var(--soft); border-radius: var(--r2); padding: 6px 8px 6px 10px;
  font-size: var(--fs-fein); font-weight: 600; color: var(--lilat);
  max-width: 260px;
}
.tm-anh.laedt { opacity: .6; }
.tm-anh img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; display: block; }
.tm-anh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-anh em { font-style: normal; font-weight: 500; color: var(--tsoft); }
.tm-anh button {
  color: var(--tsoft); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;   /* 2 px Polster waren als Ziel zu klein */
}
.tm-anh button:hover { color: var(--rott); background: var(--rot-soft); }

/* ---------- Namensauswahl (Klammeraffe) ---------- */

.tm-namen {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  max-height: 260px; overflow-y: auto;
  background: var(--weiss);
  border: 1px solid var(--line); border-radius: var(--r3);
  box-shadow: var(--shadow-lg); padding: 5px;
}
.tm-name {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border-radius: 10px; text-align: left;
}
.tm-name span { display: flex; flex-direction: column; min-width: 0; }
.tm-name b { font-size: var(--fs-text); font-weight: 600; }
.tm-name em { font-style: normal; font-size: var(--fs-mikro); color: var(--tsoft); }
.tm-name:hover, .tm-name.an { background: var(--soft); }

/* ---------- Gesprächsfaden (rechte Spalte) ---------- */

.tm-faden {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--weiss);
  border: 1px solid var(--linie-fein);
  border-radius: var(--r4);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tm-faden-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line); flex: none;
}
.tm-faden-kopf b { flex: 1; display: flex; align-items: center; gap: 8px; font-size: var(--fs-text); font-weight: 700; }
.tm-faden-kopf svg { color: var(--lilat); }
.tm-faden-kopf .tm-knopf { width: 32px; height: 32px; }
.tm-faden-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; }
.tm-faden-fuss {
  flex: none; padding: 8px 16px 10px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-mikro); color: var(--tsoft);
}

/* ---------- Seitenleiste (auf var(--ink), siehe Kopfkommentar) ---------- */

.tm-side {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.tm-suche {
  display: flex; align-items: center; gap: 8px; flex: none;
  background: rgba(255, 255, 255, .08); border-radius: var(--r2);
  padding: 7px 10px; margin-bottom: 8px; color: rgba(255, 255, 255, .55);
}
.tm-suche input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: #fff; font-size: var(--fs-text); font-weight: 500;
}
/* .5 ist der Hausstandard dieser Leiste (styles.css .side-appname span). Mit .42 lag der
   Platzhalter bei rund 4,0:1 und damit unter dem, was der Rest derselben Leiste einhält. */
.tm-suche input::placeholder { color: rgba(255, 255, 255, .5); }
.tm-suche input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }

.tm-abschnitt { display: flex; flex-direction: column; gap: 1px; flex: none; }
.tm-abschnitt-kopf {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: 9px 10px 4px;
  font-size: var(--fs-mikro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  /* .58 statt .42: 11 px Großbuchstaben mit Sperrung brauchen mehr Kontrast als der Fließtext
     daneben, und „Direktnachrichten" ist die Orientierung der ganzen Kanalliste. */
  color: rgba(255, 255, 255, .58);
}
.tm-abschnitt-kopf.klapp:hover { color: #fff; }
.tm-pfeil { display: inline-flex; transition: transform .15s; }
.tm-abschnitt-kopf.offen .tm-pfeil { transform: rotate(90deg); }

/* Eine Kanalzeile besteht aus zwei Knöpfen nebeneinander (Kanal und Auslassungsmenü), ein
   Knopf im Knopf wäre kein gültiges HTML. Die FLÄCHE gehört deshalb der Hülle: läge sie
   weiter auf .tm-kanal, endete die Hervorhebung des offenen Kanals vor den drei Punkten. */
.tm-kanal-zeile {
  display: flex; align-items: center; flex: none;
  border-radius: 10px; transition: background .15s;
}
.tm-kanal-zeile:hover { background: rgba(255, 255, 255, .07); }
.tm-kanal-zeile:has(.tm-kanal.aktiv) { background: var(--lila); }

.tm-kanal {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; text-align: left;
  padding: 6px 4px 6px 10px; border-radius: 10px;
  color: rgba(255, 255, 255, .68);
  font-size: var(--fs-text); font-weight: 500;
  transition: color .15s;
}
/* Ohne Auslassungsmenü daneben (Direktnachrichten) bleibt das rechte Polster stehen. */
.tm-kanal:last-child { padding-right: 10px; }
.tm-kanal-zeile:hover .tm-kanal { color: #fff; }
/* :has() kennt jeder Browser seit 2023; wo nicht, bliebe der offene Kanal ohne Fläche.
   Deshalb trägt der Knopf sie zusätzlich selbst, mit demselben Radius wie die Hülle. */
.tm-kanal.aktiv { background: var(--lila); color: #fff; font-weight: 600; }
.tm-kanal.ungelesen { color: #fff; font-weight: 700; }

/* Die drei Punkte an der Zeile. Sichtbar beim Überfahren, bei Tastaturfokus und solange das
   Menü offen ist. Auf einem Tastgerät (iPad quer: Seitenleiste da, Zeiger nicht) gibt es
   kein Überfahren — dort stehen sie dauerhaft, sonst wäre die Verwaltung dort unerreichbar. */
.tm-kanal-menue {
  flex: none; width: 28px; height: 28px; margin-right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: rgba(255, 255, 255, .6);
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.tm-kanal-zeile:hover .tm-kanal-menue,
.tm-kanal-menue:focus,
.tm-kanal-menue[aria-expanded="true"] { opacity: 1; }
.tm-kanal-menue:hover, .tm-kanal-menue[aria-expanded="true"] { background: rgba(255, 255, 255, .16); color: #fff; }
@media (hover: none) {
  .tm-kanal-menue { opacity: 1; width: 34px; height: 34px; }
}

/* Zahl am Abschnitt „Archiviert". Sie steht dort, weil der Abschnitt zugeklappt anfängt:
   ohne sie sähe er aus, als wäre nichts drin. */
.tm-archiv-zahl {
  margin-left: auto;
  font-size: var(--fs-mikro); font-weight: 700;
  color: rgba(255, 255, 255, .45);
}
.tm-kanal .tm-raute { color: inherit; opacity: .8; flex: none; }
.tm-kanal-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-privat { display: inline-flex; opacity: .55; flex: none; }
.tm-blase {
  margin-left: auto; flex: none;
  background: var(--rot); color: #fff;
  font-size: var(--fs-mikro); font-weight: 700;
  border-radius: var(--r-pille); padding: 1px 7px;
}
/* Dieselbe Klasse steht auch im Gesprächsfaden und über der Nachrichtenliste, und dort liegt
   sie auf var(--weiss). Weiß auf Weiß wäre unsichtbar: der Grundwert ist deshalb die normale
   gedämpfte Textfarbe, das Weiß gilt nur INNERHALB der Seitenleiste auf var(--ink). */
.tm-side-leer { padding: 8px 10px; font-size: var(--fs-fein); color: var(--tsoft); }
.tm-side .tm-side-leer { color: rgba(255, 255, 255, .5); }
/* Rückweg aus einer Suche ohne Treffer. Ohne ihn verschwand die Kanalliste kommentarlos. */
.tm-suche-weg {
  display: block; margin-top: 6px; padding: 5px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .1); color: #fff;
  font-size: var(--fs-fein); font-weight: 600;
}
.tm-suche-weg:hover { background: rgba(255, 255, 255, .18); }
.tm-neu {
  display: flex; align-items: center; gap: 8px; flex: none;
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  color: rgba(255, 255, 255, .55); font-size: var(--fs-fein); font-weight: 600;
}
.tm-neu:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* ---------- Auslassungsmenü an der Kanalzeile ----------
   Es hängt an document.body, nicht in der Seitenleiste: .tm-side scrollt (overflow-y) und
   würde ein Menü an ihrer unteren Kante abschneiden. Deshalb position: fixed, die Stelle
   rechnet team.js aus. z-index 88 liegt über der Seitenleiste (30) und unter dem
   Fenster-Überzug (90): ein Dialog gewinnt immer, ein Menü verdeckt ihn nie. */
.tm-menue {
  position: fixed; z-index: 88;
  min-width: 208px; max-width: 280px;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--weiss);
  border: 1px solid var(--line); border-radius: var(--r3);
  box-shadow: var(--shadow-lg); padding: 5px;
}
.tm-menue-kopf {
  padding: 6px 10px 7px;
  font-size: var(--fs-mikro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tsoft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-menue-eintrag {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 10px;
  color: var(--text); font-size: var(--fs-text); font-weight: 600;
}
.tm-menue-eintrag svg { color: var(--tsoft); flex: none; }
.tm-menue-eintrag:hover, .tm-menue-eintrag:focus {
  background: var(--soft); color: var(--lilat); outline: none;
}
.tm-menue-eintrag:hover svg, .tm-menue-eintrag:focus svg { color: var(--lilat); }
/* Der teuerste Eintrag steht unten und trägt als einziger den roten Ton. */
.tm-menue-eintrag.gefahr { color: var(--rott); }
.tm-menue-eintrag.gefahr svg { color: var(--rott); }
.tm-menue-eintrag.gefahr:hover, .tm-menue-eintrag.gefahr:focus { background: var(--rot-soft); color: var(--rott); }
.tm-menue-eintrag.gefahr:hover svg, .tm-menue-eintrag.gefahr:focus svg { color: var(--rott); }

/* ---------- Hinweis statt Schreibfeld im archivierten Kanal ---------- */

.tm-archiv-hinweis {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: var(--fs-fein); color: var(--tsoft);
}
.tm-archiv-hinweis span { flex: 1; min-width: 200px; }

/* ---------- Kanalauswahl am Telefon ---------- */

.tm-blatt { max-height: 62vh; overflow-y: auto; }
/* Auch hier zwei Knöpfe nebeneinander: Kanal öffnen und Kanal verwalten. Am Telefon ist
   dieses Blatt die einzige Kanalliste, also muss der Weg in die Verwaltung hier liegen. */
.tm-blatt-zeile { display: flex; align-items: center; gap: 2px; }
.tm-blatt-zeile > button:first-child { flex: 1; min-width: 0; }
/* Breite und Polster kommen aus .sheet button (13 px hoch): das Ziel ist damit auch am
   Telefon über 44 px hoch und muss hier nur noch schmal und mittig gestellt werden. */
.tm-blatt-verw { flex: none; width: 46px; justify-content: center; padding-left: 0; padding-right: 0; }
.tm-blatt .tm-blase { margin-left: 0; }
/* Der gerade offene Kanal. app.js hängt dafür die Klasse app-cur an, zu der es in keiner
   der vier Stilvorlagen eine Regel gab: am Telefon sahen im Blatt alle Zeilen gleich aus,
   und dieses Blatt ist dort die EINZIGE Kanalliste. Bewusst auf .tm-blatt beschränkt, das
   App-Blatt in styles.css gehört dem Hüllen-Auftrag. */
.tm-blatt button.app-cur { background: var(--soft); color: var(--lilat); font-weight: 700; }
.tm-blatt-kopf {
  padding: 12px 10px 4px;
  font-size: var(--fs-mikro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tsoft);
}

/* ---------- Kanalfenster ---------- */

.tm-mitglieder {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r2); padding: 8px;
}
.tm-mit {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 8px;
  font-size: var(--fs-text); font-weight: 500; cursor: pointer;
}
.tm-mit:hover { background: var(--soft); }
.tm-mit input { width: auto; flex: none; }

/* ---------- Erwähnungen und Dateien ---------- */

.tm-treffer { display: flex; flex-direction: column; gap: 2px; }
.tm-treffer-zeile {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r2);
}
.tm-treffer-zeile:hover { background: var(--soft); }
.tm-treffer-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-treffer-txt b { font-size: var(--fs-text); font-weight: 700; }
.tm-treffer-txt em { font-style: normal; font-size: var(--fs-mikro); color: var(--tsoft); font-weight: 500; }
.tm-treffer-pfeil { color: var(--tsoft); flex: none; align-self: center; }

.tm-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tm-raster-kachel { display: block; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line); }
.tm-raster-kachel img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.tm-raster-kachel span {
  display: block; padding: 6px 8px;
  font-size: var(--fs-mikro); color: var(--tsoft); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-raster-kachel:hover span { color: var(--lilat); }
.tm-dateiliste { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Telefon (bis 900 px) ----------
   Die Seitenleiste gibt es hier nicht. Ohne die Kanalwahl in der Kopfzeile käme man deshalb
   nie in einen anderen Kanal: der Chat wäre am Telefon unbedienbar. Die Umstellung des
   Fadens auf eine Spalte steht im Block darunter (bis 1150 px), sie wird schon vorher
   gebraucht. */
@media (max-width: 900px) {
  .tm-wrap { gap: 10px; }
  .tm-kopf-chev { display: inline-flex; }
  .tm-kopf { padding: 8px 12px; }
  .tm-liste { padding: 6px 8px 8px; }
  .tm-btr { padding-left: 4px; padding-right: 4px; }
  .tm-hinweis { display: none; }
  /* iOS zoomt beim Fokus in Felder unter 16 px hinein und nicht wieder heraus. */
  .tm-feldbox textarea { font-size: var(--fs-karte); }
  .tm-bild img { max-height: 200px; }
  .tm-akt { top: -12px; right: 4px; }
  /* Am Telefon wird getippt, nicht überfahren: 40 px sind hier das Mindestziel. */
  .tm-akt > button { width: 40px; height: 40px; }
}

/* Faden über der Eingabe statt daneben, und zwar schon ab 1150 px. Zwei Spalten brauchen
   Breite: bei 1024 px (iPad quer, Icon-Leiste und Seitenleiste noch sichtbar) blieben für
   das Gespräch rund 308 px, jede Zeile brach nach wenigen Wörtern um. Dieser Block steht
   bewusst getrennt vom 900-px-Block darüber: dessen übrige Regeln (Hinweis ausblenden,
   16-px-Feld gegen den iOS-Zoom) gehören ans Telefon und nicht an ein Notebook. */
@media (max-width: 1150px) {
  .tm-wrap.mit-faden {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .tm-wrap.mit-faden .tm-faden { grid-row: 1; }
  .tm-wrap.mit-faden .tm-haupt { grid-row: 2; }
  .tm-wrap.mit-faden .tm-haupt .tm-kopf,
  .tm-wrap.mit-faden .tm-haupt .tm-liste,
  .tm-wrap.mit-faden .tm-ans-ende { display: none; }
}

@media (max-width: 480px) {
  .tm-kopf-rechts .chip { display: none; }
  .tm-anh { max-width: 100%; }
}

/* Auf sehr breiten Schirmen darf der Faden mitwachsen, sonst steht er als schmale Säule
   neben einem sehr breiten Strang. */
@media (min-width: 1500px) {
  .tm-wrap.mit-faden { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* Externer Gast (Rolle leadpartner) in der Personenliste und im Kanalkopf — Runde 77.
   Seit ein Leadpartner am Chat teilnimmt, steht er in derselben Liste wie die Kollegen.
   Ohne sichtbaren Unterschied schreibt irgendwann jemand Internes in den falschen Verlauf.
   Bernstein statt Rot: das ist keine Warnung vor der Person, sondern eine Auskunft.
   Farben ausschliesslich aus Variablen (dieselben wie .chip.amber): ein fester Farbwert
   ueberlebt den Nachtmodus und leuchtet dort weiter. */
.tm-extern {
  flex: 0 0 auto; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
  background: var(--amber-soft); color: var(--ambert);
  font-size: var(--fs-mikro); font-weight: 700; letter-spacing: .02em;
}
.tm-kopf .tm-extern { margin-left: 8px; }

/* Bewegung bei neuer Nachricht (Runde 79): die Blase am Kanal huepft. Nur transform. Klasse
   setzt toene.js (zaehlerBewegen) und nimmt sie per Zeitgeber weg — kein animationend. */
@keyframes tm-huepft {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
.tm-blase.tm-huepft { animation: tm-huepft .6s ease-out; }