/*
 * =================================================================
 * IM 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:
 * - LINE/Telegram style chat bubbles
 * - Rich pop-in animations for messages
 * - Username bounce animation
 * - Avatar scale animation
 * - Customizable colors via CSS variables
 * - Role-based styling (owner, moderator, member)
 * =================================================================
 */

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

/* ==========================================
   CSS Variables - IM Style Theme
   ========================================== */
:root {
  /* ===== Bubble Colors ===== */
  --im-bubble-bg: #C1E59F;
  --im-bubble-border: transparent;
  --im-bubble-border-width: 0px;

  --im-paid-bubble-bg: #f1bc6a;
  --im-paid-bubble-border: transparent;
  --im-paid-bubble-border-width: 0px;

  --im-membership-bubble-bg: #bca1e3;
  --im-membership-bubble-border: transparent;
  --im-membership-bubble-border-width: 0px;
  --im-username-color: #A3D78A;
  --im-text-color: #1a1a1a;
  --im-timestamp-color: #A3D78A;

  /* ===== Chip/Pill Badge Colors ===== */
  --im-chip-bg: #ffffff;
  --im-chip-text: #1a1a1a;

  /* ===== Quote Alert Block Colors ===== */
  --im-quote-bg: rgba(0, 0, 0, 0.08);
  --im-quote-radius: 6px;
  --im-superchat-border-color: #FFD700;
  --im-membership-border-color: #4CAF50;

  /* ===== Role Colors ===== */
  --im-owner-bg: #C1E59F;
  --im-owner-text: #1a1a1a;
  --im-owner-username: #A3D78A;
  --im-moderator-bg: #FF5555;
  --im-moderator-username: #FF5555;
  --im-member-bg: #FF937E;
  --im-member-username: #FF937E;

  /* ===== Animation ===== */
  --im-animation-duration: 400ms;
  --im-animation-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --im-animation-delay: 50ms;

  /* ===== Layout ===== */
  --im-bubble-radius: 18px;
  --im-bubble-padding: 10px 14px;
  --im-bubble-max-width: 280px;
  --im-avatar-size: 40px;
  --im-gap: 10px;
  --im-message-gap: 6px;

  /* ===== Typography - Text Message ===== */
  --im-font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro", "Hiragino Sans", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif;
  --im-font-size-username: 13px;
  --im-font-size-content: 15px;
  --im-font-size-timestamp: 11px;

  /* ===== Typography - Paid Message ===== */
  --im-paid-font-size-username: 12px;
  --im-paid-font-size-content: 14px;

  /* ===== Typography - Membership Message ===== */
  --im-membership-font-size-username: 12px;
  --im-membership-font-size-content: 14px;
}

/* ==========================================
   Animation Keyframes
   ========================================== */

