/* Instant 60fps GPU entry animation for chat lines */
@keyframes slideInFast {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat_line {
  display: block !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  animation: slideInFast 0.12s cubic-bezier(0, 0, 0.2, 1) forwards;
  will-change: transform, opacity;
  line-height: 1.35 !important;
}

.user_info {
  display: inline-block !important;
  vertical-align: middle !important;
}

.nick {
  display: inline-block !important;
  vertical-align: middle !important;
}

.colon {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 0.2em !important;
  margin-left: 0.01em !important;
}

.message {
  display: inline !important;
  vertical-align: middle !important;
  margin-left: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Platform indicator style */
.badge.platform-indicator {
  height: 0.95em;
  width: 0.95em;
  margin-right: 0.25em;
  vertical-align: middle !important;
  flex-shrink: 0;
  display: inline-block !important;
  transition: filter 0.3s ease;
}

/* Ensure other badges align correctly in the container */
.user_info .badge {
  height: 0.95em;
  width: auto;
  margin-right: 0.25em;
  vertical-align: middle !important;
  display: inline-block !important;
  border-radius: 10%;
}

/* ── Platform Indicator Style 1: Flat Icon ── */
.platform-style-flat .badge.platform-indicator {
  filter: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ── Platform Indicator Style 2: Glowing Neon ── */
.platform-style-glow[data-platform="twitch"] .badge.platform-indicator {
  filter: drop-shadow(0 0 6px #9146FF) drop-shadow(0 0 10px #9146FF) !important;
  transform: scale(1.1);
}

.platform-style-glow[data-platform="kick"] .badge.platform-indicator {
  filter: drop-shadow(0 0 6px #53FC18) drop-shadow(0 0 10px #53FC18) !important;
  transform: scale(1.1);
}

.platform-style-glow[data-platform="youtube"] .badge.platform-indicator {
  filter: drop-shadow(0 0 6px #FF0000) drop-shadow(0 0 10px #FF0000) !important;
  transform: scale(1.1);
}

/* ── Platform Indicator Style 3: Accent Pill Border ── */
.platform-style-accent .badge.platform-indicator {
  padding: 2px 4px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.platform-style-accent[data-platform="twitch"] .badge.platform-indicator {
  background: rgba(145, 70, 255, 0.25) !important;
  border: 1.5px solid #9146FF !important;
  filter: drop-shadow(0 0 4px rgba(145, 70, 255, 0.6)) !important;
}

.platform-style-accent[data-platform="kick"] .badge.platform-indicator {
  background: rgba(83, 252, 24, 0.25) !important;
  border: 1.5px solid #53FC18 !important;
  filter: drop-shadow(0 0 4px rgba(83, 252, 24, 0.6)) !important;
}

.platform-style-accent[data-platform="youtube"] .badge.platform-indicator {
  background: rgba(255, 0, 0, 0.25) !important;
  border: 1.5px solid #FF0000 !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.6)) !important;
}

.platform-style-accent[data-platform="twitch"] .nick {
  text-shadow: 0 0 6px rgba(145, 70, 255, 0.6);
}

.platform-style-accent[data-platform="kick"] .nick {
  text-shadow: 0 0 6px rgba(83, 252, 24, 0.6);
}

.platform-style-accent[data-platform="youtube"] .nick {
  text-shadow: 0 0 6px rgba(255, 0, 0, 0.6);
}

.yt-at-sign {
  display: inline-block;
  transform: translateY(-0.1em);
  margin-right: 0.03em;
}