/* ── Fullscreen Settings Overlay ─────────────────────────────────────── */

.overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-index-modal, 10000);
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
	animation: fadeIn 150ms ease;
}

.modal {
	display: flex;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	max-height: 900px;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-header-secondary);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
	animation: modalIn 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes modalIn {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

/* ── Sidebar ────────────────────────────────────────────────────────── */

.sidebar {
	flex: 0 0 clamp(240px, 24%, 280px);
	background-color: var(--background-primary);
	border-right: 1px solid var(--background-header-secondary);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	scrollbar-width: thin;
}

.sidebarInner {
	padding: 16px 12px 24px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* ── Search box (top of sidebar) ─────────────────────────────────── */

.sidebarSearch {
	position: relative;
	margin-bottom: 12px;
}

.sidebarSearchInput {
	width: 100%;
	height: 36px;
	padding: 0 12px 0 36px;
	border: 1px solid var(--background-modifier-accent);
	border-radius: var(--radius-md, 8px);
	background-color: var(--background-tertiary);
	color: var(--text-primary);
	font-size: 0.875rem;
	font-family: inherit;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.sidebarSearchInput::placeholder {
	color: var(--text-tertiary);
}

.sidebarSearchInput:focus {
	border-color: var(--brand-primary, #5865f2);
}

.sidebarSearchIcon {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-tertiary);
	pointer-events: none;
}

/* ── Current user block (above categories) ──────────────────────── */

.sidebarUserBlock {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px;
	margin-bottom: 8px;
	border-radius: var(--radius-md, 8px);
}

.sidebarUserName {
	flex: 1;
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebarGroup {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 12px;
}

.sidebarCategoryTitle {
	padding: 6px 10px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-tertiary);
	user-select: none;
}

.sidebarItem {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 6px 10px;
	border: none;
	background: none;
	border-radius: var(--radius-md, 6px);
	color: var(--text-secondary);
	font-size: 0.9375rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.1s ease, color 0.1s ease;
}

.sidebarItem:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
}

.sidebarItemActive,
.sidebarItemActive:hover {
	background-color: var(--background-modifier-selected);
	color: var(--text-primary);
}

.sidebarItemDanger {
	color: var(--status-danger);
}

.sidebarItemDanger:hover {
	background-color: color-mix(in srgb, var(--status-danger) 12%, transparent);
	color: var(--status-danger);
}

.sidebarItemIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--text-tertiary);
}

.sidebarItem:hover .sidebarItemIcon,
.sidebarItemActive .sidebarItemIcon {
	color: var(--text-primary);
}

.sidebarItemDanger .sidebarItemIcon,
.sidebarItemDanger:hover .sidebarItemIcon {
	color: var(--status-danger);
}

.sidebarItemLabel {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebarDivider {
	height: 1px;
	background-color: var(--user-area-divider-color);
	margin: 8px 0;
}

/* ── Content column ─────────────────────────────────────────────────── */

.contentColumn {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--background-secondary);
	overflow: hidden;
}

.contentHeader {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
	padding: 0 32px;
	background-color: var(--background-secondary);
	flex-shrink: 0;
}

.contentTitle {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.75rem;
	color: var(--text-primary);
	margin: 0;
}

.closeButton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md, 6px);
	background: none;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	transition: background-color 0.1s, color 0.1s;
}

.closeButton:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
}

.contentScroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.contentInner {
	max-width: 740px;
	margin: 0 auto;
	padding: 32px 32px 80px;
}

/* ── Content Styles (panels) ────────────────────────────────────────── */

.title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 20px;
}

/* ── Profile tab (Fluxer-style) ──────────────────────────────────── */

/* Section header */

.profileHeader {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.profileSubheading {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.5rem;
	color: var(--text-primary);
	margin: 0;
}

.profileDescription {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--text-tertiary-muted, var(--text-tertiary));
	margin: 0;
}

/* Two-column content layout */

.profileLayout {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 1024px) {
	.profileLayout {
		flex-direction: row;
		gap: clamp(2rem, 3vw, 3.5rem);
	}
}

