/*
 * =================================================================
 * Stacked Notifications - 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:
 * - iOS-style layered notification effect
 * - Shows only latest 3/4/5 messages with stacked effect
 * - Smooth entrance and transition animations
 * - Customizable 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 - Stacked Notifications Theme
   ========================================== */
:root {
  /* ===== Stack Configuration ===== */
  --stacked-visible-count: 2;  /* Number of fully visible messages (1-5) */
  --stacked-offset: 7px;       /* Spacing between visible messages */
  --stacked-peek-height: -75px;  /* translateY offset step for folded cards (n+1, n+2) */
  --stacked-scale: 0.95;
  --stacked-opacity-step: 0;

  /* ===== Card Style ===== */
  --stacked-card-bg: rgba(255, 255, 255, 1.00);
  --stacked-card-radius: 8px;
  --stacked-card-border-color: transparent;
  --stacked-card-border-width: 0px;
  --stacked-card-shadow-blur: 4px;
  --stacked-card-padding: 12px 16px;
  --stacked-card-padding-v: 12px;  /* Vertical padding for animation */
  --stacked-card-gap: 8px;

  /* ===== Text Style ===== */
  --stacked-name-color: #1a1a1a;
  --stacked-name-size: 21px;
  --stacked-name-weight: 600;
  --stacked-message-color: #333333;
  --stacked-message-size: 20px;
  --stacked-message-weight: 400;
  --stacked-timestamp-color: #8e8e93;
  --stacked-timestamp-size: 12px;

  /* ===== Avatar ===== */
  --stacked-avatar-size: 36px;
  --stacked-avatar-radius: 50%;
  --stacked-avatar-show: block;

  /* ===== Role Styles - Owner ===== */
  --stacked-owner-bg: rgba(255, 255, 255, 1.00);
  --stacked-owner-name-color: #B8860B;
  --stacked-owner-border-color: rgba(255, 217, 0, 1.00);
  --stacked-owner-border-width: 4px;
  --stacked-owner-shadow-blur: 2px;

  /* ===== Role Styles - Moderator ===== */
  --stacked-moderator-bg: rgba(255, 255, 255, 1.00);
  --stacked-moderator-name-color: #8A2BE2;
  --stacked-moderator-border-color: rgba(148, 112, 219, 1.00);
  --stacked-moderator-border-width: 4px;
  --stacked-moderator-shadow-blur: 4px;

  /* ===== Role Styles - Member ===== */
  --stacked-member-bg: rgba(255, 255, 255, 1.00);
  --stacked-member-name-color: #2E8B57;
  --stacked-member-border-color: rgba(46, 140, 87, 1.00);
  --stacked-member-border-width: 4px;
  --stacked-member-shadow-blur: 4px;

  /* ===== Super Chat ===== */
  --stacked-superchat-bg: rgba(255, 243, 224, 1.00);
  --stacked-superchat-name-color: #E65100;
  --stacked-superchat-message-color: #BF360C;
  --stacked-superchat-border-color: rgba(255, 107, 54, 1.00);
  --stacked-superchat-border-width: 4px;
  --stacked-superchat-shadow-blur: 4px;
  --stacked-superchat-amount-bg: #ff6b35;
  --stacked-superchat-amount-color: #ffffff;

  /* ===== Membership ===== */
  --stacked-membership-bg: rgba(233, 245, 234, 1.00);
  --stacked-membership-name-color: #2E7D32;
  --stacked-membership-message-color: #1B5E20;
  --stacked-membership-border-color: rgba(46, 125, 50, 1.00);
  --stacked-membership-border-width: 4px;
  --stacked-membership-shadow-blur: 4px;

  /* ===== Background Image (Optional) ===== */
  --stacked-bg-image: none;

  /* ===== Animation ===== */
  --stacked-animation-duration: 600ms;
  --stacked-animation-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --stacked-transition-duration: 300ms;
  --stacked-transition-easing: ease-out;

  /* ===== Typography ===== */
  --stacked-font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro", "Hiragino Sans", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif;

  /* ===== Layout ===== */
  --stacked-container-padding: 16px;
  --stacked-max-width: 380px;

  /* ===== Folded Card Height ===== */
  --stacked-folded-height: 82px;  /* Max-height for folded cards (none = no limit, px value = clip) */
}

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

