/* Schwebendes Chat-Icon */
#chatbot-icon {
  position: fixed;
  /* Fixierte Position auf dem Bildschirm */
  bottom: 20px;
  /* Abstand vom unteren Bildschirmrand */
  right: 20px;
  /* Abstand vom rechten Bildschirmrand */
  background-color: #90caf9;
  /* Hintergrundfarbe des Icons */
  color: #121212;
  /* Farbe des Symbols */
  width: 50px;
  /* Breite des Icons */
  height: 50px;
  /* Höhe des Icons */
  border-radius: 50%;
  /* Rundes Icon */
  display: flex;
  /* Flexbox für zentrierte Ausrichtung */
  justify-content: center;
  /* Zentrierung des Inhalts */
  align-items: center;
  /* Vertikale Zentrierung */
  cursor: pointer;
  /* Zeigt an, dass das Icon klickbar ist */
  font-size: 24px;
  /* Größe des Symbols */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  /* Schatteneffekt für das Icon */
}

/* Chat-Fenster */
#chatbot-window {
  position: fixed;
  /* Fixierte Position */
  bottom: 80px;
  /* Abstand vom unteren Rand, damit es nicht das Icon überlappt */
  right: 20px;
  /* Abstand vom rechten Rand */
  width: 320px;
  /* Breite des Fensters */
  height: 400px;
  /* Höhe des Fensters */
  background-color: #1e1e1e;
  /* Dunkler Hintergrund für das Chat-Fenster */
  border-radius: 10px;
  /* Abgerundete Ecken */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  /* Schatten für Tiefeneffekt */
  display: none;
  /* Standardmäßig ausgeblendet */
  flex-direction: column;
  /* Elemente vertikal anordnen */
  overflow: hidden;
  /* Überlauf des Fensters verbergen */
}

/* Header für das Chat-Fenster */
#chat-header {
  background-color: #90caf9;
  /* Hintergrundfarbe des Headers */
  color: #121212;
  /* Textfarbe */
  padding: 10px;
  /* Innenabstand */
  font-size: 16px;
  /* Schriftgröße */
  display: flex;
  /* Flexbox für Layout */
  justify-content: space-between;
  /* Inhalt gleichmäßig verteilen */
  align-items: center;
  /* Vertikale Ausrichtung */
}

/* Schließen-Symbol im Header */
#close-chat {
  cursor: pointer;
  /* Zeigt an, dass es klickbar ist */
  font-size: 18px;
  /* Schriftgröße des Schließen-Symbols */
}

/* Chat-Inhalt */
#chat-content {
  flex: 1;
  /* Nimmt den verbleibenden Platz im Container ein */
  padding: 10px;
  /* Innenabstand für besseren Lesekomfort */
  overflow-y: auto;
  /* Scrollbar, falls der Inhalt überläuft */
  font-size: 14px;
  /* Standard-Schriftgröße für Nachrichten */
  color: #e0e0e0;
  /* Helle Textfarbe für gute Lesbarkeit */
}

/* Eingabefeld für Nachrichten */
#chat-input {
  width: 94%;
  /* Fast die gesamte Breite nutzen */
  padding: 10px;
  /* Innenabstand für angenehme Texteingabe */
  border: none;
  /* Kein Rahmen */
  background: #2e2e2e;
  /* Dunkler Hintergrund für Eingabefeld */
  color: #e0e0e0;
  /* Helle Schriftfarbe */
  font-size: 14px;
  /* Schriftgröße für Eingaben */
  margin: 5px;
  /* Abstand zum Rand */
  border-radius: 5px;
  /* Abgerundete Ecken */
  outline: none;
  /* Deaktiviert den Standardfokus-Rahmen */
}

/* Rückantwort des Chatbots */
.chat-response {
  display: flex;
  align-items: flex-start;
}

/* Rückantwort des Chatbots Bildformatierung */
.chat-response img {
  width: 17px;
  height: 17px;
  margin-right: 4px;
  margin-left: 2px;
}

/* 
  Style für inital Systemnachrichten im Chatfenster:
*/
.chat-system {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #ffeaea 0%, #ffe5e5 100%);
  color: #d63031;         /* Modernes, freundliches Rot */
  border-left: 5px solid #d63031;
  font-style: italic;
  font-weight: 600;
  font-size: 1.08em;
  margin: 12px 0;
  padding: 10px 18px;
  border-radius: 12px 4px 4px 12px;
  box-shadow: 0 1px 7px rgba(214, 48, 49, 0.08);
}

/* Sendebutton */
#send-button {
  background-color: #90caf9;
  /* Standardfarbe des Buttons */
  color: #121212;
  /* Schriftfarbe */
  border: none;
  /* Kein Rahmen */
  padding: 10px;
  /* Innenabstand */
  cursor: pointer;
  /* Zeigt an, dass der Button klickbar ist */
  font-weight: bold;
  /* Hebt den Text hervor */
  border-radius: 5px;
  /* Abgerundete Ecken */
  margin: 5px;
  /* Abstand zu anderen Elementen */
}

/* Hover-Effekt für den Sendebutton */
#send-button:hover {
  background-color: #42a5f5;
  /* Farbänderung bei Maus-Hover */
}

/* Ladebalken während dem Empfangen der API Nachricht anzeigen */
#loading-indicator {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border-top-color: #90caf9;
  animation: spin 1s ease-in-out infinite;
  margin: 10px auto;
  /* Zentriert den Indikator horizontal */
}

/* Ladebalken während dem Empfangen der API Nachricht anzeigen und drehen*/
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Overlay für den Hinweis innerhalb des Chat-Fensters */
#chatbot-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#overlay-content {
  background: #2e2e2e;
  /* Dunkleres Grau statt Weiß */
  padding: 10px;
  /* Weniger Padding für kleinere Größe */
  border-radius: 10px;
  text-align: center;
  color: #e0e0e0;
  /* Helle Textfarbe */
  max-width: 80%;
  /* Maximalbreite für mobile Geräte */
  box-sizing: border-box;
  /* Padding und Border in die Breite einbeziehen */
}

#overlay-content p {
  margin-bottom: 10px;
  /* Weniger Abstand unten */
  font-size: 14px;
  /* Kleinere Schriftgröße */
}

#accept-button {
  background-color: #90caf9;
  color: #121212;
  border: none;
  padding: 6px 12px;
  /* Kleinere Größe */
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
}

#accept-button:hover {
  background-color: #42a5f5;
}