.profileForm {
	display: flex;
	flex: 2;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.profilePreviewColumn {
	display: flex;
	flex: 1;
	justify-content: center;
}

@media (min-width: 1024px) {
	.profilePreviewColumn {
		justify-content: flex-end;
	}
}

/* Fieldset / form field */

.profileField {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.profileFieldLabel {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--text-primary);
}

.profileInput {
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 1rem;
	background-color: var(--input-background, var(--background-tertiary));
	border: 1px solid var(--background-modifier-accent);
	border-radius: 0.5rem;
	color: var(--text-primary);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-family: inherit;
	outline: none;
	box-sizing: border-box;
	appearance: none;
	resize: none;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
		background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.profileInput::placeholder {
	color: var(--text-tertiary);
}

.profileInput:focus-within,
.profileInput:focus {
	border-color: var(--background-modifier-accent-focus, var(--brand-primary, #5865f2));
}

/* Avatar section */

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

.profileAvatarLabel {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--text-primary);
}

.profileAvatarButtonGroup {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
	.profileAvatarButtonGroup {
		flex-direction: row;
	}
}

.profileAvatarDescription {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--text-tertiary-muted, var(--text-tertiary));
}

.hiddenFileInput {
	display: none;
}

/* Accent color picker */

.accentColorRow {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.accentColorSwatch {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 4px;
	border: 1px solid var(--background-modifier-accent);
	border-radius: 0.5rem;
	background-color: var(--input-background, var(--background-tertiary));
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.accentColorSwatch::-webkit-color-swatch-wrapper {
	padding: 0;
}

.accentColorSwatch::-webkit-color-swatch {
	border: none;
	border-radius: 0.375rem;
}

.accentColorSwatch::-moz-color-swatch {
	border: none;
	border-radius: 0.375rem;
}

.accentColorHex {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0.625rem 1rem;
	background-color: var(--input-background, var(--background-tertiary));
	border: 1px solid var(--background-modifier-accent);
	border-radius: 0.5rem;
	color: var(--text-primary);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-family: 'Consolas', 'Monaco', monospace;
	text-transform: uppercase;
	outline: none;
	box-sizing: border-box;
	transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accentColorHex:focus {
	border-color: var(--background-modifier-accent-focus, var(--brand-primary, #5865f2));
}

/* Action bar (Reset / Save) */

.profileActionBar {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* ── Preview card ─────────────────────────────────────────────── */

.profilePreviewInner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.profilePreviewLabel {
	margin-bottom: 1rem;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--text-tertiary-muted, var(--text-tertiary));
}

.profilePreviewCard {
	position: relative;
	display: flex;
	width: 300px;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;
	border-radius: 0.375rem;
	border: 2.5px solid var(--brand-primary, #5865f2);
	background-color: var(--background-primary);
	padding-bottom: 0.75rem;
}

.profilePreviewHeader {
	position: relative;
	height: 140px;
	flex-shrink: 0;
}

.profilePreviewBanner {
	width: 100%;
	min-height: 105px;
	height: 105px;
	background-color: var(--brand-primary, #5865f2);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.profilePreviewBio {
	font-size: 0.8125rem;
	line-height: 1.125rem;
	color: var(--text-secondary);
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-height: 4.5rem;
	overflow: hidden;
}

.profileBioTextarea {
	width: 100%;
	min-height: 88px;
	padding: 0.625rem 1rem;
	background-color: var(--input-background, var(--background-tertiary));
	border: 1px solid var(--background-modifier-accent);
	border-radius: 0.5rem;
	color: var(--text-primary);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-family: inherit;
	outline: none;
	box-sizing: border-box;
	resize: vertical;
	transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.profileBioTextarea::placeholder {
	color: var(--text-tertiary);
}

.profileBioTextarea:focus {
	border-color: var(--background-modifier-accent-focus, var(--brand-primary, #5865f2));
}

.profileBioFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.375rem;
}

.profileBioCounter {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--text-tertiary);
}

.profileBioCounterFull {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--status-danger, #da373c);
}

.profilePreviewAvatar {
	position: absolute;
	top: 55px;
	left: 10px;
	padding: 4px;
	border-radius: 9999px;
	background-color: var(--background-primary);
	line-height: 0;
}

.profilePreviewContent {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem 1rem 0;
}

.profilePreviewName {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.5rem;
	max-height: 1.5rem;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.profilePreviewHandle {
	font-size: 14px;
	line-height: 18px;
	max-height: 18px;
	color: var(--text-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.profilePreviewFooter {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 0.75rem 0;
}

.setting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--background-modifier-accent);
}

.settingLabel {
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-primary);
}

.themeButtons {
	display: flex;
	gap: 8px;
}

.placeholder {
	font-size: 0.9375rem;
	color: var(--text-secondary);
	margin: 0;
}

/* ── Security Tab ───────────────────────────────────────────────────── */

.section {
	margin-bottom: 24px;
}

.sectionTitle {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-tertiary);
	letter-spacing: 0.02em;
	margin: 0 0 8px;
}

.sectionDescription {
	font-size: 0.8125rem;
	color: var(--text-secondary);
	margin: 0 0 12px;
	line-height: 1.4;
}

.inputGroup {
	display: flex;
	gap: 8px;
	align-items: center;
}

.textInput {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--background-modifier-accent);
	border-radius: var(--radius-md);
	background-color: var(--input-background, var(--background-tertiary));
	color: var(--text-primary);
	font-size: 0.875rem;
	outline: none;
	transition: border-color 0.15s;
	font-family: inherit;
}

.textInput:focus {
	border-color: var(--brand-primary, #5865f2);
}

.textInput::placeholder {
	color: var(--text-tertiary);
}

.recoveryKeyInput {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--background-modifier-accent);
	border-radius: var(--radius-md);
	background-color: var(--input-background, var(--background-tertiary));
	color: var(--text-primary);
	font-size: 0.875rem;
	font-family: monospace;
	outline: none;
	resize: vertical;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.recoveryKeyInput:focus {
	border-color: var(--brand-primary, #5865f2);
}

.recoveryKeyInput::placeholder {
	color: var(--text-tertiary);
	font-family: inherit;
}

.recoveryKeyDisplay {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-radius: var(--radius-md);
	background-color: var(--background-tertiary);
	margin-bottom: 8px;
}

.recoveryKeyCode {
	flex: 1;
	font-family: monospace;
	font-size: 0.8125rem;
	color: var(--text-primary);
	word-break: break-all;
	line-height: 1.5;
	user-select: all;
}

.recoveryKeyWarning {
	font-size: 0.8125rem;
	color: var(--status-warning, #faa61a);
	margin: 0;
	line-height: 1.4;
}

.fileInput {
	display: none;
}

.statusMessage {
	font-size: 0.8125rem;
	margin: 8px 0 0;
	line-height: 1.4;
}

.statusSuccess {
	color: var(--status-positive, #23a55a);
}

.statusError {
	color: var(--status-danger, #da373c);
}

.deviceList {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.deviceItem {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	background-color: var(--background-tertiary);
}

.deviceIcon {
	flex-shrink: 0;
	color: var(--text-secondary);
}

.deviceInfo {
	flex: 1;
	min-width: 0;
}

.deviceName {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 6px;
}

.deviceId {
	font-size: 0.75rem;
	color: var(--text-tertiary);
	font-family: 'Consolas', 'Monaco', monospace;
	word-break: break-all;
}

.currentBadge {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: var(--radius-sm, 3px);
	background-color: var(--brand-primary, #5865f2);
	color: #fff;
	letter-spacing: 0.02em;
}

.verifiedBadge {
	color: var(--status-positive, #23a55a);
	display: flex;
	align-items: center;
}

.passphraseRow {
	margin-top: 8px;
}

/* ── Voice & Video Tab ─────────────────────────────────────────────── */

/* The `.setting` class is a single-row layout for the appearance tab
   etc. — voice sections need stacked content (title + description +
   controls on separate rows), so use a dedicated block container. */
.voiceSection {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 0;
	border-bottom: 1px solid var(--background-modifier-accent);
}

.voiceSection:last-child {
	border-bottom: none;
}

.voiceSectionTitle {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}

.settingDescription {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-secondary, #a0a3a8);
}

/* ── Audio & Video settings (VoiceTab additions) ─────────── */

.voiceFieldLabel {
	margin-top: 12px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-primary-muted, #a0a3a8);
}

/* Radio row (Voice Activity / Push-to-Talk) — checkbox on the
   left, two-line label block on the right. */
.voiceRadioRow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-modifier-accent);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.12s;
}

.voiceRadioRow:hover {
	border-color: var(--background-modifier-hover);
}

.voiceRadioRow input[type='radio'] {
	margin-top: 4px;
	accent-color: var(--brand-primary);
	cursor: pointer;
}

.voiceRadioLabel {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-primary);
}

.voiceRadioHelp {
	margin-top: 2px;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--text-primary-muted, #a0a3a8);
}

/* Device dropdown — full width, same surface as the form
   inputs elsewhere in the settings modal. */
.voiceSelect {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	background-color: var(--form-surface-background, #1e2024);
	border: 1px solid var(--background-modifier-accent);
	border-radius: 6px;
	color: var(--text-primary);
	font: inherit;
	font-size: 0.9375rem;
	outline: none;
	cursor: pointer;
	transition: border-color 0.12s;
}

.voiceSelect:focus,
.voiceSelect:focus-visible {
	border-color: var(--brand-primary);
}

/* Input / output volume slider — full-width range with a
   right-flush percent readout. */
.voiceVolumeHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
}

.voiceVolumeValue {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-primary-muted, #a0a3a8);
	font-variant-numeric: tabular-nums;
}

.voiceSlider {
	width: 100%;
	height: 4px;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--background-modifier-accent);
	border-radius: 999px;
	outline: none;
	cursor: pointer;
}

.voiceSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--brand-primary);
	cursor: pointer;
	border: none;
}

.voiceSlider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--brand-primary);
	cursor: pointer;
	border: none;
}

/* Audio-processing toggle row — label block on the left, ios-
   style toggle on the right. Uses a plain checkbox for now;
   when we ship a real Toggle primitive this becomes a one-line
   swap. */
.voiceToggleRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-modifier-accent);
	border-radius: 8px;
	cursor: pointer;
}

.voiceToggleRow input[type='checkbox'] {
	width: 18px;
	height: 18px;
	accent-color: var(--brand-primary);
	cursor: pointer;
}

/* Mic Test row — Button + stretch meter. */
.micTestRow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
}

.micTestMeter {
	flex: 1;
	height: 8px;
	background-color: var(--background-modifier-accent);
	border-radius: 999px;
	overflow: hidden;
}

.micTestMeterFill {
	height: 100%;
	background-color: var(--brand-primary);
	transition: width 0.08s linear;
}

.joinSoundRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background-color: var(--background-secondary, rgba(255, 255, 255, 0.03));
	border: 1px solid var(--background-modifier-accent, rgba(255, 255, 255, 0.06));
	border-radius: 6px;
}

.joinSoundLabel {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: var(--text-primary, #fff);
}

.joinSoundActions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.joinSoundSaveRow {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}

.joinSoundToggleRow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text-primary, #fff);
	cursor: pointer;
	padding: 6px 0;
}

.joinSoundToggleRow input[type='checkbox'] {
	width: 16px;
	height: 16px;
	cursor: pointer;
	accent-color: var(--brand-primary, #5865f2);
}

.joinSoundVolumeRow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}

.joinSoundVolumeLabel {
	font-size: 12px;
	color: var(--text-primary-muted, #a0a3a8);
	min-width: 60px;
	flex-shrink: 0;
}

.joinSoundVolumeRow input[type='range'] {
	flex: 1 1 auto;
	accent-color: var(--brand-primary, #5865f2);
}

.joinSoundVolumeValue {
	font-size: 12px;
	color: var(--text-primary, #fff);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	min-width: 40px;
	text-align: right;
	flex-shrink: 0;
}
