/*
 * =================================================================
 * Ink Sticker Theme - Retro Skewed Style
 * YouTube Live Chat CSS
 * Version: 2.0.0
 *
 * Features: Solid colors, skew transforms, retro sticker shadows
 *
 * Source: https://doodlekuma.com
 * Contact: https://x.com/DoodleBear_Kuma
 * =================================================================
 */

/* ==========================================
   Google Fonts
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;700;900&display=swap');

/* ==========================================
   CSS Variables - Ink Sticker Color Palette
   ========================================== */
:root {
  /* ========== INK COLORS (Reduced saturation for softer look) ========== */
  --ink-pink: #E050E0;
  --ink-teal: #30E0C0;
  --ink-orange: #E07830;
  --ink-yellow: #D0E030;
  --ink-blue: #30C0E0;
  --ink-purple: #9050D0;
  --ink-green: #70E030;

  /* ========== CURRENT INK ========== */
  --ink-color: var(--ink-pink);

  /* ========== BASE COLORS ========== */
  --sticker-black: #1A1A2E;
  --sticker-white: #FFFFFF;
  --sticker-dark: #232338;

  /* ========== ROLE COLORS (Reduced saturation) ========== */
  --owner-gold: #E0C830;
  --mod-green: #70E030;
  --member-teal: #30E0C0;

  /* ========== SKEW ANGLE ========== */
  --skew-angle: -4deg;
  --skew-angle-reverse: 4deg;

  /* ========== STICKER SHADOW ========== */
  --shadow-offset: 4px;
  --shadow-color: rgba(0, 0, 0, 0.35);

  /* ========== SIZES ========== */
  --sticker-avatar-size: 36px;
  --sticker-font-size-name: 15px;
  --sticker-font-size-message: 15px;
  --sticker-padding: 10px 16px;
  --sticker-margin: 8px 12px;

  /* ========== MEMBERSHIP COLORS ========== */
  --membership-bg-start: #00C853;
  --membership-bg-end: #0f9d58;
  --membership-border-color: transparent;
  --membership-border-width: 0px;
  --membership-shadow-color: rgba(0, 0, 0, 0.3);
  --membership-shadow-offset: 4px;
}

/* ==========================================
   Base Styles
   ========================================== */
body {
  overflow: hidden;
  background-color: transparent;
}

yt-live-chat-renderer {
  background-color: transparent !important;
  /* Add padding to prevent skewed messages from being clipped */
  padding-left: 8px !important;
  padding-right: 16px !important;
}

/* Force chat list to take full height, hiding bottom panels */
yt-live-chat-renderer #contents {
  display: flex !important;
  flex-direction: column !important;
}

yt-live-chat-renderer #chat-messages,
yt-live-chat-renderer #contents > yt-live-chat-item-list-renderer {
  flex: 1 !important;
  height: 100% !important;
}

/* ==========================================
   Animations
   ========================================== */
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: skewX(var(--skew-angle)) translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: skewX(var(--skew-angle)) translateX(0);
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: skewX(var(--skew-angle)) scale(0.8);
    box-shadow: 0 0 0 var(--shadow-color);
  }
  70% {
    transform: skewX(var(--skew-angle)) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: skewX(var(--skew-angle)) scale(1);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color);
  }
}

/* ==========================================
   Hide 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-text-message-renderer #author-badges,
yt-live-chat-text-message-renderer #timestamp,
/* Hide deleted/moderation UI */
yt-live-chat-text-message-renderer #deleted-state,
yt-live-chat-text-message-renderer #show-original,
yt-live-chat-text-message-renderer #before-content-buttons,
yt-live-chat-text-message-renderer #chat-badges,
yt-live-chat-text-message-renderer #prepend-chat-badges,
yt-live-chat-text-message-renderer #chip-badges,
/* 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;
}

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

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

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

/* Comprehensive margin/padding resets */
yt-live-chat-text-message-renderer #content > *,
yt-live-chat-text-message-renderer yt-live-chat-author-chip,
yt-live-chat-text-message-renderer #author-name,
yt-live-chat-text-message-renderer #message {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove whitespace gaps with font-size: 0 trick */
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(--sticker-font-size-message) !important;
}

yt-live-chat-text-message-renderer #author-name {
  font-size: var(--sticker-font-size-name) !important;
}

/* ==========================================
   MESSAGE CONTAINER - Retro Sticker Style
   ========================================== */
