/* ═══════════════════════════════════════════════════════════════
   KAPI VENTANILLAS v2 (fase VISUAL)
   - Emojis de reacción: del lado izquierdo al DOCK derecho, encima del micrófono (solo quien transmite)
   - Columna vertical de ventanillas (máx. 10) a la izquierda
   - Modal "Invitar a ventanilla"
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Emojis dentro del dock del transmisor, arriba del micrófono ─── */
#streaming-stage .broadcaster-controls-bar #live-reactions-bar {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 0 0 6px 0 !important;
    margin: 0 0 2px 0 !important;
    width: 100%;
    z-index: auto !important;
}

#streaming-stage .broadcaster-controls-bar #live-reactions-bar .reaction-live-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    border-radius: 50% !important;
    flex-shrink: 0;
}

@media (max-height: 700px) {
    #streaming-stage .broadcaster-controls-bar #live-reactions-bar .reaction-live-btn {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        font-size: 11px !important;
    }
}

/* ─── 2. Columna de ventanillas (izquierda) ─── */
#kapi-vent-col {
    position: absolute;
    left: 6px;
    top: 112px;
    max-height: calc(100% - 340px);
    display: none;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    z-index: 56;
    padding: 2px 0;
}

#kapi-vent-col::-webkit-scrollbar { display: none; }

#streaming-stage.kapi-role-broadcaster #kapi-vent-col.has-items,
#streaming-stage.kapi-role-viewer #kapi-vent-col.has-items {
    display: flex;
}

.kapi-vent-count {
    align-self: flex-start;
    font-size: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 10px;
    padding: 2px 7px;
    flex-shrink: 0;
}

.kapi-vent {
    position: relative;
    width: 56px;
    height: 76px;
    border-radius: 9px;
    background: #2a2e38;
    border: 1px solid rgba(255, 255, 255, 0.22);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kapi-vent-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3b4a63;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kapi-vent video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kapi-vent-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 17px;
    padding: 0 3px;
    font-size: 9px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kapi-vent-ctrl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.6);
}

.kapi-vent-ctrl button {
    background: none;
    border: none;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.kapi-vent-ctrl .material-icons { font-size: 13px; }
.kapi-vent-ctrl button.off { color: #ff6b6b; }
.kapi-vent.cam-off .kapi-vent-avatar { opacity: 0.55; }

/* ─── 3. Modal invitar a ventanilla ─── */
#kapiVentModal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kvm-box {
    background: #0a1220;
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 14px;
    width: 320px;
    max-width: 92vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
}

.kvm-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
}

