/* Twitch's own chat rendering, reproduced on a transparent page.
   Metrics are Twitch's native values expressed in em so the whole thing scales
   from one --font-size knob (Twitch itself renders at 13px):
     font 13px / line-height 20px  -> 1.538
     badge 18px                    -> 1.385em
     emote 28px                    -> 2.154em
     line padding 5px 20px         -> 0.385em 1.538em
   Nothing here may paint a page background. */

:root {
  --font-size: 20px;
  --font:
    Inter, Roobert, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text: #efeff1;
  --line-height: 1.538;
  --badge-size: 1.385em;
  --emote-size: 2.154em;
  --pad-y: 0.385em;
  --pad-x: 1.538em;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: transparent;
  overflow: hidden;
}

#chat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  font-family: var(--font);
  font-size: var(--font-size);
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#chat.top {
  justify-content: flex-start;
}

/* One chat line, same box model as Twitch's .chat-line__message. */
.msg {
  padding: var(--pad-y) var(--pad-x);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  transition: opacity 0.6s ease;
}

.msg.leaving {
  opacity: 0;
}

.msg.enter {
  animation: msg-in 0.18s ease-out;
}

@keyframes msg-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msg.enter {
    animation: none;
  }
}

/* Optional: only switched on when readability over busy video demands it.
   Off by default so the look stays identical to native Twitch. */
.shadow .msg {
  text-shadow:
    -1px 0 2px #000,
    1px 0 2px #000,
    0 -1px 2px #000,
    0 1px 2px #000;
}

.badges {
  display: inline;
}

.badge {
  display: inline-block;
  height: var(--badge-size);
  width: var(--badge-size);
  margin-right: 0.3em;
  vertical-align: baseline;
  position: relative;
  top: 0.15em;
}

.avatar {
  display: inline-block;
  height: var(--badge-size);
  width: var(--badge-size);
  border-radius: 50%;
  margin-right: 0.3em;
  vertical-align: baseline;
  position: relative;
  top: 0.15em;
}

.name {
  font-weight: 700;
}

/* Twitch renders the colon in body colour, not the username colour. */
.sep {
  color: var(--text);
}

.emote {
  display: inline-block;
  max-height: var(--emote-size);
  vertical-align: middle;
  margin: -0.4em 0;
}

.msg.action .body {
  /* Twitch colours /me text with the username colour and does not italicise it. */
  color: inherit;
}

/* Twitch's own highlight treatments, alpha-adjusted so video shows through. */
.msg.highlight {
  background: rgba(145, 71, 255, 0.28);
  border-left: 0.3em solid #9147ff;
  padding-left: 1.238em;
}

.msg.first {
  background: rgba(255, 255, 255, 0.14);
  border-left: 0.3em solid #00c7ac;
  padding-left: 1.238em;
}

.reply {
  display: block;
  font-size: 0.75em;
  line-height: 1.4;
  color: rgba(239, 239, 241, 0.6);
}

/* YouTube extras have no Twitch equivalent; they follow YouTube's own colours. */
.msg.superchat {
  border-radius: 0.2em;
}

.amount {
  font-weight: 700;
  margin-right: 0.3em;
}

.msg.membership {
  background: rgba(15, 157, 88, 0.4);
  border-left: 0.3em solid #0f9d58;
  padding-left: 1.238em;
}