body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important; /* Wichtig für Einbettung */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: hidden; 
}

#start-chat-button {
  padding: 15px 25px;
  font-size: 1.2em;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin: 20px;
}
#start-chat-button:hover {
  background-color: #0056b3;
}

#api-key-popup {
  display: none;
  flex-direction: column;
  align-items: stretch;
  position: fixed; 
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 25px 30px;
  border: 1px solid #adb5bd;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  z-index: 1000;
  width: 90%;
  max-width: 480px;
  box-sizing: border-box;
}

#api-key-popup h3 { margin-top: 0; margin-bottom: 20px; color: #212529; text-align: center; font-size: 1.3em; }
#api-key-popup #close-popup-button { background-color: transparent; border: none; color: #6c757d; font-size: 1.8em; line-height: 1; padding: 0px 8px; cursor: pointer; position: absolute; top: 15px; right: 15px; }
#api-key-popup p { margin-bottom: 15px; font-size: 0.95em; line-height: 1.5; color: #343a40; }
#api-key-popup p a { color: #007bff; text-decoration: underline; }
#api-key-popup label { display: block; margin-bottom: 8px; font-weight: bold; color: #343a40; }
#api-key-popup input[type="password"], #api-key-popup select { width: 100%; padding: 12px 15px; margin-bottom: 15px; border: 1px solid #ced4da; border-radius: 6px; box-sizing: border-box; font-size: 1em; }
#api-key-popup select { margin-bottom: 20px; }
#api-key-error-msg { color: #dc3545; margin-bottom: 15px; min-height: 1.2em; font-size: 0.9em; text-align: center; }
#api-key-popup #confirm-api-key-button { padding: 12px 25px; background-color: #28a745; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1.1em; font-weight: bold; width: 100%; }
#api-key-popup #confirm-api-key-button:disabled { background-color: #6c757d; cursor: not-allowed; }

#chat-interface-container {
  display: none;
  font-family: Arial, sans-serif;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 25px;
  /* border: 1px solid #dee2e6; ENTFERNT FÜR SAUBERE IFRAME-EINBETTUNG */
  border-radius: 12px; /* Kann bleiben, wenn der iframe selbst abgerundet ist */
  background-color: #ffffff;
  /* box-shadow: 0 6px 18px rgba(0,0,0,0.1); ENTFERNT FÜR SAUBERE IFRAME-EINBETTUNG */
  flex-direction: column;
  height: 600px;
  max-height: 600px; 
  box-sizing: border-box;
}

#chat-preview-output { flex-grow: 1; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 20px; background-color: #f8f9fa; display: flex; flex-direction: column; }
#chat-preview-output::-webkit-scrollbar, #user-chat-input::-webkit-scrollbar { display: none; }
#chat-preview-output, #user-chat-input { scrollbar-width: none; }
#chat-preview-output .message { margin-bottom: 15px; padding: 12px 18px; border-radius: 18px; max-width: 85%; word-wrap: break-word; line-height: 1.6; color: #212529; box-sizing: border-box; }
#chat-preview-output .user-message { text-align: left; background-color: #007bff; color: white; align-self: flex-end; border-bottom-right-radius: 6px; }
#chat-preview-output .bot-message { align-self: flex-start; border-bottom-left-radius: 6px; background-color: #f0f3f5; color: #212529; }
#chat-preview-output .system-error-message { background-color: #ffebee; color: #c62828; border: 1px solid #e57373; text-align: center; max-width: 95%; align-self: center; }
#chat-preview-output .system-info-message, #chat-preview-output .thinking-message { background-color: transparent; color: #6c757d; font-style: italic; text-align: center; max-width: 100%; padding: 5px 0; align-self: center; }
#chat-preview-output .message strong { font-weight: bold; }
#chat-preview-output .chat-list { margin-top: 0.5em; margin-bottom: 0.8em; padding-left: 25px; list-style-position: outside; }
#chat-preview-output .chat-list li { margin-bottom: 0.4em; line-height: 1.5; }
#chat-preview-output ul.chat-list + br, #chat-preview-output ol.chat-list + br { display: none; }
#chat-preview-output .message > br { content: ""; display: block; margin-bottom: 0.6em; }
#chat-preview-output .message > span + br { margin-bottom: 0.2em; }
#input-area { display: flex; gap: 10px; margin-top: auto; flex-shrink: 0; align-items: flex-end; }
#user-chat-input { flex-grow: 1; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 20px; font-size: 1em; min-height: 24px; max-height: 150px; overflow-y: auto; resize: none; line-height: 1.4; }
#send-chat-button { padding: 10px 15px; height: 46px; border: none; background-color: #007bff; color: white; border-radius: 20px; cursor: pointer; font-size: 1em; font-weight: 500; }
#send-chat-button:disabled { background-color: #6c757d; cursor: not-allowed; }