.kvm-head b { font-size: 13px; letter-spacing: 1px; color: #00e5ff; }
.kvm-head span { font-size: 11px; color: #9aa; margin-left: 8px; }
.kvm-x { background: none; border: none; color: #aaa; font-size: 16px; cursor: pointer; }

.kvm-tabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.kvm-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #8a96a6;
    font-size: 12px;
    padding: 10px 4px;
    cursor: pointer;
}

.kvm-tab.active { color: #00e5ff; border-bottom-color: #00e5ff; }

.kvm-list { overflow-y: auto; flex: 1; min-height: 120px; }

.kvm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.kvm-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1d2c44;
    color: #00e5ff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kvm-name {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kvm-btn {
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: #00e5ff;
    border-radius: 12px;
    padding: 5px 14px;
    font-size: 12px;
    cursor: pointer;
}

.kvm-btn[disabled] { opacity: 0.55; cursor: default; }

.kvm-empty { padding: 26px 16px; text-align: center; color: #778; font-size: 12px; }

.kvm-foot {
    padding: 8px 14px;
    font-size: 11px;
    color: #8a96a6;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

/* ─── 4. Mi cuadrito ("Tú") y nombres sin controles (espectador) ─── */
.kapi-vent.me { border: 2px solid #00e5ff; }
.kapi-vent-name.no-ctrl { bottom: 3px; }
.kapi-vent-flags {
    position: absolute;
    top: 3px;
    right: 3px;
    color: #ff6b6b;
    line-height: 1;
}
.kapi-vent-flags .material-icons { font-size: 13px; }

/* ─── 5. Espectador: botón de ventanilla arriba de la rosa ─── */
#kapi-vent-mic, #kapi-vent-cam { display: none; }
#streaming-stage.kapi-vent-up #kapi-vent-mic,
#streaming-stage.kapi-vent-up #kapi-vent-cam { display: flex; }

#kapi-vent-btn .material-icons { color: #fff; }
#kapi-vent-btn.is-pending { background: #b7791f; }
#kapi-vent-btn.is-up { background: #d93a4a; }
#kapi-vent-mic .material-icons,
#kapi-vent-cam .material-icons { color: #fff; }
#kapi-vent-mic, #kapi-vent-cam { background: #1d9e75; }
#kapi-vent-mic.off, #kapi-vent-cam.off { background: rgba(20, 20, 20, 0.65); }
#kapi-vent-mic.off .material-icons,
#kapi-vent-cam.off .material-icons { color: #ff6b6b; }

/* Barra de emojis oculta mientras el espectador está en ventanilla
   (gana a la regla nativa por especificidad) */
html #streaming-stage.kapi-vent-up #live-reactions-bar { display: none !important; }

/* ─── 6. Transmisor: contador en el botón y aviso en pantalla ─── */
#kapi-pip-btn { position: relative; }
.kapi-vent-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 15px;
    height: 15px;
    border-radius: 8px;
    background: #d93a4a;
    color: #fff;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    padding: 0 3px;
    box-sizing: border-box;
}

.kapi-vent-aviso {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 18, 32, 0.92);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 18px;
    padding: 6px 8px 6px 14px;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    max-width: 94%;
}
.kva-t { overflow: hidden; text-overflow: ellipsis; }
.kva-ok {
    background: rgba(0, 229, 255, 0.15);
    border: 1px solid rgba(0, 229, 255, 0.45);
    color: #00e5ff;
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 12px;
}
.kva-x { background: none; border: none; color: #aaa; font-size: 14px; padding: 0 4px; }

/* ─── 7. Modal: 3 pestañas, rechazar solicitud, enlace de prueba ─── */
.kvm-tab { font-size: 11px; padding: 10px 2px; }
.kvm-rej { background: none; border: none; color: #ff6b6b; font-size: 14px; padding: 2px 6px; cursor: pointer; }
.kvm-foot a { color: #00e5ff; text-decoration: underline; }

/* ─── 8. Video real dentro de cada ventanilla ─── */
.kapi-vent video { display: none; }
.kapi-vent.has-video:not(.cam-off) video { display: block; }
.kapi-vent.has-video:not(.cam-off) .kapi-vent-avatar { display: none; }
.kapi-vent.me video { transform: scaleX(-1); }

/* ─── 9. Con la rosa visible + micrófono + cámara + ventanilla (7 botones) en pantallas bajas ─── */
@media (max-height: 760px) {
    #streaming-stage.kapi-vent-up .kapi-viewer-actions { gap: 6px; }
    #streaming-stage.kapi-vent-up .kapi-viewer-actions .kapi-side-btn { width: 36px; height: 36px; }
    #streaming-stage.kapi-vent-up .kapi-viewer-actions .kapi-quick-gift { width: 32px; height: 32px; }
}

/* ─── 10. Abanico "+" del transmisor: va POR ENCIMA del dock (los emojis son solo visuales, quedan debajo) ─── */
#streaming-stage .kapi-fan-menu { z-index: 650; }
#streaming-stage:has(#kapi-fan-menu.open) .broadcaster-controls-bar #live-reactions-bar { opacity: 0.25; pointer-events: none; transition: opacity 0.2s ease; }

/* ─── 11. Invitación a subir (espectador): Aceptar / Rechazar ─── */
.kapi-vent-aviso.inv { flex-wrap: wrap; justify-content: center; white-space: normal; max-width: 90%; padding: 8px 12px; text-align: center; }
.kapi-vent-aviso.inv .kva-t { flex: 1 1 100%; overflow: visible; }
.kapi-vent-aviso .kva-btns { display: flex; gap: 8px; }
.kva-no {
    background: rgba(255, 107, 107, 0.15);
    border: 1px solid rgba(255, 107, 107, 0.5);
    color: #ff6b6b;
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 12px;
}

/* ─── 12. Botón Seguir / Siguiendo ─── */
#streaming-stage .kapi-follow-btn.is-following {
    background: #333;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   13. DISTRIBUCIÓN FIJA DE LA IZQUIERDA (de arriba hacia abajo)
       · HUD (foto, alias, ❤)                      → arriba
       · Íconos de minijuegos (hasta 3, en fila)   → justo debajo del HUD
       · Columna de ventanillas (con scroll)       → entre los íconos y el chat
       · Chat del live                             → desde la altura del botón del
                                                     micrófono hasta la caja de escribir
   Cada zona tiene su propio tramo: nada se pisa, haya 0 o 10 ventanillas.
   ═══════════════════════════════════════════════════════════════ */
#streaming-stage {
    /* base del dock del transmisor y altura de sus 7 botones (de la base al borde de arriba del micrófono) */
    --kapi-dock-bottom: max(80px, calc(env(safe-area-inset-bottom) + 80px));
    --kapi-chat-h: min(calc(var(--kapi-dock-bottom) + 309px), calc(100% - 340px));
    --kapi-left-top: 112px;
}
#streaming-stage.kapi-has-fabs { --kapi-left-top: 172px; }

/* Ventanillas: arrancan bajo el HUD (o bajo los íconos de minijuegos) y terminan donde empieza el chat */
#streaming-stage #kapi-vent-col {
    top: var(--kapi-left-top);
    max-height: calc(100% - var(--kapi-left-top) - var(--kapi-chat-h) - 8px);
}

/* Íconos de minijuegos: fila compacta bajo el HUD (caben 3), ya no flotan a media altura */
#streaming-stage #kmg-fabs {
    top: 104px !important;
    left: 8px !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 6px !important;
    max-width: calc(100% - 80px);
}
#streaming-stage #kmg-fabs .kmg-fab {
    min-width: 54px !important;
    padding: 5px 6px !important;
    font-size: 1.05rem !important;
    border-radius: 14px !important;
}
#streaming-stage #kmg-fabs .kmg-fab span,
#streaming-stage #kmg-fabs .kmg-fab em { font-size: 0.56rem !important; }

/* Chat: más alto (arranca a la altura del micrófono) */
html.kapi-native-app .app-container.streaming-active #pro-chat-sidebar {
    height: var(--kapi-chat-h) !important;
    max-height: var(--kapi-chat-h) !important;
}
/* los mensajes se pegan abajo, junto a la caja de escribir, aunque haya pocos */
#streaming-stage #pro-chat-messages::before { content: ''; margin-top: auto; flex: 0 0 0; }
/* el transmisor no tiene columna de emojis a la izquierda: su chat usa todo el ancho */
html.kapi-native-app #streaming-stage.kapi-role-broadcaster #pro-chat-messages { padding-left: 12px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   [KAPI-DISENOS] Ventanillas con diseños: la columna ahora cubre todo el live
   (sin tocar nada) y cada ventanilla se coloca con tamaño automático desde JS.
   Van POR ENCIMA del chat y se achican solas al subir más gente.
   ═══════════════════════════════════════════════════════════════════════════ */
#streaming-stage #kapi-vent-col {
    position: absolute !important;
    left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    gap: 0 !important;
    pointer-events: none;
    z-index: 62;
}
#streaming-stage #kapi-vent-col .kapi-vent {
    position: absolute;
    pointer-events: auto;
    flex-shrink: 0;
}
#streaming-stage #kapi-vent-col .kapi-vent-avatar {
    width: calc(30px * var(--kv-s, 1));
    height: calc(30px * var(--kv-s, 1));
    font-size: calc(13px * var(--kv-s, 1));
}
#streaming-stage #kapi-vent-col .kapi-vent-name { font-size: calc(9px * var(--kv-s, 1)); }
#streaming-stage #kapi-vent-col .kapi-vent.kv-sm .kapi-vent-name { display: none; }
#streaming-stage #kapi-vent-col .kapi-vent.kv-sm .kapi-vent-ctrl [data-act="mic"],
#streaming-stage #kapi-vent-col .kapi-vent.kv-sm .kapi-vent-ctrl [data-act="cam"] { display: none; }

