/*
 * QLIPPS VIP LUXURY OVERHAUL
 * Force-overwrite layer — loaded last in <head>, !important on every rule.
 * Covers: Live Viewer (#vy-livest), Studio (.vy_lv_a2), Watch Embed (.vy_lv_feedb1)
 * Version: 2.0 (force-overwrite)
 */

/* ══════════════════════════════════════════════════════════════════
   1. TOKENS & RESET
   ══════════════════════════════════════════════════════════════════ */
#vy-livest.vylvdesktop *,
#vy-livest.vylvdesktop *::before,
#vy-livest.vylvdesktop *::after,
#vy_lv_contains_product_desktopstreamauthor *,
#vy_lv_contains_product_desktopstreamauthor *::before,
#vy_lv_contains_product_desktopstreamauthor *::after {
  box-sizing: border-box !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════════
   2. VIEWER PAGE — #vy-livest
   ══════════════════════════════════════════════════════════════════ */

/* Shell: full-screen fixed, flex row  */
#vy-livest.vylvdesktop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1059 !important;
  background: #0c0c14 !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Video column — takes remaining width */
.vylv_f3522 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #000 !important;
  overflow: hidden !important;
  position: relative !important;
}

.vy-live-entry-cnt {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.vy-live-e1v {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  position: relative !important;
  background: #000 !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

/* Actual <video> element */
video#vy_lv_livestream {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 1 !important;
}

/* Plugin background layers */
.vylv-uskur1-DivPlayerBackground,
.vylv-5gqkmn-DivBgContainer,
.vylv-1apwby8-DivLivePlayerImage,
.vylv-1fxkm4b-DivLivePlayerImageContainer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.vylv-urm72h-ImgLivePlayerImage {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: blur(32px) brightness(0.3) !important;
  transform: scale(1.06) !important;
}
.vylv-y2fd0r-DivLivePlayerCurtain,
.vylv-1kdnu10-DivPlayerCover { display: none !important; }

/* ── State overlays ── */
.vy_lv_host_away,
.vy_lv_host_ended,
.vy_lv_host_reconnecting {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  background: rgba(8,8,18,0.93) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.vy_lv_host_away img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(124,58,237,0.5) !important;
  object-fit: cover !important;
}

/* ── Banner gradient over video bottom ── */
.vylv-wx0vpv-DivFeedLivePlayerContainer {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 10 !important;
  width: 100% !important;
  height: 100% !important;
}
.vylv-wepvij-DivLiveRoomBanner {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.42) 55%, transparent 100%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding: 44px 22px 20px !important;
  pointer-events: none !important;
  top: auto !important;
}
.vylv-1s7wqxh-DivUserHoverProfileContainer,
.vylv-ppntst-DivActionContainer {
  pointer-events: all !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

/* Streamer profile */
.vylv-1env8v6-DivUserProfile {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}
.vylv-k9sb3-StyledProfileAvatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid rgba(124,58,237,0.7) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2), 0 4px 16px rgba(0,0,0,0.6) !important;
}
.vylv-3z3ses-DivProfileInfo {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.vylv-6km8xc-H2UniqueId {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  display: block !important;
}
.vylv-1vec0rh-H1Nickname { display: none !important; }
.vylv-plu37s-DivBroadcastText { display: none !important; }
.vylv-181hozs-DivPeopleContainer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(0,0,0,0.4) !important;
  border-radius: 20px !important;
  padding: 3px 10px 3px 7px !important;
  width: fit-content !important;
}
.vylv-181hozs-DivPeopleContainer svg {
  width: 13px !important;
  height: 13px !important;
  color: rgba(255,255,255,0.65) !important;
  flex-shrink: 0 !important;
}
.vylv-1p1g5jf-DivPeopleCounter {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.9) !important;
}

/* ── Action bar — override ALL inline positions ── */
.vylv-ppntst-DivActionContainer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}

/* LIVE badge — overrides inline style="position:relative;z-index:2..." */
.vy_lv_dsh_llv_vvw {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #dc2626 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  z-index: 2 !important;
  word-break: keep-all !important;
  animation: viplux-live-pulse 1.8s ease-in-out infinite !important;
}
@keyframes viplux-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.65); }
  50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* Timer wrapper — overrides inline style="position:relative;z-index:2;..." */
