/*
 * Kideon Assist – Oberfläche der App, unverändert übernommen.
 * Quelle: kideon-cloud apps/kideon/assist/frontend/src/assist/assist.css (Stand ce06c28af, 02.10.2026).
 * Die Assist-Seite zeigt im iPhone die echte App mit diesem CSS. Bei Änderungen in der App hier neu kopieren, nicht anpassen.
 * Anpassungen für die Attrappe (Safe Areas, eingebettet) stehen in public/assist/index.html.
 */

/*
 * Kideon Assist — Chat-Oberfläche (src/assist/).
 *
 * Alles hängt unter .ka, Tokens heißen --ka-* und haben die Werte der
 * Voice-Oberfläche (mobil/styles.css, Handoff V2 Abschnitt 4). Tailwind-
 * Komponenten rendern nie innerhalb von .ka — der button-Reset hier ist
 * unlayered (Regel wie bei .kv-mobil). Bewegung nur über transform/opacity.
 */

.ka {
  --ka-abgang: 260ms;
  --ka-bg: #faf9f7;
  --ka-bg-alt: #f3f1ed;
  --ka-white: #ffffff;
  --ka-navy: #0f2137;
  --ka-navy-mid: #1a3352;
  --ka-text-secondary: #4d5f73;
  --ka-text-muted: #7a8a9a;
  --ka-accent: #c49a6c;
  --ka-accent-deep: #8a6536;
  --ka-accent-tint: rgba(196, 154, 108, 0.08);
  --ka-green: #4a7a4d;
  --ka-red: #c94a3d;
  --ka-green-tint: rgba(74, 122, 77, 0.08);
  --ka-red-tint: rgba(201, 74, 61, 0.07);
  --ka-border: #e5e2dc;
  --ka-border-light: #eeedea;
  --ka-serif: 'Instrument Serif', Georgia, serif;
  --ka-ui: 'DM Sans Variable', 'DM Sans', system-ui, -apple-system, sans-serif;
  --ka-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
  --ka-max: 680px;
  --ka-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ka-bg);
  color: var(--ka-navy);
  font-family: var(--ka-ui);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.ka.ka-eingebettet {
  position: relative;
  inset: auto;
  height: 100%;
}
.ka,
.ka * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.ka :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ka :where(button:disabled) {
  cursor: default;
}
.ka :where(p, h1, h2) {
  margin: 0;
}
.ka .mono {
  font-family: var(--ka-mono);
}
.ka .ka-spalte {
  width: 100%;
  max-width: var(--ka-max);
  margin: 0 auto;
}

/* ─── Kopf ─────────────────────────────────────────────────────────────── */

.ka-kopf {
  flex: none;
  background: var(--ka-bg);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0;
  box-shadow: 0 10px 18px -10px rgba(15, 33, 55, 0.08);
  position: relative;
  z-index: 3;
}
.ka-kopfzeile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}
.ka-marke {
  width: 30px;
  height: 30px;
  display: block;
  flex: none;
}
.ka-name {
  font-family: var(--ka-serif);
  font-size: 24px;
  line-height: 1;
}
.ka-standort {
  font-family: var(--ka-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ka-green);
  margin-top: 3px;
}
.ka-standort.offline {
  color: var(--ka-text-muted);
}
.ka-avatar {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ka-bg-alt);
  border: 1px solid var(--ka-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ka-navy-mid);
}
.ka-chips {
  display: flex;
  gap: 8px;
  padding: 10px 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ka-chips::-webkit-scrollbar {
  display: none;
}
.ka-chip {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ka-white);
  border: 1px solid var(--ka-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ka-navy);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background-color 200ms ease, color 200ms ease;
}
.ka-chip svg {
  display: block;
  flex: none;
  color: var(--ka-accent-deep);
}
/* Zahl und Wort in einer Zeile und einer Schrift: Die Mono-Schrift saß auf
   einer anderen Höhe als DM Sans („offen“ schien zu schweben). Gleich
   breite Ziffern (tabular-nums) halten die Pille trotzdem ruhig. */
.ka-chip-text {
  display: block;
  line-height: 1;
  white-space: nowrap;
}
.ka-chip .zahl {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.ka-chip .rot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ka-red);
}
.ka-chip[aria-pressed='true'] {
  background: var(--ka-navy);
  color: #fff;
  border-color: var(--ka-navy);
}
.ka-chip[aria-pressed='true'] svg {
  color: var(--ka-accent);
}

/* ─── Verlauf ──────────────────────────────────────────────────────────── */

