/*
 * =================================================================
 * Neon Theme - Cyberpunk Glow Style
 * YouTube Live Chat CSS
 * Version: 1.0.0
 *
 * ✓ Personal and commercial streaming use allowed
 * ✓ Modification allowed (credit doodlekuma.com)
 *
 * Source: https://doodlekuma.com
 * Contact: https://x.com/DoodleBear_Kuma
 *
 * Features:
 * - Multi-layer neon glow border
 * - Offset shadow for 3D depth
 * - Glowing text effect
 * - 4 preset color schemes
 * - Optional flicker animation
 * =================================================================
 */

/* ==========================================
   Google Fonts - Cyberpunk Style
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* ==========================================
   CSS Variables - Neon Color Palette
   ========================================== */
:root {
  /* ========== PRIMARY NEON COLORS (Synthwave Default) ========== */
  --neon-primary: #ff00ff;
  --neon-primary-rgb: 255, 0, 255;
  --neon-secondary: #bf00ff;
  --neon-secondary-rgb: 191, 0, 255;

  /* ========== MAIN BORDER (Text Messages) ========== */
  --neon-border-color: rgba(190, 190, 190, 1.00);
  --neon-border-width: 2px;
  --neon-border-radius: 0px;
  --neon-border-glow-intensity: 0;
  --neon-border-glow-spread: 8px;

  /* ========== SUPER CHAT BORDER ========== */
  --neon-superchat-border-color: rgba(255, 227, 0, 1.00);

  /* ========== MEMBERSHIP BORDER ========== */
  --neon-membership-border-color: rgba(0, 255, 76, 1.00);

  /* ========== CONTAINER BACKGROUND ========== */
  --neon-container-bg: rgba(0, 0, 0, 1.00);

  /* ========== SHADOW BORDER (OFFSET LAYER) ========== */
  --neon-shadow-offset-x: 6px;
  --neon-shadow-offset-y: 6px;
  --neon-shadow-border-width: 2px;
  --neon-shadow-border-color: rgba(255, 255, 255, 0.42);
  --neon-shadow-border-radius: 0px;
  --neon-shadow-glow-intensity: 1.9;
  --neon-shadow-glow-spread: 7px;

  /* ========== TEXT STYLES ========== */
  --neon-text-color: #ffffff;
  --neon-text-glow: #8C8C8C;
  --neon-text-glow-rgb: 140, 140, 140;
  --neon-text-glow-intensity: 1;
  --neon-name-font-size: 14px;
  --neon-message-font-size: 16px;

  /* ========== ROLE COLORS (Synthwave Default) ========== */
  --neon-owner-color: rgba(255, 50, 118, 1.00);
  --neon-owner-rgb: 255, 50, 118;
  --neon-mod-color: #cc66ff;
  --neon-mod-rgb: 204, 102, 255;
  --neon-member-color: #6699ff;
  --neon-member-rgb: 102, 153, 255;

  /* ========== AVATAR ========== */
  --neon-avatar-size: 40px;
  --neon-avatar-glow: rgba(255, 255, 255, 1.00);
  --neon-avatar-glow-rgb: 255, 255, 255;

  /* ========== SPACING ========== */
  --neon-padding: 12px;
  --neon-gap: 12px;
  --neon-max-width: 500px;

  /* ========== ANIMATION ========== */
  --neon-animation-duration: 300ms;
  --neon-flicker-enabled: 1;
  --neon-border-flicker-enabled: 1;
  --neon-shadow-flicker-enabled: 1;
}

/* ==========================================
   Base Styles - Transparent Background
   ========================================== */
body {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
}

yt-live-chat-renderer {
  background-color: transparent !important;
}

/* ==========================================
   Animation Keyframes
   ========================================== */
@keyframes neon-entrance {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes neon-glow-pulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow:
      0 0 4px var(--neon-text-glow),
      0 0 2px var(--neon-text-glow),
      0 0 8px var(--neon-text-glow);
  }
  20%, 24%, 55% {
    opacity: 0.8;
    text-shadow: none;
  }
}

