/* VYNKO Live, pantalla de quien mira (el dueño 2026-11-05, imagen de referencia): fondo azul noche, degradados azul /
   violeta / fucsia, paneles de vidrio y bordes de luz. Arriba: volver, logo, ⋮, la persona (verificado, @nombre,
   "+ Unirse"), "EN VIVO", cuántos miran y los fans con corona; "Top 1 del Live". Panel de regalos a la derecha
   (Regalos / Top Fans / Ranking). Comentarios abajo a la izquierda y la barra de abajo. Prefijo vlv-. JS: live-viewer.js */

#liveViewerView.vlv {
  --vlv-blue: #3b82f6; --vlv-sky: #38bdf8; --vlv-violet: #8b5cf6; --vlv-fuchsia: #d946ef; --vlv-pink: #ff3d9a;
  --vlv-glass: rgba(18, 20, 58, .52); --vlv-glass-2: rgba(28, 26, 78, .62); --vlv-line: rgba(167, 150, 255, .34);
  --vlv-grad: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #d946ef 100%);
  --vlv-grad-gift: linear-gradient(135deg, #8b5cf6 0%, #c026d3 55%, #ff3d9a 100%);
  background: radial-gradient(120% 70% at 50% 0%, #1d2370 0%, #0b0f33 45%, #05061a 100%);
  font-family: inherit; z-index: 2200;
}
#liveViewerView.vlv .mp-live-bg-video { background: radial-gradient(110% 60% at 50% 30%, #222a7a 0%, #0d1240 50%, #05061a 100%); }
#liveViewerView .vlv-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 6, 26, .72) 0%, rgba(5, 6, 26, .52) 9%, rgba(5, 6, 26, .3) 18%, rgba(5, 6, 26, .12) 27%, rgba(5, 6, 26, .03) 34%, rgba(5, 6, 26, 0) 40%),
    linear-gradient(0deg, rgba(5, 6, 26, .84) 0%, rgba(6, 7, 32, .62) 12%, rgba(6, 7, 32, .36) 24%, rgba(6, 7, 32, .14) 36%, rgba(5, 6, 26, 0) 48%),
    radial-gradient(70% 40% at 100% 45%, rgba(139, 92, 246, .16), rgba(0, 0, 0, 0) 70%),
    radial-gradient(60% 35% at 0% 75%, rgba(217, 70, 239, .12), rgba(0, 0, 0, 0) 70%); }
#liveViewerView .mp-live-reactions { z-index: 6; }

/* Lo viejo que ya no se ve (se conserva en la página: client.js lo usa) */
#liveViewerView .vlv-legacy, #liveViewerView .mp-lv-emojis, #liveViewerView .mp-lv-row2, #liveViewerView .lx-top { display: none !important; }

/* ---------- Arriba ---------- */
#liveViewerView .vlv-head { position: absolute; z-index: 5; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
#liveViewerView header.vlv-head { margin: 0; border: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 0; height: auto; }
#liveViewerView .vlv-head > * { pointer-events: auto; }
#liveViewerView .vlv-bar { display: flex; align-items: center; gap: 10px; min-height: 42px; }
#liveViewerView .vlv-bar-gap { flex: 1; }
#liveViewerView .vlv-round { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; background: var(--vlv-glass); border: 1px solid var(--vlv-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 14px rgba(139, 92, 246, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
#liveViewerView .vlv-round:active { transform: scale(.92); }
#liveViewerView .vlv-logo { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-shadow: 0 0 12px rgba(139, 92, 246, .8); }
#liveViewerView .vlv-logo img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(56, 189, 248, .7)); }
#liveViewerView .vlv-logo b { font-size: 17px; font-weight: 900; letter-spacing: .06em; }
#liveViewerView .vlv-logo i { font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .08em; padding: 2px 6px; border-radius: 6px; background: var(--vlv-grad); box-shadow: 0 0 10px rgba(217, 70, 239, .6); }

