:root {
	--bg: #0b0d10;
	--panel: #12161b;
	--text: #e7edf3;
	--muted: #a8b3be;
	--muted-dark: #56606b;
	--brand: #5aa9ff;
	--brand-hover: #4a8fd9;
	--warn: #ffc857;
	--err: #ff6b6b;
}

* {
	box-sizing: border-box;
}
html {
	height: 100%;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
		Arial, "Noto Sans", "Liberation Sans", sans-serif;
	/* Theatre layout - flexbox for topbar + main content */
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var(--panel);
	border-bottom: 1px solid #1f2630;
	position: relative;
	flex-shrink: 0;
}
.topbar h1 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

/* Viewer Count */
.viewer-count {
	position: absolute;
	left: 80px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(90, 169, 255, 0.1);
	border: 1px solid rgba(90, 169, 255, 0.2);
	border-radius: 8px;
	color: var(--brand);
	font-size: 14px;
	font-weight: 600;
}
.viewer-count svg {
	flex-shrink: 0;
}

/* Home Button */
.home-btn {
	position: absolute;
	left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(90, 169, 255, 0.1);
	border: 1px solid rgba(90, 169, 255, 0.2);
	border-radius: 10px;
	color: var(--brand);
	text-decoration: none;
	transition: all 0.2s ease;
}
.home-btn:hover {
	background: rgba(90, 169, 255, 0.15);
	border-color: rgba(90, 169, 255, 0.4);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(90, 169, 255, 0.2);
}
.home-btn:active {
	transform: translateY(0);
}
.home-btn svg {
	display: block;
}

/* Topbar User Section */
.topbar-user {
	position: absolute;
	right: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.theatre-login-prompt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: rgba(255, 199, 87, 0.1);
	border: 1px solid rgba(255, 199, 87, 0.3);
	border-radius: 8px;
	color: var(--warn);
	font-size: 14px;
}

.theatre-login-btn {
	padding: 6px 14px;
	background: var(--brand);
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	transition: all 0.2s;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

.theatre-login-btn:hover {
	background: #4a8fd9;
	transform: translateY(-1px);
}

.theatre-login-btn:active {
	transform: translateY(0);
}

.theatre-user-info {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 6px;
	background: rgba(90, 169, 255, 0.1);
	border: 1px solid rgba(90, 169, 255, 0.2);
	border-radius: 8px;
}

.theatre-user-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--brand);
}

.theatre-username {
	color: var(--text);
	font-weight: 600;
	font-size: 14px;
}

/* Main Theatre Layout - Twitch-like */
.theatre-container {
	display: flex;
	flex: 1;
	min-height: 0;
	width: 100%;
	padding: 20px;
	gap: 0;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* Prevent any overflow */
}

.video-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%; /* Stay within container */
	background: #000;
	border-radius: 8px;
	overflow: hidden; /* Hide overflow */
	cursor: default;
	transition: cursor 0.3s ease;
	/* Flexbox to arrange video and chat side by side */
	display: flex;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.video-frame.hide-cursor {
	cursor: none;
}

/* Desktop CSS-based Fullscreen */
.video-frame:fullscreen,
.video-frame:-webkit-full-screen,
.video-frame:-moz-full-screen,
.video-frame:-ms-fullscreen {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	border-radius: 0;
	display: flex;
}

.video-frame:fullscreen video,
.video-frame:-webkit-full-screen video,
.video-frame:-moz-full-screen video,
.video-frame:-ms-fullscreen video {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
}

/* Chat panel in fullscreen - resizable */
.video-frame:fullscreen .chat-panel:not(.hidden),
.video-frame:-webkit-full-screen .chat-panel:not(.hidden),
.video-frame:-moz-full-screen .chat-panel:not(.hidden),
.video-frame:-ms-fullscreen .chat-panel:not(.hidden) {
	position: relative;
	resize: horizontal;
	overflow: auto;
	min-width: 300px;
	max-width: 600px;
	width: 400px;
	height: 100%;
}