/* Botón "+" para seguir, dentro del cuadrito */
.kapi-vent-follow {
    position: absolute;
    top: 4px; right: 4px;
    width: var(--kv-fs, 26px);
    height: var(--kv-fs, 26px);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 0;
    background: linear-gradient(135deg, #ff2d78, #ec4899);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    z-index: 3;
    cursor: pointer;
}
.kapi-vent-follow .material-icons { font-size: calc(var(--kv-fs, 26px) * 0.7); line-height: 1; }
.kapi-vent-follow:active { transform: scale(0.9); }
.kapi-vent-follow.on { background: #1d9e75; pointer-events: none; }

/* Host: el video se acomoda en su rectángulo según el diseño (la regla gana a las de pantalla completa) */
html .app-container.streaming-active #streaming-stage.kv-lay[data-kv-layout]:not(.kapi-battle-active) > #pro-main-stream-video,
html .app-container.streaming-active #streaming-stage.kv-lay[data-kv-layout]:not(.kapi-battle-active) > #stream-preview-local,
html .app-container.streaming-active #streaming-stage.kv-lay[data-kv-layout]:not(.kapi-battle-active) > #kapi-watermark-canvas {
    top: var(--kv-ht) !important;
    left: var(--kv-hl) !important;
    width: var(--kv-hw) !important;
    height: var(--kv-hh) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

/* Botón del selector en el abanico (+): solo el transmisor */
.kapi-fan-layout { background: #f59e0b; }
#streaming-stage.kapi-role-viewer .kapi-fan-layout { display: none; }

/* Hoja "Diseño" */
#kapiLayoutSheet { position: absolute; inset: 0; z-index: 700; display: flex; align-items: flex-end; }
#kapiLayoutSheet .kls-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
#kapiLayoutSheet .kls-box {
    position: relative;
    width: 100%;
    max-height: 66%;
    overflow-y: auto;
    background: #fff;
    color: #111;
    border-radius: 20px 20px 0 0;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
    animation: klsUp 0.22s ease-out;
}
@keyframes klsUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
#kapiLayoutSheet .kls-head { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; }
#kapiLayoutSheet .kls-head b { font-size: 17px; font-weight: 700; }
#kapiLayoutSheet .kls-x {
    position: absolute; left: 0; top: 4px; width: 36px; height: 36px; border-radius: 50%;
    border: none; background: #f1f1f1; color: #111; display: flex; align-items: center; justify-content: center;
}
#kapiLayoutSheet .kls-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; margin-top: 10px; }
#kapiLayoutSheet .kls-card { background: none; border: none; padding: 0; color: #111; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
#kapiLayoutSheet .kls-ico { display: block; width: 100%; max-width: 74px; }
#kapiLayoutSheet .kls-name { font-size: 12px; line-height: 1.15; text-align: center; }
#kapiLayoutSheet .kls-card.sel .kls-name { font-weight: 700; }
#kapiLayoutSheet .kls-note { margin: 14px 4px 0; font-size: 12px; color: #777; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   [KAPI-BARRAS-ACOSTADAS] (18-oct-2026)
   Las dos barras de botones (emojis + micrófono/cámara/ventanilla/VS/juegos/regalos/finalizar)
   ya no son columnas verticales a la derecha que tapaban las ventanillas: se acuestan en
   horizontal, justo encima de la caja de escribir (donde salen los avisos "se unió al stream").
   Las ventanillas se acomodan solas ENCIMA de ellas (ver reservaAbajo() en kapi-ventanillas.js).
   Si no se usan se ponen semitransparentes y se avivan al tocarlas.
   ═══════════════════════════════════════════════════════════════════════════ */
#streaming-stage { --kapi-dock-h: 84px; }   /* alto de la barra acostada (2 filas) */

/* Transmisor: una sola barra acostada con dos filas (emojis arriba, botones abajo) */
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar {
    left: 6px !important;
    right: 6px !important;
    width: auto !important;
    bottom: var(--kapi-dock-bottom) !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
    padding: 5px 8px 6px;
    border-radius: 18px;
    background: rgba(20, 20, 20, 0.5);
    opacity: 0.55;
    transition: opacity 0.25s ease;
}
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar.kv-awake,
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar:focus-within { opacity: 1; }

/* fila de emojis: ocupa todo el ancho de la barra, en horizontal */
html.kapi-native-app #streaming-stage .broadcaster-controls-bar #live-reactions-bar {
    flex: 1 1 100% !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 0 4px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-right: none !important;
}