/* Top 1 del Live (insignia dorada con corona) */
#liveViewerView .vlv-top1 { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 4px; border-radius: 999px; cursor: pointer;
  color: #3b2300; font: inherit; background: linear-gradient(135deg, #fff3b0 0%, #ffd34d 35%, #f5a623 70%, #ffde7a 100%);
  border: 1px solid rgba(255, 236, 160, .95); box-shadow: 0 0 16px rgba(255, 196, 61, .65), inset 0 1px 0 rgba(255, 255, 255, .8); }
#liveViewerView .vlv-top1.hidden { display: none; }
#liveViewerView .vlv-top1-crown { position: absolute; left: 10px; top: -11px; font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
#liveViewerView .vlv-top1-av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: inline-flex; border: 2px solid #fff6cf; background: #7c3aed; }
#liveViewerView .vlv-top1-av > * { width: 100% !important; height: 100% !important; font-size: 13px; }
#liveViewerView .vlv-top1-av img { object-fit: cover; }
#liveViewerView .vlv-top1-txt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
#liveViewerView .vlv-top1-txt b { font-size: 13px; font-weight: 900; }
#liveViewerView .vlv-top1-txt small { font-size: 10px; font-weight: 800; opacity: .8; }

/* Quien transmite */
#liveViewerView .vlv-host-row { display: flex; }
#liveViewerView .vlv-host { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 5px 5px 5px 5px; border-radius: 999px;
  background: var(--vlv-glass); border: 1px solid var(--vlv-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 0 18px rgba(99, 102, 241, .3), inset 0 1px 0 rgba(255, 255, 255, .1); }
#liveViewerView .vlv-host-ring { flex: none; width: 46px; height: 46px; padding: 2px; border-radius: 50%; background: var(--vlv-grad); box-shadow: 0 0 12px rgba(217, 70, 239, .55); box-sizing: border-box; }
#liveViewerView .vlv-host-ring .mp-live-host-avatar { display: flex; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2px solid #0b0f33; box-sizing: border-box; background: #312e81; }
#liveViewerView .vlv-host-ring .mp-live-host-avatar > * { width: 100% !important; height: 100% !important; border-radius: 50% !important; }
#liveViewerView .vlv-host-ring img { object-fit: cover; }
#liveViewerView .vlv-host-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
#liveViewerView .vlv-host-name-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
#liveViewerView .vlv-host-name { font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
#liveViewerView .vlv-verified { display: inline-flex; flex: none; filter: drop-shadow(0 0 4px rgba(29, 155, 240, .8)); }
#liveViewerView .vlv-verified.hidden { display: none; }
#liveViewerView .vlv-handle { font-size: 12px; color: rgba(205, 214, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
#liveViewerView .vlv-follow { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  background: var(--vlv-grad); box-shadow: 0 0 14px rgba(139, 92, 246, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
#liveViewerView .vlv-follow.following { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
#liveViewerView .vlv-follow.hidden { display: none; }
#liveViewerView .vlv-follow:active { transform: scale(.95); }

/* EN VIVO · cuántos miran · fans con corona */
#liveViewerView .vlv-stats { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
#liveViewerView .vlv-live-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; color: #fff;
  font-size: 12px; font-weight: 900; letter-spacing: .05em; background: linear-gradient(135deg, #ff3d9a, #d946ef);
  box-shadow: 0 0 14px rgba(255, 61, 154, .85), 0 0 2px rgba(255, 255, 255, .6) inset; }
