/* AI-Inbox (dev/ai-inbox/BAUPLAN.md A5, 13.10.2026) — eigene Datei, nutzt nur die Farbwerte aus style.css (:root),
   damit Hell/Dunkel automatisch stimmt. Farbe ist Hinweis, nie Fläche: Bereichsbalken + zarter Schein am Rand.
   Zustände (Kette + Linie): Füllung trägt den Zustand, Form ebenso — nicht nur Farbe. */

:root {
  --ik-gruen: #3f9f6b;          /* erledigt — gedämpft, nicht Ampel */
  --ik-gruen-soft: rgba(63,159,107,0.16);
  --ik-rot: #c8584f;
  --ik-bernstein: #d39a2c;
  --ik-grau: var(--text-tertiary);
}

/* ── Ansicht ─────────────────────────────────────────── */
.iv { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.iv-kopf { padding: 14px 22px 8px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--border); }
.iv-titelzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-titel { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; margin: 0; }
.iv-luft { flex: 1; }
.iv-vorb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-tertiary); }
.iv-faecher { display: flex; gap: 4px; flex-wrap: wrap; }
.iv-fach { border: none; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; padding: 6px 10px;
  border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.iv-fach:hover { background: var(--bg-tertiary); }
.iv-fach.an { color: var(--text-primary); font-weight: 600; background: var(--glass-soft); box-shadow: var(--shadow-sm); }
.iv-zahl { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.iv-bereiche { display: flex; gap: 6px; flex-wrap: wrap; }
.iv-bereich { border: 1px solid var(--border); background: none; color: var(--text-secondary); font: inherit; font-size: 12px;
  padding: 3px 10px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.iv-bereich.an { border-color: var(--border-strong); color: var(--text-primary); background: var(--glass-soft); }
.iv-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--b-farbe, var(--text-tertiary)); }
.iv-meldung { font-size: 12px; color: var(--text-secondary); }
.iv-liste { flex: 1; overflow-y: auto; padding: 16px 22px 40px; display: flex; flex-direction: column; gap: 14px; }
.iv-leer { color: var(--text-tertiary); font-size: 13px; padding: 30px 0; text-align: center; }

/* ── Karte ──────────────────────────────────────────── */
.ika {
  position: relative; border-radius: var(--radius-lg); padding: 14px 18px 14px 22px;
  background: var(--glass-soft); backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid var(--border);
  /* zarter Schein in der Bereichsfarbe, nach außen auslaufend */
  box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--ika-farbe) 14%, transparent),
    0 6px 22px -10px color-mix(in srgb, var(--ika-farbe) 45%, transparent);
  max-width: 980px; width: 100%; align-self: center;
}
.ika::before {                /* Bereichsbalken links */
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--ika-farbe);
}
.ika.auf { box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--ika-farbe) 22%, transparent),
  0 10px 32px -12px color-mix(in srgb, var(--ika-farbe) 55%, transparent); }
