/*
 * =================================================================
 * Twitter/X Post 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:
 * - Card-style layout mimicking Twitter/X posts
 * - Circular avatars (48px)
 * - Username + Handle + Timestamp display
 * - Verification badges for owner/moderator/member
 * - Super Chat with amount bar using level colors
 * - Light and dark mode support
 * =================================================================
 */

/* ==========================================
   Google Fonts - System UI Stack
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ==========================================
   CSS Variables - Twitter/X Color Palette
   ========================================== */
:root {
  /* Theme Mode - Default Light */
  --twitter-bg: transparent;
  --twitter-card-bg: #FFFFFF;
  --twitter-border: #EFF3F4;
  --twitter-text-primary: #0F1419;
  --twitter-text-secondary: #536471;

  /* Brand Colors */
  --twitter-blue: #1DA1F2;
  --twitter-verified-gold: #FFD400;
  --twitter-verified-blue: #1DA1F2;
  --twitter-verified-gray: #829AAB;

  /* Interaction Colors */
  --twitter-reply-blue: #1D9BF0;
  --twitter-retweet-green: #00BA7C;
  --twitter-heart-red: #F91880;

  /* Card Styling */
  --twitter-card-radius: 0px;
  --twitter-card-padding: 12px 16px;
  --twitter-card-margin: 0px;
  --twitter-card-gap: 0px;
  --twitter-card-shadow: none;
  --twitter-card-shadow-hover: none;

  /* Avatar */
  --twitter-avatar-size: 48px;

  /* Typography */
  --twitter-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", sans-serif;
  --twitter-font-size-name: 15px;
  --twitter-font-size-handle: 15px;
  --twitter-font-size-content: 15px;
  --twitter-font-size-meta: 14px;
  --twitter-line-height: 1.5;

  /* Membership Typography */
  --twitter-membership-font-size-name: 15px;
  --twitter-membership-font-weight-name: 700;
  --twitter-membership-font-size-content: 15px;
  --twitter-membership-font-weight-content: 400;

  /* Super Chat Typography */
  --twitter-superchat-font-size-name: 15px;
  --twitter-superchat-font-weight-name: 700;
  --twitter-superchat-font-size-content: 15px;
  --twitter-superchat-font-weight-content: 400;
}

/* Dark Mode Variables */
[data-theme="dark"],
.dark-mode {
  --twitter-card-bg: #16181C;
  --twitter-border: #2F3336;
  --twitter-text-primary: #E7E9EA;
  --twitter-text-secondary: #71767B;
  --twitter-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --twitter-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ==========================================
   Base Styles - Transparent Background
   ========================================== */
body {
  overflow: hidden !important;
  background-color: transparent !important;
  font-family: var(--twitter-font-family) !important;
}

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

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

yt-live-chat-item-list-renderer #items {
  background-color: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--twitter-card-gap) !important;
}

/* ==========================================
   Animation Keyframes
   ========================================== */
@keyframes tweet-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tweet-scale-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================
   Hide Unnecessary YouTube 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,
/* Hide bottom panel (login prompt, public message notice) */
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,
/* Hide action buttons (pin, delete, etc.) */
#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;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

yt-live-chat-item-list-renderer #items::-webkit-scrollbar,
yt-live-chat-item-list-renderer #item-scroller::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

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

/* Hide Original Author Badges - We'll use custom verification icons */
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-paid-message-renderer #author-badges {
  display: none !important;
}

/* ==========================================
   TWITTER CARD - Normal Message Container
   yt-live-chat-text-message-renderer
   ========================================== */
yt-live-chat-text-message-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;

  background-color: var(--twitter-card-bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--twitter-border) !important;
  border-radius: 0 !important;
  padding: var(--twitter-card-padding) !important;
  padding-bottom: 8px !important;
  margin: 0 !important;

  box-shadow: none !important;

  animation: tweet-fade-in 200ms ease-out !important;

  font-family: var(--twitter-font-family) !important;
  line-height: var(--twitter-line-height) !important;

  transition: background-color 0.2s ease !important;
}

/* Hover Effect */
yt-live-chat-text-message-renderer:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

[data-theme="dark"] yt-live-chat-text-message-renderer:hover,
.dark-mode yt-live-chat-text-message-renderer:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ==========================================
   Avatar Styling - Circular
   ========================================== */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-text-message-renderer #author-photo img,
yt-live-chat-text-message-renderer yt-img-shadow,
yt-live-chat-text-message-renderer yt-img-shadow img {
  width: var(--twitter-avatar-size) !important;
  height: var(--twitter-avatar-size) !important;
  min-width: var(--twitter-avatar-size) !important;
  min-height: var(--twitter-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background-color: var(--twitter-border) !important;
}

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

/* ==========================================
   Content Container
   Layout: author-chip + timestamp on first line, message on second line
   Using flexbox with order to reposition timestamp after author name
   (In YouTube DOM, timestamp comes before author-chip)
   ========================================== */
yt-live-chat-text-message-renderer #content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Author chip wrapper - reorder to appear first */
yt-live-chat-text-message-renderer #content > yt-live-chat-author-chip {
  display: inline-flex !important;
  align-items: center !important;
  order: -1 !important; /* Move before timestamp in visual order */
}

