/**
 * EduPress — Virtual Room CSS
 * Full-screen video call UI, pre-join screen, participant grid
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
	--ep-room-bg:        #0d0e14;
	--ep-room-surface:   #1a1c27;
	--ep-room-border:    rgba(255,255,255,.08);
	--ep-room-text:      #e8e9f0;
	--ep-room-muted:     #8890a4;
	--ep-room-accent:    #6c63ff;
	--ep-room-danger:    #f05252;
	--ep-room-success:   #31c48d;
	--ep-room-header-h:  60px;
	--ep-room-footer-h:  80px;
	--ep-room-radius:    12px;
	--ep-room-tile-gap:  8px;
}

/* ── Root container — fixed overlay, covers full viewport regardless of theme ── */
.ep-room {
	position: fixed;
	inset: 0;
	/* Above WP admin bar (99999), Divi nav (1000000), everything else */
	z-index: 2147483647;
	background: var(--ep-room-bg);
	color: var(--ep-room-text);
	font-family: 'Inter', -apple-system, sans-serif;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Hide WP admin bar + reset body offsets when room is active */
body.ep-room-active #wpadminbar { display: none !important; }
body.ep-room-active { margin-top: 0 !important; padding-top: 0 !important; }

/* ── Hide theme header/navigation when virtual room is active ────────────────── */
/* Generic selectors */
body.ep-room-active .site-header,
body.ep-room-active #site-header,
body.ep-room-active #masthead,
body.ep-room-active .main-navigation,
body.ep-room-active #main-navigation,
body.ep-room-active .primary-navigation,
body.ep-room-active nav.navigation,
body.ep-room-active header.site-header,
body.ep-room-active header.entry-header,
body.ep-room-active .header-area,
body.ep-room-active #header,
body.ep-room-active .page-header,
body.ep-room-active .wp-block-template-part[class*="header"],
/* Divi theme selectors */
body.ep-room-active #main-header,
body.ep-room-active #et-top-navigation,
body.ep-room-active .et-fixed-header,
body.ep-room-active #top-header,
body.ep-room-active .et_pb_section.et_pb_section_first,
body.ep-room-active footer#main-footer,
body.ep-room-active #et_mobile_nav_menu {
	display: none !important;
}

/* Ensure the room container truly fills 100 % of the viewport */
body.ep-room-active,
body.ep-room-active #page,
body.ep-room-active #content,
body.ep-room-active .site,
body.ep-room-active main,
body.ep-room-active #main-content {
	overflow: hidden !important;
}

/* ── Utility ────────────────────────────────────────────────────────────────── */
.ep-hidden { display: none !important; }

/* ── Pre-join ───────────────────────────────────────────────────────────────── */
.ep-room__prejoin {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 2rem;
	background: var(--ep-room-bg);
	overflow-y: auto;
}

.ep-room__prejoin-card {
	background: var(--ep-room-surface);
	border: 1px solid var(--ep-room-border);
	border-radius: var(--ep-room-radius);
	padding: 2rem;
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ep-room__brand {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: var(--ep-room-accent);
	font-weight: 600;
	font-size: 1rem;
}

.ep-room__preview-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}

.ep-room__preview-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scaleX(-1); /* mirror local */
}

.ep-room__preview-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.5);
}

.ep-room__preview-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.ep-room__username {
	text-align: center;
	color: var(--ep-room-muted);
	margin: 0;
}

.ep-room__prejoin-controls {
	display: flex;
	justify-content: center;
	gap: .75rem;
}

.ep-room__error {
	background: rgba(240,82,82,.15);
	border: 1px solid rgba(240,82,82,.4);
	color: #fca5a5;
	border-radius: 8px;
	padding: .75rem 1rem;
	font-size: .875rem;
	text-align: center;
}