/* Message Bubble Pop-in Animation */
@keyframes im-message-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(20px);
  }
  50% {
    transform: scale(1.05) translateY(-5px);
  }
  70% {
    transform: scale(0.95) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Username Bounce Animation */
@keyframes im-username-bounce {
  0% {
    opacity: 0;
    transform: translateX(-20px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateX(5px) scale(1.1);
  }
  80% {
    transform: translateX(-2px) scale(0.98);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes im-chip-tilt-in {
  0% {
    opacity: 0;
    transform: rotate(10deg) translate(-20px, 0) scale(0.7);
  }
  60% {
    opacity: 1;
    transform: rotate(-8deg) translate(5px, 8px) scale(1.1);
  }
  80% {
    transform: rotate(-2deg) translate(0, 5px) scale(0.98);
  }
  100% {
    transform: rotate(-4deg) translate(2px, 6px) scale(1);
  }
}

/* Avatar Scale Animation */
@keyframes im-avatar-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Timestamp Fade-in */
@keyframes im-timestamp-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Super Chat Shake Animation */
@keyframes im-superchat-shake {
  0%, 100% { transform: translateX(0) scale(1); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) scale(1); }
  20%, 40%, 60%, 80% { transform: translateX(2px) scale(1); }
}

/* Gift Card Entrance Animation */
@keyframes im-gift-entrance {
  0% {
    opacity: 0;
    transform: scale(0.5) rotateY(-15deg);
  }
  60% {
    transform: scale(1.05) rotateY(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0);
  }
}

/* Ribbon Bounce Animation */
@keyframes im-ribbon-bounce {
  0%, 100% {
    transform: rotate(-5deg) scale(1);
  }
  50% {
    transform: rotate(5deg) scale(1.1);
  }
}

/* Sparkle Animation */
@keyframes im-sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* Membership Welcome Animation */
@keyframes im-welcome-entrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  60% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Heart Pulse Animation */
@keyframes im-heart-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Confetti Fall Animation */
@keyframes im-confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(20px) rotate(360deg);
    opacity: 0;
  }
}

/* ==========================================
   Base Styles - Transparent Background
   ========================================== */
body {
  overflow: hidden !important;
  background-color: transparent !important;
  font-family: var(--im-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(--im-message-gap) !important;
  padding: 8px !important;
}

/* ==========================================
   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,
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,
/* Hide before-content-buttons */
#before-content-buttons,
yt-live-chat-text-message-renderer #before-content-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 */
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-paid-message-renderer #author-badges {
  display: none !important;
}

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

/* ==========================================
   IM STYLE - 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: var(--im-gap) !important;

  background-color: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  overflow: visible !important;

  animation: im-message-pop-in var(--im-animation-duration) var(--im-animation-easing) !important;
  transform-origin: left center !important;

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

/* ==========================================
   Avatar Styling - Circular with Scale Animation
   ========================================== */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-text-message-renderer yt-img-shadow {
  width: var(--im-avatar-size) !important;
  height: var(--im-avatar-size) !important;
  min-width: var(--im-avatar-size) !important;
  min-height: var(--im-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: im-avatar-scale 300ms ease-out !important;
}

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

/* ==========================================
   Content Container
   ========================================== */
yt-live-chat-text-message-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  max-width: var(--im-bubble-max-width) !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Author chip wrapper - reset margins and allow overflow for transform */
yt-live-chat-text-message-renderer #content > yt-live-chat-author-chip {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Reset margins on author chip inner elements and allow overflow */
yt-live-chat-text-message-renderer yt-live-chat-author-chip {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ==========================================
   Username - Chip/Pill Style with Rotation & Overlap
   Tilted to upper-right, overlapping message bubble corner
   ========================================== */
yt-live-chat-text-message-renderer #author-name-chip,
yt-live-chat-text-message-renderer #author-name {
  display: inline-block !important;
  color: var(--im-chip-text) !important;
  background: var(--im-chip-bg) !important;
  font-size: var(--im-font-size-username) !important;
  font-weight: 600 !important;
  font-family: var(--im-font-family) !important;
  line-height: 1.3 !important;
  padding: 2px 10px !important;
  border-radius: 12px !important;

  /* Rotation & Position - Tilted to upper-right, overlapping bubble */
  position: relative !important;
  z-index: 2 !important;
  transform: rotate(-4deg) translate(2px, 6px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;

  animation: im-chip-tilt-in 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  animation-delay: var(--im-animation-delay) !important;
  animation-fill-mode: backwards !important;
}

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

/* ==========================================
   Message Bubble - IM Style
   ========================================== */
yt-live-chat-text-message-renderer #message {
  display: inline-block !important;
  background: var(--im-bubble-bg) !important;
  color: var(--im-text-color) !important;
  font-size: var(--im-font-size-content) !important;
  font-weight: 400 !important;
  font-family: var(--im-font-family) !important;
  line-height: 1.4 !important;

  padding: var(--im-bubble-padding) !important;
  margin: 0 !important;
  border-radius: var(--im-bubble-radius) var(--im-bubble-radius) var(--im-bubble-radius) 4px !important;
  border: var(--im-bubble-border-width) solid var(--im-bubble-border) !important;

  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;

  max-width: 100% !important;
  box-sizing: border-box !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;
}

/* ==========================================
   Role-Based Styling
   ========================================== */

/* Owner - Gold Gradient */
yt-live-chat-text-message-renderer[author-type="owner"] #author-name {
  color: var(--im-owner-username) !important;
}

yt-live-chat-text-message-renderer[author-type="owner"] #message {
  background: var(--im-owner-bg) !important;
  color: var(--im-owner-text) !important;
}