/* Timestamp - reorder to appear after author-chip */
yt-live-chat-text-message-renderer #timestamp {
  display: inline !important;
  order: 0 !important; /* After author-chip */
  color: var(--twitter-text-secondary) !important;
  font-size: var(--twitter-font-size-meta) !important;
  font-weight: 400 !important;
  margin-left: 4px !important;
}

/* Add dot separator before timestamp */
yt-live-chat-text-message-renderer #timestamp::before {
  content: "\00B7" !important;
  margin-right: 4px !important;
  color: var(--twitter-text-secondary) !important;
}

/* ==========================================
   Author Info Row - Name + Handle + Time
   ========================================== */
yt-live-chat-text-message-renderer #author-name-chip,
yt-live-chat-text-message-renderer #author-name {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

/* Username (Display Name) */
yt-live-chat-text-message-renderer #author-name {
  color: var(--twitter-text-primary) !important;
  font-size: var(--twitter-font-size-name) !important;
  font-weight: 700 !important;
  font-family: var(--twitter-font-family) !important;
  line-height: 1.3 !important;
}

/* ==========================================
   Verification Badge - Custom Icons
   Using ::after pseudo-element on author name
   ========================================== */

/* Owner Badge - Gold Checkmark */
yt-live-chat-text-message-renderer[author-type="owner"] #author-name::after {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  background-color: var(--twitter-verified-gold) !important;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPg0KICA8cGF0aCBkPSJNMjIuMjUgMTJjMC0xLjQzLS44OC0yLjY3LTIuMTktMy4zNC40Ni0xLjM5LjItMi45LS44MS0zLjkxcy0yLjUyLTEuMjctMy45MS0uODFjLS42Ni0xLjMxLTEuOTEtMi4xOS0zLjM0LTIuMTlzLTIuNjcuODgtMy4zMyAyLjE5Yy0xLjQtLjQ2LTIuOTEtLjItMy45Mi44MXMtMS4yNiAyLjUyLS44IDMuOTFjLTEuMzEuNjctMi4yIDEuOTEtMi4yIDMuMzRzLjg5IDIuNjcgMi4yIDMuMzRjLS40NiAxLjM5LS4yMSAyLjkuOCAzLjkxczIuNTIgMS4yNiAzLjkxLjgxYy42NyAxLjMxIDEuOTEgMi4xOSAzLjM0IDIuMTlzMi42OC0uODggMy4zNC0yLjE5YzEuMzkuNDUgMi45LjIgMy45MS0uODFzMS4yNy0yLjUyLjgxLTMuOTFjMS4zMS0uNjcgMi4xOS0xLjkxIDIuMTktMy4zNHptLTExLjcxIDQuMkw2LjggMTIuNDZsMS40MS0xLjQyIDIuMjYgMi4yNiA0LjgtNS4yMyAxLjQ3IDEuMzYtNi4yIDYuNzd6Ii8+DQo8L3N2Zz4NCg==') !important;
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPg0KICA8cGF0aCBkPSJNMjIuMjUgMTJjMC0xLjQzLS44OC0yLjY3LTIuMTktMy4zNC40Ni0xLjM5LjItMi45LS44MS0zLjkxcy0yLjUyLTEuMjctMy45MS0uODFjLS42Ni0xLjMxLTEuOTEtMi4xOS0zLjM0LTIuMTlzLTIuNjcuODgtMy4zMyAyLjE5Yy0xLjQtLjQ2LTIuOTEtLjItMy45Mi44MXMtMS4yNiAyLjUyLS44IDMuOTFjLTEuMzEuNjctMi4yIDEuOTEtMi4yIDMuMzRzLjg5IDIuNjcgMi4yIDMuMzRjLS40NiAxLjM5LS4yMSAyLjkuOCAzLjkxczIuNTIgMS4yNiAzLjkxLjgxYy42NyAxLjMxIDEuOTEgMi4xOSAzLjM0IDIuMTlzMi42OC0uODggMy4zNC0yLjE5YzEuMzkuNDUgMi45LjIgMy45MS0uODFzMS4yNy0yLjUyLjgxLTMuOTFjMS4zMS0uNjcgMi4xOS0xLjkxIDIuMTktMy4zNHptLTExLjcxIDQuMkw2LjggMTIuNDZsMS40MS0xLjQyIDIuMjYgMi4yNiA0LjgtNS4yMyAxLjQ3IDEuMzYtNi4yIDYuNzd6Ii8+DQo8L3N2Zz4NCg==') !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* Moderator Badge - Blue Checkmark */
yt-live-chat-text-message-renderer[author-type="moderator"] #author-name::after {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  background-color: var(--twitter-verified-blue) !important;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPg0KICA8cGF0aCBkPSJNMjIuMjUgMTJjMC0xLjQzLS44OC0yLjY3LTIuMTktMy4zNC40Ni0xLjM5LjItMi45LS44MS0zLjkxcy0yLjUyLTEuMjctMy45MS0uODFjLS42Ni0xLjMxLTEuOTEtMi4xOS0zLjM0LTIuMTlzLTIuNjcuODgtMy4zMyAyLjE5Yy0xLjQtLjQ2LTIuOTEtLjItMy45Mi44MXMtMS4yNiAyLjUyLS44IDMuOTFjLTEuMzEuNjctMi4yIDEuOTEtMi4yIDMuMzRzLjg5IDIuNjcgMi4yIDMuMzRjLS40NiAxLjM5LS4yMSAyLjkuOCAzLjkxczIuNTIgMS4yNiAzLjkxLjgxYy42NyAxLjMxIDEuOTEgMi4xOSAzLjM0IDIuMTlzMi42OC0uODggMy4zNC0yLjE5YzEuMzkuNDUgMi45LjIgMy45MS0uODFzMS4yNy0yLjUyLjgxLTMuOTFjMS4zMS0uNjcgMi4xOS0xLjkxIDIuMTktMy4zNHptLTExLjcxIDQuMkw2LjggMTIuNDZsMS40MS0xLjQyIDIuMjYgMi4yNiA0LjgtNS4yMyAxLjQ3IDEuMzYtNi4yIDYuNzd6Ii8+DQo8L3N2Zz4NCg==') !important;
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPg0KICA8cGF0aCBkPSJNMjIuMjUgMTJjMC0xLjQzLS44OC0yLjY3LTIuMTktMy4zNC40Ni0xLjM5LjItMi45LS44MS0zLjkxcy0yLjUyLTEuMjctMy45MS0uODFjLS42Ni0xLjMxLTEuOTEtMi4xOS0zLjM0LTIuMTlzLTIuNjcuODgtMy4zMyAyLjE5Yy0xLjQtLjQ2LTIuOTEtLjItMy45Mi44MXMtMS4yNiAyLjUyLS44IDMuOTFjLTEuMzEuNjctMi4yIDEuOTEtMi4yIDMuMzRzLjg5IDIuNjcgMi4yIDMuMzRjLS40NiAxLjM5LS4yMSAyLjkuOCAzLjkxczIuNTIgMS4yNiAzLjkxLjgxYy42NyAxLjMxIDEuOTEgMi4xOSAzLjM0IDIuMTlzMi42OC0uODggMy4zNC0yLjE5YzEuMzkuNDUgMi45LjIgMy45MS0uODFzMS4yNy0yLjUyLjgxLTMuOTFjMS4zMS0uNjcgMi4xOS0xLjkxIDIuMTktMy4zNHptLTExLjcxIDQuMkw2LjggMTIuNDZsMS40MS0xLjQyIDIuMjYgMi4yNiA0LjgtNS4yMyAxLjQ3IDEuMzYtNi4yIDYuNzd6Ii8+DQo8L3N2Zz4NCg==') !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* Member Badge - Gray Checkmark */
yt-live-chat-text-message-renderer[author-type="member"] #author-name::after {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  background-color: var(--twitter-verified-gray) !important;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPg0KICA8cGF0aCBkPSJNMjIuMjUgMTJjMC0xLjQzLS44OC0yLjY3LTIuMTktMy4zNC40Ni0xLjM5LjItMi45LS44MS0zLjkxcy0yLjUyLTEuMjctMy45MS0uODFjLS42Ni0xLjMxLTEuOTEtMi4xOS0zLjM0LTIuMTlzLTIuNjcuODgtMy4zMyAyLjE5Yy0xLjQtLjQ2LTIuOTEtLjItMy45Mi44MXMtMS4yNiAyLjUyLS44IDMuOTFjLTEuMzEuNjctMi4yIDEuOTEtMi4yIDMuMzRzLjg5IDIuNjcgMi4yIDMuMzRjLS40NiAxLjM5LS4yMSAyLjkuOCAzLjkxczIuNTIgMS4yNiAzLjkxLjgxYy42NyAxLjMxIDEuOTEgMi4xOSAzLjM0IDIuMTlzMi42OC0uODggMy4zNC0yLjE5YzEuMzkuNDUgMi45LjIgMy45MS0uODFzMS4yNy0yLjUyLjgxLTMuOTFjMS4zMS0uNjcgMi4xOS0xLjkxIDIuMTktMy4zNHptLTExLjcxIDQuMkw2LjggMTIuNDZsMS40MS0xLjQyIDIuMjYgMi4yNiA0LjgtNS4yMyAxLjQ3IDEuMzYtNi4yIDYuNzd6Ii8+DQo8L3N2Zz4NCg==') !important;
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPg0KICA8cGF0aCBkPSJNMjIuMjUgMTJjMC0xLjQzLS44OC0yLjY3LTIuMTktMy4zNC40Ni0xLjM5LjItMi45LS44MS0zLjkxcy0yLjUyLTEuMjctMy45MS0uODFjLS42Ni0xLjMxLTEuOTEtMi4xOS0zLjM0LTIuMTlzLTIuNjcuODgtMy4zMyAyLjE5Yy0xLjQtLjQ2LTIuOTEtLjItMy45Mi44MXMtMS4yNiAyLjUyLS44IDMuOTFjLTEuMzEuNjctMi4yIDEuOTEtMi4yIDMuMzRzLjg5IDIuNjcgMi4yIDMuMzRjLS40NiAxLjM5LS4yMSAyLjkuOCAzLjkxczIuNTIgMS4yNiAzLjkxLjgxYy42NyAxLjMxIDEuOTEgMi4xOSAzLjM0IDIuMTlzMi42OC0uODggMy4zNC0yLjE5YzEuMzkuNDUgMi45LjIgMy45MS0uODFzMS4yNy0yLjUyLjgxLTMuOTFjMS4zMS0uNjcgMi4xOS0xLjkxIDIuMTktMy4zNHptLTExLjcxIDQuMkw2LjggMTIuNDZsMS40MS0xLjQyIDIuMjYgMi4yNiA0LjgtNS4yMyAxLjQ3IDEuMzYtNi4yIDYuNzd6Ii8+DQo8L3N2Zz4NCg==') !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* ==========================================
   Message Content - Force to new line in flex container
   ========================================== */
