/* Twitch Chat Overlay: clean default look (transparent page, white text, drop shadow). Chromium 103 safe. */

/* Stable class names for OBS "Custom CSS": #chat .lines .line .reply .badges .badge .name .colon .message
   .emote-stack .emote .zw .cheer .gif, line modifiers .action .first-msg .highlight .announcement .notice .mirrored,
   #chat modifiers .layout-vertical .layout-horizontal .align-bottom .align-top .has-bg */

html,
body {
  background: transparent;
  margin: 0;
  overflow: hidden;
}

/* ---------- container ---------- */
#chat {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 8px;
  font-family: var(--font, 'Inter'), 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.35;
  color: #fff;
  font-weight: 600;
}
#chat.size-small { font-size: 18px; }
#chat.size-medium { font-size: 24px; }
#chat.size-large { font-size: 32px; }

/* layout=vertical: lines sit on the bottom edge (newest last) or the top edge (newest first); overflow is clipped and trimmed.
   The .3em vertical padding leaves room for emotes (negative .3em margins) and shadows at the edge. */
.lines {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding-top: .3em;
  padding-bottom: .3em;
  padding-left: inherit;
  padding-right: inherit;
}
#chat.align-bottom .lines { top: auto; bottom: 0; }
#chat.align-top .lines { top: 0; bottom: auto; }

/* ---------- lines ---------- */
.line {
  padding: .15em 0;
  filter: var(--shadow, drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(1px 2px 2px rgba(0,0,0,.75)));
}

/* bg=1..100: a dark box behind each line (.2em vertical padding keeps 1.75em emotes inside the box) */
.has-bg .line {
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: .15em 0;
  padding: .2em .4em;
  border-radius: .4em;
  background-color: rgba(0, 0, 0, var(--bg-alpha, 0));
}

.name { font-weight: 800; }
.message { overflow-wrap: anywhere; }

/* /me: italic in the name color (color set inline) */
.line.action .message { font-style: italic; }

/* first-msg=1 (only when first_msg is enabled) */
.line.first-msg {
  box-shadow: inset .2em 0 0 #9146FF;
  padding-left: .4em;
}

/* channel-points highlighted message */
.line.highlight {
  background-color: rgba(145, 70, 255, .35);
  border-radius: .3em;
  padding-left: .3em;
  padding-right: .3em;
}

