@import url('https://fonts.googleapis.com/css2\
?family=Noto+Color+Emoji\
&family=Noto+Sans+JP:wght@400..700\
&family=Roboto:ital,wdth,wght@0,75,400;0,100,400..700;1,100,400\
&display=swap');

html {
  font-size: 18px;
}

html[data-scale="2"] {
  font-size: 36px;
}

html[data-scale="3"] {
  font-size: 72px;
}

body {
  background-color: #18181b; /* OBS will remove the background */
  color: white;
  font-family: 'Roboto', 'Noto Sans JP', 'Noto Color Emoji', sans-serif;
  margin: 0;
}

html[data-join="1"] .channel {
  display: none;
}

#chat-container {
  box-sizing: border-box;
  display: flex;
  filter: drop-shadow(0 0 0.1rem black) drop-shadow(0 0 0.1rem black);
  flex-direction: column-reverse;
  height: 100vh;
  padding: 0.4rem;
}

p {
  line-height: 1.777778;
  margin: 0;
}

.error {
  background-color: #7f3f497f;
}

.chat-line {
  align-items: baseline;
  display: flex;
  gap: 0 0.4em;
  justify-content: start;
}

.emote-stack,
img {
  vertical-align: middle;
}

.system-msg img,
.channel img {
  border-radius: 0.5em;
  max-height: 1em;
}

.timestamp {
  font-family: monospace;
  font-size: 0.8em;
}

.badges {
  flex-shrink: 0;
}

.badges img {
  font-size: 0.5em;
  max-height: 1rem;
}

.badges img + .pronouns,
.badges img + img {
  margin-left: 0.2rem;
}

.pronouns {
  border: 0.07em solid;
  border-radius: 0.4em;
  font-size: 0.8em;
  font-stretch: condensed;
  padding: 0 0.1em;
}

.hidden {
  display: none;
}

.nick {
  font-weight: bold;
}

.login {
  font-size: 0.8em;
  font-weight: 500;
}

.USERNOTICE {
  background-color: #c466ff64;
  border-right: 0.5em solid transparent;
  border-image-slice: 1;
}