yt-live-chat-text-message-renderer {
  --ink-color: var(--ink-pink);
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: var(--ink-color) !important;
  border: none !important;
  border-radius: 0 !important;
  margin: var(--sticker-margin) !important;
  padding: var(--sticker-padding) !important;
  transform: skewX(var(--skew-angle)) !important;
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color) !important;
  animation: pop-in 200ms ease-out !important;
  overflow: visible !important;
}

/* Counter-skew content to keep it readable */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-text-message-renderer #content {
  transform: skewX(var(--skew-angle-reverse)) !important;
}

/* ==========================================
   Alternating Colors (6 colors cycle)
   ========================================== */
yt-live-chat-text-message-renderer:nth-child(6n+1) {
  --ink-color: var(--ink-pink);
}

yt-live-chat-text-message-renderer:nth-child(6n+2) {
  --ink-color: var(--ink-teal);
}

yt-live-chat-text-message-renderer:nth-child(6n+3) {
  --ink-color: var(--ink-orange);
}

yt-live-chat-text-message-renderer:nth-child(6n+4) {
  --ink-color: var(--ink-yellow);
}

yt-live-chat-text-message-renderer:nth-child(6n+5) {
  --ink-color: var(--ink-blue);
}

yt-live-chat-text-message-renderer:nth-child(6n+6) {
  --ink-color: var(--ink-purple);
}

/* Yellow/Bright colors need dark text */
yt-live-chat-text-message-renderer:nth-child(6n+4) #author-name,
yt-live-chat-text-message-renderer:nth-child(6n+4) #message,
yt-live-chat-text-message-renderer:nth-child(6n+4) #message * {
  color: var(--sticker-black) !important;
  text-shadow: none !important;
}

/* ==========================================
   AVATAR - Sticker Style with Shadow
   ========================================== */
yt-live-chat-text-message-renderer #author-photo {
  width: var(--sticker-avatar-size) !important;
  height: var(--sticker-avatar-size) !important;
  border-radius: 0 !important;
  border: 3px solid var(--sticker-white) !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  background: var(--sticker-white) !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25) !important;
}

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

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

/* ==========================================
   AUTHOR NAME
   ========================================== */
yt-live-chat-text-message-renderer #author-name {
  color: var(--sticker-white) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 900 !important;
  font-size: var(--sticker-font-size-name) !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ==========================================
   ROLE STYLES - Owner/Mod/Member
   ========================================== */
/* Owner */
yt-live-chat-text-message-renderer[author-type="owner"] {
  --ink-color: var(--owner-gold) !important;
}

yt-live-chat-text-message-renderer[author-type="owner"] #author-name,
yt-live-chat-text-message-renderer[author-type="owner"] #message,
yt-live-chat-text-message-renderer[author-type="owner"] #message * {
  color: var(--sticker-black) !important;
  text-shadow: none !important;
}

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

/* Moderator */
yt-live-chat-text-message-renderer[author-type="moderator"] {
  --ink-color: var(--mod-green) !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"] #author-name,
yt-live-chat-text-message-renderer[author-type="moderator"] #message,
yt-live-chat-text-message-renderer[author-type="moderator"] #message * {
  color: var(--sticker-black) !important;
  text-shadow: none !important;
}

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

/* Member */
yt-live-chat-text-message-renderer[author-type="member"] {
  --ink-color: var(--member-teal) !important;
}

yt-live-chat-text-message-renderer[author-type="member"] #author-name,
yt-live-chat-text-message-renderer[author-type="member"] #message,
yt-live-chat-text-message-renderer[author-type="member"] #message * {
  color: var(--sticker-black) !important;
  text-shadow: none !important;
}

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

/* ==========================================
   MESSAGE TEXT
   ========================================== */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: var(--sticker-white) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--sticker-font-size-message) !important;
  line-height: 1.3 !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4) !important;
}

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

/* ==========================================
   SUPER CHAT - Bold Sticker Block
   ========================================== */
yt-live-chat-paid-message-renderer {
  position: relative !important;
  margin: 12px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: var(--owner-gold) !important;
  border: 4px solid var(--sticker-black) !important;
  transform: skewX(var(--skew-angle)) !important;
  box-shadow: 5px 5px 0 var(--shadow-color) !important;
  animation: pop-in 250ms ease-out !important;
  overflow: visible !important;
}