@keyframes neon-border-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    box-shadow:
      0 0 2px var(--neon-primary),
      inset 0 0 1px var(--neon-primary),
      0 0 4px var(--neon-primary),
      inset 0 0 2px var(--neon-primary),
      0 0 8px var(--neon-primary),
      inset 0 0 8px rgba(var(--neon-primary-rgb), 0.3);
  }
  20%, 24%, 55% {
    box-shadow:
      inset 0 0 2px rgba(var(--neon-primary-rgb), 0.1),
      0 0 1px var(--neon-primary);
  }
}

/* Main border flicker entrance - starts first, flickers, then stays visible */
@keyframes neon-border-flicker-entrance {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  16% {
    opacity: 0.15;
  }
  20% {
    opacity: 0.85;
  }
  24% {
    opacity: 0.25;
  }
  28% {
    opacity: 1;
  }
  32% {
    opacity: 0.4;
  }
  36% {
    opacity: 0.95;
  }
  40% {
    opacity: 0.6;
  }
  44% {
    opacity: 1;
  }
  48% {
    opacity: 0.75;
  }
  52% {
    opacity: 1;
  }
  56% {
    opacity: 0.88;
  }
  60%, 100% {
    opacity: 1;
  }
}

/* Shadow border flicker entrance - starts later, staggered from main border */
@keyframes neon-shadow-flicker-entrance {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  30% {
    opacity: 0.7;
  }
  35% {
    opacity: 0.1;
  }
  40% {
    opacity: 0.85;
  }
  45% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.95;
  }
  55% {
    opacity: 0.35;
  }
  60% {
    opacity: 1;
  }
  65% {
    opacity: 0.55;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 0.8;
  }
  80% {
    opacity: 1;
  }
  85% {
    opacity: 0.92;
  }
  90%, 100% {
    opacity: 1;
  }
}

/* ==========================================
   Hide Unnecessary Elements
   ========================================== */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer,
yt-live-chat-moderation-message-renderer,
yt-live-chat-banner-manager,
yt-live-chat-ticker-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-mode-change-message-renderer,
yt-live-chat-restricted-participation-renderer,
yt-live-chat-action-panel-renderer,
yt-live-chat-renderer #action-panel,
yt-reaction-control-panel-overlay,
yt-reaction-control-panel-overlay-view-model,
yt-reaction-control-panel-view-model,
yt-live-chat-renderer #panel-pages,
yt-live-chat-renderer #input-panel,
yt-live-chat-renderer #picker-buttons,
yt-live-chat-renderer #bottom-panel,
yt-live-chat-ninja-message-renderer,
yt-live-chat-renderer yt-live-chat-message-input-renderer,
yt-live-chat-renderer #chat-messages > #contents > #input-panel,
yt-live-chat-renderer [slot="input-panel"],
iron-dropdown,
tp-yt-iron-dropdown,
#action-buttons,
yt-live-chat-paid-message-renderer #action-buttons,
yt-live-chat-text-message-renderer #action-buttons {
  display: none !important;
}

/* Hide Scrollbar */
yt-live-chat-item-list-renderer #items,
yt-live-chat-item-list-renderer #item-scroller {
  overflow: hidden !important;
}

/* Hide Deleted Messages */
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  display: none !important;
}

/* Hide Original Badges */
yt-live-chat-text-message-renderer #author-badges {
  display: none !important;
}

/* Hide timestamp */
yt-live-chat-text-message-renderer #timestamp {
  display: none !important;
}

/* ==========================================
   OBS Browser Source Compatibility
   ========================================== */
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer #content,
yt-live-chat-text-message-renderer yt-live-chat-author-chip {
  overflow: visible !important;
}

yt-live-chat-text-message-renderer #deleted-state,
yt-live-chat-text-message-renderer #show-original,
yt-live-chat-text-message-renderer #before-content-buttons,
yt-live-chat-text-message-renderer #chat-badges,
yt-live-chat-text-message-renderer #prepend-chat-badges,
yt-live-chat-text-message-renderer #chip-badges {
  display: none !important;
}

