/*
 * live-chat-premium.css  —  Lovezii
 * Premium mobile live chat overlay (TikTok Live / YouTube Live style)
 * Desktop layout is untouched; all new rules are gated under max-width:768px
 * or target new .lcp-* classes only.
 */

/* ============================================================
   SHARED TOKENS
   ============================================================ */
:root {
  --lcp-accent:        #ff3b5c;
  --lcp-accent-glow:   rgba(255,59,92,.35);
  --lcp-accent2:       #9d4edd;
  --lcp-gold:          #fbbf24;
  --lcp-glass:         rgba(0,0,0,.56);
  --lcp-glass-border:  rgba(255,255,255,.09);
  --lcp-text:          rgba(255,255,255,.92);
  --lcp-text-dim:      rgba(255,255,255,.55);
  --lcp-pill:          999px;
  --lcp-msg-r:         16px 16px 16px 4px;
  --lcp-safe-b:        env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   DESKTOP — polish existing elements, no layout changes
   ============================================================ */
@media (min-width: 769px) {

  /* Compact ad card inside chat column */
  .live-chat-box .companion-ads { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
  .live-chat-box .companion-ads .ad3-grid { display: block; }
  .live-chat-box .companion-ads .ad3-item { list-style: none; }
  .live-chat-box .companion-ads .ad-card {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    padding: 7px 10px; background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07) !important; border-radius: 10px;
    transition: background .2s;
  }
  .live-chat-box .companion-ads .ad-card:hover { background: rgba(255,255,255,.06); }
  .live-chat-box .companion-ads .ad-card__img  { width:32px; height:32px; border-radius:6px; object-fit:cover; flex-shrink:0; }
  .live-chat-box .companion-ads .ad-card__meta { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
  .live-chat-box .companion-ads .ad-card__meta strong { font-size:11.5px; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .live-chat-box .companion-ads .ad-card__meta span   { font-size:10px; color:rgba(255,255,255,.38); }

  /* Chat header */
  .live-chat-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02); flex-shrink:0; }
  .live-chat-title  { font-size:13.5px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; }
  .live-chat-title .viewer-badge { font-size:11px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); padding:3px 9px; border-radius:var(--lcp-pill); color:var(--lcp-text-dim); font-weight:600; }

  /* Gift button */
  #giftBtn.gift-btn--visual { height:30px !important; padding:0 13px !important; background:linear-gradient(135deg,var(--lcp-accent),var(--lcp-accent2)) !important; border:none !important; border-radius:var(--lcp-pill) !important; color:#fff !important; font-size:12px; font-weight:700; gap:6px; }
  #giftBtn.gift-btn--visual .gift-btn-art { width:18px; height:18px; }

  /* Messages list */
  .live-chat-messages { flex:1 1 auto; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent; max-height:65vh; }
  .live-msg { background:transparent !important; border:none !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; animation:lcp-pop .2s ease both; }
  .live-msg-meta { font-size:11.5px; color:var(--lcp-gold); font-weight:700; margin-bottom:2px; display:flex; align-items:center; gap:6px; }
  .live-msg[data-role="creator"] .live-msg-meta, .live-msg.creator .live-msg-meta { color: var(--lcp-accent); }
  .live-msg-text { font-size:13px; color:rgba(255,255,255,.85) !important; line-height:1.4; }
  .report-btn { font-size:10px; color:rgba(255,255,255,.3); background:none; border:none; cursor:pointer; padding:0; margin-left:auto; transition:color .2s; }
  .report-btn:hover { color:var(--lcp-accent); }
  .live-msg-gift .live-msg-meta { color:var(--lcp-gold) !important; }
  .live-msg-gift .live-msg-text { background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(157,78,221,.08)); border:1px solid rgba(251,191,36,.2); border-radius:10px; padding:7px 10px; color:var(--lcp-gold) !important; font-weight:600; }

  /* Input bar */
  .live-chat-input { padding:10px 12px !important; border-top:1px solid rgba(255,255,255,.07) !important; background:rgba(255,255,255,.02) !important; display:flex; align-items:center; gap:8px; flex-shrink:0; position:sticky; bottom:0; }
  #liveChatInput { flex:1; height:36px; background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:var(--lcp-pill) !important; color:#fff !important; font-size:13px; padding:0 14px; outline:none; transition:border-color .2s; }
  #liveChatInput:focus { border-color:rgba(255,255,255,.25) !important; }
  .emoji-btn { background:none !important; border:none !important; font-size:20px; cursor:pointer; opacity:.7; padding:4px; border-radius:8px; transition:opacity .2s; }
  .emoji-btn:hover { opacity:1; }
  .send-btn { width:34px !important; height:34px !important; border-radius:50% !important; background:var(--lcp-accent) !important; border:none !important; color:#fff !important; cursor:pointer; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; flex-shrink:0; transition:transform .15s,opacity .2s; box-shadow:0 0 10px var(--lcp-accent-glow); }
  .send-btn:hover { opacity:.85; transform:scale(1.05); }
}

