/* ============================================================
   messages-fix.css   —   Build 085
   Layout-Korrekturen fuer /messages und /messages/{id}

   Eigenstaendige Datei: styles.css bleibt unangetastet.
   Rueckbau = <link> in css_general.blade.php entfernen.

   Alle Selektoren gegen das tatsaechliche Markup geprueft:
     includes/messages-chat.blade.php
     includes/messages-inbox.blade.php
     includes/sidebar-messages-inbox.blade.php
     users/messages.blade.php · users/messages-show.blade.php
   ============================================================ */


/* ------------------------------------------------------------
   1) Chat-Blasen: Breite begrenzen
   Ursache: die gesendete Blase (messages-chat.blade.php Z.48)
   hat nur "w-auto float-right" und damit keine Breitengrenze -
   eine lange Zeile laeuft ueber die volle Fensterbreite.
   .wrapper-msg-left/-right haben bereits max-width:500px,
   der float-right-Fall hatte keine.
   ------------------------------------------------------------ */
.container-msg .message {
  max-width: 500px;
}

/* ------------------------------------------------------------
   2) Inbox-Filter-Pills: umbrechen statt abschneiden
   Ursache: "btn-group d-flex" mit mr-3 + flex-fill passt in
   col-md-3 nicht - "Oldest" wird abgeschnitten.
   ------------------------------------------------------------ */
.wrapper-msg-inbox .btn-group.d-flex {
  flex-wrap: wrap;
  gap: .4rem;
}

.wrapper-msg-inbox .inbox-filter-btn {
  margin-right: 0 !important;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
  white-space: nowrap;
  flex: 1 1 auto;
}

/* btn-group entfernt bei mittleren Elementen die Radien -
   mit Abstand dazwischen sieht das falsch aus */
.wrapper-msg-inbox .btn-group > .inbox-filter-btn {
  border-radius: 50rem !important;
}

/* ------------------------------------------------------------
   3) Inbox-Kopf: Ueberschrift wird oben angeschnitten
   Ursache: "align-top" auf dem h5 zusammen mit den Bootstrap-
   Heading-Margins zieht den Text ueber die Containerkante.
   ------------------------------------------------------------ */
.wrapper-msg-inbox .h4,
.wrapper-msg-inbox .h5 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

/* ------------------------------------------------------------
   4) NEU: Konversationsliste kompakter
   Ursache: .item-chat traegt p-4 (24px rundum), dazu 50px-Avatar
   -> rund 150px Zeilenhoehe, es passen nur vier Eintraege ins
   Bild. Mit den Werten unten sind es acht bis neun.
   ------------------------------------------------------------ */
.wrapper-msg-inbox .item-chat {
  padding: .85rem 1rem !important;
}

.wrapper-msg-inbox .item-chat .media-object {
  width: 44px !important;
  height: 44px !important;
}

.wrapper-msg-inbox .item-chat .media-heading {
  margin-bottom: .15rem !important;
}

/* ------------------------------------------------------------
   5) NEU: Loeschen-Button an den Blasenrand
   Sitzt sonst am Fensterrand statt an der Nachricht.
   ------------------------------------------------------------ */
.container-msg .btn-removeMsg {
  right: .25rem;
}

/* ------------------------------------------------------------
   6) Mobil
   Konservativ gehalten - ohne Screenshots nur Breite und
   Zeilenabstand, keine strukturellen Eingriffe.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .container-msg .message {
    max-width: 85%;
  }

  .wrapper-msg-inbox .item-chat {
    padding: .7rem .85rem !important;
  }

  .wrapper-msg-inbox .item-chat .media-object {
    width: 40px !important;
    height: 40px !important;
  }
}


/* ------------------------------------------------------------
   OPTIONAL - nur aktivieren, falls die Ueberschrift "Messages"
   nach Regel 3 immer noch angeschnitten ist. Dann liegt die
   Ursache nicht an den Margins, sondern an einer Ueberdeckung
   durch die fixierte Navigationsleiste. Kommentarzeichen unten
   entfernen und den Wert bei Bedarf anpassen (Mobil nutzt 78px).

@media (min-width: 992px) {
  .wrapper-msg-inbox {
    padding-top: 90px !important;
  }
}

   ------------------------------------------------------------ */