yt-live-chat-text-message-renderer yt-live-chat-author-chip,
yt-live-chat-text-message-renderer #author-name {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================
   NEON MESSAGE - Main Container
   Background directly on container
   Neon glow frame rendered via ::after on top
   ========================================== */
yt-live-chat-text-message-renderer {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  /* Background directly on main container */
  background: var(--neon-container-bg) !important;
  /* Border is transparent - ::after handles visible border for flicker animation */
  border: var(--neon-border-width) solid transparent !important;
  border-radius: var(--neon-border-radius) !important;
  /* Extra left margin for avatar positioned outside */
  margin: var(--neon-gap) 15px var(--neon-gap) calc(var(--neon-avatar-size) + 20px) !important;
  padding: var(--neon-padding) !important;
  /* No glow on main container - glow is on ::after */
  box-shadow: none !important;
  animation: neon-entrance var(--neon-animation-duration) ease-out !important;
  min-height: 50px !important;
  /* Shrink to fit content, but respect max-width limit */
  width: fit-content !important;
  max-width: var(--neon-max-width) !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* Shadow border using ::before - positioned behind with glow effect */
yt-live-chat-text-message-renderer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Border only, no fill */
  background: transparent !important;
  border: var(--neon-shadow-border-width) solid var(--neon-shadow-border-color) !important;
  border-radius: var(--neon-shadow-border-radius) !important;
  /* Offset to create depth effect behind the neon frame */
  transform: translate(
    var(--neon-shadow-offset-x),
    var(--neon-shadow-offset-y)
  ) !important;
  /* Shadow border glow effect */
  box-shadow:
    0 0 2px var(--neon-shadow-border-color),
    0 0 4px var(--neon-shadow-border-color),
    0 0 calc(var(--neon-shadow-glow-spread) * var(--neon-shadow-glow-intensity)) var(--neon-shadow-border-color) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  /* Shadow flicker entrance animation - duration controlled by CSS variable (1.5s for slower effect) */
  animation: neon-shadow-flicker-entrance calc(var(--neon-shadow-flicker-enabled) * 1.5s) ease-out forwards !important;
}

/* Main border glow frame - rendered on top of background */
yt-live-chat-text-message-renderer::after {
  content: "" !important;
  position: absolute !important;
  top: calc(-1 * var(--neon-border-width)) !important;
  left: calc(-1 * var(--neon-border-width)) !important;
  right: calc(-1 * var(--neon-border-width)) !important;
  bottom: calc(-1 * var(--neon-border-width)) !important;
  border: var(--neon-border-width) solid var(--neon-border-color) !important;
  /* Adjust border-radius to account for negative offset expansion */
  border-radius: calc(var(--neon-border-radius) + var(--neon-border-width)) !important;
  /* Main border glow effect (default off) */
  box-shadow:
    0 0 calc(2px * var(--neon-border-glow-intensity)) var(--neon-border-color),
    0 0 calc(4px * var(--neon-border-glow-intensity)) var(--neon-border-color),
    0 0 calc(var(--neon-border-glow-spread) * var(--neon-border-glow-intensity)) var(--neon-border-color) !important;
  pointer-events: none !important;
  z-index: 10 !important;
  /* Border flicker entrance animation - starts first, staggered from shadow (1.5s for slower effect) */
  animation: neon-border-flicker-entrance calc(var(--neon-border-flicker-enabled) * 1.5s) ease-out forwards !important;
}

/* Optional flicker animation */
yt-live-chat-text-message-renderer[data-flicker="true"]::after {
  animation: neon-border-flicker 3s infinite !important;
}

/* Highlighted message - secondary neon color */
yt-live-chat-text-message-renderer[is-highlighted] {
  border-color: var(--neon-secondary) !important;
}