/* En pantallas angostas los botones se achican un poco para que quepan los 7 en una fila */
@media (max-width: 360px) {
    #streaming-stage .broadcaster-controls-bar #toggle-mic-stream-btn,
    #streaming-stage .broadcaster-controls-bar #toggle-camera-stream-btn,
    #streaming-stage .broadcaster-controls-bar #kapi-pip-btn,
    #streaming-stage .broadcaster-controls-bar #kapi-battle-btn,
    #streaming-stage .broadcaster-controls-bar #kapi-host-gifts-btn,
    #streaming-stage .broadcaster-controls-bar #pro-leave-btn { width: 32px; height: 32px; }
    html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar { gap: 4px 5px; }
}

/* Espectador: sus botones (rosa, regalos, historial, compartir) también se acuestan abajo a la derecha */
html.kapi-native-app #streaming-stage.kapi-role-viewer .kapi-viewer-actions {
    flex-direction: row;
    gap: 8px;
    right: 6px;
    bottom: var(--kapi-dock-bottom);
    padding: 4px 8px;
    border-radius: 22px;
    background: rgba(20, 20, 20, 0.4);
    opacity: 0.6;
    transition: opacity 0.25s ease;
}
html.kapi-native-app #streaming-stage.kapi-role-viewer .kapi-viewer-actions.kv-awake { opacity: 1; }

/* el chat deja libre el sitio de la barra (los mensajes terminan encima de ella, no debajo) */
html.kapi-native-app #streaming-stage.kapi-role-broadcaster #pro-chat-messages { padding-bottom: calc(var(--kapi-dock-bottom) + var(--kapi-dock-h) + 8px) !important; }
/* el aviso flotante de "X se unió" sube sobre la barra */
html.kapi-native-app #streaming-stage.kapi-role-broadcaster #viewer-join-notification { bottom: calc(var(--kapi-dock-bottom) + var(--kapi-dock-h) + 6px); }

/* ═══════════════════════════════════════════════════════════════════════════
   [KAPI-SEGUIR-CONTADOR] Seguir: chulito un instante → contador de seguidores
   ═══════════════════════════════════════════════════════════════════════════ */
/* Arriba, junto al nombre (también lo ve el que transmite, con sus propios seguidores) */
#streaming-stage .kapi-follow-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 10px;
    pointer-events: none;
}
#streaming-stage .kapi-follow-count .material-icons { font-size: 12px; color: #00e5ff; }
#streaming-stage .kapi-follow-count b { font-weight: 700; }
/* en el que transmite el botón sigue oculto (ya existía esa regla); el contador sí se ve */
#streaming-stage.kapi-role-broadcaster .kapi-follow-count { display: inline-flex !important; }
#streaming-stage .kapi-follow-count[style*="display: none"] { display: none !important; }

/* Chulito al seguir (cuadrito de la ventanilla) y luego contador en el mismo sitio */
.kapi-vent-follow.on { animation: kvChulo 0.35s ease-out; }
@keyframes kvChulo { 0% { transform: scale(0.6); opacity: 0.4; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
/* (el contador viejo .kapi-vent-cnt con el total de seguidores se reemplazó por .kapi-vent-seg: seguidores NUEVOS de este live) */


/* ═══════════════════════════════════════════════════════════════════════════
   [KAPI-BARRA-UNICA] (18-oct-2026)
   • Transmisor: UNA sola barra horizontal con los 13 elementos (6 emojis + 7 botones).
     Los emojis pasan a ser hijos directos de la barra (display: contents) y todo se reparte el ancho.
     Si no se usa se ve tenue; se aviva 3,5 s al tocarla (ya existía kv-awake).
   • Junto al nombre ya NO va el contador de seguidores (solo Seguir / Siguiendo ✓).
   • (El marcador de la esquina superior derecha se quitó: ahora cada cuadrito muestra su KC y sus seguidores nuevos.)
   ═══════════════════════════════════════════════════════════════════════════ */
#streaming-stage { --kapi-dock-h: 46px; }   /* alto de la barra de una sola fila */

html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 3px !important;
    left: 4px !important;
    right: 4px !important;
    padding: 5px 6px !important;
    border-radius: 22px !important;
}
/* los 6 emojis se vuelven hijos directos de la barra */
html.kapi-native-app #streaming-stage .broadcaster-controls-bar #live-reactions-bar {
    display: contents !important;
    border: none !important;
}
/* emojis: cada uno toma una parte igual del ancho */
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #live-reactions-bar .reaction-live-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 30px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: clamp(10px, 3.3vw, 14px) !important;
    line-height: 1 !important;
}
/* botones de control: un poco más grandes que los emojis */
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #toggle-mic-stream-btn,
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #toggle-camera-stream-btn,
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #kapi-pip-btn,
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #kapi-battle-btn,
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #kapi-games-btn,
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #kapi-host-gifts-btn,
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #pro-leave-btn {
    flex: 1.35 1 0 !important;
    min-width: 0 !important;
    max-width: 36px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar > button .material-icons { font-size: clamp(12px, 4.3vw, 17px) !important; }
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar .kapi-vs-label { font-size: clamp(8px, 2.9vw, 12px) !important; }
/* rayita fina entre los emojis y los botones */
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #live-reactions-bar .reaction-live-btn:last-child { position: relative; margin-right: 4px !important; }
html.kapi-native-app #streaming-stage.kapi-role-broadcaster .broadcaster-controls-bar #live-reactions-bar .reaction-live-btn:last-child::after {
    content: ''; position: absolute; right: -5px; top: 18%; bottom: 18%; width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* Junto al nombre: sin contador de seguidores */