yt-live-chat-text-message-renderer #message {
  display: block !important;
  order: 1 !important; /* After author-chip and timestamp */
  flex-basis: 100% !important; /* Force to new line */
  color: var(--twitter-text-primary) !important;
  font-size: var(--twitter-font-size-content) !important;
  font-weight: 400 !important;
  font-family: var(--twitter-font-family) !important;
  line-height: var(--twitter-line-height) !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  margin-top: 2px !important;
}

/* Emoji sizing in messages */
yt-live-chat-text-message-renderer #message img.emoji,
yt-live-chat-text-message-renderer #message yt-emoji-picker-renderer img {
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle !important;
}

/* ==========================================
   SUPER CHAT - Twitter Card with Amount in Grid
   yt-live-chat-paid-message-renderer
   Layout: Row1 [Avatar | Name], Row2 [Avatar | Message], Row3 [- | Amount]
   Using CSS Grid for proper 2-column layout
   ========================================== */
yt-live-chat-paid-message-renderer {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--twitter-avatar-size) 1fr !important;
  column-gap: 12px !important;
  row-gap: 2px !important;

  background-color: var(--twitter-card-bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--twitter-border) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  margin: 0 !important;

  box-shadow: none !important;

  animation: tweet-fade-in 200ms ease-out !important;

  font-family: var(--twitter-font-family) !important;
  line-height: var(--twitter-line-height) !important;

  overflow: hidden !important;
}