.vy_lv_dashboard_llv_vvw_tm {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}
/* Timer text — overrides inline style="margin-left:0;padding:6px 9px" */
.vy_lv_dsh_tm {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  background: rgba(0,0,0,0.45) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.5px !important;
  margin-left: 0 !important;
}

/* Subscribe wrapper — overrides inline position:relative */
.vy_lv_dsh_llv_vvw + div,
.vy_lv_viewer_dashboard + div,
.vylv-ppntst-DivActionContainer > div {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* Follow/Subscribe button itself (PlayTube renders various classes) */
.vylv-ppntst-DivActionContainer > div a,
.vylv-ppntst-DivActionContainer > div button,
.vylv-ppntst-DivActionContainer > div .btn,
.vylv-ppntst-DivActionContainer > div [class*="follow"],
.vylv-ppntst-DivActionContainer > div [class*="subscribe"],
.vylv-ppntst-DivActionContainer > div .btn-primary,
.vylv-ppntst-DivActionContainer > div input[type="submit"],
.vylv-ppntst-DivActionContainer .subscribe_btn,
.vylv-ppntst-DivActionContainer .vy_sub_btn {
  background: #7c3aed !important;
  color: #fff !important;
  border: none !important;
  border-radius: 22px !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  outline: none !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}
.vylv-ppntst-DivActionContainer > div a:hover,
.vylv-ppntst-DivActionContainer > div button:hover,
.vylv-ppntst-DivActionContainer > div input[type="submit"]:hover {
  background: #6d28d9 !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.25), 0 4px 16px rgba(124,58,237,0.4) !important;
}

/* Close + icon buttons — override inline position:relative */
.vylv-13l877f-IActionButton,
.vylv-1vwmrlo-IChatButton,
.vylvelment-14z7f4-IChatButton,
.vy-lv-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.85) !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}
.vylv-13l877f-IActionButton:hover,
.vylv-1vwmrlo-IChatButton:hover,
.vylvelment-14z7f4-IChatButton:hover,
.vy-lv-close:hover {
  background: rgba(255,255,255,0.22) !important;
}

/* Reactions */
.vy_lv_reactions_floating {
  position: absolute !important;
  bottom: 80px !important;
  right: 16px !important;
  top: auto !important;
  left: auto !important;
  z-index: 15 !important;
}
.vy_lv_reactions_bt { display: flex !important; gap: 6px !important; }
#vy_lv_productauthor_preview {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 12 !important;
}
/* Hidden secondary comments */
.vy_lv_entryli { display: none !important; }

/* ── VIP GLASS CHAT SIDEBAR ── */
#divanim32v.vylvelment-qftsfk-DivChatRoomAnimationContainer {
  flex-shrink: 0 !important;
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0e0e1c !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
}
#divanim32v:not(.isopen) {
  width: 0 !important;
  min-width: 0 !important;
  border-left: none !important;
}
.vylvelment-5w1toe-DivChatRoomContainer {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* Chat header */
.vylvelment-hdaobh-DivChatRoomHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 18px 14px !important;
  flex-shrink: 0 !important;
  background: rgba(0,0,0,0.2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  width: 100% !important;
}
.vylvelment-yiy2y4-DivChatTitle {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.2px !important;
  display: block !important;
}
.vylvelment-1dnj95g-DivChatRoomHeaderIconContainer {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.6) !important;
}
.vylvelment-1dnj95g-DivChatRoomHeaderIconContainer:hover {
  background: rgba(255,255,255,0.15) !important;
}

/* Messages body */
.vylvelment-rykcaj-DivChatRoomBody {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 0 4px !important;
  display: block !important;
  width: 100% !important;
}
.vylvelment-rykcaj-DivChatRoomBody::-webkit-scrollbar { width: 3px !important; }
.vylvelment-rykcaj-DivChatRoomBody::-webkit-scrollbar-track { background: transparent !important; }
.vylvelment-rykcaj-DivChatRoomBody::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,0.4) !important;
  border-radius: 2px !important;
}