yt-live-chat-text-message-renderer[is-highlighted]::after {
  border-color: var(--neon-secondary) !important;
  box-shadow:
    0 0 calc(2px * var(--neon-border-glow-intensity)) var(--neon-secondary),
    0 0 calc(4px * var(--neon-border-glow-intensity)) var(--neon-secondary),
    0 0 calc(var(--neon-border-glow-spread) * var(--neon-border-glow-intensity)) var(--neon-secondary) !important;
}

/* ==========================================
   Avatar - Positioned Outside Message Box
   ========================================== */
yt-live-chat-text-message-renderer #author-photo {
  display: block !important;
  position: absolute !important;
  /* Position outside the message box, aligned with border frame */
  top: calc(-1 * var(--neon-shadow-offset-y)) !important;
  left: calc(-1 * var(--neon-avatar-size) - 8px - var(--neon-shadow-offset-x)) !important;
  width: var(--neon-avatar-size) !important;
  height: var(--neon-avatar-size) !important;
  border-radius: 50% !important;
  border: 2px solid var(--neon-avatar-glow) !important;
  flex-shrink: 0 !important;
  box-shadow:
    0 0 2px var(--neon-avatar-glow),
    0 0 4px rgba(var(--neon-avatar-glow-rgb), 0.5) !important;
  overflow: hidden !important;
  z-index: 20 !important;
}

yt-live-chat-text-message-renderer #author-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* ==========================================
   Content Container
   ========================================== */
yt-live-chat-text-message-renderer #content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ==========================================
   Author Name - Subtle Neon Text Glow
   ========================================== */
yt-live-chat-text-message-renderer #author-name {
  color: var(--neon-text-color) !important;
  font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--neon-name-font-size) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow:
    0 0 4px var(--neon-text-glow),
    0 0 2px var(--neon-text-glow),
    0 0 8px var(--neon-text-glow),
    0 0 8px var(--neon-text-glow) !important;
}

yt-live-chat-text-message-renderer #author-name::after {
  content: none !important;
}

/* ==========================================
   Message Text - Subtle Glow
   ========================================== */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: var(--neon-text-color) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 500 !important;
  font-size: var(--neon-message-font-size) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.5px !important;
  word-break: break-word !important;
  text-shadow:
    0 0 2px rgba(var(--neon-text-glow-rgb), 0.5),
    0 0 4px rgba(var(--neon-text-glow-rgb), 0.3) !important;
}

/* Links - secondary neon color */
yt-live-chat-text-message-renderer a {
  text-decoration: none !important;
  color: var(--neon-secondary) !important;
  text-shadow:
    0 0 5px var(--neon-secondary),
    0 0 10px rgba(var(--neon-secondary-rgb), 0.5) !important;
}

/* ==========================================
   ROLE STYLES - Different Neon Colors
   Border on main container, glow on ::after
   ========================================== */

/* Owner - Pink/Gold Neon */
yt-live-chat-text-message-renderer[author-type="owner"] {
  border-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="owner"]::after {
  border-color: var(--neon-owner-color) !important;
  box-shadow:
    0 0 2px var(--neon-owner-color),
    inset 0 0 4px var(--neon-owner-color),
    0 0 4px var(--neon-owner-color),
    inset 0 0 8px rgba(var(--neon-owner-rgb), 0.4),
    0 0 calc(var(--neon-glow-spread) * var(--neon-glow-intensity)) var(--neon-owner-color),
    inset 0 0 calc(var(--neon-glow-spread) * var(--neon-glow-intensity) * 1.5) rgba(var(--neon-owner-rgb), 0.2) !important;
}

yt-live-chat-text-message-renderer[author-type="owner"] #author-name {
  color: var(--neon-text-color) !important;
  text-shadow:
    0 0 4px var(--neon-owner-color),
    0 0 2px var(--neon-owner-color),
    0 0 8px var(--neon-owner-color),
    0 0 8px var(--neon-owner-color) !important;
}

yt-live-chat-text-message-renderer[author-type="owner"] #author-name::before {
  content: "\2605 " !important;
}

