/* Clear Liquid Glass for every event surface. The SVG displacement map bends
   backdrop pixels at the rim when Chromium exposes them. A separately refracted
   optical field keeps the lens visible in OBS's transparent browser texture,
   where scene pixels are composited only after the page has rendered. */
.event_card,
.momentum_moment {
  --event-accent: #8b5cf6;
  --event-accent-rgb: 139, 92, 246;
  --glass-light-x: 14%;
  --glass-radius: .62em;
  position: relative;
  width: 100%;
  min-height: calc(var(--line-height-px, 55px) * 1.5);
  margin: .17em 0;
  padding: .44em .68em .5em;
  overflow: hidden;
  border: 1px solid rgba(245, 249, 255, var(--glass-rim-alpha, .46));
  border-radius: var(--glass-radius);
  background:
    radial-gradient(ellipse 42% 150% at var(--glass-light-x) 116%, rgba(var(--event-accent-rgb), var(--event-glass-accent-alpha, .09)), transparent 74%),
    radial-gradient(ellipse 66% 92% at 48% -48%, rgba(249, 252, 255, var(--glass-sheen-alpha, .117)), transparent 68%),
    linear-gradient(180deg, rgba(247, 251, 255, var(--glass-body-alpha, .054)) 0%, rgba(205, 218, 236, .025) 38%, rgba(7, 11, 19, var(--glass-shadow-alpha, .095)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 254, 255, .72),
    inset 1px 0 0 rgba(245, 250, 255, .22),
    inset -1px 0 0 rgba(219, 228, 242, .14),
    inset 0 -1px 0 rgba(214, 225, 242, .26),
    inset 0 0 .34em rgba(245, 250, 255, .035),
    0 .11em .34em rgba(1, 4, 10, .22);
  color: oklch(98.5% .006 280);
  font-size: 1.06em;
  font-synthesis: none;
  font-variant: normal;
  line-height: 1.24;
  text-align: left;
  text-rendering: geometricPrecision;
  /* Matches ordinary chat: one offset shadow from the same --shadow-* variables
     the profile drives, and no outline. The four 1px offsets that used to sit
     here formed a hard halo on every glyph -- good against bitrate, but chat
     itself has never carried one, so banner copy read as a different typeface
     class from the conversation around it. Chat survives encoding on this
     treatment, so banners can too. */
  text-shadow: 2px 2px var(--shadow-blur-rem, .35rem) var(--shadow-color, #000);
  -webkit-text-stroke: 0;
  -webkit-backdrop-filter: blur(var(--glass-frost-blur, .29em)) saturate(var(--glass-frost-saturate, 1.48)) contrast(var(--glass-frost-contrast, 1.04)) brightness(var(--glass-frost-brightness, 1.04));
  -webkit-backdrop-filter: var(--glass-refraction-filter, url(#event-glass-refraction-512x96)) blur(var(--glass-frost-blur, .29em)) saturate(var(--glass-frost-saturate, 1.48)) contrast(var(--glass-frost-contrast, 1.04)) brightness(var(--glass-frost-brightness, 1.04));
  backdrop-filter: blur(var(--glass-frost-blur, .29em)) saturate(var(--glass-frost-saturate, 1.48)) contrast(var(--glass-frost-contrast, 1.04)) brightness(var(--glass-frost-brightness, 1.04));
  backdrop-filter: var(--glass-refraction-filter, url(#event-glass-refraction-512x96)) blur(var(--glass-frost-blur, .29em)) saturate(var(--glass-frost-saturate, 1.48)) contrast(var(--glass-frost-contrast, 1.04)) brightness(var(--glass-frost-brightness, 1.04));
  contain: paint;
  isolation: isolate;
}

/* Dimming stays localized behind the copy. The clear perimeter is what makes
   the underlying OBS scene visibly pass through the material. */
.event_card::before,
.momentum_moment::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(ellipse 72% 118% at 50% 56%, rgba(1, 4, 10, var(--glass-dim-alpha, .106)), rgba(1, 4, 10, .035) 56%, transparent 88%),
    radial-gradient(ellipse 24% 116% at var(--glass-light-x) 58%, rgba(var(--event-accent-rgb), .035), transparent 76%),
    linear-gradient(180deg, rgba(252, 254, 255, .065), transparent 32%);
  box-shadow:
    inset 0 .04em .1em rgba(252, 254, 255, .16),
    inset 0 -.08em .16em rgba(135, 154, 184, .1);
  pointer-events: none;
}

/* A narrow moving caustic gives the material its reactive, light-bending
   character. Only transform and opacity animate, keeping OBS GPU cost low. */
.event_card::after,
.momentum_moment::after {
  position: absolute;
  top: -72%;
  bottom: -72%;
  left: -34%;
  z-index: 1;
  width: 19%;
  content: "";
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(252, 254, 255, .035) 18%, rgba(252, 254, 255, .5) 48%, rgba(var(--event-accent-rgb), .12) 60%, transparent 84%);
  filter: blur(.08em);
  opacity: .12;
  pointer-events: none;
  transform: translate3d(105%, 0, 0) rotate(11deg);
}

.event_card > :not(.glass_refraction),
.momentum_moment > :not(.glass_refraction) {
  position: relative;
  z-index: 2;
}

/* This is not an opacity trick: filter:url() runs the same displacement map
   over a sparse internal light field. It provides visible optical bending in a
   transparent OBS source without touching or rasterizing the text layer. */
.glass_refraction {
  --glass-optics-rgb: var(--event-accent-rgb, 139, 92, 246);
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 10% 145% at var(--glass-light-x, 14%) 52%, rgba(var(--glass-optics-rgb), .19), transparent 74%),
    radial-gradient(ellipse 8% 130% at calc(100% - var(--glass-light-x, 14%)) 46%, rgba(249, 252, 255, .105), transparent 78%),
    linear-gradient(107deg, transparent 0 15%, rgba(252, 254, 255, .03) 19%, rgba(252, 254, 255, .145) 22%, transparent 28% 68%, rgba(var(--glass-optics-rgb), .075) 73%, transparent 78% 100%),
    linear-gradient(180deg, rgba(252, 254, 255, .075), transparent 20% 75%, rgba(149, 171, 201, .055));
  filter: var(--glass-refraction-filter, url(#event-glass-refraction-512x96));
  mix-blend-mode: screen;
  opacity: var(--glass-refraction-opacity, .66);
  pointer-events: none;
  transform: translateZ(0);
}

.event_card--twitch { --event-accent: #9146ff; --event-accent-rgb: 145, 70, 255; --glass-light-x: 12%; }
.event_card--youtube { --event-accent: #ff0033; --event-accent-rgb: 255, 0, 51; --glass-light-x: 10%; }
.event_card--tiktok { --event-accent: #25f4ee; --event-accent-rgb: 37, 244, 238; --glass-light-x: 88%; }
.event_card--kick { --event-accent: #53fc18; --event-accent-rgb: 83, 252, 24; --glass-light-x: 86%; }

.chat_wrapper.event_glow--twitch { --event-glow-rgb: 145, 70, 255; }
.chat_wrapper.event_glow--youtube { --event-glow-rgb: 255, 0, 51; }
.chat_wrapper.event_glow--tiktok { --event-glow-rgb: 37, 244, 238; }
.chat_wrapper.event_glow--kick { --event-glow-rgb: 83, 252, 24; }
.chat_wrapper.event_glow--momentum { --event-glow-rgb: 167, 139, 250; }

.chat_wrapper.event_glow--enabled {
  position: relative;
  isolation: isolate;
  filter: none;
}

/* The glow lives on its own blurred layer. Applying filter to the wrapper
   rasterized the text along with the light and made OBS lettering look soft. */
.chat_wrapper.event_glow--enabled::before {
  position: absolute;
  inset: .12em .08em;
  z-index: 0;
  content: "";
  border-radius: calc(var(--glass-radius, .62em) + .12em);
  background: rgba(var(--event-glow-rgb, 139, 92, 246), var(--event-glow-soft-alpha, .07));
  box-shadow:
    0 0 var(--event-glow-peak-size, .34em) rgba(var(--event-glow-rgb, 139, 92, 246), var(--event-glow-peak-alpha, .17)),
    0 .08em var(--event-glow-halo-size, .56em) rgba(var(--event-glow-rgb, 139, 92, 246), var(--event-glow-halo-alpha, .055));
  filter: blur(var(--event-glow-soft-size, .12em));
  opacity: var(--event-glow-rest-opacity, .34);
  pointer-events: none;
  transform: scale(.995);
}

.chat_wrapper.event_glow--enabled > :is(.event_card, .momentum_moment, .stream_alert) {
  position: relative;
  z-index: 1;
}

.chat_wrapper.event_glow--animated::before {
  animation: eventPlatformGlow var(--event-glow-cycle, 4.5s) cubic-bezier(.37, 0, .63, 1) infinite;
  will-change: opacity, transform;
}

.chat_wrapper.event_glow--animated :is(.event_card, .momentum_moment, .stream_alert)::after {
  animation: liquidGlassCaustic var(--glass-caustic-cycle, 6.75s) cubic-bezier(.16, 1, .3, 1) infinite;
  will-change: transform, opacity;
}

.event_card--spotlight {
  min-height: calc(var(--line-height-px, 55px) * 1.62);
  box-shadow:
    inset 0 1px 0 rgba(252, 254, 255, .76),
    inset 1px 0 0 rgba(245, 250, 255, .24),
    inset -1px 0 0 rgba(219, 228, 242, .15),
    inset 0 -1px 0 rgba(214, 225, 242, .28),
    inset 0 0 .52em rgba(var(--event-accent-rgb), .045),
    0 .14em .42em rgba(1, 4, 10, .24);
}

.event_card--compact {
  min-height: calc(var(--line-height-px, 55px) * 1.06);
  padding-block: .34em;
}

.event_card--compact .event_card-detail { display: none; }

.event_card-main,
.event_card-detail {
  display: flex;
  align-items: center;
  min-width: 0;
}

.event_card-main {
  width: 100%;
  gap: .38em;
}
.event_card-detail {
  gap: .32em;
  margin-top: .22em;
  padding-left: 1.56em;
  color: rgba(248, 250, 254, .95);
  font-size: .84em;
  font-weight: 780;
  line-height: 1.34;
}

.event_card-logo {
  width: 1.14em;
  height: 1.14em;
  flex: 0 0 1.14em;
  object-fit: contain;
  filter: drop-shadow(0 .04em .08em rgba(1, 3, 8, .58));
}

/* These boxes clip (ellipsis and line-clamp both need overflow:hidden), and the
   clip takes the text shadow with it -- the halo and blur reach well past the
   glyphs, so the edge characters lost their shadow and their outermost pixels.
   Each reserves shadow room as padding and cancels it with an equal negative
   margin, so the copy does not move and neighbours do not shift. */
.event_card-user {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  margin: 0 -.16em;
  padding: .08em .16em .26em;
  color: oklch(98.5% .006 280);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event_card-action {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  margin: 0 -.16em;
  padding: .08em .16em .26em;
  color: rgba(247, 249, 253, .92);
  font-weight: 700;
  line-height: 1.34;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event_card-value {
  flex: 0 0 auto;
  margin-left: auto;
  padding: .12em .4em .15em;
  border: 1px solid rgba(var(--event-accent-rgb), .25);
  border-radius: 999px;
  background: rgba(var(--event-accent-rgb), .13);
  box-shadow: inset 0 1px 0 rgba(252, 254, 255, .14);
  color: oklch(98.5% .006 280);
  font-size: .88em;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.event_card-value:empty { display: none; }

/* Digit-scroll odometer for rising support values, matching the StreamElements
   overlays. The digit windows clip overflow, and that clips text-shadow too, so
   the pill carries its depth as a drop-shadow filter instead -- at roughly half
   the radius, since drop-shadow blur reads about twice as wide per unit. No
   zero-offset pass: it hugs the glyph edges and reads as an outline. */
.event_card-value--odometer {
  --odo-cell: 1.18em;
  text-shadow: none;
  filter: drop-shadow(0 1px 1.4px rgba(1, 3, 8, .95)) drop-shadow(0 2px 2.6px rgba(1, 3, 8, .68));
}

.odometer_digit {
  display: inline-block;
  overflow: hidden;
  height: var(--odo-cell, 1.18em);
  vertical-align: bottom;
}

.odometer_strip {
  display: block;
  will-change: transform;
}

.odometer_cell {
  display: block;
  height: var(--odo-cell, 1.18em);
  font-variant-numeric: tabular-nums;
  line-height: var(--odo-cell, 1.18em);
  text-align: center;
}

.odometer_literal {
  display: inline-block;
  height: var(--odo-cell, 1.18em);
  line-height: var(--odo-cell, 1.18em);
  vertical-align: bottom;
}

@media (prefers-reduced-motion: reduce) {
  .odometer_strip { transition: none !important; }
}

/* Truncating to one ellipsised line lost the useful half of "Tier 1 - 5 months -
   3 month streak" on a 640px source. Two wrapped lines keep the native detail
   readable; the padding reserves descender space per the Whole-Glyph Rule. */
.event_card-message {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  min-width: 0;
  overflow: hidden;
  margin: 0 -.16em;
  padding: .06em .16em .3em;
  line-height: 1.38;
  overflow-wrap: anywhere;
  white-space: normal;
}

.event_card-milestone {
  display: none;
  margin-left: auto;
  padding: .12em .42em;
  border: 1px solid color-mix(in srgb, var(--event-accent) 62%, oklch(98.5% .006 280));
  border-radius: 999px;
  background: color-mix(in srgb, var(--event-accent) 18%, transparent);
  box-shadow: inset 0 1px 0 rgba(252, 254, 255, .12);
  color: oklch(98.5% .006 280);
  font-size: .82em;
  font-weight: 800;
  white-space: nowrap;
}

.event_card[data-milestone-level]:not([data-milestone-level="0"]) {
  border-color: color-mix(in srgb, var(--event-accent) 54%, rgba(245, 249, 255, .52));
  box-shadow:
    inset 0 1px 0 rgba(252, 254, 255, .68),
    inset 0 0 .58em color-mix(in srgb, var(--event-accent) 12%, transparent),
    0 .15em .52em rgba(1, 4, 10, .4);
}

.event_card[data-milestone-level]:not([data-milestone-level="0"]) .event_card-milestone {
  display: inline-flex;
}

.event_card--updated::before {
  animation: eventCardPulse 280ms cubic-bezier(.16, 1, .3, 1);
}

.event_card--crowd .event_card-user { color: oklch(98.5% .006 280); }

/* Twitch community moments are lighter than support alerts. The asymmetric
   composition marks them as chat milestones while preserving the same clear
   glass material, logo scale, and restrained platform light. */
.event_card--community {
  min-height: calc(var(--line-height-px, 55px) * 1.62);
  padding: .46em .7em .52em;
  border-color: rgba(226, 210, 255, var(--glass-rim-alpha, .46));
  background:
    radial-gradient(ellipse 46% 148% at 8% 116%, rgba(145, 70, 255, calc(var(--event-glass-accent-alpha, .09) * .92)), transparent 74%),
    radial-gradient(ellipse 32% 120% at 92% -26%, rgba(206, 181, 255, .075), transparent 70%),
    radial-gradient(ellipse 66% 92% at 48% -48%, rgba(249, 252, 255, var(--glass-sheen-alpha, .117)), transparent 68%),
    linear-gradient(180deg, rgba(247, 251, 255, var(--glass-body-alpha, .054)), rgba(7, 11, 19, var(--glass-shadow-alpha, .095)));
}

.event_card--watch-streak {
  background:
    radial-gradient(ellipse 43% 145% at 92% 112%, rgba(145, 70, 255, calc(var(--event-glass-accent-alpha, .09) * .84)), transparent 74%),
    radial-gradient(circle at 13% 18%, rgba(226, 210, 255, .08) 0 .045em, transparent .055em),
    radial-gradient(ellipse 66% 92% at 48% -48%, rgba(249, 252, 255, var(--glass-sheen-alpha, .117)), transparent 68%),
    linear-gradient(180deg, rgba(247, 251, 255, var(--glass-body-alpha, .054)), rgba(7, 11, 19, var(--glass-shadow-alpha, .095)));
}

.event_card-community-main {
  display: grid;
  grid-template-columns: 1.15em minmax(0, 1fr) auto;
  align-items: center;
  gap: .42em;
  min-width: 0;
}

.event_card-community-logo { align-self: center; }

.event_card-community-copy {
  min-width: 0;
  overflow: hidden;
  padding-bottom: .08em;
}

.event_card-community-kicker {
  margin-bottom: .04em;
  color: rgba(228, 213, 255, .96);
  font-size: .64em;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.24;
  text-transform: uppercase;
}

.event_card-community-title {
  display: flex;
  align-items: baseline;
  gap: .22em;
  min-width: 0;
  overflow: hidden;
  padding-bottom: .08em;
  line-height: 1.34;
  white-space: nowrap;
}

.event_card-community-title .event_card-user {
  flex: 0 1 auto;
  text-overflow: ellipsis;
}

.event_card-community-title .event_card-action {
  flex: 0 0 auto;
  margin-left: .08em;
  overflow: visible;
}

.event_card-community-emblem {
  display: flex;
  min-width: 3.62em;
  min-height: 2.24em;
  padding: .28em .48em .32em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(207, 180, 255, .32);
  border-radius: .48em;
  background: rgba(145, 70, 255, .11);
  box-shadow: inset 0 1px 0 rgba(252, 254, 255, .22), 0 .08em .22em rgba(15, 4, 31, .18);
  color: oklch(97% .025 299);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.event_card-community-emblem strong {
  font-size: 1.18em;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: .96;
  text-shadow: 0 .03em .1em rgba(var(--event-accent-rgb), .4);
}

.event_card-community-emblem span {
  margin-top: .15em;
  color: rgba(248, 250, 254, .84);
  font-size: .46em;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.event_card-community-emblem svg {
  width: 1.18em;
  height: 1.18em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.event_card-community-detail {
  min-width: 0;
  margin-top: .18em;
  padding: .06em .4em .3em 1.57em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(248, 250, 254, .96);
  font-size: .8em;
  font-weight: 780;
  line-height: 1.36;
  overflow-wrap: anywhere;
  white-space: normal;
}

.event_card--first-chat .event_card-community-detail {
  display: grid;
  grid-template-columns: .74em minmax(0, 1fr);
  align-items: start;
  gap: .3em;
  margin-top: .28em;
  padding: .3em .5em .38em 1.57em;
  overflow: visible;
  border-top: 1px solid rgba(226, 210, 255, .16);
  border-radius: 0 0 .42em .42em;
  background: linear-gradient(90deg, rgba(145, 70, 255, .07), rgba(252, 254, 255, .026) 54%, transparent 100%);
  color: rgba(253, 254, 255, .98);
  font-size: .88em;
  font-style: normal;
  font-weight: 780;
  line-height: 1.42;
  text-overflow: clip;
  white-space: normal;
}

.event_card--first-chat {
  min-height: calc(var(--line-height-px, 55px) * 1.82);
  padding-bottom: .58em;
}

.event_card-first-chat-quote {
  align-self: start;
  color: color-mix(in srgb, var(--event-accent) 72%, white);
  font-size: 1.36em;
  font-weight: 800;
  line-height: .92;
  text-shadow: 0 .04em .12em rgba(var(--event-accent-rgb), .38);
  transform: translateY(.03em);
}

.event_card-first-chat-message {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  padding-bottom: .12em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.momentum_moment {
  --event-accent: #a78bfa;
  --event-accent-rgb: 167, 139, 250;
  --glass-light-x: 50%;
  display: flex;
  min-height: calc(var(--line-height-px, 55px) * 1.72);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-color: rgba(248, 251, 255, .46);
  background:
    radial-gradient(ellipse 34% 135% at 4% 112%, rgba(255, 0, 51, .075), transparent 74%),
    radial-gradient(ellipse 34% 135% at 96% 112%, rgba(37, 244, 238, .07), transparent 74%),
    radial-gradient(ellipse 60% 82% at 50% -38%, rgba(252, 254, 255, var(--glass-sheen-alpha, .117)), transparent 68%),
    linear-gradient(180deg, rgba(247, 251, 255, var(--glass-body-alpha, .054)), rgba(7, 10, 18, var(--glass-shadow-alpha, .095)));
  text-align: center;
}

.momentum_moment::before {
  background:
    radial-gradient(ellipse 70% 118% at 50% 56%, rgba(1, 4, 10, var(--glass-dim-alpha, .106)), rgba(1, 4, 10, .03) 58%, transparent 88%),
    radial-gradient(ellipse 32% 120% at 10% 66%, rgba(255, 0, 51, .045), transparent 74%),
    radial-gradient(ellipse 32% 120% at 90% 66%, rgba(37, 244, 238, .04), transparent 74%),
    linear-gradient(180deg, rgba(252, 254, 255, .055), transparent 34%);
}

.momentum_moment-kicker {
  color: rgba(248, 250, 254, .9);
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.momentum_moment-title {
  margin-top: .1em;
  padding-bottom: .1em;
  font-size: 1.15em;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.025em;
}

.momentum_moment-detail {
  margin-top: .18em;
  padding-bottom: .1em;
  color: rgba(248, 250, 254, .95);
  font-size: .78em;
  font-weight: 780;
  line-height: 1.36;
}

@keyframes eventCardPulse {
  from { opacity: .68; transform: scaleX(.988); filter: brightness(1.18) saturate(1.08); }
  to { opacity: 1; transform: scaleX(1); filter: brightness(1) saturate(1); }
}

@keyframes liquidGlassCaustic {
  0%, 12% { opacity: 0; transform: translate3d(0, 0, 0) rotate(11deg); }
  28% { opacity: var(--glass-caustic-alpha, .24); }
  58% { opacity: var(--glass-caustic-alpha, .2); }
  78%, 100% { opacity: 0; transform: translate3d(510%, 0, 0) rotate(11deg); }
}

@keyframes eventPlatformGlow {
  0%, 100% { opacity: var(--event-glow-rest-opacity, .34); transform: scale(.995); }
  50% { opacity: var(--event-glow-peak-opacity, .52); transform: scale(1.012); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .event_card,
  .momentum_moment { background-color: rgba(7, 10, 17, var(--glass-shadow-alpha, .095)); }
}

@media (prefers-contrast: more) {
  .event_card,
  .momentum_moment {
    border-color: rgba(252, 254, 255, .72);
    background-color: rgba(5, 8, 15, .72);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .event_card,
  .momentum_moment {
    background-color: rgba(7, 10, 17, .88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass_refraction { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .event_card--updated::before { animation: none; }
  .chat_wrapper.event_glow--animated::before { animation: none; will-change: auto; }
  .chat_wrapper.event_glow--animated :is(.event_card, .momentum_moment, .stream_alert)::after {
    animation: none;
    opacity: .1;
    will-change: auto;
  }
}

/* Config-page additions */
.feature-intro {
  margin: 2px 0 9px;
  color: var(--muted);
  font-size: 11px;
}

.feature-group {
  margin: 8px 0;
  padding: 9px 10px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .015);
}

.feature-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.feature-group-title {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
}

.recommended-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid rgba(124, 58, 237, .42);
  border-radius: 999px;
  background: rgba(124, 58, 237, .12);
  color: #c4b5fd;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .03em;
  white-space: nowrap;
}

.event-subgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  margin-top: 5px;
}

.event-subgrid .row-check { min-width: 0; }
.event-subgrid .clabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.settings-note {
  margin-top: 6px;
  padding: 7px 8px;
  border-radius: 6px;
  background: rgba(34, 197, 94, .07);
  color: #9ca3af;
  font-size: 10px;
  line-height: 1.45;
}

.settings-note strong { color: #d1fae5; }

.studio-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border2);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.studio-link:hover { border-color: var(--accent); background: var(--accent-g); }

.plat-state.preview {
  border-color: rgba(245, 158, 11, .34);
  background: rgba(245, 158, 11, .1);
  color: #fbbf24;
}

@media (max-width: 420px) {
  .event-subgrid { grid-template-columns: 1fr; }
}