.vylvelment-1gwk1og-DivChatMessageList {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* Single message row */
.vylvelment-1nmf5oj-DivChatRoomMessage-StyledChatMessageItem {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  padding: 6px 16px !important;
  width: 100% !important;
}
.vylvelment-1nmf5oj-DivChatRoomMessage-StyledChatMessageItem:hover {
  background: rgba(255,255,255,0.03) !important;
}
.vylvelment-1h75rji-DivUserCardClickWrapperProps { flex-shrink: 0 !important; }

/* Avatar */
.vylvelment-6rwu5g-DivBadgeWrap {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(124,58,237,0.38) !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.vylvelment-6rwu5g-DivBadgeWrap img {
  width: 28px !important;
  height: 28px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Message text content */
.vylvelment-1cik7b1-DivChatMessageContent {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.vylvelment-cklfyg-SpanNickName {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #a78bfa !important;
  display: inline !important;
  margin-right: 4px !important;
}
.vylvelment-1o9hp7f-SpanChatRoomComment {
  font-size: 13px !important;
  color: rgba(255,255,255,0.88) !important;
  line-height: 1.45 !important;
  word-break: break-word !important;
  display: inline !important;
}
.vylvelment-8dqif4-DivChatMessageMoreIconWrapper {
  opacity: 0 !important;
  flex-shrink: 0 !important;
}
.vylvelment-1nmf5oj-DivChatRoomMessage-StyledChatMessageItem:hover
.vylvelment-8dqif4-DivChatMessageMoreIconWrapper {
  opacity: 1 !important;
}
#vylv_realtimeviewers {
  padding: 2px 16px 4px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.3) !important;
  display: block !important;
}

/* ── Chat Input Area ── */
.vylvelment-c4al9d-DivCommentContainer {
  flex-shrink: 0 !important;
  padding: 10px 12px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(0,0,0,0.25) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.vylvelment-19dw2t5-DivLayoutContainer {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
}
.vylvelment-1ac6744-DivInputAreaContainer,
.vylvelment-hdchcw-DivInputEditorContainer {
  width: 100% !important;
  display: block !important;
}
/* The contenteditable input */
#vy_lv_txtaddcomment_js2 {
  width: 100% !important;
  min-height: 38px !important;
  max-height: 88px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  color: #fff !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  outline: none !important;
  overflow-y: auto !important;
  word-break: break-word !important;
  cursor: text !important;
  display: block !important;
  line-height: 1.4 !important;
}
#vy_lv_txtaddcomment_js2:empty::before {
  content: attr(placeholder) !important;
  color: rgba(255,255,255,0.3) !important;
  pointer-events: none !important;
}
#vy_lv_txtaddcomment_js2:focus {
  border-color: rgba(124,58,237,0.6) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.14) !important;
}
/* Send button */
#vylv_sendcom_btn {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: #7c3aed !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#vylv_sendcom_btn:hover {
  background: #6d28d9 !important;
  box-shadow: 0 0 14px rgba(124,58,237,0.5) !important;
  transform: scale(1.06) !important;
}
#vylv_sendcom_btn svg { fill: #fff !important; color: #fff !important; }

/* ══════════════════════════════════════════════════════════════════
   3. STUDIO PAGE — .vy_lv_a2
   ══════════════════════════════════════════════════════════════════ */

#vy_lv_contains_product_desktopstreamauthor.vy_lv_a2 {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #0c0c14 !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  position: relative !important;
  margin: 0 !important;
}

/* Home button */
a.vy_lv_gohomewbutton {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 100 !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
}
a.vy_lv_gohomewbutton:hover { background: rgba(255,255,255,0.14) !important; }

/* Left column */
.vy_lv_a3vs {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 14px 16px 16px !important;
  gap: 14px !important;
  overflow-y: auto !important;
  position: static !important;
  width: auto !important;
}

