/* Chatbot Modal: Statusbar immer unten, responsive, Close-Button oben rechts, Input-Row und Progress-Indicator */

#chatbot-modal .modal-content {
  max-width: 1024px;
  min-width: 320px;
  width: 95vw;
  max-height: 99vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
}

#chatbot-modal .modal-header {
  background: #2d3748;
  color: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem 1.5rem 1rem 1.5rem;
  border-radius: 16px 16px 0 0;
  position: relative;
  margin-bottom: 0;
}
#chatbot-modal .modal-content {
  height: 95vh;

}

#chatbot-modal .close-btn {
  color: #fff;
  top: 1rem;
  right: 3.5rem;
  position: absolute;
  background: none;
  border: none;
  font-size: 1.5rem;
  z-index: 2;
  cursor: pointer;
  transition: color 0.2s;
}

#chatbot-modal .close-btn:hover {
  color: #e53e3e;
}

#chatbot-modal .chatbox {
  flex: 1 1 auto;
  overflow-y: auto;
  background: #f7fafc;
  padding: 1.2rem 1.5rem 0.5rem 1.5rem;
  margin: 0;
  min-height: 200px;
  max-height: 80vh;
  font-size: 1rem;
}

#chatbot-modal .chatbot-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 1rem 1.5rem 1.2rem 1.5rem;
  background: #f5f7fa;
  border-top: 1px solid #e0e0e0;
}

#chatbot-modal #userInput {
  flex: 1 1 auto;
  border: 1px solid #d0d3da;
  border-radius: 20px;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  outline: none;
  background: #fff;
  color: #23243a;
  transition: border 0.2s;
}

#chatbot-modal #userInput:focus {
  border: 1.5px solid #4a90e2;
}

#chatbot-modal #sendButton {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

#chatbot-modal #sendButton:hover {
  background: #125ea2;
}

#chatbot-modal #progressIndicator {
  margin-left: 0.7rem;
  color: #1976d2;
  font-size: 1.2rem;
  display: none;
}

#chatbot-modal #progressIndicator:not(.hide) {
  display: inline;
}

/* Progress Indicator für Chatbot mit hüpfenden Punkten */
.chatbot-input-row #progressIndicator {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.5rem;
  font-size: 1.2rem;
  color: #4299e1;
}

.chatbot-input-row #progressIndicator.hide {
  display: none !important;
}

.chatbot-input-row #progressIndicator.show {
  display: inline-flex !important;
}

/* Hüpfende Punkte Animation */
.bouncing-dots {
  display: inline-flex;
  gap: 0.1rem;
}

.bouncing-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #4299e1;
  animation: bounce 1.4s infinite ease-in-out both;
}

.bouncing-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.bouncing-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}

.bouncing-dots .dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Send Button disabled state */
.chatbot-input-row #sendButton:disabled {
  background-color: #cbd5e0;
  color: #a0aec0;
  cursor: not-allowed;
  opacity: 0.6;
}

#chatbot-modal .chatbot-statusbar-container {
  width: 100%;
  background: #edf2f7;
  color: #4a5568;
  font-size: 0.95rem;
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 16px 16px;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  z-index: 1;
  position: sticky;
  bottom: 0;
  left: 0;
}

#chatbot-modal #connectionStatus {
  width: 100%;
  padding: 0.5rem 1.5rem;
}

#chatbot-modal #connectionStatus.reconnecting {
  color: #e67e22;
  font-weight: bold;
  animation: reconnect-blink 1s steps(2, start) infinite;
}

@keyframes reconnect-blink {
  to {
    visibility: hidden;
  }
}

@media (max-width: 600px) {
  #chatbot-modal .modal-content {
    max-width: 100vw;
    min-width: 0;
    border-radius: 0;
  }
  #chatbot-modal .chatbot-statusbar-container {
    border-radius: 0 0 0 0;
    padding: 0.5rem 1rem;
  }
}

#chatbot-modal #newChatBtn {
  margin-right: 5rem;
  background: #f6c344;
  color: #23243a;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 1.1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
#chatbot-modal #newChatBtn:hover {
  background: #f1b600;
}

.chatbot-suggestions {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.5rem 0;
  justify-content: center;
}
.chatbot-suggestions.show {
  display: flex;
}
.suggestion-btn {
  background: #0317886c;
  border: 1px solid rgb(10, 57, 104);
  color: #ffffff;
  border-radius: 16px;
  padding: 0.3em 1em;
  font-size: 0.95em;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 0.2em;
}
.suggestion-btn:hover {
  background: #00258ba2;
}
.suggestion-close-btn {
  background: #ff6b6b;
  border: 1px solid #ff4757;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: unset;
  margin-bottom: 0.2em;
  transition: all 0.2s;
  flex-shrink: 0;
}

.suggestion-close-btn:hover {
  background: #ff4757;
  transform: scale(1.1);
}
.think {
  background: #fffbe6;
  border-left: 4px solid #f7c873;
  margin: -0.5em -1em -1em;
  padding: 0.5em 1em;
  border-radius: 6px;
  font-size: 0.97em;
}
.think details summary {
  cursor: pointer;
  font-weight: bold;
}