.USERNOTICE[data-msg-param-color="BLUE"] {
  border-image-source: linear-gradient(#00d6d6, #9146ff);
}
.USERNOTICE[data-msg-param-color="GREEN"] {
  border-image-source: linear-gradient(#00db84, #57bee6);
}
.USERNOTICE[data-msg-param-color="ORANGE"] {
  border-image-source: linear-gradient(#ffb31a, #e0e000);
}
.USERNOTICE[data-msg-param-color="PURPLE"] {
  border-image-source: linear-gradient(#9146ff, #ff75e6);
}

.emote-notice,
.CLEARCHAT,
.NOTICE {
  color: #fff8;
}

.JOIN,
.PART {
  color: #fff5;
}

.JOIN .message,
.PART .message {
  align-self: end;
}

.system-msg,
.action .message {
  font-style: italic;
}

.PRIVMSG[data-first-msg="1"] {
  background-color: #487f3f3c;
}
.PRIVMSG[data-custom-reward-id] {
  background-color: #1c7e8d3c;
}
.PRIVMSG[data-bits] {
  background-color: #ffae423c;
}

.reply i {
  float: left;
  font-size: 0.8em;
  line-height: initial;
  margin-top: 0.777778em;
  width: 100%;
}

.reply i::before {
  content: "\21aa\fe0e\ ";
}

.emote-stack {
  align-items: center;
  display: inline-grid;
  justify-items: center;
}

.emote-stack img {
  grid-column-start: 1;
  grid-row-start: 1;
}

.delete {
  text-decoration: line-through 0.24em #ff00007f;
}

@media (max-width: 40rem) {
  .chat-line { display: block; }
  .reply i   { float: none; }
}
.wrap .chat-line { display: block; }
.wrap .reply i   { float: none; }

.fade-out {
  animation: fade-out 0.4s ease-in-out 1;
  opacity: 0;
}

@keyframes fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/*
 * BetterTTV effects and styles
 */

.cursed {
  --filter: grayscale(1) brightness(0.7) contrast(2.5);
  filter: var(--filter);
}

.flip-x   { --transform-flip-x: scaleX(-1); }
.flip-y   { --transform-flip-y: scaleY(-1); }
.rotate-l { --transform-rotate: rotate(-90deg); }
.rotate-r { --transform-rotate: rotate( 90deg); }

.rotate-l.rotate-r { --transform-rotate:; }

.flip-x,
.flip-y,
.rotate-l,
.rotate-r {
  --transform-rot-flip: var(--transform-rotate,)
                        var(--transform-flip-y,)
                        var(--transform-flip-x,);
  transform: var(--transform-rot-flip);
}

.party { animation: party 1.5s linear     infinite; }
.shake { animation: shake 0.5s step-start infinite; }

.party.shake {
  animation: party 1.5s linear infinite, shake 500ms step-start infinite;
}

@keyframes party {
  0%   { filter: var(--filter,) sepia(0.5) hue-rotate(  0deg) saturate(2.5); }
  100% { filter: var(--filter,) sepia(0.5) hue-rotate(360deg) saturate(2.5); }
}

@keyframes shake {
  0%   { transform: translate( 0     ,  0.06em) var(--transform-rot-flip,); }
  10%  { transform: translate( 0.12em,  0     ) var(--transform-rot-flip,); }
  20%  { transform: translate( 0.06em, -0.12em) var(--transform-rot-flip,); }
  30%  { transform: translate(-0.12em,  0.06em) var(--transform-rot-flip,); }
  40%  { transform: translate( 0     , -0.06em) var(--transform-rot-flip,); }
  50%  { transform: translate( 0.12em,  0.12em) var(--transform-rot-flip,); }
  60%  { transform: translate(-0.06em, -0.06em) var(--transform-rot-flip,); }
  70%  { transform: translate(-0.12em,  0.12em) var(--transform-rot-flip,); }
  80%  { transform: translate( 0.12em,  0.06em) var(--transform-rot-flip,); }
  90%  { transform: translate(-0.06em, -0.12em) var(--transform-rot-flip,); }
  100% { transform: translate( 0.06em,  0     ) var(--transform-rot-flip,); }
}

.glow {
  text-shadow: 0 0 1em currentcolor;
}

/*
 * FrankerFaceZ effects and styles
 */

.rainbow     { animation: rainbow     2s   linear infinite; }
.hyper-shake { animation: hyper-shake 0.1s linear infinite; }
.jam         { animation: jam         0.6s linear infinite; }
.bounce      { animation: bounce      0.5s linear infinite; }
.hyper-red   {
  filter: brightness(0.2) sepia(1) brightness(2.2) contrast(3) saturate(8);
}

@keyframes rainbow {
  0%   { filter: hue-rotate(  0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes hyper-shake {
  0%   { transform: translate( 0.06em,  0.06em); }
  10%  { transform: translate(-0.06em, -0.12em); }
  20%  { transform: translate(-0.18em,  0     ); }
  30%  { transform: translate( 0.18em,  0.12em); }
  40%  { transform: translate( 0.06em, -0.06em); }
  50%  { transform: translate(-0.06em,  0.12em); }
  60%  { transform: translate(-0.18em,  0.06em); }
  70%  { transform: translate( 0.18em,  0.06em); }
  80%  { transform: translate(-0.06em, -0.06em); }
  90%  { transform: translate( 0.06em,  0.12em); }
  100% { transform: translate( 0.06em, -0.12em); }
}

@keyframes jam {
  0%   { transform: translate( -0.12em, -0.12em) rotate(-6deg); }
  10%  { transform: translate( -0.09em, -0.12em) rotate(-8deg); }
  20%  { transform: translate(  0.06em, -0.09em) rotate(-8deg); }
  30%  { transform: translate(  0.18em,  0.15em) rotate(-6deg); }
  40%  { transform: translate(  0.18em,  0.24em) rotate(-2deg); }
  50%  { transform: translate(  0.12em,  0.24em) rotate( 3deg); }
  60%  { transform: translate(  0.06em,  0.24em) rotate( 3deg); }
  70%  { transform: translate( -0.03em,  0.18em) rotate( 2deg); }
  80%  { transform: translate(-0.075em,  0.06em) rotate( 0deg); }
  90%  { transform: translate(-0.105em, -0.03em) rotate(-2deg); }
  100% { transform: translate( -0.12em, -0.12em) rotate(-5deg); }
}

@keyframes bounce {
  0%      { transform: scale( 0.8, 1  ); }
  10%     { transform: scale( 0.9, 0.8); }
  20%     { transform: scale( 1  , 0.4); }
  25%     { transform: scale( 1.2, 0.3); }
  25.001% { transform: scale(-1.2, 0.3); }
  30%     { transform: scale(-1  , 0.4); }
  40%     { transform: scale(-0.9, 0.8); }
  50%     { transform: scale(-0.8, 1  ); }
  60%     { transform: scale(-0.9, 0.8); }
  70%     { transform: scale(-1  , 0.4); }
  75%     { transform: scale(-1.2, 0.3); }
  75.001% { transform: scale( 1.2, 0.3); }
  80%     { transform: scale( 1  , 0.4); }
  90%     { transform: scale( 0.9, 0.8); }
  100%    { transform: scale( 0.8, 1  ); }
}

.badges .ffz-bot {
  background-color: #00ad03;
  border-radius: 0.2em;
  content: url(https://cdn.frankerfacez.com/badge/2/1);
}

html[data-scale="2"] .badges .ffz-bot {
  content: url(https://cdn.frankerfacez.com/badge/2/2);
}

html[data-scale="3"] .badges .ffz-bot {
  content: url(https://cdn.frankerfacez.com/badge/2/4);
}

/*
 * 7TV name paints
 */

.paint {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-color: currentcolor;
  background-size: 100% 100%;
}

/*
 * Predefined styles
 */

.colon .PRIVMSG:not(.action) > .nick::after {
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background: initial;
  color: white;
  content: ":";
  filter: initial;
}

.first .PRIVMSG[data-first-msg="1"] {
  background-color: initial;
}