/* ====== RESET ====== */
html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#0a0a14; color:#e0e0f0; }
*, *::before, *::after { box-sizing:border-box; }

/* ====== ROOM ====== */
.zcl-room { display:flex; flex-direction:column; height:100vh; max-width:100%; background:#0a0a14; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* ====== TOP ROW ====== */
.zcl-room-top { display:flex; flex-direction:row; flex:1; min-height:0; }
.zcl-room-video-column { display:flex; flex-direction:column; flex:4; min-width:0; min-height:0; }
.zcl-video-wrapper { flex:1; position:relative; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; }
.zcl-video-wrapper video { width:100%; height:100%; object-fit:contain; }
.zcl-video-wrapper #zcl-pause-image { width:100%; height:100%; object-fit:contain; position:absolute; inset:0; z-index:2; }
.zcl-video-wrapper #zcl-pause-image[data-empty] { display:none; }
.zcl-video-placeholder { display:flex; flex-direction:column; align-items:center; gap:12px; color:#3a3a5c; text-align:center; padding:20px; }
.zcl-video-placeholder .zcl-placeholder-text { font-size:13px; color:#5a5a7c; }

/* ====== TOOLBAR ====== */
.zcl-controls-bar { display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 12px; background:linear-gradient(180deg,#15152a,#0e0e1e); border-top:1px solid #2a2a4a; flex-shrink:0; }
.zcl-ctrl-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); color:#7a7a9a; cursor:pointer; padding:7px 10px; border-radius:10px; display:flex; align-items:center; justify-content:center; transition:all .25s ease; backdrop-filter:blur(4px); position:relative; }
.zcl-ctrl-btn svg { width:18px; height:18px; }
.zcl-ctrl-btn:hover { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.15); color:#e0e0f0; transform:translateY(-1px); box-shadow:0 4px 15px rgba(0,0,0,0.3); }
.zcl-ctrl-btn:active { transform:translateY(0); }

/* Stream toggle button */
.zcl-ctrl-stream { min-width:52px; justify-content:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; padding:7px 14px; border-radius:20px; }
.zcl-ctrl-stream--off { background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.3); color:#22c55e; }
.zcl-ctrl-stream--off:hover { background:rgba(34,197,94,0.2); border-color:rgba(34,197,94,0.5); box-shadow:0 0 20px rgba(34,197,94,0.15); }
.zcl-ctrl-stream--live { background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.3); color:#ef4444; animation:streamPulse 1.5s ease-in-out infinite; }
.zcl-ctrl-stream--live:hover { background:rgba(239,68,68,0.2); border-color:rgba(239,68,68,0.5); box-shadow:0 0 20px rgba(239,68,68,0.15); animation:none; }
.zcl-ctrl-stream--live::before { content:''; width:6px; height:6px; border-radius:50%; background:#ef4444; display:inline-block; animation:pulse 1.5s infinite; }

/* Active state for other buttons */
.zcl-ctrl-btn.zcl-active { background:rgba(34,197,94,0.1); border-color:rgba(34,197,94,0.25); color:#22c55e; }
.zcl-ctrl-hidden { display:none !important; }

/* ====== DASHBOARD (20%) ====== */
.zcl-room-dashboard { flex:1; min-width:0; min-height:0; background:#0c0c1a; border-left:1px solid #1a1a30; display:flex; flex-direction:column; overflow:hidden; padding:6px; }
.zcl-dash-chart-wrap { flex:1; min-height:0; position:relative; }
.zcl-dash-chart-wrap canvas { width:100% !important; height:100% !important; }
.zcl-dash-tabs { display:flex; gap:3px; flex-shrink:0; justify-content:center; padding:5px 2px 2px; }
.zcl-dash-tab { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); color:#5a5a7a; cursor:pointer; padding:3px 7px; border-radius:6px; font-size:8px; font-weight:600; transition:all .2s; text-transform:uppercase; letter-spacing:0.3px; line-height:1.3; }
.zcl-dash-tab:hover { background:rgba(255,255,255,0.08); color:#c0c0d0; }
.zcl-dash-tab--active { background:rgba(74,108,247,0.12); border-color:rgba(74,108,247,0.3); color:#4a6cf7; }

/* ====== BOTTOM ROW ====== */
.zcl-room-bottom { display:flex; flex-direction:row; flex:0 0 28vh; min-height:160px; max-height:40vh; border-top:1px solid #1a1a30; }
.zcl-room-chat { display:flex; flex-direction:column; flex:7; min-width:0; min-height:0; }
.zcl-room-users { display:flex; flex-direction:column; flex:3; min-width:0; min-height:0; border-left:1px solid #1a1a30; }

/* ====== CHAT ====== */
.zcl-chat-header { display:flex; background:#111128; padding:0 10px; flex-shrink:0; border-bottom:1px solid #1a1a34; }
.zcl-chat-tab { padding:7px 12px; cursor:pointer; font-size:12px; font-weight:500; color:#5a5a7a; border-bottom:2px solid transparent; transition:all .2s; }
.zcl-chat-tab.zcl-active { color:#d0d0e0; border-bottom-color:#4a6cf7; }
.zcl-chat-tab[data-tab="dm"]:not(.zcl-hidden) { display:inline-flex; align-items:center; gap:6px; }
.zcl-dm-close { background:none; border:none; color:#5a5a7a; cursor:pointer; font-size:16px; padding:0 4px; }
.zcl-dm-close:hover { color:#ef4444; }

/* ====== CHAT MESSAGES ====== */
.zcl-chat-messages { flex:1; overflow-y:auto; padding:6px 10px; display:flex; flex-direction:column; gap:3px; min-height:0; }
.zcl-chat-empty { color:#3a3a5c; text-align:center; padding:16px; font-size:12px; }

.zcl-msg { display:flex; gap:6px; padding:4px 6px; border-radius:6px; transition:background .15s; position:relative; }
.zcl-msg:hover { background:rgba(255,255,255,0.02); }
.zcl-msg-avatar { width:24px; height:24px; border-radius:50%; background:#1a1a34; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:#5a5a7a; overflow:hidden; }
.zcl-msg-body { flex:1; min-width:0; }
.zcl-msg-header { display:flex; align-items:baseline; gap:6px; margin-bottom:1px; }
.zcl-msg-name { font-size:11px; font-weight:600; color:#5a5a7a; }
.zcl-msg-time { font-size:9px; color:#3a3a5c; }
.zcl-msg-text { font-size:12px; line-height:1.4; word-break:break-word; color:#c0c0d0; }
.zcl-msg-text img { max-width:200px; border-radius:6px; margin:3px 0; cursor:pointer; }
.zcl-msg-text a { color:#4a6cf7; text-decoration:underline; }
.zcl-msg-system { text-align:center; color:#3a3a5c; font-size:10px; padding:2px; }
.zcl-msg-system span { background:#111128; padding:2px 8px; border-radius:4px; }

/* ====== MSG ACTION BUTTONS ====== */
.zcl-msg-actions { position:absolute; right:6px; top:2px; display:none; gap:1px; }
.zcl-msg:hover .zcl-msg-actions { display:flex; }
.zcl-msg-action { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.04); color:#5a5a7a; cursor:pointer; padding:1px 4px; border-radius:4px; font-size:9px; display:flex; align-items:center; gap:1px; transition:all .2s; }
.zcl-msg-action:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.08); }
.zcl-msg-action--dm:hover { color:#4a6cf7; }
.zcl-msg-action--pos:hover { color:#22c55e; }
.zcl-msg-action--neg:hover { color:#ef4444; }
.zcl-msg-action--delete:hover { color:#ef4444; }
.zcl-msg-action--reported { opacity:0.3; pointer-events:none; }

/* ====== VOICE NOTE ====== */
.zcl-voice-note { display:flex; align-items:center; gap:6px; padding:3px 0; }
.zcl-voice-play { width:28px; height:28px; border-radius:50%; background:#1a1a34; border:1px solid #2a2a4a; color:#c0c0d0; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; }
.zcl-voice-play:hover { background:#2a2a4a; }
.zcl-voice-wave { flex:1; height:20px; background:#111128; border-radius:3px; position:relative; overflow:hidden; }
.zcl-voice-wave-inner { height:100%; background:linear-gradient(90deg,#4a6cf7,#6a8cf7); border-radius:3px; transition:width .1s; }
.zcl-voice-duration { font-size:10px; color:#5a5a7a; min-width:28px; }

/* ====== FILE MESSAGE ====== */
.zcl-msg-file { display:flex; align-items:center; gap:6px; background:#111128; border-radius:6px; padding:6px 10px; margin:3px 0; }
.zcl-msg-file-icon { font-size:20px; }
.zcl-msg-file-info { flex:1; min-width:0; }
.zcl-msg-file-name { font-size:11px; font-weight:500; color:#c0c0d0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ====== CHAT INPUT ====== */
.zcl-chat-input { display:flex; align-items:center; gap:5px; padding:6px 10px; background:#111128; border-top:1px solid #1a1a34; flex-shrink:0; }
.zcl-chat-btn { background:none; border:none; color:#5a5a7a; cursor:pointer; padding:5px; border-radius:6px; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.zcl-chat-btn:hover { background:#1a1a34; color:#c0c0d0; }
.zcl-chat-text { flex:1; background:#0a0a18; border:1px solid #1a1a34; border-radius:6px; padding:7px 10px; color:#d0d0e0; font-size:12px; outline:none; }
.zcl-chat-text:focus { border-color:#4a6cf7; }
.zcl-send-btn { background:#4a6cf7; border:none; color:#fff; padding:7px 10px; border-radius:6px; cursor:pointer; display:flex; align-items:center; }
.zcl-send-btn:hover { background:#3b5de7; }

/* ====== VOICE RECORDER ====== */
.zcl-voice-recorder { display:flex; align-items:center; gap:6px; background:#111128; border-radius:6px; padding:3px 6px; flex:1; }
.zcl-voice-recorder.zcl-hidden { display:none; }
.zcl-voice-timer { font-size:13px; font-weight:600; color:#ef4444; min-width:32px; }
.zcl-voice-send { color:#22c55e !important; }
.zcl-voice-send:hover { background:rgba(34,197,94,0.1) !important; }
.zcl-voice-cancel { color:#ef4444 !important; font-size:18px; }
.zcl-voice-cancel:hover { background:rgba(239,68,68,0.1) !important; }

/* ====== USERS LIST ====== */
.zcl-users-header { padding:7px 10px; font-size:12px; font-weight:600; color:#5a5a7a; border-bottom:1px solid #1a1a34; flex-shrink:0; }
.zcl-users-list { flex:1; overflow-y:auto; padding:3px 0; min-height:0; }
.zcl-users-empty { color:#3a3a5c; text-align:center; padding:12px; font-size:11px; }
.zcl-user-item { display:flex; align-items:center; gap:6px; padding:5px 10px; cursor:default; transition:background .15s; }
.zcl-user-item:hover { background:rgba(255,255,255,0.02); }
.zcl-user-avatar { width:22px; height:22px; border-radius:50%; background:#1a1a34; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:#5a5a7a; overflow:hidden; }
.zcl-user-name { flex:1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zcl-user-badge { font-size:8px; padding:1px 5px; border-radius:3px; font-weight:600; text-transform:uppercase; }
.zcl-user-badge--fac { background:#0a2a0a; color:#22c55e; }
.zcl-user-badge--live { background:#2a0a0a; color:#ef4444; animation:pulse 1.5s infinite; }
.zcl-user-actions { display:flex; gap:2px; flex-wrap:wrap; }
.zcl-user-action { background:none; border:none; color:#5a5a7a; cursor:pointer; padding:1px 3px; border-radius:3px; font-size:10px; }
.zcl-user-action:hover { background:rgba(255,255,255,0.06); color:#c0c0d0; }

/* ====== TOAST ====== */
.zcl-toast-container { position:fixed; top:12px; right:12px; z-index:99999; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.zcl-toast { pointer-events:auto; background:#18183a; color:#fff; padding:8px 14px; border-radius:8px; font-size:12px; box-shadow:0 4px 20px rgba(0,0,0,0.5); animation:slideIn .3s ease; max-width:300px; border-left:3px solid #4a6cf7; }
.zcl-toast--error { border-left-color:#ef4444; }
.zcl-toast--success { border-left-color:#22c55e; }

/* ====== DM MODAL ====== */
.zcl-dm-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:99998; display:flex; align-items:center; justify-content:center; }
.zcl-dm-modal { display:flex; flex-direction:column; width:380px; max-width:90vw; height:460px; max-height:80vh; background:#12122a; border-radius:16px; border:1px solid #2a2a4a; box-shadow:0 20px 60px rgba(0,0,0,0.6); overflow:hidden; }
.zcl-dm-modal-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#1a1a34; border-bottom:1px solid #2a2a4a; flex-shrink:0; }
.zcl-dm-modal-header span { font-size:14px; font-weight:600; color:#d0d0e0; }
.zcl-dm-modal-close { background:none; border:none; color:#5a5a7a; cursor:pointer; font-size:20px; padding:0 4px; transition:color .2s; }
.zcl-dm-modal-close:hover { color:#ef4444; }
.zcl-dm-modal-messages { flex:1; overflow-y:auto; padding:10px 16px; display:flex; flex-direction:column; gap:4px; min-height:0; }
.zcl-dm-modal-empty { color:#3a3a5c; text-align:center; padding:20px; font-size:12px; }
.zcl-dm-modal-input { display:flex; align-items:center; gap:6px; padding:10px 16px; background:#1a1a34; border-top:1px solid #2a2a4a; flex-shrink:0; }
.zcl-dm-modal-input input { flex:1; background:#0a0a18; border:1px solid #2a2a4a; border-radius:8px; padding:8px 12px; color:#d0d0e0; font-size:13px; outline:none; }
.zcl-dm-modal-input input:focus { border-color:#4a6cf7; }
.zcl-dm-modal-input button { background:#4a6cf7; border:none; color:#fff; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:500; }
.zcl-dm-modal-input button:hover { background:#3b5de7; }

/* ====== MODAL (generic) ====== */
.zcl-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:99997; display:flex; align-items:center; justify-content:center; }
.zcl-modal { background:#1a1a34; border-radius:12px; max-height:90vh; overflow-y:auto; max-width:480px; width:90%; padding:20px; }

/* ====== ANIMATIONS ====== */
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes streamPulse { 0%,100% { box-shadow:0 0 10px rgba(239,68,68,0.2); } 50% { box-shadow:0 0 25px rgba(239,68,68,0.4); } }
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ====== SCROLLBAR ====== */
.zcl-chat-messages::-webkit-scrollbar, .zcl-users-list::-webkit-scrollbar, .zcl-room-dashboard::-webkit-scrollbar, .zcl-dm-modal-messages::-webkit-scrollbar { width:3px; }
.zcl-chat-messages::-webkit-scrollbar-track, .zcl-users-list::-webkit-scrollbar-track, .zcl-room-dashboard::-webkit-scrollbar-track, .zcl-dm-modal-messages::-webkit-scrollbar-track { background:transparent; }
.zcl-chat-messages::-webkit-scrollbar-thumb, .zcl-users-list::-webkit-scrollbar-thumb, .zcl-room-dashboard::-webkit-scrollbar-thumb, .zcl-dm-modal-messages::-webkit-scrollbar-thumb { background:#2a2a4a; border-radius:3px; }

/* ====== RESPONSIVE ====== */
@media (max-width:768px) {
    .zcl-room-top { flex-direction:column; }
    .zcl-room-video-column { flex:1; }
    .zcl-room-dashboard { flex:none; width:100%; flex-direction:row; align-items:stretch; border-left:none; border-top:1px solid #1a1a30; height:100px; overflow:hidden; }
    .zcl-dash-chart-wrap { flex:1; min-width:0; min-height:0; }
    .zcl-dash-tabs { flex-direction:column; gap:2px; padding:4px; justify-content:center; }
    .zcl-room-bottom { flex-direction:column; max-height:45vh; min-height:130px; }
    .zcl-room-chat { flex:1; min-height:110px; }
    .zcl-room-users { flex:0 0 auto; height:90px; min-height:50px; border-left:none; border-top:1px solid #1a1a30; }
    .zcl-chat-messages { max-height:calc(45vh - 110px); }
    .zcl-controls-bar { gap:5px; padding:5px 8px; }
    .zcl-ctrl-btn { padding:5px 8px; }
    .zcl-ctrl-stream { min-width:44px; padding:5px 12px; font-size:10px; }
    .zcl-dm-modal { width:100vw; height:100vh; max-width:100vw; max-height:100vh; border-radius:0; }
}

@media (max-width:480px) {
    .zcl-room-bottom { max-height:50vh; min-height:110px; }
    .zcl-room-users { height:70px; }
}