/* Super Chat Card wrapper - use display:contents to promote children to grid */
yt-live-chat-paid-message-renderer #card {
  display: contents !important;
}

/* Reset nested wrapper elements - use display:contents to flatten structure */
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 {
  display: contents !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Super Chat Header - use display:contents to promote children to grid */
yt-live-chat-paid-message-renderer #header {
  display: contents !important;
}

/* Super Chat Header Content - col 2, row 1 (author name) */
yt-live-chat-paid-message-renderer #header-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

/* Super Chat Avatar - col 1, spans rows 1-2 */
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #header yt-img-shadow {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: start !important;
  width: var(--twitter-avatar-size) !important;
  height: var(--twitter-avatar-size) !important;
  min-width: var(--twitter-avatar-size) !important;
  min-height: var(--twitter-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background-color: var(--twitter-border) !important;
  display: block !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;
  border-radius: 50% !important;
}

/* Super Chat Author Name */
yt-live-chat-paid-message-renderer #author-name {
  display: block !important;
  color: var(--twitter-text-primary) !important;
  font-size: var(--twitter-superchat-font-size-name) !important;
  font-weight: var(--twitter-superchat-font-weight-name) !important;
  font-family: var(--twitter-font-family) !important;
}

/* Super Chat Content - col 2, row 2 (message + amount below) */
yt-live-chat-paid-message-renderer #content {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  background: transparent !important;
}

/* Super Chat Message */
yt-live-chat-paid-message-renderer #message {
  display: block !important;
  color: var(--twitter-text-primary) !important;
  font-size: var(--twitter-superchat-font-size-content) !important;
  font-weight: var(--twitter-superchat-font-weight-content) !important;
  font-family: var(--twitter-font-family) !important;
  line-height: var(--twitter-line-height) !important;
  word-wrap: break-word !important;
}

/* Super Chat Amount - block style like a colored message */
yt-live-chat-paid-message-renderer #purchase-amount {
  display: block !important;
  margin-top: 8px !important;
  padding: 8px 12px !important;
  background-color: var(--yt-live-chat-paid-message-primary-color, #1DA1F2) !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: var(--twitter-font-family) !important;
  text-align: left !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

/* Super Chat Timestamp - positioned at top right corner */
yt-live-chat-paid-message-renderer #timestamp {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  display: inline !important;
  color: var(--twitter-text-secondary) !important;
  font-size: var(--twitter-font-size-meta) !important;
  font-weight: 400 !important;
  font-family: var(--twitter-font-family) !important;
}

/* ==========================================
   LEGACY PAID MESSAGE - Twitter Blue Style
   yt-live-chat-legacy-paid-message-renderer
   ========================================== */
