style.css

/* Hintergrund allgemein */
body {
  background: linear-gradient(135deg, #f9fafb, #eef2f7);
  font-family: "Inter", "Segoe UI", sans-serif;
  color: #222;
  margin: 0;
  padding: 0;
}

/* Seitenleiste */
.sidebar {
  background: #ffffffcc;
  backdrop-filter: blur(10px);
  padding: 20px;
  border-right: 1px solid #ddd;
}

/* Chatfenster */
.gr-chatbot {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  padding: 20px;
}

/* Chatblasen */
.gr-chatbot-message {
  max-width: 80%;
  padding: 10px 15px;
  border-radius: 18px;
  margin: 8px 0;
  font-size: 15px;
  line-height: 1.4;
}

/* User-Nachrichten */
.gr-chatbot-message.user {
  background: #2563eb;
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

/* Bot-Nachrichten */
.gr-chatbot-message.bot {
  background: #f3f4f6;
  color: #111;
  margin-right: auto;
  border-bottom-left-radius: 4px;
}

/* Eingabefeld */
input, textarea {
  border-radius: 12px !important;
  border: 1px solid #ddd !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  outline: none;
}

/* Buttons */
button {
  border-radius: 12px !important;
  padding: 8px 16px !important;
  font-size: 15px !important;
  background: #2563eb !important;
  color: white !important;
  border: none !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

button:hover {
  background: #1e4ed8 !important;
}

/* Dark Mode (optional: falls Nutzer systemweit Dark Mode aktiv hat) */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #eee;
  }
  .gr-chatbot {
    background: #1e293b;
  }
  .gr-chatbot-message.user {
    background: #3b82f6;
  }
  .gr-chatbot-message.bot {
    background: #334155;
    color: #e5e7eb;
  }
}