/* Resize handle visual indicator in fullscreen */
.video-frame:fullscreen .chat-panel:not(.hidden)::before,
.video-frame:-webkit-full-screen .chat-panel:not(.hidden)::before,
.video-frame:-moz-full-screen .chat-panel:not(.hidden)::before,
.video-frame:-ms-fullscreen .chat-panel:not(.hidden)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: rgba(90, 169, 255, 0.3);
	cursor: ew-resize;
	transition: background 0.2s ease;
	z-index: 1;
}

.video-frame:fullscreen .chat-panel:not(.hidden):hover::before,
.video-frame:-webkit-full-screen .chat-panel:not(.hidden):hover::before,
.video-frame:-moz-full-screen .chat-panel:not(.hidden):hover::before,
.video-frame:-ms-fullscreen .chat-panel:not(.hidden):hover::before {
	background: rgba(90, 169, 255, 0.5);
}

video {
	flex: 1;
	min-width: 0; /* Allow shrinking */
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #000;
	display: block;
}

/* Video overlay controls */
.video-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85),
		rgba(0, 0, 0, 0.4) 60%,
		transparent
	);
	opacity: 0;
	transition: opacity 0.3s ease, right 0.3s ease;
	z-index: 10;
	pointer-events: none;
}
.video-controls.show {
	opacity: 1;
	pointer-events: auto;
}

/* Adjust controls when chat is visible to not overlap */
.chat-panel:not(.hidden) ~ .video-controls,
.video-frame:has(.chat-panel:not(.hidden)) .video-controls {
	right: 340px;
}

@media (min-width: 1400px) {
	.chat-panel:not(.hidden) ~ .video-controls,
	.video-frame:has(.chat-panel:not(.hidden)) .video-controls {
		right: 400px;
	}
}

@media (min-width: 1800px) {
	.chat-panel:not(.hidden) ~ .video-controls,
	.video-frame:has(.chat-panel:not(.hidden)) .video-controls {
		right: 450px;
	}
}
.controls-left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 0;
}
.controls-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Status and time in overlay */
.status-inline {
	color: var(--text);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.status-inline.warn {
	color: var(--warn);
}
.status-inline.err {
	color: var(--err);
}
.movie-time-inline {
	color: var(--muted);
	font-size: 13px;
	white-space: nowrap;
}

.control-btn {
	background: transparent;
	border: none;
	color: var(--text);
	cursor: pointer;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: background 0.2s ease;
}
.control-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}
.control-btn svg {
	display: block;
}

.quality-select {
	background: rgba(26, 33, 43, 0.9);
	color: var(--text);
	border: 1px solid rgba(42, 52, 66, 0.8);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.quality-select:hover {
	background: rgba(26, 33, 43, 1);
}

/* Volume Control - Desktop by default, hidden on mobile */
.volume-control {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	flex-direction: row-reverse;
}

.volume-slider-wrap {
	display: flex;
	align-items: center;
	width: 0;
	overflow: hidden;
	opacity: 0;
	transition: width 0.3s ease, opacity 0.3s ease;
	position: relative;
}

/* Show slider when active class is added (controlled by JS) */
.volume-slider-wrap.show {
	width: 100px;
	opacity: 1;
}

/* Mobile: Hide entire volume control */
@media (max-width: 768px) {
	.volume-control {
		display: none;
	}
}
.volume-slider {
	width: 100px;
	height: 6px;
	accent-color: var(--brand);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.volume-slider::-webkit-slider-track {
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 3px;
	height: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--brand);
	border: 2px solid rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: transform 0.1s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.volume-slider::-webkit-slider-thumb:hover {
	transform: scale(1.2);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.volume-slider::-moz-range-track {
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 3px;
	height: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.volume-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--brand);
	border: 2px solid rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: transform 0.1s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.volume-slider::-moz-range-thumb:hover {
	transform: scale(1.2);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.65),
		rgba(0, 0, 0, 0.35)
	);
	transition: right 0.3s ease;
}
.overlay.hidden {
	display: none;
}

/* Adjust overlay when chat is visible */
.chat-panel:not(.hidden) ~ .overlay,
.video-frame:has(.chat-panel:not(.hidden)) .overlay {
	right: 340px;
}

@media (min-width: 1400px) {
	.chat-panel:not(.hidden) ~ .overlay,
	.video-frame:has(.chat-panel:not(.hidden)) .overlay {
		right: 400px;
	}
}

@media (min-width: 1800px) {
	.chat-panel:not(.hidden) ~ .overlay,
	.video-frame:has(.chat-panel:not(.hidden)) .overlay {
		right: 450px;
	}
}
.overlay .cta {
	background: var(--brand);
	color: #08121e;
	border: none;
	border-radius: 999px;
	padding: 12px 20px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(90, 169, 255, 0.45);
}

/* Top info display */
.video-info-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 12px 16px;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.7),
		rgba(0, 0, 0, 0.3) 70%,
		transparent
	);
	opacity: 0;
	transition: opacity 0.3s ease, right 0.3s ease;
	z-index: 10;
	pointer-events: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.video-info-top.show {
	opacity: 1;
}