.ep-room__waiting {
	background: rgba(251,191,36,.1);
	border: 1px solid rgba(251,191,36,.35);
	color: #fcd34d;
	border-radius: 8px;
	padding: .875rem 1rem;
	font-size: .875rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
}
.ep-room__waiting-icon { font-size: 1.6rem; }
.ep-room__waiting-retry { font-size: .78rem; opacity: .7; }
.ep-room__waiting-now {
	background: none;
	border: 1px solid rgba(251,191,36,.5);
	color: #fcd34d;
	border-radius: 6px;
	padding: .28rem .85rem;
	font-size: .8rem;
	cursor: pointer;
	margin-top: .15rem;
	transition: background .15s;
}
.ep-room__waiting-now:hover { background: rgba(251,191,36,.18); }

/* ── In-call layout ─────────────────────────────────────────────────────────── */
.ep-room__call {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background: var(--ep-room-bg);
}

/* Header */
.ep-room__header {
	height: var(--ep-room-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.25rem;
	background: var(--ep-room-surface);
	border-bottom: 1px solid var(--ep-room-border);
	flex-shrink: 0;
}

.ep-room__header-info {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	font-size: .95rem;
}

.ep-room__header-meta {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.ep-room__pill {
	padding: .2rem .65rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 500;
	background: rgba(255,255,255,.08);
	color: var(--ep-room-text);
}

.ep-room__pill--live {
	background: rgba(49,196,141,.2);
	color: var(--ep-room-success);
	animation: ep-blink 2s infinite;
}

@keyframes ep-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: .5; }
}

/* Stage + Sidebar body */
.ep-room__body {
	flex: 1;
	display: flex;
	overflow: hidden;
	min-height: 0;
}

.ep-room__stage {
	flex: 1;
	position: relative;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-width: 0;
}

.ep-room__stage .ep-room__tile {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: unset;
	border-radius: 0;
	border: none;
}

/* Split stage — two hosts side by side */
.ep-room__stage.ep-stage--split {
	gap: 2px;
}
.ep-room__stage.ep-stage--split .ep-room__tile {
	position: relative;
	inset: unset;
	width: calc(50% - 1px);
	height: 100%;
	aspect-ratio: unset;
	border-radius: 0;
}

.ep-room__stage-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	color: var(--ep-room-muted);
	text-align: center;
}

.ep-room__stage-empty svg { opacity: .4; }
.ep-room__stage-empty p  { margin: 0; font-size: .9rem; }

.ep-room__sidebar {
	width: 220px;
	flex-shrink: 0;
	background: var(--ep-room-surface);
	border-left: 1px solid var(--ep-room-border);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--ep-room-tile-gap);
	padding: var(--ep-room-tile-gap);
}

.ep-room__sidebar .ep-room__tile {
	width: 100%;
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
}

/* Fullscreen */
.ep-room__stage:fullscreen { background: #000; }

/* Tile */
.ep-room__tile {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #111;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid transparent;
	transition: border-color .2s;
}

.ep-room__tile--local .ep-room__video {
	transform: scaleX(-1); /* mirror webcam for natural self-view */
}
/* Screen-share must NOT be mirrored — text/content must be readable */
.ep-room__tile--screensharing .ep-room__video {
	transform: none !important;
}

.ep-room__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ep-room__tile-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.7);
}

.ep-room__tile-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.ep-room__tile-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: .375rem .625rem;
	background: linear-gradient(transparent, rgba(0,0,0,.75));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .25rem;
}

.ep-room__tile-name {
	font-size: .7rem;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 80%;
}

.ep-room__tile-status {
	font-size: .65rem;
	color: var(--ep-room-muted);
}

/* Controls */
.ep-room__controls {
	height: var(--ep-room-footer-h);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	background: var(--ep-room-surface);
	border-top: 1px solid var(--ep-room-border);
	flex-shrink: 0;
	padding: 0 1rem;
}

.ep-room__ctrl-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	padding: .5rem .75rem;
	background: rgba(255,255,255,.08);
	border: 1px solid var(--ep-room-border);
	border-radius: 10px;
	color: var(--ep-room-text);
	cursor: pointer;
	font-size: .65rem;
	font-weight: 500;
	font-family: inherit;
	transition: background .15s, border-color .15s;
	min-width: 60px;
}

