/*
 * Copyright (C) 2026 Fluxer Contributors
 *
 * This file is part of Fluxer.
 *
 * Fluxer is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Fluxer is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
 */

:global(.lk-grid-layout) {
	--lk-col-count: 1;
	--lk-row-count: 1;
	--grid-gap: 0.75rem;
	display: grid;
	grid-template-columns: repeat(var(--lk-col-count), 1fr);
	gap: var(--grid-gap);
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	padding: 0;
	place-items: center;
	align-content: center;
	position: relative;
}

:global(.lk-grid-layout[data-lk-pagination='true']) {
	padding-bottom: calc(var(--grid-gap) * 2);
}

:global(.lk-carousel) {
	--grid-gap: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	padding: var(--grid-gap);
	padding-top: 0;
	padding-bottom: 0;
	min-width: 0;
	width: 100%;
	flex-shrink: 1;
}

:global(.lk-carousel::-webkit-scrollbar) {
	width: 6px;
	height: 6px;
}

:global(.lk-carousel::-webkit-scrollbar-track) {
	background: transparent;
}

:global(.lk-carousel::-webkit-scrollbar-thumb) {
	background: var(--scrollbar-thumb-bg);
	border-radius: 3px;
}

:global(.lk-carousel::-webkit-scrollbar-thumb:hover) {
	background: var(--scrollbar-thumb-bg-hover);
}

:global(:root) {
	--voice-surface-0: var(--background-primary);
	--voice-surface-1: var(--background-secondary);
	--voice-surface-2: var(--background-secondary-alt);
	--voice-surface-3: var(--background-tertiary);
	--voice-surface-4: var(--background-header-secondary);
	--voice-surface-5: var(--background-header-primary-hover);
	--voice-overlay-base: color-mix(in srgb, black 72%, var(--background-primary));
	--voice-overlay-strong: color-mix(in srgb, var(--voice-overlay-base) 78%, transparent);
	--voice-overlay: color-mix(in srgb, var(--voice-overlay-base) 62%, transparent);
	--voice-overlay-soft: color-mix(in srgb, var(--voice-overlay-base) 46%, transparent);
	--voice-overlay-subtle: color-mix(in srgb, var(--voice-overlay-base) 32%, transparent);
	--voice-overlay-light: color-mix(in srgb, var(--voice-text-strong) 12%, transparent);
	--voice-overlay-light-strong: color-mix(in srgb, var(--voice-text-strong) 20%, transparent);
	--voice-overlay-light-bold: color-mix(in srgb, var(--voice-text-strong) 48%, transparent);
	--voice-text-strong: var(--text-primary);
	--voice-text-muted: var(--text-secondary);
	--voice-text-subtle: var(--text-tertiary);
	--voice-shadow-base: color-mix(in srgb, var(--background-primary) 12%, black);
	--voice-shadow-strong: color-mix(in srgb, var(--voice-shadow-base) 40%, transparent);
	--voice-shadow-medium: color-mix(in srgb, var(--voice-shadow-base) 30%, transparent);
	--voice-shadow-soft: color-mix(in srgb, var(--voice-shadow-base) 20%, transparent);
	--voice-status-success: var(--status-online);
	--voice-status-success-bg: color-mix(in srgb, var(--voice-status-success) 20%, transparent);
	--voice-status-success-bg-solid: color-mix(in srgb, var(--voice-status-success) 20%, var(--voice-surface-2));
	--voice-status-success-bg-strong: color-mix(in srgb, var(--voice-status-success) 30%, transparent);
	--voice-status-success-bg-strong-solid: color-mix(in srgb, var(--voice-status-success) 30%, var(--voice-surface-2));
	--voice-status-warning: var(--status-warning);
	--voice-status-warning-alt: var(--status-idle);
	--voice-status-caution: var(--alert-caution-color);
	--voice-status-warning-bg: color-mix(in srgb, var(--voice-status-warning-alt) 20%, transparent);
	--voice-status-danger: var(--status-danger);
	--voice-status-danger-bg: color-mix(in srgb, var(--voice-status-danger) 20%, transparent);
	--voice-status-danger-bg-solid: color-mix(in srgb, var(--voice-status-danger) 20%, var(--voice-surface-2));
	--voice-status-danger-bg-strong: color-mix(in srgb, var(--voice-status-danger) 30%, transparent);
	--voice-status-danger-bg-strong-solid: color-mix(in srgb, var(--voice-status-danger) 30%, var(--voice-surface-2));
	--voice-header-gradient: linear-gradient(
		to bottom,
		var(--voice-overlay-strong) 0%,
		var(--voice-overlay) 46%,
		transparent 100%
	);
	--voice-footer-gradient: linear-gradient(
		to top,
		var(--voice-overlay-strong) 0%,
		var(--voice-overlay-soft) 46%,
		transparent 100%
	);
}