/* Entrance Animation - Start from collapsed state (height: 0, padding: 0) and expand */
/* Note: margin-top is handled by static CSS rules, not animation, to allow dynamic updates */
@keyframes stacked-entrance {
  0% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: scale(0.95);
  }
  30% {
    opacity: 0.8;
    max-height: 200px;
    padding-top: var(--stacked-card-padding-v, 12px);
    padding-bottom: var(--stacked-card-padding-v, 12px);
  }
  100% {
    opacity: 1;
    max-height: 200px;
    padding-top: var(--stacked-card-padding-v, 12px);
    padding-bottom: var(--stacked-card-padding-v, 12px);
    transform: scale(1);
  }
}

/* Child elements entrance - simple fade in sync with parent */
@keyframes stacked-child-entrance {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Slide to fold animation - starts immediately from 0% */
@keyframes stacked-slide-to-fold {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    max-height: 200px;
  }
  100% {
    opacity: calc(1 - var(--stacked-opacity-step) * 3);
    transform: scale(var(--stacked-scale)) translateY(calc(100% - var(--stacked-offset)));
    max-height: calc(var(--stacked-offset) * 9);
  }
}

/* Slide to deeper fold animation - starts immediately from 0% */
@keyframes stacked-slide-to-deeper-fold {
  0% {
    opacity: calc(1 - var(--stacked-opacity-step) * 3);
    transform: scale(var(--stacked-scale)) translateY(calc(100% - var(--stacked-offset)));
  }
  100% {
    opacity: calc(1 - var(--stacked-opacity-step) * 4);
    transform: scale(calc(var(--stacked-scale) * var(--stacked-scale))) translateY(calc(200% - var(--stacked-offset) * 2));
  }
}

/* Slide to hidden animation - starts immediately from 0% */
@keyframes stacked-slide-to-hidden {
  0% {
    opacity: calc(1 - var(--stacked-opacity-step) * 4);
    transform: scale(calc(var(--stacked-scale) * var(--stacked-scale))) translateY(calc(200% - var(--stacked-offset) * 2));
    max-height: calc(var(--stacked-offset) * 9);
  }
  100% {
    opacity: 0;
    transform: scale(0.85) translateY(calc(200% - var(--stacked-offset) * 2));
    max-height: 0;
  }
}

/* Exit Animation - Fade out and scale down */
@keyframes stacked-exit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.85) translateY(-20px);
  }
}

/* Avatar Pop Animation */
@keyframes stacked-avatar-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Super Chat Glow Animation */
@keyframes stacked-superchat-glow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(255, 165, 0, 0.3);
  }
  50% {
    box-shadow: 0 4px 24px rgba(255, 165, 0, 0.5);
  }
}

/* ==========================================
   Base Styles - Transparent Background
   ========================================== */
body {
  overflow: hidden !important;
  background-color: transparent !important;
  background-image: var(--stacked-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  font-family: var(--stacked-font-family) !important;
}

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

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

/* ==========================================
   Main Container - Flexbox for proper stacking
   ========================================== */
yt-live-chat-item-list-renderer #items {
  background-color: transparent !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: flex-start !important;
  /* Extra top padding to prevent folded cards from overflowing above viewport */
  padding: var(--stacked-container-padding) var(--stacked-container-padding) var(--stacked-container-padding) var(--stacked-container-padding) !important;
  overflow: visible !important;
}

yt-live-chat-item-list-renderer #item-scroller {
  overflow: hidden !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,
#action-buttons,
yt-live-chat-paid-message-renderer #action-buttons,
yt-live-chat-text-message-renderer #action-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 {
  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 & Menu */
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-paid-message-renderer #author-badges,
yt-live-chat-text-message-renderer #menu,
yt-live-chat-paid-message-renderer #menu,
yt-live-chat-text-message-renderer #timestamp,
yt-live-chat-paid-message-renderer #timestamp {
  display: none !important;
}

/* ==========================================
   Message Card Base Style (All messages)
   Using flexbox for proper stacking with variable heights
   ========================================== */