/* Camera preview box */
.vy_lv_a5v#vy_lv_rtmpv {
  width: 100% !important;
  height: 44vh !important;
  min-height: 220px !important;
  max-height: 460px !important;
  flex-shrink: 0 !important;
  background: #08080f !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
  animation: studio-cam-glow 3.8s ease-in-out infinite !important;
}
@keyframes studio-cam-glow {
  0%, 100% {
    box-shadow: 0 0 0 1.5px rgba(212,175,55,0.1),
                0 0 28px rgba(212,175,55,0.04),
                0 20px 60px rgba(0,0,0,0.8);
  }
  50% {
    box-shadow: 0 0 0 1.5px rgba(212,175,55,0.5),
                0 0 56px rgba(212,175,55,0.16),
                0 0 100px rgba(212,175,55,0.05),
                0 20px 60px rgba(0,0,0,0.8);
  }
}
#vy_lv_main_videoel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* LIVE badge overlay inside camera */
.vy_lv_dashboard_llv_vvw_tm.__none { display: none !important; }
.vy_lv_dashboard_llv_vvw_tm:not(.__none) {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Pre-live settings panel */
#vy_lv_prelive_bsettings.vy_lv_a6s {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Studio Cards */
.vy_lv_a20opt {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  overflow: hidden !important;
  display: block !important;
}
.vy_lv_a21optli_title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 2px !important;
  display: block !important;
}
.vy_lv_a22optli_desc {
  font-size: 12px !important;
  color: rgba(255,255,255,0.48) !important;
  line-height: 1.55 !important;
  display: block !important;
}
.vy_lv_a20opt > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.vy_lv_a21optsli { margin: 0 !important; }
.vy_lv_a26ppt { border-radius: 10px !important; overflow: hidden !important; }
.vy_lv_a23opt {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.65) !important;
}
.vy_lv_a23opt:hover {
  background: rgba(124,58,237,0.1) !important;
  border-color: rgba(124,58,237,0.3) !important;
  color: #fff !important;
}
.vy_lv_a23opt.__active {
  background: rgba(124,58,237,0.14) !important;
  border-color: rgba(124,58,237,0.4) !important;
  color: #c4b5fd !important;
}
.vy_lv_a24opt_ic {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  background: rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,0.55) !important;
}
.vy_lv_a24opt_ic svg { width: 16px !important; height: 16px !important; }
.vy_lv_a23opt.__active .vy_lv_a24opt_ic {
  background: rgba(124,58,237,0.22) !important;
  color: #a78bfa !important;
}
.vy_lv_a24opt_title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: inherit !important;
  display: block !important;
}
/* Info card */
.vy_lv_a20opt._vylv3_ii2 {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: rgba(124,58,237,0.06) !important;
  border-color: rgba(124,58,237,0.16) !important;
}
.vy_lv_a20opt._vylv3_ii2 > .vy_lv_a24opt_ic {
  background: rgba(124,58,237,0.15) !important;
  color: #a78bfa !important;
}

/* Device settings */
#vy_lv_stopts { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#vy_lv_camera_set {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.vy_lv_a28c_s { display: flex !important; align-items: center !important; gap: 10px !important; }

/* Premium select */
.vy_lv_aselect {
  flex: 1 !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 9px 32px 9px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  display: block !important;
}
.vy_lv_aselect:focus {
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}
.vy_lv_aselect option { background: #1a1a2e !important; color: #fff !important; }

/* OBS stream key card */
#vy_lv_stream_set {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  display: block !important;
}
#vy_lv_stream_set h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
}
.vy-lv-sfd321 {
  font-size: 12px !important;
  color: rgba(255,255,255,0.48) !important;
  line-height: 1.55 !important;
  margin-bottom: 14px !important;
  display: block !important;
}
.vy_lv_sf34 {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
  display: block !important;
}
.xbe3435 { margin-bottom: 12px !important; display: block !important; }
.xbet5235 { margin-bottom: 6px !important; display: block !important; }
input.oajrlxb2 {
  width: 100% !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.82) !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  outline: none !important;
  display: block !important;
}
input.oajrlxb2:focus {
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}
.fr53oto {
  font-size: 11px !important;
  color: rgba(255,255,255,0.32) !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
  display: block !important;
}
.h676nmdw.c4hnarmi {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 6px !important;
}

/* Right panel (JS-filled studio controls) */
#vy_lv_prelive_st {
  flex-shrink: 0 !important;
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;
  height: 100% !important;
  background: rgba(8,8,18,0.97) !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  position: relative !important;
}

/* ══════════════════════════════════════════════════════════════════
   4. WATCH PAGE EMBED — .vy_lv_feedb1
   ══════════════════════════════════════════════════════════════════ */