/* Adjust top info when chat is visible */
.chat-panel:not(.hidden) ~ .video-info-top,
.video-frame:has(.chat-panel:not(.hidden)) .video-info-top {
	right: 340px;
	width: auto;
}

@media (min-width: 1400px) {
	.chat-panel:not(.hidden) ~ .video-info-top,
	.video-frame:has(.chat-panel:not(.hidden)) .video-info-top {
		right: 400px;
	}
}

@media (min-width: 1800px) {
	.chat-panel:not(.hidden) ~ .video-info-top,
	.video-frame:has(.chat-panel:not(.hidden)) .video-info-top {
		right: 450px;
	}
}
.end-time-display {
	color: var(--text);
	font-size: 13px;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	text-align: right;
}

.viewer-count-video {
	display: flex !important;
	align-items: center;
	gap: 6px;
	color: var(--text);
	font-size: 13px;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.viewer-count-video svg {
	flex-shrink: 0;
}

/* Video overlay controls */

/* ====================== Chat Panel ====================== */
.chat-panel {
	width: 340px;
	min-width: 300px;
	max-width: 340px; /* Prevent expansion beyond this */
	background: var(--panel);
	border-left: 1px solid #1f2630;
	display: flex;
	flex-direction: column;
	transition: width 0.3s ease, min-width 0.3s ease;
	z-index: 20;
	flex-shrink: 0;
	height: 100%;
	max-height: 100%; /* Don't expand beyond container */
	position: relative;
	overflow: hidden; /* Prevent content overflow */
}

/* Wider chat on larger screens (like Twitch) */
@media (min-width: 1400px) {
	.chat-panel {
		width: 400px;
		max-width: 400px;
	}
}

@media (min-width: 1800px) {
	.chat-panel {
		width: 450px;
		max-width: 450px;
	}
}

/* Hidden state - collapsed to the right */
.chat-panel.hidden {
	width: 0;
	min-width: 0;
	overflow: hidden;
	border-left: none;
}

.chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid #1f2630;
	background: rgba(0, 0, 0, 0.2);
}

.chat-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}

.chat-toggle {
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: all 0.2s;
}

.chat-toggle:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.1);
}

.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.chat-loading {
	text-align: center;
	color: var(--muted);
	padding: 20px;
	font-size: 14px;
}

.chat-message {
	display: flex;
	gap: 12px;
	animation: slideInRight 0.2s ease;
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.chat-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--brand);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 14px;
}

.chat-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.chat-message-content {
	flex: 1;
	min-width: 0;
}

.chat-username {
	font-weight: 600;
	font-size: 14px;
	color: var(--text);
	margin-bottom: 2px;
}

.chat-text {
	color: var(--text);
	font-size: 14px;
	word-wrap: break-word;
	line-height: 1.4;
}

.chat-timestamp {
	font-size: 11px;
	color: var(--muted);
	margin-top: 4px;
}

/* System messages (join/leave) */
.chat-system-message {
	display: flex;
	justify-content: center;
	padding: 1px 12px;
	margin: -1px 0;
}

.chat-system-text {
	font-size: 13px;
	color: var(--muted);
	font-style: italic;
	text-align: center;
}

.chat-input-wrap {
	display: flex;
	gap: 8px;
	padding: 16px;
	border-top: 1px solid #1f2630;
	background: rgba(0, 0, 0, 0.2);
}

.chat-input {
	flex: 1;
	padding: 10px 12px;
	background: var(--bg);
	border: 1px solid #1f2630;
	border-radius: 8px;
	color: var(--text);
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s;
}

