/* Desktop-orientierte Textausrichtung (aus responsive-chat.css) */
.chat-text { text-align: left; display: inline-block; vertical-align: middle; }
.own-message { text-align: left; justify-content: flex-start; align-items: flex-start; }
/* Desktop-only chat styles */

@media (min-width: 821px) {
  /* Desktop: Nachrichten-Container stapelt Nachrichten vertikal */
  #chat-container #chat-messages {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Bubbles linksbündig */
    padding-bottom: 12px !important; /* Abstand, Footer ist fix 50px */
  }

  /* Desktop: Nachrichten-Bubbles sollen nicht die ganze Zeile füllen */
  #chat-container #chat-messages .message-item,
  #chat-container #chat-messages .message,
  #chat-container #chat-messages .chat-message {
    display: inline-block !important;   /* Bubble verhält sich wie Inhalt, nicht zeilenfüllend */
    width: auto !important;
    max-width: 85% !important;          /* lange Nachrichten umbrechen, aber nicht volle Breite */
    box-sizing: border-box !important;
  }

  /* Desktop: Suchleiste + Badge sichtbar lassen, nur globale Liste ausblenden */
  .online-users-section { display: flex !important; }
  #online-users-list { display: none !important; }

  /* Desktop: Nachrichtenzeile (Eingabe) wieder volle Breite
     Überschreibt ältere Regeln aus messages.css (position:fixed, width:calc(100%-300px)) */
  .chat-input-footer .message-form {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0 !important;        /* Padding übernimmt der Footer-Container */
    border-top: 0 !important;     /* Border übernimmt der Footer-Container */
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Container und Zeile auf volle Breite strecken */
  .chat-input-footer .message-input-container { width: 100% !important; flex: 1 1 auto !important; align-items: flex-start !important; }
  /* Eingabezeile auf Desktop schmäler (max 500px) und links ausgerichtet */
  .chat-input-footer .message-input-row { width: 100% !important; max-width: 500px !important; }

  /* Textfeld flexibel aufziehen */
  .chat-input-footer #message-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Buttonleiste unter der Eingabe links ausrichten und ebenfalls max 500px */
  .chat-input-footer .message-form-icons {
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 500px !important;
  }
}