/* Owner Crown Icon - New Crown SVG */
yt-live-chat-text-message-renderer[author-type="owner"] #author-name::after {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  background-color: #FFD700 !important;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yMS4xOSw4LjgxYTIuNSwyLjUsMCwwLDAtMi0uODEsMi41OSwyLjU5LDAsMCwwLTIsMS4zNEwxNSwxMywxMy4zMSw0LjUyYTIuNSwyLjUsMCwxLDAtMi42MiwwTDksMTMsNi44MSw5LjM0YTIuNjIsMi42MiwwLDAsMC0yLTEuMzQsMi41LDIuNSwwLDEsMC0yLDMuNzJsMiwxMEEyLDIsMCwwLDAsNi43NywyM0gxNy4yM2EyLDIsMCwwLDAsMi0xLjI1bDItMTBhMi41LDIuNSwwLDAsMCwwLTIuOTFaIi8+PC9zdmc+') !important;
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yMS4xOSw4LjgxYTIuNSwyLjUsMCwwLDAtMi0uODEsMi41OSwyLjU5LDAsMCwwLTIsMS4zNEwxNSwxMywxMy4zMSw0LjUyYTIuNSwyLjUsMCwxLDAtMi42MiwwTDksMTMsNi44MSw5LjM0YTIuNjIsMi42MiwwLDAsMC0yLTEuMzQsMi41LDIuNSwwLDEsMC0yLDMuNzJsMiwxMEEyLDIsMCwwLDAsNi43NywyM0gxNy4yM2EyLDIsMCwwLDAsMi0xLjI1bDItMTBhMi41LDIuNSwwLDAsMCwwLTIuOTFaIi8+PC9zdmc+') !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Moderator - Purple */
yt-live-chat-text-message-renderer[author-type="moderator"] #author-name {
  color: var(--im-moderator-username) !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"] #message {
  background: var(--im-moderator-bg) !important;
  color: #FFFFFF !important;
}

/* Moderator Shield Icon */
yt-live-chat-text-message-renderer[author-type="moderator"] #author-name::after {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  background-color: #9B59B6 !important;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xMiAxTDMgNVYxMUMzIDE2LjU1IDYuODQgMjEuNzQgMTIgMjNDMTcuMTYgMjEuNzQgMjEgMTYuNTUgMjEgMTFWNUwxMiAxWk0xMCAzLjQ2TDEwIDE0TDE3LjYgMTRMMTkuNiAzLjQ2TDEwIDMuNDZaIi8+PC9zdmc+') !important;
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xMiAxTDMgNVYxMUMzIDE2LjU1IDYuODQgMjEuNzQgMTIgMjNDMTcuMTYgMjEuNzQgMjEgMTYuNTUgMjEgMTFWNUwxMiAxWk0xMCAzLjQ2TDEwIDE0TDE3LjYgMTRMMTkuNiAzLjQ2TDEwIDMuNDZaIi8+PC9zdmc+') !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Member - Blue */
yt-live-chat-text-message-renderer[author-type="member"] #author-name {
  color: var(--im-member-username) !important;
}

yt-live-chat-text-message-renderer[author-type="member"] #message {
  background: var(--im-member-bg) !important;
  color: #FFFFFF !important;
}

/* Member Star Icon */
yt-live-chat-text-message-renderer[author-type="member"] #author-name::after {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  background-color: #3498DB !important;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xMiAyTDE1LjA5IDguMjZMMjIgOS4yN0wxNyAxNC4xNEwxOC4xOCAyMS4wMkwxMiAxNy43N0w1LjgyIDIxLjAyTDcgMTQuMTRMMiA5LjI3TDguOTEgOC4yNkwxMiAyWiIvPjwvc3ZnPg==') !important;
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xMiAyTDE1LjA5IDguMjZMMjIgOS4yN0wxNyAxNC4xNEwxOC4xOCAyMS4wMkwxMiAxNy43N0w1LjgyIDIxLjAyTDcgMTQuMTRMMiA5LjI3TDguOTEgOC4yNkwxMiAyWiIvPjwvc3ZnPg==') !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* ==========================================
   SUPER CHAT - Quote Inside Bubble Style
   yt-live-chat-paid-message-renderer
   ========================================== */