.ka-mitte {
  flex: 1;
  position: relative;
  min-height: 0;
}
.ka-verlauf {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 8px 16px 16px;
}
.ka-verlauf .ka-spalte {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ka-datum {
  font-family: var(--ka-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ka-text-muted);
  text-align: center;
  padding-top: 8px;
}
.ka-leer {
  font-family: var(--ka-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ka-text-secondary);
  text-align: center;
  padding: 48px 12px;
}

@keyframes ka-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ka-k {
  display: flex;
  gap: 10px;
  animation: ka-in 350ms ease both;
}
.ka-k-avatar {
  flex: none;
  display: block;
  width: 26px;
  height: 26px;
  margin-top: 2px;
}
.ka-k-spalte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ka-stempel {
  font-family: var(--ka-mono);
  font-size: 11px;
  color: var(--ka-text-muted);
  margin-bottom: -6px;
  display: flex;
  gap: 10px;
}
.ka-stempel .proaktiv {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ka-accent-deep);
}
.ka-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ka-navy);
  text-wrap: pretty;
}
.ka-punkte {
  display: flex;
  gap: 5px;
  padding: 8px 0;
}
.ka-punkte span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ka-accent);
  animation: ka-dot 1.2s infinite ease-in-out;
}
.ka-punkte span:nth-child(2) {
  animation-delay: 200ms;
}
.ka-punkte span:nth-child(3) {
  animation-delay: 400ms;
}
@keyframes ka-dot {
  0%,
  60%,
  100% {
    transform: none;
    opacity: 0.6;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.ka-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ka-wahl button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--ka-accent);
  background: var(--ka-white);
  font-size: 14px;
  font-weight: 600;
  color: var(--ka-navy);
}
.ka-wahl button:disabled {
  opacity: 0.5;
}
/* Aktions-Töne — ein Muster für Chips und Karten-Knöpfe: Grün schließt ab
   (Erledigt), Kupfer schiebt zeitlich (Morgen, Montag), Rot entfernt
   (Löschen, Nicht buchen). Dezent: Rand und Schrift im Ton, Fläche getönt. */
