html:root[data-platform='desktop'] #chat #chatFeed .message-author-line > .message-author-spark-shell {
  --spark-color: #55d7ee;
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  max-width: min(38ch, calc(100% - 44px));
  height: 20px;
  min-height: 20px;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-author-spark-shell > .message-author {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100% !important;
  height: 20px;
  min-height: 20px;
  line-height: 20px !important;
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message.krita-bot .message-author-spark-shell {
  --spark-color: #55d7ee;
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message.guardian:not(.krita-bot) .message-author-spark-shell {
  --spark-color: var(--studio-role-guardian, #55efb5);
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message.moderator:not(.guardian, .krita-bot) .message-author-spark-shell {
  --spark-color: var(--studio-role-moderator, #ff5878);
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message.superfan:not(.guardian, .moderator, .krita-bot) .message-author-spark-shell {
  --spark-color: var(--studio-role-superfan, #f4c35b);
}

html:root[data-platform='desktop']:is([data-theme='white-titanium'], [data-theme='rose-gold-glass'], [data-theme='rose-glass'], [data-theme='sloneczna-polana']) #chat #chatFeed .chat-message.guardian:not(.krita-bot) .message-author-spark-shell {
  --spark-color: #147b51;
}

html:root[data-platform='desktop']:is([data-theme='white-titanium'], [data-theme='rose-gold-glass'], [data-theme='rose-glass'], [data-theme='sloneczna-polana']) #chat #chatFeed .chat-message.moderator:not(.guardian, .krita-bot) .message-author-spark-shell {
  --spark-color: #cf3058;
}

html:root[data-platform='desktop']:is([data-theme='white-titanium'], [data-theme='rose-gold-glass'], [data-theme='rose-glass'], [data-theme='sloneczna-polana']) #chat #chatFeed .chat-message.superfan:not(.guardian, .moderator, .krita-bot) .message-author-spark-shell {
  --spark-color: #8f6705;
}

html:root[data-platform='desktop'][data-theme='sloneczna-polana'] #chat #chatFeed .chat-message.krita-bot .message-author-spark-shell {
  --spark-color: #063f3a;
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message {
  position: relative;
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message.krita-bot {
  --avatar-spark-color: #55d7ee;
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message.guardian:not(.krita-bot) {
  --avatar-spark-color: var(--studio-role-guardian, #55efb5);
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message.moderator:not(.guardian, .krita-bot) {
  --avatar-spark-color: var(--studio-role-moderator, #ff5878);
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message.superfan:not(.guardian, .moderator, .krita-bot) {
  --avatar-spark-color: var(--studio-role-superfan, #f4c35b);
}

html:root[data-platform='desktop']:is([data-theme='white-titanium'], [data-theme='rose-gold-glass'], [data-theme='rose-glass'], [data-theme='sloneczna-polana']) #chat #chatFeed .chat-message.guardian:not(.krita-bot) {
  --avatar-spark-color: #147b51;
}

html:root[data-platform='desktop']:is([data-theme='white-titanium'], [data-theme='rose-gold-glass'], [data-theme='rose-glass'], [data-theme='sloneczna-polana']) #chat #chatFeed .chat-message.moderator:not(.guardian, .krita-bot) {
  --avatar-spark-color: #cf3058;
}

html:root[data-platform='desktop']:is([data-theme='white-titanium'], [data-theme='rose-gold-glass'], [data-theme='rose-glass'], [data-theme='sloneczna-polana']) #chat #chatFeed .chat-message.superfan:not(.guardian, .moderator, .krita-bot) {
  --avatar-spark-color: #8f6705;
}

html:root[data-platform='desktop'][data-theme='sloneczna-polana'] #chat #chatFeed .chat-message.krita-bot {
  --avatar-spark-color: #063f3a;
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message > .message-avatar-sparks {
  position: absolute;
  top: var(--avatar-spark-top, 0px);
  left: var(--avatar-spark-left, 0px);
  z-index: 3;
  width: var(--avatar-spark-width, 0px);
  height: var(--avatar-spark-height, 0px);
  overflow: visible;
  color: var(--avatar-spark-color, #55d7ee);
  pointer-events: none;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-avatar-sparks i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px 1px currentColor;
  opacity: 0;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-avatar-sparks i:nth-child(1) {
  top: 0;
  left: 48%;
  --spark-drift: -2px;
  --spark-far: -4px;
  animation-delay: -.3s;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-avatar-sparks i:nth-child(2) {
  top: 16%;
  left: 84%;
  --spark-drift: 3px;
  --spark-far: 6px;
  animation-delay: -.9s;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-avatar-sparks i:nth-child(3) {
  top: 55%;
  left: 97%;
  --spark-drift: 4px;
  --spark-far: 7px;
  animation-delay: -1.5s;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-avatar-sparks i:nth-child(4) {
  top: 91%;
  left: 70%;
  --spark-drift: 2px;
  --spark-far: 4px;
  animation-delay: -2.1s;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-avatar-sparks i:nth-child(5) {
  top: 82%;
  left: 14%;
  --spark-drift: -3px;
  --spark-far: -6px;
  animation-delay: -2.7s;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-avatar-sparks i:nth-child(6) {
  top: 34%;
  left: 0;
  --spark-drift: -4px;
  --spark-far: -7px;
  animation-delay: -3.3s;
}

html:root[data-platform='desktop'] #chat #chatFeed .chat-message.message-avatar-sparks-visible > .message-avatar-sparks i {
  animation-name: nickname-rising-spark;
  animation-duration: 3.6s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-author-sparks {
  position: absolute;
  inset: 0;
  color: var(--spark-color);
  pointer-events: none;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-author-sparks i {
  position: absolute;
  top: 15px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px 1px currentColor;
  opacity: 0;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-author-sparks i:nth-child(1) {
  left: 18%;
  --spark-drift: -6px;
  --spark-far: -9px;
  animation-delay: -.7s;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-author-sparks i:nth-child(2) {
  left: 45%;
  --spark-drift: 4px;
  --spark-far: 6px;
  animation-delay: -1.2s;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-author-sparks i:nth-child(3) {
  left: 72%;
  --spark-drift: -3px;
  --spark-far: -5px;
  animation-delay: -1.7s;
}

html:root[data-platform='desktop'] #chat #chatFeed .message-author-sparks i:nth-child(4) {
  left: 86%;
  --spark-drift: -2px;
  --spark-far: -4px;
  animation-delay: -2.2s;
}

html:root[data-platform='desktop'] #chat #chatFeed .nickname-sparks-visible .message-author-sparks i {
  animation-name: nickname-rising-spark;
  animation-duration: 3.6s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes nickname-rising-spark {
  0%, 12%, 65%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(.25); }
  19% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  43% { opacity: .9; transform: translate3d(var(--spark-drift), -10px, 0) scale(.8); }
  64% { opacity: 0; transform: translate3d(var(--spark-far), -19px, 0) scale(.2); }
}

@media (prefers-reduced-motion: reduce) {
  html:root[data-platform='desktop'] #chat #chatFeed .message-author-sparks { display: none; }
  html:root[data-platform='desktop'] #chat #chatFeed .message-avatar-sparks { display: none; }
}