yt-live-chat-text-message-renderer[author-type="owner"] #author-photo {
  border-color: var(--neon-owner-color) !important;
  box-shadow:
    0 0 2px var(--neon-owner-color),
    0 0 4px rgba(var(--neon-owner-rgb), 0.5) !important;
}

/* Moderator - Purple Neon */
yt-live-chat-text-message-renderer[author-type="moderator"] {
  border-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"]::after {
  border-color: var(--neon-mod-color) !important;
  box-shadow:
    0 0 2px var(--neon-mod-color),
    inset 0 0 4px var(--neon-mod-color),
    0 0 4px var(--neon-mod-color),
    inset 0 0 8px rgba(var(--neon-mod-rgb), 0.4),
    0 0 calc(var(--neon-glow-spread) * var(--neon-glow-intensity)) var(--neon-mod-color),
    inset 0 0 calc(var(--neon-glow-spread) * var(--neon-glow-intensity) * 1.5) rgba(var(--neon-mod-rgb), 0.2) !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"] #author-name {
  color: var(--neon-text-color) !important;
  text-shadow:
    0 0 4px var(--neon-mod-color),
    0 0 2px var(--neon-mod-color),
    0 0 8px var(--neon-mod-color),
    0 0 8px var(--neon-mod-color) !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"] #author-name::before {
  content: "\2692 " !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"] #author-photo {
  border-color: var(--neon-mod-color) !important;
  box-shadow:
    0 0 2px var(--neon-mod-color),
    0 0 4px rgba(var(--neon-mod-rgb), 0.5) !important;
}

/* Member - Blue Neon */
yt-live-chat-text-message-renderer[author-type="member"] {
  border-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="member"]::after {
  border-color: var(--neon-member-color) !important;
  box-shadow:
    0 0 2px var(--neon-member-color),
    inset 0 0 4px var(--neon-member-color),
    0 0 4px var(--neon-member-color),
    inset 0 0 8px rgba(var(--neon-member-rgb), 0.4),
    0 0 calc(var(--neon-glow-spread) * var(--neon-glow-intensity)) var(--neon-member-color),
    inset 0 0 calc(var(--neon-glow-spread) * var(--neon-glow-intensity) * 1.5) rgba(var(--neon-member-rgb), 0.2) !important;
}

yt-live-chat-text-message-renderer[author-type="member"] #author-name {
  color: var(--neon-text-color) !important;
  text-shadow:
    0 0 4px var(--neon-member-color),
    0 0 2px var(--neon-member-color),
    0 0 8px var(--neon-member-color),
    0 0 8px var(--neon-member-color) !important;
}

yt-live-chat-text-message-renderer[author-type="member"] #author-name::before {
  content: "\2665 " !important;
}

yt-live-chat-text-message-renderer[author-type="member"] #author-photo {
  border-color: var(--neon-member-color) !important;
  box-shadow:
    0 0 2px var(--neon-member-color),
    0 0 4px rgba(var(--neon-member-rgb), 0.5) !important;
}

/* ==========================================
   SUPER CHAT - Background on container, glow via ::after
   ========================================== */
yt-live-chat-paid-message-renderer {
  position: relative !important;
  margin: 20px 15px !important;
  /* Background directly on main container */
  background: var(--neon-container-bg) !important;
  /* Border is transparent - ::after handles visible border for flicker animation */
  border: var(--neon-border-width) solid transparent !important;
  border-radius: var(--neon-border-radius) !important;
  /* No glow on main container */
  box-shadow: none !important;
  overflow: visible !important;
  animation: neon-entrance var(--neon-animation-duration) ease-out !important;
  z-index: 1 !important;
}

/* Super Chat shadow border - positioned behind with glow */
yt-live-chat-paid-message-renderer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Border only, no fill */
  background: transparent !important;
  border: var(--neon-shadow-border-width) solid var(--neon-shadow-border-color) !important;
  border-radius: var(--neon-shadow-border-radius) !important;
  /* Offset to create depth effect behind */
  transform: translate(
    var(--neon-shadow-offset-x),
    var(--neon-shadow-offset-y)
  ) !important;
  /* Shadow border glow effect */
  box-shadow:
    0 0 2px var(--neon-shadow-border-color),
    0 0 4px var(--neon-shadow-border-color),
    0 0 calc(var(--neon-shadow-glow-spread) * var(--neon-shadow-glow-intensity)) var(--neon-shadow-border-color) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  /* Shadow flicker entrance animation */
  animation: neon-shadow-flicker-entrance calc(var(--neon-shadow-flicker-enabled) * 1.5s) ease-out forwards !important;
}

