/* Gemeinsame Basis für public/index.html (Teilnehmer:innen) und
   public/confederate.html (Bedingung 3, Chatpartner:in). Enthält nur, was
   auf beiden Seiten IDENTISCH sein muss - allen voran den Chatbereich
   (#messages/#input/#form/.msg--*), weil das Tippverhalten der
   Konföderierten die Mensch-Baseline der Studie ist: Schriftgröße,
   Zeilenhöhe und Maße dürfen zwischen den beiden Seiten nie auseinander-
   laufen. Seitenspezifisches (Fragebogen, Instruktionen, Auflösung, Warte-
   zustände der Konföderierten-Ansicht) bleibt bewusst in der jeweiligen
   HTML-Datei - hier landet nur, was wirklich von beiden gebraucht wird. */

:root {
  --accent: #2f4b7c;
  --accent-light: #eaeef5;
  --border: #b4bac2;
  --border-light: #dfe3e8;
  --text-muted: #8b9199;
  /* Eigener, dunklerer Ton fuer Text auf disabled-Buttons (Hintergrund
     bleibt --border-light) - --text-muted allein liegt dort unter 4.5:1
     WCAG-AA-Kontrast. #5a6069 auf #dfe3e8 liegt bei ca. 4.9:1. */
  --text-disabled: #5a6069;
  --text-dark: #1a1c20;
  --text-body: #3d4148;
  --card-border: #d8dce1;
  --card-header-bg: #f7f8fa;
  --card-header-border: #e4e7eb;
  --radius: 6px;
}

body { font-family: sans-serif; margin: 40px auto; background: #eef0f3; }
:focus-visible { outline: 2px solid #2f4b7c; outline-offset: 2px; }

/* 560px-Kartenrahmen. public/index.html erreicht dieselben Werte über
   .app-section:not(#section-chat) (dort an die Section-Umschaltung
   gebunden) - confederate.html hat keine Sections und nutzt diese Klasse
   direkt. Beide Selektoren sind bewusst getrennt, die Werte müssen aber
   übereinstimmen. */
.card {
  width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
}
.card-header {
  background: var(--card-header-bg);
  border-bottom: 1px solid var(--card-header-border);
  padding: 11px 22px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

/* Primärer Button. Der Selektor referenziert #section-chat, das es auf
   confederate.html gar nicht gibt - dort greift :not(:where(...)) dann
   einfach für ALLE Buttons, und das ID-gescopte #form button (siehe unten)
   gewinnt trotzdem unabhängig davon, genau wie auf index.html. */
button:not(:where(#section-chat *)) {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
button:not(:where(#section-chat *)):disabled {
  background: var(--border-light);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Standard: unauffälliger Statustext (Verbindungsaufbau, Fehler,
   Rundenende). Der Countdown bekommt per .status--countdown (siehe
   client.js/confederate.js) die größere Akzentfarben-Optik - sonst wirkt
   z. B. "Verbindung wird hergestellt ..." genauso prominent wie die
   verbleibende Zeit. */
#status { font-size: 13px; color: #8b9199; }
#status.status--countdown {
  font-size: 15px;
  font-weight: 500;
  color: #2f4b7c;
  font-variant-numeric: tabular-nums;
}

/* --- Chatbereich: #messages/#input/#form sind auf beiden Seiten dieselbe
   ID mit derselben Bedeutung (Nachrichtenliste/Eingabefeld/Sendeformular) -
   das hier ist die einzige Quelle für ihre Maße, Schriftgröße und
   Zeilenhöhe. Feste Höhe statt max-height: sonst wandert das Eingabefeld
   während der Runde nach unten, je mehr Nachrichten dazukommen. Keine
   transition/animation hier - jede Einblendeverzögerung würde auf die
   simulierte bzw. tatsächliche Antwortlatenz aufaddieren, die gemessen
   wird. --- */
#messages {
  list-style: none;
  padding: 14px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 270px;
  overflow-y: auto;
  background: #f4f6f8;
}
#messages li {
  max-width: 72%;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 16px;
  word-wrap: break-word;
  margin-top: 9px;
}
#messages li:first-of-type { margin-top: 0; }
/* Folgt eine Nachricht derselben Seite direkt auf die vorherige, kleiner
   Abstand statt des Abstands bei Sprecherwechsel (siehe renderMessage in
   client.js/confederate.js, das diese Klasse zusammen mit msg--last
   vergibt). */
#messages li.msg--grouped { margin-top: 3px; }
.msg--self { align-self: flex-end; background: #2f4b7c; color: #fff; }
.msg--other { align-self: flex-start; background: #fff; border: 1px solid #e4e7eb; color: #1a1c20; }
/* Nur die letzte Nachricht einer Gruppe bekommt die abgeflachte Ecke auf
   der Sprecherseite. #messages li davor (ID+Typ, Spezifität 1,0,1) schlüge
   eine reine Zweiklassen-Regel unabhängig von der Reihenfolge - "#messages
   li" hier mit in den Selektor aufgenommen, damit die Spezifität mindestens
   gleichzieht (ID+Typ+2 Klassen). */
#messages li.msg--self.msg--last { border-bottom-right-radius: 5px; }
#messages li.msg--other.msg--last { border-bottom-left-radius: 5px; }

#form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #e4e7eb;
}
#input {
  flex: 1;
  padding: 9px 14px;
  font: inherit;
  font-size: 14px;
  border: 1px solid #c4c9d0;
  border-radius: 20px;
  background: #fff;
}
#input:hover:not(:disabled) { border-color: #5a6069; }
#input:focus {
  outline: none;
  border-color: #2f4b7c;
  box-shadow: 0 0 0 3px rgba(47, 75, 124, 0.15);
}
#input:disabled {
  border-color: #e2e5e9;
  background: #f4f5f7;
  cursor: not-allowed;
}
/* Eigene Regel statt der globalen button:not(:where(#section-chat *)):
   die Pillenform (20px Radius, 9px 18px Padding, 14px Schrift)
   unterscheidet sich bewusst von den Buttons im restlichen Ablauf, auch
   wenn die Akzentfarben identisch sind. Als ID-gescopte Regel gewinnt sie
   unabhängig von der globalen Regel. */
#form button {
  background: #2f4b7c;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
#form button:disabled {
  background: #dfe3e8;
  color: #8b9199;
  cursor: not-allowed;
}

/* Zeile mit Download-Links zu den PDF-Dokumenten (Teilnehmerinformation,
   Einwilligungserklaerungen), auf beiden Seiten gebraucht - vorher zweimal
   ID-gescoped nur in index.html, hier jetzt eine gemeinsame Regel statt
   sie in confederate.html erneut nachzubauen. */
.download-row {
  margin-top: 1rem;
  font-size: 13px;
}
.download-row a {
  color: var(--accent);
}