.lkParticipantTile {
	--speaking-indicator-width: 3.5px;
	position: relative;
	display: flex;
	flex-direction: column;
	container-type: size;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--voice-surface-2);
	width: 100%;
	aspect-ratio: 16 / 9;
	max-width: 100%;
}

:global(.lk-carousel) .lkParticipantTile {
	flex-shrink: 0;
	width: min(100%, 360px);
	height: auto;
	min-width: 0;
	aspect-ratio: 16 / 9;
	margin-inline: auto;
}

.lkParticipantTile::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	border: 0px solid var(--voice-status-success);
	transition-property: border;
	transition-delay: 0.5s;
	transition-duration: 0.4s;
	pointer-events: none;
}

.pinnedParticipant::after {
	border-width: 0 !important;
}

.lkParticipantTile[data-speaking='true']::after {
	transition-delay: 0s;
	transition-duration: 0.2s;
	border-width: var(--speaking-indicator-width);
}

.lkParticipantTile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.lkParticipantTile[data-source='screen_share'] {
	background-color: var(--voice-surface-0);
}

.lkParticipantTile[data-source='screen_share'] video {
	object-fit: contain;
}

.lkParticipantPlaceholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--voice-surface-3);
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	pointer-events: none;
	border-radius: var(--radius-lg);
}

.lkParticipantTile[data-video-muted='true'] .lkParticipantPlaceholder {
	opacity: 1;
}

.lkParticipantPlaceholder .avatar {
	font-size: 3rem;
	font-weight: 600;
	color: var(--text-primary);
}

.lkParticipantMetadata {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	left: 0.5rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	line-height: 1;
	z-index: 10;
	min-width: 0;
}

.participantMetadataLabel {
	--participant-metadata-max-width: 34ch;
	display: none;
	align-items: center;
	gap: 0;
	overflow: hidden;
	white-space: nowrap;
	max-width: var(--participant-metadata-max-width);
	margin-left: 0;
}

.participantName {
	margin-left: 0.375rem;
}

.participantConn {
	margin-left: 0.25rem;
}

:global(.window-focused) .voiceRoot.pointerActive .participantMetadataLabel,
:global(.window-focused) .voiceRoot:focus-within .participantMetadataLabel,
.voiceRoot.contextMenuActive .participantMetadataLabel,
.voiceRoot.keyboardModeActive .participantMetadataLabel {
	display: inline-flex;
}

.lkParticipantMetadataItem {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0.375rem 0.5rem;
	background-color: var(--voice-surface-1);
	border-radius: var(--radius-md);
	color: var(--voice-text-strong);
	font-size: 0.875rem;
	font-weight: 500;
	min-width: 0;
}

.lkParticipantIcons {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.lkParticipantMetadataItem > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.lkParticipantMetadataItem:first-child {
	flex: 0 1 auto;
	min-width: 0;
}

.lkParticipantMetadataControls {
	flex-shrink: 0;
	padding: 0;
}

.lkParticipantTile .lkParticipantMetadataControls {
	opacity: 0;
	pointer-events: none;
}

.lkParticipantTile:hover .lkParticipantMetadataControls,
.lkParticipantTile:focus-within .lkParticipantMetadataControls {
	opacity: 1;
	pointer-events: auto;
}

.lkFocusToggle {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.375rem;
	background-color: var(--voice-surface-1);
	border-radius: var(--radius-md);
	color: var(--voice-text-strong);
	opacity: 0;
	border: none;
	cursor: pointer;
	z-index: 10;
}

.lkFocusToggle:hover {
	background-color: var(--voice-surface-2);
}

.lkParticipantTile:hover .lkFocusToggle,
.lkParticipantTile:focus-within .lkFocusToggle {
	opacity: 1;
	pointer-events: auto;
}

.gridLayoutWrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100%;
	height: 100%;
	overflow: visible;
	padding: 1rem;
	box-sizing: border-box;
}

.gridLayoutWrapperCompact {
	padding: 0.4rem 0.65rem 0.65rem;
}

