.db-status-dot[data-state="away"] {
  background: #e05252;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.12);
}

.db-status-dot[data-state="reconnecting"] {
  background: #a7b2c2;
  box-shadow: 0 0 0 7px rgba(167, 178, 194, 0.1);
}

.db-page-home .db-chat-header {
  padding: 8px 10px;
}

.db-page-home .db-chat-avatar {
  width: 26px;
  height: 26px;
}

.db-page-home .db-chat-brand-text strong { font-size: 10px; }
.db-page-home .db-chat-brand-text small { display: none; }
.db-page-home .db-chat-status { padding: 2px 6px; font-size: 9px; }
.db-page-home .db-status-dot { width: 7px; height: 7px; }

.db-page-home .db-chat-log {
  min-height: 320px;
  max-height: 430px;
  gap: 4px;
  padding: 11px;
}

.db-page-home .db-msg {
  align-self: flex-start;
  width: fit-content;
  max-width: min(78%, 420px);
  padding: 8px 11px 6px;
  border: 0;
  border-radius: 19px 19px 19px 5px;
  font-size: 11px;
  line-height: 1.38;
  box-shadow: none;
  background: #303033;
  color: #f4f6fb;
}

.db-page-home .db-msg.user {
  align-self: flex-end;
  border-radius: 19px 19px 5px 19px;
  background: linear-gradient(145deg, #133f77, #0b2b58);
  color: #f5f9ff;
}

.db-msg-status,
.db-msg-meta {
  display: inline-block;
  margin-top: 2px;
  font-size: 8px;
  line-height: 1.1;
  color: rgba(241, 246, 255, 0.58);
}

.db-msg-status { margin-right: 4px; }
.db-msg.user .db-msg-status { display: inline-block; }
.db-msg.assistant .db-msg-meta { display: block; text-align: right; }

/* The public chat uses neutral visitor bubbles and navy team replies. */
.db-page-home .db-msg.assistant,
.db-page-home .db-msg.bot {
  align-self: flex-start;
  background: linear-gradient(145deg, #133f77, #0b2b58);
  color: #f5f9ff;
}

.db-page-home .db-msg.user {
  align-self: flex-end;
  background: #303033;
  color: #f4f6fb;
}

.db-chat-message-field {
  min-height: 48px;
  max-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.db-chat-contact-field {
  min-width: 10ch;
  max-width: 24ch;
}

#site-chat-note[data-state="success"] { color: #72d686; }
#site-chat-note[data-state="warning"] { color: #f6c26f; }
#site-chat-note[data-state="error"] { color: #f87171; }

@media (max-width: 520px) {
  .db-page-home .db-chat-log {
    min-height: 44dvh;
    max-height: 52dvh;
  }

  .db-page-home .db-chat-form {
    gap: 5px;
    padding: 7px;
  }

  .db-page-home .db-msg { max-width: 86%; }

  .db-chat-composer-footer {
    align-items: center;
  }

  .db-chat-contact-field {
    max-width: calc(100% - 64px);
  }
}