:root {
  /* Vinci-Palette: tiefes Dark-Glas, Indigo-Primary, Purple-Akzent */
  --bg: #0a0a0f;
  --bg-2: #12121c;
  --bg-3: #1a1a28;
  --line: #262640;
  --text: #e7eaf0;
  --text-dim: #8b8fa8;
  --accent: #6366f1;          /* Vinci Indigo */
  --accent-2: #a855f7;        /* Vinci Purple */
  --accent-ink: #ffffff;      /* Text auf Akzent-Flächen (Buttons/Badges) */
  --accent-line: #3a3a66;     /* dezenter Indigo-Rahmen für Akzent-Chips */
  --accent-soft: #181830;     /* dunkler Indigo-Wash für Tiles/Notes */
  --accent-soft-text: #b9bcf0;/* gedämpfter Indigo-Text auf Wash */
  --glow-indigo: rgba(99, 102, 241, 0.10);
  --glow-purple: rgba(168, 85, 247, 0.10);
  --user: #2a2f63;            /* Indigo-getönte User-Bubble */
  --user-text: #eaf2ff;
  --assistant: #161628;
  --danger: #e0607a;
  --radius: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
/* Vinci-Stimmung: dezente radiale Glows über dem ganzen Hintergrund */
body {
  background-image:
    radial-gradient(circle at 15% 0%, var(--glow-indigo) 0%, transparent 45%),
    radial-gradient(circle at 88% 18%, var(--glow-purple) 0%, transparent 48%);
  background-attachment: fixed;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Login-Gate ---------- */
.gate {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(38% 42% at 28% 30%, rgba(99,102,241,0.22) 0%, transparent 70%),
    radial-gradient(42% 46% at 76% 72%, rgba(168,85,247,0.16) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 0%, #101018 0%, var(--bg) 70%);
  padding: 24px;
}
.gate-card {
  width: 100%; max-width: 340px;
  background: rgba(20, 20, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.gate-logo, .brand-logo, .gate-card .gate-logo {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink); font-weight: 800; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}
.gate-card h1 { margin: 0 0 4px; font-size: 22px; font-weight: 650; }
.gate-sub { margin: 0 0 20px; color: var(--text-dim); font-size: 14px; }
.gate-card input {
  width: 100%; padding: 13px 14px; margin-bottom: 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text); font-size: 16px;
  outline: none;
}
.gate-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); }
.gate-card button {
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink); font-weight: 700; font-size: 16px;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.30);
}
.gate-card button:active { transform: scale(0.99); }
.gate-err { color: var(--danger); font-size: 13px; min-height: 18px; margin: 10px 0 0; }

/* ---------- App-Layout ---------- */
.app { display: flex; height: 100%; }

.sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: calc(16px + var(--safe-t)) 12px 12px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand-logo { width: 36px; height: 36px; border-radius: 10px; font-size: 20px; }
.brand-name { font-weight: 650; font-size: 17px; }

/* Desktop-Nav */
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 11px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); font-size: 14.5px; font-weight: 550; text-align: left; width: 100%;
}
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.active { background: rgba(99, 102, 241, 0.12); border-color: var(--accent-line); color: var(--text); }
.nav-item.active .nav-ico { color: var(--accent); filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.7)); }
.nav-ico { width: 18px; text-align: center; font-size: 15px; opacity: 0.9; }

