.wpsl-viewer {
	max-width: 920px;
	margin: 0 auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	height: 100vh;
}

#wpsl-video {
	width: 100%;
	background: #000;
	border-radius: 12px;
}

.wpsl-chat {
	margin-top: 12px;
	border: 1px solid #ddd;
	border-radius: 12px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 260px;
	grid-template-rows: minmax(0, 1fr) auto;
	grid-template-areas: 'messages users' 'form users';
	flex: 1;
    min-height: 0;
    position: relative;
}

/* When users sidebar is hidden, make chat full width */
.wpsl-chat.wpsl-no-users {
    grid-template-columns: 1fr;
    grid-template-areas: 'messages' 'form';
}

.wpsl-chat-messages {
	grid-area: messages;
	min-height: 0;
	overflow: auto;
	padding: 10px;
	background: #fafafa;
}

/* emoji popup */
.wpsl-emoji-popup {
	position: absolute;
	right: 10px;
	bottom: 52px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0,0,0,.15);
	padding: 8px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	z-index: 20;
}
.wpsl-emoji-popup button {
	background: transparent;
	border: none;
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
}

@media (max-width: 640px) {
	.wpsl-chat-form input#wpsl-name { flex-basis: 25%; max-width: 25%; }
}

.wpsl-msg {
    padding: 4px 0;
    font-family: system-ui, sans-serif;
    font-size: 14px;
}
.wpsl-msg .wpsl-ban-btn {
    display: inline-block;
    margin: 0 6px 0 6px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f5f5f5;
    color: #334155;
}
.wpsl-msg .wpsl-ban-btn.is-banned {
    background: #e8f5e9; /* unban action (currently banned) */
    border-color: #a5d6a7;
    color: #2e7d32;
}
.wpsl-msg .wpsl-ban-btn.is-unbanned {
    background: #ffebee; /* ban action */
    border-color: #ef9a9a;
    color: #b71c1c;
}
.wpsl-msg .wpsl-del-btn {
    margin-left: 8px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fee2e2;
    color: #7f1d1d;
}

.wpsl-msg .t {
	color: #888;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	margin-right: 6px;
}

.wpsl-chat-form {
	grid-area: form;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	background: #fff;
	border-top: 1px solid #eee;
	position: relative;
}

.wpsl-chat-form input {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 10px;
}
.wpsl-chat-form input#wpsl-name { flex: 0 0 25%; max-width: 25%; }
.wpsl-chat-form input#wpsl-msg { flex: 1 }

.wpsl-chat-form button {
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid #111;
	background: #111;
	color: #fff;
}

.wpsl-chat-form #wpsl-emoji-btn {
	background: #f4f4f5;
	color: #111;
	border-color: #ddd;
}

/* Prevent page scroll on viewer route */
body.wpsl-viewer-page { overflow: visible; }

.wpsl-debug {
	margin-top: 12px;
}

#wpsl-log {
	max-height: 140px;
	overflow: auto;
	background: #111;
	color: #ddd;
	padding: 10px;
	border-radius: 10px;
}

/* Users sidebar (admin) */
.wpsl-chat-users { grid-area: users; border-left:1px solid #e5e7eb; background:#fff; padding:10px; display:flex; flex-direction:column; min-width:0; }
.wpsl-users-header { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.wpsl-online-count { font-weight:600; }
.wpsl-stats { color:#334155; font-size:12px; }
.wpsl-toggle-users { align-self:flex-start; padding:6px 10px; border:1px solid #e2e8f0; background:#f8fafc; border-radius:6px; cursor:pointer; color:#334155; }
.wpsl-toggle-users:hover { background:#eef2f7; }
.wpsl-users-list { display:block; overflow:auto; max-height:100%; border-top:1px dashed #e5e7eb; padding-top:8px; }
.wpsl-user-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border:1px solid #e2e8f0; border-radius:6px; background:#f8fafc; font-size:13px; color:#334155; margin-bottom:6px; }
.wpsl-user-item .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wpsl-user-item .ban { padding:4px 8px; font-size:12px; border:1px solid #ef9a9a; background:#ffebee; color:#b71c1c; border-radius:6px; cursor:pointer }
.wpsl-user-item .ban:hover { background:#ffd9de }

/* Password gate */
.wpsl-pass-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:20px}
.wpsl-pass-card{width:100%;max-width:360px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.05);padding:20px;text-align:center}
.wpsl-pass-icon{font-size:32px;margin-bottom:8px}
.wpsl-pass-title{margin:0 0 4px;font-size:20px}
.wpsl-pass-sub{margin:0 0 12px;color:#475569}
.wpsl-pass-field input{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:4px;font-size:14px}
.wpsl-pass-btn{width:100%;margin-top:10px;padding:10px 12px;background:#2271b1;color:#fff;border:none;border-radius:4px;font-weight:600;cursor:pointer}
.wpsl-pass-btn:hover{background:#135e96}
.wpsl-pass-err{color:#b00020;margin-top:8px;min-height:1em;font-size:13px}
.wpsl-chat .wpsl-toggle-users { position:absolute; top:8px; right:8px; z-index:10; padding:6px 10px; border:1px solid #e2e8f0; background:#f8fafc; border-radius:6px; cursor:pointer; color:#334155; }
.wpsl-chat .wpsl-toggle-users:hover { background:#eef2f7; }

/* Login gate */
.wpsl-login-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:20px}
.wpsl-login-card{width:100%;max-width:420px;background:#fff;border:1px solid #e2e4e7;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.05);padding:20px;text-align:center}
.wpsl-login-title{margin:0 0 4px;font-size:20px}
.wpsl-login-sub{margin:0 0 12px;color:#475569}