/* chat structure */

#chat-header {
  border-bottom: 0.25rem solid #4c6272;
  padding-bottom: 1rem;
}

#chat-footer {
  border-top: 0.25rem solid #4c6272;
  padding-top: 1rem;
  clear: both;
}

#chat-main-messages {
  box-sizing: border-box;
  overflow: auto;
  padding: 0.3125rem;
  position: relative;
  border: 0.25rem solid transparent;
  max-height: 25rem;
}

#chat-main-messages:focus {
  border: 4px solid #212b32;
  outline: 4px solid #ffeb3b;
  outline-offset: 0;
}

/* Messages */

.user-chat-message, 
.practice-chat-message {
  max-width: 90%;
  clear: both;
}

.user-chat-message p, 
.practice-chat-message p {
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.user-chat-message p:last-child, 
.practice-chat-message p:last-child {
  margin-bottom: 0;
}

.user-chat-message {
  float: right;
}

.chat-card-blue {
  background: #005eb8 !important;
  color: #ffffff !important;
}

.chatbot-menu-item-description {
  color: #4c6272;
}

.chatbot-link-content {
  color: #4c6272;
}

/* Scrollbar */

#chat-main-messages::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

#chat-main-messages::-webkit-scrollbar-track {
  background: #d8dde0;
  border-radius: 0.3125rem;
}

#chat-main-messages::-webkit-scrollbar-thumb {
  background: #212b32;
  border-radius: 0.3125rem;
  border: 0.125rem solid #f0f4f5;
}

#chat-main-messages::-webkit-scrollbar-thumb:hover {
  background: #003d78;
}

/* Buttons */

.nhsuk-card__content .chatbot-button {
  margin-bottom: 0;
}

.nhsuk-card__content .nhsuk-button-group {
  margin-top: 1rem; 
}

.message-border {
  border: 0.25rem solid transparent;
}

.message-border:focus-visible {
  border: 0.25rem solid #212b32;
  outline: 0.25rem solid #ffeb3b;
  outline-offset: 0;
}