#liveViewerView .vlv-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: vlvBlink 1.3s ease-in-out infinite; }
#liveViewerView .vlv-live-pill span { font-weight: 700; letter-spacing: 0; opacity: .92; font-variant-numeric: tabular-nums; }
@keyframes vlvBlink { 50% { opacity: .25; } }
#liveViewerView .vlv-glass-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 800;
  background: var(--vlv-glass); border: 1px solid var(--vlv-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#liveViewerView .vlv-fans, #liveViewerView .vlv-watchers { display: inline-flex; align-items: center; min-width: 0; padding-top: 6px; }
#liveViewerView .vlv-fans:empty { display: none; }
#liveViewerView .vlv-fans:not(:empty) ~ .vlv-watchers { display: none; }
#liveViewerView .vlv-fan { position: relative; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%; border: 2px solid #ffd34d; display: inline-flex; overflow: visible; background: #6d28d9; cursor: pointer; padding: 0; }
#liveViewerView .vlv-fan:first-child { margin-left: 0; }
#liveViewerView .vlv-fan.r2 { border-color: #d6dcf0; }
#liveViewerView .vlv-fan.r3 { border-color: #e7a26a; }
#liveViewerView .vlv-fan > .vlv-fan-av { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; }
#liveViewerView .vlv-fan > .vlv-fan-av > * { width: 100% !important; height: 100% !important; font-size: 11px; }
#liveViewerView .vlv-fan img { object-fit: cover; }
#liveViewerView .vlv-fan em { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
#liveViewerView .vlv-watchers img { width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(167, 150, 255, .7); }
#liveViewerView .vlv-watchers img:first-child { margin-left: 0; }
#liveViewerView .vlv-store { align-self: flex-start; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--vlv-line); color: #fff; font: inherit; font-size: 12.5px; font-weight: 800;
  background: var(--vlv-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; }
#liveViewerView .vlv-store.hidden { display: none; }

/* La meta y los letreros de live-extras.js, debajo de la cabecera */
#liveViewerView .lx-hud { top: calc(env(safe-area-inset-top, 0px) + 158px); left: 12px; right: auto; width: min(240px, 55vw); }
#liveViewerView .lx-goal { background: var(--vlv-glass); border: 1px solid var(--vlv-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#liveViewerView .lx-goal-bar i { background: var(--vlv-grad-gift); }
#liveViewerView .lx-join { top: calc(env(safe-area-inset-top, 0px) + 206px); background: var(--vlv-glass); border: 1px solid var(--vlv-line); }
/* Con el panel abierto, el letrero del regalo no se monta encima */
#liveViewerView .lx-gifts { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px + 22vh); right: 76px; }
#liveViewerView .lx-gifts .lx-gift { max-width: 100%; box-sizing: border-box; }
#liveViewerView .lx-gift { background: linear-gradient(90deg, rgba(139, 92, 246, .92), rgba(217, 70, 239, .82)); box-shadow: 0 0 18px rgba(217, 70, 239, .5); }

/* ---------- Panel de regalos (derecha) ---------- */
#liveViewerView .vlv-panel { position: absolute; z-index: 5; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 164px); width: 192px; box-sizing: border-box;
  padding: 8px; border-radius: 22px; color: #fff; background: linear-gradient(160deg, rgba(36, 30, 96, .62), rgba(16, 18, 56, .58));
  border: 1px solid rgba(186, 160, 255, .42); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 0 26px rgba(139, 92, 246, .38), 0 0 2px rgba(217, 70, 239, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .25s ease, opacity .25s ease; transform-origin: right center; }
#liveViewerView.vlv-panel-off .vlv-panel { transform: translateX(16px) scale(.92); opacity: 0; pointer-events: none; }
#liveViewerView .vlv-tabs { display: flex; gap: 1px; padding: 3px; border-radius: 999px; background: rgba(5, 6, 26, .45); }
#liveViewerView .vlv-tabs button { flex: 1; min-width: 0; height: 24px; padding: 0 2px; border: 0; border-radius: 999px; background: none; color: rgba(220, 225, 255, .75);
  font: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; }