yt-live-chat-legacy-paid-message-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;

  background-color: #E8F5FD !important;
  border: none !important;
  border-bottom: 1px solid var(--twitter-border) !important;
  border-left: 4px solid var(--twitter-blue) !important;
  border-radius: 0 !important;
  padding: var(--twitter-card-padding) !important;
  margin: 0 !important;

  animation: tweet-fade-in 200ms ease-out !important;

  font-family: var(--twitter-font-family) !important;
}

[data-theme="dark"] yt-live-chat-legacy-paid-message-renderer,
.dark-mode yt-live-chat-legacy-paid-message-renderer {
  background-color: #1a3a4a !important;
}

/* Legacy Paid Avatar */
yt-live-chat-legacy-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo img,
yt-live-chat-legacy-paid-message-renderer yt-img-shadow,
yt-live-chat-legacy-paid-message-renderer yt-img-shadow img {
  width: var(--twitter-avatar-size) !important;
  height: var(--twitter-avatar-size) !important;
  min-width: var(--twitter-avatar-size) !important;
  min-height: var(--twitter-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* Legacy Paid Author Name */
yt-live-chat-legacy-paid-message-renderer #author-name {
  color: var(--twitter-blue) !important;
  font-size: var(--twitter-superchat-font-size-name) !important;
  font-weight: var(--twitter-superchat-font-weight-name) !important;
  font-family: var(--twitter-font-family) !important;
}

/* Legacy Paid Message */
yt-live-chat-legacy-paid-message-renderer #message,
yt-live-chat-legacy-paid-message-renderer #text {
  color: var(--twitter-text-primary) !important;
  font-size: var(--twitter-superchat-font-size-content) !important;
  font-weight: var(--twitter-superchat-font-weight-content) !important;
  font-family: var(--twitter-font-family) !important;
  line-height: var(--twitter-line-height) !important;
}

[data-theme="dark"] yt-live-chat-legacy-paid-message-renderer #message,
[data-theme="dark"] yt-live-chat-legacy-paid-message-renderer #text,
.dark-mode yt-live-chat-legacy-paid-message-renderer #message,
.dark-mode yt-live-chat-legacy-paid-message-renderer #text {
  color: var(--twitter-text-primary) !important;
}

/* ==========================================
   MEMBERSHIP MESSAGE
   yt-live-chat-membership-item-renderer
   ========================================== */
yt-live-chat-membership-item-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;

  background: linear-gradient(135deg, #0f9d58 0%, #0d8a4e 100%) !important;
  border: none !important;
  border-bottom: 1px solid var(--twitter-border) !important;
  border-left: 4px solid #0f9d58 !important;
  border-radius: 0 !important;
  padding: var(--twitter-card-padding) !important;
  margin: 0 !important;

  animation: tweet-fade-in 200ms ease-out !important;

  font-family: var(--twitter-font-family) !important;
  color: #FFFFFF !important;
}

/* Membership Avatar */
yt-live-chat-membership-item-renderer #author-photo,
yt-live-chat-membership-item-renderer #author-photo img,
yt-live-chat-membership-item-renderer yt-img-shadow,
yt-live-chat-membership-item-renderer yt-img-shadow img {
  width: var(--twitter-avatar-size) !important;
  height: var(--twitter-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* Membership Text */
yt-live-chat-membership-item-renderer #author-name,
yt-live-chat-membership-item-renderer #header-subtext {
  color: #FFFFFF !important;
  font-family: var(--twitter-font-family) !important;
}

yt-live-chat-membership-item-renderer #author-name {
  font-weight: var(--twitter-membership-font-weight-name) !important;
  font-size: var(--twitter-membership-font-size-name) !important;
}

/* Membership Content - Stack author name and subtext vertically */
yt-live-chat-membership-item-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
}

yt-live-chat-membership-item-renderer #header-subtext {
  font-size: var(--twitter-membership-font-size-content) !important;
  font-weight: var(--twitter-membership-font-weight-content) !important;
  opacity: 0.9 !important;
}

/* Legacy Paid Content - Stack author name and message vertically */
yt-live-chat-legacy-paid-message-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
}

/* ==========================================
   Interaction Bar (Decorative)
   Shows reply, retweet, heart, share icons with counts
   Pure CSS with absolute positioning
   ========================================== */

/* Make #content a positioning context */
yt-live-chat-text-message-renderer #content {
  position: relative !important;
  padding-bottom: 28px !important;
}

/* Icons using ::after - positioned at bottom */
yt-live-chat-text-message-renderer #content::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  height: 20px !important;
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0ibTE3IDIgNCA0LTQgNCIvPg0KICA8cGF0aCBkPSJNMyAxMXYtMWE0IDQgMCAwIDEgNC00aDE0Ii8+DQogIDxwYXRoIGQ9Im03IDIyLTQtNCA0LTQiLz4NCiAgPHBhdGggZD0iTTIxIDEzdjFhNCA0IDAgMCAxLTQgNEgzIi8+DQo8L3N2Zz4NCg=='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTE5IDE0YzEuNDktMS40NiAzLTMuMjEgMy01LjVBNS41IDUuNSAwIDAgMCAxNi41IDNjLTEuNzYgMC0zIC41LTQuNSAyLTEuNS0xLjUtMi43NC0yLTQuNS0yQTUuNSA1LjUgMCAwIDAgMiA4LjVjMCAyLjMgMS41IDQuMDUgMyA1LjVsNyA3WiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTQgMTJ2OGEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTgiLz4NCiAgPHBvbHlsaW5lIHBvaW50cz0iMTYgNiAxMiAyIDggNiIvPg0KICA8bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjIiIHkyPSIxNSIvPg0KPC9zdmc+DQo=') !important;
  background-size: 18px 18px !important;
  background-repeat: no-repeat !important;
  background-position:
    0px center,
    70px center,
    140px center,
    210px center !important;
  opacity: 0.9 !important;
}