yt-live-chat-text-message-renderer,
yt-live-chat-paid-message-renderer,
yt-live-chat-membership-item-renderer,
yt-live-chat-paid-sticker-renderer {
  /* Flexbox positioning - messages flow naturally */
  position: relative !important;
  /* Prevent flexbox from shrinking items when container overflows */
  flex-shrink: 0 !important;

  /* Default: Hidden with opacity (NOT display:none for smooth transitions) */
  opacity: 0 !important;
  pointer-events: none !important;

  /* Card styling */
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;

  background: var(--stacked-card-bg) !important;
  border-radius: var(--stacked-card-radius) !important;
  border: var(--stacked-card-border-width) solid var(--stacked-card-border-color) !important;
  box-shadow: 0 2px var(--stacked-card-shadow-blur) rgba(0, 0, 0, 0.05) !important;

  box-sizing: border-box !important;
  padding: var(--stacked-card-padding) !important;
  margin: 0 !important;
  width: 100% !important;

  /* Smooth transition for all changes */
  transition:
    transform var(--stacked-transition-duration) var(--stacked-transition-easing),
    opacity var(--stacked-transition-duration) var(--stacked-transition-easing),
    margin var(--stacked-transition-duration) var(--stacked-transition-easing),
    height var(--stacked-transition-duration) var(--stacked-transition-easing),
    max-height var(--stacked-transition-duration) var(--stacked-transition-easing),
    padding var(--stacked-transition-duration) var(--stacked-transition-easing) !important;

  transform-origin: center bottom !important;
  font-family: var(--stacked-font-family) !important;
}

/* ==========================================
   Stacking Effect - iOS-style layered notifications
   Using :nth-last-child() to target from the end

   Default: visibleCount = 3 (matches customizer default)

   Behavior:
   - New messages enter with height: 0, padding: 0, then expand (pushing others up)
   - Messages 1-3 (visible): Full size, normal vertical layout
   - Messages 4-5 (folded): Collapse with peek offset and scale
   - Messages 6+: Hidden with opacity 0

   Visual layout (newest at bottom):
   ┌─ 5th peek ─┐  ← folded, scaled
   ├─ 4th peek ─┤  ← folded, scaled
   ╔═════════════════╗
   ║   2nd visible   ║ ← oldest visible
   ╠═════════════════╣
   ║   1st visible   ║ ← newest (enters from height:0)
   ╚═════════════════╝

   z-index: 1st=10, 2nd=9, 3rd=2 (folded), 4th=1 (folded), 5th+=0 (hidden)
   ========================================== */

/* ===== Visible Messages (1-2): Normal flexbox flow ===== */
/* Messages stack naturally, newest at bottom. Spacing via margin-top. */

/* Latest message (1st from bottom) - At the bottom with entrance animation */
yt-live-chat-text-message-renderer:nth-last-child(1),
yt-live-chat-paid-message-renderer:nth-last-child(1),
yt-live-chat-membership-item-renderer:nth-last-child(1),
yt-live-chat-paid-sticker-renderer:nth-last-child(1) {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  margin-top: var(--stacked-offset) !important;
  animation: stacked-entrance var(--stacked-animation-duration) var(--stacked-animation-easing) forwards !important;
}

/* 2nd message from bottom - Oldest visible */
yt-live-chat-text-message-renderer:nth-last-child(2),
yt-live-chat-paid-message-renderer:nth-last-child(2),
yt-live-chat-membership-item-renderer:nth-last-child(2),
yt-live-chat-paid-sticker-renderer:nth-last-child(2) {
  opacity: calc(1 - var(--stacked-opacity-step)) !important;
  pointer-events: none !important;
  z-index: 9 !important;
  margin-top: var(--stacked-offset) !important;
  /* Reset max-height when transitioning from folded to visible */
  max-height: none !important;
  overflow: visible !important;
}

/* ===== Stacked/Folded Messages (3-4): Collapse with peek offset ===== */
/* Folded cards use translateY for positioning and max-height for clipping.
   Combined with z-index, this creates the iOS notification stack effect. */

/* 3rd message - First folded card (N+1): offset by 1 × peek-height */
yt-live-chat-text-message-renderer:nth-last-child(3),
yt-live-chat-paid-message-renderer:nth-last-child(3),
yt-live-chat-membership-item-renderer:nth-last-child(3),
yt-live-chat-paid-sticker-renderer:nth-last-child(3) {
  opacity: calc(1 - var(--stacked-opacity-step) * 2) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transform: translateY(var(--stacked-peek-height)) scale(var(--stacked-scale)) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
  height: var(--stacked-folded-height) !important;
  max-height: var(--stacked-folded-height) !important;
  overflow: hidden !important;
}

