:root{
  --bg:#0f0f0f; --elev:#171717; --muted:#a1a1a1; --text:#e6e6e6; --accent:#3ea6ff; --danger:#ff5555; --ring:#3ea6ff55;
  --radius:16px;
}
.live-controls{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.quality-select{background:var(--elev); color:var(--text); border:1px solid #2a2a2a; border-radius:10px; padding:.4rem .6rem}
.live-chat-box{background:var(--elev); border-radius:var(--radius); border:1px solid #262626
  display:flex;
  flex-direction:column;}
.live-chat-header{position:sticky; top:0; background:linear-gradient(180deg, #121212, #0f0f0f00); padding:.6rem 1rem; border-bottom:1px solid #202020}
.live-chat-messages{padding: .75rem; display:flex; flex-direction:column; gap:.5rem; max-height:48vh; overflow:auto}
.live-msg{background:#141414; border:1px solid #222; border-radius:12px; padding:.5rem .75rem; box-shadow: 0 1px 0 #000}
.live-msg-meta{font-size:.75rem; color:var(--muted); margin-bottom:.15rem}
.live-msg-text{font-size:.95rem; line-height:1.35}
.live-chat-input{display:flex; align-items:center; gap:.5rem; padding:.6rem; border-top:1px solid #202020}
.send-btn,.gift-btn,.emoji-btn,.attach-btn,#goLiveBtn,#stopLiveBtn{background:#1f1f1f;border:1px solid #2a2a2a;color:var(--text);border-radius:12px;padding:.45rem .7rem;cursor:pointer}
.send-btn:hover,.gift-btn:hover,.emoji-btn:hover,.attach-btn:hover,#goLiveBtn:hover,#stopLiveBtn:hover{border-color:#3a3a3a}
#goLiveBtn{background:linear-gradient(180deg,#2a7fff,#1b5dd8); border-color:#2459c4}
#stopLiveBtn{background:linear-gradient(180deg,#c0392b,#992d22); border-color:#7a241b}
#liveChatInput{flex:1; background:#111; border:1px solid #262626; color:var(--text); padding:.55rem .7rem; border-radius:12px; outline:none}
#liveChatInput:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.thumb{display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .4rem; background:#141414; border:1px dashed #333; border-radius:10px; font-size:.8rem}
.thumb video,.thumb img{max-height:56px; border-radius:6px}
.toast{position:fixed; bottom:16px; right:16px; background:#181818; color:var(--text); border:1px solid #303030; padding:.6rem .8rem; border-radius:12px; box-shadow:0 4px 24px rgba(0,0,0,.5); z-index:9999}
.sr-only{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}


/* Container stacking: keep placeholder above preview until broadcast */
#liveContainer { position: relative; }
#liveContainer #liveVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#liveContainer #live-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); }


/* Viewer count badge - consistent style */
.viewer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  line-height: 1.2;
}


/* Chat upgrades */
.reply-preview{display:flex; align-items:center; gap:.5rem; background:#141414; border:1px solid #2a2a2a; border-radius:10px; padding:.3rem .5rem; margin:.25rem 0}
.reply-preview.hidden{display:none}
.reply-quote{font-size:.8rem; color:#bbb; border-left:2px solid #3a3a3a; padding-left:.5rem; margin-bottom:.35rem}
.msg-actions{display:flex; gap:.5rem; margin-top:.35rem}
.msg-action{background:#1f1f1f; border:1px solid #2a2a2a; color:#e6e6e6; border-radius:9999px; padding:.2rem .6rem; cursor:pointer; font-size:.8rem}
.msg-action:hover{border-color:#3a3a3a}
.reactions{display:flex; gap:.35rem; margin-top:.35rem}
.reaction-pill{background:#1b1b1b; border:1px solid #303030; border-radius:9999px; padding:.1rem .45rem; font-size:.8rem}
.reaction-popover{position:absolute; background:#181818; border:1px solid #2a2a2a; border-radius:12px; padding:.3rem; display:flex; gap:.25rem; z-index:9999; box-shadow:0 8px 24px rgba(0,0,0,.5)}
.reaction-btn{background:transparent; border:0; font-size:1.1rem; cursor:pointer; padding:.2rem .3rem}
.fade-in{animation:fadein .18s ease-out}
@keyframes fadein{from{opacity:0; transform:translateY(2px)} to{opacity:1; transform:none}}
.chat-media-img{max-width:100%; border-radius:8px; cursor:pointer; display:block}
.chat-media-video{max-width:100%; border-radius:8px; display:block}
.media-modal{position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:10000}
.media-modal.hidden{display:none}
.media-modal-inner img{max-width:92vw; max-height:90vh; border-radius:10px}


/* Force chat message text white */
.live-chat-messages .live-msg-text {
  color: #fff;
}

/* Username/timestamp subtle gray */
.live-chat-messages .live-msg-meta {
  color: #bbb;
  font-size: 0.8rem;
}


.live-chat-input {
  position: sticky;
  bottom: 0;
  background: #111;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #222;
  z-index: 10;
  transition: bottom 0.25s ease;
}


/* Floating toggle button and mobile chat overlay */
@media (max-width: 768px) {
  .chat-toggle-btn {
    position: absolute;
    bottom: 15%;
    right: 10px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 50;
    backdrop-filter: blur(4px);
  }

  .live-chat-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 60%;
    background: rgba(20,20,20,0.95);
    display: none;
    flex-direction: column;
    z-index: 100;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.3s ease;
  }

  .live-chat-box.open {
    display: flex;
  }

  @keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}


/* === Mobile Floating Chat Overlay (updated) === */
@media (max-width: 768px) {
  #liveChatBox.floating {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px; /* sit just above input bar */
    max-height: 20%;
    overflow-y: auto;
    padding: 4px 8px;
    display: flex;
    flex-direction: column-reverse; /* stack upward */
    background: rgba(0,0,0,0.3);
    backdrop-filter: saturate(120%) blur(2px);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1000;
  }
  #liveChatBox.floating.hidden-on-scroll {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* Hide clutter in floating mode */
  #liveChatBox.floating .live-chat-header,
  #liveChatBox.floating .live-msg.system {
    display: none !important;
  }
  /* Message bubbles minimal */
  #liveChatBox.floating .live-msg {
    background: rgba(0,0,0,0.4);
    color: #fff;
    border-radius: 12px;
    padding: 6px 10px;
    margin: 2px 0;
    display: inline-block;
    max-width: 80%;
  }
  #liveChatBox.floating .live-msg-meta {
    display: none;
  }
}



.fullscreen-btn {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  cursor: pointer;
  z-index: 50;
  transition: background 0.2s;
}
.fullscreen-btn:hover {
  background: rgba(0,0,0,0.7);
}
#creatorMediaSection > div:nth-child(1) > h2,
#creatorMediaSection > div:nth-child(1) > a {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Gift Panel Styles */
.gift-panel.hidden { display:none; }
.gift-panel { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; }
.gift-panel-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); }
.gift-panel-content { position:relative; z-index:10000; max-width:600px; margin:5% auto; background:#fff; border-radius:12px; padding:20px; text-align:center; animation:fadeIn 0.3s ease; }
.gift-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:15px; margin-top:15px; }
.gift-card { background:#f8f8f8; padding:10px; border-radius:10px; cursor:pointer; transition:transform 0.2s; }
.gift-card:hover { transform:scale(1.05); background:#eee; }
.gift-icon { font-size:2rem; }
.gift-name { font-weight:bold; margin-top:5px; }
.gift-cost { color:#555; font-size:0.9rem; }
@keyframes fadeIn { from {opacity:0; transform:scale(0.95);} to {opacity:1; transform:scale(1);} }

#liveChatMessages{margin-bottom:auto;}


/* ADDED: volume control UI + mobile gift placement */
.volume-control {
  position: absolute;
  bottom: 0.5rem;
  left: 4.2rem; /* to the right of .fullscreen-btn */
  background: rgba(0,0,0,0.5);
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 60;
}
.volume-control button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
#volumeSlider {
  width: 110px;
  appearance: none;
  background: rgba(255,255,255,0.22);
  height: 4px;
  border-radius: 999px;
  outline: none;
}
#volumeSlider::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.35);
  cursor: pointer;
}
#volumeSlider::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.35);
  cursor: pointer;
}

@media (max-width: 600px){
  #tipBox { display:flex; align-items:center; gap: .5rem; }
  #tipBox input[type="number"]{ flex: 1 1 auto; min-width: 0; }
}