yt-live-chat-paid-message-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--im-gap) !important;

  background-color: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;

  animation: im-message-pop-in var(--im-animation-duration) var(--im-animation-easing) !important;
  transform-origin: left center !important;

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

/* Card Container - The unified bubble wrapper */
yt-live-chat-paid-message-renderer #card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  background: var(--im-paid-bubble-bg) !important;
  border-radius: var(--im-bubble-radius) var(--im-bubble-radius) var(--im-bubble-radius) 4px !important;
  border: var(--im-paid-bubble-border-width) solid var(--im-paid-bubble-border) !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-width: 300px !important;
  padding: 0 !important;
}

/* Bell Icon Decoration - Top Right Corner */
yt-live-chat-paid-message-renderer #card::before {
  display: none !important;
}

yt-live-chat-paid-message-renderer #card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: -12px !important;
  right: -12px !important;
  width: 42px !important;
  height: 42px !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02NjkuNjQgOTA4LjA5YTE5NjIuMSAxOTYyLjEgMCAwIDEtMzEyLjUzIDAgMjYyLjQgMjYyLjQgMCAwIDEtMjQwLjY3LTI0MC42NiAxOTYyLjEgMTk2Mi4xIDAgMCAxIDAtMzEyLjUzIDI2Mi40IDI2Mi40IDAgMCAxIDI0MC42Ny0yNDAuNjcgMTk2Mi4xIDE5NjIuMSAwIDAgMSAzMTIuNTMgMEEyNjIuNCAyNjIuNCAwIDAgMSA5MTAuMyAzNTQuOWExOTYyLjEgMTk2Mi4xIDAgMCAxIDAgMzEyLjUzIDI2Mi40IDI2Mi40IDAgMCAxLTI0MC42NiAyNDAuNjZ6IiBmaWxsPSIjRkZFNENGIi8+PHBhdGggZD0iTTc1Ni4zNCA2MzYuMzVsLTE0LjYyLTguNDRhNTAuNSA1MC41IDAgMCAxLTI1LjI1LTQzLjczVjQ0Ny40YzAtODkuMjYtNTcuODktMTY1LTEzOC4xOS0xOTEuNzNhMjkuNTQgMjkuNTQgMCAwIDEtMTguNzQtMTkgNDkuMyA0OS4zIDAgMCAwLTkzLjg1IDAuNDEgMjguOTQgMjguOTQgMCAwIDEtMTguNjEgMTguNTdjLTgwLjMgMjYuNzQtMTM4LjE5IDEwMi40Ny0xMzguMTkgMTkxLjczdjEzOC42OGE1MiA1MiAwIDAgMS0yNiA0NS4wOGwtOSA1LjIxYy0yNS4wNyAxNC40Ny0yMCA0OS4yNSAzIDU5LjI0IDIyLjE3IDE0IDEyMC40OSAyNC41MSAyMzguNDUgMjQuNTEgMTE5LjgyIDAgMjE5LjM4LTEwLjg3IDIzOS40NS0yNS4xOCAyMS43OC0xMC43OCAyNi4wOS00NC40IDEuNTUtNTguNTd6TTU5MC4yOSA3NTIuNmMtMjMuNjIgMS00OC44MiAxLjQ4LTc1IDEuNDgtMjYuMzMgMC01MS42Ny0wLjUyLTc1LjQyLTEuNUE5LjUzIDkuNTMgMCAwIDAgNDMxIDc2Ni41YTk0LjYgOTQuNiAwIDAgMCAxNjguMDkgMCA5LjUzIDkuNTMgMCAwIDAtOC44LTEzLjl6IiBmaWxsPSIjRkY2RTFGIi8+PHBhdGggZD0iTTY0Ni4wNSA0ODQuNzFhMjYuODYgMjYuODYgMCAwIDEtMjYuNjItMjMuNThjLTcuNS02MC44LTQyLjI1LTkxLjA2LTY0LjItMTA0LjM2YTI3IDI3IDAgMCAxLTEyLjA4LTMwLjYyIDI2Ljk0IDI2Ljk0IDAgMCAxIDM5LjYyLTE1Ljc0IDE3OS44MyAxNzkuODMgMCAwIDEgMjQuNzIgMTcuNjZjMjUuMjEgMjEuNCA1Ni45MiA2MC41NiA2NS4xNiAxMjUuNzIgMS44IDE0LjI0LTcuNDkgMjcuODItMjEuNiAzMC40NWEyNi42OCAyNi42OCAwIDAgMS01IDAuNDd6IiBmaWxsPSIjRkZFNENGIi8+PC9zdmc+Cg==') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transform: rotate(12deg) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Reset nested wrapper elements */