#liveViewerView .vlv-tabs button.on { color: #fff; background: var(--vlv-grad); box-shadow: 0 0 10px rgba(139, 92, 246, .7); }
/* ✕ como botoncito en la esquina, fuera de las pestañas */
#liveViewerView .vlv-panel-x { position: absolute; top: -9px; right: -7px; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(186, 160, 255, .55); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: #26215f; box-shadow: 0 0 10px rgba(139, 92, 246, .6); cursor: pointer; }
#liveViewerView .vlv-panel-x svg { width: 12px; height: 12px; }
#liveViewerView .vlv-pane { margin-top: 8px; }
#liveViewerView .vlv-pane.hidden { display: none; }
#liveViewerView .vlv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
#liveViewerView .vlv-gift { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 1px 5px; border-radius: 14px; cursor: pointer; color: #fff; font: inherit;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: transform .12s, border-color .15s, box-shadow .15s; }
#liveViewerView .vlv-gift:active { transform: scale(.93); }
#liveViewerView .vlv-gift.on { border-color: #f0abfc; background: linear-gradient(160deg, rgba(139, 92, 246, .45), rgba(217, 70, 239, .35)); box-shadow: 0 0 14px rgba(217, 70, 239, .75); }
#liveViewerView .vlv-gift-ico { font-size: 27px; line-height: 1.1; filter: drop-shadow(0 2px 6px rgba(217, 70, 239, .45)); }
#liveViewerView .vlv-gift-name { font-size: 10px; font-weight: 700; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#liveViewerView .vlv-gift-price { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 900; color: #ffe27a; }
#liveViewerView .vlv-more-gifts { display: block; width: 100%; margin-top: 6px; padding: 3px 0; border: 0; background: none; color: rgba(205, 214, 255, .85); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; }
#liveViewerView .vlv-board { list-style: none; margin: 0; padding: 0; max-height: 172px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: none; }
#liveViewerView .vlv-board::-webkit-scrollbar { display: none; }
#liveViewerView .vlv-board li { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 11.5px; }
#liveViewerView .vlv-board li.vlv-empty { display: block; padding: 14px 6px; text-align: center; color: rgba(220, 225, 255, .75); background: none; font-size: 11px; line-height: 1.35; }
#liveViewerView .vlv-board .vlv-pos { flex: none; width: 20px; text-align: center; font-weight: 900; font-size: 15px; color: rgba(220, 225, 255, .7); }
#liveViewerView .vlv-board .vlv-b-av { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: inline-flex; background: #6d28d9; }
#liveViewerView .vlv-board .vlv-b-av > * { width: 100% !important; height: 100% !important; font-size: 11px; }
#liveViewerView .vlv-board .vlv-b-av img { object-fit: cover; }
#liveViewerView .vlv-board .vlv-b-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
#liveViewerView .vlv-board .vlv-b-coins { flex: none; font-size: 10.5px; font-weight: 900; color: #ffe27a; }
#liveViewerView .vlv-panel-msg { margin: 6px 2px 0; font-size: 10.5px; text-align: center; color: #fecdd3; }
#liveViewerView .vlv-panel-msg:empty { display: none; }
#liveViewerView .vlv-panel-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#liveViewerView .vlv-coins { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(255, 226, 122, .35); color: #fff; font: inherit; font-size: 12px; cursor: pointer;
  background: rgba(5, 6, 26, .45); }