/* Numbers using ::before - absolute positioned with monospace font */
yt-live-chat-text-message-renderer #content::before {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  bottom: 0 !important;
  height: 20px !important;
  line-height: 20px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", monospace !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--twitter-text-secondary) !important;
  white-space: pre !important;
  letter-spacing: 0 !important;
  opacity: 0.8 !important;
}

/* ===========================================
   Variations using nth-child
   Icon spacing: 0, 70, 140, 210px
   Number positions: 22, 92, 162px (after icon)
   Gap = 70px between icon centers
   With monospace ~8px per char: 70/8 ≈ 8-9 chars between numbers
   =========================================== */

/* Variation 1: Reply 2, Heart 12 (red) */
yt-live-chat-text-message-renderer:nth-child(7n+1) #content::before {
  content: "2                 12" !important;
}
yt-live-chat-text-message-renderer:nth-child(7n+1) #content::after {
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0ibTE3IDIgNCA0LTQgNCIvPg0KICA8cGF0aCBkPSJNMyAxMXYtMWE0IDQgMCAwIDEgNC00aDE0Ii8+DQogIDxwYXRoIGQ9Im03IDIyLTQtNCA0LTQiLz4NCiAgPHBhdGggZD0iTTIxIDEzdjFhNCA0IDAgMCAxLTQgNEgzIi8+DQo8L3N2Zz4NCg=='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjRjkxODgwIiBzdHJva2U9IiNGOTE4ODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTE5IDE0YzEuNDktMS40NiAzLTMuMjEgMy01LjVBNS41IDUuNSAwIDAgMCAxNi41IDNjLTEuNzYgMC0zIC41LTQuNSAyLTEuNS0xLjUtMi43NC0yLTQuNS0yQTUuNSA1LjUgMCAwIDAgMiA4LjVjMCAyLjMgMS41IDQuMDUgMyA1LjVsNyA3WiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTQgMTJ2OGEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTgiLz4NCiAgPHBvbHlsaW5lIHBvaW50cz0iMTYgNiAxMiAyIDggNiIvPg0KICA8bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjIiIHkyPSIxNSIvPg0KPC9zdmc+DQo=') !important;
}

/* Variation 2: Retweet 3 (green), Heart 8 */
yt-live-chat-text-message-renderer:nth-child(7n+2) #content::before {
  content: "          3        8" !important;
}
yt-live-chat-text-message-renderer:nth-child(7n+2) #content::after {
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMEJBN0MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0ibTE3IDIgNCA0LTQgNCIvPg0KICA8cGF0aCBkPSJNMyAxMXYtMWE0IDQgMCAwIDEgNC00aDE0Ii8+DQogIDxwYXRoIGQ9Im03IDIyLTQtNCA0LTQiLz4NCiAgPHBhdGggZD0iTTIxIDEzdjFhNCA0IDAgMCAxLTQgNEgzIi8+DQo8L3N2Zz4NCg=='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTE5IDE0YzEuNDktMS40NiAzLTMuMjEgMy01LjVBNS41IDUuNSAwIDAgMCAxNi41IDNjLTEuNzYgMC0zIC41LTQuNSAyLTEuNS0xLjUtMi43NC0yLTQuNS0yQTUuNSA1LjUgMCAwIDAgMiA4LjVjMCAyLjMgMS41IDQuMDUgMyA1LjVsNyA3WiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTQgMTJ2OGEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTgiLz4NCiAgPHBvbHlsaW5lIHBvaW50cz0iMTYgNiAxMiAyIDggNiIvPg0KICA8bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjIiIHkyPSIxNSIvPg0KPC9zdmc+DQo=') !important;
}

/* Variation 3: Reply 1, Heart 24 (red) */
yt-live-chat-text-message-renderer:nth-child(7n+3) #content::before {
  content: "1                 24" !important;
}
yt-live-chat-text-message-renderer:nth-child(7n+3) #content::after {
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0ibTE3IDIgNCA0LTQgNCIvPg0KICA8cGF0aCBkPSJNMyAxMXYtMWE0IDQgMCAwIDEgNC00aDE0Ii8+DQogIDxwYXRoIGQ9Im03IDIyLTQtNCA0LTQiLz4NCiAgPHBhdGggZD0iTTIxIDEzdjFhNCA0IDAgMCAxLTQgNEgzIi8+DQo8L3N2Zz4NCg=='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjRjkxODgwIiBzdHJva2U9IiNGOTE4ODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTE5IDE0YzEuNDktMS40NiAzLTMuMjEgMy01LjVBNS41IDUuNSAwIDAgMCAxNi41IDNjLTEuNzYgMC0zIC41LTQuNSAyLTEuNS0xLjUtMi43NC0yLTQuNS0yQTUuNSA1LjUgMCAwIDAgMiA4LjVjMCAyLjMgMS41IDQuMDUgMyA1LjVsNyA3WiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTQgMTJ2OGEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTgiLz4NCiAgPHBvbHlsaW5lIHBvaW50cz0iMTYgNiAxMiAyIDggNiIvPg0KICA8bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjIiIHkyPSIxNSIvPg0KPC9zdmc+DQo=') !important;
}