.vy_lv_feedb1 {
  width: 100% !important;
  position: relative !important;
  background: #08080f !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: block !important;
}
.vy_lv_feedb1 .vylv_feedbroadcast {
  width: 100% !important;
  background: #08080f !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: block !important;
}
.vylvelment-h28j5b-DivLivePlayerContainer {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 200px !important;
  background: #000 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
}
.vylvelment-1fptdeg-DivLiveTag {
  background: #dc2626 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  display: inline-block !important;
}
.vylvelment-2ozoao-Button {
  background: #7c3aed !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin: 4px !important;
  display: inline-block !important;
}
.vylvelment-2ozoao-Button:hover { background: #6d28d9 !important; }

/* ══════════════════════════════════════════════════════════════════
   5. MOBILE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #vy-livest.vylvdesktop {
    flex-direction: column !important;
  }
  .vylv_f3522 {
    flex: 0 0 auto !important;
    height: 56vw !important;
    min-height: 200px !important;
    max-height: 56vw !important;
    width: 100% !important;
  }
  .vy-live-e1v { height: 100% !important; }
  #divanim32v.vylvelment-qftsfk-DivChatRoomAnimationContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 1 1 auto !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
  }
  .vylv-wepvij-DivLiveRoomBanner { padding: 32px 14px 14px !important; }
  .vylv-k9sb3-StyledProfileAvatar { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  .vylv-6km8xc-H2UniqueId { font-size: 13px !important; }
  #vy_lv_contains_product_desktopstreamauthor.vy_lv_a2 {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
  }
  .vy_lv_a3vs { height: auto !important; }
  .vy_lv_a5v#vy_lv_rtmpv { height: 50vw !important; min-height: 180px !important; }
  #vy_lv_prelive_st {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
  }
}
@media (max-width: 480px) {
  .vylv_f3522 { height: 52vw !important; max-height: 52vw !important; }
  .vylv-ppntst-DivActionContainer { gap: 5px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   6. WATCH PAGE — Live stream embed + state overlays
   ══════════════════════════════════════════════════════════════════ */

/* Make the live viewer full-screen when active (ensures it overlays watch page) */
#vy-livest.vylvdesktop {
  display: flex !important;
}

/* Host Ended — premium full-screen design */
.vy_lv_host_ended {
  background: linear-gradient(135deg, #080810 0%, #0c0c20 50%, #060612 100%) !important;
}
.vy_lv_host_ended ._img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  border: 3px solid rgba(124,58,237,0.5) !important;
  box-shadow: 0 0 0 6px rgba(124,58,237,0.1), 0 8px 32px rgba(0,0,0,0.7) !important;
  flex-shrink: 0 !important;
}
.vy_lv_host_ended_text {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.2px !important;
}
/* Add a subtle "ended" pill badge */
.vy_lv_host_ended::after {
  content: "Stream Ended" !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  background: rgba(220,38,38,0.15) !important;
  border: 1px solid rgba(220,38,38,0.35) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #f87171 !important;
}

/* Host Away — premium waiting screen */
.vy_lv_host_away {
  background: linear-gradient(135deg, #080810 0%, #0c0c20 50%, #060612 100%) !important;
  gap: 16px !important;
}
.vy_lv_host_away img {
  animation: vip-avatar-pulse 2.5s ease-in-out infinite !important;
}
@keyframes vip-avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.5), 0 8px 32px rgba(0,0,0,0.7); }
  50% { box-shadow: 0 0 0 10px rgba(124,58,237,0), 0 8px 32px rgba(0,0,0,0.7); }
}
.vy_lv_host_away_text {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.75) !important;
}
/* Reconnecting */
.vy_lv_host_reconnecting {
  background: linear-gradient(135deg, #080810 0%, #0c0c20 100%) !important;
}
.vy_lv_host_reconnecting_text {
  font-size: 15px !important;
  color: rgba(255,255,255,0.65) !important;
}
.vy_lv_host_reconnecting::before {
  content: "" !important;
  width: 40px !important;
  height: 40px !important;
  border: 3px solid rgba(124,58,237,0.2) !important;
  border-top-color: #7c3aed !important;
  border-radius: 50% !important;
  animation: vip-spin 0.8s linear infinite !important;
}
@keyframes vip-spin { to { transform: rotate(360deg); } }

/* ── Watch page embed (when not full-screen) ── */
/* When embedded inside a watch page container that clips fixed positioning */
.vy_lv_feedb1 #vy-livest.vylvdesktop,
.vy_lv_a4vcontainer #vy-livest.vylvdesktop {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
}

/* ══════════════════════════════════════════════════════════════════
   7. STUDIO PAGE — Device selection panel improvements
   ══════════════════════════════════════════════════════════════════ */

/* Studio root */
#vy_lv_contains_product_desktopstreamauthor.vy_lv_a2 {
  background: #0c0c14 !important;
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* Left content column */
.vy_lv_a3vs {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 16px !important;
  gap: 12px !important;
  overflow-y: auto !important;
  min-width: 0 !important;
}