/* 4th message - Second folded card (N+2): offset by 2 × peek-height */
yt-live-chat-text-message-renderer:nth-last-child(4),
yt-live-chat-paid-message-renderer:nth-last-child(4),
yt-live-chat-membership-item-renderer:nth-last-child(4),
yt-live-chat-paid-sticker-renderer:nth-last-child(4) {
  opacity: calc(1 - var(--stacked-opacity-step) * 3) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transform: translateY(calc(var(--stacked-peek-height) * 2)) scale(calc(var(--stacked-scale) * var(--stacked-scale))) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
  height: var(--stacked-folded-height) !important;
  max-height: var(--stacked-folded-height) !important;
  overflow: hidden !important;
}

/* ===== Hidden Messages (5+): Progressive iteration with opacity=0 ===== */
/* Continue the same foldLevel progression as folded messages, but hidden */

/* 5th message (N+3): foldLevel=3, opacity=0 */
yt-live-chat-text-message-renderer:nth-last-child(5),
yt-live-chat-paid-message-renderer:nth-last-child(5),
yt-live-chat-membership-item-renderer:nth-last-child(5),
yt-live-chat-paid-sticker-renderer:nth-last-child(5) {
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translateY(calc(var(--stacked-peek-height) * 3)) scale(calc(var(--stacked-scale) * var(--stacked-scale) * var(--stacked-scale))) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
  height: var(--stacked-folded-height) !important;
  max-height: var(--stacked-folded-height) !important;
  overflow: hidden !important;
}

/* 6th message (N+4): foldLevel=4, opacity=0 */
yt-live-chat-text-message-renderer:nth-last-child(6),
yt-live-chat-paid-message-renderer:nth-last-child(6),
yt-live-chat-membership-item-renderer:nth-last-child(6),
yt-live-chat-paid-sticker-renderer:nth-last-child(6) {
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translateY(calc(var(--stacked-peek-height) * 4)) scale(calc(var(--stacked-scale) * var(--stacked-scale) * var(--stacked-scale) * var(--stacked-scale))) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
  height: var(--stacked-folded-height) !important;
  max-height: var(--stacked-folded-height) !important;
  overflow: hidden !important;
}

/* 7th message (N+5): foldLevel=5, opacity=0 */
yt-live-chat-text-message-renderer:nth-last-child(7),
yt-live-chat-paid-message-renderer:nth-last-child(7),
yt-live-chat-membership-item-renderer:nth-last-child(7),
yt-live-chat-paid-sticker-renderer:nth-last-child(7) {
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translateY(calc(var(--stacked-peek-height) * 5)) scale(calc(var(--stacked-scale) * var(--stacked-scale) * var(--stacked-scale) * var(--stacked-scale) * var(--stacked-scale))) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
  height: var(--stacked-folded-height) !important;
  max-height: var(--stacked-folded-height) !important;
  overflow: hidden !important;
}

/* 8th+ messages (N+6+): fixed at foldLevel=5, opacity=0 */
yt-live-chat-text-message-renderer:nth-last-child(n+8),
yt-live-chat-paid-message-renderer:nth-last-child(n+8),
yt-live-chat-membership-item-renderer:nth-last-child(n+8),
yt-live-chat-paid-sticker-renderer:nth-last-child(n+8) {
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translateY(calc(var(--stacked-peek-height) * 5)) scale(calc(var(--stacked-scale) * var(--stacked-scale) * var(--stacked-scale) * var(--stacked-scale) * var(--stacked-scale))) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
  height: var(--stacked-folded-height) !important;
  max-height: var(--stacked-folded-height) !important;
  overflow: hidden !important;
}

/* ==========================================
   Avatar Styling
   ========================================== */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-text-message-renderer yt-img-shadow,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-paid-message-renderer yt-img-shadow,
yt-live-chat-membership-item-renderer #author-photo,
yt-live-chat-membership-item-renderer yt-img-shadow {
  display: var(--stacked-avatar-show) !important;
  width: var(--stacked-avatar-size) !important;
  height: var(--stacked-avatar-size) !important;
  min-width: var(--stacked-avatar-size) !important;
  min-height: var(--stacked-avatar-size) !important;
  border-radius: var(--stacked-avatar-radius) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

yt-live-chat-text-message-renderer #author-photo img,
yt-live-chat-text-message-renderer yt-img-shadow img,
yt-live-chat-paid-message-renderer #author-photo img,
yt-live-chat-paid-message-renderer yt-img-shadow img,
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: var(--stacked-avatar-radius) !important;
  object-fit: cover !important;
}