/* ============================================================
   MOBILE  ≤ 768px — full TikTok-style overlay
   ============================================================ */
@media (max-width: 768px) {
  /* Show original desktop controls (subscribe, go live) below the video */
  #liveControls { display: block !important; }

  /* Subscribe pill — always visible for viewers */
  #subscribeProfileBtn { display: inline-flex !important; }
  #manageSubBtn        { display: inline-flex !important; }

  /* Hide things not needed on mobile */
  #liveControls .live-quality-group > select,
  #liveProviderNote,
  #stopLiveBtn { display: none !important; }

  /* Creator: show Go Live in controls. Subscribe button stays visible so
     creators can see their subscriber count. */
  body[data-lz-live-can-host="1"] #goLiveBtn { display: inline-block !important; }

  /* ── Force liveContainer to be the positioning root ── */
  #liveContainer { position:relative !important; overflow:hidden !important; }

  /* ── Kill old floating/fixed chat box on mobile ── */
  #liveChatBox, #liveChatBox.floating, .live-chat-box {
    position:static !important; display:none !important;
    background:transparent !important; border:none !important;
    box-shadow:none !important; max-height:none !important; border-radius:0 !important;
  }

  /* ── Hide old chat toggle btn (replaced by FAB) ── */
  .chat-toggle-btn, #chatToggleBtn { display:none !important; }

  /* FIX: suppress iOS/Android native video overlay play button on live stream elements */
  #lzFsMount video::-webkit-media-controls,
  #lzFsMount video::-webkit-media-controls-enclosure,
  #lzFsMount video::-webkit-media-controls-overlay-play-button,
  #lzFsMount video::-webkit-media-controls-panel,
  #lzFsMount video::-webkit-media-controls-play-button,
  #liveContainer video::-webkit-media-controls-overlay-play-button,
  #liveContainer video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0 !important;
  }
  #lzFsMount video { -webkit-media-controls-display: none; }

  /* FIX: hide static quality/subscribe/go-live controls on mobile — lcp-creator-bar replaces them */
     and the provider note. Go Live button and quality/subscribe stay visible. */
  #stopLiveBtn, #liveProviderNote { display:none !important; }

  /* Go Live: only visible on mobile when this user is the page owner/creator */
  /* Default hidden on mobile — JS sets data-lz-live-can-host="1" for creators */
  #goLiveBtn { display:none !important; }
  body[data-lz-live-can-host="1"] #goLiveBtn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ff3b5c, #c0154f);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,59,92,.45);
    letter-spacing: .02em;
  }
  body[data-lz-live-can-host="1"] #goLiveBtn:active { transform: scale(.94); }

  /* Keep fullscreen available on mobile. Position it above the inline control bar
     so it stays tappable and visible on small screens. */
  .fullscreen-btn, #fullscreenBtn {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    bottom:3.15rem !important;
    left:0.5rem !important;
    z-index:62 !important;
  }

  /* ── Hide old viewer count overlay inside video ── */
  #liveContainer > div[style*="bottom:0.5rem"][style*="right:0.5rem"] { display:none !important; }

  /* ────────────────────────────────────────────────
     lcp-panel  — main overlay panel, abs inside #liveContainer
     FIX: hidden on normal mobile view — only shows when lzFs fullscreen is open
     ──────────────────────────────────────────────── */
  .lcp-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 54vh;
    display: none;          /* hidden by default on normal view */
    flex-direction: column;
    pointer-events: none;
    z-index: 22;
  }

  /* Messages stream — fades to transparent at top */
  .lcp-stream {
    flex: 1 1 auto;
    overflow-y: auto; overflow-x: hidden;
    padding: 10px 12px 4px;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%);
    mask-image: linear-gradient(180deg, transparent 0%, black 30%);
    pointer-events: auto;
    scrollbar-width: none;
  }
  .lcp-stream::-webkit-scrollbar { display: none; }

  /* Message bubble */
  .live-msg { /* keep existing class, just restyle on mobile */
    display: inline-flex !important;
    max-width: 84% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    animation: lcp-pop .22s cubic-bezier(.34,1.56,.64,1) both !important;
  }

  /* Wrap text inside a glass bubble */
  .live-msg .live-msg-meta,
  .live-msg .live-msg-text { display: block; }

  /* Glass bubble wrapper — injected by JS; fallback for existing msgs */
  .live-msg-inner {
    background: var(--lcp-glass);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--lcp-glass-border);
    border-radius: var(--lcp-msg-r);
    padding: 6px 11px;
  }

  .live-msg-meta { font-size:11px !important; font-weight:700 !important; color:var(--lcp-gold) !important; margin-bottom:1px !important; line-height:1; }
  .live-msg.creator .live-msg-meta,
  .live-msg[data-role="creator"] .live-msg-meta { color: var(--lcp-accent) !important; }
  .live-msg.mod .live-msg-meta { color: #60a5fa !important; }
  .live-msg-text { font-size:13px !important; color:var(--lcp-text) !important; line-height:1.35; word-break:break-word; }

  /* Gift messages */
  .live-msg-gift .live-msg-inner { background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(157,78,221,.15)) !important; border-color:rgba(251,191,36,.3) !important; }
  .live-msg-gift .live-msg-meta { color: var(--lcp-gold) !important; }
  .live-msg-gift .live-msg-text { color: var(--lcp-gold) !important; font-weight:600 !important; }

  /* System messages */
  .live-msg.system { max-width:100% !important; align-self:center; }
  .live-msg.system .live-msg-inner { background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.08) !important; border-radius:var(--lcp-pill) !important; padding:3px 12px; }
  .live-msg.system .live-msg-text { font-size:10.5px !important; color:var(--lcp-text-dim) !important; }
  .live-msg.system .live-msg-meta { display:none !important; }

  /* Report button — hide on mobile for cleaner look */
  .report-btn { display:none !important; }

  /* ── Compact ad pill ── */
  .lcp-ad-strip { flex-shrink:0; margin:0 12px 4px; pointer-events:auto; }
  .lcp-ad-pill { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.50); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.08); border-radius:var(--lcp-pill); padding:5px 12px 5px 5px; cursor:pointer; text-decoration:none; transition:background .2s; max-width:82%; }
  .lcp-ad-pill:active { background:rgba(255,255,255,.08); }
  .lcp-ad-pill-img { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.08); object-fit:cover; flex-shrink:0; }
  .lcp-ad-label { font-size:9px; color:rgba(255,255,255,.38); text-transform:uppercase; letter-spacing:.07em; font-weight:700; display:block; }
  .lcp-ad-text  { font-size:11.5px; color:rgba(255,255,255,.65); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ── Input row ── */
  .lcp-input-row { flex-shrink:0; padding:7px 12px; padding-bottom:calc(7px + var(--lcp-safe-b)); display:flex; align-items:center; gap:7px; pointer-events:auto; background:linear-gradient(0deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.26) 100%); transition:bottom .12s ease; }

  /* When keyboard is open on mobile the input row floats to fixed position above it */
  .lcp-input-row.lzKb-float {
    position: fixed !important;
    left: 0; right: 0;
    bottom: 0;
    z-index: 9997;
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 20, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 -4px 24px rgba(0,0,0,.55);
  }
  .lcp-field { flex:1; height:38px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); border-radius:var(--lcp-pill); color:#fff; font-size:13.5px; padding:0 14px; outline:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .2s,border-color .2s; min-width:0; }
  .lcp-field::placeholder { color:rgba(255,255,255,.38); }
  .lcp-field:focus { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }
  .lcp-emoji-btn { width:36px; height:36px; border-radius:50%; background:transparent; border:none; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .15s; padding:0; }
  .lcp-emoji-btn:active { transform:scale(.85); }
  .lcp-gift-btn { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#fbbf24,#f59e0b); border:none; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 10px rgba(251,191,36,.4); transition:transform .15s; }
  .lcp-gift-btn:active { transform:scale(.88); }
  .lcp-send-btn { width:36px; height:36px; border-radius:50%; background:var(--lcp-accent); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 12px var(--lcp-accent-glow); transition:transform .15s,box-shadow .2s; padding:0; }
  .lcp-send-btn:active { transform:scale(.88); box-shadow:none; }

  /* ── HUD bar — LIVE + viewer count ── */
  /* FIX: hidden on normal view — the fullscreen overlay has its own HUD (#lzFsHud) */
  .lcp-hud { display:none; position:absolute; top:0; left:0; right:0; padding:14px 12px 10px; align-items:center; gap:7px; background:linear-gradient(180deg,rgba(0,0,0,.60) 0%,transparent 100%); z-index:20; pointer-events:none; }
  .lcp-live-badge { display:none; align-items:center; gap:5px; background:var(--lcp-accent); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.08em; padding:3px 9px; border-radius:var(--lcp-pill); text-transform:uppercase; pointer-events:auto; }
  .lcp-live-dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:lcp-dot 1.4s infinite; }
  .lcp-viewer-pill { display:flex; align-items:center; gap:4px; background:rgba(0,0,0,.50); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:3px 9px; border-radius:var(--lcp-pill); font-size:11.5px; font-weight:600; color:#fff; }

  /* ── Creator controls bar (bottom-left of video) ── */
  /* FIX: hidden on normal view — only shown by JS when creator is live */
  /* ── Creator bar — single End Live pill, centred at bottom of video ── */
  .lcp-creator-bar {
    display: none;          /* shown by JS when creator is live */
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    gap: 0;
    z-index: 30;
    pointer-events: auto;
  }
  /* The single End Live button: full pill, not a circle */
  .lcp-cb { display:none; }  /* hide any stray buttons we might add later */
  .lcp-cb-end {
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(255,59,92,.85);
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 9px 22px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(255,59,92,.45);
    transition: transform .15s, background .2s;
    white-space: nowrap;
  }
  .lcp-cb-end:active { transform: scale(.92); background: rgba(255,59,92,1); }

  /* ── Right actions column (like / gift / share) ── */
  /* FIX: hidden on normal view — fullscreen overlay has its own action col (#lzFsActions) */
  .lcp-right-col { display:none; position:absolute; bottom:14px; right:12px; flex-direction:column; gap:14px; align-items:center; z-index:30; pointer-events:auto; }
  .lcp-ract { display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; }
  .lcp-ract-icon { width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.50); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:18px; transition:transform .15s; }
  .lcp-ract:active .lcp-ract-icon { transform:scale(.88); }
  .lcp-ract-label { font-size:9.5px; color:rgba(255,255,255,.8); font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.6); }
  .lcp-gift-icon { background:linear-gradient(135deg,var(--lcp-accent),var(--lcp-accent2)) !important; border-color:transparent !important; }

  /* ── Floating hearts burst ── */
  .lcp-burst { position:absolute; right:56px; bottom:80px; pointer-events:none; z-index:35; width:30px; }
  .lcp-float { position:absolute; font-size:20px; animation:lcp-up 2.2s ease-out forwards; opacity:0; }

  /* ── Chat FAB ── */
  .lcp-fab { position:absolute; bottom:68px; right:14px; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.65); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1.5px solid rgba(255,255,255,.20); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:30; box-shadow:0 4px 16px rgba(0,0,0,.5); transition:transform .15s,opacity .2s; }
  .lcp-fab.lcp-hidden { opacity:0; pointer-events:none; transform:scale(.8); }
  .lcp-fab-dot { position:absolute; top:3px; right:3px; width:10px; height:10px; border-radius:50%; background:var(--lcp-accent); border:2px solid #0a0a0c; display:none; }
  .lcp-fab.lcp-has-unread .lcp-fab-dot { display:block; }
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes lcp-pop {
  from { opacity:0; transform:translateY(8px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes lcp-up {
  0%   { opacity:1; transform:translateY(0) scale(1); }
  80%  { opacity:.7; transform:translateY(-110px) scale(1.2) rotate(-8deg); }
  100% { opacity:0; transform:translateY(-150px) scale(.8); }
}
@keyframes lcp-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(.7); }
}

/* ── Creator mobile: hide all viewer-side lcp overlay elements ──────────
   When the page owner (creator) visits their own page on mobile,
   none of the TikTok viewer overlay elements should appear.
   The creator gets a clean page — their controls come from lcp-creator-bar
   which is shown by JS only when a live session is active.
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body[data-lz-live-can-host="1"] .lcp-panel,
  body[data-lz-live-can-host="1"] .lcp-hud,
  body[data-lz-live-can-host="1"] .lcp-right-col,
  body[data-lz-live-can-host="1"] .lcp-fab,
  body[data-lz-live-can-host="1"] .lcp-stream {
    display: none !important;
  }

  /* Also hide viewer-side monetization elements creators don't need */
  body[data-lz-live-can-host="1"] #tipBox,
  body[data-lz-live-can-host="1"] .boost-container {
    display: none !important;
  }
}