:root {
  --grund: #ffffff;
  --flaeche: #f5f5f5;
  --linie: #e0e0e0;
  --text: #242424;
  --leise: #616161;
  --akzent: #0f6cbd;
  --akzent-text: #ffffff;
  --susi: #f0f6fc;
  --ich: #e8ebfa;
  --fehler: #b10e1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #1f1f1f;
    --flaeche: #292929;
    --linie: #3d3d3d;
    --text: #f0f0f0;
    --leise: #adadad;
    --akzent: #479ef5;
    --akzent-text: #0a0a0a;
    --susi: #262f3a;
    --ich: #2b2d42;
    --fehler: #f1707b;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--grund);
  color: var(--text);
  font: 14px/1.4 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

.kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
}
.kopf .name { font-weight: 600; font-size: 16px; }
.kopf .status { margin-left: auto; color: var(--leise); font-size: 12px; }

.diese-mail {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}
.diese-mail .betreff {
  font-size: 12px;
  color: var(--leise);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schnell {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  flex-wrap: wrap;
}

.knopf {
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: var(--text);
  cursor: pointer;
}
.knopf:hover { background: var(--flaeche); }
.knopf.haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}
.knopf:disabled { opacity: .5; cursor: default; }
.diese-mail .knopf { width: 100%; }

.verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* NIE SCHRUMPFEN. Der Verlauf ist eine scrollende Flex-Spalte; ohne diese
   Zeile drueckt der Browser Elemente mit overflow:hidden (die Karten) auf
   null Hoehe, sobald der Verlauf voll ist — uebrig blieb nur der Rahmen als
   duenne Linie (Fund 14.10.2026). */
.verlauf > * { flex-shrink: 0; }

.blase {
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.blase.susi { background: var(--susi); align-self: stretch; }
.blase.ich { background: var(--ich); align-self: flex-end; max-width: 85%; white-space: pre-wrap; }
.blase.fehler { color: var(--fehler); background: transparent; border: 1px solid var(--fehler); }
.blase p { margin: 0 0 6px; }
.blase p:last-child { margin-bottom: 0; }
.blase ul, .blase ol { margin: 4px 0; padding-left: 20px; }
.blase table { border-collapse: collapse; font-size: 12px; margin: 4px 0; }
.blase th, .blase td { border: 1px solid var(--linie); padding: 2px 6px; text-align: left; }
.blase a { color: var(--akzent); }

.karte {
  border: 1px solid var(--linie);
  border-radius: 8px;
  overflow: hidden;
  background: var(--grund);
}
.karte.erledigt { opacity: .6; }

.denkt { color: var(--leise); font-style: italic; }

.eingabe {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--linie);
}
.eingabe textarea {
  flex: 1;
  resize: none;
  font: inherit;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: var(--text);
}
.eingabe textarea:focus, .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Adaptive Cards: an den Seitenbereich angepasst */
.karte .ac-adaptiveCard { padding: 14px !important; }

/* Knoepfe umbrechen statt aus dem Seitenbereich zu laufen */
.karte .ac-actionSet {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.karte .ac-actionSet > * { max-width: 100%; }
.karte .ac-pushButton,
.karte .ac-pushButton-disabled {
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: var(--text);
  cursor: pointer;
}
.karte .ac-pushButton.style-positive,
.karte .ac-pushButton.primary {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}
.karte .ac-pushButton.expanded { background: var(--flaeche); }
/* isEnabled: false (#201) — die Bibliothek nimmt dann diese Klasse statt ac-pushButton. */
.karte .ac-pushButton-disabled { opacity: .55; cursor: not-allowed; }
.karte .ac-input, .karte .ac-textInput, .karte .ac-multichoiceInput, .karte select, .karte textarea, .karte input {
  font: inherit;
  font-size: 13px;
  background: var(--grund);
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 4px 6px;
  width: 100%;
}

/* Die drei Punkte, wie in Teams */
.blase.punkte {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 10px 12px;
}
.blase.punkte span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--leise);
  animation: punkt 1.2s infinite ease-in-out;
}
.blase.punkte span:nth-child(2) { animation-delay: .2s; }
.blase.punkte span:nth-child(3) { animation-delay: .4s; }
@keyframes punkt {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .blase.punkte span { animation: none; opacity: .6; }
}

/* Der Schalter "Automatisch" im Kopf */
.schalter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--leise);
  cursor: pointer;
  user-select: none;
}
.kopf .status + .schalter { margin-left: 8px; }
.kopf .status:empty + .schalter { margin-left: auto; }
.kopf .schalter + .schalter { margin-left: 10px; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter .regler {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: var(--linie);
  position: relative;
  transition: background .15s;
}
.schalter .regler::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--grund);
  transition: transform .15s;
}
.schalter input:checked + .regler { background: var(--akzent); }
.schalter input:checked + .regler::after { transform: translateX(12px); }
.schalter input:focus-visible + .regler { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Antippbare Zeilen (selectAction, etwa in "Mein Tag") sehen aus wie ein
   Knopf und verhalten sich so: Hand statt Textcursor, Hintergrund beim
   Drueberfahren, kein Markieren — sonst loest, wer Text markieren will,
   "Vornehmen" aus (Rueckmeldung 21.10.2026). Der Pfeil rechts sagt, dass es
   weitergeht. NUR ZEILEN, NICHT KNOEPFE: Der Renderer gibt auch jedem Knopf
   die Klasse ac-selectable — am 21.10. stand der Pfeil so an "Passt nicht". */
.karte .ac-selectable:not(.ac-pushButton) {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  border-radius: 6px;
  padding-right: 22px !important;
  transition: background .12s;
}
.karte .ac-selectable:not(.ac-pushButton) * { cursor: pointer; }
.karte .ac-selectable:not(.ac-pushButton):hover { background: var(--flaeche); }
.karte .ac-selectable:not(.ac-pushButton):focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.karte .ac-selectable:not(.ac-pushButton)::after {
  content: "›";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--leise);
  font-size: 18px;
  line-height: 1;
}

/* Der kurze Hinweis nach einem Klick auf eine Rufnummer (#147). */
.hinweis-unten {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 72px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--text);
  color: var(--grund);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.hinweis-unten[hidden] { display: none; }

/* Die angeklickte Antwort auf der Karte selbst (#222). */
.karte .quittung { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); font-size: 13px; line-height: 1.4; color: var(--leise); }

/* Haekchen und Auswahl (#228): Die Feldgestaltung oben gilt fuer Textfelder,
   nicht fuer das Haekchen — sonst wird es zu einem grossen leeren Kasten. */
.karte .ac-toggleInput { border: 0; background: none; padding: 0; width: auto;
                         display: flex; align-items: center; gap: 8px; color: var(--text); }
.karte input[type="checkbox"], .karte input[type="radio"] { width: 18px; height: 18px; flex: none; margin: 0;
                                                           padding: 0; accent-color: var(--akzent); }
.karte .ac-toggleInput label, .karte .ac-choiceSetInput-expanded label { color: var(--text); font-size: 13px; }
/* Links in Karten in der Akzentfarbe — dunkelblau auf Dunkel war unlesbar. */
.karte a { color: var(--akzent); }
/* Entschieden (#234): Die Knoepfe sehen auch so aus — kein zweiter Klick. */
.karte.entschieden .ac-pushButton { opacity: .5; pointer-events: none; }