/* Die Passport-Leiste im Toad Messenger.
 *
 * Sie sah nach abgeladenem Formular aus: Titel, zwei ganze Saetze mit
 * Kaestchen davor, drei Knoepfe untereinander -- und sie durfte 42 % der
 * Fensterhoehe fressen, weshalb vom Chat darunter kaum etwas uebrig blieb.
 *
 * Jetzt ist es ein XP-Gruppenrahmen, wie ihn das Passport-Fenster nebenan
 * schon benutzt (css/wallet-profile.css: heller Rahmen, weisser Grund,
 * fette Ueberschrift). Gleiche Familie, gleiche Sprache.
 *
 * ⚠️ Das Markup wird NICHT angefasst. preview/wallet-profile/site-messenger.test.mjs
 * prueft die Kinder ueber ihren Index (children[3], children[6].children[0] …);
 * ein Umbau des DOM haette die Tests gebrochen, ohne dass am Verhalten etwas
 * besser wird. Das Raster unten ordnet dieselben Kinder neu an.
 *
 *   ┌ Passport → Messenger ───────────────────────────────┐
 *   │ [Bild]  Statuszeile …                [Check linked] │
 *   │ ☐ Link this existing public name …   [Link existing]│
 *   │ ☐ Publish my saved Passport avatar … [Publish saved]│
 *   └─────────────────────────────────────────────────────┘
 */
.messenger-passport {
  flex: none;
  display: grid;
  /* Bild | Text | Knopf. Die erste Spalte ist FEST 30px breit -- auch ohne
     Bild. Sonst begaenne die Statuszeile weiter rechts als die beiden
     Kaestchen-Zeilen, und der linke Rand waere ausgefranst. */
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  background: #fff;
  border: 1px solid #a4b8cf;
  border-radius: 4px;
  margin: 6px 6px 0;
  padding: 8px 10px 10px;
  font: 12px/1.45 Tahoma, sans-serif;
  color: #12345a;
}

/* Die Ueberschrift traegt den Rahmen wie eine XP-Legende. */
.messenger-passport > strong:first-child {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #0a3d6e;
  border-bottom: 1px solid #dbe6f3;
  padding-bottom: 5px;
  margin-bottom: 1px;
}

.messenger-passport img {
  grid-column: 1;
  display: block;
  justify-self: center;
  margin: 0;
  border: 1px solid #a4b8cf;
  border-radius: 3px;
  background: #f4f8fd;
}

/* Die Statuszeile ist der einzige Teil, dessen Laenge wir nicht kennen --
   eine lange Fehlermeldung darf den Chat nicht nach unten schieben. Also
   wird SIE gedeckelt, nicht die ganze Leiste. */
.messenger-passport p {
  grid-column: 2;
  margin: 0;
  max-height: 4.4em;
  overflow: auto;
  overflow-wrap: anywhere;
}

/* Kaestchen samt Satz ueber Bild- und Textspalte, der Knopf rechts daneben. */
/* Dasselbe Raster wie oben: das Kaestchen sitzt in derselben 30px-Spalte wie
   das Bild, der Satz beginnt genau dort, wo die Statuszeile beginnt. */
.messenger-passport label {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  /* Derselbe Spaltenabstand wie im aeusseren Raster -- ohne ihn begaennen die
     Saetze 10px vor der Statuszeile, und genau das war vorher der ausgefranste
     Rand. */
  gap: 0 10px;
  margin: 0;
  cursor: pointer;
}
.messenger-passport label input[type="checkbox"] {
  justify-self: center;
  margin: 1px 0 0;
}

/* Alle Knoepfe in dieselbe Spalte und auf dieselbe Breite: eine Kante rechts
   statt drei verschieden lange Knoepfe. */
.messenger-passport button {
  grid-column: 3;
  justify-self: stretch;
  min-width: 132px;
  margin: 0;
  white-space: nowrap;
}
.messenger-passport button:disabled { opacity: .55; cursor: default; }

.messenger-passport [hidden] { display: none !important; }
.messenger-passport[aria-busy="true"] { cursor: progress; }

/* Schmal: der Knopf rutscht unter seinen Satz, statt ihn zu zerquetschen. */
@media (max-width: 620px) {
  .messenger-passport {
    grid-template-columns: 26px minmax(0, 1fr);
    font-size: 11px;
  }
  .messenger-passport label { grid-template-columns: 26px minmax(0, 1fr); }
  .messenger-passport p { grid-column: 2; }
  .messenger-passport label { grid-column: 1 / -1; }
  .messenger-passport button { grid-column: 1 / -1; justify-self: end; min-width: 0; }
}