.match-chat {
  --chat-primary: var(--dark-solid, #a8253c);
  --chat-primary-hover: var(--dark-solid-hover, #851e30);
  --chat-text: var(--scoreboard-ink, #351e24);
  --chat-muted: var(--scoreboard-muted, #6c4d54);
  --chat-line: var(--scoreboard-border, #ecd5d8);
  --chat-surface: var(--scoreboard-surface, #fff);
  --chat-tint: var(--scoreboard-tint, #fbf2f3);
  --chat-own: var(--scoreboard-accent-tint, #fbe9ec);
  --chat-accent: var(--scoreboard-accent, #ae1d31);
  container-type: inline-size;
  max-width: 820px;
  min-width: 0;
  margin-inline: auto;
  color: var(--chat-text);
}
.match-chat [hidden] { display: none !important; }
.match-chat :is(button, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--chat-accent);
  outline-offset: 3px;
}
.match-chat-guest,
.match-chat-room {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--chat-line);
  border-radius: 17px;
  background: var(--chat-surface);
  box-shadow: 0 10px 28px #501c2e0d;
}
.match-chat-guest {
  max-width: 480px;
  margin-inline: auto;
}
.match-chat-intro,
.match-chat-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--scoreboard-hero, linear-gradient(112deg, #691527, #932131 65%, #ab303c));
}
.match-chat-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 20px;
}
.match-chat-pitch {
  position: absolute;
  z-index: -1;
  inset-inline-end: -85px;
  inset-block-end: -100px;
  width: 260px;
  height: 160px;
  border: 1px solid #ffd3db4d;
  border-radius: 5px;
  transform: rotate(-18deg);
  pointer-events: none;
  background: linear-gradient(90deg, transparent 49.8%, #ffd3db4d 50%, transparent 50.5%);
}
.match-chat-pitch::before,
.match-chat-pitch::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  border: 1px solid #ffd3db4d;
  transform: translateY(-50%);
}
.match-chat-pitch::before {
  inset-inline-start: 40%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.match-chat-pitch::after {
  inset-inline-start: -1px;
  width: 21%;
  height: 47%;
}
.match-chat-emblem {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #ffd3db50;
  border-radius: 12px;
  background: #ffd3db1a;
  color: #ffe5ea;
}
.match-chat-emblem > span {
  position: relative;
  width: 19px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
}
.match-chat-emblem > span::before {
  content: '';
  position: absolute;
  inset-inline-start: 3px;
  inset-block-end: -4px;
  width: 4px;
  height: 4px;
  border-inline-start: 1.5px solid currentColor;
  transform: skewY(-38deg);
}
.match-chat-emblem > span::after {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 4px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 4px 0 currentColor, 8px 0 currentColor;
}
.match-chat-intro h3 {
  margin: 0;
  color: inherit;
  font: 800 22px/1.2 var(--display, sans-serif);
  letter-spacing: -.025em;
}
.match-chat-intro p {
  max-width: 28ch;
  margin: 6px 0 0;
  color: #f9e5e9;
  font-size: 13px;
  line-height: 1.55;
}
.match-chat-auth {
  min-width: 0;
  padding: 19px 20px 20px;
}
.match-chat-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-block-start: 12px;
  color: var(--chat-muted);
  font-size: 12px;
}
.match-chat-policies p { flex-basis: 100%; margin: 0; }
.match-chat-policies a { color: var(--chat-accent); text-decoration: underline; text-underline-offset: 2px; }
.match-chat-google {
  display: flex;
  width: 100%;
  min-height: 44px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid #747775;
  border-radius: 9px;
  background: #fff;
  color: #1f1f1f;
  padding: 8px 12px;
  font: 550 14px/20px 'Google Sans', var(--font, sans-serif);
  text-align: center;
}
.match-chat-google img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.match-chat-google:not(:disabled):hover { background: #f7f8f8; }
.match-chat textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--chat-line);
  border-radius: 9px;
  background: var(--chat-surface);
  color: var(--chat-text);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 9px 11px;
}
.match-chat textarea:focus {
  border-color: var(--chat-accent);
  background: var(--chat-surface);
}
.match-chat .match-chat-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 1px solid var(--chat-primary);
  border-radius: 9px;
  background: var(--chat-primary);
  color: #fff;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 750;
}
.match-chat-primary:not(:disabled):hover { background: var(--chat-primary-hover); }
.match-chat-primary > span {
  font-size: 16px;
  line-height: 1;
}
.match-chat-primary > span:dir(rtl) { transform: scaleX(-1); }
.match-chat-status,
.match-chat-history-status {
  color: var(--chat-muted);
  margin: 0;
  overflow-wrap: anywhere;
}
.match-chat-status {
  padding: 10px 12px;
  margin-block-end: 10px;
  border: 1px solid var(--chat-line);
  border-radius: 9px;
  background: var(--chat-tint);
  font-size: 13px;
}
.match-chat-retry { margin-block-end: 12px; }
.match-chat-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
}
.match-chat-room-heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.match-chat-room-heading strong { font: 750 15px/1.25 var(--display, sans-serif); }
.match-chat-room-heading span { color: #f9e5e9; font-size: 12px; }
.match-chat .match-chat-logout {
  min-height: 44px;
  flex: 0 0 auto;
  max-width: 42%;
  border: 1px solid #ffd3db80;
  border-radius: 9px;
  background: #fff1;
  color: #fff;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.match-chat-logout:not(:disabled):hover { background: #fff3; }
.match-chat .match-chat-logout:focus-visible { outline-color: #fce4ea; }
.match-chat-history {
  min-height: 184px;
  max-height: min(390px, 48vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  background: var(--chat-tint);
}
.match-chat-history:focus-visible { outline-offset: -3px; }
.match-chat-history-status {
  padding-block: 14px;
  text-align: center;
  font-size: 13px;
}
.match-chat-history-status:empty { display: none; }
.match-chat-history-status:not(:empty):has(+ .match-chat-messages:empty) { padding-block: 62px; }
.match-chat-messages {
  display: grid;
  align-items: start;
  justify-items: start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.match-chat-message {
  display: flex;
  align-items: end;
  gap: 7px;
  min-width: 0;
  max-width: 94%;
  overflow-wrap: anywhere;
}
.match-chat-message.is-own { justify-self: end; }
.match-chat-avatar {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--chat-own);
  color: var(--chat-accent);
  font-size: 12px;
  font-weight: 800;
}
.match-chat-bubble {
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--chat-line);
  border-radius: 12px 12px 12px 4px;
  background: var(--chat-surface);
}
.match-chat-message.is-own .match-chat-bubble {
  border-color: var(--chat-line);
  border-radius: 12px 12px 4px 12px;
  background: var(--chat-own);
}
.match-chat-message header { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; }
.match-chat-message strong { color: var(--chat-text); font-size: 12px; }
.match-chat-message time { color: var(--chat-muted); font-size: 11px; }
.match-chat-message p { margin: 3px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.match-chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 11px 12px;
  border-top: 1px solid var(--chat-line);
}
.match-chat-compose textarea { display: block; min-height: 46px; resize: vertical; }
.match-chat button:disabled { opacity: .6; cursor: default; }
@container (min-width: 575px) {
  .match-chat-intro { padding: 23px; }
  .match-chat-intro h3 { font-size: 25px; }
  .match-chat-intro p { font-size: 14px; }
  .match-chat-auth { padding: 18px 23px; }
  .match-chat :is(.match-chat-header, .match-chat-history, .match-chat-compose) { padding-inline: 18px; }
  .match-chat-message { max-width: 84%; }
}