:host {
  --ux-chat-height: auto;
  margin: 0;
  display: block;
}

#feedback-button {
  --ux-button-icon-size: 25px;
}

.ai-chat {
  height: 100%;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  position: relative;
  white-space: pre-line;
}

.chat-message-bar-disabled {
  pointer-events: none;
  opacity: 0.4;
  user-select: none;
}
.chat-message-bar-disabled * {
  pointer-events: none;
  user-select: none;
}

.loading-state {
  padding: 2rem;
  text-align: center;
  color: var(--ux-color-text);
  background: var(--ux-color-background-subtle);
  border-radius: var(--ux-border-radius);
  margin: 1rem;
}

.date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
  font-size: 0.9rem;
  color: var(--ux-color-primary);
  text-align: center;
  position: relative;
}

#chat-textarea {
  padding-bottom: 0;
  padding-top: 13px;
}

.date-divider::before,
.date-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--ux-color-neutral-lightest);
  margin: 0 10px;
}

ux-chat-message-bar {
  display: block;
}
ux-chat-message-bar::part(textbox):focus-visible {
  outline: 1px solid #000;
  outline-offset: -1px;
}
@media (max-width: 575px) {
  ux-chat-message-bar {
    padding-left: 30px;
    padding-right: 30px;
  }
}