/* Super Chat main border glow frame - rendered on top */
yt-live-chat-paid-message-renderer::after {
  content: "" !important;
  position: absolute !important;
  top: calc(-1 * var(--neon-border-width)) !important;
  left: calc(-1 * var(--neon-border-width)) !important;
  right: calc(-1 * var(--neon-border-width)) !important;
  bottom: calc(-1 * var(--neon-border-width)) !important;
  border: var(--neon-border-width) solid var(--neon-superchat-border-color) !important;
  /* Adjust border-radius to account for negative offset expansion */
  border-radius: calc(var(--neon-border-radius) + var(--neon-border-width)) !important;
  /* Main border glow effect (default off) */
  box-shadow:
    0 0 calc(2px * var(--neon-border-glow-intensity)) var(--neon-superchat-border-color),
    0 0 calc(4px * var(--neon-border-glow-intensity)) var(--neon-superchat-border-color),
    0 0 calc(var(--neon-border-glow-spread) * var(--neon-border-glow-intensity)) var(--neon-superchat-border-color) !important;
  pointer-events: none !important;
  z-index: 10 !important;
  /* Border flicker entrance animation */
  animation: neon-border-flicker-entrance calc(var(--neon-border-flicker-enabled) * 1.5s) ease-out forwards !important;
}

yt-live-chat-paid-message-renderer #card {
  display: block !important;
  background: transparent !important;
}

yt-live-chat-paid-message-renderer #header-content-primary-column,
yt-live-chat-paid-message-renderer #single-line,
yt-live-chat-paid-message-renderer #author-name-chip,
yt-live-chat-paid-message-renderer #purchase-amount-column,
yt-live-chat-paid-message-renderer #header-content {
  background: transparent !important;
  box-shadow: none !important;
}

yt-live-chat-paid-message-renderer #single-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

yt-live-chat-paid-message-renderer #header {
  padding: 15px 20px 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}

yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-paid-message-renderer yt-img-shadow {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid var(--yt-live-chat-paid-message-primary-color, var(--neon-secondary)) !important;
  margin-right: 12px !important;
  box-shadow:
    0 0 2px var(--yt-live-chat-paid-message-primary-color, var(--neon-secondary)),
    0 0 4px rgba(var(--neon-secondary-rgb), 0.5) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

yt-live-chat-paid-message-renderer #author-photo img,
yt-live-chat-paid-message-renderer yt-img-shadow img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name * {
  color: var(--neon-text-color) !important;
  font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--neon-name-font-size) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow:
    0 0 4px var(--yt-live-chat-paid-message-primary-color, var(--neon-secondary)),
    0 0 2px var(--yt-live-chat-paid-message-primary-color, var(--neon-secondary)),
    0 0 8px var(--yt-live-chat-paid-message-primary-color, var(--neon-secondary)) !important;
}

yt-live-chat-paid-message-renderer #purchase-amount {
  display: inline-block !important;
  color: var(--neon-text-color) !important;
  font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-shadow:
    0 0 4px var(--yt-live-chat-paid-message-primary-color, var(--neon-secondary)),
    0 0 2px var(--yt-live-chat-paid-message-primary-color, var(--neon-secondary)),
    0 0 8px var(--yt-live-chat-paid-message-primary-color, var(--neon-secondary)) !important;
  background: transparent !important;
}

yt-live-chat-paid-message-renderer #content {
  padding: 10px 20px 15px 20px !important;
  background: transparent !important;
}