#liveViewerView .vlv-coins b { color: #ffe27a; font-weight: 900; }
#liveViewerView .vlv-coins span { margin-left: auto; font-size: 10.5px; font-weight: 800; color: #c4b5fd; }
#liveViewerView .vlv-send { width: 100%; height: 42px; border: 0; border-radius: 14px; color: #fff; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
  background: var(--vlv-grad-gift); box-shadow: 0 0 18px rgba(217, 70, 239, .7), inset 0 1px 0 rgba(255, 255, 255, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
#liveViewerView .vlv-send:disabled { opacity: .55; box-shadow: none; }
#liveViewerView .vlv-send:not(:disabled):active { transform: scale(.97); }
#liveViewerView .vlv-send.combo { animation: vlvPulse .9s ease-in-out infinite; }
@keyframes vlvPulse { 50% { box-shadow: 0 0 28px rgba(255, 61, 154, .95); } }

/* ---------- Abajo: comentarios + me gusta + barra ---------- */
#liveViewerView .vlv-bottom { left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 5; gap: 8px; }
#liveViewerView .vlv-mid { position: relative; display: flex; align-items: flex-end; gap: 8px; }
#liveViewerView .vlv-chat { flex: 1; min-width: 0; max-width: 300px; max-height: 30vh; margin: 0; padding: 14px 0 0; list-style: none; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); mask-image: linear-gradient(180deg, transparent 0, #000 22px); }
#liveViewerView .vlv-chat::-webkit-scrollbar { display: none; }
#liveViewerView .vlv-chat > li:first-child { margin-top: auto; }
#liveViewerView .vlv-chat .mp-chat-bubble { display: flex; align-items: flex-start; gap: 7px; align-self: flex-start; max-width: 100%; margin: 0; padding: 5px 11px 5px 5px; border-radius: 16px;
  background: rgba(14, 16, 50, .5); border: 1px solid rgba(167, 150, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; box-shadow: none; animation: vlvIn .25s ease-out; }
@keyframes vlvIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
#liveViewerView .vlv-chat .mp-chat-bubble .mp-avatar-round { flex: none; width: 26px !important; height: 26px !important; font-size: 11px; }
#liveViewerView .vlv-chat .mp-lv-chat-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#liveViewerView .vlv-chat .mp-lv-chat-text strong { font-size: 11.5px; font-weight: 800; color: #a5d8ff; }
#liveViewerView .vlv-chat .mp-lv-chat-text span { font-size: 13px; word-break: break-word; }
#liveViewerView .vlv-chat .mp-lv-notice { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; color: rgba(220, 225, 255, .85); background: rgba(14, 16, 50, .38); }

#liveViewerView .vlv-like { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: auto; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
#liveViewerView .vlv-like-ico { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--vlv-glass); border: 1px solid var(--vlv-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 14px rgba(255, 61, 154, .35); transition: transform .15s; }
#liveViewerView .vlv-like.liked .vlv-like-ico { transform: scale(1.2); }

#liveViewerView .vlv-dock { display: flex; flex-direction: row; align-items: center; gap: 6px; }
#liveViewerView .vlv-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 46px; margin: 0; padding: 0 5px 0 8px; border-radius: 999px; box-sizing: border-box;
  background: var(--vlv-glass); border: 1px solid var(--vlv-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
#liveViewerView .vlv-input .vlv-emoji { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: #c4b5fd; font-size: 0; }
#liveViewerView .vlv-input input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0; background: none !important; box-shadow: none !important; padding: 0 !important; color: #fff !important; font: inherit; font-size: 16px; }
#liveViewerView .vlv-input input::placeholder { color: rgba(220, 225, 255, .62); font-size: 14px; }
#liveViewerView .vlv-send-msg { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--vlv-grad); cursor: pointer; }
#liveViewerView .vlv-input:not(.vlv-typing) .vlv-send-msg { display: none; }
#liveViewerView .vlv-dock-btn { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  background: var(--vlv-glass); border: 1px solid var(--vlv-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 12px rgba(99, 102, 241, .28); }
#liveViewerView .vlv-dock-btn:active, #liveViewerView .vlv-dock-gift:active { transform: scale(.92); }
#liveViewerView .vlv-dock-gift { flex: none; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  background: var(--vlv-grad-gift); box-shadow: 0 0 20px rgba(217, 70, 239, .8), inset 0 1px 0 rgba(255, 255, 255, .4); animation: vlvGlow 2.4s ease-in-out infinite; }
#liveViewerView:not(.vlv-panel-off) .vlv-dock-gift { animation: none; box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(217, 70, 239, .9); }
@keyframes vlvGlow { 50% { box-shadow: 0 0 30px rgba(255, 61, 154, .95), inset 0 1px 0 rgba(255, 255, 255, .4); } }
/* Escribiendo: la barra entera para el mensaje */
#liveViewerView .vlv-dock.vlv-writing .vlv-dock-btn { display: none; }
#liveViewerView .lx-tray { background: rgba(18, 20, 58, .9); border: 1px solid var(--vlv-line); }

/* Hojas propias (⋮, invitar, otros en vivo) */
.vlv-sheet-back { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: flex-end; justify-content: center; background: rgba(3, 4, 20, .55); }
.vlv-sheet { width: 100%; max-width: 520px; max-height: 78vh; overflow-y: auto; box-sizing: border-box; padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 16px); border-radius: 24px 24px 0 0; color: #fff;
  background: linear-gradient(180deg, #1c1f5e, #0d1036); border: 1px solid rgba(167, 150, 255, .35); border-bottom: 0; box-shadow: 0 -10px 40px rgba(139, 92, 246, .35); animation: vlvUp .22s ease-out; }
@keyframes vlvUp { from { transform: translateY(100%); } to { transform: none; } }
.vlv-sheet-grip { width: 42px; height: 5px; margin: 0 auto 10px; border-radius: 99px; background: rgba(255, 255, 255, .25); }
.vlv-sheet h3 { margin: 2px 4px 4px; font-size: 17px; }
.vlv-sheet > p { margin: 0 4px 10px; font-size: 13px; color: rgba(220, 225, 255, .75); }
.vlv-sheet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vlv-sheet-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(167, 150, 255, .18); background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.vlv-sheet-item:active { background: rgba(139, 92, 246, .25); }
.vlv-sheet-item .vlv-si-ico { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(139, 92, 246, .25); overflow: hidden; }
.vlv-sheet-item .vlv-si-ico > * { width: 100% !important; height: 100% !important; }
.vlv-sheet-item .vlv-si-ico img { object-fit: cover; }
.vlv-sheet-item .vlv-si-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vlv-sheet-item .vlv-si-text small { font-size: 12px; font-weight: 600; color: rgba(220, 225, 255, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vlv-sheet-item .vlv-si-go { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 900; background: linear-gradient(135deg, #3b82f6, #8b5cf6 50%, #d946ef); }
.vlv-sheet-item .vlv-si-go.done { background: rgba(255, 255, 255, .14); }
.vlv-sheet-item.danger { color: #fda4af; }
.vlv-sheet-search { width: 100%; box-sizing: border-box; height: 42px; margin: 0 0 10px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(167, 150, 255, .3); background: rgba(5, 6, 26, .45); color: #fff; font: inherit; font-size: 15px; outline: none; }
.vlv-sheet-empty { padding: 18px 8px; text-align: center; color: rgba(220, 225, 255, .7); font-size: 13.5px; }
.vlv-sheet-cancel { width: 100%; margin-top: 10px; height: 46px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }

/* Teléfonos angostos */
@media (max-width: 380px) {
  #liveViewerView .vlv-panel { width: 176px; }
  #liveViewerView .vlv-tabs button { font-size: 9.8px; }
  #liveViewerView .vlv-gift-ico { font-size: 24px; }
  #liveViewerView .vlv-dock { gap: 5px; }
  #liveViewerView .vlv-dock-btn { width: 38px; height: 38px; }
  #liveViewerView .vlv-dock-gift { width: 46px; height: 46px; }
  #liveViewerView .vlv-top1-txt small { display: none; }
  #liveViewerView .vlv-logo i { display: none; }
}
/* Pantallas bajas: el panel más arriba y los comentarios más cortos */
@media (max-height: 700px) {
  #liveViewerView .vlv-panel { top: calc(env(safe-area-inset-top, 0px) + 150px); }
  #liveViewerView .vlv-chat { max-height: 24vh; }
  #liveViewerView .lx-gifts { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px + 17vh); }
}
/* Computador / tableta: la transmisión centrada como un teléfono grande, con el fondo azul alrededor */
@media (min-width: 900px) {
  #liveViewerView.vlv .mp-live-bg-video { object-fit: contain; }
  #liveViewerView .vlv-panel { width: 236px; right: 22px; top: 150px; }
  #liveViewerView:not(.vlv-panel-off) .lx-gifts { right: 280px; }
  #liveViewerView .vlv-gift-ico { font-size: 32px; }
  #liveViewerView .vlv-gift-name, #liveViewerView .vlv-gift-price { font-size: 11.5px; }
  #liveViewerView .vlv-tabs button { font-size: 12px; height: 28px; }
  #liveViewerView .vlv-head { padding: 14px 22px 0; }
  #liveViewerView .vlv-bottom { left: 22px; right: 22px; max-width: 760px; }
  #liveViewerView .vlv-chat { max-width: 380px; }
  #liveViewerView .lx-hud { left: 22px; }
}