.ep-room__ctrl-btn:hover {
	background: rgba(255,255,255,.14);
}

.ep-room__ctrl-btn--toggle {
	/* active state = mic/cam ON */
}

.ep-room__ctrl-btn--active {
	background: rgba(108,99,255,.2);
	border-color: rgba(108,99,255,.5);
	color: #a5a0ff;
}

.ep-room__ctrl-btn--leave {
	background: rgba(240,82,82,.15);
	border-color: rgba(240,82,82,.3);
	color: #fca5a5;
}

.ep-room__ctrl-btn--leave:hover {
	background: rgba(240,82,82,.3);
}

.ep-room__ctrl-btn--end {
	background: rgba(240,82,82,.25);
	border-color: rgba(240,82,82,.5);
	color: #ff7b7b;
}

.ep-room__ctrl-btn--end:hover {
	background: rgba(240,82,82,.45);
}

/* ── Room ended overlay ──────────────────────────────────────────────────────── */
.ep-room__ended {
	position: absolute;
	inset: 0;
	background: rgba(13,14,20,.95);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.ep-room__ended-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2.5rem;
	background: var(--ep-room-surface);
	border: 1px solid var(--ep-room-border);
	border-radius: var(--ep-room-radius);
	max-width: 360px;
}

.ep-room__ended-card svg {
	color: var(--ep-room-muted);
}

.ep-room__ended-card h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
}

.ep-room__ended-card p {
	margin: 0;
	color: var(--ep-room-muted);
	font-size: .9rem;
}

/* ── Buttons (reuse ep-btn from frontend) ────────────────────────────────────── */
.ep-room .ep-btn--primary {
	background: var(--ep-room-accent);
	color: #fff;
	border: none;
	padding: .75rem 1.5rem;
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: opacity .15s;
}

.ep-room .ep-btn--primary:hover:not(:disabled) { opacity: .9; }
.ep-room .ep-btn--primary:disabled { opacity: .5; cursor: not-allowed; }

