/* css/cine.css */

/* ESTRUCTURA PRINCIPAL DEL CINE */
.cine-layout { position: absolute; inset: 0; display: flex; flex-direction: row; background: #000; z-index: 50; transition: filter 0.4s ease; }
.cine-layout.blurred { filter: blur(12px) brightness(0.4); pointer-events: none; }
.cine-container { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; width: 100%; background: #000; overflow: hidden; }

/* REPRODUCTOR DE VIDEO */
#sharedVideo { width: 100%; height: 100%; object-fit: contain; outline: none; background: #000; cursor: pointer; }

/* OVERLAYS Y ESTADOS */
.pause-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; z-index: 5; transition: opacity 0.3s; pointer-events: none; }
.pause-overlay h2 { color: #fff; font-size: clamp(1.5rem, 4vw, 3rem); letter-spacing: 3px; font-weight: 900; text-transform: uppercase; text-shadow: 0 4px 25px rgba(0,0,0,0.9); margin: 0; }
.pause-overlay.hidden { opacity: 0; }
.cine-status { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); background: rgba(15,23,42,0.85); color: var(--text-main); padding: 8px 25px; border-radius: 30px; font-size: 0.9rem; font-weight: bold; pointer-events: none; transition: opacity 0.3s, transform 0.3s; opacity: 0; transform: translate(-50%, -10px); z-index: 15; border: 1px solid var(--accent-color); box-shadow: 0 4px 15px rgba(0,0,0,0.6); backdrop-filter: blur(5px);}
.cine-status.show { opacity: 1; transform: translate(-50%, 0); }

/* CONTROLES DEL REPRODUCTOR */
.custom-video-controls { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 100%); padding: 40px 30px 20px 30px; display: flex; flex-direction: column; gap: 15px; opacity: 0; transition: opacity 0.3s ease; z-index: 10; }
.cine-container:hover .custom-video-controls, .custom-video-controls:focus-within { opacity: 1; }

.progress-container { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 4px; cursor: pointer; position: relative; transition: height 0.2s; }
.progress-container:hover { height: 8px; }
.progress-bar { height: 100%; background: var(--accent-color); border-radius: 4px; width: 0%; pointer-events: none; position: relative; box-shadow: 0 0 10px var(--accent-color); }
.progress-bar::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0; transition: opacity 0.2s; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.progress-container:hover .progress-bar::after { opacity: 1; }

.controls-main { display: flex; justify-content: space-between; align-items: center; }
.controls-left, .controls-right { display: flex; align-items: center; gap: 12px; }