/* Camera preview */
.vy_lv_a5v#vy_lv_rtmpv {
  width: 100% !important;
  background: #000 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  position: relative !important;
  min-height: 200px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 16/9 !important;
}

#vy_lv_main_videoel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Device selection cards */
.vy_lv_a20opt {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}

/* Settings section header text */
.vy_lv_a20opt h3,
.vy_lv_a21optli_title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.2px !important;
}
.vy_lv_a22optli_desc {
  font-size: 12px !important;
  color: rgba(255,255,255,0.48) !important;
  line-height: 1.55 !important;
}

/* Device tabs (camera/stream key) */
.vy_lv_a23opt {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  text-decoration: none !important;
  color: rgba(255,255,255,0.65) !important;
}
.vy_lv_a23opt.__active,
.vy_lv_a23opt:hover {
  background: rgba(124,58,237,0.14) !important;
  border-color: rgba(124,58,237,0.4) !important;
  color: #c4b5fd !important;
}
.vy_lv_a24opt_title {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Device select dropdowns */
.vy_lv_aselect {
  flex: 1 !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
}
.vy_lv_aselect:focus {
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}
.vy_lv_aselect option {
  background: #1a1a2e !important;
  color: #fff !important;
}

/* Camera/mic row */
.vy_lv_a28c_s {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
}

/* Device icon badge */
.vy_lv_a24opt_ic {
  width: 32px !important;
  height: 32px !important;
  background: rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,0.55) !important;
}
.vy_lv_a24opt_ic svg {
  width: 16px !important;
  height: 16px !important;
}
.vy_lv_a23opt.__active .vy_lv_a24opt_ic {
  background: rgba(124,58,237,0.22) !important;
  color: #a78bfa !important;
}

/* Right panel (Go Live controls) */
#vy_lv_prelive_st {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  height: 100% !important;
  background: rgba(6,6,16,0.98) !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  overflow-y: auto !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Go Live button */
.vy_lv_fbt_go,
a.vy_lv_fbt_go,
button.vy_lv_fbt_go,
[class*="go_live"],
[class*="golive"] {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  letter-spacing: 0.3px !important;
  width: 100% !important;
  display: block !important;
  text-decoration: none !important;
  transition: opacity 0.18s ease !important;
}
.vy_lv_fbt_go:hover,
a.vy_lv_fbt_go:hover {
  opacity: 0.88 !important;
}

/* Stop streaming button */
.vy_lv_fbt_stop {
  background: rgba(220,38,38,0.15) !important;
  border: 1px solid rgba(220,38,38,0.35) !important;
  color: #f87171 !important;
  border-radius: 10px !important;
  padding: 11px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  width: 100% !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.18s ease !important;
}
.vy_lv_fbt_stop:hover { background: rgba(220,38,38,0.25) !important; }

/* GET STARTED section title */
#vy_lv_prelive_bsettings .vy_lv_a27ppt {
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin-bottom: 8px !important;
}

/* ══════════════════════════════════════════════════════════════════
   8. WATCH PAGE — Live stream recording footer
   ══════════════════════════════════════════════════════════════════ */

/* The watch page embed container for the live stream player */
.vy_lv_feedb1 {
  background: #0c0c14 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
}


/* ══════════════════════════════════════════════════════════════════
   9. VIEWER — Full live-desktop layout
   ══════════════════════════════════════════════════════════════════ */

/* Full-screen live viewer wrapper */
#vy-livest.vylvdesktop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: #000 !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
}

.vylv_f3522 {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.vy-live-entry-cnt {
  position: relative !important;
  flex: 1 1 auto !important;
  display: flex !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* ── Video area ── */
.vy-live-e1v {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  background: #000 !important;
  overflow: hidden !important;
}

#vy_lv_livestream {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* ── Top banner ── */
.vylv-wepvij-DivLiveRoomBanner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px 12px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, transparent 100%) !important;
  gap: 8px !important;
}

/* Author avatar */
.vylv-k9sb3-StyledProfileAvatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
  object-fit: cover !important;
}

/* Author info */
.vylv-6km8xc-H2UniqueId {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}
.vylv-1vec0rh-H1Nickname { display: none !important; }

/* Viewer count */
.vylv-181hozs-DivPeopleContainer {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(0,0,0,0.38) !important;
  border-radius: 12px !important;
  padding: 3px 8px !important;
  margin-top: 3px !important;
}
.vylv-1p1g5jf-DivPeopleCounter {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.88) !important;
}