yt-live-chat-paid-message-renderer #header-content-primary-column {
  display: flex !important;
  flex-direction: column !important;
  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;
  background: transparent !important;
  box-shadow: none !important;
}

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;
}

/* Quote Header - Alert Block Style Inside Bubble */
yt-live-chat-paid-message-renderer #header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--im-quote-bg) !important;
  border-radius: var(--im-quote-radius) !important;
  border-left: 3px solid var(--yt-live-chat-paid-message-header-background-color, var(--im-superchat-border-color)) !important;
  margin: 10px 10px 0 10px !important;
}

/* Quote Header Content */
yt-live-chat-paid-message-renderer #header-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Avatar Styling */
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo yt-img-shadow {
  width: var(--im-avatar-size) !important;
  height: var(--im-avatar-size) !important;
  min-width: var(--im-avatar-size) !important;
  min-height: var(--im-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: im-avatar-scale 300ms ease-out !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;
  object-fit: cover !important;
}

/* Quote Author Name - Chip/Pill Style */
yt-live-chat-paid-message-renderer #author-name {
  display: inline-block !important;
  color: var(--im-chip-text) !important;
  background: var(--im-chip-bg) !important;
  font-size: var(--im-paid-font-size-username) !important;
  font-weight: 600 !important;
  font-family: var(--im-font-family) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}

/* Quote Amount Badge - Chip/Pill Style */
yt-live-chat-paid-message-renderer #purchase-amount {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--im-chip-text) !important;
  background: var(--im-chip-bg) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}

/* No Gift Icon */
yt-live-chat-paid-message-renderer #purchase-amount::before {
  display: none !important;
}

/* Content Area */
yt-live-chat-paid-message-renderer #content {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Message Body - Inside the unified bubble */
yt-live-chat-paid-message-renderer #message {
  display: block !important;
  background: transparent !important;
  color: var(--im-text-color) !important;
  font-size: var(--im-paid-font-size-content) !important;
  font-weight: 400 !important;
  font-family: var(--im-font-family) !important;
  line-height: 1.4 !important;
  padding: 6px 14px 10px 14px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* No quote marks */
yt-live-chat-paid-message-renderer #message::before {
  display: none !important;
}

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

/* Hide elements we don't need */
yt-live-chat-paid-message-renderer #menu,
yt-live-chat-paid-message-renderer #action-buttons,
yt-live-chat-paid-message-renderer #creator-heart-button {
  display: none !important;
}

/* ==========================================
   LEGACY PAID MESSAGE - Simple Gift Card
   yt-live-chat-legacy-paid-message-renderer
   ========================================== */
yt-live-chat-legacy-paid-message-renderer {
  position: relative !important;
  display: block !important;

  background-color: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  margin-left: 8px !important;

  animation: im-gift-entrance 600ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform-origin: left center !important;

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

/* Legacy Card Container - Flat Design with Depth */
yt-live-chat-legacy-paid-message-renderer #card {
  display: block !important;
  position: relative !important;
  background: #F5F9FF !important;
  border-radius: 12px !important;
  border: 2px solid #64B5F6 !important;
  box-shadow: 3px 3px 0 #BBDEFB !important;
  overflow: visible !important;
  max-width: 280px !important;
  padding: 14px 16px !important;
}

/* Decorative Star */
yt-live-chat-legacy-paid-message-renderer #card::before {
  content: "⭐" !important;
  position: absolute !important;
  top: -8px !important;
  right: 12px !important;
  font-size: 18px !important;
  animation: im-sparkle 2s ease-in-out infinite !important;
}

/* Legacy Card Header */
yt-live-chat-legacy-paid-message-renderer #header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  background: transparent !important;
}

