/* Chat demo base — themable via CSS vars */
.chat{--c-bg:#fff;--c-ink:#111;--c-mut:#80838f;--c-line:#ececf0;--c-soft:#f6f6f8;--c-acc:#ff9400;--c-user:#111;--c-user-ink:#fff;--c-r:14px;
  display:flex;flex-direction:column;background:var(--c-bg);color:var(--c-ink);overflow:hidden}
.chat-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--c-line);font-size:13px;font-weight:600}
.chat-top .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.chat-top .tag{margin-left:auto;font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c-mut);background:var(--c-soft);padding:4px 8px;border-radius:6px}
.chat-feed{flex:1;overflow:hidden;padding:18px;display:flex;flex-direction:column;gap:10px;transition:opacity .6s;scrollbar-width:none}
.chat-feed.cd-fade{opacity:0}
.chat-in{display:flex;align-items:center;gap:10px;margin:0 14px 14px;padding:12px 14px;border:1px solid var(--c-line);border-radius:12px;font-size:14px;min-height:46px}
.chat-in [data-chat-input]{flex:1;color:var(--c-ink)}
.chat-in [data-chat-input]:empty::before{content:"Frag dein DATEV …";color:var(--c-mut)}
.chat-in [data-chat-input]:not(:empty)::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--c-acc);vertical-align:-2px;margin-left:1px;animation:cdBlink 1s steps(1) infinite}
.chat-in .send{width:28px;height:28px;border-radius:8px;background:var(--c-acc);flex:none}
@keyframes cdBlink{50%{opacity:0}}

.cd{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;font-size:14px;line-height:1.5;max-width:92%}
.cd.cd-in{opacity:1;transform:none}
.cd p{margin:0}
.cd-user{align-self:flex-end;background:var(--c-user);color:var(--c-user-ink);padding:10px 14px;border-radius:var(--c-r) var(--c-r) 4px var(--c-r)}
.cd-bot{align-self:flex-start;background:var(--c-soft);padding:12px 14px;border-radius:var(--c-r) var(--c-r) var(--c-r) 4px;width:92%}
.cd-bot b{color:var(--c-ink)}
.cd-tool{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c-mut);padding:2px 0}
.cd-tool code{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c-ink);background:var(--c-soft);padding:3px 7px;border-radius:5px}
.cd-tool em{font-style:normal}
.cd-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--c-line);border-top-color:var(--c-acc);animation:cdSpin .7s linear infinite;flex:none}
.cd-tool.cd-ok .cd-spin{animation:none;border-color:#22c55e;background:#22c55e;position:relative}
.cd-tool.cd-ok .cd-spin::after{content:"";position:absolute;left:3px;top:1px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@keyframes cdSpin{to{transform:rotate(360deg)}}
.cd-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--c-soft);border-radius:var(--c-r)}
.cd-typing i{width:6px;height:6px;border-radius:50%;background:var(--c-mut);animation:cdDot 1s infinite}
.cd-typing i:nth-child(2){animation-delay:.15s}.cd-typing i:nth-child(3){animation-delay:.3s}
@keyframes cdDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.cd-table{margin-top:10px;display:flex;flex-direction:column;border-top:1px solid var(--c-line)}
.cd-table div{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:7px 0;border-bottom:1px solid var(--c-line);font-size:13px}
.cd-table span:nth-child(2){color:var(--c-mut);font-variant-numeric:tabular-nums}
.cd-table span:nth-child(3){color:var(--c-acc);font-weight:700;min-width:48px;text-align:right}
.cd-plan{align-self:flex-start;width:92%;border:1.5px dashed var(--c-acc);border-radius:var(--c-r);padding:12px 14px;background:var(--c-bg);transition:border-color .3s,background .3s}
.cd-plan-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px;margin-bottom:8px}
.cd-plan-h small{font-weight:600;font-size:11px;color:var(--c-acc)}
.cd-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:var(--c-mut)}
.cd-row b{color:var(--c-ink);font-weight:600}
.cd-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.cd-actions button{font:600 12px inherit;font-family:inherit;border:1px solid var(--c-line);background:var(--c-bg);color:var(--c-ink);padding:7px 12px;border-radius:8px;transition:transform .15s}
.cd-actions .cd-confirm{background:var(--c-acc);border-color:var(--c-acc);color:#fff}
.cd-actions .cd-press{transform:scale(.94)}
.cd-plan.cd-confirmed{border-style:solid;border-color:#22c55e}
.cd-plan.cd-confirmed .cd-plan-h small{color:#16a34a}
.cd-plan.cd-confirmed .cd-actions{display:none}
.cd-done{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#16a34a}
.cd-check{width:18px;height:18px;border-radius:50%;background:#22c55e;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}