:root {
  --font-size: 20px;
  --font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --emote-size: 1.6em;
  --gap: 6px;
  --outline-color: rgba(0, 0, 0, 0.8);
  --text-color: #ffffff;
  --bg-color: transparent;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  overflow: hidden;
}

body.preview {
  background: repeating-conic-gradient(#2b2b2b 0% 25%, #1c1c1c 0% 50%) 50% / 24px 24px;
}

.chat-root {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
  padding: 8px;
  gap: var(--gap);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: 1.35;
  color: var(--text-color);
}

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

.msg {
  /* Plain inline flow (not flex) so the message text starts on the same line
     as the name and wraps underneath it, instead of the whole text block
     dropping to its own line when it doesn't fit beside the name. */
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  animation: msg-in 160ms ease-out;
  word-break: break-word;
}

/* box=0 / "Message box" off: no dark box behind ordinary messages (alerts
   and announcements keep their highlight). */
.chat-root.no-box .msg:not(.event):not(.announcement):not(.cheer):not(.superchat):not(.highlighted):not(.redeem):not(.effect) {
  background: transparent;
}

.msg.fading {
  animation: msg-out 400ms ease-in forwards;
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes msg-out {
  to {
    opacity: 0;
  }
}

.msg.event {
  background: linear-gradient(90deg, rgba(145, 71, 255, 0.55), rgba(145, 71, 255, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.25);
  width: 100%;
}

.msg.announcement {
  --announce-color: #9146ff;
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border-left: 4px solid var(--announce-color);
}
.msg.announcement::before {
  display: block;
  content: "Announcement";
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--announce-color);
}
.msg.announcement[data-color="blue"] { --announce-color: #00d6d6; }
.msg.announcement[data-color="green"] { --announce-color: #00db84; }
.msg.announcement[data-color="orange"] { --announce-color: #ffb31a; }
.msg.announcement[data-color="purple"] { --announce-color: #9146ff; }

.msg.cheer,
.msg.superchat,
.msg.highlighted,
.msg.redeem {
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border-left: 4px solid #9146ff;
}
.msg.superchat {
  border-left-color: #ffca28;
}
/* "Cheered 50 bits" / "Super Chat · €5.00" / "Highlighted message" / "Redeemed · <reward>" */
.msg.cheer::before,
.msg.superchat::before,
.msg.highlighted::before,
.msg.redeem::before {
  display: block;
  content: attr(data-label);
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b9a3ff;
}
.msg.superchat::before {
  color: #ffca28;
}
/* Channel points "Highlight My Message" - Twitch's own highlight colour */
.msg.highlighted {
  border-left-color: #755ebc;
  background: rgba(117, 94, 188, 0.35);
}
.msg.redeem {
  border-left-color: #00c8af;
}
.msg.redeem::before {
  color: #5ce0cf;
}

/* "Gigantify an Emote" power-up */
.emote.gigantified {
  max-width: 100%;
}

/* "Message Effects" power-up: an animated background per effect. Twitch adds
   effects over time; unknown ones get the generic shimmer. */
.msg.effect {
  width: 100%;
  background-size: 300% 300%;
  animation: msg-in 160ms ease-out, effect-shift 6s ease-in-out infinite;
}
.msg.effect,
.msg.effect.effect- {
  background-image: linear-gradient(120deg, rgba(145, 70, 255, 0.55), rgba(0, 200, 175, 0.45), rgba(255, 90, 160, 0.5));
}
.msg.effect-simmer {
  background-image: linear-gradient(120deg, rgba(255, 120, 0, 0.6), rgba(255, 40, 60, 0.55), rgba(255, 200, 0, 0.55));
}
.msg.effect-rainbow-eclipse {
  background-image: linear-gradient(120deg, rgba(255, 0, 80, 0.5), rgba(255, 200, 0, 0.5), rgba(0, 220, 120, 0.5), rgba(0, 140, 255, 0.5), rgba(170, 60, 255, 0.5));
}
.msg.effect-cosmic-abyss {
  background-image: linear-gradient(120deg, rgba(20, 10, 60, 0.85), rgba(90, 40, 200, 0.7), rgba(10, 60, 140, 0.8));
}
@keyframes effect-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.cheermote {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-weight: 700;
}
.cheermote img {
  height: var(--emote-size);
  width: auto;
}

.msg.event .event-text {
  font-weight: 700;
  text-shadow: 0 1px 3px var(--outline-color), 0 0 6px var(--outline-color);
}

.msg .platform-icon {
  width: 1em;
  height: 1em;
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0.3em;
}
.msg .platform-icon svg {
  width: 100%;
  height: 100%;
}

.msg .avatar {
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.3em;
}

.msg .badges {
  display: inline-flex;
  gap: 0.2em;
  vertical-align: middle;
  margin-right: 0.3em;
}
.msg .badges img {
  width: 1.15em;
  height: 1.15em;
  vertical-align: middle;
}

.msg .name {
  font-weight: 700;
  text-shadow: 0 1px 3px var(--outline-color), 0 0 6px var(--outline-color);
  white-space: nowrap;
  margin-right: 0.3em;
}

.msg .colon {
  opacity: 0.85;
  margin-right: 0.2em;
}

.msg .content {
  text-shadow: 0 1px 3px var(--outline-color);
}

img.emoji {
  height: 1.2em;
  width: 1.2em;
  vertical-align: -0.2em;
  margin: 0 0.05em;
}

.chat-gif {
  display: block;
  max-width: 200px;
  max-height: 150px;
  width: auto;
  height: auto;
  border-radius: 6px;
  margin-top: 4px;
}

.emote-stack {
  position: relative;
  display: inline-block;
  height: var(--emote-size);
  vertical-align: middle;
}
.emote-stack img {
  height: var(--emote-size);
  width: auto;
  display: block;
}
.emote-stack .overlay {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.status-dot {
  position: fixed;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #888;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  z-index: 999;
}
.status-dot.ok {
  background: #3cd23c;
}
.status-dot.bad {
  background: #d23c3c;
}

/* "#channel" / "@user" tag, shown when watching more than one channel */
.msg .channel-tag {
  margin-right: 0.3em;
  padding: 0 0.35em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

/* keep fade-out working on effect messages (fade=... overlay option) */
.msg.effect.fading {
  animation: msg-out 400ms ease-in forwards;
}

/* Moderator view in the app: removed by a moderator, kept visible for unbanning */
.msg.removed {
  width: 100%;
  opacity: 0.55;
  border-left: 4px solid #ff6b6b;
}
.msg.removed .content {
  text-decoration: line-through;
}
.msg.removed::before {
  display: block;
  content: attr(data-label);
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ff8080;
}
.msg.removed[data-removed="unbanned"] {
  border-left-color: #3cd23c;
}
.msg.removed[data-removed="unbanned"]::before {
  color: #7de07d;
}