/* ============================================
   typing_indicator.css — Bereich: typing_indicator
   ============================================ */
.chat-typing{
  /* ---- "schreibt…"-Indikator (Typing Indicator) ---- */
  /* Kompakt gehalten (18px): Der Slot ist permanent reserviert, damit der
     Messages-Viewport beim Ein-/Ausblenden konstant bleibt — er darf aber
     nicht viel Luft zwischen letzter Nachricht und Composer lassen. */
  min-height: 18px;
  padding: 2px 16px 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1;
  border-top: 1px solid var(--border-light);
  box-sizing: border-box;
}

/* Die Zeile reserviert ihren Platz IMMER (Konstanter 18px-Slot über dem
   Composer, der das untere Padding der Nachrichtenliste ersetzt — insgesamt
   bleibt der Abstand zur letzten Nachricht konstant ~20px). Nur der Inhalt
   wird bei leerem Zustand ausgeblendet. Würde die Höhe beim Ein-/Ausblenden
   schwanken (display:none), schrumpft/wächst der Messages-Viewport → der Chat
   rutscht beim Tippen hoch bzw. verrutscht beim Senden. (Gleiches Muster wie
   die Chat-Pinned-Bar, die ihre Nav/Counter per visibility:hidden
   platzreserviert.) */
.chat-typing[hidden]{
  display: flex;
  visibility: hidden;
}

.chat-typing__text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-typing__dots{
  flex-shrink: 0;
}

.chat-typing__dots i{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing__dots i:nth-child(2){
  animation-delay: 0.15s;
}

.chat-typing__dots i:nth-child(3){
  animation-delay: 0.3s;
}

@keyframes chat-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-3px);
        opacity: 1;
    }
}