/* Avatar and content animation on entrance - sync with parent collapse */
yt-live-chat-text-message-renderer:nth-last-child(1) #author-photo,
yt-live-chat-text-message-renderer:nth-last-child(1) yt-img-shadow,
yt-live-chat-paid-message-renderer:nth-last-child(1) #author-photo,
yt-live-chat-paid-message-renderer:nth-last-child(1) yt-img-shadow,
yt-live-chat-membership-item-renderer:nth-last-child(1) #author-photo,
yt-live-chat-membership-item-renderer:nth-last-child(1) yt-img-shadow {
  animation: stacked-child-entrance var(--stacked-animation-duration) var(--stacked-animation-easing) forwards !important;
}

yt-live-chat-text-message-renderer:nth-last-child(1) #content,
yt-live-chat-paid-message-renderer:nth-last-child(1) #content,
yt-live-chat-paid-message-renderer:nth-last-child(1) #card,
yt-live-chat-membership-item-renderer:nth-last-child(1) #content {
  animation: stacked-child-entrance var(--stacked-animation-duration) var(--stacked-animation-easing) forwards !important;
}

/* ==========================================
   Content Container
   ========================================== */
yt-live-chat-text-message-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Eliminate whitespace gaps between inline/block children */
  font-size: 0 !important;
}

/* Author chip wrapper - reset margins */
yt-live-chat-text-message-renderer #content > yt-live-chat-author-chip {
  display: block !important;
  margin: 0 !important;
  padding: 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(--stacked-message-size) !important;
}

/* Author Name */
yt-live-chat-text-message-renderer #author-name,
yt-live-chat-text-message-renderer #author-name-chip {
  display: inline-block !important;
  color: var(--stacked-name-color) !important;
  font-size: var(--stacked-name-size) !important;
  font-weight: var(--stacked-name-weight) !important;
  font-family: var(--stacked-font-family) !important;
  line-height: 1.3 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Message Text */
yt-live-chat-text-message-renderer #message {
  display: block !important;
  color: var(--stacked-message-color) !important;
  font-size: var(--stacked-message-size) !important;
  font-weight: var(--stacked-message-weight) !important;
  font-family: var(--stacked-font-family) !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  margin: 0 !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Emoji sizing */
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 (Streamer) */
yt-live-chat-text-message-renderer[author-type="owner"] {
  background: var(--stacked-owner-bg) !important;
  border: var(--stacked-owner-border-width) solid var(--stacked-owner-border-color) !important;
  box-shadow: 0 2px var(--stacked-owner-shadow-blur) rgba(0, 0, 0, 0.1) !important;
}

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

/* Owner Crown Icon */
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 */
yt-live-chat-text-message-renderer[author-type="moderator"] {
  background: var(--stacked-moderator-bg) !important;
  border: var(--stacked-moderator-border-width) solid var(--stacked-moderator-border-color) !important;
  box-shadow: 0 2px var(--stacked-moderator-shadow-blur) rgba(0, 0, 0, 0.1) !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"] #author-name {
  color: var(--stacked-moderator-name-color) !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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xMiAxTDMgNVYxMUMzIDE2LjU1IDYuODQgMjEuNzQgMTIgMjNDMTcuMTYgMjEuNzQgMjEgMTYuNTUgMjEgMTFWNUwxMiAxWiIvPjwvc3ZnPg==') !important;
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xMiAxTDMgNVYxMUMzIDE2LjU1IDYuODQgMjEuNzQgMTIgMjNDMTcuMTYgMjEuNzQgMjEgMTYuNTUgMjEgMTFWNUwxMiAxWiIvPjwvc3ZnPg==') !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Member */
yt-live-chat-text-message-renderer[author-type="member"] {
  background: var(--stacked-member-bg) !important;
  border: var(--stacked-member-border-width) solid var(--stacked-member-border-color) !important;
  box-shadow: 0 2px var(--stacked-member-shadow-blur) rgba(0, 0, 0, 0.1) !important;
}

yt-live-chat-text-message-renderer[author-type="member"] #author-name {
  color: var(--stacked-member-name-color) !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: #2E8B57 !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 Styling
   ========================================== */
yt-live-chat-paid-message-renderer {
  background: var(--stacked-superchat-bg) !important;
  border: var(--stacked-superchat-border-width) solid var(--stacked-superchat-border-color) !important;
  box-shadow: 0 2px var(--stacked-superchat-shadow-blur) rgba(0, 0, 0, 0.1) !important;
}

yt-live-chat-paid-message-renderer:nth-last-child(1) {
  animation:
    stacked-entrance var(--stacked-animation-duration) var(--stacked-animation-easing) forwards,
    stacked-superchat-glow 2s ease-in-out infinite !important;
}

/* Super Chat Card Reset */
yt-live-chat-paid-message-renderer #card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Super Chat Header */
yt-live-chat-paid-message-renderer #header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

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

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 Author Name */
yt-live-chat-paid-message-renderer #author-name {
  display: inline-block !important;
  color: var(--stacked-superchat-name-color) !important;
  font-size: var(--stacked-name-size) !important;
  font-weight: var(--stacked-name-weight) !important;
  font-family: var(--stacked-font-family) !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Super Chat Amount Badge */
yt-live-chat-paid-message-renderer #purchase-amount {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--stacked-superchat-amount-color) !important;
  background: var(--stacked-superchat-amount-bg) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}

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

