*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* 10FINANCE Markenpalette — identisch zur Hauptseite 10finance.de (monochrom Navy/Weiß) */
  --navy:#202740;
  --navy-light:#283757;
  --navy-lighter:#3a4a5c;
  --dark-bg:#0e1c30;
  --accent:#202740;
  --accent-soft:rgba(32,39,64,0.10);
  --cream:#f5f6f8;
  --warm-white:#f5f6f8;
  --surface:#ffffff;
  --border:#e2e4e8;
  --border-soft:#eef0f3;
  --text:#1a2a3a;
  --text-light:#5a6675;
  --text-muted:#8a95a5;
  --heading:#202740;
  --red:#dc2626;
  --red-bg:rgba(220,38,38,0.08);
  --yellow:#d97706;
  --yellow-bg:rgba(217,119,6,0.08);
  --green:#16a34a;
  --green-bg:rgba(22,163,74,0.08);
  --font-heading:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:16px;
  --radius-sm:10px;
  --shadow-card:0 4px 24px rgba(32,39,64,0.08);
}
html{font-family:var(--font-body);background:var(--warm-white);color:var(--text);-webkit-font-smoothing:antialiased;font-size:16px}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden;line-height:1.5}
h1,h2,h3,h4,h5{font-family:var(--font-heading);color:var(--heading);font-weight:700;line-height:1.15}

.chat-screen{height:100vh;height:100dvh;position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:680px;background:var(--warm-white)}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(32,39,64,0.18);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(32,39,64,0.32)}
*{scrollbar-width:thin;scrollbar-color:rgba(32,39,64,0.18) transparent}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.card-dark{background:var(--navy);color:#fff;border-radius:var(--radius)}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 32px;border-radius:12px;
  background:var(--navy);color:#fff;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  border:none;cursor:pointer;text-decoration:none;
  transition:all .2s
}
.btn-primary:hover{background:var(--navy-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(32,39,64,0.28)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 32px;border-radius:12px;
  background:transparent;color:var(--navy);
  font-family:var(--font-body);font-weight:600;font-size:15px;
  border:2px solid var(--navy);cursor:pointer;text-decoration:none;
  transition:all .2s
}
.btn-secondary:hover{background:var(--navy);color:#fff}

.qc-input{
  width:100%;padding:14px 16px;border-radius:12px;font-size:16px;
  font-family:var(--font-body);
  background:#fff;color:var(--text);
  border:2px solid var(--border);outline:none;
  transition:border-color .2s
}
.qc-input:focus{border-color:var(--navy-light)}
.qc-input::placeholder{color:var(--text-muted)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600}
.badge-free{background:var(--accent-soft);color:var(--navy)}
.badge-gated{background:rgba(32,39,64,0.1);color:var(--navy-light)}

.msg-cfo{background:#fff;border:1px solid var(--border);border-radius:16px 16px 16px 4px;padding:14px 18px;max-width:88%;font-size:15px;line-height:1.6;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.msg-user{background:var(--navy-light);color:#fff;border-radius:16px 16px 4px 16px;padding:12px 18px;max-width:80%;font-size:15px;line-height:1.5;margin-left:auto}

@keyframes shimmer{0%{transform:translateX(-200%)}100%{transform:translateX(500%)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,80%,100%{opacity:.3}40%{opacity:1}}

.chat-bubble{animation:fadeIn .3s ease}
.fade-in{animation:fadeIn .4s ease}

.dot-pulse{display:inline-flex;gap:4px}
.dot-pulse span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--navy-light);animation:pulse 1.4s infinite}
.dot-pulse span:nth-child(2){animation-delay:.2s}
.dot-pulse span:nth-child(3){animation-delay:.4s}