.chat-input:focus {
	border-color: var(--brand);
}

.chat-send-btn {
	padding: 10px 20px;
	background: var(--brand);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.chat-send-btn:hover {
	background: #4a8fd9;
	transform: translateY(-1px);
}

.chat-send-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Chat login button - shown when user is not logged in */
.chat-login-btn {
	width: 100%;
	padding: 14px 20px;
	background: var(--brand);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.chat-login-btn:hover {
	background: #4a8fd9;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(90, 169, 255, 0.3);
}

.chat-login-btn:active {
	transform: translateY(0);
}

/* Chat toggle FAB - hidden on desktop, shown on mobile */
.chat-toggle-fab {
	display: none;
}

/* Chat toggle button in video controls */
.chat-toggle-control {
	background: transparent;
	border: none;
	color: var(--text);
	cursor: pointer;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: background 0.2s ease;
}

.chat-toggle-control:hover {
	background: rgba(255, 255, 255, 0.15);
}

.chat-toggle-control svg {
	display: block;
}

.chat-toggle-control.active {
	background: rgba(90, 169, 255, 0.2);
	color: var(--brand);
}

@media (max-width: 768px) {
	/* Mobile Layout - Responsive to orientation */
	body {
		display: flex;
		height: 100vh;
		height: 100dvh; /* Use dynamic viewport height for mobile browsers */
		overflow: hidden;
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* Mobile Topbar */
	.topbar {
		padding: 8px 12px;
		padding-top: calc(env(safe-area-inset-top) + 10px);
		padding-left: max(env(safe-area-inset-left), 12px);
		padding-right: max(env(safe-area-inset-right), 12px);
		gap: 8px;
		flex-shrink: 0;
	}

	.topbar h1 {
		font-size: 14px;
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0 60px 0 48px;
		text-align: center;
	}

	.home-btn {
		width: 36px;
		height: 36px;
		left: 8px;
	}

	.home-btn svg {
		width: 18px;
		height: 18px;
	}

	/* Show viewer count on mobile with compact styling */
	.viewer-count {
		position: absolute;
		left: 50px;
		font-size: 12px;
		padding: 4px 8px;
	}

	.topbar-user {
		right: 8px;
		max-width: 50px;
	}

	.theatre-user-avatar {
		width: 32px;
		height: 32px;
	}

	.theatre-username {
		display: none;
	}

	.theatre-login-prompt {
		font-size: 10px;
		flex-direction: column;
		gap: 2px;
		text-align: center;
		padding: 6px 8px;
	}

	.theatre-login-prompt span {
		display: none;
	}

	.theatre-login-btn {
		font-size: 10px;
		padding: 4px 8px;
	}

	/* Mobile Video Controls */
	.video-controls {
		padding: 6px 8px;
		flex-wrap: nowrap;
		gap: 6px;
		background: rgba(0, 0, 0, 0.85);
	}

	.controls-left,
	.controls-right {
		flex: 1 1 auto;
		min-width: 0;
		gap: 4px;
	}

	.controls-left {
		justify-content: flex-start;
	}

	.controls-right {
		justify-content: flex-end;
	}

	/* Volume control hidden on mobile - handled in main section */

	/* Show mute button on mobile - make it prominent */
	#muteBtn {
		display: flex !important;
		position: static;
		/* Add a subtle highlight to draw attention */
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
	}

	#muteBtn.muted {
		/* Highlight muted state more on mobile */
		background: rgba(255, 59, 48, 0.2);
		color: #ff3b30;
	}

	.status-inline {
		font-size: 10px;
		display: none;
	}

	.movie-time-inline {
		font-size: 10px;
	}

	.end-time-display {
		font-size: 11px;
		padding: 3px 6px;
	}

	.quality-select {
		font-size: 10px;
		padding: 3px 6px;
	}

	.control-btn {
		width: 36px;
		height: 36px;
	}

	.control-btn svg {
		width: 18px;
		height: 18px;
	}

	/* Mobile Chat Panel */
	.chat-panel {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
		border-radius: 0;
		box-shadow: none;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		z-index: 5; /* Below video controls */
		transition: none !important; /* Disable transitions on mobile */
		transform: none !important;
		animation: none !important;
	}

	/* Chat can be hidden on mobile */
	.chat-panel.hidden {
		display: none !important;
	}

	.chat-header {
		flex-shrink: 0;
	}

	.chat-messages {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}

	.chat-input-wrap {
		flex-shrink: 0;
		padding-bottom: max(env(safe-area-inset-bottom), 16px);
		background: var(--bg);
	}

	.chat-header h3 {
		font-size: 16px;
	}

	.chat-messages {
		font-size: 13px;
	}

	.chat-message {
		padding: 8px;
		margin-bottom: 6px;
	}

	.chat-username {
		font-size: 12px;
	}

	.chat-text {
		font-size: 13px;
	}

	.chat-time {
		font-size: 10px;
	}

	.chat-input {
		font-size: 16px; /* 16px prevents iOS auto-zoom */
		padding: 10px;
	}

	.chat-send-btn {
		font-size: 13px;
		padding: 10px 16px;
	}

	/* Mobile FAB - Keep hidden, use control button instead */
	.chat-toggle-fab {
		display: none !important;
	}

	/* Ensure video controls are above chat */
	.video-controls {
		z-index: 15 !important;
	}

	/* Mobile Video Frame - Compact to fit with chat */
	.player-wrap {
		margin: 0 !important;
		padding: 0 !important;
		max-width: 100% !important;
		flex-shrink: 0;
		/* Limit video height so chat is visible */
		max-height: 40vh;
	}

	/* Show chat toggle on mobile so users can hide/show chat */
	.chat-toggle-control {
		display: flex !important;
	}

	.theatre-container {
		padding: 0;
	}

	.video-frame {
		border-radius: 0;
		border: none;
		box-shadow: none;
		width: 100%;
		margin: 0;
	}

	.video-frame video {
		max-height: 40vh;
		object-fit: contain;
	}

	/* Optimize overlay for mobile */
	.overlay {
		padding: 20px;
	}

	.cta {
		font-size: 16px;
		padding: 14px 28px;
	}

	/* Video info positioned better on mobile */
	.video-info-top {
		top: 8px;
		right: 8px;
		left: 8px;
	}

	/* Desktop CSS-based Fullscreen & Mobile Native Fullscreen Support */
	.video-frame.fullscreen,
	.video-frame:fullscreen,
	.video-frame:-webkit-full-screen,
	.video-frame:-moz-full-screen,
	.video-frame:-ms-fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		max-width: 100vw;
		max-height: 100vh;
		margin: 0;
		border-radius: 0;
		z-index: 9999;
		background: #000;
	}

	.video-frame.fullscreen video,
	.video-frame:fullscreen video,
	.video-frame:-webkit-full-screen video,
	.video-frame:-moz-full-screen video,
	.video-frame:-ms-fullscreen video {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* iOS native video fullscreen */
	video::-webkit-media-controls-panel {
		display: flex !important;
	}

	video::-webkit-media-controls-play-button,
	video::-webkit-media-controls-timeline,
	video::-webkit-media-controls-current-time-display,
	video::-webkit-media-controls-time-remaining-display,
	video::-webkit-media-controls-fullscreen-button {
		display: flex !important;
	}
}

/* ============================================
   MOBILE PORTRAIT - Vertical Stack
   ============================================ */

@media (max-width: 768px) and (orientation: portrait) {
	body {
		flex-direction: column;
	}

	.theatre-container {
		flex-direction: column !important;
		flex: 1;
		min-height: 0;
	}

	.video-frame {
		display: grid;
		grid-template-rows: auto 1fr;
		grid-template-columns: 100%;
		flex: 1;
		min-height: 0;
	}

	.video-frame video {
		grid-row: 1;
		grid-column: 1;
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
		object-fit: contain;
		z-index: 1;
	}

	/* Video controls overlay on the video (grid row 1) */
	.video-controls {
		grid-row: 1;
		grid-column: 1;
		position: relative;
		align-self: end;
		bottom: auto;
		left: 0;
		right: 0;
		z-index: 10 !important;
		pointer-events: none;
	}

	.video-controls.show {
		pointer-events: auto;
	}

	.video-controls > * {
		pointer-events: auto;
	}

	/* Overlay also on grid row 1 */
	.overlay {
		grid-row: 1;
		grid-column: 1;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		z-index: 8;
	}

	.video-info-top {
		grid-row: 1;
		grid-column: 1;
		position: absolute;
		top: 8px;
		right: 8px !important;
		left: 8px !important;
		bottom: auto;
		z-index: 11;
	}

	/* Keep video-info-top at edges even when chat is open in portrait */
	.chat-panel:not(.hidden) ~ .video-info-top,
	.video-frame:has(.chat-panel:not(.hidden)) .video-info-top {
		right: 8px !important;
		left: 8px !important;
	}

	/* Chat panel in grid row 2 */
	.chat-panel {
		grid-row: 2;
		grid-column: 1;
		position: relative !important;
		left: 0 !important;
		right: 0 !important;
		min-height: 0;
		border-left: none !important;
		border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
		width: 100% !important;
		max-width: 100% !important;
		z-index: 5 !important;
		transform: none !important;
	}

	.chat-panel.hidden {
		display: none !important;
	}

	.player-wrap {
		flex-shrink: 0;
	}

	/* Show chat toggle in portrait */
	.chat-toggle-control {
		display: flex !important;
	}
}

/* ============================================
   MOBILE LANDSCAPE - Horizontal Layout
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
	body {
		flex-direction: column;
	}

	.theatre-container {
		flex-direction: row !important;
		flex: 1;
		padding: 0;
		min-height: 0;
	}

	.video-frame {
		flex-direction: row !important;
		height: 100%;
		max-height: 100%;
		min-height: 0;
		aspect-ratio: unset; /* Remove aspect ratio constraint */
	}

	.video-frame video {
		width: 100%;
		height: 100%;
		max-height: 100%;
		aspect-ratio: 16/9; /* Video maintains 16:9 */
		object-fit: contain;
	}

	.player-wrap {
		max-height: 100%;
		flex: 1;
		min-width: 0;
	}

	.chat-panel {
		width: 280px !important;
		max-width: 280px !important;
		min-width: 280px !important;
		border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
		border-top: none !important;
		flex: 0 0 280px;
	}

	.chat-panel.hidden {
		display: none !important;
		width: 0 !important;
		min-width: 0 !important;
		flex: 0 !important;
	}

	/* Adjust controls for chat in landscape when visible */
	.chat-panel:not(.hidden) ~ .video-controls,
	.video-frame:has(.chat-panel:not(.hidden)) .video-controls {
		right: 280px !important;
		z-index: 15 !important;
	}

	/* When chat is hidden, controls span full width */
	.video-controls {
		right: 0 !important;
		z-index: 15 !important;
	}

	.chat-panel:not(.hidden) ~ .overlay,
	.video-frame:has(.chat-panel:not(.hidden)) .overlay {
		right: 280px !important;
	}

	.overlay {
		right: 0 !important;
	}

	.chat-panel:not(.hidden) ~ .video-info-top,
	.video-frame:has(.chat-panel:not(.hidden)) .video-info-top {
		right: 288px !important;
		left: 8px !important;
	}

	.video-info-top {
		right: 8px !important;
		left: 8px !important;
	}

	/* Show chat toggle in landscape mode */
	.chat-toggle-control {
		display: flex !important;
	}
}

/* ============================================
   MOBILE CUSTOM FULLSCREEN FALLBACK
   ============================================ */

/* CSS-based fullscreen for mobile devices that don't support Fullscreen API */
body.mobile-fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	padding: 0;
	overflow: hidden;
}

body.mobile-fullscreen .topbar {
	display: none;
}

body.mobile-fullscreen .theatre-container {
	padding: 0;
	width: 100vw;
	height: 100vh;
}

body.mobile-fullscreen .video-frame.mobile-fs-active {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	border-radius: 0;
	z-index: 99999;
	background: #000;
}

body.mobile-fullscreen .video-frame.mobile-fs-active video {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Keep controls visible in custom mobile fullscreen */
body.mobile-fullscreen .video-controls {
	z-index: 100000;
}

body.mobile-fullscreen .video-info-top {
	z-index: 100000;
}