/* Shared by the GWT race chat and the driver profile conversation. */
.dt-chat-history {
  box-sizing: border-box;
  padding: 8px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #55514a #141416;
  color-scheme: dark;
}
.dt-chat-message {
  box-sizing: border-box;
  width: fit-content;
  min-width: 9em;
  max-width: 88%;
  margin: .75em auto .75em 0;
  padding: .85em 1em .65em;
  border: 1px solid #36363b;
  border-radius: 12px 12px 12px 3px;
  background: #222225;
  color: #f1eee8;
  font: 14px/1.55 Inter, Arial, sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
}
.dt-chat-message.is-own {
  margin-left: auto;
  margin-right: 0;
  border-color: #625232;
  border-radius: 12px 12px 3px 12px;
  background: #302b20;
}
.dt-chat-message.has-driver { min-width: min(18em, 88%); }
.dt-chat-message .dt-chat-sender {
  margin-bottom: .4em;
  color: #e4dfd5;
  font: 600 .86em/1.5 Inter, Arial, sans-serif;
}
.dt-chat-message.is-own .dt-chat-sender { color: #f5d76e; }
.dt-chat-message .dt-chat-body {
  color: inherit;
  font: inherit;
  white-space: pre-wrap;
}
.dt-chat-message .dt-chat-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .35em .8em;
  margin-top: .45em;
  color: #b5b0a6;
  font: 400 .78em/1.5 Inter, Arial, sans-serif;
}
.dt-chat-footer time, .dt-chat-footer .dt-chat-time { font: inherit; }
.dt-chat-message a { color: #f5d76e; }
.dt-chat-body a { font: inherit; }
.dt-chat-message .dt-chat-action {
  padding: .25em 0;
  color: #d5c9ad;
  font: 600 1em/1.5 Inter, Arial, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dt-chat-message .dt-chat-action:hover { color: #ffe69a; }
.dt-chat-message a:focus-visible { outline: 2px solid #f5d76e; outline-offset: 3px; }
.dt-chat-message .dt-chat-moderation {
  display: flex;
  align-items: center;
  gap: .4em;
  margin-top: .65em;
  padding-top: .5em;
  border-top: 1px solid #ffffff14;
  font-size: .8em;
}
.dt-chat-moderation.is-active .dt-chat-action { color: #ffbdad; }
.dt-chat-message.is-deleted .dt-chat-body { color: #b5b0a6; font-style: italic; }
.dt-chat-separator {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 1.4em 0;
  color: #a9a49a;
  font: 600 11px/1.5 Inter, Arial, sans-serif;
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dt-chat-separator hr { flex: 1; min-width: 12px; border: 0; border-top: 1px solid #36363b; }
.dt-chat-separator span { font: inherit; }
.dt-chat-empty { padding: 28px 12px; color: #b5b0a6; text-align: center; font: 14px/1.6 Inter, Arial, sans-serif; }
.dt-chat-composer { padding: 12px; border-top: 1px solid #ffffff12; }
input.dt-chat-input, .profile-panel input.dt-chat-input {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: .8em 1em;
  border: 1px solid #47464a;
  border-radius: 9px;
  background: #111113;
  color: #f1eee8;
  font: 14px/1.5 Inter, Arial, sans-serif;
  box-shadow: none;
}
input.dt-chat-input::placeholder { color: #a4a098; opacity: 1; }
input.dt-chat-input:focus, .profile-panel input.dt-chat-input:focus {
  outline: 2px solid #f5d76e;
  outline-offset: 2px;
  border-color: #f5d76e;
}
.dt-chat-hint { margin: 7px 0 0; color: #a4a098; font: 11px/1.5 Inter, Arial, sans-serif; text-align: right; }
@media (max-width: 480px) {
  .dt-chat-history { padding: 6px 8px; }
  .dt-chat-message { max-width: 94%; }
}