.ika.phishing::before { background: repeating-linear-gradient(180deg, var(--ika-farbe) 0 6px, var(--ik-rot) 6px 12px); }
.ika.vorb { opacity: .72; }
.ika.kompakt { padding-top: 9px; padding-bottom: 9px; }
.ika-kopf { cursor: pointer; }
.ika-zeile1 { display: flex; align-items: center; gap: 12px; min-height: 22px; }
.ika-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.ika-von { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.ika-etikett { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--badge-amber-bg); color: var(--badge-amber-fg); }
.ika-warn { color: var(--ik-rot); }
.ika-titel { margin: 8px 0 2px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.ika.kompakt .ika-titel { margin: 4px 0 0; font-size: 14px; font-weight: 500; }
.ika-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ika.auf .ika-text { -webkit-line-clamp: unset; }
.ika-vorhaben { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.ika-vorhaben li { font-size: 12.5px; color: var(--text-secondary); padding-left: 14px; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ika-vorhaben li::before { content: '→'; position: absolute; left: 0; color: var(--text-tertiary); }
.ika-rueck { margin: 8px 0 0; font-size: 12.5px; color: var(--badge-amber-fg); display: flex; gap: 6px; align-items: flex-start; }
.ika-schnell { display: flex; gap: 8px; margin-top: 12px; }
.ika-auf { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ika-block { margin-bottom: 12px; }
.ika-block-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin-bottom: 4px; }
.ika-liste { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.ika-warum { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); }
.ika-warum summary { cursor: pointer; color: var(--text-tertiary); }
.ika-fuss { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.ika-code { margin-left: auto; font-size: 11px; color: var(--text-tertiary); font-family: ui-monospace, monospace; }
.ika-fehler { margin-top: 8px; font-size: 12px; color: var(--ik-rot); }
.ika-leise { font-size: 12px; color: var(--text-tertiary); }
.ika-arbeitet { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-tertiary); }
.ika-puls { width: 7px; height: 7px; border-radius: 50%; background: var(--ika-farbe, var(--blue)); animation: ika-puls 1.6s ease-in-out infinite; }
@keyframes ika-puls { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ika-puls { animation: none; opacity: .7; } }

/* ── Knöpfe (Karte + Linie) ─────────────────────────── */
.il-knopf { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--bg-primary); color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 5px; }
.il-knopf:hover:not(:disabled) { background: var(--bg-tertiary); }
.il-knopf:disabled { opacity: .5; cursor: default; }
.il-knopf.il-ja { border-color: color-mix(in srgb, var(--ik-gruen) 55%, transparent); color: var(--ik-gruen); }
.il-knopf.il-nein { color: var(--text-tertiary); }
.il-knopf.an { background: var(--glass-soft); border-color: var(--toggle-active-border); }

/* ── Symbolkette ────────────────────────────────────── */
.ik { display: inline-flex; align-items: center; gap: 0; }
.ik-sym { position: relative; width: 31px; height: 31px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; border: 1.5px solid var(--ik-grau); color: var(--ik-grau); background: transparent; }
.ik-strich { width: 14px; height: 2px; background: var(--border-strong); }
.ik-strich.ik-z-erledigt { background: var(--ik-gruen); }
.ik-sym.ik-z-erledigt { border-color: var(--ik-gruen); color: var(--ik-gruen); background: var(--ik-gruen-soft); }
/* vorbereitet: halb gefüllt — Cali ist fertig, du bist dran */
.ik-sym.ik-z-vorbereitet { border-color: var(--ik-gruen); color: var(--ik-gruen);
  background: linear-gradient(90deg, var(--ik-gruen-soft) 50%, transparent 50%); }
.ik-sym.ik-z-freigegeben { border-color: var(--ik-gruen); color: var(--ik-gruen);
  background: linear-gradient(90deg, var(--ik-gruen-soft) 75%, transparent 75%); box-shadow: 0 0 0 2px var(--ik-gruen-soft); }
.ik-sym.ik-z-geplant { border-style: solid; opacity: .75; }
.ik-sym.ik-z-wartet { border-style: dashed; }
.ik-sym.ik-z-fehlgeschlagen { border-color: var(--ik-rot); color: var(--ik-rot); background: color-mix(in srgb, var(--ik-rot) 14%, transparent); }
.ik-marke { position: absolute; right: -5px; bottom: -4px; font-size: 9.5px; font-weight: 700; line-height: 1;
  padding: 1.5px 3px; border-radius: 4px; background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border-strong); }
.ik-rueck { position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ik-bernstein);
  border: 1.5px solid var(--bg-primary); }