/* /announce: a colored bar on the left (longhands only, so the bg/highlight color stays) */
.line.announcement {
  padding-left: .5em;
  background-image: linear-gradient(var(--ann1, #9146FF), var(--ann2, #9146FF));
  background-size: .25em 100%;
  background-repeat: no-repeat;
  background-position: left top;
}
.ann-primary { --ann1: #9146FF; --ann2: #9146FF; }
.ann-blue { --ann1: #00D6D6; --ann2: #9146FF; }
.ann-green { --ann1: #00DB84; --ann2: #57BEE6; }
.ann-orange { --ann1: #FFB31A; --ann2: #E0E000; }
.ann-purple { --ann1: #9146FF; --ann2: #FF75E6; }

/* sub / resub / gift / raid notices */
.line.notice { font-size: .85em; }
.line.notice .message { color: #E2D6FF; }

/* ---------- reply header ---------- */
.reply {
  display: block;
  font-size: .75em;
  opacity: .7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-name { font-weight: 800; }

/* ---------- badges ---------- */
.badges:empty { display: none; }
.badge {
  height: 1em;
  width: auto;
  vertical-align: middle;
  margin-right: .25em;
}
.badge.avatar { border-radius: 50%; }
.badge-wrap {
  display: inline-flex;
  vertical-align: middle;
  margin-right: .25em;
  border-radius: .15em;
  overflow: hidden;
}
.badge-wrap > .badge {
  display: block;
  margin-right: 0;
}

/* ---------- 7TV paints (base; per-paint rules are injected as .painted.p-<id>) ---------- */
.painted {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ---------- emotes (zero-width overlays stack in one grid cell) ---------- */
.emote-stack {
  --eh: var(--emote-h, 1.75em);
  display: inline-grid;
  vertical-align: middle;
  margin: -.3em .05em;
  max-width: 100%;
}
.emote-stack.big { --eh: calc(var(--emote-h, 1.75em) * 3); }
.emote-stack > .emote {
  grid-area: 1 / 1;
  margin: auto;
  height: var(--eh);
  width: auto;
  max-width: none;
}
/* FlipX/FlipY/rotate compose through CSS vars (no individual scale/rotate properties in Chromium 103) */
.emote-stack.fx { transform: rotate(var(--rot, 0deg)) scale(var(--sx, 1), var(--sy, 1)); }
.emote-stack.cursed { filter: grayscale(1) brightness(0.7) contrast(2.5); }
.emote-stack.zs { margin-left: -.05em; }

/* ---------- cheers ---------- */
.cheer { white-space: nowrap; }
.cheer-img {
  height: var(--emote-h, 1.75em);
  width: auto;
  vertical-align: middle;
  margin: -.3em .05em;
}
.cheer-amount { font-weight: 800; }

/* ---------- Giphy GIFs: fixed height (no reflow on load), capped at 3x emote height and the line width ---------- */
.gif {
  height: calc(var(--emote-h, 1.75em) * 3);
  max-height: calc(var(--emote-h, 1.75em) * 3);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
  margin: .1em 0;
}

/* ---------- layout=horizontal: one row, newest on the right, older lines slide off the left edge ----------
   A line never wraps: past the chat width it is cut off with an ellipsis. align runs the row along the
   bottom or the top edge of the source. GIFs and gigantified emotes are drawn at emote height so the row
   keeps one height. The rules below .lines use classes only, so OBS Custom CSS such as
   `.layout-horizontal .line { max-width: 30em; }` overrides them. */
#chat.layout-horizontal .lines {
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0 1em;
}
#chat.layout-horizontal.align-top .lines { align-items: flex-start; }
#chat.layout-horizontal.has-bg .lines { gap: 0 .4em; }
.layout-horizontal .line {
  flex: none;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  white-space: nowrap;
  /* clip, not hidden: emotes may still overflow the line vertically */
  overflow-x: clip;
  text-overflow: ellipsis;
}
/* A reply header makes a line at most 15em wide; longer ones end in an ellipsis. */
.layout-horizontal .reply { max-width: 15em; }
.layout-horizontal .emote-stack.big { --eh: var(--emote-h, 1.75em); }
/* An emote's box, with its width reserved up front: a GIF has no size until it loads, and growing then
   would shove the whole row sideways. object-fit: contain letterboxes other shapes. */
.layout-horizontal .gif {
  width: calc(var(--emote-h, 1.75em) * 16 / 9);
  height: var(--emote-h, 1.75em);
  max-height: var(--emote-h, 1.75em);
  margin: -.3em .05em;
}

/* ---------- animations ---------- */
@keyframes tco-in {
  from { opacity: 0; transform: translateY(.4em); }
  to { opacity: 1; transform: none; }
}
@keyframes tco-in-x {
  from { opacity: 0; transform: translateX(.6em); }
  to { opacity: 1; transform: none; }
}
@keyframes tco-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ---------- status hint and debug line (overlay.html #hint / #debug) ---------- */
.tco-hint {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 10;
  padding: 12px 16px;
  border-left: 4px solid #9146FF;
  border-radius: 8px;
  background: rgba(24, 24, 27, .92);
  color: #fff;
  font: 600 16px/1.4 'Segoe UI', Roboto, Arial, sans-serif;
}
.tco-hint a { color: #BF94FF; }
.tco-debug {
  position: fixed;
  top: 4px;
  left: 4px;
  right: 4px;
  z-index: 11;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .75);
  color: #7CFC7C;
  font: 12px/1.3 Consolas, 'Courier New', monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
.tco-hint[hidden],
.tco-debug[hidden] { display: none; }