/* Legacy Paid Avatar */
yt-live-chat-legacy-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer yt-img-shadow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 2px solid #2196F3 !important;
}

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

/* Legacy Paid Author Name */
yt-live-chat-legacy-paid-message-renderer #author-name {
  color: #1565C0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--im-font-family) !important;
}

/* Legacy Paid Message */
yt-live-chat-legacy-paid-message-renderer #message,
yt-live-chat-legacy-paid-message-renderer #text {
  display: block !important;
  background: rgba(33, 150, 243, 0.1) !important;
  color: #0D47A1 !important;
  font-size: var(--im-font-size-content) !important;
  font-weight: 400 !important;
  font-family: var(--im-font-family) !important;
  line-height: 1.5 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border-left: 3px solid #2196F3 !important;
}

/* ==========================================
   MEMBERSHIP MESSAGE - Quote Inside Bubble Style
   yt-live-chat-membership-item-renderer

   Note: Membership DOM is different from Super Chat!
   - No #card wrapper
   - No #header element
   - Has #author-photo directly
   - Has #content with #author-name and #header-subtext
   ========================================== */
yt-live-chat-membership-item-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--im-gap) !important;

  background-color: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;

  animation: im-message-pop-in var(--im-animation-duration) var(--im-animation-easing) !important;
  transform-origin: left center !important;

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

/* Avatar Styling - Displayed like normal messages */
yt-live-chat-membership-item-renderer #author-photo,
yt-live-chat-membership-item-renderer #author-photo yt-img-shadow,
yt-live-chat-membership-item-renderer yt-img-shadow {
  width: var(--im-avatar-size) !important;
  height: var(--im-avatar-size) !important;
  min-width: var(--im-avatar-size) !important;
  min-height: var(--im-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: im-avatar-scale 300ms ease-out !important;
}

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

/* Content Container - The unified bubble wrapper (replaces #card) */
yt-live-chat-membership-item-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  background: var(--im-membership-bubble-bg) !important;
  border-radius: var(--im-bubble-radius) var(--im-bubble-radius) var(--im-bubble-radius) 4px !important;
  border: var(--im-membership-bubble-border-width) solid var(--im-membership-bubble-border) !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-width: 300px !important;
  padding: 10px !important;
}

/* Star Icon Decoration - Bottom Right Corner */
yt-live-chat-membership-item-renderer #content::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: -12px !important;
  right: -12px !important;
  width: 42px !important;
  height: 42px !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02NjkuNjQgOTEwLjA5YTE5NjIuMSAxOTYyLjEgMCAwIDEtMzEyLjUzIDAgMjYyLjQgMjYyLjQgMCAwIDEtMjQwLjY3LTI0MC42NiAxOTYyLjEgMTk2Mi4xIDAgMCAxIDAtMzEyLjUzIDI2Mi40IDI2Mi40IDAgMCAxIDI0MC42Ny0yNDAuNjcgMTk2Mi4xIDE5NjIuMSAwIDAgMSAzMTIuNTMgMEEyNjIuNCAyNjIuNCAwIDAgMSA5MTAuMyAzNTYuOWExOTYyLjEgMTk2Mi4xIDAgMCAxIDAgMzEyLjUzIDI2Mi40IDI2Mi40IDAgMCAxLTI0MC42NiAyNDAuNjZ6IiBmaWxsPSIjRjFERkZGIi8+PHBhdGggZD0iTTU1NC41OSA3OTIuNDFsMTcxLjU1LTk3LjhhODcuNTYgODcuNTYgMCAwIDAgNDQuNDUtNzZWNDIzYTg3LjU0IDg3LjU0IDAgMCAwLTQ0LjQ1LTc2bC0xNzEuNTUtOTcuOGE4OS44NyA4OS44NyAwIDAgMC04OC44OSAwTDI5NC4xNCAzNDdhODcuNTQgODcuNTQgMCAwIDAtNDQuNDUgNzZ2MTk1LjZhODcuNTYgODcuNTYgMCAwIDAgNDQuNDUgNzZsMTcxLjU2IDk3LjhhODkuODcgODkuODcgMCAwIDAgODguODkgMC4wMXoiIGZpbGw9IiNCRTg1RkYiLz48cGF0aCBkPSJNNTM1LjIgMzkxLjcxbDIzLjY5IDQ4QTIyLjQ0IDIyLjQ0IDAgMCAwIDU3NS43OCA0NTJsNTMgNy43YzE4LjQgMi42NyAyNS43NCAyNS4yOCAxMi40MyAzOC4yNmwtMzguMzQgMzcuMzdhMjIuNDMgMjIuNDMgMCAwIDAtNi40NSAxOS44Nmw5LjA0IDUyLjgxYzMuMTQgMTguMzItMTYuMDkgMzIuMy0zMi41NCAyMy42NWwtNDcuNC0yNC45MmEyMi4zOSAyMi4zOSAwIDAgMC0yMC44NyAwbC00Ny40IDI0LjkyYy0xNi40NSA4LjY1LTM1LjY5LTUuMzMtMzIuNTQtMjMuNjVsOS4wNS01Mi43N2EyMi40NiAyMi40NiAwIDAgMC02LjQ1LTE5Ljg2TDM4OSA0OThjLTEzLjMxLTEzLTYtMzUuNTkgMTIuNDMtMzguMjZsNTMtNy43YTIyLjQxIDIyLjQxIDAgMCAwIDE2Ljg4LTEyLjI3bDIzLjctNDhhMjIuNDMgMjIuNDMgMCAwIDEgNDAuMTktMC4wNnoiIGZpbGw9IiNGMURGRkYiLz48L3N2Zz4K') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transform: rotate(-8deg) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Header Primary Column - Alert Block Style Inside Bubble */