/* ── Arbeitslinie ───────────────────────────────────── */
.il { list-style: none; margin: 6px 0 0; padding: 0; }
.il-punkt { position: relative; padding: 0 0 16px 46px; }
.il-strich { position: absolute; left: 15px; top: -16px; height: calc(100% + 0px); width: 2.5px; background: var(--border-strong); }
.il-strich.erster { top: 15px; height: calc(100% - 15px); }
.il-strich.farbig { background: var(--ik-gruen); }
.il-punkt:last-child .il-strich:not(.erster) { height: 32px; }
.il-punkt:last-child .il-strich.erster { display: none; }
.il-dot { position: absolute; left: 1px; top: 0; width: 31px; height: 31px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; border: 1.5px solid var(--ik-grau); color: var(--ik-grau); background: var(--bg-primary); }
.il-z-erledigt > .il-dot { border-color: var(--ik-gruen); color: #fff; background: var(--ik-gruen); }
.il-z-vorbereitet > .il-dot { border-color: var(--ik-gruen); color: var(--ik-gruen);
  background: linear-gradient(90deg, var(--ik-gruen-soft) 50%, var(--bg-primary) 50%); }
.il-z-freigegeben > .il-dot { border-color: var(--ik-gruen); color: var(--ik-gruen); background: var(--ik-gruen-soft); }
.il-z-wartet > .il-dot { border-style: dashed; }
.il-z-fehlgeschlagen > .il-dot { border-color: var(--ik-rot); color: #fff; background: var(--ik-rot); }
.il-inhalt { min-width: 0; }
.il-kopfzeile { display: flex; align-items: flex-start; gap: 6px; }
.il-kopf { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; padding-top: 6px; }
.il-titel { font-size: 14px; color: var(--text-primary); }
.il-z-verworfen > .il-inhalt .il-titel { text-decoration: line-through; color: var(--text-tertiary); }
.il-r-lesen .il-titel, .il-r-abschluss .il-titel { color: var(--text-secondary); }
.il-unter { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.il-auf { margin-top: 9px; color: var(--text-tertiary); transition: transform .15s; }
.il-auf.offen { transform: rotate(90deg); }
.il-chip { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary); }
.il-chip-rueck { background: var(--badge-amber-bg); color: var(--badge-amber-fg); }
.il-detail { margin-top: 8px; }
.il-leise { font-size: 12px; color: var(--text-tertiary); }
.il-ergebnis, .il-roh { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.5;
  background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 8px 10px; max-height: 260px; overflow: auto; }
.il-roh { font-family: ui-monospace, monospace; font-size: 11.5px; margin-top: 6px; }
.il-link { all: unset; cursor: pointer; font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; display: inline-block; }
.il-link:hover { color: var(--text-secondary); text-decoration: underline; }
.il-aktion { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.il-wer { font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: none;
  color: var(--text-secondary); cursor: pointer; }
.il-stand { font-size: 12px; color: var(--ik-gruen); }
.il-zeile { display: flex; gap: 8px; margin-top: 6px; }

/* Original im Mail-Look: hell, ruhig, wie ein Brief */
.il-mail { background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 8px; }
.il-mail-kopf { font-size: 12px; color: var(--text-tertiary); margin-bottom: 6px; }
.il-mail-text { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; }
.il-mark { background: none; color: inherit; font-weight: 650; }
.il-mark-datum { background: var(--badge-amber-bg); color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 600; }
.il-entwurf .il-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 10px 12px;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--bg-primary); color: var(--text-primary); resize: vertical; }

/* Zeiten, Rückfrage mit Schnellantwort, Anweisung (13.10. abends: Karte schlanker, Interaktion direkt) */
.ika-zeiten { margin-top: 6px; font-size: 11.5px; color: var(--text-tertiary); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ika-dialog { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ika-dialog .ika-rueck { margin: 0; align-items: center; }
.ika-rueck-text { flex: 1; min-width: 0; cursor: text; }
.ika-mehr { color: var(--text-tertiary); }
.ika-mini { font: inherit; font-size: 11.5px; padding: 2px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--bg-primary); color: var(--text-secondary); }
.ika-mini:hover { color: var(--text-primary); }
.ika-anweisung { display: flex; flex-direction: column; gap: 6px; }
.ika-anweisung textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 10px;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--bg-primary); color: var(--text-primary); resize: vertical; }
.ika-anweisung-knoepfe { display: flex; gap: 8px; }
.ika-link { all: unset; cursor: pointer; font-size: 12px; color: var(--text-tertiary); align-self: flex-start; }
.ika-link:hover { color: var(--text-secondary); text-decoration: underline; }
.il-aufruf + .il-aufruf { margin-top: 8px; }
.il-aufruf-kopf { font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; }
.il-knopf.bestaetigen { background: var(--ik-gruen); color: #fff; border-color: var(--ik-gruen); }

/* Angaben am Schritt + gesammelt zurück an Cali */
.ika-hinweis { cursor: pointer; }
.il-dialog { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.il-frage { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--badge-amber-fg); }
.il-frage-text { flex: 1; min-width: 0; }
.ika-mini.an { background: var(--ik-gruen); color: #fff; border-color: var(--ik-gruen); }
.ika-feld { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.45; padding: 7px 10px;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--bg-primary); color: var(--text-primary); resize: vertical; }
.ika-angaben { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ika-angaben-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* In Vorbereitung: eine leise Zeile unter den fertigen Karten */
.iv-vorb-block { max-width: 980px; width: 100%; align-self: center; }
.iv-vorb-kopf { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-tertiary); padding: 4px 0; }
.iv-vorb-liste { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.iv-vorb-liste li { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.iv-vorb-stand { color: var(--text-tertiary); font-size: 11.5px; }

/* Ansicht neben dem Kalender: Trennlinie */
.iv-daneben { border-left: 1px solid var(--border); }

@media (max-width: 700px) {
  .iv-kopf { padding: 10px 14px 6px; }
  .iv-liste { padding: 12px 12px 30px; }
  .ika { padding: 12px 14px 12px 18px; }
  .il-unter { max-width: 180px; }
  .ika-von { max-width: 110px; }
}


/* ── Ein-Knopf-Karte (13.10. spät): Felder, ganze Mail, Hauptknopf, Symbolleiste ── */
.ika-frist { color: var(--badge-amber-fg); }
.ika-felder { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ika-feldzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ika-feldname { min-width: 170px; max-width: 260px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ika-eingabe { flex: 1; min-width: 200px; font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--bg-primary); color: var(--text-primary); }
/* EINE Hervorhebung beim Fokus (Stefan 14.10.: „blau und rot ist übertrieben") — kein Browser-Ring, nur der Rand */
.ika-eingabe:focus, .ika-mailtext:focus, .ika-feld:focus, .ika-eingabe:focus-visible, .ika-mailtext:focus-visible { outline: none; box-shadow: none; }
.ika-eingabe:focus, .ika-feld:focus { border-color: color-mix(in srgb, var(--ika-farbe) 70%, var(--border-strong)); }
.ika-unsichtbar { display: none; }
.ika-hoch { width: auto; padding: 0 10px; gap: 6px; font-size: 12.5px; }
.ika-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ika-anhang { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-primary); text-decoration: none; background: var(--bg-primary); }
.ika-anhang:hover { background: var(--bg-tertiary); }
.ika-anhang.eigen { border-style: dashed; }
.ika-x { all: unset; cursor: pointer; display: inline-flex; color: var(--text-tertiary); margin-left: 2px; }
.ika-mail { position: relative; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-primary); padding: 10px 14px 36px; }
.ika-mail.abgewaehlt { opacity: .5; }
.ika-mail-kopf { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.ika-mailtext { width: 100%; box-sizing: border-box; border: none; background: none; color: var(--text-primary); font: inherit;
  font-size: 14px; line-height: 1.55; resize: none; overflow: hidden; padding: 0; min-height: 60px; }
.ika-mail-ecke { position: absolute; right: 8px; bottom: 6px; display: flex; gap: 2px; }
.ika-hinweisfeld { display: flex; gap: 8px; margin-top: 6px; }
.ika-leiste { display: flex; align-items: center; gap: 4px; margin-top: 12px; }
.ika-leiste-knapp { margin-top: 2px; }
.ika-luft { flex: 1; }
.ika-haupt { font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 16px; border-radius: var(--radius-md); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ik-gruen); background: var(--ik-gruen); color: #fff; }
.ika-haupt:hover:not(:disabled) { filter: brightness(1.06); }
.ika-haupt:disabled, .ika-haupt.aus { opacity: .45; cursor: default; filter: none; }
.ika-haupt.bestaetigen { background: #2f7f55; border-color: #2f7f55; }
.ika-icon { all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); position: relative; }
.ika-icon:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.ika-icon.an { color: var(--text-primary); background: var(--bg-tertiary); }
.ika-icon[disabled] { opacity: .4; cursor: default; }
.ika-icon.ika-klein { width: 26px; height: 26px; }
.ika-meldung { margin-top: 6px; }
.ika-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ika-haken { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--ik-gruen); color: #fff; animation: ika-plopp .35s ease-out; }
@keyframes ika-plopp { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ika.fertig { box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--ik-gruen) 40%, transparent); }
.ika.fertig .ik-sym, .ika.fertig .ik-strich { transition: background .5s, border-color .5s, color .5s; }
.ika-geht { animation: ika-geht .55s ease-in forwards; }
@keyframes ika-geht { to { opacity: 0; transform: translateY(-6px) scale(.98); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .ika-geht, .ika-haken { animation: none; } }

/* Bündel: erledigte Punkte als EIN Knoten, Symbole waagrecht, dieselbe Linie läuft senkrecht weiter (14.10.) */
.il-dot-fertig { border-color: var(--ik-gruen); background: var(--ik-gruen); color: #fff; }
.il-reihe { display: flex; align-items: center; min-height: 31px; flex-wrap: wrap; row-gap: 6px; }
.il-reihe-strich { width: 12px; height: 2px; background: var(--ik-gruen); }
.il-reihe-sym { all: unset; cursor: pointer; width: 29px; height: 29px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; border: 1.5px solid var(--ik-gruen); color: var(--ik-gruen); background: var(--ik-gruen-soft);
  transition: box-shadow .15s, background .15s; position: relative; }
.il-reihe-sym:hover { box-shadow: 0 0 0 3px var(--ik-gruen-soft); }
.il-reihe-sym.gewaehlt { background: var(--ik-gruen); color: #fff; }
.il-reihe-text { margin-left: 12px; font-size: 12.5px; color: var(--text-secondary); }
.il-alle { margin: 0 0 0 10px; }
.il-zusammen { list-style: none; padding: 0 0 6px 46px; }
.il-buendel > .il-inhalt > .il-detail { margin-top: 10px; }

/* Arbeit am offenen Punkt (Felder, Mail) sitzt in der Linie */
.il-inhalt > .ika-felder, .il-inhalt > .ika-mail { margin-top: 8px; }
.ika-fussnote { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* Gespräch mit Cali zur Karte (InboxGespraech.js) */
.ig { margin-top: 12px; }
.ig-zeile { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary);
  padding: 6px 10px; border-radius: var(--radius-md); border: 1px dashed var(--border-strong); }
.ig-zeile:hover { color: var(--text-primary); border-style: solid; }
/* Sprechblase in der Leiste: Bernstein-Punkt, wenn Cali auf dein Ja wartet */
.ika-chat.wartet::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ik-bernstein); border: 1.5px solid var(--bg-primary); }
.ig-auf { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-primary); padding: 8px 10px 10px; }
.ig-kopf { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.ig-zu { margin-left: auto; transform: rotate(-90deg); }
.ig-liste { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px; }
.ig-eintrag { display: flex; flex-direction: column; max-width: 85%; }
.ig-stefan { align-self: flex-end; align-items: flex-end; }
.ig-cali { align-self: flex-start; align-items: flex-start; }
.ig-blase { font-size: 13px; line-height: 1.45; padding: 7px 11px; border-radius: 12px; white-space: pre-wrap; }
.ig-stefan .ig-blase { background: color-mix(in srgb, var(--ika-farbe) 22%, var(--bg-tertiary)); color: var(--text-primary); border-bottom-right-radius: 4px; }
.ig-cali .ig-blase { background: var(--bg-tertiary); color: var(--text-primary); border-bottom-left-radius: 4px; }
.ig-art-ergebnis .ig-blase { background: var(--ik-gruen-soft); }
.ig-ueberholt .ig-blase { opacity: .55; }
.ig-denkt { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); }
.ig-knoepfe { display: flex; gap: 6px; margin-top: 5px; }
.ig-stand { font-size: 11.5px; color: var(--ik-gruen); margin-top: 3px; }
.ig-ausweg { font-size: 12px; color: var(--text-secondary); padding: 4px 2px; }
.ig-eingabe { display: flex; gap: 6px; margin-top: 8px; }

/* Feste Prüfungen am Entwurf (entwurfspruefung.js): was vor dem Senden fehlt */
.ika-fehlt { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; cursor: pointer;
  padding: 5px 12px; border-radius: 999px; border: 1px dashed var(--badge-amber-fg); color: var(--badge-amber-fg); }
.ika-fehlt-leise { cursor: default; border-style: solid; }

/* Beschriftung beim Verweilen (client/tipp.js): Name nach 0,12 s, nach 1,2 s 1–2 Sätze, was passiert */
.tipp { position: fixed; z-index: 9999; pointer-events: none; max-width: 300px; padding: 5px 9px; border-radius: 7px;
  background: var(--text-primary); color: var(--bg-primary); font-size: 12px; line-height: 1.4; box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity .1s; }
.tipp.sichtbar { opacity: 1; }
.tipp-kurz { font-weight: 600; white-space: nowrap; }
.tipp-mehr { max-height: 0; overflow: hidden; opacity: 0; font-weight: 400; transition: max-height .25s ease, opacity .25s ease, margin .25s; white-space: normal; }
.tipp.lang .tipp-mehr { max-height: 8em; opacity: .9; margin-top: 3px; min-width: 220px; }
@media (prefers-reduced-motion: reduce) { .tipp, .tipp-mehr { transition: none; } }

/* Dunkel: Nebenschrift deutlich heller (Stefan 13.10.: „grau auf dunkel anstrengend") — nur in der Inbox */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .iv { --text-secondary: #d3d6db; --text-tertiary: #aeb3bb; --border-strong: rgba(255,255,255,0.22); }
}
:root[data-theme="dark"] .iv { --text-secondary: #d3d6db; --text-tertiary: #aeb3bb; --border-strong: rgba(255,255,255,0.22); }