yt-live-chat-paid-message-renderer #message,
yt-live-chat-paid-message-renderer #message * {
  color: var(--neon-text-color) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 500 !important;
  font-size: var(--neon-message-font-size) !important;
  text-shadow:
    0 0 3px rgba(var(--neon-secondary-rgb), 0.3) !important;
}

/* ==========================================
   MEMBERSHIP/LEGACY PAID MESSAGE
   Background on container, glow via ::after
   ========================================== */
yt-live-chat-legacy-paid-message-renderer {
  position: relative !important;
  display: block !important;
  /* Background directly on main container */
  background: var(--neon-container-bg) !important;
  /* Border is transparent - ::after handles visible border for flicker animation */
  border: var(--neon-border-width) solid transparent !important;
  border-radius: var(--neon-border-radius) !important;
  margin: 20px 15px !important;
  padding: 20px !important;
  /* No glow on main container */
  box-shadow: none !important;
  animation: neon-entrance var(--neon-animation-duration) ease-out !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* Membership shadow border - positioned behind with glow */
yt-live-chat-legacy-paid-message-renderer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Border only, no fill */
  background: transparent !important;
  border: var(--neon-shadow-border-width) solid var(--neon-shadow-border-color) !important;
  border-radius: var(--neon-shadow-border-radius) !important;
  /* Offset to create depth effect behind */
  transform: translate(
    var(--neon-shadow-offset-x),
    var(--neon-shadow-offset-y)
  ) !important;
  /* Shadow border glow effect */
  box-shadow:
    0 0 2px var(--neon-shadow-border-color),
    0 0 4px var(--neon-shadow-border-color),
    0 0 calc(var(--neon-shadow-glow-spread) * var(--neon-shadow-glow-intensity)) var(--neon-shadow-border-color) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  /* Shadow flicker entrance animation */
  animation: neon-shadow-flicker-entrance calc(var(--neon-shadow-flicker-enabled) * 1.5s) ease-out forwards !important;
}

/* Membership main border glow frame - rendered on top */
yt-live-chat-legacy-paid-message-renderer::after {
  content: "" !important;
  position: absolute !important;
  top: calc(-1 * var(--neon-border-width)) !important;
  left: calc(-1 * var(--neon-border-width)) !important;
  right: calc(-1 * var(--neon-border-width)) !important;
  bottom: calc(-1 * var(--neon-border-width)) !important;
  border: var(--neon-border-width) solid var(--neon-membership-border-color) !important;
  /* Adjust border-radius to account for negative offset expansion */
  border-radius: calc(var(--neon-border-radius) + var(--neon-border-width)) !important;
  /* Main border glow effect (default off) */
  box-shadow:
    0 0 calc(2px * var(--neon-border-glow-intensity)) var(--neon-membership-border-color),
    0 0 calc(4px * var(--neon-border-glow-intensity)) var(--neon-membership-border-color),
    0 0 calc(var(--neon-border-glow-spread) * var(--neon-border-glow-intensity)) var(--neon-membership-border-color) !important;
  pointer-events: none !important;
  z-index: 10 !important;
  /* Border flicker entrance animation */
  animation: neon-border-flicker-entrance calc(var(--neon-border-flicker-enabled) * 1.5s) ease-out forwards !important;
}

yt-live-chat-legacy-paid-message-renderer #author-photo {
  display: none !important;
}

yt-live-chat-legacy-paid-message-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  padding: 5px !important;
  text-align: center !important;
}

yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: var(--neon-text-color) !important;
  font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--neon-message-font-size) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow:
    0 0 4px var(--neon-member-color),
    0 0 2px var(--neon-member-color),
    0 0 8px var(--neon-member-color),
    0 0 8px var(--neon-member-color) !important;
  margin-bottom: 8px !important;
}

yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: var(--neon-text-color) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 500 !important;
  font-size: var(--neon-message-font-size) !important;
  text-shadow:
    0 0 2px rgba(var(--neon-member-rgb), 0.5),
    0 0 4px rgba(var(--neon-member-rgb), 0.3) !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ==========================================
   MEMBERSHIP ITEM RENDERER
   Background on container, glow via ::after
   ========================================== */