/* Super Chat Card wrapper - ensure full layout */
yt-live-chat-paid-message-renderer #card {
  display: block !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Reset nested wrapper elements - remove YouTube's native background colors and border-radius */
yt-live-chat-paid-message-renderer #header-content-primary-column {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !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;
  border-radius: 0 !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;
}

/* Reset YouTube's native background and border-radius on header-content */
yt-live-chat-paid-message-renderer #header-content {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

yt-live-chat-paid-message-renderer #header {
  padding: 12px 16px 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  background: var(--sticker-black) !important;
  border-radius: 0 !important;
  /* No counter-skew - header stays skewed with parent for retro look */
}

/* Counter-skew header content to keep text readable */
yt-live-chat-paid-message-renderer #header #header-content,
yt-live-chat-paid-message-renderer #header #author-photo {
  transform: skewX(var(--skew-angle-reverse)) !important;
}

yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-paid-message-renderer yt-img-shadow {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 0 !important;
  border: 2px solid var(--owner-gold) !important;
  margin-right: 10px !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

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

yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name * {
  color: var(--owner-gold) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}

/* Super Chat Amount - inline with author name in header */
yt-live-chat-paid-message-renderer #purchase-amount {
  display: inline-block !important;
  color: var(--owner-gold) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  background: transparent !important;
}

yt-live-chat-paid-message-renderer #content {
  padding: 10px 16px 14px 16px !important;
  background: transparent !important;
  transform: skewX(var(--skew-angle-reverse)) !important;
}

yt-live-chat-paid-message-renderer #message,
yt-live-chat-paid-message-renderer #message * {
  color: var(--sticker-black) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--sticker-font-size-message) !important;
}

/* ==========================================
   LEGACY PAID MESSAGE - Membership Sticker
   ========================================== */
yt-live-chat-legacy-paid-message-renderer {
  position: relative !important;
  display: block !important;
  margin: 12px !important;
  padding: 14px 20px !important;
  border-radius: 0 !important;
  /* Use membership gradient for consistency */
  background: linear-gradient(135deg, var(--membership-bg-start) 0%, var(--membership-bg-end) 100%) !important;
  border: var(--membership-border-width) solid var(--membership-border-color) !important;
  transform: skewX(var(--skew-angle)) !important;
  box-shadow: var(--membership-shadow-offset) var(--membership-shadow-offset) 0 var(--membership-shadow-color) !important;
  animation: pop-in 250ms ease-out !important;
  overflow: visible !important;
}

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

yt-live-chat-legacy-paid-message-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  padding: 0 !important;
  transform: skewX(var(--skew-angle-reverse)) !important;
}

yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: var(--sticker-white) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 4px !important;
}

yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: var(--sticker-white) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-align: center !important;
}

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

yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================
   MEMBERSHIP MESSAGE
   Sticker celebration style with skew effect
   ========================================== */
yt-live-chat-membership-item-renderer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;

  /* Green membership gradient - customizable */
  background: linear-gradient(135deg, var(--membership-bg-start) 0%, var(--membership-bg-end) 100%) !important;
  border: var(--membership-border-width) solid var(--membership-border-color) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  margin: var(--sticker-margin) !important;

  /* Skew effect */
  transform: skewX(var(--skew-angle)) !important;

  /* Solid shadow - customizable */
  box-shadow:
    var(--membership-shadow-offset) var(--membership-shadow-offset) 0 var(--membership-shadow-color),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2) !important;

  /* Animation */
  animation: sticker-drop-in 0.3s ease-out !important;
}

/* Counter-skew content */
yt-live-chat-membership-item-renderer #author-photo,
yt-live-chat-membership-item-renderer #content {
  transform: skewX(var(--skew-angle-reverse)) !important;
}

/* Avatar styling */
yt-live-chat-membership-item-renderer #author-photo,
yt-live-chat-membership-item-renderer yt-img-shadow {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25) !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;
  object-fit: cover !important;
}

/* Content container */
yt-live-chat-membership-item-renderer #content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
}

/* Author name */
yt-live-chat-membership-item-renderer #author-name {
  color: var(--sticker-white) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4) !important;
  letter-spacing: 0.5px !important;
}

/* Subtext - welcome message */
yt-live-chat-membership-item-renderer #header-subtext {
  color: var(--sticker-white) !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  opacity: 0.9 !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3) !important;
}