/* LIVE badge */
.vy_lv_dsh_llv_vvw svg,
.vy_lv_dsh_llv_vvw {
  display: flex !important;
  align-items: center !important;
}

/* Timer */
.vy_lv_dashboard_llv_vvw_tm {
  background: rgba(255,60,60,0.18) !important;
  border: 1px solid rgba(255,60,60,0.35) !important;
  border-radius: 8px !important;
}
.vy_lv_dsh_tm {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ff6060 !important;
  letter-spacing: 0.5px !important;
}

/* Action buttons (share, close, chat) */
.vylv-ppntst-DivActionContainer {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.vylv-13l877f-IActionButton,
.vy-lv-close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #fff !important;
  transition: background 0.15s !important;
  flex-shrink: 0 !important;
}
.vylv-13l877f-IActionButton:hover,
.vy-lv-close:hover {
  background: rgba(255,255,255,0.22) !important;
}

/* ── Chat panel ── */
.vylvelment-qftsfk-DivChatRoomAnimationContainer {
  width: 340px !important;
  min-width: 300px !important;
  max-width: 340px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(8,8,16,0.97) !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Chat header */
.vylvelment-hdaobh-DivChatRoomHeader {
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
.vylvelment-yiy2y4-DivChatTitle {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  flex: 1 !important;
  letter-spacing: 0.2px !important;
}
.vylvelment-1dnj95g-DivChatRoomHeaderIconContainer {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.7) !important;
  flex-shrink: 0 !important;
}

/* Chat body — scrollable */
.vylvelment-rykcaj-DivChatRoomBody {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Chat message list */
.vylvelment-1gwk1og-DivChatMessageList {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.1) transparent !important;
}
.vylvelment-1gwk1og-DivChatMessageList::-webkit-scrollbar { width: 4px !important; }
.vylvelment-1gwk1og-DivChatMessageList::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 4px !important;
}

/* Individual chat message */
.vylvelment-1nmf5oj-DivChatRoomMessage-StyledChatMessageItem {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
}
.vylvelment-1nmf5oj-DivChatRoomMessage-StyledChatMessageItem:hover {
  background: rgba(255,255,255,0.03) !important;
  border-radius: 8px !important;
}

/* Avatar in chat */
.vylvelment-6rwu5g-DivBadgeWrap img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  flex-shrink: 0 !important;
}

/* Chat message content */
.vylvelment-1cik7b1-DivChatMessageContent {
  flex: 1 !important;
  min-width: 0 !important;
}
.vylvelment-cklfyg-SpanNickName {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #a78bfa !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.vylvelment-1o9hp7f-SpanChatRoomComment {
  font-size: 13px !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

/* More icon */
.vylvelment-8dqif4-DivChatMessageMoreIconWrapper { display: none !important; }
.vylvelment-1nmf5oj-DivChatRoomMessage-StyledChatMessageItem:hover .vylvelment-8dqif4-DivChatMessageMoreIconWrapper {
  display: flex !important;
  align-items: center !important;
  color: rgba(255,255,255,0.4) !important;
}

/* Chat input area */
.vylvelment-c4al9d-DivCommentContainer {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  gap: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(6,6,16,0.98) !important;
  flex-shrink: 0 !important;
}
.vylvelment-19dw2t5-DivLayoutContainer {
  flex: 1 !important;
  min-width: 0 !important;
}
.vylvelment-1ac6744-DivInputAreaContainer {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 22px !important;
  padding: 8px 14px !important;
  transition: border-color 0.15s !important;
}
.vylvelment-1ac6744-DivInputAreaContainer:focus-within {
  border-color: rgba(124,58,237,0.5) !important;
}
.vylvelment-158nhpu-DivEditor {
  font-size: 13px !important;
  color: rgba(255,255,255,0.85) !important;
  outline: none !important;
  min-height: 20px !important;
  max-height: 80px !important;
  overflow-y: auto !important;
  word-break: break-word !important;
}
.vylvelment-158nhpu-DivEditor:empty:before {
  content: attr(placeholder) !important;
  color: rgba(255,255,255,0.35) !important;
  pointer-events: none !important;
}

/* Send button */
#vylv_sendcom_btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  color: #fff !important;
  transition: opacity 0.15s !important;
}
#vylv_sendcom_btn:hover { opacity: 0.85 !important; }
#vylv_sendcom_btn svg { width: 18px !important; height: 18px !important; }