.focusLayoutContainer {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.focusLayoutScroller {
	flex: 1 1 auto;
	display: flex;
	width: 100%;
	min-width: 0;
	min-height: 0;
}

.focusLayoutScrollerContent {
	width: 100%;
	min-width: 0;
	min-height: 0;
}

.gridLayoutScroller {
	display: flex;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

.gridLayoutStaticViewport {
	overflow: hidden;
}

.gridLayoutScrollerContent {
	width: 100%;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.gridLayoutScrollBody {
	min-height: 100%;
	height: 100%;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

.gridLayoutScrollBodyOverflow {
	justify-content: flex-start;
}

.gridLayoutScrollBodyCompact {
	min-height: 100%;
}

.focusLayoutScrollBody {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: 1rem;
	padding-bottom: 0;
}

.focusExpandedScrollBody {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	gap: 0.75rem;
	padding-bottom: 1rem;
}

.focusExpandedMainSection {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: 0.125rem;
	flex: 0 0 auto;
}

.focusExpandedMainGridViewport {
	width: min(100%, calc(var(--focus-expanded-main-max-height) * 16 / 9));
	max-width: 1520px;
	aspect-ratio: 16 / 9;
	min-height: 180px;
	max-height: var(--focus-expanded-main-max-height);
	overflow: hidden;
}

.focusExpandedMainGridViewport > * {
	width: 100%;
	height: 100%;
}

.focusExpandedToggleRow {
	width: min(96%, 1680px);
	max-width: 1680px;
	margin-inline: auto;
	display: flex;
	justify-content: center;
	padding-top: 0.125rem;
	padding-bottom: 0.25rem;
	flex: 0 0 auto;
}

.carouselWrapper {
	flex: 0 0 auto;
	min-width: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: 100%;
	max-height: var(--carousel-row-height);
	margin-left: 0;
	margin-right: 0;
}

.carouselWrapper :global(.lk-carousel) {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0.5rem;
}

.carouselInner {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	min-width: 0;
}

.carouselToggleWrap {
	position: absolute;
	left: 50%;
	bottom: 0.5rem;
	transform: translateX(-50%);
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	z-index: 60;
}

.carouselToggle {
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--voice-surface-4);
	color: var(--text-primary);
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid var(--voice-overlay-light);
	box-shadow: 0 4px 16px var(--voice-shadow-strong);
	z-index: 1;
}

.carouselToggle:hover {
	background-color: var(--voice-surface-5);
}

.focusLayoutMainWrapper {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.focusMiniGridSection {
	width: min(96%, 1680px);
	max-width: 1680px;
	margin-inline: auto;
	padding: 0 clamp(0.5rem, 1.2vw, 1.25rem) 1rem;
	box-sizing: border-box;
	flex: 0 0 auto;
}

.focusMiniGrid {
	--focus-mini-columns: 1;
	--focus-mini-grid-gap: 0.75rem;
	--focus-mini-tile-max-width: 380px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	width: 100%;
	gap: var(--focus-mini-grid-gap);
}

.focusMiniGridTile {
	width: min(
		calc((100% - (var(--focus-mini-columns) - 1) * var(--focus-mini-grid-gap)) / var(--focus-mini-columns)),
		var(--focus-mini-tile-max-width)
	);
	max-width: min(
		calc((100% - (var(--focus-mini-columns) - 1) * var(--focus-mini-grid-gap)) / var(--focus-mini-columns)),
		var(--focus-mini-tile-max-width)
	);
	min-width: 0;
	flex: 0 0 auto;
	flex-shrink: 0;
}

.focusMiniGridTile .lkParticipantTile {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.focusLayoutMain {
	position: relative;
	--focus-main-aspect-ratio-value: 1.7777777778;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: min(76dvh, calc(100cqh - 3rem));
	aspect-ratio: var(--focus-main-aspect-ratio-value);
	overflow: hidden;
	z-index: 1;
	margin-inline: auto;
}

.focusLayoutContent.carouselCollapsed .focusLayoutMain .lkParticipantTile {
	border-radius: 0;
}

.focusLayoutContent.carouselCollapsed .focusLayoutMain .lkParticipantTile::after {
	border-radius: 0;
}

.focusLayoutContent.carouselCollapsed .focusLayoutMain .lkParticipantTile video {
	border-radius: 0;
}

.focusLayoutContent.carouselCollapsed .focusLayoutMain .lkParticipantPlaceholder {
	border-radius: 0;
}

.focusLayoutMain .lkParticipantTile {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.focusLayoutMain .lkParticipantTile[data-source='screen_share'] {
	border-radius: 0;
}

.focusLayoutMain .lkParticipantTile::after {
	border-radius: 0;
}

.focusLayoutMain .lkParticipantTile[data-source='screen_share']::after {
	border-radius: 0;
}

.focusLayoutMain .lkParticipantTile video {
	border-radius: 0;
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.focusLayoutMain .lkParticipantTile[data-source='screen_share'] video {
	border-radius: 0;
	object-fit: contain;
}

.focusLayoutMain .lkParticipantPlaceholder {
	border-radius: 0;
}

.focusLayoutMain .lkParticipantTile[data-source='screen_share'] .lkParticipantPlaceholder {
	border-radius: 0;
}

.lkParticipantTile[data-source='screen_share'] .lkParticipantPlaceholder {
	background-color: var(--voice-surface-0) !important;
}

.focusLayoutContent {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 100%;
	padding: 1rem 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	box-sizing: border-box;
	container-type: size;

	--carousel-row-height: 180px;
	--content-padding: 2rem;
	--focus-mini-row-reserved-height: 170px;
	--focus-expanded-main-max-height: min(46dvh, calc(100cqh - 18rem));
}

.focusLayoutContentCompact {
	padding: 0;
	--carousel-row-height: 104px;
	--content-padding: 0.5rem;
	--focus-mini-row-reserved-height: 116px;
	--focus-expanded-main-max-height: min(82dvh, calc(100cqh - 5rem));
}

.focusLayoutContentCompact .focusLayoutScrollBody {
	gap: 0.5rem;
}

.focusLayoutContentCompact .focusLayoutMainWrapper {
	padding-inline: 0;
}

.focusLayoutContentCompact .focusLayoutMain {
	width: 100%;
	max-width: 100%;
	max-height: min(90dvh, calc(100cqh - 0.5rem));
	border-radius: 0;
}

.focusLayoutContentCompact .focusLayoutMain .lkParticipantTile,
.focusLayoutContentCompact .focusLayoutMain .lkParticipantTile::after,
.focusLayoutContentCompact .focusLayoutMain .lkParticipantPlaceholder,
.focusLayoutContentCompact .focusLayoutMain .lkParticipantTile video {
	border-radius: 0;
}

.focusLayoutContentCompact .focusMiniGrid {
	--focus-mini-grid-gap: 0.5rem;
	--focus-mini-tile-max-width: 212px;
}

.focusLayoutContentCompact .focusMiniGridSection {
	width: 100%;
	padding: 0 0.5rem 0.5rem;
}

.focusLayoutContentNoParticipants {
	overflow: hidden;
}

.focusLayoutContentNoParticipants .focusLayoutScrollBody {
	height: 100%;
}

.focusLayoutContentNoParticipants .focusLayoutMain {
	max-height: 100%;
}

.focusLayoutContentCompact.focusLayoutContentNoParticipants .focusLayoutMain {
	max-height: 100%;
}

.focusLayoutParticipantsExpanded .focusLayoutMain {
	max-height: min(68dvh, calc(100cqh - 8rem));
}

.focusLayoutParticipantsExpanded .focusLayoutScroller {
	min-height: 0;
}

.focusLayoutContentFullscreen {
	padding: 0.5rem 0;
	--content-padding: 0;
}

.focusLayoutContentFullscreen .focusLayoutMainWrapper {
	max-width: none;
	width: 100%;
}

.focusLayoutContentFullscreen .focusLayoutMain {
	margin-inline: auto;
}

@container (min-width: 620px) {
	.focusMiniGrid {
		--focus-mini-columns: 2;
	}
}

@container (min-width: 760px) {
	.focusMiniGrid {
		--focus-mini-columns: 3;
	}
}

@container (min-width: 1040px) {
	.focusMiniGrid {
		--focus-mini-columns: 4;
	}
}

.focusLayoutContent.carouselCollapsed .carouselToggleWrap {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	margin: 0;
	padding: 0;
	z-index: 60;
	pointer-events: auto;
}

.focusLayoutContent.carouselCollapsed.focusLayoutContentFullscreen {
	padding-top: 0.5rem;
	padding-bottom: 4rem;
}

.voiceCallFullscreen {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 39999;
	background-color: var(--voice-surface-0);
}

.voiceRoot {
	position: relative;
	--voice-hud-opacity: 0;
	--voice-hud-pointer-events: none;
	--voice-hud-transition-duration: 0ms;
	--voice-hud-transition-easing: cubic-bezier(0.2, 0, 0, 1);
}

.voiceRoot.forceHudVisible {
	--voice-hud-opacity: 1;
	--voice-hud-pointer-events: auto;
}

:global(.window-focused) .voiceRoot.pointerActive,
:global(.window-focused) .voiceRoot:focus-within,
.voiceRoot.contextMenuActive,
.voiceRoot.keyboardModeActive {
	--voice-hud-opacity: 1;
	--voice-hud-pointer-events: auto;
}

.voiceRoot
	:where(
		.voiceChrome,
		.carouselToggleWrap,
		.lkParticipantMetadata,
		.lkParticipantTile .lkParticipantMetadataControls,
		.lkParticipantTile .lkFocusToggle
	) {
	opacity: var(--voice-hud-opacity);
	pointer-events: var(--voice-hud-pointer-events);
	transition: opacity var(--voice-hud-transition-duration) var(--voice-hud-transition-easing);
}

.voiceRoot .lkParticipantTile:is(:hover, :focus-within) .lkParticipantMetadataControls,
.voiceRoot .lkParticipantTile:is(:hover, :focus-within) .lkFocusToggle {
	opacity: var(--voice-hud-opacity);
	pointer-events: var(--voice-hud-pointer-events);
}

.tileContextMenuActive {
	--voice-hud-opacity: 1;
	--voice-hud-pointer-events: auto;
}

.voiceHeader {
	background: transparent !important;
	border-bottom: none !important;
	box-shadow: none !important;
	position: relative;
	isolation: isolate;
}

.voiceHeader::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--voice-header-gradient);
	pointer-events: none;
	z-index: -1;
}

:global(.lk-pagination-indicator) {
	position: absolute;
	left: 50%;
	bottom: 0.75rem;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	background: var(--voice-surface-1);
	border-radius: 9999px;
	padding: 4px 8px;
}

:global(.lk-pagination-indicator > span) {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: var(--voice-overlay-light-bold);
}

:global(.lk-pagination-indicator > span[data-lk-active]) {
	background: var(--voice-text-strong);
}

:global(.lk-pagination-control) {
	position: absolute;
	left: 50%;
	bottom: 0.75rem;
	transform: translateX(-50%);
	background: var(--voice-surface-1);
	border-radius: 9999px;
	padding: 4px 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--voice-text-strong);
	pointer-events: auto;
}

:global(.lk-pagination-control .lk-pagination-count) {
	display: none;
}

@media (max-width: 768px) {
	.mainContent {
		--voice-call-horizontal-padding: 1rem;
		padding-left: 1rem;
		padding-right: 1rem;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0.5rem;
	}

	.focusLayoutMain {
		padding-top: 0;
		padding-bottom: 0;
	}

	.focusLayoutMain .lkParticipantTile {
		max-width: 100%;
	}

	.focusMiniGrid {
		--focus-mini-tile-size: clamp(var(--focus-mini-tile-min-width), 24vw, var(--focus-mini-tile-max-width));
		--focus-mini-grid-gap: 0.5rem;
	}

	.focusMiniGridTile {
		max-width: var(--focus-mini-tile-max-width);
	}

	.gridLayoutWrapper {
		padding-top: 0;
		padding-bottom: 0;
	}

	.focusLayoutContent {
		--carousel-row-height: 140px;
		--content-padding: 1.5rem;
		--focus-mini-row-reserved-height: 132px;
	}

	.carouselToggleWrap {
		margin-top: 0.5rem;
	}

	.voiceRoot {
		--voice-hud-opacity: 1;
		--voice-hud-pointer-events: auto;
	}

	.controlBarContainer {
		--voice-control-horizontal-padding: 1rem;
		--voice-control-top-padding: 1.25rem;
		--voice-control-bottom-padding: calc(1rem + env(safe-area-inset-bottom, 0px));
	}

	.fullscreenButtonWrap {
		bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
		right: 1rem;
	}
}

.screenshareGridLayout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.screenshareGridLayout .lkParticipantTile {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
}

.root {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-areas:
		'header'
		'main'
		'footer';
	height: 100%;
	width: 100%;
	background-color: #000;
}

.chrome {
	grid-area: header;
	position: relative;
	z-index: 20;
	display: flex;
	height: 64px;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	padding-left: 1rem;
	padding-right: 1rem;
	border-top: none;
	box-shadow: none;
}

.chrome::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--voice-header-gradient);
	pointer-events: none;
	z-index: -1;
}

.chromeMobile {
	height: 56px;
}

.channelInfoContainer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.backButton {
	display: flex;
	height: 32px;
	width: 32px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
	transition-duration: 150ms;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	cursor: pointer;
}

.backButton:hover {
	background-color: var(--background-modifier-selected);
}

.backButtonMobileOnly {
	display: none;
}

@media (max-width: 768px) {
	.backButtonDesktopOnly {
		display: none;
	}

	.backButtonMobileOnly {
		display: flex;
	}
}

.channelIconContainer {
	display: flex;
	height: 32px;
	width: 32px;
	align-items: center;
	justify-content: center;
}

.channelTextContainer {
	display: flex;
	flex-direction: column;
}

.channelName {
	font-weight: 600;
	color: var(--text-primary);
}

.participantCount {
	color: var(--text-secondary);
	font-size: 0.75rem;
	line-height: 1rem;
}

.controlsContainer {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.connectionStatusContainer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 6px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1rem;
}

.statusConnecting {
	background-color: var(--voice-status-warning-bg);
	color: var(--voice-status-warning);
}

.statusReconnecting {
	background-color: var(--voice-status-warning-bg);
	color: var(--voice-status-warning);
}

.statusDisconnected {
	background-color: var(--voice-status-danger-bg);
	color: var(--voice-status-danger);
}

.statusConnected {
	background-color: var(--voice-status-success-bg);
	color: var(--voice-status-success);
}

.connectionStatusDot {
	height: 8px;
	width: 8px;
	border-radius: 9999px;
	background-color: currentColor;
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.headerButton {
	display: flex;
	height: 32px;
	width: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	color: var(--text-primary);
	transition-duration: 150ms;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	cursor: pointer;
}

.headerButton:hover {
	background-color: var(--background-modifier-selected);
}

.headerButtonActive {
	background-color: var(--background-modifier-selected);
}

.mainContent {
	grid-area: main;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	--voice-call-horizontal-padding: clamp(1rem, 8vw, 14rem);
	padding-left: var(--voice-call-horizontal-padding);
	padding-right: var(--voice-call-horizontal-padding);
	min-height: 0;
	min-width: 0;
	container-type: size;
}

.mainContentFocusFullscreen {
	--voice-call-horizontal-padding: 0;
	position: relative;
	inset: auto;
	height: 100%;
	z-index: 1;
}

.controlBarContainer {
	grid-area: footer;
	position: relative;
	z-index: 30;
	display: flex;
	justify-content: center;
	background: transparent;
	--voice-control-horizontal-padding: 1.5rem;
	--voice-control-top-padding: 1.75rem;
	--voice-control-bottom-padding: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	padding-left: var(--voice-control-horizontal-padding);
	padding-right: var(--voice-control-horizontal-padding);
	padding-top: var(--voice-control-top-padding);
	padding-bottom: var(--voice-control-bottom-padding);
	pointer-events: none;
}

.controlBarContainer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	background: var(--voice-footer-gradient);
	pointer-events: none;
	transform: translateY(-100%);
}

.controlBarContainer > * {
	pointer-events: auto;
}

.fullscreenButtonWrap {
	position: absolute;
	right: clamp(1rem, 2vw, 2rem);
	bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
	z-index: 35;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.fullscreenButtonWrap button {
	background-color: var(--voice-surface-4);
	color: var(--voice-text-strong);
}

.fullscreenButtonWrap button:hover {
	background-color: var(--voice-surface-5);
}

.srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.iconMedium {
	height: 20px;
	width: 20px;
}

.iconLarge {
	height: 24px;
	width: 24px;
}

.channelIconStyling {
	height: 20px;
	width: 20px;
	color: var(--text-primary);
}

.scrollerFullWidth {
	width: 100%;
}

.carouselToggleFocusRing {
	border-radius: 9999px;
}

.voiceCallSheetContent {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.voiceCallSheetCompact {
	width: 100%;
	min-height: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.streamFocusInfo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	flex-shrink: 1;
	overflow: visible;
}

.streamFocusTopicDivider {
	margin-left: 0 !important;
	margin-right: 0 !important;
	opacity: 0.5;
}

.streamFocusStreamer {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	min-width: 0;
	flex-shrink: 1;
	overflow: visible;
}

.streamFocusStreamerName {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--voice-call-header-text, var(--text-primary));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.streamFocusSpectators {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
	cursor: pointer;
}

.headerStreamInfo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-right: 4px;
}