yt-live-chat-paid-message-renderer #message {
  display: block !important;
  color: var(--stacked-superchat-message-color) !important;
  font-size: var(--stacked-message-size) !important;
  font-weight: var(--stacked-message-weight) !important;
  font-family: var(--stacked-font-family) !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* ==========================================
   Membership Message Styling
   ========================================== */
yt-live-chat-membership-item-renderer {
  background: var(--stacked-membership-bg) !important;
  border: var(--stacked-membership-border-width) solid var(--stacked-membership-border-color) !important;
  box-shadow: 0 2px var(--stacked-membership-shadow-blur) rgba(0, 0, 0, 0.1) !important;
}

/* Membership Content Container */
yt-live-chat-membership-item-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

yt-live-chat-membership-item-renderer #header-primary-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Membership Author Name */
yt-live-chat-membership-item-renderer #author-name {
  display: inline-block !important;
  color: var(--stacked-membership-name-color) !important;
  font-size: var(--stacked-name-size) !important;
  font-weight: var(--stacked-name-weight) !important;
  font-family: var(--stacked-font-family) !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Membership Subtext */
yt-live-chat-membership-item-renderer #header-subtext {
  display: block !important;
  color: var(--stacked-membership-message-color) !important;
  font-size: var(--stacked-message-size) !important;
  font-weight: var(--stacked-message-weight) !important;
  font-family: var(--stacked-font-family) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

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

/* ==========================================
   Paid Sticker Styling
   ========================================== */
yt-live-chat-paid-sticker-renderer {
  background: var(--stacked-superchat-bg) !important;
  border: var(--stacked-superchat-border-width) solid var(--stacked-superchat-border-color) !important;
  box-shadow: 0 2px var(--stacked-superchat-shadow-blur) rgba(0, 0, 0, 0.1) !important;
}

yt-live-chat-paid-sticker-renderer #sticker {
  max-width: 80px !important;
  max-height: 80px !important;
  border-radius: 8px !important;
}

yt-live-chat-paid-sticker-renderer #author-name {
  color: var(--stacked-superchat-name-color) !important;
  font-size: var(--stacked-name-size) !important;
  font-weight: var(--stacked-name-weight) !important;
  font-family: var(--stacked-font-family) !important;
}

/* ==========================================
   Author Chip Reset
   ========================================== */
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;
}

yt-live-chat-author-chip * {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================
   Additional Cleanup
   ========================================== */
yt-live-chat-text-message-renderer[author-is-owner],
yt-live-chat-text-message-renderer[author-is-moderator] {
  background-color: transparent !important;
}

yt-live-chat-item-list-renderer #items > * {
  /* Only reset horizontal margins, preserve margin-top for stacking offset */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

yt-live-chat-text-message-renderer[style*="background"],
yt-live-chat-paid-message-renderer[style*="background"] {
  background-color: transparent !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;
}

/* Hide deleted state elements */
yt-live-chat-text-message-renderer #deleted-state,
yt-live-chat-text-message-renderer #show-original {
  display: none !important;
}

/* ==========================================
   Link Styling
   ========================================== */
yt-live-chat-text-message-renderer a,
yt-live-chat-paid-message-renderer a {
  color: #007AFF !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;
}