.control-btn { background: none; border: none; cursor: pointer; transition: transform 0.2s, filter 0.2s; padding: 5px; display: flex; align-items: center; justify-content: center; opacity: 0.8; color: #fff; }
.control-btn svg { width: 28px; height: 28px; fill: currentColor; transition: 0.2s; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.control-btn:hover { transform: scale(1.1); opacity: 1; }
.control-btn:hover, .control-btn:hover svg { color: var(--accent-color); fill: var(--accent-color); }

.time-display { color: rgba(255,255,255,0.8); font-size: 0.9rem; font-weight: 600; font-family: monospace; letter-spacing: 1px; user-select: none; margin-left: 8px; }

/* SALA VIP (CHAT LATERAL) */
.cine-side-chat { display: flex; width: 350px; flex-direction: column; background: var(--glass-panel); border-left: 1px solid var(--glass-border); z-index: 10; position: relative; }
.cine-side-chat .chat-header { background: var(--sidebar-bg); border-bottom: 1px solid var(--glass-border); padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; }
.cine-chat-title { margin: 0; font-size: 1.4rem; color: var(--accent-electric); font-weight: 900; letter-spacing: 1px; text-shadow: 0 2px 10px var(--accent-glow); text-align: center; flex-grow: 1; }

.cine-chat-messages { flex-grow: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.cine-side-chat .msg-bubble { font-size: 0.95rem; padding: 10px 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/* SISTEMA DE RESPUESTAS (WHATSAPP STYLE) */
.cine-reply-box {
    position: absolute; bottom: 100%; left: 0; right: 0;
    background: rgba(0,0,0,0.8); backdrop-filter: blur(10px);
    border-top: 1px solid var(--accent-color);
    padding: 10px 15px; display: flex; justify-content: space-between; align-items: center;
    border-radius: 12px 12px 0 0; z-index: 9;
}
.cine-reply-text {
    color: rgba(255,255,255,0.8); font-size: 0.85rem; font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 85%;
    border-left: 3px solid var(--accent-color); padding-left: 10px;
}
.cine-reply-close {
    background: none; border: none; color: #ef4444; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 2px; transition: transform 0.2s;
}
.cine-reply-close:hover { transform: scale(1.1); }

.msg-replied-to {
    background: rgba(0,0,0,0.2); border-left: 3px solid var(--accent-color);
    padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; font-style: italic;
    margin-bottom: 5px; color: rgba(255,255,255,0.7);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
[data-theme="hellokitty"] .msg-replied-to { background: rgba(0,0,0,0.1); color: rgba(255,255,255,0.9); border-color: #fff; }

.cine-side-chat .chat-input-area { background: var(--sidebar-bg); border-top: 1px solid var(--glass-border); padding: 12px 15px; display: flex; gap: 10px; align-items: center; position: relative;}
.cine-side-chat .chat-input-area input { background: rgba(128,128,128,0.1); color: var(--text-pure); border: none; padding: 10px 15px; border-radius: 20px; outline: none; flex-grow: 1;}

.chat-header-actions { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: nowrap; }
.action-circle-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); width: 34px; height: 34px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; padding: 0; }
.action-circle-btn svg { fill: currentColor; transition: fill 0.2s; }
.action-circle-btn:hover { background: rgba(255,255,255,0.15); color: #fff; transform: scale(1.05); }
.action-circle-btn.close-btn:hover { background: var(--error-color); border-color: var(--error-color); color: #fff; }

/* EMOJIS CINE (RAVE) */
.cine-emoji-grid { position: absolute; bottom: 65px; left: 15px; background: var(--glass-panel); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 15px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; z-index: 100000; box-shadow: 0 -10px 30px rgba(0,0,0,0.4); }
[data-theme="hellokitty"] .cine-emoji-grid { background: rgba(253, 242, 248, 0.95); border: 2px solid var(--accent-glow); }
.cine-emoji-item { cursor: pointer; font-size: 1.6rem; text-align: center; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); user-select: none; display: flex; justify-content: center; align-items: center; }
.cine-emoji-item:hover { transform: scale(1.4); }

/* FULLSCREEN COMPATIBILIDAD */
.cine-layout:fullscreen { display: flex; flex-direction: row; width: 100vw; height: 100vh; background: #000; }
.cine-layout:fullscreen .cine-side-chat { display: flex; width: 350px; }
.cine-layout:fullscreen .cine-container { flex-grow: 1; }
.cine-layout:-webkit-full-screen { display: flex; flex-direction: row; width: 100vw; height: 100vh; background: #000; }
.cine-layout:-webkit-full-screen .cine-side-chat { display: flex; width: 350px; }
.cine-layout:-webkit-full-screen .cine-container { flex-grow: 1; }

/* MENÚ CONTEXTUAL CINE MEJORADO Y DINÁMICO */
.cine-context-menu {
    position: fixed; background: var(--bg-secondary); border: 1px solid var(--glass-border);
    border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; flex-direction: column;
    z-index: 1000000; overflow: hidden; width: max-content; /* Se ajusta exactamente al contenido */
}
.cine-context-menu button { 
    background: none; border: none; color: var(--text-main); padding: 10px 20px 10px 15px; 
    text-align: left; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; 
    box-sizing: border-box; white-space: nowrap; /* Evita que el texto se rompa o sature el contenedor */
}
.cine-context-menu button.danger-text { color: #ef4444; }
.cine-context-menu button:hover { background: rgba(128,128,128,0.1); }
[data-theme="hellokitty"] .cine-context-menu { background: rgba(253, 242, 248, 0.95); border-color: rgba(244, 114, 182, 0.3); }
[data-theme="hellokitty"] .cine-context-menu button:hover { background: rgba(244, 114, 182, 0.1); color: var(--accent-electric); }

/* ==========================================
   THEME OVERRIDES PARA SALA DE CINE
   ========================================== */

/* BATMAN: Corrección de contraste en chat */
[data-theme="batman"] .cine-side-chat .msg-sent {
    color: #050505 !important; 
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.2);
}
[data-theme="batman"] .msg-replied-to { background: rgba(0,0,0,0.4); color: #fff; border-color: #000; }

/* HELLO KITTY: "Dark Cinema Mode" (Elegante y no cegador) */
[data-theme="hellokitty"] .cine-side-chat { 
    background: rgba(30, 10, 20, 0.95); 
    border-left: 1px solid rgba(219, 39, 119, 0.3); 
}
[data-theme="hellokitty"] .cine-side-chat .chat-header,
[data-theme="hellokitty"] .cine-side-chat .chat-input-area { 
    background: rgba(49, 15, 30, 0.95); 
    border-top: 1px solid rgba(219, 39, 119, 0.2);
    border-bottom: 1px solid rgba(219, 39, 119, 0.2);
}
[data-theme="hellokitty"] .cine-chat-title { 
    color: #f472b6; 
    text-shadow: 0 2px 15px rgba(244, 114, 182, 0.4); 
}
[data-theme="hellokitty"] .cine-side-chat .chat-input-area input { 
    background: rgba(0, 0, 0, 0.4); 
    color: #fdf2f8; 
    border: 1px solid rgba(244, 114, 182, 0.2);
}
[data-theme="hellokitty"] .cine-side-chat .chat-input-area input::placeholder {
    color: rgba(244, 114, 182, 0.4);
}
[data-theme="hellokitty"] .cine-side-chat .msg-received { 
    background: rgba(131, 24, 67, 0.6); 
    color: #fdf2f8; 
    border: 1px solid rgba(219, 39, 119, 0.3);
}
[data-theme="hellokitty"] .cine-side-chat .msg-sent { 
    background: #db2777; 
    color: #ffffff; 
    box-shadow: 0 4px 15px rgba(219, 39, 119, 0.3);
}
[data-theme="hellokitty"] .cine-emoji-grid {
    background: rgba(49, 15, 30, 0.98);
    border: 1px solid rgba(244, 114, 182, 0.3);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.8);
}

/* ==========================================
   INTEGRACIÓN YOUTUBE (WRAPPER) Y REPRODUCTOR ALTERNO
   ========================================== */

#ytWrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Detrás de tus controles custom */
    background-color: #000;
    pointer-events: none; /* Bloquea clics accidentales en el iframe de YT */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#ytWrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    transform: scale(1.02); /* Oculta los bordes negros nativos de YT */
}

video#sharedVideo {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

video#sharedVideo.hidden, #ytWrapper.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden; 
}

/* Botón Switch: Efecto Hover y Active */
#btnSwitchPlayer {
    transition: all 0.3s ease;
}

#btnSwitchPlayer:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)); /* Glow rojo suave */
}

#btnSwitchPlayer:active {
    transform: scale(0.95);
}