/* Variation 4: Retweet 5 (green), Heart 3 (red) */
yt-live-chat-text-message-renderer:nth-child(7n+4) #content::before {
  content: "          5        3" !important;
}
yt-live-chat-text-message-renderer:nth-child(7n+4) #content::after {
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMEJBN0MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0ibTE3IDIgNCA0LTQgNCIvPg0KICA8cGF0aCBkPSJNMyAxMXYtMWE0IDQgMCAwIDEgNC00aDE0Ii8+DQogIDxwYXRoIGQ9Im03IDIyLTQtNCA0LTQiLz4NCiAgPHBhdGggZD0iTTIxIDEzdjFhNCA0IDAgMCAxLTQgNEgzIi8+DQo8L3N2Zz4NCg=='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjRjkxODgwIiBzdHJva2U9IiNGOTE4ODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTE5IDE0YzEuNDktMS40NiAzLTMuMjEgMy01LjVBNS41IDUuNSAwIDAgMCAxNi41IDNjLTEuNzYgMC0zIC41LTQuNSAyLTEuNS0xLjUtMi43NC0yLTQuNS0yQTUuNSA1LjUgMCAwIDAgMiA4LjVjMCAyLjMgMS41IDQuMDUgMyA1LjVsNyA3WiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTQgMTJ2OGEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTgiLz4NCiAgPHBvbHlsaW5lIHBvaW50cz0iMTYgNiAxMiAyIDggNiIvPg0KICA8bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjIiIHkyPSIxNSIvPg0KPC9zdmc+DQo=') !important;
}

/* Variation 5: Reply 3, Retweet 1, Heart 47 (red) */
yt-live-chat-text-message-renderer:nth-child(7n+5) #content::before {
  content: "3         1       47" !important;
}
yt-live-chat-text-message-renderer:nth-child(7n+5) #content::after {
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0ibTE3IDIgNCA0LTQgNCIvPg0KICA8cGF0aCBkPSJNMyAxMXYtMWE0IDQgMCAwIDEgNC00aDE0Ii8+DQogIDxwYXRoIGQ9Im03IDIyLTQtNCA0LTQiLz4NCiAgPHBhdGggZD0iTTIxIDEzdjFhNCA0IDAgMCAxLTQgNEgzIi8+DQo8L3N2Zz4NCg=='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjRjkxODgwIiBzdHJva2U9IiNGOTE4ODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTE5IDE0YzEuNDktMS40NiAzLTMuMjEgMy01LjVBNS41IDUuNSAwIDAgMCAxNi41IDNjLTEuNzYgMC0zIC41LTQuNSAyLTEuNS0xLjUtMi43NC0yLTQuNS0yQTUuNSA1LjUgMCAwIDAgMiA4LjVjMCAyLjMgMS41IDQuMDUgMyA1LjVsNyA3WiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTQgMTJ2OGEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTgiLz4NCiAgPHBvbHlsaW5lIHBvaW50cz0iMTYgNiAxMiAyIDggNiIvPg0KICA8bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjIiIHkyPSIxNSIvPg0KPC9zdmc+DQo=') !important;
}

/* Variation 6: Retweet 2 (green) */
yt-live-chat-text-message-renderer:nth-child(7n+6) #content::before {
  content: "          2" !important;
}
yt-live-chat-text-message-renderer:nth-child(7n+6) #content::after {
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMEJBN0MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0ibTE3IDIgNCA0LTQgNCIvPg0KICA8cGF0aCBkPSJNMyAxMXYtMWE0IDQgMCAwIDEgNC00aDE0Ii8+DQogIDxwYXRoIGQ9Im03IDIyLTQtNCA0LTQiLz4NCiAgPHBhdGggZD0iTTIxIDEzdjFhNCA0IDAgMCAxLTQgNEgzIi8+DQo8L3N2Zz4NCg=='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTE5IDE0YzEuNDktMS40NiAzLTMuMjEgMy01LjVBNS41IDUuNSAwIDAgMCAxNi41IDNjLTEuNzYgMC0zIC41LTQuNSAyLTEuNS0xLjUtMi43NC0yLTQuNS0yQTUuNSA1LjUgMCAwIDAgMiA4LjVjMCAyLjMgMS41IDQuMDUgMyA1LjVsNyA3WiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTQgMTJ2OGEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTgiLz4NCiAgPHBvbHlsaW5lIHBvaW50cz0iMTYgNiAxMiAyIDggNiIvPg0KICA8bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjIiIHkyPSIxNSIvPg0KPC9zdmc+DQo=') !important;
}

