/* Kurzbeschreibung: Gestaltung von „Im Team besprechen" (workspace-bento-diskussion.js) — das Fenster (Dialog aus
   brand.css: a4h-overlay/a4h-modal, Blasen a4h-blase, Pillen a4h-pill, Felder a4h-field) und das kleine Zeichen oben
   rechts am Bento. Nur Farben aus marke.css, Maße aus der Leiter (Radien 6/9/12/999, Schrift 11–15/20). */

/* ── Zeichen am Bento ── */
.wbd-zeichen {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 700 11px/1 var(--marke-schrift); color: var(--marke-auf-akzent);
  background: var(--marke-akzent); box-shadow: 0 0 0 2px var(--marke-flaeche);
}
.wbd-zeichen.is-ruhig { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 12px; right: 12px; background: var(--marke-text-3); }
.wbd-zeichen.is-frage { background: var(--marke-warn); }
.wbd-zeichen:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }

/* ── Fenster ── */
.wbd-modal, .marke-ui .wbd-modal { width: min(600px, 100%); max-width: 600px; height: min(720px, 88vh); box-sizing: border-box;
  /* marke-ui macht den Dialog zum Raster: ohne minmax(0,1fr) wächst die Spalte auf die Mindestbreite des Inhalts und ragt rechts aus dem Fenster */
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.wbd-modal .a4h-modal-head { flex-wrap: wrap; }
.wbd-modal .a4h-modal-body, .wbd-modal .a4h-modal-foot { min-width: 0; }
.wbd-leute-text { overflow: hidden; text-overflow: ellipsis; }
.wbd-modal .a4h-modal-head { align-items: flex-start; }
.wbd-kopfzeile { flex: 1 1 auto; min-width: 0; }
.wbd-kopfzeile .a4h-h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbd-unter { font-size: 12px; color: var(--marke-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbd-leute { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; padding-top: 2px; }
.wbd-kreis {
  width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--marke-akzent); background: var(--marke-akzent-zart);
}
.wbd-leute-text { font-size: 12px; color: var(--marke-text-2); margin-left: 4px; white-space: nowrap; }

.wbd-verlauf { display: flex; flex-direction: column; gap: 12px; }
.wbd-leer { margin: auto; max-width: 360px; text-align: center; font-size: 13px; color: var(--marke-text-2); }
.wbd-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
.wbd-eintrag.eigen { align-items: flex-end; }
.wbd-eintrag .a4h-blase { white-space: pre-wrap; overflow-wrap: anywhere; }
.wbd-kopf { display: flex; gap: 8px; font-size: 11px; color: var(--marke-text-3); }
.wbd-kopf b { color: var(--marke-text-2); font-weight: 600; }
.wbd-aktionen { display: flex; gap: 8px; opacity: 0; transition: opacity .15s; }
.wbd-eintrag:hover .wbd-aktionen, .wbd-eintrag:focus-within .wbd-aktionen { opacity: 1; }
.wbd-aktionen button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 500 11px var(--marke-schrift); color: var(--marke-text-2);
}
.wbd-aktionen button:hover { color: var(--marke-akzent); text-decoration: underline; }
@media (hover: none) { .wbd-aktionen { opacity: 1; } }

/* Aufgabe / Rückfrage: Hinweis-Karte statt Blase (Systemhinweise sind keine Gesprächsblasen) */
.wbd-hinweis { align-items: stretch; width: 100%; }
.wbd-karte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 9px; background: var(--marke-flaeche); box-shadow: inset 0 0 0 1px var(--marke-linie);
  font-size: 13px; color: var(--marke-text);
}
.wbd-hinweis.an-mich .wbd-karte { box-shadow: inset 0 0 0 1px var(--marke-warn); }
.wbd-karte .wbd-text { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.wbd-karte small { font-size: 12px; color: var(--marke-text-2); }

.wbd-meldung { margin: 0; padding: 4px 16px 0; }
.wbd-unten { flex-direction: column; align-items: stretch; gap: 8px; }
.wbd-eingabe { resize: vertical; min-height: 44px; max-height: 160px; font-family: var(--marke-schrift); }
.wbd-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wbd-luecke { flex: 1 1 auto; }
.wbd-form { display: flex; flex-direction: column; gap: 8px; }
.wbd-form-titel { font-size: 14px; font-weight: 600; color: var(--marke-text); }
.wbd-form .a4h-field-label { display: flex; flex-direction: column; gap: 4px; }
.wbd-form textarea { resize: vertical; font-family: var(--marke-schrift); }
.wbd-zeile { display: flex; flex-wrap: wrap; gap: 12px; }
.wbd-zeile > label { flex: 1 1 180px; min-width: 0; }

@media (max-width: 600px) {
  .wbd-modal { height: 92vh; }
  .wbd-leute-text { display: none; }
  .wbd-kreis:nth-child(n+4) { display: none; }
}