html #streaming-stage .kapi-follow-count,
html #streaming-stage.kapi-role-broadcaster .kapi-follow-count { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   [KAPI-CONTADOR-POR-PERSONA] (18-oct-2026)
   Cuadrito: KC del live (arriba izquierda) y seguidores nuevos del live (arriba derecha).
   Persona elegida: borde azul. Panel de regalos: "Regalo para X" + botón Cambiar. Selector de persona.
   ═══════════════════════════════════════════════════════════════════════════ */
.kapi-vent-kc, .kapi-vent-seg {
    position: absolute;
    top: 3px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: calc(50% - 4px);
    padding: 1px calc(3px * var(--kv-s, 1));
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    font-size: calc(8.5px * var(--kv-s, 1));
    line-height: 1.3;
    pointer-events: none;
    white-space: nowrap;
}
.kapi-vent-kc { left: 3px; max-width: calc(58% - 4px); }
.kapi-vent-seg { right: 3px; max-width: calc(50% - 2px); }
.kapi-vent-kc i { font-style: normal; font-size: calc(8.5px * var(--kv-s, 1)); line-height: 1; }
.kapi-vent-seg .material-icons { font-size: calc(9px * var(--kv-s, 1)); color: #00e5ff; line-height: 1; }
.kapi-vent-kc b, .kapi-vent-seg b { font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.kapi-vent.kv-sm .kapi-vent-seg .material-icons { display: none; }
.kapi-vent-seg b, .kapi-vent-kc b { min-width: 0; }
/* el botón "+" de seguir baja debajo de las esquinas para no taparlas */
.kapi-vent .kapi-vent-follow { top: auto; bottom: 3px; right: 3px; }
/* el estado de mic/cámara apagados (espectador) pasa abajo a la izquierda */
.kapi-vent-flags { top: auto; right: auto; left: 3px; bottom: calc(15px * var(--kv-s, 1)); }

.kapi-vent.sel {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.9), 0 0 12px rgba(59, 130, 246, 0.85);
}

/* Panel de regalos: fila "Cambiar" bajo el título "Regalo para X" */
.kapi-gift-para { display: flex; justify-content: flex-end; padding: 2px 12px 4px; }
.kapi-gift-para button {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid rgba(96, 165, 250, 0.7);
    background: rgba(59, 130, 246, 0.16);
    color: #bfdbfe;
    border-radius: 16px;
    padding: 4px 11px 4px 8px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.kapi-gift-para button .material-icons { font-size: 16px; }
.kapi-gift-para button:active { transform: scale(0.96); }

/* Selector de persona (hoja desde abajo) */
#kapiPersonaSheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
#kapiPersonaSheet .kps-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
#kapiPersonaSheet .kps-box {
    position: relative; width: min(440px, 100%); max-height: 70vh; display: flex; flex-direction: column;
    background: #121821; border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: none;
    border-radius: 18px 18px 0 0; color: #fff; overflow: hidden;
}
#kapiPersonaSheet .kps-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: 15px; }
#kapiPersonaSheet .kps-x { background: none; border: none; color: #8a96a6; font-size: 18px; cursor: pointer; }
#kapiPersonaSheet .kps-list { overflow-y: auto; padding: 4px 10px; }
#kapiPersonaSheet .kps-row {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; border-radius: 12px;
    padding: 9px 10px; margin: 5px 0; color: #fff; cursor: pointer;
}
#kapiPersonaSheet .kps-row.sel { border-color: #3b82f6; background: rgba(59, 130, 246, 0.16); }
#kapiPersonaSheet .kps-av {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: #3b4a63;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
#kapiPersonaSheet .kps-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#kapiPersonaSheet .kps-nm b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kapiPersonaSheet .kps-nm small { font-size: 11px; color: #8a96a6; }
#kapiPersonaSheet .kps-kc { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffd166; }
#kapiPersonaSheet .kps-ck { color: #60a5fa; font-size: 20px; }
#kapiPersonaSheet .kps-note { margin: 0; padding: 8px 16px 16px; font-size: 11px; color: #8a96a6; text-align: center; }


/* Selector de persona DENTRO del panel de regalos (no queda detrás ni tapa el panel entero) */
#kapiPersonaSheet.kps-in { position: absolute; inset: 0; z-index: 30; align-items: flex-end; }
#kapiPersonaSheet.kps-in .kps-box { width: 100%; max-height: 100%; border-radius: 14px 14px 0 0; }

/* Confirmación "¿Dejar de seguir?" */
#kapiDejarDlg { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; }
#kapiDejarDlg .kvd-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
#kapiDejarDlg .kvd-box {
    position: relative; width: min(320px, 88%); background: #121821; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; padding: 18px 16px 14px; text-align: center;
}
#kapiDejarDlg .kvd-box p { margin: 0 0 14px; font-size: 14px; line-height: 1.35; }
#kapiDejarDlg .kvd-btns { display: flex; gap: 10px; }
#kapiDejarDlg .kvd-btns button {
    flex: 1; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff;
    border-radius: 12px; padding: 9px 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
