.lumos-chat-container {
  height: 200px;
}

.lumos-chat-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.lumos-input-field {
  flex: 1;
}

.lumos-submit-button {
  flex: 1;
  width: 40px;
  height: 40px;
}

.lumos-clear-button {
  flex: 1;
  width: 40px;
  height: 40px;
}

/* Override @chatscope default styles */
.cs-message--outgoing .cs-message__content {
  background-color: #fff8e1 !important;
  font-size: 11pt;
}

.cs-message--outgoing .cs-message__avatar {
  margin: 0 0 0 4px;
  max-width: 24px;
}

.cs-message--incoming[aria-label="assistant"] .cs-message__content {
  background-color: #ffd54f !important;
  font-size: 11pt;
}

.cs-message--incoming[aria-label="tool"] .cs-message__content {
  background-color: #c1d7ec !important;
  font-size: 11pt;
}

.cs-message--incoming .cs-message__avatar {
  margin: 0 4px 0 0;
  max-width: 24px;
}

.ps__rail-y {
  background-color: #fff8e1 !important; /* scrollbar background color */
}

.ps__thumb-y {
  background-color: #ffd54f !important; /* scrollbar color */
}

.cs-typing-indicator__text {
  color: #ffb300 !important;
}

.cs-typing-indicator__dot {
  background-color: #ffb300 !important;
}

.cs-avatar.cs-avatar--md {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}
