:root{
  --bg: #000000;
  --bubble-bot: #7c3aed;   /* Violett */
  --bubble-user: #10b981;  /* Grün */
  --text: #ffffff;
  --input-bg: #1f2937;     /* Dunkelgrau */
  --border: #2d2d2d;
}

/* Removed global body and * styles to avoid conflicts with main site */

.chat-wrap{
  width:50%;
  margin:2rem auto;
  background:transparent;
  border:none;
  border-radius:16px;
  overflow:hidden;
  box-shadow: none;
}

.chat-header{
  padding:1rem 1.25rem;
  border-bottom:none;
  font-weight:600;
  letter-spacing:.2px;
}

.messages{
  padding:1rem;
  height:55vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  scroll-behavior:smooth;
  background: transparent;
}

.msg{
  display:flex;
  gap:.5rem;
  align-items:flex-end;
}

.msg.user{justify-content:flex-end;}
.msg.bot{justify-content:flex-start;}

.bubble{
  max-width:80%;
  padding:.75rem 1rem;
  border-radius:18px;
  line-height:1.4;
  white-space:pre-wrap;
  word-wrap:break-word;
  border:1px solid transparent;
}

.msg.bot .bubble{
  background:var(--bubble-bot);
  color:var(--text);
  border-color:#6931c2;
}

.msg.user .bubble{
  background:var(--bubble-user);
  color:var(--text);
  border-color:#0b8f6c;
}

.input-area{
  padding:1rem;
  border-top:1px solid var(--border);
  background:transparent;
}

#chat-input{
  width:100%;
  min-height:3.5rem; /* zweizeilig */
  max-height:8rem;
  resize:vertical;
  padding:.75rem 1rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  outline:none;
}

button{
  width:100%;
  margin-top:.5rem;
  padding:.85rem 1rem;
  background:#222;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:.15s ease;
}

button:hover{filter:brightness(1.15)}
button:disabled{opacity:.6; cursor:not-allowed}

.small-hint{
  font-size:.85rem;
  opacity:.85;
  margin-top:.5rem;
}

.actions{
  display:grid;
  grid-template-columns:1fr;
  gap:.5rem;
  margin-top:.5rem;
}

.footer-space{height:.25rem}

/* Kontaktformular Demo */
.form-wrap{
  width:50%;
  margin:1.5rem auto 3rem;
  background:#0f0f0f;
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem 1.25rem;
}

.form-wrap h3{margin:.25rem 0 1rem}

.form-row{display:flex; flex-direction:column; gap:.5rem; margin-bottom:.75rem}
.form-row input,.form-row textarea{
  width:100%;
  padding:.75rem 1rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  outline:none;
}

/* Responsiv: auf kleinen Screens volle Breite */
@media (max-width: 900px){
  .chat-wrap, .form-wrap{width:95%}
  .messages{height:50vh}
}