/* ── Mobile: stack video over chat ── */
@media (max-width: 640px) {
  #vy-livest.vylvdesktop {
    flex-direction: column !important;
  }
  .vylvelment-qftsfk-DivChatRoomAnimationContainer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42vh !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
  }
  .vy-live-e1v {
    height: 58vh !important;
  }
}

/* ── "Not live" background overlay ── */
.vylv-uskur1-DivPlayerBackground {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, #0a0a18 0%, #12082e 50%, #0a0a18 100%) !important;
  z-index: 1 !important;
}
.vylv-1kdnu10-DivPlayerCover {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(12px) !important;
}
.vylv-1fxkm4b-DivLivePlayerImageContainer img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(124,58,237,0.5) !important;
  box-shadow: 0 0 0 6px rgba(124,58,237,0.12), 0 8px 32px rgba(0,0,0,0.7) !important;
  object-fit: cover !important;
}
.vylv-y2fd0r-DivLivePlayerCurtain {
  display: none !important;
}

/* ── Reactions strip ── */
.vy_lv_reactions_bt.js__vy_lv_reactions_bt {
  position: absolute !important;
  bottom: 80px !important;
  left: 14px !important;
  z-index: 15 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STREAMLY LAYOUT — Live Viewer Page Only
   ALL rules scoped to #vy-livest — ZERO impact on homepage or other pages
   ═══════════════════════════════════════════════════════════════════ */

/* Dark Obsidian background — only when live viewer is on screen */
#vy-livest {
    background: #050505 !important;
    min-height: 100vh !important;
}

/* Kill any inherited body background when live page is active */
body:has(#vy-livest) {
    background: #050505 !important;
}

/* ── Flex layout: Video 75% | Chat 25% ── */
#vy-livest .vylv_f3522 {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: calc(100vh - 56px) !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* ── Video panel: 75% ── */
#vy-livest .vy-live-entry-cnt {
    flex: 0 0 75% !important;
    width: 75% !important;
    max-width: 75% !important;
    min-width: 0 !important;
    position: relative !important;
    background: #050505 !important;
}

/* ── Chat panel: 25% ── */
#vy-livest #divanim32v {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    min-width: 240px !important;
    position: relative !important;
    background: #0c0c14 !important;
    border-left: 1px solid rgba(140, 80, 255, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    overflow: hidden !important;
}

/* ── Chat room inner container fills height ── */
#vy-livest .vylvelment-5w1toe-DivChatRoomContainer {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

/* ── Video player — Purple neon border ── */
#vy-livest .vy-live-e1v {
    border: 1px solid rgba(140, 80, 255, 0.55) !important;
    box-shadow:
        0 0 18px rgba(140, 80, 255, 0.22),
        0 0 50px rgba(140, 80, 255, 0.10),
        inset 0 0 20px rgba(140, 80, 255, 0.04) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* ── Gold accent on LIVE badge and timer ── */
#vy-livest .vy_lv_dsh_llv_vvw,
#vy-livest .vy_lv_dsh_tm {
    background: rgba(212, 175, 55, 0.12) !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.25) !important;
    border-radius: 4px !important;
}

/* ── Chat header ── */
#vy-livest .vylvelment-hdaobh-DivChatRoomHeader {
    background: #0f0f1a !important;
    border-bottom: 1px solid rgba(140, 80, 255, 0.2) !important;
    flex-shrink: 0 !important;
}

/* ── Chat title ── */
#vy-livest .vylvelment-yiy2y4-DivChatTitle {
    color: #c084fc !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}

/* ── Chat messages list scrollable ── */
#vy-livest .vylvelment-1gwk1og-DivChatMessageList {
    flex: 1 !important;
    overflow-y: auto !important;
    background: transparent !important;
    padding: 8px 8px 0 !important;
}

/* ── Chat input area ── */
#vy-livest .vylvelment-rykcaj-DivChatRoomBody {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow: hidden !important;
}

/* ── Mobile: stack to full width below 768px ── */
@media (max-width: 768px) {
    #vy-livest .vylv_f3522 {
        flex-direction: column !important;
    }
    #vy-livest .vy-live-entry-cnt,
    #vy-livest #divanim32v {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #vy-livest #divanim32v {
        height: 50vh !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   END STREAMLY LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