yt-live-chat-membership-item-renderer #header-primary-column {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--im-quote-bg) !important;
  border-radius: var(--im-quote-radius) !important;
  border-left: 3px solid var(--im-membership-border-color) !important;
  margin: 0 !important;
}

/* Membership Author Name - Chip/Pill Style */
yt-live-chat-membership-item-renderer #author-name {
  display: inline-block !important;
  color: var(--im-chip-text) !important;
  background: var(--im-chip-bg) !important;
  font-size: var(--im-membership-font-size-username) !important;
  font-weight: 600 !important;
  font-family: var(--im-font-family) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}

/* Membership Subtext (e.g., "New member") - Plain Text */
yt-live-chat-membership-item-renderer #header-subtext {
  display: block !important;
  background: transparent !important;
  color: var(--im-text-color) !important;
  font-size: var(--im-membership-font-size-content) !important;
  font-weight: 500 !important;
  font-family: var(--im-font-family) !important;
  padding: 6px 14px 10px 14px !important;
  margin: 0 !important;
}

/* Hide elements we don't need */
yt-live-chat-membership-item-renderer #menu,
yt-live-chat-membership-item-renderer #action-buttons {
  display: none !important;
}

/* ==========================================
   STICKER MESSAGE
   yt-live-chat-paid-sticker-renderer
   ========================================== */
yt-live-chat-paid-sticker-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--im-gap) !important;

  background-color: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;

  animation: im-message-pop-in var(--im-animation-duration) var(--im-animation-easing) !important;

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

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

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

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

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

