:root {
	--bg: #0f1115;
	--fg: #e6e8ee;
	--muted: #a0a4b0;
	--card: #151822;
	--accent: #5c7cfa;
	--shadow: rgba(0,0,0,0.35);
	--menu-height: 80px;
	--status-height: 50px;
}

* { box-sizing: border-box; }
html, body { 
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

body {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
	color: #fff;
	font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Material Symbols Outlined Styling */
.material-symbols-outlined {
	vertical-align: middle;
	line-height: 1;
	font-size: 1.2em;
	font-variation-settings:
		'FILL' 1,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
}

.material-symbols-outlined.fs-4 {
	font-size: 1.5rem !important;
}

/* App Container */
.app-container {
	height: 100vh;
	width: 100vw;
}

/* Status Bar */
.status-bar {
	height: var(--status-height);
	background: rgba(0, 0, 0, 0.8);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	font-size: 0.9rem;
}

.status-info, .status-indicators {
	color: #e6e8ee;
}

.timer {
	font-family: 'Courier New', monospace;
	font-weight: 600;
	color: #5c7cfa;
}

/* Content Area */
.content-area {
	height: calc(100vh - var(--status-height) - var(--menu-height));
	position: relative;
	overflow: hidden;
}

/* Data Overlays */
.data-overlay, .activity-overlay, .viz-controls {
	pointer-events: none;
}

.data-overlay *, .activity-overlay *, .viz-controls * {
	pointer-events: auto;
}

.data-pill, .activity-pill {
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 25px;
	font-size: 0.85rem;
	font-weight: 500;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.data-pill i, .activity-pill i {
	font-size: 0.9rem;
}

/* Hide other participant sections by default */
#otherParticipantFlow,
#otherParticipantBPM {
	display: none !important;
}

#otherParticipantFlow.show,
#otherParticipantBPM.show {
	display: flex !important;
}

/* Activity Message Bubble */
.activity-message-bubble {
	bottom: 0px !important; /* Position just above menu bar (menu bar is ~60px + padding) */
	left: 0px !important; /* Position to the right of color selection */
	right: auto !important; /* Remove right positioning */
	min-width: 300px !important; /* Ensure minimum width */
	z-index: 1050 !important;
}

.activity-message-bubble .alert {
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(10px);
	color: white;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.activity-message-bubble .alert .material-symbols-outlined {
	font-size: 1.2rem;
}

.activity-message-content {
	display: flex;
	align-items: center;
	flex: 1;
}

/* Three.js Container */
#threejsContainer { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%;
	background: radial-gradient(circle at center, rgba(20, 30, 60, 0.3), rgba(10, 15, 30, 0.8));
}

/* Menu Bar */
.menu-bar {
	height: var(--menu-height);
	background: rgba(0, 0, 0, 0.9);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(15px);
}

.menu-btn {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	width: 140px; /* Fixed width for consistent sizing */
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 500;
}

.menu-btn:hover {
	background: rgba(92, 124, 250, 0.2);
	border-color: rgba(92, 124, 250, 0.5);
	transform: translateY(-2px);
}

.menu-btn.recording {
	background: rgba(220, 53, 69, 0.2);
	border-color: rgba(220, 53, 69, 0.5);
	color: #ff6b7a;
}

.menu-btn.activity-active {
	background: rgba(40, 167, 69, 0.2);
	border-color: rgba(40, 167, 69, 0.5);
	color: #51cf66;
}

.menu-btn.leave-btn {
	background: rgba(108, 117, 125, 0.2);
	border-color: rgba(108, 117, 125, 0.5);
}

.menu-btn.leave-btn:hover {
	background: rgba(220, 53, 69, 0.2);
	border-color: rgba(220, 53, 69, 0.5);
	color: #ff6b7a;
}

/* Icon-only menu buttons for audio/video controls */
.menu-btn.icon-only {
	width: 60px; /* Override fixed width for icon-only buttons */
	padding: 0.75rem;
	flex-direction: row;
	justify-content: center;
}

.menu-btn.icon-only .material-symbols-outlined {
	font-size: 1.5rem;
}

/* Muted/disabled states */
.menu-btn.muted {
	background: rgba(220, 53, 69, 0.2);
	border-color: rgba(220, 53, 69, 0.5);
	color: #ff6b7a;
}

.menu-btn.ai-speaking {
	background: rgba(255, 193, 7, 0.2);
	border-color: rgba(255, 193, 7, 0.5);
	color: #ffc107;
	animation: pulse-ai 1.5s infinite;
}

@keyframes pulse-ai {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.menu-btn.camera-off {
	background: rgba(220, 53, 69, 0.2);
	border-color: rgba(220, 53, 69, 0.5);
	color: #ff6b7a;
}

.menu-btn i {
	font-size: 1.25rem;
}

/* Device Status Indicators */
.device-status {
	padding: 0.25rem 0.75rem;
	border-radius: 15px;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.status-disconnected { 
	background: rgba(220, 53, 69, 0.2); 
	color: #ff6b7a;
	border: 1px solid rgba(220, 53, 69, 0.3);
}

.status-connecting { 
	background: rgba(255, 193, 7, 0.2); 
	color: #ffd43b;
	border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-connected { 
	background: rgba(25, 135, 84, 0.2); 
	color: #51cf66;
	border: 1px solid rgba(25, 135, 84, 0.3);
}

/* Join Overlay Styles */
.join-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.join-container {
	max-width: 400px;
	width: 90%;
	padding: 2rem;
}

.join-title {
	font-size: 3rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 0.5rem;
	text-shadow: 0 4px 20px rgba(92, 124, 250, 0.3);
}

.join-subtitle {
	color: #a0a4b0;
	font-size: 1.1rem;
	margin-bottom: 2rem;
}

.join-overlay .card {
	background: rgba(21, 24, 34, 0.95);
	border: 1px solid rgba(92, 124, 250, 0.2);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
}

/* Modal Styles */
.modal {
	z-index: 1055 !important;
}

.modal-backdrop {
	z-index: 1050 !important;
}

/* Dropdown menus within modals should appear above modal content */
.modal .dropdown-menu {
	z-index: 1060 !important;
}

.modal-content {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	border: 1px solid rgba(92, 124, 250, 0.3);
	color: #fff;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(15px);
}

.modal-header {
	border-bottom: 1px solid rgba(92, 124, 250, 0.3);
	padding: 1.25rem 1.5rem;
}

.modal-body {
	padding: 1.5rem;
	max-height: calc(100vh - 200px); /* Leave room for header and margins */
	overflow-y: auto;
	overflow-x: hidden;
}

.btn-close-white {
	filter: invert(1) grayscale(100%) brightness(200%);
}

/* Sensor Cards */
.sensor-card, .content-card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 1.25rem;
	transition: all 0.3s ease;
}

.sensor-card:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(92, 124, 250, 0.4);
	transform: translateY(-2px);
}

/* Remove hover effect from content cards to prevent dropdown z-index issues */
.content-card {
	transition: none;
}

.sensor-header h6, .content-card h6 {
	color: #5c7cfa;
	font-weight: 600;
	margin-bottom: 0;
}

.sensor-status {
	margin: 0.75rem 0;
}

/* Form Elements */
.card { 
	background: var(--card); 
	border-radius: 12px; 
	padding: 16px; 
	box-shadow: 0 8px 24px var(--shadow); 
}

.field { 
	display: grid; 
	gap: 6px; 
	margin-bottom: 12px; 
}

label { 
	color: var(--muted); 
	font-size: 0.9rem; 
}

input {
	background: #0f121a;
	color: var(--fg);
	border: 1px solid #23283a;
	border-radius: 8px;
	padding: 10px 12px;
}

input:disabled {
	background: #1a1d26;
	color: var(--muted);
	border-color: #1a1d26;
	cursor: not-allowed;
}

button {
	background: var(--accent);
	color: white;
	border: 0;
	border-radius: 8px;
	padding: 10px 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

button:hover { 
	filter: brightness(1.1);
	transform: translateY(-1px);
}

/* Control Elements */
#controls {
	margin-top: 16px;
	display: flex;
	gap: 12px;
	justify-content: center;
}

.control-btn {
	background: var(--card);
	border: 1px solid #23283a;
	color: var(--fg);
	padding: 8px 16px;
	font-size: 0.9rem;
}

.control-btn:hover {
	background: #1a1e2b;
	filter: none;
}

.control-btn.muted {
	background: #dc3545;
	color: white;
	border-color: #dc3545;
}

.control-btn.turn-muted {
	background: #ffc107;
	color: #212529;
	border-color: #ffc107;
	opacity: 0.8;
}

/* Turn Indicator Styling */
.turn-indicator {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1000;
	min-width: 140px;
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	transition: all 0.3s ease;
	animation: slideInRight 0.4s ease-out;
}

.turn-indicator.my-turn {
	background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(56, 142, 60, 0.9));
	color: white;
	border-color: rgba(76, 175, 80, 0.3);
}

.turn-indicator.other-turn {
	background: linear-gradient(135deg, rgba(63, 81, 181, 0.9), rgba(48, 63, 159, 0.9));
	color: white;
	border-color: rgba(63, 81, 181, 0.3);
}

.turn-indicator .turn-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.turn-indicator .turn-text {
	font-size: 0.95rem;
	line-height: 1.2;
}

.turn-indicator .turn-subtitle {
	font-size: 0.75rem;
	opacity: 0.8;
	font-weight: 400;
	margin-top: 2px;
}

.turn-indicator.my-turn .turn-icon {
	animation: pulse 2s infinite;
}

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

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.control-btn.leave {
	background: #6c757d;
	color: white;
	border-color: #6c757d;
}

/* Chat Styles */
.chat { 
	margin-top: 16px; 
}

.log { 
	height: 160px; 
	overflow: auto; 
	background: #0f121a; 
	border: 1px solid #23283a; 
	border-radius: 8px; 
	padding: 8px; 
	margin-bottom: 8px; 
	color: white;
}

.chat-inputs { 
	display: grid; 
	grid-template-columns: 1fr auto; 
	gap: 8px; 
}

/* Game Message Styles */
.game-message {
	background: linear-gradient(135deg, #2e4057 0%, #3b5998 100%);
	border-left: 4px solid #5c7cfa;
	padding: 12px 16px;
	margin: 8px 0;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.game-message strong {
	color: #5c7cfa;
	font-weight: 600;
}

/* Activity Controls and Modals */
.modal-body .card {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	color: #fff;
	margin-bottom: 0.75rem;
	cursor: pointer;
	padding: 1rem;
	transition: all 0.2s ease;
}

.modal-body .card:hover {
	background: rgba(255,255,255,0.08);
	transform: translateY(-2px);
	border-color: rgba(92, 124, 250, 0.4);
}

.modal-body .card:last-child {
	margin-bottom: 0;
}

/* Activity Section Headers */
.activity-section-header {
	margin-bottom: 1rem;
}

.activity-section-header .bg-primary {
	background-color: rgba(92, 124, 250, 0.1) !important;
}

.activity-section-header .bg-secondary {
	background-color: rgba(108, 117, 125, 0.1) !important;
}

.activity-section-header .border-primary {
	border-color: rgba(92, 124, 250, 0.25) !important;
}

.activity-section-header .border-secondary {
	border-color: rgba(108, 117, 125, 0.25) !important;
}

.activity-section-header .text-primary {
	color: #5c7cfa !important;
}

.activity-section-header .text-secondary {
	color: #adb5bd !important;
}

/* Activity cards within sections */
.modal-body .card.border-primary {
	border-color: rgba(92, 124, 250, 0.25) !important;
}

.modal-body .card.border-secondary {
	border-color: rgba(108, 117, 125, 0.25) !important;
}

.modal-body .card:hover.border-primary {
	border-color: rgba(92, 124, 250, 0.6) !important;
	box-shadow: 0 4px 12px rgba(92, 124, 250, 0.2);
}

.modal-body .card:hover.border-secondary {
	border-color: rgba(108, 117, 125, 0.6) !important;
	box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

/* Hidden video elements */
#localVideo, #remoteVideo {
	display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
	.menu-btn {
		min-width: 80px;
		padding: 0.5rem 0.75rem;
		font-size: 0.75rem;
	}
	
	.menu-btn span {
		display: none;
	}
	
	.data-pill, .activity-pill {
		font-size: 0.75rem;
		padding: 0.4rem 0.8rem;
	}
	
	.status-bar {
		font-size: 0.8rem;
		padding: 0.5rem 1rem;
	}
	
	.status-indicators .d-flex {
		gap: 1rem !important;
	}
}

/* AI Subtitles Styling */
.ai-subtitles {
	max-width: 85vw;  /* Take up most of the viewport width */
	min-width: 400px;  /* Slightly larger minimum width */
	width: 85vw;      /* Actually use most of the width */
	z-index: 1000;
}

.subtitles-content {
	font-size: 16px;
	line-height: 1.4;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.subtitles-text-container {
	display: flex;
	align-items: center;
}

#subtitles-text {
	font-weight: 500;
	text-align: center;
	word-wrap: break-word;
}

/* Typing animation for streaming text */
.subtitles-streaming {
	animation: pulse 1.5s infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* Fade in/out animations */
.ai-subtitles.fade-in {
	animation: fadeIn 0.3s ease-in;
}

.ai-subtitles.fade-out {
	animation: fadeOut 0.3s ease-out;
}

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

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

@media (max-width: 576px) {
	:root {
		--menu-height: 70px;
		--status-height: 45px;
	}
	
	.data-overlay, .activity-overlay {
		padding: 1rem !important;
	}
	
	.viz-controls {
		padding: 1rem !important;
	}
	
	.ai-subtitles {
		max-width: 95vw;  /* Use even more width on mobile */
		min-width: 280px; /* Smaller minimum for mobile */
		margin-bottom: 20px !important;
	}
	
	.subtitles-content {
		font-size: 14px;
		padding: 0.75rem 1rem !important;
	}
}