:root {
  --bg: #070a09;
  --surface: #0e1412;
  --surface-2: #141c19;
  --border: #1e2a25;
  --text: #e6ebe8;
  --muted: #8b9892;
  --accent: #22c55e;
  --accent-dim: #16a34a;
  --accent-soft: rgba(34, 197, 94, 0.12);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --warn: #f59e0b;
  --radius: 14px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: #2c3b35; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #04130a; font-weight: 600; }
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.btn-danger { background: var(--danger-soft); border-color: rgba(239,68,68,.4); color: #fca5a5; font-weight: 600; }
.btn-ghost { background: transparent; }
.icon-btn { width: 44px; padding: 0; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(34,197,94,.08), transparent 60%), var(--bg);
}
.login-card {
  width: 100%; max-width: 380px; padding: 32px 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; letter-spacing: .5px;
  border: 1px solid rgba(34,197,94,.35);
}
.brand h1 { font-size: 20px; margin: 0; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; color: var(--muted); }
.input {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.check { display: flex; align-items: center; gap: 10px; margin: 4px 0 20px; color: var(--muted); font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

.login-card .btn-primary { width: 100%; }
.form-error {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--danger-soft); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; font-size: 14px;
}

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

.topbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar .brand { margin: 0; flex: 1; min-width: 0; }
.topbar .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.topbar .brand h1 { font-size: 18px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 12px; white-space: nowrap;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--accent); box-shadow: 0 0 8px rgba(34,197,94,.6); }
.dot.bad { background: var(--danger); }
.dot.warn { background: var(--warn); }

.body { flex: 1; display: flex; min-height: 0; }

.sidenav {
  width: 220px; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border-right: 1px solid var(--border);
}
.nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; text-align: left;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-item:disabled { opacity: .4; cursor: default; }
.nav-item small { margin-left: auto; font-size: 11px; color: var(--muted); }
.nav-spacer { flex: 1; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

/* ---------- Chat ---------- */
.messages { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; padding: 20px 16px 28px; }
.to-bottom {
  position: absolute; right: 18px; bottom: 92px; z-index: 5; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.to-bottom:hover { border-color: var(--accent); color: var(--accent); }
.messages-inner { width: 100%; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.msg { max-width: 85%; padding: 12px 14px; border-radius: 16px; line-height: 1.5; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--accent-soft); border: 1px solid rgba(34,197,94,.3); border-bottom-right-radius: 6px; }
.msg.bot:has(.codeblock, .table-wrap) { width: 85%; }
.msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.msg.error { align-self: flex-start; background: var(--danger-soft); border: 1px solid rgba(239,68,68,.35); color: #fecaca; }
.msg.info { align-self: center; background: transparent; color: var(--muted); font-size: 13px; padding: 4px 10px; }
.msg p { margin: 0 0 8px; }
.msg p:last-child { margin-bottom: 0; }
.msg > :last-child { margin-bottom: 0; }
.msg h3, .msg h4, .msg h5, .msg h6 { margin: 14px 0 6px; line-height: 1.3; }
.msg h3 { font-size: 18px; }
.msg h4 { font-size: 16px; }
.msg h5 { font-size: 15px; }
.msg h6 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.msg > h3:first-child, .msg > h4:first-child, .msg > h5:first-child { margin-top: 2px; }
.msg ul, .msg ol { margin: 6px 0 10px; padding-left: 22px; }
.msg li { margin: 3px 0; padding-left: 4px; }
.msg ul li::marker { color: var(--accent); }
.msg li.sub { margin-left: 20px; list-style-type: circle; }
.msg li.sub::marker { color: var(--muted); }
.msg ol li::marker { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.msg a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.msg hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.msg blockquote {
  margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 8px 8px 0; color: #cfe9d9;
}
.msg code {
  font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  background: var(--bg); border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; font-size: 14px; color: #b7f7cf;
}
.codeblock { margin: 8px 0 10px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #050807; }
.codeblock-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 6px 4px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--muted); font-family: ui-monospace, Consolas, monospace;
}
.copy-btn {
  border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 7px;
  font-size: 12px; padding: 3px 10px; cursor: pointer; min-height: 28px;
}
.copy-btn:hover { color: var(--text); border-color: #2c3b35; }
.copy-btn.done { color: var(--accent); border-color: rgba(34,197,94,.4); }
.msg pre { margin: 0; padding: 12px; overflow-x: auto; line-height: 1.45; }
.msg pre code { border: 0; padding: 0; background: none; color: var(--text); font-size: 13px; white-space: pre; }
.table-wrap { overflow-x: auto; margin: 8px 0 10px; border: 1px solid var(--border); border-radius: 10px; }
.msg table { border-collapse: collapse; width: 100%; font-size: 14px; }
.msg th, .msg td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.msg th.num, .msg td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg tr:last-child td { border-bottom: 0; }
.msg th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 13px; }
.msg tr:last-child td { border-bottom: 0; }

/* ---------- Arbeitsschritte ---------- */
.steps {
  align-self: flex-start; width: min(85%, 640px); border: 1px dashed #2a3a33; border-radius: 12px;
  background: rgba(14, 20, 18, .55); font-size: 14px;
}
.steps summary {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none;
  color: var(--muted); user-select: none;
}
.steps summary::-webkit-details-marker { display: none; }
.steps-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps-icon {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--accent); background: var(--accent-soft);
}
.steps.running .steps-icon { border-color: var(--accent-soft); border-top-color: var(--accent); background: none; animation: spin .9s linear infinite; }
.steps.failed .steps-icon { border-color: var(--danger); background: var(--danger-soft); }
.steps-chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.steps[open] .steps-chev { transform: rotate(45deg); }
.steps.running summary { color: var(--text); }
.steps-list { padding: 2px 12px 10px 12px; display: flex; flex-direction: column; }
.step { display: flex; gap: 10px; position: relative; padding: 5px 0; }
.step::before { content: ""; position: absolute; left: 4px; top: 22px; bottom: -6px; width: 1px; background: var(--border); }
.step:last-child::before { display: none; }
.step-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: var(--muted); }
.step.running .step-dot { background: var(--accent); animation: blink 1.2s infinite; }
.step.ok .step-dot { background: var(--accent); }
.step.fail .step-dot { background: var(--danger); }
.step.thought .step-dot { background: transparent; border: 1px solid var(--muted); }
.step-main { flex: 1; min-width: 0; }
.step.thought .step-text { color: var(--muted); font-style: italic; }
.step.thought .step-text p { margin: 0 0 4px; }
.step-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.step-name { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); }
.step-detail {
  display: block; margin-top: 4px; font-size: 13px; white-space: pre-wrap; word-break: break-all;
  color: #b7f7cf; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px;
  font-family: ui-monospace, Consolas, monospace; width: fit-content; max-width: 100%;
}
.step.fail .step-text { color: #fca5a5; }
.step-result { margin-top: 4px; }
.step-result summary { padding: 2px 0; font-size: 12px; color: var(--muted); }
.step-result summary::before { content: "+ "; }
.step-result[open] summary::before { content: "- "; }
.step-result pre {
  margin: 4px 0 0; max-height: 260px; overflow: auto; padding: 8px 10px; font-size: 12px; line-height: 1.4;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, Consolas, monospace;
}
@keyframes spin { to { transform: rotate(360deg); } }
.msg .meta { margin-top: 6px; font-size: 11px; color: var(--muted); }

.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .3; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.empty { margin: auto; text-align: center; color: var(--muted); max-width: 360px; padding: 24px; }
.empty .brand-mark { margin: 0 auto 14px; width: 54px; height: 54px; font-size: 18px; }
.empty h2 { color: var(--text); font-size: 20px; margin: 0 0 6px; }

.composer {
  padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.composer-inner { max-width: 820px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; max-height: 160px; min-height: 48px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px; outline: none; line-height: 1.4;
}
.composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer .btn { min-height: 48px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 50; max-width: calc(100% - 32px);
}

/* ---------- Notaus und PCs ---------- */
.notaus-top { display: none; min-height: 36px; padding: 0 12px; font-size: 14px; }
.lock-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 12px 16px 0; padding: 10px 14px; border-radius: 12px;
  background: var(--danger-soft); border: 1px solid rgba(239,68,68,.45); color: #fecaca;
}
.lock-banner .btn { min-height: 38px; }
.msg.shot { padding: 6px; }
.msg.shot img { display: block; max-width: 100%; border-radius: 10px; cursor: zoom-in; }

/* ---------- Bestätigungsdialog ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 16px;
}
.modal {
  width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal h3 { margin: 0 0 6px; font-size: 18px; }
.modal-reason { margin: 0 0 12px; color: var(--warn); font-size: 14px; }
.modal-details {
  margin: 0 0 12px; max-height: 40vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-size: 13px;
}
.modal-timer { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.modal-remember { display: flex; gap: 16px; justify-content: center; margin: -4px 0 12px; }
.modal-remember .link-btn { background: none; border: 0; color: var(--muted); font-size: var(--fs-sm, 13px); text-decoration: underline;
  cursor: pointer; padding: 6px 4px; min-height: 36px; }
.modal-remember .link-btn:hover { color: var(--text); }
.s-approval { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border-soft, var(--border)); }
.s-approval-text { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.step-warn { margin-top: 4px; font-size: 12px; color: var(--warn); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-actions .btn { flex: 1; }
.ask-modal { display: flex; flex-direction: column; gap: 14px; }
.ask-head { display: flex; gap: 12px; align-items: flex-start; }
.ask-head h3 { margin: 0; }
.ask-icon {
  width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid rgba(34,197,94,.35);
}
.ask-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.ask-hint { margin: 3px 0 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.ask-modal .input:focus { border-color: var(--accent); }
.ask-modal .modal-actions { margin-top: 2px; }

/* ---------- Dashboard ---------- */
.dashboard { flex: 1; overflow-y: auto; padding: 20px 16px; }
.dash-inner { max-width: 1100px; margin: 0 auto; }
.dash-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.dash-head h2 { margin: 0; font-size: 20px; flex: 1; }
.dash-head h2 + .reload-btn { order: 0; }
.dash-updated { color: var(--muted); font-size: 13px; }
.dash-tiles-menu { position: relative; }
.dash-tiles-menu summary { list-style: none; min-height: 38px; }
.dash-tiles-menu summary::-webkit-details-marker { display: none; }
.dash-tiles-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 10px 14px 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.dash-tiles-list .check { margin: 0 0 10px; color: var(--text); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px;
  grid-auto-rows: 4px; grid-auto-flow: row dense; align-items: start; }
.dash-grid > .tile { align-self: start; }
.tile-wide { grid-column: span 2; }
.tile-full { grid-column: 1 / -1; }
@media (max-width: 760px) { .tile-wide, .tile-full { grid-column: auto; } }

/* Phase 5: KI-Anbieter, Projekte, GitHub, Claude */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.5;
  border: 1px solid var(--border); color: var(--muted); background: var(--bg); white-space: nowrap; }
.badge.ok { color: var(--accent); border-color: rgba(34,197,94,.4); }
.badge.warn { color: #fbbf24; border-color: rgba(245,158,11,.45); }
.badge.info { color: #7dd3fc; border-color: rgba(56,189,248,.4); }
.badge.muted-badge { opacity: .85; }
.badge-link { text-decoration: none; cursor: pointer; }
.badge-link:hover { color: var(--text); border-color: #3a4a43; }
.dev-empty { margin: 4px 0; font-size: 14px; }
.ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ai-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); min-width: 0; }
.ai-row.off { opacity: .55; }
.ai-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-count { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-lines { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 13px; }
.ai-lines dt { color: var(--muted); }
.ai-lines dd { margin: 0; overflow-wrap: anywhere; }
.ai-lines dd.bad { color: #fca5a5; }
.ai-lines dd.warn { color: #fbbf24; }
.ai-models { margin-top: 6px; font-size: 12px; overflow-wrap: anywhere; }
.proj-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.proj-pc { margin: 12px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.proj-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.proj { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); min-width: 0; }
.proj[open] { border-color: #34443d; }
.proj summary { list-style: none; cursor: pointer; padding: 9px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.proj summary::-webkit-details-marker { display: none; }
.proj-top { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0; }
.proj-name { font-size: 15px; }
.proj-branch { font-size: 12px; font-family: ui-monospace, Consolas, monospace; }
.proj-badges { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.proj-badges:empty { display: none; }
.proj-commit { font-size: 13px; display: flex; min-width: 0; }
.proj-commit-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.proj-commit span:last-child { flex: none; }
.proj-body { padding: 0 12px 10px; font-size: 13px; }
.proj-sub { margin: 10px 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.proj-todos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.proj-todos code { font-size: 12px; color: var(--muted); }
.proj-links { margin-top: 8px; font-size: 12px; overflow-wrap: anywhere; }
.proj-links a, .gh-issues a, .gh-repos a { color: var(--accent); text-decoration: none; }
.proj-links a:hover, .gh-issues a:hover, .gh-repos a:hover { text-decoration: underline; }
.proj-more { margin-top: 10px; width: 100%; }
.gh-issues, .gh-repos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.gh-issues li, .gh-repos li { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gh-issues li a, .gh-repos li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-issues .muted, .gh-repos .muted { font-size: 13px; }
.claude-pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px; align-items: start; }
.claude-pc > .tile-note { grid-column: 1 / -1; }
@media (max-width: 760px) { .claude-pc { grid-template-columns: minmax(0, 1fr); } }
.claude-bars { width: 100%; height: 80px; display: block; margin: 4px 0 12px; }
.legend { margin-top: 12px; font-size: 13px; }
.legend summary { cursor: pointer; color: var(--muted); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.legend summary::-webkit-details-marker { display: none; }
.legend summary::before { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border); font-size: 11px; font-weight: 700; }
.legend summary:hover { color: var(--text); }
.legend dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px 14px; margin: 10px 0 0; }
.legend dt { font-weight: 600; }
.legend dd { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .legend dl { grid-template-columns: 1fr; gap: 2px; } .legend dd { margin-bottom: 6px; } }
.mr-list { margin-top: 6px; }
.mr-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mr-top a { flex: 1; min-width: 0; }
.mr-dl { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text); flex: none; }
.claude-bars .bar-day { fill: rgba(34,197,94,.35); }
.claude-bars .bar-today { fill: var(--accent); }
.claude-bars text { fill: var(--muted); font-size: 11px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-width: 0; }
.tile header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
/* Kacheln einklappen: Tipp auf die Überschrift (gemerkt in localStorage) */
.tile > header h3 { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 8px; }
.tile > header h3::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s; flex: none; }
.tile.folded > header h3::before { transform: rotate(-45deg); }
.tile.folded > header { margin-bottom: 0; }
.tile.folded > :not(header) { display: none !important; }
.note-top { display: none; }
.tile h3 { margin: 0; font-size: 16px; }
.tile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tile-actions .btn { flex: 1; min-width: 110px; }
.tile-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); min-height: 1em; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.kv dt.kv-long { grid-column: 1 / -1; margin-top: 2px; }
.kv dd.kv-long { grid-column: 1 / -1; text-align: left; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: -4px; }
.big-number { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.big-number small { font-size: 16px; color: var(--muted); font-weight: 500; }
.spark { width: 100%; height: 70px; display: block; margin-bottom: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark-area { fill: var(--accent-soft); stroke: none; }
.spark-idle { stroke: var(--border); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.spark-empty { fill: var(--muted); font-size: 12px; }
.bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.bar-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.bar-track { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.bar-fill.warn { background: var(--warn); }
.bar-fill.bad { background: var(--danger); }
.agent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.agent-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); }

/* ---------- Aufgaben ---------- */
.tasks-view { flex: 1; overflow-y: auto; padding: 20px 16px; }
.tasks-inner { max-width: 760px; margin: 0 auto; }
.task-form { display: grid; grid-template-columns: 1.3fr 1fr minmax(150px, .7fr) auto; gap: 10px; }
body:not([data-view="chat"]) .to-bottom { display: none !important; }

/* Eigenes Auswahlmenü (fancySelect in extras.js) */
.fsel { position: relative; min-width: 0; }
.fsel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; text-align: left;
  color: var(--text); font: inherit; transition: border-color .15s;
}
.fsel-btn:hover { border-color: #3a4a43; }
.fsel.open .fsel-btn, .fsel-btn:focus-visible { border-color: var(--accent); }
.fsel-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-btn.fsel-empty .fsel-value { color: var(--muted); }
.fsel-caret { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.fsel.open .fsel-caret { transform: rotate(180deg); stroke: var(--accent); }
.fsel-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55); animation: fsel-in .12s ease-out;
}
.fsel.fsel-right .fsel-panel { left: auto; right: 0; }
@keyframes fsel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fsel-search {
  width: 100%; min-height: 36px; margin-bottom: 6px; padding: 0 10px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; outline: none;
}
.fsel-search:focus { border-color: var(--accent); }
.fsel-list { max-height: 320px; overflow-y: auto; outline: none; }
.fsel-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fsel-opt {
  position: relative; padding: 8px 30px 8px 10px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fsel-opt.nested { padding-left: 16px; }
.fsel-opt:hover, .fsel-opt.active { background: rgba(34,197,94,.12); }
.fsel-opt.selected { color: var(--accent); font-weight: 600; }
.fsel-opt.selected::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.task-form .input { min-height: 46px; }
.task-group { margin: 22px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.task-group.overdue { color: #fca5a5; }
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.task {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: opacity .2s;
}
.task.overdue { border-color: rgba(239,68,68,.4); }
.task.pending { opacity: .45; }
.task-check {
  width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; border-radius: 7px; cursor: pointer;
  border: 2px solid #3a4a43; background: transparent; position: relative;
}
.task-check:hover { border-color: var(--accent); }
.task.done .task-check { background: var(--accent); border-color: var(--accent); }
.task.done .task-check::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #04130a; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.task-main { flex: 1; min-width: 0; }
.task-text { overflow-wrap: anywhere; line-height: 1.4; }
.task.done .task-text { color: var(--muted); text-decoration: line-through; }
.task-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.task-meta:empty { display: none; }
.task.overdue .task-meta { color: #fca5a5; }
.task-del {
  width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 8px; color: var(--muted);
  display: grid; place-items: center; padding: 0; cursor: pointer; opacity: .6;
}
/* Ein Kreuz-Symbol für alle Schließen- und Löschen-Knöpfe, sitzt genau mittig */
.x-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; display: block; }
.attach-item .x-icon { width: 11px; height: 11px; stroke-width: 3; }
.pin-x .x-icon { width: 11px; height: 11px; }
.reload-btn { min-height: 38px; height: 38px; width: 38px; color: var(--muted); }
.reload-btn:hover { color: var(--text); }
.reload-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reload-btn.spinning svg { animation: spin .6s linear infinite; }
.task-del:hover { opacity: 1; color: #fca5a5; background: var(--danger-soft); }
.task-empty { margin-top: 24px; }
.task-done { margin-top: 24px; }
.task-done summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 6px 0; margin-bottom: 8px; }
.nav-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--danger); color: #fff !important; font-size: 11px; font-weight: 700;
}
.task-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.task-mini li { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.task-mini-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.task-mini li .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-mini li.overdue .muted { color: #fca5a5; }

/* Erinnerung im Chat */
.msg.reminder {
  align-self: stretch; max-width: 100%; background: var(--accent-soft); border: 1px solid rgba(34,197,94,.45);
  border-radius: 14px;
}
.reminder-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.reminder-head strong { color: var(--accent); }
.reminder-text { font-size: 18px; font-weight: 600; margin-bottom: 10px; overflow-wrap: anywhere; }
.reminder-actions { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.reminder-actions .btn { min-height: 38px; }

/* ---------- Handy ---------- */
.bottomnav { display: none; }

@media (max-width: 760px) {
  .sidenav { display: none; }
  .bottomnav {
    display: flex; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Wie eine App-Leiste: Symbol und kleine Beschriftung, aktiv in Grün mit kleinem Strich, kein Kasten */
  .bottomnav .nav-item { position: relative; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 500; min-height: 58px;
    padding: 8px 4px 6px; justify-content: center; align-items: center; flex: 1; text-align: center; background: none;
    border-radius: 0; color: var(--muted); }
  .bottomnav .nav-item:hover { background: none; }
  .bottomnav .nav-item.active { background: none; color: var(--accent); }
  .bottomnav .nav-item.active::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px;
    margin-left: -14px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .bottomnav .nav-ico { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; }
  .bottomnav .nav-item.active .nav-ico { stroke-width: 2.2; }
  .bottomnav .nav-dot { position: absolute; top: 8px; left: 50%; margin-left: 8px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
  .bottomnav .nav-dot.hidden { display: none; }
  /* Oben keine Punkte: Verbindung nur zeigen, wenn sie fehlt; die PCs stehen im Dashboard */
  #pcs { display: none; }
  #conn { display: none; }
  body[data-conn="bad"] #conn, body[data-conn="wait"] #conn { display: inline-flex; }
  body[data-conn="bad"] #conn { border-color: rgba(239,68,68,.5); color: #fca5a5; }
  body[data-conn="bad"] #conn .label, body[data-conn="wait"] #conn .label { display: inline; }
  .topbar .brand h1 { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .composer { padding-bottom: 12px; }
  .msg { max-width: 92%; }
  .msg.bot { max-width: 100%; } /* Antworten nutzen die ganze Breite, Tabellen passen besser */
  .steps, .msg.bot:has(.codeblock, .table-wrap) { width: 100%; }
  .topbar .pill .label { display: none; }
  .notaus-top { display: inline-flex; }
  .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .topbar .icon-btn { width: 38px; min-width: 38px; flex-shrink: 0; } /* nicht mehr auf 23 px zusammenquetschen */
  .topbar .notaus-top { flex-shrink: 0; padding: 0 12px; }
  #pcs-label { display: none; } /* nur der Punkt, der Name steht im Dashboard */
  /* iPhone zoomt in Felder unter 16 px hinein */
  .input, textarea, select, .fsel-search, .fsel-btn { font-size: 16px; }
  /* Aufgaben: erst nur eine Zeile, Wann und Projekt klappen beim Antippen auf */
  .task-form { grid-template-columns: 1fr auto; }
  .task-form #task-text { grid-column: 1; }
  .task-form button[type="submit"] { grid-column: 2; grid-row: 1; }
  .task-form > :not(#task-text):not(button[type="submit"]) { grid-column: 1 / -1; }
  .task-form:not(:focus-within):not(.has-text):not(:has(.fsel.open)) > :not(#task-text):not(button[type="submit"]) { display: none; }
  .task-form + .tile-note { display: none; }
  .note-top { display: inline-flex; }
  .topbar .brand-mark { flex-shrink: 0; }

  #provider { display: none; }
  .dashboard { padding: 14px 12px; }
  .dash-grid { grid-template-columns: 1fr; }
  .tasks-view { padding: 14px 12px; }
}

/* Live-Steuerung: Vorschaubild am Arbeitsschritt */
.step-shot { display: block; margin-top: 6px; width: min(260px, 100%); }
.step-shot img { display: block; width: 100%; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; }

/* Fotos im Chat */
.attach-btn { cursor: pointer; flex-shrink: 0; min-height: 48px; }
.attach-preview { max-width: 820px; margin: 0 auto 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.attach-item { position: relative; width: 64px; height: 64px; }
.attach-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.attach-item button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: var(--danger); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.msg-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.msg-photos img { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; }
.msg.user:has(.msg-photos):empty { padding: 6px; }

/* ---------- Gespeicherte Chats: Seitenleiste rechts ---------- */
.side-panel {
  width: 360px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-left: 1px solid var(--border);
}
.side-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--border); }
.side-head h3 { flex: 1; margin: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-head #saved-back { margin-left: -8px; }
.saved-list { list-style: none; margin: 0; padding: 10px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.saved-empty { padding: 10px 6px; font-size: 14px; line-height: 1.5; }
.saved-item {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}
.saved-item:hover { border-color: var(--accent); }
.saved-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-item .muted { font-size: 12px; }
.saved-view { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.saved-view .msg { max-width: 92%; font-size: 14px; }
.side-foot { padding: 10px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.side-foot .btn { min-height: 38px; padding: 0 16px; }
.side-foot #saved-delete { color: #fca5a5; }
.side-foot #saved-delete:hover { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); }

/* ---------- Umschalter Aufgaben | Obsidian ---------- */
/* ---------- Sprechen (Phase 6) ---------- */
.voice-view { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 16px; }
.voice-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.voice-stage { position: relative; width: 200px; height: 200px; display: grid; place-items: center; margin-top: 10px; }
.voice-level { position: absolute; inset: 30px; border-radius: 50%; background: var(--accent-soft);
  border: 1px solid rgba(34,197,94,.35); opacity: .25; transition: transform .08s linear, opacity .08s linear; }
.voice-mic { position: relative; width: 120px; height: 120px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); cursor: pointer; display: grid; place-items: center;
  transition: background .2s, color .2s, box-shadow .2s; }
.voice-mic:hover { color: var(--text); border-color: #34443d; }
.voice-mic svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-mic .stop-icon { display: none; fill: currentColor; stroke: none; }
.voice-view:not([data-state="aus"]) .voice-mic { background: var(--accent); color: #04110a; border-color: var(--accent);
  box-shadow: 0 0 0 8px rgba(34,197,94,.12), 0 0 40px rgba(34,197,94,.35); }
.voice-view:not([data-state="aus"]) .mic-icon { display: none; }
.voice-view:not([data-state="aus"]) .stop-icon { display: block; }
.voice-view[data-state="verstehe"] .voice-mic, .voice-view[data-state="denke"] .voice-mic { animation: voice-pulse 1.1s ease-in-out infinite; }
.voice-view[data-state="spreche"] .voice-level { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.45); }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 16px rgba(34,197,94,.05), 0 0 50px rgba(34,197,94,.45); } }
@media (prefers-reduced-motion: reduce) { .voice-mic { animation: none !important; } .voice-level { transition: none; } }
.voice-mute { position: absolute; right: 0; bottom: 12px; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.voice-mute[hidden] { display: none; }
.voice-mute svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.voice-mute .muted-ico { display: none; }
.voice-mute.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.voice-mute.on .muted-ico { display: block; }
.voice-mute.on .unmuted { display: none; }
.voice-view.is-muted .voice-level { opacity: .15 !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.voice-state { margin: 0; font-size: 18px; color: var(--text); min-height: 1.4em; text-align: center; }
.voice-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.voice-opts .seg-btn:disabled { opacity: .45; cursor: not-allowed; }
.voice-barge { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 40px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 14px; cursor: pointer; }
.voice-barge:has(input:checked) { color: var(--text); }
.voice-barge input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.voice-test { min-height: 40px; }
.voice-log { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.voice-log > li.muted { text-align: center; font-size: 14px; line-height: 1.5; padding: 0 10px; }
.vline { display: grid; grid-template-columns: 62px 1fr auto; gap: 4px 10px; align-items: baseline; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 15px; line-height: 1.45; }
.vline.me { background: var(--surface-2); }
.vline.info { grid-template-columns: 1fr; color: var(--muted); font-size: 14px; }
.vline.info .vwho, .vline.info .vmeta { display: none; }
.vwho { font-size: 13px; font-weight: 700; color: var(--muted); }
.vline.bob .vwho { color: var(--accent); }
.vtext { overflow-wrap: anywhere; }
.vmeta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vtimes { grid-column: 2 / -1; }
.vtimes strong { color: var(--accent); font-weight: 600; }
.voice-foot { text-align: center; }
@media (max-width: 760px) {
  .voice-stage { width: 170px; height: 170px; }
  .voice-mic { width: 104px; height: 104px; }
  .vline { grid-template-columns: 1fr; }
  .vmeta { justify-self: start; }
  .vtimes { grid-column: 1; }
}

.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; }
.seg-btn { border: 0; background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; min-height: 34px; }
.seg-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tasks-inner:has(#vault-pane:not(.hidden)) { max-width: 1100px; }

/* ---------- Obsidian-Ansicht ---------- */
.note-new { margin-bottom: 14px; }
.note-new > summary { list-style: none; display: inline-flex; min-height: 40px; }
.note-new > summary::-webkit-details-marker { display: none; }
.note-form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.note-form-row { display: grid; grid-template-columns: 160px 1fr; gap: 10px; }
.note-form textarea { min-height: 96px; padding: 10px 14px; resize: vertical; line-height: 1.45; }
.note-form .check { margin: 0; }
.note-form .btn { align-self: flex-start; }
select.input { appearance: none; cursor: pointer; }
.vault-layout { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
.vault-tree { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; max-height: 70vh; overflow-y: auto; }
.tree-folder > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.tree-folder > summary::-webkit-details-marker { display: none; }
.tree-folder > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s; margin-right: 2px;
}
.tree-folder[open] > summary::before { transform: rotate(45deg); }
.tree-folder > summary:hover { background: var(--surface-2); }
.tree-name { flex: 1; }
.tree-count { font-size: 12px; color: var(--muted); font-weight: 400; }
.tree-folder ul { list-style: none; margin: 0 0 6px 14px; padding: 0 0 0 10px; border-left: 1px solid var(--border); }
.tree-sub > summary { font-weight: 600; font-size: 14px; padding: 5px 8px; color: #cfd8d3; }
.tree-sub > summary::before { width: 6px; height: 6px; }
.tree-sub ul { margin-left: 10px; }
.tree-note {
  width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); cursor: pointer;
  padding: 6px 8px; border-radius: 7px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tree-note:hover { background: var(--surface-2); }
.tree-note.active { background: var(--accent-soft); color: var(--accent); }
.tree-empty { padding: 4px 8px; font-size: 13px; }
.vault-view { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; min-height: 200px; }
.note-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.note-head h3 { margin: 0; font-size: 18px; }
.note-path { font-size: 12px; font-family: ui-monospace, Consolas, monospace; }
/* Gliederung: Oberthemen fett, Punkte mit Strichen wie ein Baum */
.outline { list-style: none; margin: 0; padding: 0; }
.outline .outline { margin-left: 9px; padding-left: 16px; border-left: 1px solid #2c3b35; }
.outline li { position: relative; padding: 3px 0; line-height: 1.5; }
.outline .outline > li::before { content: ""; position: absolute; left: -16px; top: 14px; width: 11px; border-top: 1px solid #2c3b35; }
.outline .outline > li:last-child::after { content: ""; position: absolute; left: -17px; top: 15px; bottom: 0; border-left: 3px solid var(--surface); }
.ol-head > .ol-text { font-weight: 700; color: var(--text); }
.ol-h1 > .ol-text, .ol-h2 > .ol-text { font-size: 16px; color: var(--accent); }
.outline > li.ol-head { margin-top: 10px; }
.outline > li.ol-head:first-child { margin-top: 0; }
.ol-para > .ol-text { color: #cfd8d3; }
.ol-done > .ol-text { color: var(--muted); text-decoration: line-through; }
.ol-text code { font-size: 13px; }
.ol-text a.wl { color: var(--accent); text-decoration: none; border-bottom: 1px dashed rgba(34,197,94,.5); }
.ol-text a { color: var(--accent); word-break: break-all; }
/* Häkchen in Notizen sind Aufgaben: anklickbar wie in der Aufgabenliste */
.ol-task { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.ol-task > .outline { flex-basis: 100%; }
.ol-check {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; border-radius: 5px; cursor: pointer;
  border: 2px solid #3a4a43; background: transparent; position: relative; padding: 0;
}
.ol-check:hover { border-color: var(--accent); }
.ol-check.checked { background: var(--accent); border-color: var(--accent); }
.ol-check.checked::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 9px;
  border: solid #04130a; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ol-check.pending { opacity: .4; }
.ol-due { margin-left: 8px; font-size: 12px; color: var(--muted); }
.ol-due.overdue { color: #fca5a5; }
.note-append .note-append-task { white-space: nowrap; font-size: 13px; color: var(--muted); margin: 0; gap: 8px; min-height: 42px; padding: 0 4px; }
.task-project {
  background: rgba(34,197,94,.12); color: var(--accent); border: 0; border-radius: 6px; padding: 1px 7px;
  margin-right: 6px; font-size: 12px; cursor: pointer;
}
.task-project:hover { background: rgba(34,197,94,.22); }
/* Projekt als Oberpunkt, seine Aufgaben als Unterpunkte mit Strichen */
.task-project-group { list-style: none; }
.task-project-head {
  display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; padding: 6px 2px 4px;
  color: var(--accent); font-weight: 700; font-size: 15px; cursor: pointer; text-align: left;
}
.task-project-head:hover .task-project-name { text-decoration: underline; text-underline-offset: 3px; }
.task-project-count {
  font-size: 12px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.06); border-radius: 999px; padding: 0 7px;
}
.task-sublist { list-style: none; margin: 0 0 4px 9px; padding: 0 0 0 18px; border-left: 1px solid #2c3b35; display: grid; gap: 8px; }
.task-sublist > .task { position: relative; }
.task-sublist > .task::before { content: ""; position: absolute; left: -19px; top: 50%; width: 15px; border-top: 1px solid #2c3b35; }
.task-sublist > .task:last-child::after { content: ""; position: absolute; left: -20px; top: calc(50% + 1px); bottom: -5px; border-left: 3px solid var(--bg); }
/* [[Links]] in BOBs Antworten */
.messages a.wl { color: var(--accent); text-decoration: none; border-bottom: 1px dashed rgba(34,197,94,.5); word-break: normal; }
.note-append { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.note-append .input { min-height: 42px; min-width: 0; }
.note-append input[name=text] { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .side-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(420px, 100%); box-shadow: -12px 0 30px rgba(0,0,0,.5); }
}
@media (max-width: 760px) {
  .side-panel { width: 100%; padding-top: env(safe-area-inset-top); }
  .vault-layout { grid-template-columns: 1fr; }
  .vault-tree { max-height: 45vh; }
  .note-form-row, .note-append { grid-template-columns: 1fr; }
  .to-bottom { bottom: 150px; }
  .dash-head .seg { order: 3; width: 100%; }
  .seg-btn { flex: 1; }
  #save-chat, #saved-toggle { width: 38px; }
}

/* Angeheftete Notizen über dem Eingabefeld */
.pin-bar { max-width: 820px; margin: 0 auto 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.pin-label { color: var(--muted); }
.pin-chip { display: inline-flex; align-items: center; border: 1px solid rgba(34,197,94,.45); background: var(--accent-soft); border-radius: 999px; overflow: hidden; }
.pin-chip button { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 13px; min-height: 28px; }
.pin-open { padding: 0 4px 0 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-x { padding: 0 10px 0 6px; display: inline-grid !important; place-items: center; }
.pin-x:hover { color: #fca5a5; }
.note-head .note-pin { margin-left: auto; min-height: 34px; font-size: 13px; padding: 0 12px; }
.note-head .note-pin.active { color: var(--accent); border-color: rgba(34,197,94,.45); background: var(--accent-soft); }

/* Obsidian als Graph */
.vault-bar { display: flex; justify-content: flex-end; margin-bottom: -40px; }
.vault-graph { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
#graph-svg { display: block; width: 100%; height: calc(100vh - 210px); min-height: 520px; cursor: grab; touch-action: none; user-select: none; }
#graph-svg:active { cursor: grabbing; }
.graph-hint { position: absolute; left: 14px; bottom: 8px; margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; }
.g-edge { stroke: #2f3f39; stroke-width: 1.3; }
.g-link { stroke: rgba(34,197,94,.45); stroke-width: 1.3; stroke-dasharray: 5 5; }
.g-node { cursor: pointer; }
.g-node circle { stroke: var(--bg); stroke-width: 2; }
/* Beschriftungen mit dunklem Rand, damit sie über Linien lesbar bleiben */
.g-node text { fill: #b6c2bc; font-size: 12px; pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.g-root text, .g-dir text { fill: var(--text); font-size: 14px; font-weight: 700; }
.g-root text { font-size: 15px; }
.g-node.hot text { fill: var(--text); }
.graph-tools { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.graph-opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: inherit; font-size: 13px;
  color: var(--muted); background: rgba(14,20,18,.85); border: 1px solid var(--border); cursor: pointer; user-select: none;
}
.graph-opt:hover { color: var(--text); border-color: #3a4a43; }
.graph-opt input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.graph-opt:has(input:checked) { color: var(--text); border-color: rgba(34,197,94,.45); }
.g-c0 circle { fill: #22c55e; } .g-c1 circle { fill: #38bdf8; } .g-c2 circle { fill: #f59e0b; } .g-c3 circle { fill: #a78bfa; }
.g-c4 circle { fill: #f472b6; } .g-c5 circle { fill: #94a3b8; } .g-c6 circle { fill: #2dd4bf; }
.g-root circle { fill: var(--accent); }
.g-node:hover text { fill: var(--text); }
.g-node.dim, .g-edge.dim, .g-link.dim { opacity: .15; }
.g-node, .g-edge, .g-link { transition: opacity .15s; }
@media (max-width: 760px) { .vault-bar { margin-bottom: 10px; } #graph-svg { height: 70vh; min-height: 420px; } }


/* ---- Überarbeitung 17.10.2026: ruhiger, weniger Text ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 8px 14px;
  font-size: 14px; cursor: pointer; min-height: 36px; }
.chip:hover { border-color: var(--accent); color: var(--accent); }

.ai-sum { margin: 4px 0 0 17px; font-size: 13px; color: var(--muted); }
.ai-sum.warn { color: #fbbf24; }
.ai-sum.bad { color: #fca5a5; }
.ai-more { margin-top: 6px; font-size: 13px; }
.ai-more > summary { cursor: pointer; color: var(--muted); list-style: none; font-size: 13px; }
.ai-more > summary::-webkit-details-marker { display: none; }
.ai-more > summary::before { content: "+ "; }
.ai-more[open] > summary::before { content: "– "; }
.ai-more > summary:hover { color: var(--text); }
.ai-more .ai-lines, .ai-more .kv { margin-top: 6px; }
.claude-side { min-width: 0; }
.tile .big-number.hidden, .tile .spark.hidden { display: none; }

.voice-settings { width: 100%; max-width: 560px; text-align: center; }
.voice-settings > summary { cursor: pointer; color: var(--muted); font-size: 14px; list-style: none; padding: 6px 12px;
  display: inline-block; border-radius: 999px; }
.voice-settings > summary::-webkit-details-marker { display: none; }
.voice-settings > summary:hover, .voice-settings[open] > summary { color: var(--text); }
.voice-settings .voice-opts { margin-top: 10px; }
.voice-settings .voice-foot { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.voice-log:empty { display: none; }

.dash-tiles-menu .tiles-btn { display: grid; place-items: center; width: 38px; min-height: 38px; height: 38px; padding: 0; color: var(--muted); }
.dash-tiles-menu .tiles-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-tiles-menu .tiles-btn:hover, .dash-tiles-menu[open] .tiles-btn { color: var(--text); }
.dash-updated { font-size: 13px; color: var(--muted); }
.voice-inner { margin-block: auto; }
.tile-actions .btn.hidden { display: none; }
/* Verbindung ok: nur der grüne Punkt, das Wort "Verbunden" braucht niemand */
body[data-conn="ok"] #conn .label { display: none; }
body[data-conn="ok"] #conn { padding: 6px 9px; }

/* ---- Dashboard in Bereichen ---- */
.dash-section { margin-top: 22px; }
.dash-section:first-of-type { margin-top: 4px; }
.sec-title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.dash-section.hidden { display: none; }
.tile-wide .ai-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.tile .bars { margin-bottom: 10px; }
.tile .bars:empty { display: none; }
@media (max-width: 760px) { .dash-section { margin-top: 18px; } .tile-wide .ai-list { grid-template-columns: 1fr; } }

/* ---- Notizen bearbeiten und umbenennen ---- */
.note-head .note-rename { min-height: 30px; height: 30px; width: 30px; color: var(--muted); }
.note-head .note-rename:hover { color: var(--text); }
.note-head .note-edit { min-height: 34px; font-size: 13px; padding: 0 12px; }
.note-rename-input { font-size: 18px; font-weight: 600; min-height: 38px; flex: 1; min-width: 160px; max-width: 420px; }
.note-editor { width: 100%; min-height: 260px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; line-height: 1.55;
  resize: vertical; tab-size: 2; }
.note-editor-bar { display: flex; gap: 8px; margin-top: 10px; }
.note-editor-wrap .note-editor { margin-top: 4px; }
@media (max-width: 760px) { .note-editor { font-size: 16px; } }

/* ---- Dashboard: feste Spalten ohne Lücken ---- */
.dash-grid { grid-auto-rows: auto; align-items: start; grid-auto-flow: row; }
.dash-grid > .tile, .dash-grid > .tile-stack { align-self: start; grid-row-end: auto !important; }
.tile-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tile-stack:not(:has(.tile:not(.hidden))) { display: none; }
.tile-stack > .tile { width: 100%; }
.sec-pcs .dash-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }
.sec-pcs .dash-grid > .tile, .sec-pcs .dash-grid > .tile-stack { align-self: stretch; }
.sec-pcs .tile-stack > .tile:last-child { flex: 1; }
.sec-tasks .task-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; }
.sec-coding .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec-coding .tile-stack.span2 { grid-column: span 2; }
.sec-coding .dash-grid > .tile[data-tile="projekte"] { grid-column: 1 / -1; }
.sec-coding .dash-grid > .tile[data-tile="github"] { align-self: stretch; }
.sec-ki .dash-grid { grid-template-columns: 1fr; }
.agent-list li { flex-direction: row; }
.agent-list .agent-bars { flex-basis: 100%; margin-top: 2px; }
@media (max-width: 1000px) { .sec-coding .dash-grid { grid-template-columns: 1fr 1fr; } .sec-coding .tile-stack.span2 { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .sec-coding .dash-grid, .sec-pcs .dash-grid { grid-template-columns: 1fr; }
  .sec-coding .tile-stack.span2, .sec-coding .dash-grid > .tile[data-tile="projekte"] { grid-column: auto; }
}

/* ---- Bearbeiten-Knopf gut sichtbar ---- */
.note-head .note-edit { color: var(--accent); border: 1px solid rgba(34,197,94,.45); background: var(--accent-soft); font-weight: 600; }
.note-head .note-edit:hover { background: rgba(34,197,94,.22); }
.note-head .note-edit::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sec-pcs .tile[data-tile="haupt-pc"] { display: flex; flex-direction: column; }
.sec-pcs .tile[data-tile="haupt-pc"] .tile-actions { margin-top: auto; padding-top: 14px; }

/* ---- Einstellungen ---- */
.settings-view { flex: 1; overflow-y: auto; padding: 20px 16px 40px; }
.settings-inner { max-width: 760px; margin: 0 auto; }
.icon-btn.active { color: var(--accent); border-color: rgba(34,197,94,.45); background: var(--accent-soft); }
.s-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 6px; margin-bottom: 14px; }
.s-card h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.s-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 6px 16px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--border); }
.s-row:first-of-type { border-top: 0; }
.s-label { font-size: 15px; }
.s-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.s-input { min-height: 40px; max-width: 100%; width: 100%; }
.s-input.s-wide { width: 100%; }
input.s-input[type="number"] { width: 120px; text-align: right; }
.s-msg { flex-basis: 100%; text-align: right; font-size: 13px; color: var(--accent); min-height: 0; }
.s-msg:empty { display: none; }
.s-msg.bad { color: #fca5a5; }
.s-row.has-error .s-input { border-color: rgba(239,68,68,.6); }
.s-reset { min-height: 30px; width: 30px; padding: 0; color: var(--muted); }
.s-order { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.s-order-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.s-order-row.off { opacity: .55; }
.s-order-row input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.s-order-name { flex: 1; font-size: 14px; }
.s-arrow { min-height: 30px; width: 30px; padding: 0; color: var(--muted); }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch-knob { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: background .15s; }
.switch-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + .switch-knob { background: var(--accent-soft); border-color: rgba(34,197,94,.5); }
.switch input:checked + .switch-knob::after { transform: translateX(20px); background: var(--accent); }
.switch input:focus-visible + .switch-knob { outline: 2px solid var(--accent); outline-offset: 2px; }
.s-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; padding: 4px 0 12px; }
.s-keys { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 14px; }
.s-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 14px; }
@media (max-width: 760px) {
  .s-row { grid-template-columns: 1fr; }
  .s-ctrl { justify-content: flex-start; }
  input.s-input[type="number"] { text-align: left; }
  .s-msg { text-align: left; }
  .s-input { font-size: 16px; }
}

/* ---- Markieren nur dort, wo man Text braucht ---- */
/* Alles andere (Kacheln, Knöpfe, Menüs, Listen, Dashboard) lässt sich am iPad und am PC nicht mehr versehentlich markieren, auch kein
   Menü beim langen Drücken. Markierbar bleiben: Chat-Nachrichten, Notizen (Obsidian), gespeicherte Chats, das Sprech-Protokoll,
   der Notiz-Editor, alle Eingabefelder und die Bestätigungs-Details. */
html, body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
button, a, img, svg, label, summary { -webkit-user-drag: none; }
.msg, .msg *, .steps-list, .steps-list *, .vault-view, .vault-view *, .reminder, .reminder *, .saved-view, .saved-view *, .vline .vtext, .modal-details, .note-editor,
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
input, textarea { -webkit-user-select: text; user-select: text; } /* iOS: ohne das lässt sich in Feldern nicht tippen */
/* Knöpfe in Nachrichten (Kopieren, Codeblock-Kopieren) und Aufklapp-Köpfe sollen sich nicht mitmarkieren */
.msg button, .msg summary, .steps > summary, .vault-view button, .vault-view summary, .vault-view .tree-note { -webkit-user-select: none; user-select: none; }

/* ---- Sprechen läuft im Hintergrund weiter: kleine Leiste oben in der Mitte ---- */
.voice-mini { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 62px); left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 2px; padding: 4px 6px 4px 4px; background: rgba(14,20,18,.94); backdrop-filter: blur(8px);
  border: 1px solid rgba(34,197,94,.5); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.voice-mini.hidden { display: none; }
.voice-mini-open { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 10px; border: 0; background: transparent; color: var(--text);
  font-size: 14px; cursor: pointer; border-radius: 999px; min-height: 36px; }
.voice-mini-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: miniPulse 1.8s infinite; }
.voice-mini[data-state="spricht"] .voice-mini-dot, .voice-mini[data-state="spreche"] .voice-mini-dot { background: #60a5fa; }
.voice-mini[data-state="denke"] .voice-mini-dot, .voice-mini[data-state="verstehe"] .voice-mini-dot { background: #fbbf24; }
.voice-mini-btn { width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.voice-mini-btn:hover { color: var(--text); background: var(--surface-2); }
.voice-mini-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-mini-btn .slash { display: none; }
.voice-mini-btn.on { color: #fca5a5; }
.voice-mini-btn.on .slash { display: block; }
@keyframes miniPulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ---- Anbieter-Fehler sichtbar ---- */
.err-details { margin-top: 10px; font-size: 13px; }
.err-details > summary { cursor: pointer; color: var(--muted); }
.err-details ul { margin: 6px 0 0; padding-left: 18px; color: var(--text); overflow-wrap: anywhere; }
.err-details li { margin-bottom: 4px; }
.warn-pill { color: #fbbf24; border-color: rgba(251,191,36,.45); }

/* Eingerichtete Anbieter ausserhalb der Kette (z. B. SambaNova) */
.ai-row.off { opacity: .6; }
.ai-sum.muted { color: var(--muted); }

/* ---- Zwei-Faktor in den Einstellungen ---- */
.totp { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.totp-head { display: flex; gap: 10px; align-items: center; }
.totp-field { display: flex; flex-direction: column; gap: 4px; width: min(280px, 100%); }
.totp-qr img { background: #fff; padding: 8px; border-radius: 10px; display: block; }
.totp-secret { font-family: ui-monospace, Consolas, monospace; user-select: text; -webkit-user-select: text; }

/* ======== Feinschliff (18.10.2026): Skala, Fokus, Klickflächen, ruhigere Kacheln ======== */
:root {
  /* Schriftgrößen: nur noch diese Stufen (Ausnahme: 11 px für winzige Beschriftungen in Diagrammen) */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px;
  /* Abstände: 4er-Raster */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --border-soft: #1a2420;
}

/* Fokus-Rahmen: nur bei Tastatur, einheitlich grün, mit Abstand zum Rand */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:focus-visible, .chip:focus-visible, .icon-btn:focus-visible { outline: none; box-shadow: var(--focus); }
summary:focus-visible, a:focus-visible, .tree-note:focus-visible { outline-offset: 3px; border-radius: 6px; }
.input:focus-visible, .composer textarea:focus-visible, .s-input:focus-visible, .fsel-search:focus-visible { outline: none; }
.fsel-btn:focus-visible, .fsel-opt:focus-visible { outline-offset: -2px; }
.switch input:focus-visible + .switch-knob { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Klickflächen: Zeilen mit Kontrollkästchen und Links in Listen sind überall mindestens 36 px hoch, am Touchscreen 44 px */
.check { min-height: 36px; margin-top: 0; margin-bottom: 8px; }
.check input { width: 20px; height: 20px; flex: none; }
.s-order-row { min-height: 40px; }
.s-order-row input { width: 20px; height: 20px; }
.gh-issues, .gh-repos { gap: 2px; }
.gh-issues li, .gh-repos li { padding: 6px 0; }
.gh-issues li a, .gh-repos li a, .mr-top a { padding: 2px 0; }
.proj-links a { display: inline-block; padding: 6px 4px; }
.proj-links { margin-top: 4px; }
.badge-link { min-height: 28px; padding: 4px 10px; }
.tile > header h3 { min-height: 32px; }
.reload-btn, .dash-tiles-menu .tiles-btn, .s-reset, .s-arrow, .note-head .note-rename { min-width: 36px; min-height: 36px; width: 36px; height: 36px; }
.s-reset, .s-arrow { height: 36px; }
@media (pointer: coarse) {
  .check { min-height: 44px; }
  .reload-btn, .dash-tiles-menu .tiles-btn, .s-reset, .s-arrow, .note-head .note-rename { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .gh-issues li, .gh-repos li { padding: 10px 0; }
  .proj summary, .ai-row { min-height: 44px; }
  .badge-link { min-height: 36px; }
  .proj-links a { padding: 10px 6px; }
}

/* Einheitliche Schriftgrößen für gleiche Rollen */
.tile h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0; }
.s-card h3, .sec-title { font-size: var(--fs-xs); letter-spacing: .08em; }
.tile-note, .legend, .kv dd.kv-long, .bar-label, .ai-count, .ai-lines, .proj-body, .mr-dl, .dash-updated { font-size: var(--fs-sm); }
.kv, .agent-list, .gh-issues, .gh-repos, .proj-name { font-size: var(--fs-md); }
.badge, .ai-models, .proj-branch, .proj-links, .gh-issues .muted, .gh-repos .muted, .proj-commit, .proj-sub { font-size: var(--fs-xs); }
.s-label { font-size: var(--fs-base); }

/* Ruhigere Dashboard-Kacheln: etwas mehr Luft, feinere Linien, weniger Farbe, dünnere Balken */
.dashboard, .tasks-view, .settings-view { padding: var(--sp-6) var(--sp-4); }
.dash-head { margin-bottom: var(--sp-5); }
.dash-section { margin-top: 28px; }
.sec-title { margin-bottom: var(--sp-3); font-weight: 600; color: #7a8780; }
.sec-title::after { background: var(--border-soft); }
.dash-grid, .tile-stack { gap: var(--sp-4); }
.tile { padding: var(--sp-5); border-color: var(--border-soft); }
.tile header { margin-bottom: var(--sp-4); min-height: 32px; }
.tile.folded > header { margin-bottom: 0; }
.tile-actions { margin-top: var(--sp-4); }
.tile-note { margin-top: var(--sp-3); }
.kv { gap: 8px 16px; }
.bars { gap: var(--sp-3); }
.bar-label { margin-bottom: 6px; }
.bar-track { height: 6px; border-color: transparent; background: var(--surface-2); }
.spark { border-color: var(--border-soft); }
.ai-row, .proj { border-color: var(--border-soft); background: transparent; }
.ai-row { padding: var(--sp-3) 14px; }
.ai-list { gap: var(--sp-2); }
.proj summary { padding: 10px 14px; }
.proj-body { padding: 0 14px 12px; }
.proj-items { gap: var(--sp-2); }
.badge { border-color: var(--border-soft); background: transparent; padding: 1px 8px; }
.badge.ok { border-color: rgba(34,197,94,.28); }
.badge.warn { border-color: rgba(245,158,11,.32); }
.badge.info { border-color: rgba(56,189,248,.28); }
.badge-link:hover { border-color: var(--border); }
.agent-list { gap: var(--sp-3); }
.agent-list li { gap: var(--sp-2); }

/* Nur das Nötige bewegt sich */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Notizen verschieben und löschen (18.10.2026) ---- */
.tree-note { -webkit-touch-callout: none; touch-action: pan-y; }
.tree-note.dragging { opacity: .45; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; max-width: 220px; padding: 6px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--accent); color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.tree-folder.drop-over { background: var(--accent-soft); border-radius: 10px; box-shadow: 0 0 0 1px rgba(34,197,94,.55) inset; }
.tree-folder.drop-over > summary { color: var(--accent); }
.note-head .note-move, .note-head .note-delete { color: var(--muted); min-width: 36px; min-height: 36px; width: 36px; height: 36px; }
.note-head .note-move:hover { color: var(--text); }
.note-head .note-delete:hover { color: #fca5a5; border-color: rgba(239,68,68,.4); }
@media (pointer: coarse) { .note-head .note-move, .note-head .note-delete { min-width: 44px; min-height: 44px; width: 44px; height: 44px; } }

/* ---- Verschieben-Dialog: Auswahlmenü mittig und fett (18.10.2026) ---- */
.move-modal { gap: 16px; }
.move-modal .fsel-btn { position: relative; min-height: 50px; justify-content: center; text-align: center; font-weight: 700; font-size: 16px; padding: 0 44px; }
.move-modal .fsel-btn .fsel-value { text-align: center; }
.move-modal .fsel-caret { position: absolute; right: 16px; top: 50%; margin-top: -8px; }
.move-modal .fsel-panel { left: 0; right: 0; width: auto; max-width: none; padding: 8px; border-radius: 14px; border-color: rgba(34,197,94,.35);
  box-shadow: 0 18px 44px rgba(0,0,0,.6); }
.move-modal .fsel-list { max-height: 260px; }
.move-modal .fsel-opt { padding: 11px 38px; text-align: center; font-weight: 600; font-size: 15px; border-radius: 10px; margin-bottom: 2px; }
.move-modal .fsel-opt.selected { background: var(--accent-soft); font-weight: 700; }
.move-modal .fsel-opt.selected::after { right: 16px; }
.move-modal .fsel-search { text-align: center; min-height: 40px; font-weight: 600; }
.move-modal #move-new { text-align: center; font-weight: 600; min-height: 50px; }
.move-modal #move-new::placeholder { font-weight: 500; }
.move-modal h3, .move-modal .ask-hint { text-align: center; }
.vault-empty { margin: 0; padding: 56px 16px; text-align: center; font-weight: 700; font-size: 16px; color: var(--muted); }

/* Zwei-Faktor: der Knopf unten klebte am Rand der Karte */
.totp { padding-bottom: 14px; }

/* ---- Live-Bildschirm (18.10.2026) ---- */
.mon-controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.mon-controls .input { min-height: 44px; width: auto; min-width: 120px; flex: 1 1 140px; max-width: 220px; }
.mon-controls .btn-primary, .mon-controls #mon-toggle { min-width: 120px; }
.mon-stage { background: #000; border: 1px solid var(--border-soft); border-radius: 12px; min-height: 220px; display: grid; place-items: center; overflow: hidden; }
.mon-stage img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.mon-stage .vault-empty { color: var(--muted); }
.mon-stage { position: relative; }
.mon-exit { display: none; position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; z-index: 2;
  align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55);
  color: #fff; cursor: pointer; }
.mon-stage:fullscreen .mon-exit, .mon-stage.pseudo-full .mon-exit { display: flex; }
.mon-stage.pseudo-full { position: fixed; inset: 0; z-index: 400; border-radius: 0; border: 0; min-height: 0; }
.mon-stage.pseudo-full img { width: auto; max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; cursor: zoom-out; }
body.mon-lock { overflow: hidden; }
.mon-stage:fullscreen { border-radius: 0; border: 0; }
.mon-stage:fullscreen img { width: auto; max-width: 100vw; max-height: 100vh; object-fit: contain; cursor: zoom-out; }
@media (max-width: 760px) { .mon-controls .input { max-width: none; } }

/* Live-Bildschirm: Auswahlmenüs mittig und fett wie im Verschieben-Dialog */
.mon-controls .fsel { flex: 1 1 140px; min-width: 120px; max-width: 220px; }
.mon-controls .fsel-btn { width: 100%; position: relative; min-height: 44px; justify-content: center; text-align: center; font-weight: 700; padding: 0 36px; }
.mon-controls .fsel-btn:disabled { opacity: .55; cursor: not-allowed; }
.mon-controls .fsel-caret { position: absolute; right: 12px; top: 50%; margin-top: -8px; }
.mon-controls .fsel-panel { min-width: 100%; border-color: rgba(34,197,94,.35); padding: 8px; border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.6); }
.mon-controls .fsel-opt { padding: 10px 34px; text-align: center; font-weight: 600; border-radius: 10px; margin-bottom: 2px; }
.mon-controls .fsel-opt.selected { background: var(--accent-soft); font-weight: 700; }
.mon-controls .fsel-opt.selected::after { right: 12px; }
@media (max-width: 760px) { .mon-controls .fsel { max-width: none; } }

/* ---------- Sprechen: Kreis-Visualisierung und Video-Anruf ---------- */
.voice-stage { width: 240px; height: 240px; margin-top: 0; }
.voice-orb { position: absolute; inset: -50%; width: 200%; height: 200%; pointer-events: none; }
.voice-level { display: none; }   /* der Kreis (orb.js) zeigt die Lautstärke jetzt selbst */
.voice-mic { width: 108px; height: 108px; z-index: 1; }
.voice-cam { position: absolute; left: 0; bottom: 12px; width: 52px; height: 52px; border-radius: 50%; z-index: 1;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.voice-cam svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.voice-cam.on { background: var(--accent); border-color: var(--accent); color: #04110a; }
.voice-mute { z-index: 1; }
.voice-face { width: min(100%, 300px); aspect-ratio: 9 / 16; max-height: 58vh; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border); background: #080c0a; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.voice-face canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.voice-view.is-video .voice-stage { width: 190px; height: 190px; }
.voice-view.is-video .voice-mic { width: 84px; height: 84px; }
.voice-view.is-video .voice-mic svg { width: 34px; height: 34px; }
@media (max-width: 760px) {
  .voice-stage { width: 210px; height: 210px; }
  .voice-mic { width: 96px; height: 96px; }
  .voice-view.is-video .voice-stage { width: 170px; height: 170px; }
  .voice-view.is-video .voice-mic { width: 76px; height: 76px; }
}

/* Sprechen: alles mittig (waagerecht und senkrecht), bei langem Protokoll wird gescrollt */
.voice-view:not(.hidden) { display: flex; flex-direction: column; }
.voice-view .voice-inner { margin: auto; width: 100%; }

/* Meine Kamera im Sprechen-Modus */
.voice-eye { position: absolute; left: 0; bottom: 72px; width: 52px; height: 52px; border-radius: 50%; z-index: 1;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.voice-eye svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.voice-eye.on { background: var(--accent); border-color: var(--accent); color: #04110a; }
.voice-self { width: 132px; height: 99px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); background: #000; transform: scaleX(-1); }

/* Nur der Auge-Knopf sitzt neben dem Kreis, Video und Stumm bleiben wie vorher */
.voice-eye { left: -26px; }
.voice-view.is-video .voice-eye { left: -22px; }
@media (max-width: 760px) { .voice-eye { left: -20px; } }