/* Bell Icon Decoration for Sticker - Bottom Right Corner */
yt-live-chat-paid-sticker-renderer::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: -10px !important;
  right: -10px !important;
  width: 36px !important;
  height: 36px !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02NjkuNjQgOTA4LjA5YTE5NjIuMSAxOTYyLjEgMCAwIDEtMzEyLjUzIDAgMjYyLjQgMjYyLjQgMCAwIDEtMjQwLjY3LTI0MC42NiAxOTYyLjEgMTk2Mi4xIDAgMCAxIDAtMzEyLjUzIDI2Mi40IDI2Mi40IDAgMCAxIDI0MC42Ny0yNDAuNjcgMTk2Mi4xIDE5NjIuMSAwIDAgMSAzMTIuNTMgMEEyNjIuNCAyNjIuNCAwIDAgMSA5MTAuMyAzNTQuOWExOTYyLjEgMTk2Mi4xIDAgMCAxIDAgMzEyLjUzIDI2Mi40IDI2Mi40IDAgMCAxLTI0MC42NiAyNDAuNjZ6IiBmaWxsPSIjRkZFNENGIi8+PHBhdGggZD0iTTc1Ni4zNCA2MzYuMzVsLTE0LjYyLTguNDRhNTAuNSA1MC41IDAgMCAxLTI1LjI1LTQzLjczVjQ0Ny40YzAtODkuMjYtNTcuODktMTY1LTEzOC4xOS0xOTEuNzNhMjkuNTQgMjkuNTQgMCAwIDEtMTguNzQtMTkgNDkuMyA0OS4zIDAgMCAwLTkzLjg1IDAuNDEgMjguOTQgMjguOTQgMCAwIDEtMTguNjEgMTguNTdjLTgwLjMgMjYuNzQtMTM4LjE5IDEwMi40Ny0xMzguMTkgMTkxLjczdjEzOC42OGE1MiA1MiAwIDAgMS0yNiA0NS4wOGwtOSA1LjIxYy0yNS4wNyAxNC40Ny0yMCA0OS4yNSAzIDU5LjI0IDIyLjE3IDE0IDEyMC40OSAyNC41MSAyMzguNDUgMjQuNTEgMTE5LjgyIDAgMjE5LjM4LTEwLjg3IDIzOS40NS0yNS4xOCAyMS43OC0xMC43OCAyNi4wOS00NC40IDEuNTUtNTguNTd6TTU5MC4yOSA3NTIuNmMtMjMuNjIgMS00OC44MiAxLjQ4LTc1IDEuNDgtMjYuMzMgMC01MS42Ny0wLjUyLTc1LjQyLTEuNUE5LjUzIDkuNTMgMCAwIDAgNDMxIDc2Ni41YTk0LjYgOTQuNiAwIDAgMCAxNjguMDkgMCA5LjUzIDkuNTMgMCAwIDAtOC44LTEzLjl6IiBmaWxsPSIjRkY2RTFGIi8+PHBhdGggZD0iTTY0Ni4wNSA0ODQuNzFhMjYuODYgMjYuODYgMCAwIDEtMjYuNjItMjMuNThjLTcuNS02MC44LTQyLjI1LTkxLjA2LTY0LjItMTA0LjM2YTI3IDI3IDAgMCAxLTEyLjA4LTMwLjYyIDI2Ljk0IDI2Ljk0IDAgMCAxIDM5LjYyLTE1Ljc0IDE3OS44MyAxNzkuODMgMCAwIDEgMjQuNzIgMTcuNjZjMjUuMjEgMjEuNCA1Ni45MiA2MC41NiA2NS4xNiAxMjUuNzIgMS44IDE0LjI0LTcuNDkgMjcuODItMjEuNiAzMC40NWEyNi42OCAyNi42OCAwIDAgMS01IDAuNDd6IiBmaWxsPSIjRkZFNENGIi8+PC9zdmc+Cg==') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transform: rotate(12deg) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* ==========================================
   Link Styling
   ========================================== */
yt-live-chat-text-message-renderer a,
yt-live-chat-paid-message-renderer a {
  color: inherit !important;
  text-decoration: underline !important;
  opacity: 0.9 !important;
}

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

/* ==========================================
   Author Chip - Reset all YouTube default spacing
   ========================================== */
yt-live-chat-author-chip {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Reset all potential spacing inside author chip */
yt-live-chat-author-chip * {
  margin: 0 !important;
  padding: 0 !important;
}

/* YouTube may have additional hidden elements with padding */
yt-live-chat-text-message-renderer #content-primary-column {
  margin: 0 !important;
  padding: 0 !important;
}

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

/* Reset all other potential spacing elements inside #content */
yt-live-chat-text-message-renderer #deleted-state,
yt-live-chat-text-message-renderer #show-original {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Badge containers - collapse completely */
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;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force #content children to have no whitespace gaps */
yt-live-chat-text-message-renderer #content {
  font-size: 0 !important;
}

/* Restore font-size for visible elements */
yt-live-chat-text-message-renderer #content > yt-live-chat-author-chip,
yt-live-chat-text-message-renderer #content > #message {
  font-size: var(--im-font-size-content) !important;
}

yt-live-chat-text-message-renderer #author-name {
  font-size: var(--im-font-size-username) !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: transparent !important;
}

/* Ensure no extra margin */
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: transparent !important;
}