.ka .ka-ton-erledigen {
  border-color: var(--ka-green);
  background: var(--ka-green-tint);
  color: var(--ka-green);
}
.ka .ka-ton-schieben {
  border-color: var(--ka-accent);
  background: var(--ka-accent-tint);
  color: var(--ka-accent-deep);
}
.ka .ka-ton-entfernen {
  border-color: rgba(201, 74, 61, 0.45);
  background: var(--ka-white);
  color: var(--ka-red);
}
.ka .ka-ton-erledigen::before {
  content: '✓ ';
}
/* „Nicht buchen" als Link, wenn die drei Chips voll sind. */
.ka-wahl .ka-verwerfen {
  border: none;
  background: none;
  padding: 0 6px;
  font-weight: 500;
  color: var(--ka-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ka-n {
  align-self: flex-end;
  max-width: min(300px, 82%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  animation: ka-in 350ms ease both;
}
.ka-blase {
  background: var(--ka-navy);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.ka-sprache {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ka-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  flex: none;
}
.ka-welle {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}
.ka-welle-svg {
  display: block;
  width: 140px;
  height: 24px;
  overflow: visible;
}
.ka-aufnahme .ka-welle-svg {
  width: 100%;
  height: 34px;
}
.ka-dauer {
  font-family: var(--ka-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.ka-transkript {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.ka-n .ka-stempel {
  margin: 0;
}
.ka-wartet {
  color: var(--ka-accent-deep);
}

/* ─── Karten ───────────────────────────────────────────────────────────── */

.ka-karte {
  background: var(--ka-white);
  border: 1px solid var(--ka-border);
  border-radius: 14px;
  overflow: hidden;
  animation: ka-in 350ms ease both;
}
.ka-karte.weg {
  opacity: 0.55;
}
.ka-karte.weg .ka-titel {
  text-decoration: line-through;
}
.ka-karte-kopf {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  text-align: left;
}
.ka-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ka-icon.zeit {
  background: rgba(196, 154, 108, 0.14);
  color: var(--ka-accent-deep);
}
.ka-icon.aufgabe {
  background: var(--ka-bg-alt);
  color: var(--ka-text-secondary);
}
.ka-icon.erledigt {
  background: rgba(74, 122, 77, 0.14);
  color: var(--ka-green);
}
.ka-icon.notiz {
  background: rgba(15, 33, 55, 0.08);
  color: var(--ka-navy-mid);
}
.ka-icon.stand {
  background: none;
  overflow: hidden;
}
.ka-icon-marke {
  display: block;
  width: 100%;
  height: 100%;
}
.ka-karte-text {
  flex: 1;
  min-width: 0;
}
.ka-tag {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--ka-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.ka-tag .rechts {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--ka-text-muted);
}
.ka-tag.zeit {
  color: var(--ka-accent-deep);
}
.ka-tag.aufgabe {
  color: var(--ka-text-secondary);
}
.ka-tag.erledigt {
  color: var(--ka-green);
}
.ka-tag.notiz {
  color: var(--ka-navy-mid);
}
.ka-titel {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ka-karte.erledigt .ka-titel {
  text-decoration: line-through;
  color: var(--ka-text-muted);
}
.ka-unter {
  font-size: 13px;
  color: var(--ka-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ka-chevron {
  flex: none;
  color: var(--ka-text-muted);
  transition: transform 200ms ease;
}
.ka-karte[data-offen='true'] .ka-chevron {
  transform: rotate(180deg);
}
.ka-karte-inhalt {
  padding: 0 12px 12px;
  animation: ka-in 250ms ease both;
}
.ka-feld {
  padding: 9px 0;
  border-top: 1px solid var(--ka-border-light);
}
.ka-feld-k {
  font-family: var(--ka-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ka-text-muted);
}
.ka-feld-v {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ka-navy-mid);
}
.ka-schritte {
  border-top: 1px solid var(--ka-border-light);
  padding-top: 9px;
}
.ka-schritt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}
.ka-kreis {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--ka-border);
  display: grid;
  place-items: center;
}
.ka-kreis.voll {
  background: var(--ka-green);
  border-color: var(--ka-green);
  color: #fff;
}
.ka-schritt .text {
  flex: 1;
  min-width: 0;
}
.ka-mini {
  flex: none;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ka-accent);
  background: var(--ka-accent-tint);
  font-size: 12px;
  font-weight: 600;
  color: var(--ka-accent-deep);
}
.ka-mini.ok {
  border-color: transparent;
  background: none;
  color: var(--ka-green);
}
.ka-aktionen {
  display: flex;
  gap: 8px;
  padding-top: 10px;
}
.ka-aktionen button {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--ka-border);
  background: var(--ka-white);
  font-size: 13px;
  font-weight: 600;
  color: var(--ka-navy-mid);
}

/* ─── Übersicht (Linse über dem Verlauf) ───────────────────────────────── */

.ka-linse {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.ka-dimmer {
  position: absolute;
  inset: 0;
  background: rgba(15, 33, 55, 0.35);
  animation: ka-fade 300ms ease backwards;
  transition: opacity var(--ka-abgang) ease;
}
@keyframes ka-fade {
  from {
    opacity: 0;
  }
}
/* Schublade (`Schublade.tsx`): fährt von oben ein und nach oben weg.
   `backwards` statt `both`, sonst hielte die Animation `transform` fest und
   der Griff könnte die Schublade nicht mit dem Finger verschieben. */
@keyframes ka-sheet {
  from {
    transform: translateY(calc(-100% - 32px));
  }
}
.ka-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ka-bg);
  border-radius: 0 0 28px 28px;
  box-shadow: 0 24px 48px rgba(15, 33, 55, 0.22);
  animation: ka-sheet 380ms cubic-bezier(0.2, 0.85, 0.25, 1) backwards;
  transition:
    transform var(--ka-abgang) cubic-bezier(0.55, 0, 0.8, 0.4),
    height 320ms var(--ka-ease);
  will-change: transform;
}
.ka-linse.zu {
  pointer-events: none;
}
.ka-linse.zu .ka-dimmer {
  opacity: 0;
}
.ka-linse.zu .ka-panel {
  transform: translateY(calc(-100% - 32px));
}
.ka-panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ka-panel-inhalt {
  padding: 8px 20px 0;
}
/* Platz unter dem Inhalt, damit der Griff nichts verdeckt. */
.ka-griff-platz {
  height: 34px;
}
/* Wechsel Chip → Chip: Inhalt blendet über, die Höhe gleitet (Panel). */
@keyframes ka-wechsel {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.ka-wechsel {
  animation: ka-wechsel 240ms var(--ka-ease) backwards;
}
.ka-griff {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140px;
  height: 34px;
  margin-left: -70px;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}
.ka-griff-strich {
  display: block;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: #d8d4cc;
  transition: background 150ms ease, width 150ms ease;
}
.ka-griff:active .ka-griff-strich {
  background: #bdb7ad;
  width: 52px;
}
.ka-eyebrow {
  font-family: var(--ka-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ka-accent-deep);
  margin-top: 8px;
}
.ka-gross {
  font-family: var(--ka-serif);
  font-size: 64px;
  line-height: 1;
  margin: 4px 0 2px;
}
.ka-titel-serif {
  font-family: var(--ka-serif);
  font-size: 36px;
  line-height: 1.1;
  margin: 6px 0 2px;
}
.ka-zaehler {
  font-size: 14px;
  color: var(--ka-text-secondary);
}
.ka-balken {
  height: 6px;
  border-radius: 3px;
  background: var(--ka-bg-alt);
  margin: 12px 0 4px;
  overflow: hidden;
}
.ka-balken i {
  display: block;
  height: 100%;
  background: var(--ka-accent);
  border-radius: 3px;
}
.ka-gruppe {
  font-family: var(--ka-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ka-text-muted);
  margin: 18px 0 4px;
}
.ka-gruppe.rot,
.ka-gruppe.ist-ueberfaellig {
  color: var(--ka-red);
}
.ka-gruppe.ist-heute {
  color: var(--ka-accent-deep);
}
.ka-rot {
  color: var(--ka-red);
  font-weight: 600;
}

/* Aufgaben in der Übersicht: Kreis zum Abhaken (wie Voice V2), Frist farbig
   nach Lage — überfällig rot, heute Kupfer. */
.ka-aufgabe {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  border-bottom: 1px solid var(--ka-border-light);
}
.ka-haken {
  flex: none;
  width: 44px;
  height: 44px;
  margin: 2px 0 0 -8px;
  display: grid;
  place-items: center;
}
.ka-haken-kreis {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--ka-border);
  background: var(--ka-white);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 150ms ease, border-color 150ms ease;
}
.ka-aufgabe.ist-ueberfaellig .ka-haken-kreis {
  border-color: var(--ka-red);
}
.ka-aufgabe.ist-heute .ka-haken-kreis {
  border-color: var(--ka-accent);
}
.ka-aufgabe.ist-erledigt .ka-haken-kreis,
.ka-aufgabe.hakt .ka-haken-kreis {
  background: var(--ka-green);
  border-color: var(--ka-green);
}
.ka-aufgabe.hakt .ka-haken-kreis {
  animation: ka-pop 300ms ease-out;
}
@keyframes ka-pop {
  50% {
    transform: scale(1.18);
  }
}
.ka-aufgabe-haupt {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  text-align: left;
}
.ka-aufgabe-haupt .t {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.ka-aufgabe-haupt .u {
  display: block;
  font-size: 13px;
  color: var(--ka-text-secondary);
  margin-top: 2px;
}
.ka-aufgabe.ist-ueberfaellig .frist {
  color: var(--ka-red);
  font-weight: 600;
}
.ka-aufgabe.ist-heute .frist {
  color: var(--ka-accent-deep);
  font-weight: 600;
}
.ka-aufgabe.ist-erledigt .t,
.ka-aufgabe.hakt .t {
  text-decoration: line-through;
  color: var(--ka-text-muted);
}
.ka-aufgabe.ist-erledigt .u {
  color: var(--ka-text-muted);
}
.ka-prio {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 19px;
  background: var(--ka-accent);
}
.ka-prio.dringend {
  background: var(--ka-red);
}
.ka-zeile {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ka-border-light);
  text-align: left;
}
.ka-zeile .uhr {
  flex: none;
  width: 44px;
  font-family: var(--ka-mono);
  font-size: 12px;
  color: var(--ka-text-muted);
}
.ka-zeile .haupt {
  flex: 1;
  min-width: 0;
}
.ka-zeile .t {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ka-zeile .u {
  font-size: 13px;
  color: var(--ka-text-secondary);
}
.ka-zeile .r {
  flex: none;
  font-family: var(--ka-mono);
  font-size: 12px;
  color: var(--ka-text-muted);
}
.ka-zeile.erledigt .t {
  text-decoration: line-through;
  color: var(--ka-text-muted);
}
.ka-mehr {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ka-text-secondary);
}

/* ─── Composer ─────────────────────────────────────────────────────────── */

.ka-composer {
  flex: none;
  background: var(--ka-bg);
  border-top: 1px solid var(--ka-border-light);
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  position: relative;
  z-index: 3;
}
.ka-composer .ka-spalte {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ka-feldbox {
  flex: 1;
  display: flex;
  align-items: center;
  height: 48px;
  border-radius: 999px;
  background: var(--ka-white);
  border: 1px solid var(--ka-border);
  padding: 0 6px 0 18px;
}
.ka-feldbox input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--ka-navy);
}
.ka-feldbox input::placeholder {
  color: var(--ka-text-muted);
}
.ka-mikro {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ka-navy);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px rgba(196, 154, 108, 0.2), 0 8px 24px rgba(15, 33, 55, 0.28);
  transition: background 200ms var(--ka-ease), box-shadow 200ms var(--ka-ease);
}
.ka-mikro:disabled {
  opacity: 0.5;
}
/* Morph Mikrofon ↔ Senden: beide Symbole liegen übereinander, eins dreht
   und schrumpft weg, das andere kommt. Beim Senden bleibt er Navy (Haupt-
   aktion wie „Sichern"), nur der goldene Mikrofon-Ring fällt weg. */
.ka-mikro-symbol {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition:
    transform 220ms var(--ka-ease),
    opacity 160ms ease;
}
.ka-mikro-symbol.pfeil {
  opacity: 0;
  transform: scale(0.4) rotate(-90deg);
}
.ka-mikro.senden {
  box-shadow: 0 8px 24px rgba(15, 33, 55, 0.28);
}
.ka-mikro.senden .ka-mikro-symbol.mic {
  opacity: 0;
  transform: scale(0.4) rotate(90deg);
}
.ka-mikro.senden .ka-mikro-symbol.pfeil {
  opacity: 1;
  transform: none;
}
/* Aufnahmeleiste: wächst aus dem Mikrofon nach links und fährt bei
   Abbrechen/Senden genauso dorthin zurück (`.zu`, `useAbgang`). */
@keyframes ka-aufnahme {
  from {
    transform: scaleX(0.18);
    opacity: 0;
  }
}
@keyframes ka-aufnahme-zu {
  to {
    transform: scaleX(0.18);
    opacity: 0;
  }
}
@keyframes ka-composer-auf {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
.ka-aufnahme {
  flex: 1;
  height: 56px;
  border-radius: 999px;
  background: var(--ka-navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 5px 0 6px;
  transform-origin: calc(100% - 28px) center;
  animation: ka-aufnahme 320ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
.ka-aufnahme.zu {
  animation: ka-aufnahme-zu var(--ka-abgang) cubic-bezier(0.55, 0, 0.8, 0.4) both;
}
/* Eingabefeld und Mikrofon kommen nach der Aufnahme weich zurück. */
.ka-composer .ka-feldbox,
.ka-composer .ka-mikro {
  animation: ka-composer-auf 220ms var(--ka-ease) backwards;
}
.ka-abbrechen {
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 600;
}
.ka-aufnahme .ka-welle {
  flex: 1;
  justify-content: center;
}
.ka-aufnahme .timer {
  font-family: var(--ka-mono);
  font-size: 15px;
}
.ka-aufnahme .ka-stopp {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--ka-navy);
  display: grid;
  place-items: center;
  flex: none;
}
.ka-hinweis {
  font-size: 12px;
  color: var(--ka-text-muted);
  text-align: center;
  padding-top: 6px;
}
.ka-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ka *,
  .ka *::before,
  .ka *::after {
    animation-duration: 1ms;
    transition-duration: 1ms;
    scroll-behavior: auto;
  }
}

/* ─── Notiz bearbeiten (Blatt über dem Chat, wie die Übersicht) ────────── */

.ka-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 0 4px;
}
.ka-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ka-form .k {
  font-family: var(--ka-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ka-text-muted);
}
.ka-form input,
.ka-form select,
.ka-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--ka-border);
  border-radius: 12px;
  background: var(--ka-white);
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--ka-navy);
}
/* iOS Safari gibt Datum und Uhrzeit eine eigene Mindestbreite und Höhe —
   ohne das ragt „Tag" über den Rand und „Von" schiebt sich unter „Dauer". */
.ka-form input,
.ka-form select {
  height: 46px;
  line-height: 24px;
}
.ka-form input[type='date'],
.ka-form input[type='time'] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.ka-form input::-webkit-date-and-time-value {
  text-align: left;
  min-height: 24px;
}
.ka-form label {
  min-width: 0;
}
.ka-form textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}
.ka-form input:focus,
.ka-form select:focus,
.ka-form textarea:focus {
  outline: 2px solid var(--ka-accent);
  outline-offset: 1px;
}
.ka-form .ka-schritt-fest {
  font-size: 14px;
  color: var(--ka-text-secondary);
  padding: 4px 2px;
}
.ka-form .knoepfe {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ka-form .knoepfe button {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--ka-border);
  background: var(--ka-white);
  font-size: 14px;
  font-weight: 600;
  color: var(--ka-navy-mid);
}
.ka-form .knoepfe button.primaer {
  background: var(--ka-navy);
  border-color: var(--ka-navy);
  color: #fff;
}
.ka-form .knoepfe button:disabled {
  opacity: 0.5;
}
.ka-form .fehler {
  font-size: 13px;
  color: var(--ka-red);
}
.ka-form-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}