.sidebar-foot {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-dim); padding: 8px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
.dot.on { background: #4caf72; }
.logout {
  margin-left: auto; background: transparent; border: 1px solid var(--line);
  color: var(--text-dim); border-radius: 8px; width: 28px; height: 28px; font-size: 14px;
}

/* ---------- Content / Views ---------- */
.content { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.view { flex: 1; display: none; flex-direction: column; min-height: 0; }
.view.active { display: flex; }

.view-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(14px + var(--safe-t)) 18px 14px;
  border-bottom: 1px solid var(--line); background: var(--bg-2);
  flex-shrink: 0;
}
.view-title { font-weight: 650; font-size: 18px; }
.view-head-tools { display: flex; align-items: center; gap: 8px; }
.refresh-btn {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 9px; width: 34px; height: 34px; font-size: 16px; line-height: 1;
}
.refresh-btn:active { transform: rotate(90deg); }
.refresh-btn.spin { animation: spin 0.6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }
.select {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 7px 10px; font-size: 13.5px; outline: none; max-width: 52vw;
}
.view-body { flex: 1; overflow-y: auto; padding: 16px 16px calc(16px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.loading, .view-err { color: var(--text-dim); text-align: center; padding: 48px 16px; font-size: 14px; }
.view-err { color: var(--danger); }

/* ---------- Dashboard ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.kpi {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 14px; text-align: center;
}
.kpi-num { font-size: 30px; font-weight: 700; line-height: 1; }
.kpi-num.open { color: var(--accent); }
.kpi-num.prog { color: #5b9bd5; }
.kpi-num.done { color: #4caf72; }
.kpi-label { font-size: 11.5px; color: var(--text-dim); margin-top: 7px; text-transform: uppercase; letter-spacing: 0.4px; }

.section-title { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 4px 10px; }
.proj-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; margin-bottom: 9px;
}
.proj-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.proj-name { font-weight: 600; font-size: 14.5px; }
.proj-total { font-size: 12px; color: var(--text-dim); }
.proj-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--bg-3); }
.proj-bar i { display: block; height: 100%; }
.proj-bar .b-open { background: var(--accent); }
.proj-bar .b-prog { background: #5b9bd5; }
.proj-bar .b-done { background: #3a6b4d; }
.proj-legend { display: flex; gap: 14px; margin-top: 9px; font-size: 11.5px; color: var(--text-dim); }
.proj-legend b { color: var(--text); font-weight: 600; }
/* ---------- Wartet-auf-dich (V2.3) ---------- */
.nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
}
/* Dashboard-Tile „Liegt bei dir" */
.waiting-tile {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px;
}
.waiting-tile:active { background: var(--bg-3); }
.waiting-tile.has { border-color: var(--accent-line); background: var(--accent-soft); }
.waiting-tile-ico { font-size: 22px; line-height: 1; opacity: 0.9; }
.waiting-tile-body { flex: 1; display: flex; align-items: baseline; gap: 10px; }
.waiting-tile-num { font-size: 28px; font-weight: 700; line-height: 1; color: var(--text-dim); }
.waiting-tile.has .waiting-tile-num { color: var(--accent); }
.waiting-tile-label { font-size: 13px; color: var(--text-dim); }
.waiting-tile-arrow { font-size: 22px; color: var(--text-dim); line-height: 1; }
/* Wartet-Ansicht */
.waiting-count { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin: 2px 4px 12px; }
.waiting-list { display: flex; flex-direction: column; }
.card.waiting { border-left: 3px solid var(--accent); }
.tag.waiting { color: var(--accent); border-color: var(--accent-line); }
.waiting-empty { text-align: center; padding: 48px 20px; }
.waiting-empty-ico {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #4caf72;
}
.waiting-empty-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.waiting-empty-sub { font-size: 13px; color: var(--text-dim); line-height: 1.55; max-width: 360px; margin: 0 auto; }
.waiting-empty-sub code { background: var(--bg-3); border-radius: 5px; padding: 1px 5px; font-size: 12px; }

.note {
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 11px;
  padding: 12px 14px; font-size: 12.5px; color: var(--accent-soft-text); line-height: 1.5; margin-top: 18px;
}

/* ---------- Tasks-Board ---------- */
.board { display: flex; flex-direction: column; gap: 18px; }
.col-head {
  display: flex; align-items: center; gap: 8px; margin: 0 2px 10px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim);
}
.col-head .pill { background: var(--bg-3); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; font-size: 11px; color: var(--text); }
.col-dot { width: 9px; height: 9px; border-radius: 50%; }
.col-dot.open { background: var(--accent); }
.col-dot.prog { background: #5b9bd5; }
.col-dot.done { background: #4caf72; }

.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px; margin-bottom: 9px; cursor: pointer;
}
.card:active { background: var(--bg-3); }
.card.done { opacity: 0.62; }
.card-title { font-size: 14px; font-weight: 550; line-height: 1.35; }
.card-meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.tag {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim);
}
.tag.proj { color: var(--accent); border-color: var(--accent-line); }
.tag.due { color: #d6a25a; }
.tag.due.overdue { color: var(--danger); border-color: #4a2626; }
.col-empty { color: var(--text-dim); font-size: 13px; padding: 6px 4px 12px; }
.toggle-done {
  width: 100%; background: var(--bg-2); border: 1px dashed var(--line);
  color: var(--text-dim); border-radius: 10px; padding: 10px; font-size: 13px; margin-bottom: 9px;
}

/* ---------- Task-Detail-Sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.sheet-card {
  position: relative; width: 100%; max-width: 560px;
  max-height: 85vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(28px + var(--safe-b));
}
.sheet-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim);
  width: 30px; height: 30px; border-radius: 8px; font-size: 13px;
}
.sheet-title { font-size: 18px; font-weight: 650; line-height: 1.35; margin: 0 30px 12px 0; }
.sheet-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sheet-desc { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
.sheet-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-dim); padding: 6px 0; border-top: 1px solid var(--line); margin-top: 14px; }
.sheet-row span:last-child { color: var(--text); }
.sheet-action {
  display: block; width: 100%; margin-top: 20px;
  padding: 13px 14px; border: none; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px;
}
.sheet-action:active { transform: scale(0.99); }

/* Schnell-Schreiben-Button auf der Card */
.card-write {
  margin-left: auto; flex-shrink: 0;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 8px; width: 30px; height: 26px; font-size: 14px; line-height: 1;
}
.card-write:hover { color: var(--accent); border-color: var(--accent-line); }
.card-write:active { transform: scale(0.94); }

/* ---------- Task-Aktionen (Cards + Sheet) ---------- */
/* Kompakte Icon-Button-Reihe auf der Card; mit Text im Sheet. */
.task-acts {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.task-acts.sheet { margin-top: 12px; gap: 8px; }
.sheet-actions-head {
  margin-top: 20px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700;
}
.task-act {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 8px; min-width: 30px; height: 28px; padding: 0 8px;
  font-size: 13px; line-height: 1; transition: background .12s, border-color .12s, color .12s;
}
.task-act:hover { color: var(--text); border-color: var(--accent-line); }
.task-act:active { transform: scale(0.95); }
.task-act.big { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 600; flex: 1 1 calc(50% - 8px); justify-content: center; }
.task-act.act-start:hover { color: var(--accent); border-color: var(--accent); background: rgba(99,102,241,0.12); }
.task-act.act-done:hover { color: #4caf72; border-color: #3a6b4d; background: rgba(76,175,114,0.12); }
.task-act.act-reopen:hover { color: #5b9bd5; border-color: #3a5a7a; }
.task-act.act-write:hover { color: var(--accent); border-color: var(--accent-line); }
.task-act.act-archive { color: var(--text-dim); }
.task-act.act-archive:hover { color: var(--danger); border-color: #4a2626; background: rgba(224,96,122,0.10); }
.task-act.act-waiting.on {
  color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft);
}
.task-act.act-waiting:hover { color: var(--accent); border-color: var(--accent-line); }
/* Während eine Aktion läuft: Buttons dezent sperren (visuelles Feedback). */
body.action-busy .task-act { opacity: 0.6; pointer-events: none; }

/* Fehler-Toast für fehlgeschlagene Task-Aktionen. */
.task-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px);
  background: var(--danger); border: 1px solid var(--danger); color: #fff;
  padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 700;
  max-width: 90vw; z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.task-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Wissen / Memory ---------- */
.mem-search {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 7px 10px; font-size: 13.5px; outline: none;
  width: 160px; max-width: 38vw;
}
.mem-search:focus { border-color: var(--accent); }
.mem-search::placeholder { color: var(--text-dim); }

.mem-index {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 4px 16px 14px; margin-bottom: 18px;
}
.mem-index-head {
  font-size: 11.5px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.5px; padding: 12px 0 4px; position: sticky;
}
.mem-index-body { font-size: 13px; color: var(--text-dim); line-height: 1.5; max-height: 220px; overflow-y: auto; }
.mem-index-body .md-link { color: var(--accent); text-decoration: none; }
.mem-index-body .md-p { margin: 4px 0; }
.mem-index-body .md-ul { margin: 4px 0; padding-left: 18px; }

.mem-count {
  font-size: 12px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.5px; margin: 2px 4px 12px;
}
.mem-group-head {
  display: flex; align-items: center; gap: 8px; margin: 18px 2px 10px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim);
}
.mem-group-head .pill { background: var(--bg-3); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; font-size: 11px; color: var(--text); }
.mem-list { display: flex; flex-direction: column; }

.mem-card { cursor: pointer; }
.mem-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mem-card .card-title { flex: 1; }
.mem-card-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-top: 8px; }

/* Typ-Farbpunkte + -Badges */
.mem-tag { flex-shrink: 0; }
.col-dot.mem-project, .mem-tag.mem-project { background: transparent; }
.mem-tag.mem-project { color: var(--accent); border-color: var(--accent-line); }
.mem-tag.mem-decision { color: #5b9bd5; border-color: #28384a; }
.mem-tag.mem-reference { color: #7fb389; border-color: #28402f; }
.mem-tag.mem-feedback { color: #c98fc9; border-color: #3a283a; }
.mem-tag.mem-user { color: #d6a25a; border-color: #463520; }
.mem-tag.mem-other { color: var(--text-dim); }
.col-dot.mem-project { background: var(--accent); }
.col-dot.mem-decision { background: #5b9bd5; }
.col-dot.mem-reference { background: #7fb389; }
.col-dot.mem-feedback { background: #c98fc9; }
.col-dot.mem-user { background: #d6a25a; }
.col-dot.mem-other { background: var(--text-dim); }

/* Memory-Detail-Sheet-Inhalt */
.mem-sheet-desc {
  font-size: 13.5px; color: var(--text-dim); line-height: 1.55;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 11px;
}
.mem-sheet-body { font-size: 14px; line-height: 1.6; color: var(--text); word-wrap: break-word; }

/* Mini-Markdown */
.md-h { font-weight: 650; line-height: 1.3; margin: 16px 0 8px; }
.md-h1 { font-size: 18px; }
.md-h2 { font-size: 16px; }
.md-h3 { font-size: 14.5px; }
.md-h4 { font-size: 13.5px; color: var(--text-dim); }
.md-p { margin: 8px 0; }
.md-ul { margin: 8px 0; padding-left: 20px; }
.md-ul li { margin: 3px 0; }
.md-code {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; font-size: 0.88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.md-pre {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; overflow-x: auto; margin: 10px 0;
}
.md-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--text); }
.md-link { color: var(--accent); text-decoration: none; }
.md-link:hover { text-decoration: underline; }
.mem-sheet-body strong { color: var(--text); font-weight: 650; }

/* ---------- Mobile-Tableiste ---------- */
.tabbar { display: none; }

/* ---------- Chat ---------- */
.chat-head-status { font-size: 12px; color: var(--text-dim); }

.messages {
  flex: 1; overflow-y: auto;
  padding: 20px 16px 8px;
  display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.msg { max-width: 78%; padding: 11px 14px; border-radius: var(--radius); font-size: 15.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--user); color: var(--user-text); border-bottom-right-radius: 5px; }
.msg.assistant { align-self: flex-start; background: var(--assistant); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg .meta { display: block; font-size: 11px; color: var(--text-dim); margin-top: 5px; opacity: 0.75; }
.msg-text { white-space: pre-wrap; }      /* User-Text: Zeilenumbrüche erhalten */
/* Gerenderte Markdown-Antwort: pre-wrap des .msg-Containers NICHT erben, sonst
   doppelte Leerzeilen. Kompakte Abstände passend zur Bubble. */
.msg-md { white-space: normal; }
.msg-md > :first-child { margin-top: 0; }
.msg-md > :last-child { margin-bottom: 0; }
.msg-md .md-p { margin: 6px 0; }
.msg-md .md-h { margin: 12px 0 6px; }
.msg-md .md-ul { margin: 6px 0; padding-left: 20px; }
.msg-md .md-ul li { margin: 2px 0; }
.msg-md strong { color: var(--text); font-weight: 650; }
.msg-md .md-link { color: var(--accent-2); text-decoration: underline; }
.msg-md .md-pre { margin: 8px 0; max-width: 100%; }
.empty-hint { color: var(--text-dim); text-align: center; margin: auto; font-size: 14px; padding: 40px; }

.typing {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 24px 10px; font-size: 13px;
  align-self: flex-start;
}
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  animation: bounce 1.3s infinite both;
}
.typing span:nth-child(2) { animation-delay: 0.16s; }
.typing span:nth-child(3) { animation-delay: 0.32s; }
.typing em {
  font-style: normal; margin-left: 8px;
  color: var(--accent-soft-text); font-weight: 550; letter-spacing: 0.1px;
}
@keyframes bounce {
  0%, 70%, 100% { opacity: 0.3; transform: translateY(0) scale(0.85); }
  35%           { opacity: 1;   transform: translateY(-4px) scale(1); }
}

/* Task-Bezug-Chip über dem Composer */
.ctx-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px; padding: 8px 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 11px 11px 0 0; border-bottom: none;
  font-size: 13px; color: var(--accent-soft-text);
}
.ctx-chip-ico { font-size: 13px; line-height: 1; flex-shrink: 0; }
.ctx-chip-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-chip-x {
  flex-shrink: 0; background: var(--bg-3); border: 1px solid var(--accent-line);
  color: var(--text-dim); border-radius: 7px; width: 24px; height: 24px;
  font-size: 12px; line-height: 1;
}
.ctx-chip-x:hover { color: var(--text); }
.ctx-chip-x:active { transform: scale(0.92); }
/* Wenn der Chip sichtbar ist, schließt der Composer oben bündig an. */
.ctx-chip:not(.hidden) + .composer { border-top-color: var(--accent-line); }

.composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + var(--safe-b));
  border-top: 1px solid var(--line); background: var(--bg-2);
}
.composer textarea {
  flex: 1; resize: none; max-height: 140px;
  padding: 11px 14px; border-radius: 18px;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--text); font-size: 16px; line-height: 1.4; outline: none;
}
.composer textarea:focus { border-color: var(--accent); }
.composer button {
  width: 42px; height: 42px; flex-shrink: 0; border: none; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.composer button:disabled { opacity: 0.4; }
.composer button:active:not(:disabled) { transform: scale(0.95); }

/* Mic-Button (Voice-Eingabe) */
.mic-btn {
  background: var(--bg-3) !important; color: var(--text-dim) !important;
  font-size: 18px !important; border: 1px solid var(--line) !important;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.mic-btn:hover:not(:disabled) { color: var(--text) !important; border-color: var(--accent) !important; }
.mic-btn.recording {
  background: var(--danger) !important; color: #fff !important;
  border-color: var(--danger) !important;
  animation: micPulse 1.1s infinite;
}
.mic-btn.busy {
  background: var(--bg-3) !important; color: var(--accent-2) !important;
}
.mic-btn.unsupported { opacity: 0.45; }
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 96, 122, 0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(224, 96, 122, 0); }
}

/* Chat-View muss Spalte sein, damit messages scrollt + composer unten bleibt */
#view-chat.active { display: flex; flex-direction: column; }
#view-chat .messages { flex: 1; min-height: 0; }

/* ---------- Desktop: Tabbar aus, Sidebar an ---------- */
@media (min-width: 721px) {
  .tabbar { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .app { flex-direction: column; }   /* content oben, tabbar unten */
  .sidebar { display: none; }
  .content { min-height: 0; }
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .view-head { padding-left: 16px; padding-right: 16px; }

  /* Tab-Leiste unten */
  .tabbar {
    display: flex; flex-shrink: 0;
    border-top: 1px solid var(--line); background: var(--bg-2);
    padding-bottom: var(--safe-b);
  }
  .tab {
    flex: 1; background: transparent; border: none; color: var(--text-dim);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0 8px; font-size: 10.5px;
  }
  .tab-ico { font-size: 18px; line-height: 1; }
  .tab.active { color: var(--accent); }
  .tab.active .tab-ico { filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.6)); }
  .tab { position: relative; }
  .tab-badge {
    position: absolute; top: 4px; right: 50%; transform: translateX(16px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center;
  }
  .content { padding-bottom: 0; }
}

/* ---------- Projekte / Wissen-Ablage (Phase 3, WRITE) ---------- */
.head-add {
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  border-radius: 9px; padding: 7px 11px; font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.head-add:active { transform: scale(0.97); }
.head-add:disabled { opacity: 0.5; }

.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-tile { margin-bottom: 0; }
.proj-tile-slug { font-size: 11.5px; color: var(--text-dim); margin-top: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Notiz-Formular im Projekt-Sheet */
.wissen-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.wissen-input, .wissen-text {
  width: 100%; background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none;
  font-family: inherit;
}
.wissen-input:focus, .wissen-text:focus { border-color: var(--accent); }
.wissen-input::placeholder, .wissen-text::placeholder { color: var(--text-dim); }
.wissen-text { resize: vertical; min-height: 96px; line-height: 1.5; }
.wissen-form-row { display: flex; align-items: center; gap: 12px; }
.wissen-err { flex: 1; font-size: 12.5px; color: var(--danger); }
.wissen-save { margin-top: 0; width: auto; flex-shrink: 0; padding: 11px 16px; font-size: 14px; }
.wissen-save:disabled { opacity: 0.55; }

/* Dokument-Ingest: Drop-Zone + Status + Hinweis */
.ingest-block { margin: 0 0 22px; }
.ingest-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 18px 16px; border: 1.5px dashed var(--accent-line); border-radius: 12px;
  background: var(--accent-soft); cursor: pointer; text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.ingest-drop:hover, .ingest-drop:focus-visible { border-color: var(--accent); outline: none; }
.ingest-drop.dragover { border-color: var(--accent); background: rgba(99, 102, 241, 0.14); }
.ingest-drop.busy { opacity: 0.6; pointer-events: none; }
.ingest-drop-ico { font-size: 20px; color: var(--accent); line-height: 1; }
.ingest-drop-main { font-size: 14px; color: var(--text); }
.ingest-link { color: var(--accent-soft-text); text-decoration: underline; }
.ingest-drop-sub { font-size: 11.5px; color: var(--text-dim); }
.ingest-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ingest-status { font-size: 12.5px; min-height: 0; margin-top: 10px; line-height: 1.5; }
.ingest-status:empty { margin-top: 0; }
.ingest-status.busy { color: var(--accent-soft-text); }
.ingest-status.ok { color: var(--ok, #5fd0a0); }
.ingest-status.warn { color: #e0b15f; }
.ingest-status.err { color: var(--danger); }
.ingest-warn { color: #e0b15f; }
.ingest-hint {
  margin-top: 11px; font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px;
}
.ingest-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--accent-soft-text); }
.ingest-hint b { color: var(--text); }

.wissen-list-head {
  font-size: 12px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.5px; margin: 4px 2px 10px; border-top: 1px solid var(--line); padding-top: 16px;
}
.wissen-list { display: flex; flex-direction: column; gap: 12px; }
.wissen-note { background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.wissen-note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.wissen-note-file { font-size: 11.5px; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.wissen-note-time { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.wissen-note-body { font-size: 13.5px; }
.wissen-note-body .md-h1 { font-size: 16px; margin: 2px 0 6px; }

/* ===== Funnel-Architekt (Stufe 1) ===== */
.funnel-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.fn-toolbar {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.fn-name { font-weight: 700; font-size: 15px; color: var(--text); }
.fn-sub { font-size: 12px; color: var(--text-dim); }
.fn-empty { padding: 32px 22px; color: var(--text-dim); line-height: 1.6; max-width: 560px; }
.fn-empty b { color: var(--accent-soft-text); font-weight: 650; }

.fn-canvas-wrap { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--glow-purple), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, var(--glow-indigo), transparent 70%),
    var(--bg);
}
.fn-canvas { position: relative; margin: 0 auto; }
.fn-edges { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fn-edge { fill: none; stroke: #6d6a9c; stroke-width: 2; opacity: 0.75; }
.fn-edge-label { fill: var(--text-dim); font-size: 10.5px; font-family: inherit; paint-order: stroke;
  stroke: var(--bg); stroke-width: 3px; }

.fn-node {
  position: absolute; z-index: 1; box-sizing: border-box;
  background: var(--bg-2); border: 1.5px solid var(--accent); border-radius: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35); cursor: pointer; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.fn-node:hover, .fn-node:focus { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.5); outline: none; }
.fn-node-top { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.fn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fn-node-stage { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--text); opacity: .85; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-node-status { font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-3); color: var(--text-dim); white-space: nowrap; }
.fn-node-status.st-live { background: rgba(52,211,153,.16); color: #5be0b0; }
.fn-node-status.st-in-arbeit { background: rgba(245,158,11,.16); color: #f5b54b; }
.fn-node-title { padding: 8px 11px 2px; font-weight: 650; font-size: 13.5px; line-height: 1.25; color: var(--text); }
.fn-node-price { padding: 0 11px; font-size: 12px; font-weight: 700; color: var(--accent-soft-text); }
.fn-node-goal { padding: 5px 11px 11px; font-size: 11px; line-height: 1.4; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Funnel-Sheet (Knoten-Formular) */
.fn-form { gap: 4px; }
.fn-lbl { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .3px; margin-top: 8px; }
.fn-full { width: 100%; }
.fn-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fn-sheet-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 6px; }
.fn-sheet-hint b { color: var(--accent-soft-text); }
.fn-sheet-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.fn-sheet-actions .sheet-action { flex: 1; min-width: 140px; }
.fn-secondary { background: var(--bg-3); color: var(--text); }
.fn-del { background: rgba(224,96,122,.14); color: var(--danger); flex: 0 0 auto; min-width: 110px; }

/* Funnel — Asset-Erzeugung (Stufe 2) */
.fn-node-asset { margin: 0 11px 11px; padding: 5px 8px; border-radius: 8px; font-size: 11px; font-weight: 650;
  background: rgba(99,102,241,.14); color: var(--accent-soft-text); display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-asset-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.fn-asset-head { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 8px; }
.fn-asset-none { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; margin-bottom: 10px; }
.fn-asset-open { width: 100%; text-align: left; background: rgba(99,102,241,.12); border: 1px solid var(--accent-line);
  color: var(--text); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.fn-asset-open:hover { background: rgba(99,102,241,.2); }
.fn-asset-kind { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px;
  border-radius: 999px; background: var(--bg-3); color: var(--text-dim); }
.fn-gen-row { display: flex; gap: 10px; align-items: stretch; }
.fn-gen-row .select { flex: 1; }
.fn-gen-row .sheet-action { flex: 0 0 auto; min-width: 150px; }
.fn-preview-wrap { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.fn-preview { width: 100%; height: 60vh; border: 0; display: block; background: #fff; }
.fn-toast { position: fixed; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translate(-50%, 16px);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 650; font-size: 14px;
  padding: 11px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(99,102,241,.4); z-index: 1000;
  opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.fn-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Brand-Kit-Editor */
.fn-color { display: flex; gap: 8px; align-items: center; }
.fn-color input[type=color] { width: 42px; height: 38px; padding: 2px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg-3); cursor: pointer; flex: none; }
.fn-color .wissen-input { flex: 1; }

/* Funnel — Clip-Player */
.fn-clip-wrap { margin-bottom: 10px; border-radius: 12px; overflow: hidden; background: #000; }
.fn-clip { width: 100%; max-height: 56vh; display: block; background: #000; border-radius: 12px; }

/* Funnel — Vinci-Empfehlung-Panel */
.fn-rec { margin: 12px 18px 0; border: 1px solid var(--accent-line); border-radius: 12px;
  background: linear-gradient(180deg, rgba(99,102,241,.12), rgba(168,85,247,.06)); overflow: hidden; }
.fn-rec-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--accent-soft-text); border-bottom: 1px solid var(--accent-line); }
.fn-rec-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.fn-rec-x:hover { background: var(--bg-3); color: var(--text); }
.fn-rec-body { padding: 12px 16px; font-size: 13px; line-height: 1.5; color: var(--text); max-height: 38vh; overflow-y: auto; }
.fn-rec-body p { margin: 0 0 8px; } .fn-rec-body ul, .fn-rec-body ol { margin: 4px 0 8px; padding-left: 20px; }
.fn-rec-body strong { color: var(--accent-soft-text); }

/* ---------- Klickbare Dashboard-Elemente (UI-Audit 16.08.2026) ---------- */
.kpi { cursor: pointer; }
.kpi:active { background: var(--bg-3); }
.proj-card { cursor: pointer; }
.proj-card:active { background: var(--bg-3); }

/* Status-Chips überm Board */
.status-chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-dim); font-size: 12.5px; padding: 6px 14px; cursor: pointer;
}
.chip.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }

/* Gefiltertes Board: eine Spalte, lesbare Breite */
.board.single { display: flex; flex-direction: column; max-width: 720px; }

/* ---------- Embed-Modus: Webapp läuft im nativen App-Modal ---------- */
/* Die App navigiert per Drawer und öffnet gezielt EINEN Bereich (?view=…) —
   eigene Navigation der Webapp wäre ein zweites Modell obendrauf. */
body.embed .sidebar, body.embed .nav-toggle { display: none !important; }
body.embed .tabbar { display: none !important; }
body.embed .view-head, body.embed .chat-head { padding-left: 16px !important; }

/* ---------- Hell-Modus (Stufe 2, UI-Audit 16.08.2026) ----------
   Gesetzt von app.js: ?theme=hell aus der App (Build 139+), sonst
   prefers-color-scheme. Flächen folgen der Papier-Palette der nativen
   App (farben.ts), der Akzent bleibt Vinci-Indigo. */
body.theme-hell {
  --bg: #f5f0e8;
  --bg-2: #fdfaf4;
  --bg-3: #ece5d8;
  --line: #d8cfbd;
  --text: #1c2b3a;
  --text-dim: #68738a;
  --accent: #4f46e5;
  --accent-2: #9333ea;
  --accent-ink: #ffffff;
  --accent-line: #c7c9f0;
  --accent-soft: #eceafc;
  --accent-soft-text: #4338ca;
  --glow-indigo: rgba(99, 102, 241, 0.08);
  --glow-purple: rgba(168, 85, 247, 0.08);
  --user: #dfe4fb;
  --user-text: #1c2b3a;
  --assistant: #fdfaf4;
  --danger: #b3384f;
}

/* ---------- Konten (Zernio-Verbindungen) ---------- */
.konto-summary { font-size: 13px; color: var(--text-dim); margin: 2px 4px 12px; }
.konto-warn { color: var(--danger); }
.konto-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
}
.konto-card.krank { border-color: var(--danger); }
.konto-ico { font-size: 20px; line-height: 1; }
.konto-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.konto-name { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-meta { font-size: 12px; color: var(--text-dim); }
.konto-status { font-size: 12px; white-space: nowrap; }
.konto-status.ok { color: #4caf72; }
.konto-status.warn { color: var(--danger); font-weight: 600; }
.konto-add {
  display: block; text-align: center; margin-top: 12px; padding: 11px;
  border: 1px dashed var(--line); border-radius: 12px;
  color: var(--accent-soft-text); text-decoration: none; font-size: 13.5px;
}
.konto-add:active { background: var(--bg-2); }

/* ---------- Kontext zum Aufklappen + Nachricht zur Aufgabe (25.08.2026) ----------
   Fabians Auftrag: „Oft ist mir bei den Tasks, die bei mir liegen, nicht klar,
   was zu tun ist. Mir fehlt der Kontext." Ein Tipp auf die Card klappt die drei
   echten Felder aus tasks.db auf (ziel / blocker / naechster_schritt), darunter
   sitzt das Eingabefeld für eine Nachricht zu genau dieser Aufgabe.
   Alle Farben laufen über die Tokens — damit trägt der Hell-Modus mit. */
.ktx-chev {
  margin-left: auto; flex-shrink: 0; color: var(--text-dim); font-size: 13px;
  transition: transform 0.15s ease; display: inline-block;
}
.ktx-chev.auf { transform: rotate(180deg); color: var(--accent); }

/* Einzeilige Blocker-Vorschau auf der zugeklappten „Bei dir"-Karte. */
.ktx-teaser {
  margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.ktx {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);
  cursor: default;
}
.ktx.hidden { display: none; }
.ktx-feld + .ktx-feld { margin-top: 12px; }
.ktx-label {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700; margin-bottom: 3px;
}
.ktx-text {
  font-size: 13.5px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
/* „Was fehlt" ist in der Bei-dir-Ansicht die eigentliche Botschaft. */
.ktx-blocker {
  background: var(--accent-soft); border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 8px 10px;
}
.ktx-blocker .ktx-label { color: var(--accent-soft-text); }
.ktx-leer { font-size: 13px; line-height: 1.5; color: var(--text-dim); }

.ktx-msg { display: flex; gap: 7px; align-items: flex-end; margin-top: 13px; }
.ktx-input {
  flex: 1; min-width: 0; resize: none; font-family: inherit;
  /* 16px wie beim Chat-Composer: darunter zoomt iOS-Safari das Feld beim
     Fokus auf und die Ansicht steht schief. */
  font-size: 16px; line-height: 1.4; max-height: 120px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
}
.ktx-input:focus { outline: none; border-color: var(--accent-line); }
.ktx-input::placeholder { color: var(--text-dim); }
.ktx-send {
  flex-shrink: 0; padding: 9px 14px; border: none; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 650; font-size: 13px; min-height: 36px;
}
.ktx-send:disabled { opacity: 0.55; }
.ktx-send:active { transform: scale(0.97); }

.ktx-quittung { font-size: 12px; margin-top: 6px; min-height: 0; }
.ktx-quittung.ok { color: #4caf72; }
.ktx-quittung.err { color: var(--danger); }

.ktx-mehr {
  margin-top: 10px; background: none; border: none; padding: 4px 0;
  color: var(--accent-soft-text); font-size: 12.5px; text-decoration: underline;
}

/* Im Sheet ist der Block immer offen und braucht keinen eigenen Rahmen. */
.sheet-ktx { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------- Threads (Task 210, 14.09.2026) ----------
   Ein Discord-Thread ist ein eigener Kanal. In der App bekommt er deshalb
   eine eigene Ansicht — Kopf mit Namen und Zurück-Pfeil, darunter derselbe
   Verlauf und dieselbe Eingabe wie im Kanal. Grosse Tap-Ziele (>= 44 px),
   damit das am Telefon mit dem Daumen bedienbar bleibt. */
.chat-head { gap: 8px; }
.chat-head .view-title { flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.chat-channel { margin-left: auto; max-width: 44vw; min-height: 34px; }
.thread-back {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  font-size: 22px; line-height: 1; padding: 0 0 3px;
}
.thread-back:active { transform: scale(0.94); }

.thread-bar { flex-shrink: 0; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.thread-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 10px 18px;
  background: none; border: none; color: var(--text-dim);
  font-size: 13.5px; font-weight: 600; text-align: left;
}
.thread-chevron { display: inline-block; transition: transform 0.15s ease; font-size: 11px; }
.thread-toggle[aria-expanded="true"] .thread-chevron { transform: rotate(90deg); }
.thread-count {
  margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--text-dim); font-size: 11.5px; text-align: center;
}
.thread-count.has-unread { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.thread-list { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; }
.thread-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 9px 12px; text-align: left;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; color: var(--text);
}
.thread-item:active { transform: scale(0.995); border-color: var(--accent-line); }
.thread-item-main { min-width: 0; flex: 1; display: block; }
.thread-item-name { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-item.unread .thread-item-name { color: #fff; }
.thread-item-meta { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.thread-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.thread-dot.aus { background: transparent; }
.thread-empty { color: var(--text-dim); font-size: 13px; padding: 6px 4px 8px; }

/* Kontextmenü an einer Nachricht */
.msg-menu { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.msg-menu.hidden { display: none; }
.msg-menu-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.msg-menu-card {
  position: relative; width: 100%; max-width: 520px;
  margin: 0 10px calc(10px + var(--safe-b));
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.msg-menu-item {
  min-height: 54px; padding: 14px 18px; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line);
  color: var(--text); font-size: 16px;
}
.msg-menu-item:last-child { border-bottom: none; }
.msg-menu-item:active { background: var(--bg-3); }
.msg-menu-cancel { color: var(--text-dim); justify-content: center; text-align: center; }

/* Sheet „Thread starten" */
.thread-quote {
  background: var(--bg-3); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 9px 11px; margin: 0 0 14px;
  font-size: 13px; color: var(--text-dim); line-height: 1.45;
  max-height: 96px; overflow: hidden;
}
.thread-label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.thread-name-input {
  width: 100%; min-height: 46px; padding: 11px 12px; border-radius: 11px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  font-size: 16px; outline: none;
}
.thread-name-input:focus { border-color: var(--accent); }
.thread-err { color: var(--danger); font-size: 13px; margin: 10px 0 0; }
.thread-err.hidden { display: none; }
#threadCreateBtn { margin-top: 14px; width: 100%; }

/* Helles Thema: dieselben Flächen, andere Grundtöne (folgt body.theme-hell). */
body.theme-hell .thread-item.unread .thread-item-name { color: #111; }
.msg-menu-item:disabled { opacity: 0.45; }
.msg-menu-note {
  margin: 0; padding: 0 18px 12px; font-size: 12.5px; line-height: 1.45;
  color: var(--text-dim); border-bottom: 1px solid var(--line);
}
.msg-menu-note.hidden { display: none; }
.msg.menu-offen { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Thread-Ansicht: ohne Kanalauswahl darf der Name die Breite nutzen. */
.chat-head.im-thread .view-title { max-width: calc(100vw - 150px); }

/* ---------- Vorschau-Modus (Task 214, 15.09.2026) ----------
   Seite oder Markdown-Notiz OBEN, Chat mit Aufnahmeknopf bleibt UNTEN sichtbar
   und bedienbar. Höhe per Griff ziehbar; Standard ~58 % der Chat-Höhe. */
.vorschau-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  font-size: 16px; line-height: 1; padding: 0;
}
.vorschau-btn:active { transform: scale(0.94); }
.vorschau-btn.aktiv { border-color: var(--accent); color: var(--accent-soft-text); background: var(--accent-soft); }

.vorschau {
  flex: 0 0 auto; display: flex; flex-direction: column;
  min-height: 120px; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.vorschau-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--line);
  background: var(--bg-2); flex-shrink: 0;
}
.vorschau-titel {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vorschau-modus { display: flex; flex-shrink: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.vorschau-modus.hidden { display: none; }
.vm-btn {
  background: var(--bg-3); border: none; color: var(--text-dim);
  font-size: 11.5px; padding: 6px 9px; min-height: 30px; line-height: 1;
}
.vm-btn.aktiv { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.vorschau-ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 13px; line-height: 1; padding: 0;
}
.vorschau-ico:active { transform: scale(0.94); }

/* Bühne: hier liegt der iframe bzw. die gerenderte Markdown-Notiz.
   touch-action bleibt auto — Pinch-Zoom in der Vorschau wird NICHT abgefangen. */
.vorschau-buehne {
  flex: 1; min-height: 0; position: relative; overflow: auto;
  background: #fff; -webkit-overflow-scrolling: touch; touch-action: auto;
}
body.theme-hell .vorschau-buehne { background: #fff; }
.vorschau-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.vorschau-buehne.desktop { overflow: hidden; }
.vorschau-laden, .vorschau-hinweis {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 20px;
  background: var(--bg-2); color: var(--text-dim); font-size: 13.5px; text-align: center;
}
.vorschau-hinweis a {
  color: var(--accent-ink); background: var(--accent); text-decoration: none;
  padding: 10px 16px; border-radius: 11px; font-size: 14px; font-weight: 600;
}
.vorschau-md {
  position: absolute; inset: 0; overflow-y: auto; padding: 14px 16px 28px;
  background: var(--bg); color: var(--text); font-size: 14.5px; line-height: 1.55;
  -webkit-overflow-scrolling: touch;
}
.vorschau-md .md-img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.vorschau-md .md-hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.vorschau-md .md-quote {
  margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--accent);
  background: var(--bg-2); border-radius: 0 8px 8px 0; color: var(--text-dim);
}
.vorschau-md .md-ol { margin: 8px 0; padding-left: 22px; }
.vorschau-md .md-ol li { margin: 3px 0; }
.vorschau-md .md-task { list-style: none; margin-left: -18px; }
.vorschau-md .md-table-wrap { overflow-x: auto; margin: 12px 0; -webkit-overflow-scrolling: touch; }
.vorschau-md .md-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.vorschau-md .md-table th, .vorschau-md .md-table td {
  border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top;
}
.vorschau-md .md-table th { background: var(--bg-2); font-weight: 650; white-space: nowrap; }
.vorschau-md .md-pre { max-width: 100%; overflow-x: auto; }

/* Griff zum Ziehen der Höhe — bewusst hoch genug für den Daumen (>= 22 px). */
.vorschau-griff {
  flex-shrink: 0; height: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); cursor: row-resize; touch-action: none;
}
.vorschau-griff span { display: block; width: 46px; height: 4px; border-radius: 3px; background: var(--line); }
.vorschau-griff:active span { background: var(--accent); }

/* Bezug-Chip über dem Eingabefeld („Zu: …") */
.bezug-chip { border-radius: 11px; border-bottom: 1px solid var(--accent-line); margin-bottom: 4px; }
.bezug-chip.aus { background: var(--bg-3); border-color: var(--line); color: var(--text-dim); }

/* Vorschau-Chips unter einer Bot-Nachricht */
.prev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.prev-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 5px 10px; min-height: 30px;
  background: var(--bg-3); border: 1px solid var(--accent-line); border-radius: 999px;
  color: var(--accent-soft-text); font-size: 12px; line-height: 1.2;
}
.prev-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prev-chip:active { transform: scale(0.97); }

.vorschau-sheet-hinweis { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 8px 0 0; }
.vorschau-sheet-hinweis code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
#vorschauOeffnenBtn { margin-top: 14px; width: 100%; }
/* Fremde Seite: Chrome feuert auch bei „X-Frame-Options" ein load-Ereignis —
   eine Blockade ist von außen nicht sicher erkennbar. Deshalb steht bei fremden
   Seiten IMMER ein kleiner Ausweg im Bild (Safari fängt den Fall zusätzlich über
   den 4-s-Timeout ab). */
.vorschau-extern-bar {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  padding: 7px 11px; border-radius: 999px; border: 1px solid var(--accent-line);
  background: rgba(18, 18, 28, 0.92); color: var(--accent-soft-text);
  font-size: 11.5px; line-height: 1;
}
.vorschau-extern-bar:active { transform: scale(0.97); }