#kapiDejarDlg .kvd-btns button.si { background: #dc2626; border-color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════════
   [KAPI-ESQUINAS-ANFITRION] (19-oct-2026)
   Las dos pastillas (regalos/KC del live y seguidores nuevos del live) van DENTRO del recuadro grande del anfitrión,
   en sus esquinas de arriba (igual que en los cuadritos), no en la cabecera ni en el borde de la pantalla.
   El contenedor copia el rectángulo del video del anfitrión (--kv-hl/ht/hw/hh); sin diseño usa toda la pantalla bajo la cabecera.
   Si no lo sigues: muñequito con una crucecita en su esquina de abajo. Si lo sigues: los dos muñequitos.
   ═══════════════════════════════════════════════════════════════════════════ */
#kapi-host-corners {
    position: absolute;
    left: 0; right: 0;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    bottom: auto; height: 0;
    z-index: 63;
    pointer-events: none;
}
#streaming-stage.kv-lay[data-kv-layout]:not(.kapi-battle-active) #kapi-host-corners {
    left: var(--kv-hl, 0px);
    top: var(--kv-ht, 0px);
    width: var(--kv-hw, 100%);
    height: var(--kv-hh, 100%);
    right: auto;
}
#kapi-host-corners .kapi-vent-kc,
#kapi-host-corners .kapi-vent-seg {
    position: absolute;
    top: 6px;
    max-width: calc(50% - 10px);
    font-size: 11px;
    padding: 2px 8px;
    gap: 4px;
}
#kapi-host-corners .kapi-vent-kc { left: 6px; }
#kapi-host-corners .kapi-vent-seg { right: 6px; }
#kapi-host-corners .kapi-vent-kc i { font-size: 11px; }
#kapi-host-corners .kapi-vent-seg .material-icons { font-size: 14px; display: inline-block; color: #00e5ff; }
#kapi-host-corners .kapi-seg-ic { position: relative; display: inline-flex; line-height: 1; }
#kapi-host-corners .kapi-seg-plus {
    position: absolute;
    right: -4px; bottom: -4px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ff2d78;
    color: #fff;
    font-size: 9px; font-weight: 800; line-height: 9px; text-align: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   [KAPI-ESQUINAS-ABAJO] (19-oct-2026)
   Cada caja (anfitrión y cada ventanilla) lleva 4 esquinas:
     arriba izquierda: regalito con los KC del live   arriba derecha: seguidores nuevos del live (muñequito)
     abajo izquierda: ojito (cuántos miran a ESA persona)   abajo derecha: crucecita de seguir (lo único que se toca)
   ═══════════════════════════════════════════════════════════════════════════ */
.kapi-vent-ojo {
    position: absolute;
    left: 3px; bottom: 3px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 2px;
    max-width: calc(50% - 4px);
    padding: 1px calc(3px * var(--kv-s, 1));
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    font-size: calc(8.5px * var(--kv-s, 1));
    line-height: 1.3;
    pointer-events: none;
    white-space: nowrap;
}
.kapi-vent-ojo .material-icons { font-size: calc(9px * var(--kv-s, 1)); color: #ffd36b; line-height: 1; }
.kapi-vent-ojo b { font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kapi-vent.kv-sm .kapi-vent-ojo .material-icons { display: none; }
/* el nombre queda al centro, entre el ojito y la crucecita */
#streaming-stage #kapi-vent-col .kapi-vent-name.no-ctrl { bottom: 3px; padding: 0 calc(26px * var(--kv-s, 1)); }
/* controles del anfitrión (micrófono, cámara, bajar): suben debajo de las pastillas de arriba */
#streaming-stage #kapi-vent-col .kapi-vent-ctrl {
    top: calc(17px * var(--kv-s, 1)); bottom: auto; left: 3px; right: 3px; height: 17px; border-radius: 9px;
}
/* la crucecita de seguir: abajo a la derecha */
#streaming-stage #kapi-vent-col .kapi-vent .kapi-vent-follow { top: auto; bottom: 3px; right: 3px; }

/* Recuadro grande del anfitrión: las cuatro esquinas dentro de su rectángulo */
#kapi-host-corners {
    bottom: auto;
}
#streaming-stage:not(.kv-lay) #kapi-host-corners {
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    bottom: calc(var(--kapi-chat-h, 340px) + 8px);
    height: auto;
}
#kapi-host-corners .kapi-vent-ojo { position: absolute; left: 6px; bottom: 6px; font-size: 11px; padding: 2px 8px; gap: 4px; }
#kapi-host-corners .kapi-vent-ojo .material-icons { font-size: 13px; }
#kapi-host-corners .kapi-host-follow {
    position: absolute;
    right: 6px; bottom: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 0;
    background: linear-gradient(135deg, #ff2d78, #ec4899);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
    cursor: pointer;
}
#kapi-host-corners .kapi-host-follow .material-icons { font-size: 18px; line-height: 1; }
#kapi-host-corners .kapi-host-follow:active { transform: scale(0.9); }


/* ═══════════════════════════════════════════════════════════════════════════
   [KAPI-AJUSTES-20-OCT] (20-oct-2026)
   1) Cuadrito del anfitrión con controles: la barrita de micrófono / cámara / bajar va pegada al borde de abajo del
      cuadrito; el ojito, el nombre y la crucecita quedan justo encima de ella.
   2) Web: el dock del transmisor se acuesta (como en la app) en vez de ir vertical a la derecha.
   3) App, espectador: la barra de abajo trae también los emojis de reacción (sin VS ni minijuegos, que son del anfitrión).
   4) Botón de regalo del anfitrión: apagado si nadie está en ventanilla; con ventanillas, regala a ESA persona.
   5) Ruleta y Tip Menu un poquito más chicos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ── barrita de controles al ras del borde de abajo del cuadrito */