/* Variation 7: Reply 1, Heart 5 (red) */
yt-live-chat-text-message-renderer:nth-child(7n) #content::before {
  content: "1                  5" !important;
}
yt-live-chat-text-message-renderer:nth-child(7n) #content::after {
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0ibTE3IDIgNCA0LTQgNCIvPg0KICA8cGF0aCBkPSJNMyAxMXYtMWE0IDQgMCAwIDEgNC00aDE0Ii8+DQogIDxwYXRoIGQ9Im03IDIyLTQtNCA0LTQiLz4NCiAgPHBhdGggZD0iTTIxIDEzdjFhNCA0IDAgMCAxLTQgNEgzIi8+DQo8L3N2Zz4NCg=='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjRjkxODgwIiBzdHJva2U9IiNGOTE4ODAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTE5IDE0YzEuNDktMS40NiAzLTMuMjEgMy01LjVBNS41IDUuNSAwIDAgMCAxNi41IDNjLTEuNzYgMC0zIC41LTQuNSAyLTEuNS0xLjUtMi43NC0yLTQuNS0yQTUuNSA1LjUgMCAwIDAgMiA4LjVjMCAyLjMgMS41IDQuMDUgMyA1LjVsNyA3WiIvPg0KPC9zdmc+DQo='),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1MzY0NzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4NCiAgPHBhdGggZD0iTTQgMTJ2OGEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTgiLz4NCiAgPHBvbHlsaW5lIHBvaW50cz0iMTYgNiAxMiAyIDggNiIvPg0KICA8bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjIiIHkyPSIxNSIvPg0KPC9zdmc+DQo=') !important;
}

/* Hover effect */
yt-live-chat-text-message-renderer:hover #content::after {
  opacity: 1 !important;
}

yt-live-chat-text-message-renderer:hover #content::before {
  opacity: 1 !important;
}

/* ==========================================
   Sticker Messages
   ========================================== */
yt-live-chat-paid-sticker-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;

  background-color: var(--twitter-card-bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--twitter-border) !important;
  border-left: 4px solid var(--twitter-retweet-green) !important;
  border-radius: 0 !important;
  padding: var(--twitter-card-padding) !important;
  margin: 0 !important;

  animation: tweet-fade-in 200ms ease-out !important;

  font-family: var(--twitter-font-family) !important;
}

/* Sticker Avatar */
yt-live-chat-paid-sticker-renderer #author-photo,
yt-live-chat-paid-sticker-renderer #author-photo img,
yt-live-chat-paid-sticker-renderer yt-img-shadow,
yt-live-chat-paid-sticker-renderer yt-img-shadow img {
  width: var(--twitter-avatar-size) !important;
  height: var(--twitter-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* Sticker Author Name */
yt-live-chat-paid-sticker-renderer #author-name {
  color: var(--twitter-text-primary) !important;
  font-size: var(--twitter-font-size-name) !important;
  font-weight: 700 !important;
  font-family: var(--twitter-font-family) !important;
}

/* Sticker Image */
yt-live-chat-paid-sticker-renderer #sticker {
  max-width: 150px !important;
  max-height: 150px !important;
  border-radius: 8px !important;
}

/* ==========================================
   Gift Purchase Message
   ========================================== */
yt-live-chat-sponsor-item-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;

  background: linear-gradient(135deg, #9146FF 0%, #7c3aed 100%) !important;
  border: none !important;
  border-bottom: 1px solid var(--twitter-border) !important;
  border-left: 4px solid #9146FF !important;
  border-radius: 0 !important;
  padding: var(--twitter-card-padding) !important;
  margin: 0 !important;

  animation: tweet-fade-in 200ms ease-out !important;

  font-family: var(--twitter-font-family) !important;
  color: #FFFFFF !important;
}

/* ==========================================
   Link Styling
   ========================================== */
yt-live-chat-text-message-renderer a,
yt-live-chat-paid-message-renderer a {
  color: var(--twitter-blue) !important;
  text-decoration: none !important;
}

yt-live-chat-text-message-renderer a:hover,
yt-live-chat-paid-message-renderer a:hover {
  text-decoration: underline !important;
}

/* ==========================================
   Author Chip (if visible)
   ========================================== */
yt-live-chat-author-chip {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
}

yt-live-chat-author-chip #author-name {
  color: var(--twitter-text-primary) !important;
}

/* ==========================================
   Menu Button (hide)
   ========================================== */
yt-live-chat-text-message-renderer #menu,
yt-live-chat-paid-message-renderer #menu {
  display: none !important;
}

/* ==========================================
   Additional Cleanup
   ========================================== */

/* Remove any YouTube default backgrounds */
yt-live-chat-text-message-renderer[author-is-owner],
yt-live-chat-text-message-renderer[author-is-moderator] {
  background-color: var(--twitter-card-bg) !important;
}

/* Ensure no extra margin - gap is handled by flex container */
yt-live-chat-item-list-renderer #items > * {
  margin: 0 !important;
}

/* Remove inline styles from YouTube */
yt-live-chat-text-message-renderer[style*="background"],
yt-live-chat-paid-message-renderer[style*="background"] {
  background-color: var(--twitter-card-bg) !important;
}