yt-live-chat-membership-item-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  /* Background directly on main container */
  background: var(--neon-container-bg) !important;
  /* Border is transparent - ::after handles visible border for flicker animation */
  border: var(--neon-border-width) solid transparent !important;
  border-radius: var(--neon-border-radius) !important;
  padding: 20px 25px !important;
  margin: 15px 10px !important;
  /* No glow on main container */
  box-shadow: none !important;
  animation: neon-entrance var(--neon-animation-duration) ease-out !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* Membership shadow border - positioned behind with glow */
yt-live-chat-membership-item-renderer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Border only, no fill */
  background: transparent !important;
  border: var(--neon-shadow-border-width) solid var(--neon-shadow-border-color) !important;
  border-radius: var(--neon-shadow-border-radius) !important;
  /* Offset to create depth effect behind */
  transform: translate(
    var(--neon-shadow-offset-x),
    var(--neon-shadow-offset-y)
  ) !important;
  /* Shadow border glow effect */
  box-shadow:
    0 0 2px var(--neon-shadow-border-color),
    0 0 4px var(--neon-shadow-border-color),
    0 0 calc(var(--neon-shadow-glow-spread) * var(--neon-shadow-glow-intensity)) var(--neon-shadow-border-color) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  /* Shadow flicker entrance animation */
  animation: neon-shadow-flicker-entrance calc(var(--neon-shadow-flicker-enabled) * 1.5s) ease-out forwards !important;
}

/* Membership main border glow frame - rendered on top */
yt-live-chat-membership-item-renderer::after {
  content: "" !important;
  position: absolute !important;
  top: calc(-1 * var(--neon-border-width)) !important;
  left: calc(-1 * var(--neon-border-width)) !important;
  right: calc(-1 * var(--neon-border-width)) !important;
  bottom: calc(-1 * var(--neon-border-width)) !important;
  border: var(--neon-border-width) solid var(--neon-membership-border-color) !important;
  /* Adjust border-radius to account for negative offset expansion */
  border-radius: calc(var(--neon-border-radius) + var(--neon-border-width)) !important;
  /* Main border glow effect (default off) */
  box-shadow:
    0 0 calc(2px * var(--neon-border-glow-intensity)) var(--neon-membership-border-color),
    0 0 calc(4px * var(--neon-border-glow-intensity)) var(--neon-membership-border-color),
    0 0 calc(var(--neon-border-glow-spread) * var(--neon-border-glow-intensity)) var(--neon-membership-border-color) !important;
  pointer-events: none !important;
  z-index: 10 !important;
  /* Border flicker entrance animation */
  animation: neon-border-flicker-entrance calc(var(--neon-border-flicker-enabled) * 1.5s) ease-out forwards !important;
}

yt-live-chat-membership-item-renderer #author-photo,
yt-live-chat-membership-item-renderer yt-img-shadow {
  display: none !important;
}

yt-live-chat-membership-item-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 2 !important;
}

yt-live-chat-membership-item-renderer #author-name {
  color: var(--neon-text-color) !important;
  font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--neon-name-font-size) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow:
    0 0 4px var(--neon-member-color),
    0 0 2px var(--neon-member-color),
    0 0 8px var(--neon-member-color),
    0 0 8px var(--neon-member-color) !important;
}

yt-live-chat-membership-item-renderer #header-subtext {
  color: var(--neon-text-color) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 500 !important;
  font-size: calc(var(--neon-message-font-size) * 0.9) !important;
  text-shadow:
    0 0 2px rgba(var(--neon-member-rgb), 0.5),
    0 0 4px rgba(var(--neon-member-rgb), 0.3) !important;
}

/* ==========================================
   Global Font Override
   ========================================== */
yt-live-chat-renderer * {
  font-family: 'Rajdhani', sans-serif !important;
}

/* ==========================================
   Author Chip Background
   ========================================== */
yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}

/* ==========================================
   Ticker (Hidden but styled)
   ========================================== */
yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}