:host {
  font-family: var(--ai12z-knowledge-box-font-family) !important;
  font-size: var(--ai12z-knowledge-box-font-size) !important;
  color: var(--ai12z-knowledge-box-font-color, black);
  text-align: var(--ai12z-knowledge-box-text-align, left);
}
.ai12z-kb-wrapper {
 background-color: var(--ai12z-knowledge-box-bg-color);
}
.ai12z-suggest-container {
  padding: 2rem 2rem 2rem 2rem;
  flex: none;
}
.ai12z-suggest-answer {
  font-size: var(--ai12z-knowledge-box-font-size);
}
.ai12z-suggest-title {
  font-weight: 700;
}

.ai12z-suggest-align {
  float: left;
} 

.ai12z-suggest-relevance {
  text-align: end;
}

.ai12z-suggest-error-msg {
  color: rgb(239 68 68);
}

.ai12z-suggest-hide {
  display: none;
}
.ai12z-suggest-thumbs {
  margin-left: 90%;
}

.ai12z-suggest-thumbs-up {
  fill: var(--ai12z-feedback-selected);
  width: 1.5rem;
}

.ai12z-suggest-thumbs-down {
  fill: var(--ai12z-feedback-selected);
  width: 1.5rem;
}
.not-allowed {
  cursor: not-allowed;
}
.ai12zBtn {
  background-color: var(--ai12z-knowledge-box-button-bgcolor);
  color: var(--ai12z-knowledge-box-button-color) !important;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none !important;
  margin: 5px;
}
.custom-privacy {
  color: var(--ai12z-knowledge-box-privacy-color);
  text-align: center;
  font-size: var(--ai12z-knowledge-box-privacy-font-size);
  margin-top: 10px;
}

button:focus-visible {
  outline: 2px solid var(--ai12z-knowledge-box-focus-visible-color, #0A2A43);
  outline-offset: 2px;
}

button.kb-btn-primary:focus-visible {
  outline: 2px solid var(--ai12z-knowledge-box-focus-visible-color-primary, --ai12z-knowledge-box-focus-visible-color);
  outline-offset: 2px;
}

button.kb-btn-secondary:focus-visible {
  outline: 2px solid var(--ai12z-knowledge-box-focus-visible-color-secondary, --ai12z-knowledge-box-focus-visible-color);
}

.diamond-icon {
  /* Base color and size */
  color: var(--ai12z-knowledge-box-icon-color, #a5e6e6);
  width: 28px;
  height: 28px;
  /* Center transform origin for smooth rotation */
  transform-origin: center;
  /* Apply rotation animation when loading */
}

.diamond-icon.loading {
  animation: rotate 2s linear infinite
}

/* Continuous smooth rotation */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
