.overlay-page { margin: 0; background: transparent; overflow: hidden; }
.overlay-page .chat-surface { position: fixed; inset: 0; }
.chat-surface {
  --chat-size: 32px;
  --message-spacing: 0px;
  --background-opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8px;
  font-family: Montserrat, 'Noto Sans', sans-serif;
  font-weight: 800;
  font-size: var(--chat-size);
  line-height: 1.4;
  color: #fff;
  background: rgb(0 0 0 / var(--background-opacity));
  text-align: left;
  font-synthesis: none;
}
.chat-message { flex: 0 0 auto; margin-top: var(--message-spacing); min-width: 0; }
.chat-line, .chat-reply, .chat-notice {
  -webkit-text-stroke: 5px #000;
  paint-order: stroke fill;
  text-shadow: 2px 2px 4px #000;
  overflow-wrap: anywhere;
}
.chat-header { white-space: normal; }
.chat-name { margin-left: .2em; }
.chat-name:first-child { margin-left: 0; }
.chat-badge {
  display: inline-block;
  width: .8125em;
  height: .8125em;
  object-fit: contain;
  vertical-align: -.04em;
  margin-right: .125em;
  filter: drop-shadow(1px 1px 2px #0008);
}
.chat-content { white-space: pre-wrap; }
.emote-stack {
  position: relative;
  display: inline-grid;
  vertical-align: middle;
  max-width: 100%;
  line-height: 1;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.chat-emote { height: 1.5em; width: auto; max-width: 100%; object-fit: contain; display: block; grid-area: 1 / 1; }
.emote-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.chat-gif { display: inline-block; height: auto; max-height: 140px; max-width: 100%; vertical-align: middle; object-fit: contain; }
.chat-cheer { white-space: nowrap; }
.chat-emoji { display: inline-block; width: 1em; height: 1em; vertical-align: -.1em; }
.chat-reply { font-size: .55em; line-height: 1.5; color: #d2d0db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke-width: 3px; }
.chat-notice { font-size: .7em; color: #d2d0db; -webkit-text-stroke-width: 3px; }
.painted-name { display: inline-grid; }
.paint-outline, .paint-fill { grid-area: 1 / 1; }
.paint-outline { color: transparent; }
.paint-fill { background-size: cover; background-position: center; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; text-shadow: none; }
.image-fallback { font-size: .7em; color: inherit; }