@tailwind base;
@tailwind components;
@tailwind utilities;

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 240 10% 3.9%;
		--card: 0 0% 100%;
		--card-foreground: 240 10% 3.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 240 10% 3.9%;
		--primary: 240 5.9% 10%;
		--primary-foreground: 0 0% 98%;
		--secondary: 240 4.8% 95.9%;
		--secondary-foreground: 240 5.9% 10%;
		--muted: 240 4.8% 95.9%;
		--muted-foreground: 240 3.8% 46.1%;
		--accent: 240 4.8% 95.9%;
		--accent-foreground: 240 5.9% 10%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 0 0% 98%;
		--border: 240 5.9% 90%;
		--input: 240 5.9% 90%;
		--ring: 240 10% 3.9%;
		--chart-1: 12 76% 61%;
		--chart-2: 173 58% 39%;
		--chart-3: 197 37% 24%;
		--chart-4: 43 74% 66%;
		--chart-5: 27 87% 67%;
		--radius: 0.5rem;
	}
	.dark {
		--background: 240 10% 3.9%;
		--foreground: 0 0% 98%;
		--card: 240 10% 3.9%;
		--card-foreground: 0 0% 98%;
		--popover: 240 10% 3.9%;
		--popover-foreground: 0 0% 98%;
		--primary: 0 0% 98%;
		--primary-foreground: 240 5.9% 10%;
		--secondary: 240 3.7% 15.9%;
		--secondary-foreground: 0 0% 98%;
		--muted: 240 3.7% 15.9%;
		--muted-foreground: 240 5% 64.9%;
		--accent: 240 3.7% 15.9%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 0% 98%;
		--border: 240 3.7% 15.9%;
		--input: 240 3.7% 15.9%;
		--ring: 240 4.9% 83.9%;
		--chart-1: 220 70% 50%;
		--chart-2: 160 60% 45%;
		--chart-3: 30 80% 55%;
		--chart-4: 280 65% 60%;
		--chart-5: 340 75% 55%;
	}
}

@layer base {
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
	}
}

.scrollbar-custom::-webkit-scrollbar {
	width: 6px; /* Thin scrollbar */
}

.scrollbar-custom::-webkit-scrollbar-thumb {
	background-color: #9ca3af; /* Gray thumb */
	border-radius: 10px; /* Rounded corners */
}

.scrollbar-custom::-webkit-scrollbar-track {
	background-color: #f3f4f6; /* Light track */
	border-radius: 10px;
}

/* Firefox */
.scrollbar-custom {
	scrollbar-width: thin;
	scrollbar-color: #9ca3af #f3f4f6;
}

.speaker-view {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
.spotlight {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.str-video__participant-view {
	height: 100%;
	width: auto;
	aspect-ratio: auto;
}

.str-video__participant-view--no-video {
	width: 100%;
}
.participants-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	height: 160px;
	min-height: 160px;
	overflow-x: scroll;
	scrollbar-width: none;
}
.participants-bar::-webkit-scrollbar {
	display: none;
}

.participant-tile {
	width: 240px;
	min-width: 240px;
	margin: 30;
}

.str-video__participant-view {
	aspect-ratio: auto;
	height: 50vh;
}

.str-video__call-stats {
	max-width: 500px;
	position: relative;
}

.str-video__speaker-layout__wrapper {
	max-height: 700px;
}

.str-video__participant-details {
	color: white;
}

.str-video__menu-container {
	color: white;
}

.str-video__notification {
	color: white;
}

.str-video__participant-list {
	background-color: #1c1f2e;
	padding: 10px;
	border-radius: 10px;
	color: white;
	height: 100%;
}

.str-video__call-controls__button {
	height: 40px;
}

.glassmorphism {
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.glassmorphism2 {
	background: rgba(18, 17, 17, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.chat-container {
	display: flex;
	height: 100vh;
}

.channel-list {
	width: 25%;
	background: #f8f9fa; /* Light background for better contrast */
	border-right: 1px solid #ddd;
	overflow-y: auto;
}

.chat-panel {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	background: #fff; /* White background */
}