/* Stage video fills tile absolutely (avoids black frame when flex/absolute sizing conflicts) */
.ep-room__stage .ep-room__tile .ep-room__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ── VU meter (pre-join audio indicator) ─────────────────────────────────────── */
.ep-room__vu-meter {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.ep-room__vu-label {
	font-size: .7rem;
	color: var(--ep-room-muted);
	text-align: center;
}
.ep-room__vu-track {
	height: 8px;
	background: rgba(255,255,255,.08);
	border-radius: 999px;
	overflow: hidden;
}
.ep-room__vu-bar {
	height: 100%;
	width: 0%;
	background: var(--ep-room-success);
	border-radius: 999px;
	transition: width .08s linear, background .15s;
}
.ep-room__vu-bar[data-loud="1"] { background: #f5a623; }
.ep-room__vu-bar[data-loud="2"] { background: var(--ep-room-danger); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.ep-room__sidebar { width: 130px; }
	.ep-room__controls {
		gap: .4rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		justify-content: flex-start;
		padding: 0 .5rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* hide scrollbar on Firefox */
	}
	.ep-room__controls::-webkit-scrollbar { display: none; } /* hide scrollbar on Chrome/Safari */
	.ep-room__ctrl-btn { flex-shrink: 0; min-width: 50px; padding: .4rem .5rem; }
}

/* ── Check presenza button ───────────────────────────────────────────────────── */
.ep-room__ctrl-btn--check {
	background: rgba(49, 196, 141, .15);
	color: var(--ep-room-success);
	border: 1px solid rgba(49, 196, 141, .3);
}
.ep-room__ctrl-btn--check:hover:not(:disabled) {
	background: rgba(49, 196, 141, .25);
}
.ep-room__ctrl-btn--check:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* ── Presence check overlay ──────────────────────────────────────────────────── */
.ep-room__presence-overlay {
	position: absolute;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(13, 14, 20, .75);
	backdrop-filter: blur(4px);
}
.ep-room__presence-card {
	background: var(--ep-room-surface);
	border: 1px solid var(--ep-room-border);
	border-radius: var(--ep-room-radius);
	padding: 2.5rem 2rem;
	max-width: 380px;
	width: 90%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.ep-room__presence-card svg {
	color: var(--ep-room-success);
}
.ep-room__presence-card .ep-h3 {
	color: var(--ep-room-text);
	margin: 0;
	font-size: 1.25rem;
}
.ep-room__presence-card .ep-body {
	color: var(--ep-room-muted);
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
}
.ep-room__presence-countdown {
	font-size: 3rem;
	font-weight: 700;
	color: var(--ep-room-success);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.ep-room__presence-countdown[data-low="1"] {
	color: var(--ep-room-danger);
	animation: ep-pulse .6s ease infinite;
}

/* ── Toast notifications ─────────────────────────────────────────────────────── */
.ep-room__toast {
	position: absolute;
	bottom: calc(var(--ep-room-footer-h) + 1rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 300;
	padding: .65rem 1.25rem;
	border-radius: 8px;
	font-size: .875rem;
	font-weight: 500;
	pointer-events: none;
	animation: ep-toast-in .25s ease;
	white-space: nowrap;
}
.ep-room__toast--success {
	background: var(--ep-room-success);
	color: #fff;
}
.ep-room__toast--error {
	background: var(--ep-room-danger);
	color: #fff;
}
.ep-room__toast--info {
	background: var(--ep-room-accent);
	color: #fff;
}
@keyframes ep-toast-in {
	from { opacity: 0; transform: translateX(-50%) translateY(8px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes ep-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .5; }
}

/* ── Participants panel (teacher only, slides in from RIGHT) ─────────────────── */
.ep-room__participants {
	position: fixed;
	right: 0;
	top: var(--ep-room-header-h);
	bottom: var(--ep-room-footer-h);
	width: 300px;
	max-width: 90vw;
	background: var(--ep-room-surface);
	border-left: 1px solid var(--ep-room-border);
	display: flex;
	flex-direction: column;
	z-index: 2147483599;
	transform: translateX(100%);
	transition: transform .25s ease;
	box-shadow: -4px 0 24px rgba(0,0,0,.4);
}
.ep-room__participants--open {
	transform: translateX(0);
}
.ep-room__participants-header {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	font-weight: 600;
	font-size: .875rem;
	border-bottom: 1px solid var(--ep-room-border);
	flex-shrink: 0;
}
.ep-room__participants-badge {
	margin-left: auto;
	background: var(--ep-room-accent);
	color: #fff;
	border-radius: 99px;
	font-size: .7rem;
	padding: 0 .5rem;
	line-height: 1.6;
	font-weight: 700;
}
.ep-room__participants-list {
	flex: 1;
	overflow-y: auto;
	padding: .5rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.ep-room__participant-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--ep-room-bg);
	border-radius: 8px;
	padding: .5rem .75rem;
	font-size: .825rem;
}
.ep-room__participant-name {
	flex: 1;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ep-room__participant-mic {
	font-size: .75rem;
	opacity: .55;
}
.ep-room__participant-mic--muted { color: var(--ep-room-danger); opacity: 1; }
.ep-room__participant-mic--live  { color: var(--ep-room-success); opacity: 1; }
.ep-room__participant-actions {
	display: flex;
	gap: .25rem;
}
/* Danger variant for small buttons */
.ep-btn--danger {
	background: var(--ep-room-danger);
	color: #fff;
	border: none;
}
.ep-btn--danger:hover { filter: brightness(1.15); }

/* ── Roster mode — compact sidebar tiles for large sessions (> 15 users) ─────── */
.ep-room__sidebar--roster {
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow-y: auto;
	padding: 4px;
}
.ep-room__sidebar--roster .ep-room__tile {
	/* Compact row: 44px tall, full sidebar width */
	width: 100% !important;
	height: 44px !important;
	min-width: 0 !important;
	flex-shrink: 0;
	border-radius: 6px;
	display: flex;
	align-items: center;
	padding: 0 8px;
	gap: 8px;
	background: rgba(255,255,255,.04);
	border: 1px solid transparent;
}
.ep-room__sidebar--roster .ep-room__tile .ep-room__video,
.ep-room__sidebar--roster .ep-room__tile .ep-room__tile-overlay {
	display: none !important;
}
.ep-room__sidebar--roster .ep-room__tile .ep-room__tile-info {
	position: static !important;
	padding: 0 !important;
	background: none !important;
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
}
.ep-room__sidebar--roster .ep-room__tile .ep-room__tile-name {
	font-size: .78rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Active speaker — restore video and highlight border */
.ep-room__tile--speaking {
	border-color: var(--ep-room-success) !important;
	box-shadow: 0 0 0 2px var(--ep-room-success);
}
.ep-room__sidebar--roster .ep-room__tile--speaking .ep-room__video {
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
.ep-room__sidebar--roster .ep-room__tile--speaking .ep-room__tile-overlay {
	display: none !important;
}

/* ── Q&A panel ──────────────────────────────────────────────────────────────── */
.ep-room__body { position: relative; }

.ep-room__qa {
	/* Fixed so it overlays the entire room regardless of body layout/overflow.
	   Opens from the LEFT so student video thumbnails on the right stay visible. */
	position: fixed;
	left: 0;
	top: var(--ep-room-header-h);       /* below the top bar */
	bottom: var(--ep-room-footer-h);    /* above the controls bar */
	width: 320px;
	max-width: 90vw;
	background: var(--ep-room-surface);
	border-right: 1px solid var(--ep-room-border);
	display: flex;
	flex-direction: column;
	z-index: 2147483600;   /* below critical overlays but above everything else */
	transform: translateX(-100%);
	transition: transform .25s ease;
	box-shadow: 4px 0 24px rgba(0,0,0,.4);
}
.ep-room__qa--open {
	transform: translateX(0);
}

/* Pulse animation on Q&A button badge when new question arrives */
@keyframes ep-badge-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.35); }
}
.ep-room__qa-badge--pulse {
	animation: ep-badge-pulse .4s ease 3;
}
.ep-room__qa-header {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	font-weight: 600;
	font-size: .875rem;
	border-bottom: 1px solid var(--ep-room-border);
}
.ep-room__qa-badge {
	background: var(--ep-room-danger);
	color: #fff;
	border-radius: 99px;
	font-size: .7rem;
	padding: 0 .4rem;
	line-height: 1.4;
	font-weight: 700;
}
.ep-room__qa-list {
	flex: 1;
	overflow-y: auto;
	padding: .5rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.ep-room__qa-item {
	background: var(--ep-room-bg);
	border-radius: 8px;
	padding: .6rem .75rem;
	font-size: .825rem;
}
.ep-room__qa-item__who {
	font-weight: 600;
	font-size: .75rem;
	color: var(--ep-room-muted);
	margin-bottom: .2rem;
}
.ep-room__qa-item__q {
	color: var(--ep-room-text);
}
.ep-room__qa-item__answer {
	margin-top: .4rem;
	padding-top: .4rem;
	border-top: 1px solid var(--ep-room-border);
	color: var(--ep-room-success);
	font-size: .8rem;
}
.ep-room__qa-item__answer-form {
	margin-top: .5rem;
	display: flex;
	gap: .35rem;
}
.ep-room__qa-item__answer-form textarea {
	flex: 1;
	font-size: .8rem;
	padding: .3rem .4rem;
	border-radius: 4px;
	border: 1px solid var(--ep-room-border);
	background: var(--ep-room-surface);
	color: var(--ep-room-text);
	resize: none;
}
.ep-room__qa-compose {
	padding: .5rem;
	border-top: 1px solid var(--ep-room-border);
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.ep-room__qa-input {
	width: 100%;
	font-size: .825rem;
	padding: .4rem .5rem;
	border-radius: 6px;
	border: 1px solid var(--ep-room-border);
	background: var(--ep-room-bg);
	color: var(--ep-room-text);
	resize: none;
}

/* ── Raised-hands panel ──────────────────────────────────────────────────────── */
.ep-room__hands {
	position: absolute;
	left: 50%;
	bottom: 80px;
	transform: translateX(-50%);
	background: var(--ep-room-surface);
	border: 1px solid var(--ep-room-border);
	border-radius: 10px;
	padding: .65rem 1rem;
	min-width: 220px;
	z-index: 250;
	box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.ep-room__hands-title {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
	font-size: .8rem;
	color: var(--ep-room-muted);
	margin-bottom: .4rem;
}
.ep-room__hands-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.ep-room__hands-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	font-size: .825rem;
}
.ep-room__hands-list .ep-btn--xs {
	font-size: .72rem;
	padding: .2rem .55rem;
}

/* raise-hand button active state */
.ep-room__ctrl-btn--hand-raised {
	color: #f59e0b;
	border-color: #f59e0b;
}
/* muted-by-host indicator on tile */
.ep-room__tile--muted-by-host .ep-room__tile-name::after {
	content: " 🔇";
}

/* ── Q&A alert button state ─────────────────────────────────────────────── */
.ep-room__ctrl-btn--qa-alert {
	background: rgba(245, 158, 11, .25);
	border-color: rgba(245, 158, 11, .6);
	color: #fbbf24;
	animation: ep-qa-alert-pulse 1.5s ease infinite;
}
@keyframes ep-qa-alert-pulse {
	0%, 100% { border-color: rgba(245,158,11,.6); }
	50%       { border-color: rgba(245,158,11,1); box-shadow: 0 0 8px rgba(245,158,11,.5); }
}

/* ── Chat panel ──────────────────────────────────────────────────────────── */
.ep-room__chat {
	position: fixed;
	right: 0;
	top: var(--ep-room-header-h);
	bottom: var(--ep-room-footer-h);
	width: 300px;
	max-width: 90vw;
	background: var(--ep-room-surface);
	border-left: 1px solid var(--ep-room-border);
	display: flex;
	flex-direction: column;
	z-index: 2147483597;
	transform: translateX(100%);
	transition: transform .25s ease;
	box-shadow: -4px 0 24px rgba(0,0,0,.35);
}
.ep-room__chat--open {
	transform: translateX(0);
}
.ep-room__chat-header {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	font-weight: 600;
	font-size: .875rem;
	border-bottom: 1px solid var(--ep-room-border);
	flex-shrink: 0;
}
.ep-room__chat-list {
	flex: 1;
	overflow-y: auto;
	padding: .6rem .75rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.ep-room__chat-msg {
	background: var(--ep-room-bg);
	border-radius: 8px;
	padding: .55rem .75rem;
	font-size: .825rem;
	animation: ep-chat-in .2s ease;
}
@keyframes ep-chat-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ep-room__chat-msg__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .4rem;
	margin-bottom: .25rem;
}
.ep-room__chat-msg__meta strong {
	font-size: .78rem;
	color: var(--ep-room-primary, #6C63FF);
}
.ep-room__chat-msg__meta span {
	font-size: .72rem;
	color: var(--ep-room-muted);
}
.ep-room__chat-msg__text {
	color: var(--ep-room-text);
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}
.ep-room__chat-compose {
	padding: .6rem .75rem;
	border-top: 1px solid var(--ep-room-border);
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex-shrink: 0;
}
.ep-room__chat-compose textarea {
	resize: none;
	font-size: .9rem;
	background: #ffffff !important;
	color: #1a1c27 !important;
	border: 2px solid var(--ep-room-accent) !important;
	border-radius: 6px;
	padding: .5rem .65rem;
	line-height: 1.45;
	caret-color: var(--ep-room-accent);
}
.ep-room__chat-compose textarea::placeholder {
	color: #666e85;
	opacity: 1;
}
.ep-room__chat-compose textarea:focus {
	outline: none;
	border-color: var(--ep-room-accent) !important;
	box-shadow: 0 0 0 3px rgba(108,99,255,.25);
}

/* ── Files panel ─────────────────────────────────────────────────────────── */
.ep-room__files {
	position: fixed;
	right: 0;
	top: var(--ep-room-header-h);
	bottom: var(--ep-room-footer-h);
	width: 280px;
	max-width: 90vw;
	background: var(--ep-room-surface);
	border-left: 1px solid var(--ep-room-border);
	display: flex;
	flex-direction: column;
	z-index: 2147483598;
	transform: translateX(100%);
	transition: transform .25s ease;
}
.ep-room__files--open {
	transform: translateX(0);
}
.ep-room__files-header {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	font-weight: 600;
	font-size: .875rem;
	border-bottom: 1px solid var(--ep-room-border);
	flex-shrink: 0;
}
.ep-room__files-list {
	flex: 1;
	overflow-y: auto;
	padding: .5rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.ep-room__panel-close {
	margin-left: auto;
	background: none;
	border: none;
	color: var(--ep-room-muted);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0;
}
.ep-room__file-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .5rem;
	background: var(--ep-room-bg);
	border-radius: 6px;
	font-size: .8rem;
}
.ep-room__file-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ep-room__file-size {
	color: var(--ep-room-muted);
	font-size: .75rem;
	flex-shrink: 0;
}

/* ── Poll panel ──────────────────────────────────────────────────────────── */
.ep-room__poll-panel {
	position: fixed;
	right: 0;
	top: var(--ep-room-header-h);
	bottom: var(--ep-room-footer-h);
	width: 300px;
	max-width: 90vw;
	background: var(--ep-room-surface);
	border-left: 1px solid var(--ep-room-border);
	display: flex;
	flex-direction: column;
	z-index: 2147483597;
	transform: translateX(100%);
	transition: transform .25s ease;
	overflow: hidden;
}
.ep-room__poll-panel--open {
	transform: translateX(0);
}
.ep-room__poll-create {
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--ep-room-border);
	flex-shrink: 0;
}

/* ── Poll overlay (student vote) ─────────────────────────────────────────── */
.ep-room__poll-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483640;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(13,14,20,.85);
	backdrop-filter: blur(4px);
}
.ep-room__poll-card {
	background: var(--ep-room-surface);
	border: 1px solid var(--ep-room-border);
	border-radius: var(--ep-room-radius);
	padding: 2rem;
	max-width: 420px;
	width: 90%;
	text-align: center;
}
.ep-room__poll-card-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 1.2rem;
	color: var(--ep-room-text);
}
.ep-room__poll-option-btn {
	display: block;
	width: 100%;
	padding: .75rem 1rem;
	margin: .4rem 0;
	background: var(--ep-room-bg);
	border: 1px solid var(--ep-room-border);
	border-radius: 8px;
	color: var(--ep-room-text);
	cursor: pointer;
	font-size: .95rem;
	font-family: inherit;
	transition: background .15s, border-color .15s;
	text-align: left;
}
.ep-room__poll-option-btn:hover {
	background: rgba(108,99,255,.15);
	border-color: var(--ep-room-accent);
}
.ep-room__poll-overlay-voted {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--ep-room-text);
}

/* ── Spotlight request overlay ───────────────────────────────────────────── */
.ep-spotlight-req-overlay {
	position: fixed;
	bottom: calc(var(--ep-room-footer-h) + 1.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2147483646;
	animation: ep-fade-in .2s ease;
}
.ep-spotlight-req-card {
	background: var(--ep-room-surface);
	border: 1px solid var(--ep-room-border);
	border-radius: 14px;
	padding: 1.2rem 1.5rem;
	color: var(--ep-room-text);
	box-shadow: 0 8px 32px rgba(0,0,0,.45);
	text-align: center;
	min-width: 260px;
}
.ep-spotlight-req-card p { margin: 0 0 .9rem; font-size: .95rem; }
.ep-spotlight-req-actions { display: flex; gap: .6rem; justify-content: center; }
.ep-room__ctrl-btn--green {
	background: rgba(49,196,141,.2);
	color: var(--ep-room-success);
	border-color: rgba(49,196,141,.4);
}
.ep-room__ctrl-btn--green:hover { background: rgba(49,196,141,.35); }