#streaming-stage #kapi-vent-col .kapi-vent.has-ctrl .kapi-vent-ctrl {
    top: auto; bottom: 0; left: 0; right: 0;
    height: 17px;
    border-radius: 0 0 8px 8px;
}
#streaming-stage #kapi-vent-col .kapi-vent.has-ctrl .kapi-vent-ojo,
#streaming-stage #kapi-vent-col .kapi-vent.has-ctrl .kapi-vent-follow,
#streaming-stage #kapi-vent-col .kapi-vent.has-ctrl .kapi-vent-name.no-ctrl { bottom: 20px; }

/* 2 ── web: dock del transmisor acostado, centrado abajo (en la app ya estaba así) */
html:not(.kapi-native-app) #streaming-stage .broadcaster-controls-bar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 16px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    border-radius: 26px !important;
    width: auto !important;
    max-width: calc(100% - 12px);
}

/* 3 ── app, espectador: una sola fila con emojis + botones, igual que el anfitrión */
html.kapi-native-app #streaming-stage.kapi-role-viewer .kapi-viewer-actions {
    left: 4px;
    right: 4px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 3px;
    padding: 5px 6px;
    border-radius: 22px;
}
html.kapi-native-app #streaming-stage .kapi-viewer-actions #live-reactions-bar {
    position: static !important;
    display: contents !important;
    background: none !important;
    border: none !important;
}
html.kapi-native-app #streaming-stage .kapi-viewer-actions #live-reactions-bar .reaction-live-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 30px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    font-size: clamp(10px, 3.3vw, 14px) !important;
    line-height: 1 !important;
}
html.kapi-native-app #streaming-stage .kapi-viewer-actions > .kapi-side-btn:not(#kapi-gift-btn),
html.kapi-native-app #streaming-stage .kapi-viewer-actions > .kapi-vent-btn,
html.kapi-native-app #streaming-stage .kapi-viewer-actions > .kapi-vent-mic,
html.kapi-native-app #streaming-stage .kapi-viewer-actions > .kapi-vent-cam {
    flex: 1.35 1 0 !important;
    min-width: 0 !important;
    max-width: 36px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
}
html.kapi-native-app #streaming-stage .kapi-viewer-actions > button .material-icons { font-size: clamp(12px, 4.3vw, 17px) !important; }
/* el chat deja libre el sitio de la barra del espectador y el aviso "se unió" sube sobre ella */
html.kapi-native-app #streaming-stage.kapi-role-viewer #pro-chat-messages { padding-bottom: calc(var(--kapi-dock-bottom) + var(--kapi-dock-h) + 8px) !important; }
html.kapi-native-app #streaming-stage.kapi-role-viewer #viewer-join-notification { bottom: calc(var(--kapi-dock-bottom) + var(--kapi-dock-h) + 6px); }

/* 4 ── regalo del anfitrión */
#gifts-open-btn.kv-give-off { opacity: 0.35; pointer-events: none; filter: grayscale(0.7); box-shadow: none; }
html.kapi-native-app #streaming-stage #kapi-host-give-btn {
    position: fixed;
    right: 8px;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    z-index: 62;
}
#kapi-host-give-btn .material-icons { color: #f5c04a; }

/* 5 ── Ruleta y Tip Menu, un poquito más chicos */
#streaming-stage #kmg-fabs .kmg-fab {
    min-width: 46px !important;
    padding: 4px 5px !important;
    font-size: 0.92rem !important;
    border-radius: 12px !important;
}
#streaming-stage #kmg-fabs .kmg-fab span,
#streaming-stage #kmg-fabs .kmg-fab em { font-size: 0.5rem !important; }

/* [KAPI-PERMITIR-SOLICITUDES] interruptor dentro del modal "SUBIR A VENTANILLA" (el de la crucecita del anfitrión) */
#kapiVentModal .kvm-perm {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 8px 12px 4px; padding: 8px 10px;
    border-radius: 12px; background: rgba(255, 255, 255, 0.06);
    font-size: 12px; color: #e8eef0; cursor: pointer;
}
#kapiVentModal .kvm-perm input { position: absolute; opacity: 0; pointer-events: none; }
#kapiVentModal .kvm-perm i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #555; transition: background 0.2s; }
#kapiVentModal .kvm-perm i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
#kapiVentModal .kvm-perm input:checked + i { background: #00c896; }
#kapiVentModal .kvm-perm input:checked + i::after { transform: translateX(16px); }


/* ═══════════════════════════════════════════════════════════════════════════
   [KAPI-COMENTARIOS] menú al tocar un comentario, destacado dorado, anclados, respuesta, traducción
   ═══════════════════════════════════════════════════════════════════════════ */
#pro-chat-messages .chat-message:not(.system) { cursor: pointer; -webkit-tap-highlight-color: rgba(245, 192, 74, 0.2); }

/* comentario de quien ya regaló lo del paquete "Apoyo" o más: borde dorado */
#pro-chat-messages .chat-message.kv-gold {
    border: 1.5px solid #f5c04a !important;
    border-radius: 12px !important;
    box-shadow: 0 0 10px rgba(245, 192, 74, 0.45) !important;
    background: linear-gradient(135deg, rgba(245, 192, 74, 0.16), rgba(0, 0, 0, 0.35)) !important;
}

