/* 1) Global font & box-sizing */
.sd-chatbot-container,
.sd-chatbot-container * {
  font-family: 'DM Sans', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/* 2) Container */
.sd-chatbot-container {
  width: 600px;
  max-width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}
.sd-chatbot-prompts-container {
  padding: 0px 10px;
}
.sd-chatbot-input-area-container {
  padding: 10px;
}

/* 3) Header */
.sd-chatbot-header {
  background: #ffffff;
  color: #333333;
  padding: 12px 16px 0px 12px;
}
.sd-chatbot-header .font-bold {
  font-weight: 700;
  font-size: 1rem;
}

/* 4) Messages wrapper */
.sd-chatbot-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  background-color: #ffffff;
}

/* 5) Message wrapper alignment */
.sd-chatbot-message-wrapper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}
.sd-chatbot-message-wrapper.bot {
  justify-content: flex-start;
}
.sd-chatbot-message-wrapper.user {
  justify-content: flex-end;
}

/* 6) Avatars inside bubbles */
.sd-chatbot-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 2px;
}

/* 7) Chat bubbles */
.sd-chatbot-message.bot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  background-color: #f2f3f6;
  color: #333333;
  border-radius: 12px;
  padding: 20px;
}
.sd-chatbot-message.user {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  background-color: #ffffff;
  color: #333333;
  border-radius: 12px;
  padding: 10px 20px;
}

/* 8) Input area changes */
.sd-chatbot-input-area-border {
  border: 1px solid #f2f3f6;
  border-radius: 10px;
  transition: border-color 0.2s ease;
}
.sd-chatbot-input-area-border.active {
  border-color: #673de6;
}

.sd-chatbot-input-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border-radius: 10px;
}

.sd-chatbot-input-area input {
  width: 100%;
  border: none !important;
  border-radius: 9999px;
  padding: 10px 0px 10px 0px !important;
  font-size: 0.9rem;
  background: #ffffff;
}
.sd-chatbot-input-area input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Buttons row underneath input */
button { border:0px !important; }
button:hover { border:0px !important; }
.sd-chatbot-button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.sd-chatbot-button-row button img {
  height: 32px;
  width: 32px;
}

/* 10) Scrollbar tweaks */
.sd-chatbot-messages::-webkit-scrollbar {
  width: 6px;
}
.sd-chatbot-messages::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}
.sd-chatbot-messages::-webkit-scrollbar-track {
  background-color: #f9fafb;
}

/* Result Sets for Grouped Spacing */
/* only add spacing between two result-sets */
.sd-chatbot-result-set + .sd-chatbot-result-set {
  margin-top: 1.5rem;
}