/* respuesta: cita arriba del texto, traducción debajo */
.kv-quote {
    display: block; margin: 0 0 3px; padding: 2px 7px;
    border-left: 3px solid #00c896; border-radius: 6px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.85em; opacity: 0.92;
}
.kv-trad { margin-top: 3px; font-size: 0.86em; font-style: italic; color: #9fe8ff; }

/* arriba del chat: primero el destacado, debajo los anclados (45 s cada uno) */
#kv-com-top { display: none; flex-direction: column; gap: 4px; padding: 4px 8px; pointer-events: auto; flex: 0 0 auto; position: relative; z-index: 4; }
#kv-com-top .kv-top-item {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 6px;
    padding: 6px 10px 9px; border-radius: 12px;
    font-size: 12px; line-height: 1.3; color: #fff; text-shadow: none;
    background: rgba(18, 20, 24, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.18);
    word-break: break-word;
}
#kv-com-top .kv-dest {
    background: linear-gradient(135deg, rgba(66, 48, 6, 0.94), rgba(30, 22, 4, 0.94));
    border: 1.5px solid #f5c04a;
    box-shadow: 0 0 14px rgba(245, 192, 74, 0.55);
}
#kv-com-top .kv-pin { border-color: rgba(0, 200, 150, 0.65); }
#kv-com-top .kv-top-tx { flex: 1; min-width: 0; }
#kv-com-top .kv-top-bar {
    position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
    background: #f5c04a; transform-origin: left center;
    animation: kvDrain linear forwards;
}
#kv-com-top .kv-pin .kv-top-bar { background: #00c896; }
@keyframes kvDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* chip "Respondiendo a…" encima de la caja de escribir */
#kv-reply-chip {
    display: flex; align-items: center; gap: 8px;
    margin: 0 8px 4px; padding: 5px 8px 5px 10px;
    border-radius: 12px; border-left: 3px solid #00c896;
    background: rgba(0, 0, 0, 0.66); color: #fff; font-size: 12px;
    pointer-events: auto;
}
#kv-reply-chip .kv-reply-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kv-reply-chip .kv-reply-x { flex: none; border: none; background: rgba(255, 255, 255, 0.15); color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; cursor: pointer; }

/* el menú (hoja desde abajo; en pantallas anchas, tarjeta centrada) */
#kv-com-sheet,
#kv-bloq-panel { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
#kv-com-sheet .kv-sh-bg,
#kv-bloq-panel .kv-sh-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
#kv-com-sheet .kv-sh-box,
#kv-bloq-panel .kv-sh-box {
    position: relative; width: 100%; max-width: 440px; max-height: 80vh; overflow-y: auto;
    background: #181a1f; color: #eef2f4;
    border-radius: 18px 18px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
}
@media (min-width: 700px) { #kv-com-sheet, #kv-bloq-panel { align-items: center; } #kv-com-sheet .kv-sh-box, #kv-bloq-panel .kv-sh-box { border-radius: 18px; padding-bottom: 12px; } }
#kv-com-sheet .kv-sh-head,
#kv-bloq-panel .kv-sh-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 6px; }
#kv-com-sheet .kv-sh-av,
#kv-bloq-panel .kv-sh-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2b3340; font-weight: 700; }
#kv-com-sheet .kv-sh-who,
#kv-bloq-panel .kv-sh-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#kv-com-sheet .kv-sh-who small,
#kv-bloq-panel .kv-sh-who small { opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kv-com-sheet .kv-sh-gold,
#kv-bloq-panel .kv-sh-gold { font-style: normal; font-size: 0.75em; color: #f5c04a; border: 1px solid #f5c04a; border-radius: 8px; padding: 0 5px; margin-left: 4px; }
#kv-com-sheet .kv-sh-x,
#kv-bloq-panel .kv-sh-x { flex: none; border: none; background: rgba(255, 255, 255, 0.1); color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
#kv-com-sheet .kv-sh-row,
#kv-bloq-panel .kv-sh-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 10px; margin: 0; border: none; border-radius: 12px;
    background: transparent; color: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
#kv-com-sheet .kv-sh-row:active,
#kv-bloq-panel .kv-sh-row:active,
#kv-com-sheet .kv-sh-row:hover,
#kv-bloq-panel .kv-sh-row:hover { background: rgba(255, 255, 255, 0.08); }
#kv-com-sheet .kv-sh-ico,
#kv-bloq-panel .kv-sh-ico { width: 22px; text-align: center; }
#kv-com-sheet .kv-danger,
#kv-bloq-panel .kv-danger { color: #ff6b6b; }
#kv-com-sheet .kv-sh-sep,
#kv-bloq-panel .kv-sh-sep { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 4px 0; }
#kv-com-sheet .kv-sh-p,
#kv-bloq-panel .kv-sh-p { margin: 6px 10px 8px; font-size: 13px; opacity: 0.85; }

/* etiqueta de moderador / anfitrión en la cabecera del menú */
#kv-com-sheet .kv-sh-mod { font-style: normal; font-size: 0.75em; color: #4ecdc4; border: 1px solid #4ecdc4; border-radius: 8px; padding: 0 5px; margin-left: 4px; }

/* Centro de Live → Bloqueados: por encima del Centro de Live (z-index 1000000) */
#kv-bloq-panel { z-index: 1000003; }
#kv-bloq-panel .kv-bq-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; }
#kv-bloq-panel .kv-bq-row + .kv-bq-row { border-top: 1px solid rgba(255, 255, 255, 0.08); }
#kv-bloq-panel .kv-bq-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
#kv-bloq-panel .kv-bq-btn { flex: none; border: 1px solid #00c896; background: transparent; color: #00c896; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
#kv-bloq-panel .kv-bq-btn:active { background: rgba(0, 200, 150, 0.18); }
#kv-bloq-panel .kv-bq-btn:disabled { opacity: 0.5; }

/* interruptores del modal de la crucecita: ya se llaman igual, solo se apilan */
#kapiVentModal .kvm-perm + .kvm-perm { margin-top: 4px; }