@import "https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500&display=swap";

:root {
	--bg-gradient-start: #090b10;
	--bg-gradient-end: #0d1018;
	--bg-gradient-mid: #0f121c;
	--surface-base: #10141ed9;
	--surface-elevated: #161b28c7;
	--surface-overlay: #1c2130eb;
	--border-subtle: #414e6e52;
	--border-light: #6e7da538;
	--border-glow: #6366f140;
	--primary: #6366f1;
	--primary-hover: #818cf8;
	--primary-glow: #4f46e5;
	--primary-soft: #6366f126;
	--primary-medium: #6366f147;
	--success: #10b981;
	--success-soft: #10b9811f;
	--danger: #ef4444;
	--danger-soft: #ef444426;
	--warning: #f59e0b;
	--warning-soft: #f59e0b26;
	--text-primary: #f1f5f9;
	--text-secondary: #94a3b8;
	--text-muted: #64748b;
	--text-inverse: #0f172a;
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-full: 9999px;
	--shadow-sm: 0 2px 8px #0003;
	--shadow-md: 0 8px 24px #0000004d;
	--shadow-lg: 0 16px 40px -8px #00000073;
	--shadow-glow: 0 0 20px #6366f133;
	--transition-fast: all .15s cubic-bezier(.2, 0, 0, 1);
	--transition-smooth: all .25s cubic-bezier(.2, 0, 0, 1);
	--transition-bounce: all .3s cubic-bezier(.34, 1.56, .64, 1)
}

:root[data-theme=light] {
	--bg-gradient-start: #f8fafc;
	--bg-gradient-end: #e0e7ff;
	--bg-gradient-mid: #eef2ff;
	--surface-base: #ffffffe0;
	--surface-elevated: #f8fafff0;
	--surface-overlay: #fffffff5;
	--border-subtle: #64748b33;
	--border-light: #64748b59;
	--border-glow: #6366f14d;
	--text-primary: #0f172a;
	--text-secondary: #334155;
	--text-muted: #64748b;
	--text-inverse: #f1f5f9;
	--primary-soft: #6366f11a;
	--primary-medium: #6366f133;
	--success-soft: #10b98114;
	--danger-soft: #ef444414;
	--warning-soft: #f59e0b1a
}

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

html,
body,
#root {
	width: 100%;
	height: 100%
}

body {
	background: linear-gradient(150deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 40%, var(--bg-gradient-end) 100%);
	color: var(--text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-attachment: fixed;
	font-family: Inter, sans-serif;
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.55
}
.media-video, .embedded-call-shell {
  user-select: none;
  -webkit-user-select: none;
}
h1,
h2,
h3,
strong,
.bold {
	letter-spacing: -.015em;
	font-weight: 600
}

code,
pre,
.mono {
	letter-spacing: -.01em;
	font-family: JetBrains Mono, monospace;
	font-size: .82em
}

.app-shell {
	grid-template-columns: 74px var(--sidebar-width, 304px) minmax(0, 1fr) 420px;
	background: 0 0;
	gap: 0;
	min-height: 100vh;
	display: grid
}

.server-rail {
	background: var(--surface-base);
	-webkit-backdrop-filter: blur(28px)saturate(1.2);
	border-right: 1px solid var(--border-subtle);
	flex-direction: column;
	align-items: center;
	gap: 10px;
	height: 100vh;
	padding: 16px 0;
	display: flex;
	position: sticky;
	top: 0;
	overflow: hidden auto
}

.rail-logo {
	border-radius: var(--radius-md);
	color: #fff;
	width: 44px;
	height: 44px;
	transition: var(--transition-bounce);
	cursor: pointer;
	background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
	justify-content: center;
	align-items: center;
	margin-bottom: 6px;
	font-size: 1.3rem;
	font-weight: 700;
	display: flex;
	box-shadow: 0 4px 16px #6366f159
}

.rail-logo:hover {
	transform: scale(1.06);
	box-shadow: 0 6px 22px #6366f180
}

.rail-action {
	border-radius: var(--radius-md);
	width: 40px;
	height: 40px;
	color: var(--text-secondary);
	transition: var(--transition-smooth);
	cursor: pointer;
	background: #ffffff0a;
	border: none;
	justify-content: center;
	align-items: center;
	display: flex;
	position: relative
}

.rail-action:hover {
	background: var(--primary-medium);
	color: #fff;
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px)
}

.rail-action:active {
	transform: translateY(0)scale(.96)
}

.rail-divider {
	background: var(--border-subtle);
	border-radius: 1px;
	width: 28px;
	height: 1.5px;
	margin: 6px 0
}

.server-chip {
	border-radius: var(--radius-md);
	cursor: pointer;
	width: 44px;
	height: 44px;
	transition: var(--transition-bounce);
	color: var(--text-primary);
	background: #ffffff0f;
	border: none;
	justify-content: center;
	align-items: center;
	font-size: .9rem;
	font-weight: 600;
	display: flex;
	position: relative;
	overflow: hidden
}

.server-chip:before {
	content: "";
	background: var(--primary);
	width: 3px;
	height: 18px;
	transition: var(--transition-smooth);
	border-radius: 0 4px 4px 0;
	position: absolute;
	top: 50%;
	left: -8px;
	transform: translateY(-50%)scale(0)
}

.server-chip.active {
	background: var(--primary);
	border-radius: var(--radius-lg);
	color: #fff;
	box-shadow: 0 6px 20px #6366f173
}

.server-chip.active:before {
	transform: translateY(-50%)scale(1)
}

.server-chip:hover:not(.active) {
	background: var(--primary-medium);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px)
}

.server-chip:hover:not(.active):before {
	height: 26px;
	transform: translateY(-50%)scale(1)
}

.sidebar {
	background: var(--surface-base);
	-webkit-backdrop-filter: blur(24px)saturate(1.15);
	border-right: 1px solid var(--border-subtle);
	flex-direction: column;
	height: 100vh;
	display: flex;
	position: sticky;
	top: 0;
	overflow: hidden
}

.sidebar-header {
	border-bottom: 1px solid var(--border-subtle);
	justify-content: space-between;
	align-items: center;
	min-height: 56px;
	padding: 18px 18px 14px;
	display: flex
}

.sidebar-header strong {
	color: var(--text-primary);
	letter-spacing: -.01em;
	font-size: .95rem;
	font-weight: 650
}

.inline-actions {
	gap: 6px;
	display: flex
}

.icon-button {
	border-radius: var(--radius-sm);
	width: 30px;
	height: 30px;
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition-fast);
	background: #ffffff0a;
	border: none;
	justify-content: center;
	align-items: center;
	display: flex
}

.icon-button:hover {
	background: var(--primary-medium);
	color: #fff;
	box-shadow: var(--shadow-sm)
}

.icon-button:active {
	transform: scale(.94)
}

.sidebar-section {
	border-bottom: 1px solid var(--border-subtle);
	padding: 14px 18px
}

.sidebar-section.stretch {
	border-bottom: none;
	flex: 1;
	padding-bottom: 8px;
	overflow-y: auto
}

.section-head {
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--text-muted);
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-size: .68rem;
	font-weight: 700;
	display: flex
}

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

.list-button {
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition-fast);
	text-align: left;
	letter-spacing: -.005em;
	background: 0 0;
	border: none;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	font-size: .85rem;
	font-weight: 450;
	display: flex
}

.list-button.selected {
	background: var(--primary-soft);
	color: var(--primary-hover);
	font-weight: 550
}

.list-button:hover:not(.selected) {
	color: var(--text-primary);
	background: #ffffff0a
}

.list-button:active {
	transform: scale(.98)
}

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

.member-card {
	border-radius: var(--radius-sm);
	transition: var(--transition-fast);
	cursor: pointer;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	display: flex
}

.member-card:hover {
	background: #ffffff0a
}

.member-card:active {
	background: #ffffff12
}

.member-card .avatar.small {
	border-radius: var(--radius-sm);
	background: linear-gradient(145deg, #475569, #1e293b);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	font-size: .75rem;
	font-weight: 600;
	display: flex
}

.member-card .status-dot {
	width: 7px;
	height: 7px;
	transition: var(--transition-fast);
	border-radius: 50%;
	flex-shrink: 0;
	margin-left: auto
}

.member-card .status-dot.online {
	background: var(--success);
	box-shadow: 0 0 0 2.5px var(--success-soft)
}

.member-card span:first-of-type {
	letter-spacing: -.005em;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	font-size: .85rem;
	font-weight: 450;
	overflow: hidden
}

.profile-card {
	background: var(--surface-elevated);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
	transition: var(--transition-smooth);
	align-items: center;
	gap: 10px;
	margin: 14px 18px 18px;
	padding: 10px 14px;
	display: flex
}

.profile-card:hover {
	border-color: var(--border-light)
}

.profile-preferences {
	flex-direction: column;
	gap: 5px;
	margin-left: auto;
	display: flex
}

.profile-preferences select,
.friend-search input {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xs);
	color: var(--text-primary);
	transition: var(--transition-fast);
	background: #0f172a4d;
	padding: 6px 10px;
	font-family: Inter, sans-serif;
	font-size: .8rem
}

.profile-preferences select:focus,
.friend-search input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-soft);
	outline: none
}

.friend-search {
	gap: 6px;
	margin-bottom: 8px;
	display: flex
}

.avatar {
	border-radius: var(--radius-md);
	color: #fff;
	background: linear-gradient(145deg, #6366f1, #06b6d4);
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	font-size: .95rem;
	font-weight: 600;
	display: flex
}

.content-panel {
	background: var(--surface-base);
	-webkit-backdrop-filter: blur(12px)saturate(1.05);
	flex-direction: column;
	height: 100vh;
	display: flex;
	overflow: hidden
}

.panel-header {
	border-bottom: 1px solid var(--border-subtle);
	justify-content: space-between;
	align-items: flex-start;
	min-height: 56px;
	padding: 16px 22px;
	display: flex
}

.panel-header strong {
	font-size: 1.05rem;
	font-weight: 650
}

.messages {
	flex-direction: column;
	flex: 1;
	gap: 14px;
	padding: 20px;
	display: flex;
	overflow-y: auto
}

.message-row {
	align-items: flex-start;
	gap: 10px;
	animation: .25s ease-out messageIn;
	display: flex
}

@keyframes messageIn {
	0% {
		opacity: 0;
		transform: translateY(8px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.message-bubble {
	background: var(--surface-elevated);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-subtle);
	max-width: 72%;
	transition: var(--transition-fast);
	padding: 10px 14px
}

.message-bubble:hover {
	border-color: var(--border-light)
}

.message-meta {
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
	font-size: .73rem;
	display: flex
}

.message-meta strong {
	color: var(--text-primary);
	font-weight: 650
}

.message-meta span {
	color: var(--text-muted);
	font-size: .7rem
}

.composer {
	background: var(--surface-elevated);
	border-top: 1px solid var(--border-subtle);
	padding: 16px 22px 20px
}

.composer-tools {
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	display: flex
}

.upload-chip {
	background: var(--primary-soft);
	border: 1px solid var(--border-glow);
	border-radius: var(--radius-full);
	color: var(--primary-hover);
	transition: var(--transition-fast);
	cursor: pointer;
	padding: 4px 12px;
	font-size: .78rem;
	font-weight: 500
}

.upload-chip:hover {
	background: var(--primary-medium)
}

.composer-wrapper {
	align-items: flex-end;
	gap: 10px;
	display: flex
}

.composer textarea {
	background: var(--surface-base);
	border: 1.5px solid var(--border-light);
	border-radius: var(--radius-lg);
	width: 100%;
	color: var(--text-primary);
	resize: none;
	transition: var(--transition-smooth);
	flex: 1;
	height: 72px;
	min-height: 48px;
	max-height: 180px;
	padding: 12px 18px;
	font-family: Inter, sans-serif;
	font-size: .9375rem;
	line-height: 1.5
}

.composer textarea::placeholder {
	color: var(--text-muted)
}

.composer textarea:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-glow);
	background: #101420f2;
	outline: none
}

.composer button {
	background: var(--primary);
	border-radius: var(--radius-full);
	color: #fff;
	cursor: pointer;
	transition: var(--transition-smooth);
	white-space: nowrap;
	letter-spacing: -.005em;
	border: none;
	align-items: center;
	gap: 6px;
	height: 48px;
	padding: 12px 24px;
	font-size: .875rem;
	font-weight: 600;
	display: flex;
	box-shadow: 0 4px 16px #6366f14d
}

.composer button:hover {
	background: var(--primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px #6366f166
}

.composer button:active {
	transform: translateY(0)scale(.97);
	box-shadow: 0 2px 8px #6366f14d
}

.attachment-item {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--surface-base);
	transition: var(--transition-fast);
	gap: 6px;
	padding: 8px;
	display: grid
}

.attachment-item:hover {
	border-color: var(--border-light)
}

.attachment-item img,
.attachment-item video {
	border-radius: var(--radius-sm);
	object-fit: cover;
	width: 100%;
	max-width: 320px
}

.attachment-item audio {
	width: 100%;
	max-width: 320px
}

.server-banner {
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
	height: 56px;
	transition: var(--transition-smooth);
	background-position: 50%;
	background-size: cover;
	margin-bottom: 10px
}

.server-banner:hover {
	border-color: var(--border-light)
}

.server-meta {
	color: var(--text-secondary);
	gap: 6px;
	font-size: .8rem;
	display: grid
}

.server-meta span {
	align-items: center;
	gap: 6px;
	display: flex
}

.settings-layout {
	grid-template-columns: 180px 1fr;
	gap: 10px
}

.settings-nav {
	gap: 4px;
	display: grid
}

.settings-nav button {
	text-align: left;
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition-fast);
	background: 0 0;
	border: 1px solid #0000;
	padding: 8px 12px;
	font-family: Inter, sans-serif;
	font-size: .85rem
}

.settings-nav button:hover {
	border-color: var(--border-subtle);
	background: #ffffff08
}

.settings-nav button.active {
	background: var(--primary-soft);
	border-color: var(--border-glow);
	color: var(--primary-hover);
	font-weight: 550
}

.settings-content {
	gap: 10px;
	display: grid
}

.settings-toggle {
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
	background: var(--surface-elevated);
	transition: var(--transition-fast);
	cursor: pointer;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	display: flex
}

.settings-toggle:hover {
	border-color: var(--border-light);
	background: var(--surface-overlay)
}

.voice-room {
	flex: 1;
	padding: 20px;
	overflow-y: auto
}

.voice-hero {
	background: var(--surface-elevated);
	border-radius: var(--radius-xl);
	border: 1px solid var(--border-subtle);
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
	padding: 20px 24px;
	display: flex
}

.voice-hero h2 {
	font-size: 1.2rem;
	font-weight: 650
}

.call-controls {
	flex-wrap: wrap;
	gap: 10px;
	display: flex
}

.voice-button {
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: var(--transition-smooth);
	color: var(--text-primary);
	letter-spacing: -.005em;
	background: #ffffff0f;
	border: 1.5px solid #0000;
	align-items: center;
	gap: 7px;
	padding: 10px 18px;
	font-size: .85rem;
	font-weight: 550;
	display: flex
}

.voice-button:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px)
}

.voice-button:active {
	transform: translateY(0)scale(.96)
}

.voice-button.mic {
	background: var(--success-soft);
	color: #34d399;
	border-color: #10b98140
}

.voice-button.mic.muted {
	background: var(--danger-soft);
	color: #f87171;
	border-color: #ef444440
}

.voice-button.camera {
	background: var(--primary-soft);
	border-color: var(--border-glow);
	color: #a5b4fc
}

.voice-button.screen {
	background: var(--warning-soft);
	color: #fbbf24;
	border-color: #f59e0b40
}

.voice-button.leave {
	background: var(--danger-soft);
	color: #f87171;
	border-color: #ef44444d
}

.voice-button.leave:hover {
	background: #ef44444d
}

.call-grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	display: grid
}

.media-tile {
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-subtle);
	transition: var(--transition-smooth);
	background: #00000059;
	overflow: hidden
}

.media-tile:hover {
	border-color: var(--border-glow);
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px)
}

.media-video {
	object-fit: cover;
	background: #0a0c14;
	width: 100%;
	height: 170px
}

.media-fallback {
	height: 170px;
	color: var(--text-muted);
	background: linear-gradient(145deg, #1a1d2e, #12141c);
	justify-content: center;
	align-items: center;
	font-size: 1.8rem;
	font-weight: 650;
	display: flex
}

.media-meta {
	-webkit-backdrop-filter: blur(8px);
	background: #00000073;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	display: flex
}

.media-meta span {
	font-size: .78rem;
	font-weight: 500
}

.info-panel {
	background: var(--surface-base);
	-webkit-backdrop-filter: blur(24px)saturate(1.15);
	border-left: 1px solid var(--border-subtle);
	height: 100vh;
	position: sticky;
	top: 0;
	overflow-y: auto
}

.info-card {
	border-bottom: 1px solid var(--border-subtle);
	padding: 18px
}

.info-card .section-head {
	margin-bottom: 14px
}

.status-line {
	border-radius: var(--radius-sm);
	background: #00000026;
	border: 1px solid #0000;
	margin-bottom: 10px;
	padding: 10px 14px;
	font-size: .85rem
}

.status-line.error {
	background: var(--danger-soft);
	color: #fca5a5;
	border-color: #ef444433
}

.status-line.success {
	background: var(--success-soft);
	color: #6ee7b7;
	border-color: #10b98133
}

.action-button {
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: var(--transition-smooth);
	color: var(--text-primary);
	border: none;
	border: 1px solid var(--border-subtle);
	letter-spacing: -.005em;
	background: #ffffff0f;
	padding: 8px 16px;
	font-size: .85rem;
	font-weight: 550
}

.action-button:hover {
	background: #ffffff1a;
	transform: translateY(-1px)
}

.action-button:active {
	transform: translateY(0)scale(.97)
}

.action-button.primary {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
	box-shadow: 0 4px 14px #6366f14d
}

.action-button.primary:hover {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	box-shadow: 0 6px 20px #6366f173
}

.action-button.danger {
	background: var(--danger-soft);
	color: #fca5a5;
	border-color: #ef444440
}

.action-button.danger:hover {
	background: #ef44444d;
	border-color: #ef444466
}

.text-button {
	color: var(--text-secondary);
	cursor: pointer;
	border-radius: var(--radius-xs);
	transition: var(--transition-fast);
	background: 0 0;
	border: none;
	padding: 6px 12px;
	font-size: .85rem;
	font-weight: 500
}

.text-button:hover {
	color: var(--text-primary);
	background: #ffffff0a
}

.auth-shell {
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: clamp(20px, 3vw, 40px);
	display: flex;
	position: relative;
	overflow: hidden
}

.auth-cosmos {
	pointer-events: none;
	position: absolute;
	inset: 0;
	overflow: hidden
}

.auth-cosmos-grid {
	opacity: .28;
	background-image: linear-gradient(#94a3b814 1px, #0000 1px), linear-gradient(90deg, #94a3b814 1px, #0000 1px);
	background-size: 56px 56px;
	animation: 22s linear infinite authGridShift;
	position: absolute;
	inset: -18%;
	-webkit-mask-image: radial-gradient(circle, #000000f2 0%, #0000 72%);
	mask-image: radial-gradient(circle, #000000f2 0%, #0000 72%)
}

.auth-cosmos-blob {
	filter: blur(88px);
	opacity: .72;
	border-radius: 46% 54% 58% 42%/38% 42% 58% 62%;
	position: absolute;
	top: 50%;
	left: 50%
}

.auth-cosmos-blob-main {
	background: conic-gradient(from 210deg, #6366f1d1, #3b82f6bf, #22d3ee8f, #818cf8c2, #6366f1d1);
	width: min(72vw, 760px);
	height: min(58vw, 580px);
	animation: 20s linear infinite authBlobRotate, 15s ease-in-out infinite authBlobFloat;
	transform: translate(-36%, -50%)
}

.auth-cosmos-blob-accent {
	background: radial-gradient(circle, #10b9814d 0%, #22d3ee38 42%, #0000 72%);
	width: min(42vw, 420px);
	height: min(32vw, 320px);
	animation: 17s ease-in-out infinite authBlobFloatSecondary;
	transform: translate(-64%, -12%)
}

.auth-cosmos-ring {
	border: 1px solid #94a3b824;
	border-radius: 999px;
	position: absolute;
	top: 50%;
	left: 50%
}

.auth-cosmos-ring-one {
	width: min(52vw, 560px);
	height: min(52vw, 560px);
	animation: 12s ease-in-out infinite authRingPulse;
	transform: translate(-48%, -50%)
}

.auth-cosmos-ring-two {
	opacity: .5;
	width: min(72vw, 760px);
	height: min(72vw, 760px);
	animation: 17s ease-in-out infinite reverse authRingPulse;
	transform: translate(-54%, -49%)
}

.auth-star {
	background: #ffffffe0;
	border-radius: 999px;
	width: 8px;
	height: 8px;
	animation: 4s ease-in-out infinite authStarPulse;
	position: absolute;
	box-shadow: 0 0 18px #94c5ffa6
}

.auth-star-one {
	top: 22%;
	left: 22%
}

.auth-star-two {
	animation-delay: 1.2s;
	top: 28%;
	left: 72%
}

.auth-star-three {
	animation-delay: 2.2s;
	top: 74%;
	left: 68%
}

@keyframes authGridShift {
	0% {
		transform: translate(0, 0)
	}

	to {
		transform: translate(56px, 28px)
	}
}

@keyframes authBlobRotate {
	0% {
		transform: translate(-36%, -50%)rotate(0)
	}

	to {
		transform: translate(-36%, -50%)rotate(360deg)
	}
}

@keyframes authBlobFloat {

	0%,
	to {
		transform: translate(-36%, -50%)scale(1)
	}

	50% {
		transform: translate(-32%, -47%)scale(1.08)
	}
}

@keyframes authBlobFloatSecondary {

	0%,
	to {
		transform: translate(-64%, -12%)scale(1)
	}

	50% {
		transform: translate(-59%, -18%)scale(1.12)
	}
}

@keyframes authRingPulse {

	0%,
	to {
		opacity: .16;
		transform: translate(-50%, -50%)scale(.96)
	}

	50% {
		opacity: .34;
		transform: translate(-50%, -50%)scale(1.03)
	}
}

@keyframes authStarPulse {

	0%,
	to {
		opacity: .4;
		transform: scale(.85)
	}

	50% {
		opacity: 1;
		transform: scale(1.2)
	}
}

.auth-panel {
	z-index: 2;
	grid-template-columns: minmax(0, 1.08fr) minmax(380px, 450px);
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
	width: 100%;
	max-width: 1180px;
	display: grid;
	position: relative
}

.auth-brand {
	gap: 24px;
	animation: .75s cubic-bezier(.22, 1, .36, 1) both authBrandIn;
	display: grid
}

.auth-badge-row {
	flex-wrap: wrap;
	gap: 12px;
	display: flex
}

.brand-pill,
.auth-status-pill {
	border-radius: var(--radius-full);
	-webkit-backdrop-filter: blur(18px);
	color: #eff6ffeb;
	letter-spacing: .02em;
	background: #080c1685;
	border: 1px solid #94a3b829;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font-size: .8rem;
	font-weight: 600;
	display: inline-flex
}

.brand-pill {
	box-shadow: 0 14px 36px #4f46e52e
}

.auth-status-pill {
	color: #bfdbfeeb
}

.auth-hero {
	display: block
}

.auth-hero-copy {
	gap: 18px;
	display: grid
}

.auth-brand h1 {
	color: #0000;
	letter-spacing: -.055em;
	background: linear-gradient(135deg, #f8fbff 0%, #c7d2fe 42%, #7dd3fc 100%);
	-webkit-background-clip: text;
	background-clip: text;
	margin: 0;
	font-size: clamp(3rem, 5vw, 5.25rem);
	font-weight: 780;
	line-height: .95
}

.auth-brand p {
	color: #d3deeecc;
	max-width: 590px;
	font-size: 1.04rem;
	line-height: 1.72
}

.auth-meta-line {
	flex-wrap: wrap;
	gap: 10px;
	display: flex
}

.auth-meta-pill {
	border-radius: var(--radius-full);
	color: #e2ecfae0;
	-webkit-backdrop-filter: blur(14px);
	background: #ffffff0d;
	border: 1px solid #94a3b824;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font-size: .83rem;
	font-weight: 550;
	display: inline-flex
}

@keyframes authBrandIn {
	0% {
		opacity: 0;
		transform: translateY(24px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.auth-card {
	-webkit-backdrop-filter: blur(32px)saturate(1.2);
	background: linear-gradient(#090d18e6, #0b101dc7);
	border: 1px solid #94a3b829;
	border-radius: 32px;
	gap: 18px;
	padding: 30px;
	animation: .82s cubic-bezier(.22, 1, .36, 1) 80ms both authCardIn;
	display: grid;
	position: relative;
	overflow: hidden;
	box-shadow: 0 26px 64px #00000057
}

.auth-card:before {
	content: "";
	pointer-events: none;
	background: linear-gradient(140deg, #ffffff14, #0000 26% 72%, #7dd3fc0f);
	position: absolute;
	inset: 0
}

.auth-card:after {
	content: "";
	filter: blur(8px);
	pointer-events: none;
	background: radial-gradient(circle, #6366f14d 0%, #0000 68%);
	border-radius: 50%;
	width: 220px;
	height: 220px;
	position: absolute;
	top: -16%;
	right: -10%
}

@keyframes authCardIn {
	0% {
		opacity: 0;
		transform: translateY(30px)scale(.97)
	}

	to {
		opacity: 1;
		transform: translateY(0)scale(1)
	}
}

.auth-mode-switch {
	z-index: 1;
	background: #ffffff0a;
	border: 1px solid #94a3b81f;
	border-radius: 18px;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 6px;
	display: grid;
	position: relative
}

.auth-mode-switch button {
	color: #becadcbd;
	transition: var(--transition-smooth);
	border-radius: 14px;
	padding: 11px 14px;
	font-size: .86rem;
	font-weight: 650
}

.auth-mode-switch button.active {
	color: #f8fbff;
	background: linear-gradient(135deg, #6366f147, #38bdf833);
	box-shadow: inset 0 1px #ffffff14
}

.card-head {
	z-index: 1;
	gap: 6px;
	margin-bottom: 2px;
	display: grid;
	position: relative
}

.card-head strong {
	color: var(--text-primary);
	font-size: 1.5rem;
	font-weight: 700
}

.card-head span {
	color: #becadcc2;
	font-size: .9rem;
	line-height: 1.6
}

.field {
	z-index: 1;
	gap: 8px;
	margin-bottom: 0;
	display: grid;
	position: relative
}

.field span {
	color: #d3deeec2;
	letter-spacing: .01em;
	font-size: .8rem;
	font-weight: 600;
	display: block
}

.field-shell {
	min-height: 56px;
	transition: var(--transition-smooth);
	background: #070b1494;
	border: 1.5px solid #94a3b824;
	border-radius: 18px;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	display: flex
}

.field-shell svg {
	color: #bfdbfe9e;
	flex-shrink: 0
}

.field-shell:focus-within {
	border-color: #818cf885;
	transform: translateY(-1px);
	box-shadow: 0 0 0 4px #6366f124
}

.field input {
	width: 100%;
	color: var(--text-primary);
	transition: var(--transition-smooth);
	background: 0 0;
	border: none;
	border-radius: 0;
	padding: 17px 0;
	font-family: Inter, sans-serif;
	font-size: .94rem
}

.field input::placeholder {
	color: #64748beb
}

.field input:focus {
	box-shadow: none;
	outline: none
}

.field-hint {
	color: #94a3b8c2;
	align-items: center;
	gap: 6px;
	font-size: .78rem;
	line-height: 1.5;
	display: inline-flex
}

.auth-submit {
	z-index: 1;
	border-radius: 18px;
	justify-content: space-between;
	min-height: 54px;
	margin-top: 4px;
	padding-inline: 20px 18px;
	position: relative
}

.auth-submit svg {
	transition: transform .2s
}

.auth-submit:hover svg {
	transform: translate(2px)
}

.auth-card-footer {
	z-index: 1;
	gap: 12px;
	display: grid;
	position: relative
}

.auth-security-note {
	color: #becadcc2;
	background: #ffffff0a;
	border: 1px solid #94a3b81a;
	border-radius: 16px;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	font-size: .81rem;
	line-height: 1.55;
	display: flex
}

.auth-toggle-link {
	color: #d3deeed1;
	justify-self: flex-start;
	padding-left: 0
}

@media (width<=1160px) {
	.auth-panel {
		grid-template-columns: 1fr;
		gap: 28px
	}

	.auth-brand {
		text-align: center;
		justify-items: center
	}

	.auth-hero {
		display: block
	}
}

@media (width<=760px) {
	.auth-shell {
		padding: 18px
	}

	.auth-brand h1 {
		font-size: clamp(2.4rem, 11vw, 3.6rem)
	}

	.auth-brand p {
		font-size: .96rem
	}

	.auth-card {
		border-radius: 26px;
		padding: 22px
	}

	.auth-mode-switch button {
		padding: 10px 12px
	}
}

.floating-call {
	background: var(--surface-elevated);
	-webkit-backdrop-filter: blur(24px)saturate(1.1);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-subtle);
	box-shadow: var(--shadow-lg);
	z-index: 100;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	animation: .4s cubic-bezier(.34, 1.56, .64, 1) floatIn;
	display: flex;
	position: fixed;
	bottom: 24px;
	right: 24px
}

@keyframes floatIn {
	0% {
		opacity: 0;
		transform: translateY(20px)scale(.9)
	}

	to {
		opacity: 1;
		transform: translateY(0)scale(1)
	}
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px
}

::-webkit-scrollbar-track {
	background: 0 0
}

::-webkit-scrollbar-thumb {
	background: #ffffff1f;
	border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
	background: #ffffff38
}

::-webkit-scrollbar-corner {
	background: 0 0
}

.empty-state {
	text-align: center;
	color: var(--text-muted);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 40px 24px;
	display: flex
}

.empty-state svg {
	opacity: .4
}

@media (width<=1200px) {
	.app-shell {
		grid-template-columns: 64px 260px minmax(0, 1fr) 260px
	}
}

@media (width<=1100px) {
	.app-shell {
		grid-template-columns: 64px 260px 1fr
	}

	.info-panel {
		display: none
	}
}

@media (width<=800px) {
	.app-shell {
		grid-template-columns: 1fr;
		gap: 0
	}

	.server-rail {
		border-right: none;
		border-bottom: 1px solid var(--border-subtle);
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
		height: auto;
		padding: 10px 12px;
		position: relative;
		overflow-x: auto
	}

	.sidebar {
		border-right: none;
		border-bottom: 1px solid var(--border-subtle);
		height: auto;
		max-height: 40vh;
		position: relative
	}

	.content-panel {
		height: auto;
		min-height: 60vh
	}

	.auth-panel {
		grid-template-columns: 1fr;
		gap: 24px
	}

	.auth-brand {
		text-align: center
	}

	.call-controls {
		justify-content: center;
		width: 100%
	}
}

.modal-overlay {
	-webkit-backdrop-filter: blur(12px);
	z-index: 200;
	background: #02061799;
	place-items: center;
	animation: .2s ease-out fadeIn;
	display: grid;
	position: fixed;
	inset: 0
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.settings-modal {
	border-radius: var(--radius-xl);
	border: 1px solid var(--border-subtle);
	background: var(--surface-elevated);
	-webkit-backdrop-filter: blur(24px);
	width: min(520px, 92vw);
	box-shadow: var(--shadow-lg);
	animation: .3s cubic-bezier(.34, 1.56, .64, 1) modalIn;
	overflow: hidden
}

@keyframes modalIn {
	0% {
		opacity: 0;
		transform: translateY(16px)scale(.96)
	}

	to {
		opacity: 1;
		transform: translateY(0)scale(1)
	}
}

.settings-head {
	border-bottom: 1px solid var(--border-subtle);
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	display: flex
}

.settings-head h3 {
	font-size: 1.05rem;
	font-weight: 650
}

.settings-body {
	gap: 14px;
	padding: 18px 20px;
	display: grid
}

.settings-field {
	gap: 7px;
	display: grid
}

.settings-field span {
	color: var(--text-secondary);
	font-size: .82rem;
	font-weight: 500
}

.settings-field select {
	border: 1.5px solid var(--border-light);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	transition: var(--transition-fast);
	cursor: pointer;
	background: #0f172a40;
	padding: 9px 12px;
	font-family: Inter, sans-serif;
	font-size: .85rem
}

.settings-field select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-soft);
	outline: none
}

.tips-list {
	gap: 8px;
	display: grid
}

.tip-item {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	transition: var(--transition-fast);
	background: #6366f10f;
	padding: 10px 14px
}

.tip-item:hover {
	border-color: var(--border-glow);
	background: #6366f11a
}

.tip-item strong {
	margin-bottom: 3px;
	font-size: .85rem;
	font-weight: 600;
	display: block
}

.tip-item p {
	color: var(--text-secondary);
	font-size: .82rem;
	line-height: 1.5
}

.global-search {
	border: 1.5px solid var(--border-light);
	border-radius: var(--radius-sm);
	width: min(440px, 100%);
	color: var(--text-primary);
	transition: var(--transition-smooth);
	background: #0f172a4d;
	margin-top: 8px;
	padding: 9px 14px;
	font-family: Inter, sans-serif;
	font-size: .85rem
}

.global-search::placeholder {
	color: var(--text-muted)
}

.global-search:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px var(--primary-soft);
	outline: none
}

.server-chip.active {
	animation: .35s cubic-bezier(.34, 1.56, .64, 1) chipPulse
}

@keyframes chipPulse {
	0% {
		transform: scale(.9)
	}

	60% {
		transform: scale(1.08)
	}

	to {
		transform: scale(1)
	}
}

.animated-icon {
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .25s, color .25s
}

.animated-icon:hover {
	transform: rotate(20deg)scale(1.1)
}

.rail-bottom {
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 8px 0;
	display: flex
}

.rail-user-badge {
	border-radius: var(--radius-sm);
	color: #fff;
	width: 34px;
	height: 34px;
	transition: var(--transition-smooth);
	cursor: pointer;
	justify-content: center;
	align-items: center;
	font-size: .72rem;
	font-weight: 700;
	display: flex
}

.rail-user-badge:hover {
	transform: scale(1.08)
}

.profile-chip {
	background: linear-gradient(145deg, #6366f180, #0ea5e980);
	border: 1px solid #ffffff1a
}

button {
	cursor: pointer;
	background: 0 0;
	border: none;
	font-family: Inter, sans-serif
}

.message-row-refined:hover {
	background: var(--primary-soft)
}

.sidebar-user-panel {
	background: var(--surface-elevated);
	border-top: 1px solid var(--border-subtle);
	-webkit-backdrop-filter: blur(20px)saturate(1.1);
	backdrop-filter: blur(20px)saturate(1.1);
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 12px 14px;
	display: flex
}

.sidebar-user-info {
	flex: 1;
	overflow: hidden
}

.sidebar-user-info strong {
	color: var(--text-primary);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .875rem;
	display: block;
	overflow: hidden
}

.sidebar-user-info span {
	color: var(--text-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .75rem;
	display: block;
	overflow: hidden
}

.sidebar-user-actions {
	gap: 6px;
	display: flex
}

.sidebar-user-actions .icon-button {
	border-radius: var(--radius-sm);
	width: 28px;
	height: 28px;
	color: var(--text-secondary);
	transition: var(--transition-smooth);
	background: #ffffff0d;
	justify-content: center;
	align-items: center;
	display: flex
}

.sidebar-user-actions .icon-button:hover {
	background: var(--primary-medium);
	color: #fff
}

input,
textarea {
	font-family: inherit
}

a {
	color: var(--primary-hover);
	transition: var(--transition-fast);
	text-decoration: none
}

a:hover {
	color: var(--primary);
	text-decoration: underline
}

.media-tile {
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-subtle);
	background: linear-gradient(160deg, #121624e6, #0f121ef2);
	flex-direction: column;
	min-height: 220px;
	transition: all .3s cubic-bezier(.2, 0, 0, 1);
	display: flex;
	position: relative;
	overflow: hidden
}

.media-tile:hover {
	border-color: var(--border-glow);
	transform: translateY(-3px);
	box-shadow: 0 16px 40px -12px #00000080, 0 0 0 1px #6366f133
}

.media-video {
	object-fit: cover;
	background: #0a0c14;
	border-radius: 0;
	width: 100%;
	height: 100%;
	transition: opacity .3s;
	display: block
}

.media-fallback {
	flex: 1;
	justify-content: center;
	align-items: center;
	min-height: 160px;
	display: flex;
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #1e2140, #12141c) !important
}

.media-fallback:before {
	content: "";
	background: radial-gradient(circle at 50% 30%, #6366f126, #0000 60%);
	animation: 3s ease-in-out infinite alternate fallbackGlow;
	position: absolute;
	inset: 0
}

@keyframes fallbackGlow {
	0% {
		opacity: .4
	}

	to {
		opacity: .8
	}
}

.media-fallback span {
	z-index: 1;
	color: #fff;
	text-shadow: 0 2px 12px #0006;
	letter-spacing: -.02em;
	-webkit-backdrop-filter: blur(8px);
	background: #ffffff14;
	border: 2px solid #ffffff1f;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	font-size: 2.5rem;
	font-weight: 700;
	display: flex;
	position: relative
}

.media-meta {
	-webkit-backdrop-filter: blur(12px);
	background: #00000073;
	border-top: 1px solid #ffffff0f;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	display: flex
}

.media-meta strong {
	color: var(--text-primary);
	letter-spacing: -.005em;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .85rem;
	font-weight: 600;
	overflow: hidden
}

.media-meta span {
	color: var(--text-muted);
	white-space: nowrap;
	flex-shrink: 0;
	font-size: .72rem
}

.media-meta .mic-indicator {
	background: var(--success);
	border-radius: 50%;
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	position: relative
}

.media-meta .mic-indicator.muted {
	background: var(--danger);
	animation: 1.5s ease-in-out infinite mutedBlink
}

@keyframes mutedBlink {

	0%,
	to {
		opacity: 1
	}

	50% {
		opacity: .4
	}
}

.media-tile.speaking {
	border-color: var(--success);
	box-shadow: 0 0 0 2px #10b98157, 0 16px 40px -12px #00000080
}

.call-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	padding: 4px;
	display: grid
}

.media-tile .media-video:hover {
	filter: brightness(1.05)
}

.media-tile {
	animation: .35s cubic-bezier(.34, 1.56, .64, 1) tileAppear
}

@keyframes tileAppear {
	0% {
		opacity: 0;
		transform: scale(.92)translateY(10px)
	}

	to {
		opacity: 1;
		transform: scale(1)translateY(0)
	}
}

.media-tile.inactive .media-video {
	filter: brightness(.7)saturate(.5);
	transition: all .4s
}

.media-tile .tile-controls {
	opacity: 0;
	z-index: 5;
	gap: 6px;
	transition: all .25s cubic-bezier(.2, 0, 0, 1);
	display: flex;
	position: absolute;
	top: 10px;
	right: 10px;
	transform: translateY(-5px)
}

.media-tile:hover .tile-controls {
	opacity: 1;
	transform: translateY(0)
}

.media-tile .tile-controls .tile-action {
	border-radius: var(--radius-sm);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	background: #00000080;
	border: 1px solid #ffffff26;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: .75rem;
	transition: all .2s;
	display: flex
}

.media-tile .tile-controls .tile-action:hover {
	background: #000000b3;
	border-color: #ffffff4d;
	transform: scale(1.08)
}

.media-tile .tile-controls .tile-action.pin {
	color: #fbbf24
}

.media-tile .tile-controls .tile-action.fullscreen {
	color: #a5b4fc
}

@media (width<=800px) {
	.call-grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 8px
	}

	.media-tile {
		min-height: 180px
	}

	.media-fallback span {
		width: 60px;
		height: 60px;
		font-size: 1.8rem
	}

	.media-meta {
		padding: 8px 12px
	}

	.media-meta strong {
		font-size: .75rem
	}

	.media-meta span {
		font-size: .65rem
	}
}

@media (prefers-color-scheme:dark) {
	.media-tile {
		background: linear-gradient(160deg, #10141ef2, #0c0f18fa)
	}
}

.media-fallback:after {
	content: "";
	pointer-events: none;
	background: linear-gradient(#ffffff05 0%, #0000 50%);
	position: absolute;
	inset: 0
}

.media-tile .network-quality {
	z-index: 5;
	opacity: 0;
	gap: 2px;
	transition: opacity .3s;
	display: flex;
	position: absolute;
	top: 10px;
	left: 10px
}

.media-tile:hover .network-quality {
	opacity: 1
}

.media-tile .network-quality .quality-bar {
	background: #fff9;
	border-radius: 1px;
	width: 3px;
	transition: all .3s
}

.media-tile .network-quality .quality-bar:first-child {
	height: 8px
}

.media-tile .network-quality .quality-bar:nth-child(2) {
	height: 12px
}

.media-tile .network-quality .quality-bar:nth-child(3) {
	height: 16px
}

.media-tile .network-quality .quality-bar:nth-child(4) {
	height: 20px
}

.media-tile .network-quality.good .quality-bar {
	background: var(--success)
}

.media-tile .network-quality.poor .quality-bar {
	background: var(--warning)
}

.media-tile .network-quality.bad .quality-bar {
	background: var(--danger)
}

.attachment-list {
	gap: 10px;
	margin-top: 10px;
	display: grid
}

.attachment-item {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(16px);
	background: linear-gradient(155deg, #121624b3, #1a2030cc);
	flex-direction: column;
	gap: 0;
	max-width: 460px;
	padding: 0;
	transition: all .28s cubic-bezier(.2, 0, 0, 1);
	display: flex;
	overflow: hidden
}

.attachment-item:hover {
	border-color: var(--border-glow);
	transform: translateY(-2px);
	box-shadow: 0 8px 30px #00000059, 0 0 0 1px #6366f12e
}

.attachment-item audio {
	filter: brightness(1.05);
	outline: none;
	width: 100%;
	height: 54px
}

.attachment-item audio::-webkit-media-controls-panel {
	background: linear-gradient(135deg, #161b28f2, #121620fa);
	border-radius: 0;
	padding: 8px 16px
}

.attachment-item audio::-webkit-media-controls-play-button {
	background: linear-gradient(135deg, var(--primary), #7c3aed);
	filter: drop-shadow(0 4px 10px #6366f166);
	border-radius: 50%;
	width: 38px;
	height: 38px;
	margin-right: 14px;
	transition: all .2s
}

.attachment-item audio::-webkit-media-controls-play-button:hover {
	filter: drop-shadow(0 6px 16px #6366f199);
	transform: scale(1.08)
}

.attachment-item audio::-webkit-media-controls-current-time-display {
	color: var(--text-primary);
	text-shadow: none;
	letter-spacing: -.01em;
	font-family: JetBrains Mono, monospace;
	font-size: .8rem;
	font-weight: 500
}

.attachment-item audio::-webkit-media-controls-time-remaining-display {
	color: var(--text-primary);
	text-shadow: none;
	letter-spacing: -.01em;
	font-family: JetBrains Mono, monospace;
	font-size: .8rem;
	font-weight: 500
}

.attachment-item audio::-webkit-media-controls-timeline {
	cursor: pointer;
	background: #ffffff1a;
	border-radius: 3px;
	height: 6px;
	margin: 0 14px;
	padding: 0
}

.attachment-item audio::-webkit-media-controls-timeline:hover {
	height: 8px
}

.attachment-item audio::-webkit-media-controls-volume-slider {
	background: #ffffff14;
	border-radius: 2px;
	height: 4px;
	padding: 0
}

.attachment-item audio::-webkit-media-controls-volume-slider:hover {
	height: 6px
}

.attachment-item audio::-webkit-media-controls-mute-button {
	filter: brightness(0)invert(.8);
	transition: all .2s
}

.attachment-item audio::-webkit-media-controls-fullscreen-button {
	filter: brightness(0)invert(.8);
	transition: all .2s
}

.attachment-item audio::-webkit-media-controls-mute-button:hover {
	filter: brightness(0)invert()
}

.attachment-item audio::-webkit-media-controls-fullscreen-button:hover {
	filter: brightness(0)invert()
}

.attachment-item audio {
	border-bottom: 1px solid var(--border-subtle);
	margin: 0;
	display: block
}

.attachment-item a[download] {
	color: var(--text-secondary);
	letter-spacing: -.005em;
	border-top: 1px solid var(--border-subtle);
	background: #00000026;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	font-size: .84rem;
	font-weight: 550;
	text-decoration: none;
	transition: all .2s;
	display: flex
}

.attachment-item a[download]:before {
	content: "⬇";
	font-size: 1rem;
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1)
}

.attachment-item a[download]:hover {
	color: var(--primary-hover);
	background: #6366f11f
}

.attachment-item a[download]:hover:before {
	transform: translateY(3px)
}

.attachment-item a[download]:active {
	background: #6366f133;
	transform: scale(.98)
}

@-moz-document url-prefix() {
	.attachment-item audio {
		height: 50px
	}

	.attachment-item {
		background: #121624f2
	}
}

@media (width<=800px) {
	.attachment-item {
		max-width: 100%
	}

	.attachment-item audio {
		height: 48px
	}

	.attachment-item a[download] {
		padding: 10px 14px;
		font-size: .8rem
	}
}

.attachment-item audio[data-playing=true] {
	box-shadow: 0 0 20px #6366f133
}

.attachment-item .audio-filename {
	color: var(--text-primary);
	letter-spacing: -.005em;
	align-items: center;
	gap: 8px;
	padding: 12px 16px 8px;
	font-size: .82rem;
	font-weight: 600;
	display: flex
}

.attachment-item .audio-filename:before {
	content: "🎵";
	font-size: 1rem
}

.dev-warning-simple {
	z-index: 10000;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: #000000f2;
	border-left: 3px solid #f44;
	border-radius: 12px;
	max-width: 350px;
	font-family: system-ui, -apple-system, sans-serif;
	transition: all .2s;
	position: fixed;
	bottom: 20px;
	right: 20px;
	box-shadow: 0 10px 25px #0000004d
}

.dev-warning-simple:hover {
	transform: translateY(-2px);
	box-shadow: 0 15px 35px #0006
}

.dev-warning-simple__container {
	width: 100%
}

.dev-warning-simple__header {
	color: #f88;
	letter-spacing: 1px;
	background: #ff44441a;
	border-bottom: 1px solid #ff44444d;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 700;
	display: flex
}

.dev-warning-simple__close {
	color: #fff;
	cursor: pointer;
	background: 0 0;
	border: none;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 16px;
	transition: all .2s
}

.dev-warning-simple__close:hover {
	background: #ff44444d;
	transform: scale(1.1)
}

.dev-warning-simple__content {
	color: #fff;
	padding: 16px;
	font-size: 13px
}

.dev-warning-simple__content strong {
	color: #f66;
	margin-bottom: 10px;
	font-size: 14px;
	display: block
}

.dev-warning-simple__content p {
	color: #ffffffe6;
	margin: 0 0 12px;
	line-height: 1.5
}

.dev-warning-simple__content small {
	color: #888;
	border-top: 1px solid #ffffff1a;
	margin-top: 8px;
	padding-top: 8px;
	font-size: 11px;
	display: block
}

@media (width<=768px) {
	.dev-warning-simple {
		max-width: none;
		bottom: 10px;
		left: 10px;
		right: 10px
	}
}

.action-button {
	border-radius: 14px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	font-weight: 600;
	display: inline-flex
}

.action-button.subtle {
	border: 1px solid var(--border-subtle);
	background: #ffffff0d
}

.action-button:disabled,
.icon-button:disabled {
	opacity: .56;
	cursor: not-allowed;
	transform: none
}

.app-avatar {
	color: #fff;
	border: 1px solid #ffffff14;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	display: inline-flex;
	overflow: hidden
}

.app-avatar img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block
}

.avatar-sm {
	width: 28px;
	height: 28px;
	font-size: .72rem
}

.avatar-md {
	width: 40px;
	height: 40px;
	font-size: .88rem
}

.avatar-lg {
	width: 64px;
	height: 64px;
	font-size: 1.15rem
}

.avatar-soft {
	border-radius: 64px
}

.avatar-full {
	border-radius: 999px
}

.server-rail-refined {
	gap: 12px;
	padding: 18px 0 14px
}

.rail-action-stack,
.rail-server-list {
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	display: flex
}

.server-chip {
	background: #ffffff0a;
	border: 1px solid #0000;
	border-radius: 18px;
	width: 52px;
	height: 52px;
	padding: 0
}

.server-chip .app-avatar {
	border: none;
	width: 38px;
	height: 38px
}

.server-chip-profile .app-avatar {
	width: 40px;
	height: 40px
}

.server-chip.active {
	background: #6366f138;
	border-color: #818cf847
}

.server-chip.active:before {
	display: none
}

.sidebar-profile-mode,
.sidebar-server-mode {
	overflow: hidden
}

.sidebar-profile-mode {
	overflow-y: auto
}

.sidebar-profile-hero,
.sidebar-server-hero {
	border: 1px solid var(--border-subtle);
	background: #ffffff08;
	border-radius: 24px;
	gap: 14px;
	margin: 10px;
	padding: 14px;
	display: grid
}

.sidebar-profile-hero {
	padding: 18px
}

.sidebar-profile-main,
.server-identity-main,
.profile-card-main {
	align-items: center;
	gap: 12px;
	min-width: 0;
	display: flex
}

.sidebar-profile-copy,
.server-identity-copy,
.profile-card-copy,
.user-list-copy,
.member-row-copy,
.panel-header-copy,
.friend-result-copy,
.attachment-copy {
	gap: 3px;
	min-width: 0;
	display: grid
}

.sidebar-profile-copy strong,
.server-identity-copy strong,
.profile-card-copy strong,
.user-list-copy strong,
.member-row-copy strong,
.panel-header-copy strong,
.friend-result-copy strong,
.attachment-copy strong {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.sidebar-profile-copy span,
.server-identity-copy span,
.profile-card-copy span,
.user-list-copy span,
.member-row-copy span,
.panel-header-copy span,
.friend-result-copy p,
.attachment-copy span {
	color: var(--text-secondary);
	font-size: .82rem;
	line-height: 1.45
}

.sidebar-profile-actions,
.profile-card-actions,
.panel-header-actions {
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	display: flex
}

.sidebar-profile-actions {
	justify-content: space-between
}

.server-banner-refined {
	height: 124px;
	margin-bottom: 0
}

.server-identity-card {
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	display: flex
}

.server-overview-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	display: grid
}

.server-overview-card {
	background: #ffffff0a;
	border: 1px solid #ffffff0d;
	border-radius: 16px;
	gap: 4px;
	min-width: 0;
	padding: 12px 14px;
	display: grid
}

.server-overview-card.wide {
	grid-column: 1/-1
}

.server-overview-label {
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--text-muted);
	font-size: .7rem
}

.server-overview-card strong {
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .86rem;
	overflow: hidden
}

.sidebar-section {
	border-bottom: none;
	gap: 10px;
	padding: 0;
	display: grid
}

.sidebar-section.stretch {
	min-height: 0;
	padding-right: 4px;
	overflow-y: auto
}

.section-head-solid {
	margin-bottom: 0;
	padding: 0 2px
}

.section-counter {
	min-width: 22px;
	height: 22px;
	color: var(--text-secondary);
	background: #ffffff0f;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	padding: 0 8px;
	font-size: .72rem;
	display: inline-flex
}

.channel-list,
.profile-list,
.member-list-refined {
	flex-direction: column;
	gap: 8px;
	display: flex
}

.channel-row,
.user-list-row,
.member-list-row {
	min-height: 52px;
	transition: var(--transition-smooth);
	background: #ffffff08;
	border: 1px solid #0000;
	border-radius: 18px;
	padding: 10px 12px
}

.channel-row {
	gap: 12px
}

.user-list-row,
.member-list-row {
	text-align: left;
	align-items: center;
	gap: 12px;
	width: 100%;
	display: flex
}

.channel-row:hover,
.user-list-row:hover,
.member-list-row:hover {
	background: #ffffff0f;
	border-color: #ffffff14
}

.channel-row.selected,
.user-list-row.selected {
	color: var(--text-primary);
	background: #6366f129;
	border-color: #818cf83d
}

.member-list-row-admin {
	background: linear-gradient(135deg, #f59e0b14, #ffffff08);
	border-color: #f59e0b29
}

.user-list-copy,
.member-row-copy {
	flex: 1
}

.presence-dot {
	border: 2px solid #080b12cc;
	border-radius: 999px;
	flex-shrink: 0;
	width: 10px;
	height: 10px
}

.presence-dot.online {
	background: #22c55e;
	box-shadow: 0 0 0 6px #22c55e1f
}

.presence-dot.offline {
	background: #ef4444;
	box-shadow: 0 0 0 6px #ef44441a
}

.role-badge {
	border-radius: 999px;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	font-size: .72rem;
	font-weight: 700;
	display: inline-flex
}

.role-badge.admin {
	color: #fbbf24;
	background: #f59e0b24;
	border: 1px solid #f59e0b33
}

.profile-card-refined,
.sidebar-summary-card {
	border: 1px solid var(--border-subtle);
	background: #ffffff08;
	border-radius: 20px;
	margin: 0;
	padding: 14px
}

.sidebar-summary-card {
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	display: flex
}

.sidebar-summary-card span {
	color: var(--text-secondary);
	font-size: .82rem
}

.profile-card-refined {
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	display: flex
}

.link-like-button {
	text-decoration: none
}

.panel-header-refined {
	align-items: center;
	gap: 18px;
	padding: 18px 24px
}

.panel-header-main {
	align-items: center;
	gap: 14px;
	min-width: 0;
	display: flex
}

.channel-header-icon {
	width: 40px;
	height: 40px;
	color: var(--text-secondary);
	background: #ffffff0d;
	border-radius: 14px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	display: inline-flex
}

.panel-header-copy strong {
	font-size: 1.02rem
}

.header-search {
	border: 1px solid var(--border-subtle);
	min-width: min(280px, 100%);
	height: 42px;
	color: var(--text-secondary);
	background: #ffffff0a;
	border-radius: 999px;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	display: inline-flex
}

.header-search:focus-within {
	border-color: #818cf859;
	box-shadow: 0 0 0 4px #6366f11f
}

.header-search input {
	width: 100%;
	color: var(--text-primary);
	background: 0 0;
	border: none;
	outline: none;
	font-size: .86rem
}

.empty-state-elevated {
	background: #ffffff05;
	border: 1px dashed #94a3b82e;
	border-radius: 24px;
	min-height: 100%
}

.message-date-divider {
	align-items: center;
	gap: 12px;
	margin: 6px 0;
	display: flex
}

.divider-wave {
	color: #94a3b861;
	white-space: nowrap;
	flex: 1;
	min-width: 36px;
	font-size: .92rem;
	line-height: 1;
	overflow: hidden
}

.message-date-label {
	min-height: 28px;
	color: var(--text-secondary);
	background: #ffffff0d;
	border: 1px solid #ffffff12;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	padding: 0 12px;
	font-size: .76rem;
	display: inline-flex
}

.message-row-refined {
	align-items: flex-end;
	gap: 12px
}

.message-avatar-button {
	cursor: pointer;
	background: 0 0;
	border: none;
	flex-shrink: 0;
	padding: 0
}

.message-stack {
	gap: 8px;
	min-width: 0;
	max-width: min(780px, 100%);
	display: grid
}

.message-meta {
	margin-bottom: 0
}

.message-meta-title {
	align-items: center;
	gap: 8px;
	min-width: 0;
	display: flex
}

.message-bubble-refined {
	background: #ffffff0a;
	gap: 12px;
	max-width: none;
	padding: 14px 16px;
	display: grid;
	position: relative
}

.message-row-refined.own .message-bubble-refined {
	background: linear-gradient(135deg, #6366f129, #0ea5e914);
	border-color: #6366f13d
}

.message-text {
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0
}

.attachment-grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	display: grid
}

.attachment-card {
	background: #080b1273;
	border: 1px solid #ffffff12;
	border-radius: 18px;
	gap: 0;
	display: grid;
	position: relative;
	overflow: hidden
}

.attachment-visual-button,
.attachment-image,
.attachment-video {
	width: 100%;
	display: block
}

.attachment-visual-button {
	cursor: zoom-in;
	background: 0 0;
	border: none;
	padding: 0
}

.attachment-image,
.attachment-video {
	object-fit: cover;
	background: #0003;
	min-height: 180px;
	max-height: 260px
}

.attachment-video-shell {
	background: radial-gradient(circle at top, #6366f124, #0000 52%), linear-gradient(#090c14e6, #050810f5);
	padding: 0;
	position: relative
}

.attachment-video {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 34px #00000047
}

.attachment-audio-shell,
.attachment-file-shell {
	gap: 12px;
	padding: 14px;
	display: grid
}

.attachment-head,
.attachment-file-shell,
.attachment-foot {
	align-items: center;
	gap: 12px;
	display: flex
}

.attachment-file-shell-action {
	text-align: left;
	cursor: pointer;
	width: 100%;
	color: inherit;
	background: #ffffff05;
	border: none;
	transition: transform .16s, background .16s, box-shadow .16s
}

.attachment-file-shell-action:hover {
	background: #6366f11f;
	transform: translateY(-1px);
	box-shadow: 0 18px 34px #0a0e1c38
}

.attachment-file-shell-action:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px #ffffff0f, 0 0 0 3px #6366f147
}

.attachment-copy {
	flex: 1
}

.attachment-copy span {
	align-items: center;
	gap: 6px;
	display: inline-flex
}

.attachment-foot {
	border-top: 1px solid #ffffff0f;
	padding: 14px
}

.attachment-foot-actions {
	align-items: center;
	gap: 8px;
	display: inline-flex
}

.attachment-kind-icon,
.attachment-download {
	border-radius: 12px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	display: inline-flex
}

.attachment-kind-icon {
	color: #c7d2fe;
	background: #6366f124
}

.attachment-download {
	color: var(--text-primary);
	cursor: pointer;
	background: #ffffff0d;
	border: none;
	text-decoration: none
}

.attachment-download:hover {
	color: #fff;
	background: #6366f12e;
	text-decoration: none
}

.attachment-download-passive {
	pointer-events: none
}

.attachment-loading {
	min-height: 180px;
	color: var(--text-secondary);
	place-items: center;
	gap: 10px;
	display: grid
}

.attachment-manual-load {
	background: radial-gradient(circle at top, #6366f11a, #0000 58%), #ffffff05;
	padding: 18px
}

.attachment-load-button {
	width: min(260px, 100%);
	min-height: 84px;
	color: var(--text-primary);
	cursor: pointer;
	text-align: left;
	background: #ffffff0e;
	border: 1px solid #ffffff14;
	border-radius: 14px;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 14px;
	transition: background .16s, border-color .16s, transform .16s;
	display: inline-flex
}

.attachment-load-button:hover {
	border-color: color-mix(in srgb, var(--primary) 38%, transparent);
	background: color-mix(in srgb, var(--primary) 14%, #ffffff0e);
	transform: translateY(-1px)
}

.attachment-load-copy {
	gap: 3px;
	min-width: 0;
	display: grid
}

.attachment-load-copy strong,
.attachment-load-copy span {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.attachment-load-copy span {
	color: var(--text-secondary);
	font-size: .82rem
}

.attachment-loading.error {
	color: #fca5a5
}

.attachment-loading-spinner {
	animation: 1s linear infinite spin
}

.attachment-preview-overlay {
	z-index: 320;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	background: #04070ed1;
	place-items: center;
	padding: 24px;
	display: grid;
	position: fixed;
	inset: 0
}

.attachment-preview-dialog {
	background: #080b12e0;
	border: 1px solid #ffffff14;
	border-radius: 28px;
	width: min(1100px, 100vw - 48px);
	max-height: calc(100vh - 48px);
	padding: 14px;
	position: relative;
	box-shadow: 0 28px 70px #0000006b
}

.attachment-preview-image {
	object-fit: contain;
	border-radius: 20px;
	width: 100%;
	max-height: calc(100vh - 76px);
	display: block
}

.attachment-preview-close {
	z-index: 1;
	color: #fff;
	background: #080c14bd;
	border: 1px solid #ffffff1a;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	display: inline-flex;
	position: absolute;
	top: 18px;
	right: 18px
}

.attachment-audio-shell audio {
	width: 100%
}

.composer-refined {
	flex: none;
	gap: 12px;
	padding: 14px 22px 20px;
	display: grid;
	position: relative;
	overflow: visible
}

.pending-upload-row {
	flex-wrap: wrap;
	gap: 8px;
	display: flex
}

.upload-chip-refined {
	color: #c7d2fe;
	background: #6366f11f;
	border: 1px solid #818cf82e;
	border-radius: 999px;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 0 12px;
	display: inline-flex
}

.upload-chip-refined button {
	width: 18px;
	height: 18px;
	color: inherit;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	display: inline-flex
}

.composer-shell {
	border: 1px solid var(--border-subtle);
	background: #ffffff0a;
	border-radius: 24px;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px;
	display: grid;
	position: relative;
	overflow: visible
}

.composer-shell.disabled {
	opacity: .72
}

.composer-attach {
	width: 44px;
	height: 44px;
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition-fast);
	background: #ffffff0f;
	border-radius: 14px;
	justify-content: center;
	align-items: center;
	display: inline-flex
}

.composer-attach:hover {
	color: #fff;
	background: #6366f129
}

.composer-attach.disabled {
	pointer-events: none;
	opacity: .48
}

.composer-shell textarea {
	resize: vertical;
	height: 46px;
	min-height: 46px;
	max-height: 160px;
	box-shadow: none;
	background: 0 0;
	border: none;
	padding: 10px 2px 10px 0
}

.composer-shell textarea:focus {
	box-shadow: none;
	background: 0 0
}

.info-panel-refined {
	padding: 14px;
	display: block
}

.member-card-surface {
	border-radius: 24px;
	gap: 16px;
	padding: 18px;
	display: grid
}

.info-panel-head {
	justify-content: space-between;
	align-items: center;
	display: flex
}

.info-panel-head span {
	color: var(--text-secondary);
	font-size: .82rem
}

.hover-user-preview {
	z-index: 260;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	pointer-events: none;
	background: #0b0e17f0;
	border: 1px solid #ffffff14;
	border-radius: 22px;
	width: min(300px, 100vw - 20px);
	padding: 16px;
	position: fixed;
	box-shadow: 0 22px 60px #00000073
}

.hover-user-head,
.hover-user-title,
.hover-user-foot,
.presence-inline {
	align-items: center;
	display: flex
}

.hover-user-head {
	gap: 12px;
	margin-bottom: 14px
}

.hover-user-meta,
.hover-user-body,
.hover-user-section {
	gap: 8px;
	display: grid
}

.hover-user-title {
	flex-wrap: wrap;
	gap: 8px
}

.presence-inline {
	color: var(--text-secondary);
	gap: 8px;
	font-size: .8rem
}

.hover-user-label {
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-size: .72rem
}

.hover-user-section p {
	color: var(--text-secondary);
	font-size: .84rem;
	line-height: 1.55
}

.mini-pill {
	min-height: 28px;
	color: var(--text-secondary);
	background: #ffffff0d;
	border-radius: 999px;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	font-size: .78rem;
	display: inline-flex
}

.settings-modal-refined {
	width: min(760px, 94vw)
}

.friend-modal .settings-body {
	padding: 14px 18px 18px
}

.server-settings-modal {
	width: min(900px, 96vw)
}

.modal-subtitle {
	color: var(--text-secondary);
	margin-top: 4px;
	font-size: .84rem
}

.settings-nav button {
	align-items: center;
	gap: 10px;
	display: flex
}

.settings-pane-stack,
.profile-settings-pane,
.server-settings-body,
.friend-search-panel,
.friend-request-panel {
	border-radius: 24px;
	gap: 14px;
	height: 280px;
	display: grid;
	overflow: auto
}

.profile-settings-hero {
	background: #ffffff08;
	border: 1px solid #ffffff0f;
	border-radius: 20px;
	align-items: center;
	gap: 18px;
	padding: 16px;
	display: flex
}

.profile-settings-actions,
.server-icon-editor {
	gap: 8px;
	display: grid
}

.profile-settings-actions span,
.server-banner-placeholder span,
.panel-title {
	color: var(--text-secondary);
	font-size: .84rem
}

.settings-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	display: grid
}

.settings-field-wide {
	grid-column: 1/-1
}

.settings-field input,
.settings-field textarea,
.settings-field select,
.search-shell input {
	border: 1px solid var(--border-light);
	width: 100%;
	color: var(--text-primary);
	background: #ffffff0a;
	border-radius: 16px;
	padding: 12px 14px;
	font-size: .88rem
}

.settings-field textarea {
	resize: vertical;
	min-height: 120px
}

.settings-field input:focus,
.settings-field textarea:focus,
.settings-field select:focus,
.search-shell input:focus {
	border-color: #818cf857;
	outline: none;
	box-shadow: 0 0 0 4px #6366f11f
}

.settings-toggle {
	min-height: 54px;
	padding: 14px 16px
}

.settings-toggle input {
	accent-color: var(--primary)
}

.media-upload-button {
	cursor: pointer;
	background: #ffffff0d;
	border: 1px solid #ffffff14;
	border-radius: 14px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: fit-content;
	min-height: 38px;
	padding: 0 14px;
	font-weight: 600;
	display: inline-flex
}

.server-media-editor {
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 16px;
	display: grid
}

.server-banner-editor,
.server-icon-editor {
	background: #ffffff08;
	border: 1px solid #ffffff0f;
	border-radius: 20px;
	padding: 14px
}

.server-banner-editor {
	gap: 12px;
	display: grid
}

.server-banner-editor img {
	object-fit: cover;
	border-radius: 16px;
	width: 100%;
	height: 200px;
	display: block
}

.server-banner-placeholder {
	background: #ffffff08;
	border: 1px dashed #94a3b83d;
	border-radius: 16px;
	place-items: center;
	gap: 8px;
	height: 200px;
	display: grid
}

.server-icon-editor {
	align-content: start;
	justify-items: start
}

.modal-actions {
	justify-content: flex-end;
	gap: 10px;
	padding: 0 20px 20px;
	display: flex
}

.friend-modal-body {
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
	align-items: start
}

.search-shell {
	background: #ffffff08;
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	display: grid
}

.search-shell input {
	box-shadow: none;
	background: 0 0;
	border: none;
	padding: 0
}

.friend-result-list {
	gap: 8px;
	display: grid
}

.friend-result-card {
	background: #ffffff08;
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	align-items: center;
	gap: 12px;
	padding: 12px;
	display: flex
}

.friend-result-copy {
	flex: 1
}

.friend-result-copy p {
	margin: 0
}

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

.empty-inline-card {
	color: var(--text-secondary);
	background: #ffffff05;
	border: 1px dashed #94a3b833;
	border-radius: 18px;
	align-items: center;
	gap: 10px;
	padding: 14px;
	display: flex
}

.status-stack {
	z-index: 250;
	gap: 10px;
	max-width: min(360px, 100vw - 24px);
	display: grid;
	position: fixed;
	bottom: 18px;
	right: 18px
}

.toast-line {
	margin: 0;
	box-shadow: 0 14px 36px #00000047
}

.invite-preview-card {
	z-index: 285;
	background: radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 22%, transparent), transparent 34%), linear-gradient(180deg, #0a0e18f5, #080a12fa);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid #ffffff14;
	border-radius: 30px;
	width: min(540px, 100vw - 28px);
	animation: .46s cubic-bezier(.2, .9, .28, 1) inviteCardFloat;
	position: fixed;
	top: 50%;
	left: 50%;
	overflow: hidden;
	transform: translate(-50%, -50%);
	box-shadow: 0 32px 80px #00000057
}

.invite-preview-banner {
	object-fit: cover;
	width: 100%;
	height: 180px;
	display: block
}

.invite-preview-body {
	gap: 18px;
	padding: 18px;
	display: grid
}

.invite-preview-head {
	align-items: center;
	gap: 16px;
	display: flex
}

.invite-preview-copy {
	gap: 6px;
	min-width: 0;
	display: grid
}

.invite-preview-copy strong {
	font-size: 1.1rem
}

.invite-preview-copy span:last-child {
	color: var(--text-secondary);
	line-height: 1.5
}

.invite-preview-actions {
	justify-content: flex-end;
	gap: 10px;
	display: flex
}

.invite-preview-avatar-skeleton {
	background: #ffffff14;
	border-radius: 22px;
	width: 64px;
	height: 64px
}

.incoming-call-card {
	z-index: 280;
	background: radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 36%), linear-gradient(180deg, #0a0e18f0, #080a12fa);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid #ffffff14;
	border-radius: 26px;
	gap: 16px;
	width: min(360px, 100vw - 24px);
	padding: 16px;
	display: grid;
	position: fixed;
	top: 18px;
	right: 18px;
	overflow: hidden;
	box-shadow: 0 24px 54px #00000047
}

.incoming-call-head,
.incoming-call-actions {
	z-index: 2;
	position: relative
}

.incoming-call-head {
	align-items: center;
	gap: 14px;
	display: flex
}

.incoming-call-copy {
	gap: 4px;
	min-width: 0;
	display: grid
}

.incoming-call-copy strong {
	font-size: 1.04rem
}

.incoming-call-copy span:last-child {
	color: var(--text-secondary);
	font-size: .84rem
}

.incoming-call-actions {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	display: grid
}

.incoming-call-ambient,
.incoming-call-noise {
	pointer-events: none;
	position: absolute
}

.incoming-call-ambient {
	filter: blur(40px);
	opacity: .54;
	border-radius: 999px;
	animation: 12s ease-in-out infinite alternate ambientFloatA
}

.incoming-call-ambient-a {
	background: color-mix(in srgb, var(--primary) 58%, transparent);
	width: 140px;
	height: 140px;
	top: -16px;
	left: -14px
}

.incoming-call-ambient-b {
	background: #0ea5e938;
	width: 120px;
	height: 120px;
	animation-name: ambientFloatB;
	bottom: -14px;
	right: -12px
}

.incoming-call-noise {
	opacity: .24;
	mix-blend-mode: soft-light;
	background-image: radial-gradient(#ffffff47 .8px, #0000 1px), radial-gradient(#0f172a7a .8px, #0000 1.1px), linear-gradient(125deg, #ffffff0f, #0000 46%);
	background-position: 0 0, 7px 9px;
	background-size: 15px 15px, 17px 17px, 100% 100%;
	animation: 9s steps(6, end) infinite grainShift;
	inset: 0
}

@media (width<=1280px) {

	.app-shell,
	.app-shell--compact {
		grid-template-columns: 72px 300px minmax(0, 1fr)
	}

	.info-panel-resize-shell,
	.info-panel-refined {
		display: none
	}
}

@media (width<=980px) {

	.settings-grid,
	.server-media-editor,
	.friend-modal-body {
		grid-template-columns: 1fr
	}

	.profile-settings-hero,
	.server-identity-card,
	.sidebar-profile-actions,
	.profile-card-refined,
	.friend-result-card {
		flex-direction: column;
		align-items: flex-start
	}

	.composer-shell {
		grid-template-columns: 44px minmax(0, 1fr)
	}

	.composer-send {
		grid-column: 1/-1;
		width: 100%
	}
}

@media (width<=800px) {

	.app-shell,
	.app-shell--compact {
		grid-template-columns: 1fr
	}

	.server-rail-refined {
		flex-direction: row;
		height: auto;
		padding: 10px 12px;
		overflow-x: auto
	}

	.rail-action-stack,
	.rail-server-list,
	.rail-bottom {
		flex-direction: row
	}

	.sidebar {
		height: auto;
		max-height: 44vh
	}

	.content-panel {
		min-height: 56vh
	}

	.panel-header-refined {
		align-items: flex-start
	}
}

.sidebar {
	gap: 8px;
	padding: 0
}

.sidebar-profile-hero {
	gap: 10px;
	padding: 14px
}

.sidebar-server-hero {
	gap: 0;
	padding: 0;
	overflow: visible
}

.sidebar-server-hero .server-identity-card {
	padding: 10px
}

.sidebar-server-hero .server-overview-grid {
	padding: 10px 12px 12px
}

.sidebar-server-mode .sidebar-section.stretch,
.sidebar-profile-mode .sidebar-section.stretch {
	flex: none;
	padding-right: 0;
	overflow: visible
}

.sidebar-server-hero {
	position: relative
}

.server-banner-refined {
	aspect-ratio: 1;
	background-position: 50%;
	background-size: cover;
	border: none;
	width: 100%;
	margin: 0;
	overflow: hidden
}

.sidebar-server-hero .server-identity-card {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: 0 0;
	width: auto;
	padding-bottom: 10px;
	position: relative;
	bottom: auto;
	left: auto
}

.server-overview-grid {
	gap: 8px
}

.server-overview-card {
	border-radius: 14px;
	padding: 10px 12px
}

.sidebar-section {
	gap: 8px
}

.section-head-solid {
	padding: 0 10px
}

.channel-list,
.profile-list,
.member-list-refined {
	gap: 6px;
	padding: 0 10px 10px
}

.channel-row,
.user-list-row,
.member-list-row {
	border-radius: 16px;
	min-height: 46px;
	padding: 8px 10px
}

.profile-card-refined,
.sidebar-summary-card,
.member-card-surface {
	border-radius: 18px;
	padding: 12px
}

.sidebar-summary-card {
	gap: 10px
}

.panel-header-refined {
	grid-template-columns: minmax(0, 1fr) minmax(240px, 340px) auto;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	display: grid
}

.panel-header-center,
.panel-header-actions {
	align-items: center;
	display: flex
}

.panel-header-center {
	justify-content: center;
	min-width: 0
}

.panel-header-actions {
	justify-content: flex-end
}

.header-search {
	width: 100%;
	min-width: 0;
	max-width: 340px;
	height: 40px;
	padding: 0 12px
}

.messages-refined {
	gap: 12px;
	padding: 18px 18px 12px
}

.message-row-refined {
	gap: 10px;
	padding: 12px;
	transition: all .3s
}

.message-stack {
	gap: 6px;
	max-width: min(720px, 100%)
}

.message-bubble-refined {
	border-radius: 18px;
	gap: 10px;
	padding: 12px 14px;
	box-shadow: 0 12px 30px #00000024
}

.message-bubble-refined:after {
	content: "";
	background: inherit;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	width: 12px;
	height: 14px;
	box-shadow: none;
	border: 0;
	position: absolute;
	bottom: 10px;
	left: -12px
}

.message-bubble-meta {
	align-items: center;
	gap: 10px;
	margin-bottom: 2px
}

.message-date-divider {
	margin: 2px 0 4px
}

.divider-wave {
	color: #0000;
	min-width: 48px;
	height: 8px;
	font-size: 0;
	position: relative
}

.divider-wave:before {
	content: "";
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C 6 0 14 0 20 4 S 34 8 40 4 S 54 0 60 4 S 74 8 80 4' fill='none' stroke='%2394a3b8' stroke-opacity='.42' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") 50%/80px 8px repeat-x;
	position: absolute;
	inset: 0
}

.message-date-label {
	min-height: 26px;
	padding: 0 10px
}

.attachment-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px
}

.attachment-card {
	background: radial-gradient(circle at top left, var(--primary-soft), transparent 44%), linear-gradient(180deg, #121826e6, #080b12f5);
	border-color: #ffffff14;
	border-radius: 20px;
	box-shadow: 0 18px 36px #0000002e
}

.attachment-image,
.attachment-video {
	aspect-ratio: 16/10;
	min-height: 0;
	max-height: none
}

.attachment-head,
.attachment-file-shell,
.attachment-foot {
	gap: 10px
}

.attachment-audio-shell,
.attachment-file-shell {
	padding: 12px
}

.attachment-audio-shell audio {
	background: #070a118c;
	border-radius: 14px;
	width: 100%;
	height: 48px
}

.attachment-audio-shell audio::-webkit-media-controls-enclosure {
	background: linear-gradient(135deg, #192034eb, #0d121efa);
	border-radius: 14px
}

.attachment-audio-shell audio::-webkit-media-controls-panel {
	background: 0 0
}

.media-tile {
	background: radial-gradient(circle at top, var(--primary-soft), transparent 42%), linear-gradient(180deg, #101420f5, #080a12fa);
	border-color: #ffffff14;
	border-radius: 22px;
	box-shadow: 0 18px 42px #0000003d
}

.media-video,
.media-fallback {
	height: 100%;
	min-height: 0
}

.media-meta {
	border-top-color: #ffffff12;
	padding: 10px 14px
}

.composer-refined {
	gap: 10px;
	padding: 10px 16px 16px
}

.composer-shell {
	border-radius: 20px;
	gap: 10px;
	padding: 8px
}

.composer-send {
	min-width: 120px
}

.info-panel-refined {
	padding: 10px
}

.settings-layout {
	grid-template-columns: 168px minmax(0, 1fr);
	align-items: start
}

.settings-nav {
	align-content: start;
	align-self: start;
	gap: 6px
}

.settings-nav button {
	border-radius: 16px;
	flex: none;
	width: 100%;
	min-height: 48px;
	padding: 0 14px
}

.profile-settings-hero {
	gap: 14px;
	padding: 14px
}

.compact-grid,
.friend-modal-body,
.server-access-body {
	gap: 12px
}

.theme-pill-group {
	gap: 8px;
	display: flex
}

.theme-pill {
	border: 1px solid var(--border-light);
	min-height: 42px;
	color: var(--text-secondary);
	transition: var(--transition-fast);
	background: #ffffff0a;
	border-radius: 14px;
	flex: 1;
	padding: 0 12px
}

.theme-pill.active {
	border-color: var(--border-glow);
	background: var(--primary-soft);
	color: var(--text-primary)
}

.appearance-card,
.access-panel-card {
	background: #ffffff08;
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	gap: 12px;
	padding: 14px;
	display: grid
}

.accent-editor {
	gap: 10px;
	display: grid
}

.accent-picker-shell {
	width: fit-content;
	min-height: 44px;
	color: var(--text-primary);
	background: #ffffff0a;
	border: 1px solid #ffffff14;
	border-radius: 14px;
	align-items: center;
	gap: 10px;
	padding: 0 12px;
	display: inline-flex
}

.accent-picker-shell input[type=color] {
	cursor: pointer;
	background: 0 0;
	border: none;
	width: 28px;
	height: 28px;
	padding: 0
}

.accent-preset-row {
	flex-wrap: wrap;
	gap: 8px;
	display: flex
}

.accent-preset {
	border: 2px solid #ffffff1f;
	border-radius: 999px;
	width: 26px;
	height: 26px;
	box-shadow: 0 0 #ffffff14
}

.accent-preset.active {
	box-shadow: 0 0 0 4px #ffffff14
}

.appearance-preview-card {
	--preview-accent: var(--primary);
	background: linear-gradient(120deg, #ffffff05, #0000 40%), #070a1059;
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	gap: 10px;
	padding: 14px;
	display: grid
}

.appearance-preview-top {
	justify-content: space-between;
	align-items: center;
	display: flex
}

.preview-pill {
	background: color-mix(in srgb, var(--preview-accent) 18%, transparent);
	min-height: 26px;
	color: var(--text-primary);
	border-radius: 999px;
	align-items: center;
	padding: 0 10px;
	font-size: .76rem;
	display: inline-flex
}

.preview-pill-ghost {
	color: var(--text-secondary);
	background: #ffffff0f
}

.preview-skeleton-line,
.preview-skeleton-grid span {
	background: #ffffff12;
	border-radius: 999px;
	position: relative;
	overflow: hidden
}

.preview-skeleton-line:after,
.preview-skeleton-grid span:after {
	content: "";
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--preview-accent) 36%, transparent), transparent);
	animation: 1.6s linear infinite skeletonShift;
	position: absolute;
	inset: 0;
	transform: translate(-120%)
}

.preview-skeleton-line {
	height: 11px
}

.preview-skeleton-line.large {
	width: 72%
}

.preview-skeleton-line.short {
	width: 42%
}

.preview-skeleton-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	display: grid
}

.preview-skeleton-grid span {
	border-radius: 14px;
	height: 52px
}

@keyframes skeletonShift {
	to {
		transform: translate(120%)
	}
}

.server-access-modal {
	width: min(560px, 92vw)
}

.segmented-switch {
	background: #ffffff0a;
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding: 4px;
	display: grid
}

.segmented-switch button {
	min-height: 42px;
	color: var(--text-secondary);
	border-radius: 14px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	display: inline-flex
}

.segmented-switch button.active {
	background: var(--primary-soft);
	color: var(--text-primary)
}

.access-panel-copy {
	gap: 8px;
	display: grid
}

.access-panel-copy p {
	color: var(--text-secondary);
	font-size: .84rem
}

.categorized-friend-modal {
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr)
}

.friend-category-stack {
	gap: 12px;
	display: grid
}

.friend-result-card {
	border-radius: 16px;
	padding: 12px
}

.compact-friend-card {
	align-items: center
}

.audio-player-card {
	background: radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 18%, transparent), transparent 42%), linear-gradient(180deg, #101522d1, #090d16eb);
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	gap: 12px;
	padding: 12px;
	display: grid;
	box-shadow: inset 0 1px #ffffff0a
}

.audio-kind-icon {
	background: color-mix(in srgb, var(--primary) 18%, transparent);
	color: var(--primary-hover)
}

.audio-player-head,
.audio-player-body,
.audio-player-time {
	align-items: center;
	display: flex
}

.audio-player-body {
	align-items: center
}

.audio-player-toggle {
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 76%, white 6%), color-mix(in srgb, var(--primary) 52%, #0f172a 18%));
	color: #fff;
	width: 44px;
	height: 44px;
	box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 24%, transparent);
	border-radius: 16px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	display: inline-flex
}

.audio-player-toggle.playing {
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 66%, white 10%), color-mix(in srgb, var(--primary) 40%, #0f172a 24%))
}

.audio-player-track {
	flex: 1;
	gap: 8px;
	display: grid
}

.audio-player-track-meta {
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	display: flex
}

.audio-player-track input[type=range] {
	appearance: none;
	background: linear-gradient(90deg, var(--primary) 0%, var(--primary) var(--progress), #94a3b82e var(--progress), #94a3b82e 100%);
	border-radius: 999px;
	outline: none;
	width: 100%;
	height: 8px
}

.audio-player-track input[type=range]::-webkit-slider-thumb {
	appearance: none;
	border: 2px solid var(--primary);
	background: #fff;
	border-radius: 999px;
	width: 16px;
	height: 16px;
	box-shadow: 0 2px 10px #0000002e
}

.audio-player-track input[type=range]::-moz-range-thumb {
	border: 2px solid var(--primary);
	background: #fff;
	border-radius: 999px;
	width: 16px;
	height: 16px;
	box-shadow: 0 2px 10px #0000002e
}

.audio-player-time {
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
	justify-content: space-between;
	font-size: .76rem
}

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

:root[data-theme=light] .sidebar-profile-hero,
:root[data-theme=light] .sidebar-server-hero,
:root[data-theme=light] .server-overview-card,
:root[data-theme=light] .channel-row,
:root[data-theme=light] .user-list-row,
:root[data-theme=light] .member-list-row,
:root[data-theme=light] .sidebar-summary-card,
:root[data-theme=light] .member-card-surface,
:root[data-theme=light] .message-bubble-refined,
:root[data-theme=light] .attachment-card,
:root[data-theme=light] .composer-shell,
:root[data-theme=light] .search-shell,
:root[data-theme=light] .friend-result-card,
:root[data-theme=light] .appearance-card,
:root[data-theme=light] .access-panel-card,
:root[data-theme=light] .server-banner-editor,
:root[data-theme=light] .server-icon-editor,
:root[data-theme=light] .profile-settings-hero,
:root[data-theme=light] .empty-inline-card,
:root[data-theme=light] .hover-user-preview,
:root[data-theme=light] .settings-modal,
:root[data-theme=light] .server-access-modal,
:root[data-theme=light] .voice-hero {
	background-color: #ffffffc7;
	border-color: #94a3b833
}

:root[data-theme=light] .hover-user-preview {
	background: #fffffff5;
	box-shadow: 0 22px 54px #0f172a29
}

:root[data-theme=light] .attachment-card {
	background: radial-gradient(circle at top left, var(--primary-soft), transparent 48%), linear-gradient(180deg, #ffffffeb, #f1f5fffa)
}

:root[data-theme=light] .audio-player-toggle {
	box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 20%, transparent)
}

:root[data-theme=light] .media-tile {
	background: radial-gradient(circle at top, var(--primary-soft), transparent 40%), linear-gradient(180deg, #fffffff0, #e6eefcfa);
	box-shadow: 0 18px 38px #0f172a1f
}

:root[data-theme=light] .media-meta {
	background: #ffffffa3
}

:root[data-theme=light] .media-video {
	background: #e2e8f0e6
}

:root[data-theme=light] .message-row-refined.own .message-bubble-refined {
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, white), #ffffffeb)
}

:root[data-theme=light] .composer-attach,
:root[data-theme=light] .header-search,
:root[data-theme=light] .accent-picker-shell,
:root[data-theme=light] .segmented-switch,
:root[data-theme=light] .theme-pill {
	background: #f8faffe6;
	border-color: #94a3b83d
}

:root[data-theme=light] .empty-state-elevated {
	background: #ffffff9e;
	border-color: #94a3b838
}

.content-panel-in-call {
	overflow: hidden
}

.media-fallback-shell {
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 24px;
	display: flex
}

.media-fallback-avatar {
	border: none;
	width: 92px;
	height: 92px;
	box-shadow: 0 18px 44px #00000038
}

.dm-call-stage {
	isolation: isolate;
	background: radial-gradient(#0a0e1a, #05070c);
	flex-direction: column;
	flex: 1;
	gap: 16px;
	min-height: 0;
	padding: 18px 18px 20px;
	display: flex;
	position: relative;
	overflow: hidden
}

.dm-call-stage:after {
	content: "";
	pointer-events: none;
	z-index: 0;
	background-image: repeating-linear-gradient(90deg, #0000, #0000 45px, #ffffff0a 45px 46px, #0000 46px 90px), repeating-linear-gradient(0deg, #0000, #0000 55px, #ffffff08 55px 56px, #0000 56px 110px), radial-gradient(at 12% 18%, #ffffff0f 0%, #0000 30%), radial-gradient(at 88% 82%, #6366f114 0%, #0000 35%);
	background-repeat: repeat, repeat, no-repeat, no-repeat, repeat;
	background-size: 90px 100%, 100% 110px, auto, auto, 70px 70px;
	animation: 8s ease-in-out infinite alternate pulseSymbols;
	position: absolute;
	inset: 0
}

.dm-call-stage:before,
.dm-call-stage:after {
	box-shadow: inset 0 0 100px #0000004d
}

.dm-call-stage {
	background: radial-gradient(#0a0e1acc 0%, #03050af2 70%, #010205 100%)
}

.dm-call-ambient {
	filter: blur(48px);
	opacity: .56;
	pointer-events: none;
	border-radius: 999px;
	animation: 18s ease-in-out infinite alternate ambientFloatA;
	position: absolute
}

.dm-call-ambient-a {
	background: color-mix(in srgb, var(--primary) 48%, transparent);
	width: 240px;
	height: 240px;
	inset: auto auto 18% -5%
}

.dm-call-ambient-b {
	background: #0ea5e933;
	width: 200px;
	height: 200px;
	animation-name: ambientFloatB;
	inset: 8% -4% auto auto
}

.dm-call-ambient-c {
	background: #f472b624;
	width: 180px;
	height: 180px;
	animation-name: ambientFloatC;
	inset: auto 24% 10% auto
}

.dm-call-grain {
	opacity: .22;
	mix-blend-mode: soft-light;
	pointer-events: none;
	background-image: radial-gradient(#ffffff3d .8px, #0000 1px), radial-gradient(#080b1266 .8px, #0000 1.2px), linear-gradient(135deg, #ffffff0d, #0000 34%, #0c121e14);
	background-position: 0 0, 7px 10px;
	background-size: 15px 15px, 18px 18px, 100% 100%;
	animation: 12s steps(7, end) infinite grainShift;
	position: absolute;
	inset: 0
}

.dm-call-overlay {
	z-index: 2;
	position: relative
}

.dm-call-overlay-top {
	justify-content: center;
	display: flex
	opacity:0;
}

.dm-call-overlay-copy {
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	background: #090d18a8;
	border: 1px solid #ffffff14;
	border-radius: 22px;
	gap: 6px;
	min-width: min(420px, 100%);
	max-width: min(520px, 100%);
	padding: 14px 18px;
	display: grid;
	box-shadow: 0 20px 46px #00000042
}

.dm-call-overlay-copy-compact {
	width: fit-content;
	min-width: 0;
	padding: 12px 16px
}

.dm-call-overlay-copy strong {
	font-size: 1.08rem
}

.dm-call-overlay-copy span:last-child {
	color: var(--text-secondary);
	font-size: .84rem
}

.dm-call-stage-main {
	z-index: 1;
	flex: 1;
	place-items: center;
	min-height: 0;
	display: grid;
	position: relative
}

.dm-call-stage-main.avatar-stage {
	align-content: center
}

.dm-call-avatar-stage {
	text-align: center;
	justify-items: center;
	gap: 14px;
	display: grid
}

.dm-call-avatar-ring {
	background: radial-gradient(circle, #ffffff14, transparent 64%), radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 70%);
	border-radius: 999px;
	place-items: center;
	margin-bottom: 12px;
	padding: 8px;
	display: grid;
	box-shadow: 0 0 0 1px #ffffff0a, 0 30px 80px #0000002e
}

.dm-call-avatar-display {
	border: none;
	width: 166px;
	height: 166px;
	box-shadow: 0 22px 54px #00000057
}

.dm-call-avatar-display img {
	object-fit: cover
}

.dm-call-timer {
	min-height: 34px;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
	background: #ffffff0d;
	border: 1px solid #ffffff14;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	padding: 0 16px;
	font-size: .88rem;
	display: inline-flex
}

.dm-call-avatar-stage strong {
	font-size: 1.2rem;
	font-weight: 700
}

.dm-call-stage-main.split {
	grid-template-columns: repeat(2, minmax(280px, 440px));
	place-content: center;
	gap: 18px
}

.dm-call-filmstrip {
	z-index: 2;
	resize: horizontal;
	justify-content: center;
	gap: 14px;
	min-width: 180px;
	max-width: 500px;
	padding: 2px 2px 4px;
	display: flex;
	position: relative;
	overflow-x: auto
}

.call-grid {
	place-items: stretch center;
	gap: 14px;
	width: 100%;
	height: 100%
}

.media-tile-grid {
	aspect-ratio: 16/9;
	width: 100%;
	max-height: 320px;
	overflow: hidden
}

.media-tile-filmstrip.compact {
	flex: none;
	width: 72px;
	height: 72px
}

.media-tile-filmstrip.compact .media-meta {
	display: none
}

.media-tile-filmstrip.compact .media-fallback-avatar {
	border-radius: 50% !important
}

.dm-call-filmstrip.screen-share {
	justify-content: flex-start
}

.dm-call-overlay-bottom {
	justify-items: center;
	gap: 12px;
	display: grid
}

.dm-call-control-bar {
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	background: #090d18b8;
	border: 1px solid #ffffff14;
	border-radius: 24px;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	max-width: 100%;
	padding: 10px;
	display: flex;
	box-shadow: 0 22px 52px #00000042
}

.call-floating-button {
	min-height: 52px;
	color: var(--text-primary);
	transition: var(--transition-fast);
	background: #ffffff0d;
	border: 1px solid #ffffff14;
	border-radius: 18px;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	display: inline-flex
}

.call-floating-button span {
	font-weight: 600
}

.call-floating-button:hover {
	border-color: #ffffff24;
	transform: translateY(-1px)
}

.call-floating-button.active {
	background: var(--primary-soft);
	border-color: var(--border-glow)
}

.call-floating-button.warning.active {
	color: #fde68a;
	background: #f59e0b29;
	border-color: #f59e0b4d
}

.call-floating-button.danger {
	color: #fecaca;
	background: #ef444429;
	border-color: #ef444447
}

.dm-call-stage .status-line.error {
	margin: 0
}

.media-tile-hero,
.media-tile-stage,
.media-tile-filmstrip {
	width: 100%
}

.call-context-menu {
	background: var(--primary-soft);
	border: 1px solid var(--border-subtle);
	min-width: 160px;
	max-width: 240px;
	color: var(--text-primary);
	border-radius: 8px;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	display: flex;
	box-shadow: 0 2px 8px #0000004d
}

.call-context-item {
	cursor: pointer;
	border-radius: 4px;
	flex-direction: column;
	gap: 4px;
	padding: 4px 6px;
	display: flex
}

.call-context-item:hover {
	background: var(--primary-hover)
}

.call-context-item.danger,
.member-context-menu .danger {
	color: #fecaca
}

.call-context-item input[type=range] {
	width: 100%
}

.member-context-menu {
	border: 1px solid var(--border-subtle);
	background: color-mix(in srgb, var(--surface-elevated) 94%, black);
	border-radius: 12px;
	gap: 4px;
	min-width: 190px;
	padding: 8px;
	display: grid;
	box-shadow: 0 18px 45px #00000059
}

.member-context-menu button {
	color: var(--text-primary);
	cursor: pointer;
	font: inherit;
	text-align: left;
	background: 0 0;
	border: 0;
	border-radius: 9px;
	padding: 9px 10px
}

.member-context-menu button:hover {
	background: #ffffff14
}

.friend-badge {
	background: var(--primary);
	color: #fff;
	text-align: center;
	border-radius: 8px;
	min-width: 16px;
	padding: 2px 4px;
	font-size: 10px;
	line-height: 1;
	display: inline-block
}

.media-tile-hero {
	max-width: 440px
}

.media-tile-stage,
.media-tile-stage.screen-share {
	width: 100%;
	max-width: none
}

.media-tile-filmstrip {
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	min-width: 0;
	max-width: none;
	display: flex
}

.media-tile-hero,
.media-tile-stage,
.media-tile-filmstrip {
	cursor: zoom-in
}

.media-tile-hero .media-video,
.media-tile-hero .media-fallback {
	height: 100%;
	min-height: 0
}

.media-tile-stage .media-video,
.media-tile-stage .media-fallback {
	height: 100%;
	min-height: 0
}

.media-tile-filmstrip .media-video,
.media-tile-filmstrip .media-fallback {
	height: 100%;
	min-height: 0
}

:-webkit-any(.media-tile:fullscreen, .media-tile:-webkit-full-screen) {
	background: #000;
	border-radius: 0;
	width: 100vw;
	max-width: none;
	height: 100%
}

:is(.media-tile:fullscreen, .media-tile:fullscreen) {
	background: #000;
	border-radius: 0;
	width: 100vw;
	max-width: none;
	height: 100vh
}

:-webkit-any(.media-tile:fullscreen .media-video, .media-tile:-webkit-full-screen .media-video, .media-tile:fullscreen .media-fallback, .media-tile:-webkit-full-screen .media-fallback) {
	width: 100%;
	height: 100%;
}

:is(.media-tile:fullscreen .media-video, .media-tile:fullscreen .media-video, .media-tile:fullscreen .media-fallback, .media-tile:fullscreen .media-fallback) {
	width: 100%;
	height: 100%
}

.media-tile.no-meta .media-meta {
	display: none
}

.media-tile-hero .media-meta,
.media-tile-stage .media-meta,
.media-tile-filmstrip .media-meta {
	background: linear-gradient(#0a0e18b8, #0a0e18e0);
	justify-content: flex-start;
	gap: 4px;
	padding: 12px 14px;
	display: grid
}

:root[data-theme=light] .dm-call-stage {
	background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary) 18%, white 18%), transparent 36%), radial-gradient(circle at 82% 20%, #0ea5e91f, transparent 30%), linear-gradient(180deg, #fafcfffa, #ecf3ff)
}

:root[data-theme=light] .dm-call-overlay-copy,
:root[data-theme=light] .dm-call-control-bar {
	background: #ffffffd1;
	border-color: #94a3b833;
	box-shadow: 0 18px 42px #0f172a1f
	
}

:root[data-theme=light] .call-floating-button {
	background: #f8faffeb;
	border-color: #94a3b833
}

:root[data-theme=light] .call-floating-button.active {
	background: color-mix(in srgb, var(--primary) 14%, white)
}

:root[data-theme=light] .call-floating-button.danger {
	color: #dc2626;
	background: #fef2f2eb
}

:root[data-theme=light] .incoming-call-card {
	background: radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--primary) 14%, white), transparent 36%), linear-gradient(180deg, #fffffff0, #eef4fffa);
	border-color: #94a3b838;
	box-shadow: 0 18px 42px #0f172a1f
}

:root[data-theme=light] .invite-preview-card {
	background: radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 16%, white 12%), transparent 34%), linear-gradient(180deg, #fffffff5, #eef4fffa);
	border-color: #94a3b833;
	box-shadow: 0 20px 48px #0f172a1f
}

:root[data-theme=light] .audio-player-card {
	background: radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 14%, white), transparent 42%), linear-gradient(180deg, #ffffffe0, #f0f6fff5);
	border-color: #94a3b829
}

:root[data-theme=light] .media-fallback-avatar {
	border-color: #fffc;
	box-shadow: 0 14px 28px #0f172a24
}

:root[data-theme=light] .media-tile-hero .media-meta,
:root[data-theme=light] .media-tile-stage .media-meta,
:root[data-theme=light] .media-tile-filmstrip .media-meta {
	background: linear-gradient(#ffffffb8, #f1f5ffeb)
}

@keyframes inviteCardFloat {
	0% {
		opacity: 0;
		transform: translate(-50%, calc(18px - 50%))scale(.97)
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%)scale(1)
	}
}

@keyframes ambientFloatA {
	0% {
		transform: translate(0, 0)scale(1)
	}

	to {
		transform: translate(18px, -14px)scale(1.08)
	}
}

@keyframes ambientFloatB {
	0% {
		transform: translate(0, 0)scale(1)
	}

	to {
		transform: translate(-16px, 20px)scale(1.1)
	}
}

@keyframes ambientFloatC {
	0% {
		transform: translate(0, 0)scale(1)
	}

	to {
		transform: translate(12px, -18px)scale(1.12)
	}
}

@keyframes grainShift {
	0% {
		transform: translate(0, 0)
	}

	25% {
		transform: translate(-1.5%, 1%)
	}

	50% {
		transform: translate(1.2%, -1.2%)
	}

	75% {
		transform: translate(.8%, 1.4%)
	}

	to {
		transform: translate(-1%, -.8%)
	}
}

@media (width<=1280px) {

	.app-shell,
	.app-shell--compact {
		grid-template-columns: 72px 288px minmax(0, 1fr)
	}
}

@media (width<=980px) {

	.settings-layout,
	.categorized-friend-modal,
	.friend-category-stack,
	.server-access-body,
	.panel-header-refined {
		grid-template-columns: 1fr
	}

	.panel-header-center,
	.panel-header-actions {
		justify-content: flex-start
	}

	.audio-player-body {
		flex-direction: column;
		align-items: stretch
	}

	.dm-call-stage-main.split,
	.dm-call-stage-main.split-1 {
		grid-template-columns: minmax(0, 1fr)
	}

	.media-tile-hero,
	.media-tile-stage,
	.media-tile-stage.screen-share {
		max-width: 100%
	}

	.call-floating-button span {
		display: none
	}
}

.sidebar-resize-shell {
	min-width: 0;
	position: relative
}

.sidebar-resizer {
	cursor: ew-resize;
	z-index: 8;
	width: 12px;
	position: absolute;
	top: 10px;
	bottom: 10px;
	right: -6px
}

.sidebar-resizer:before {
	content: "";
	width: 2px;
	transition: var(--transition-fast);
	background: #94a3b824;
	border-radius: 999px;
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 5px
}

.sidebar-resizer:hover:before {
	background: color-mix(in srgb, var(--primary) 54%, transparent)
}

.info-panel-resize-shell {
	min-width: 0;
	width: var(--info-panel-width, 420px);
	border-left: 1px solid #94a3b81f;
	position: relative
}

.info-panel-resizer {
	cursor: ew-resize;
	z-index: 9;
	width: 12px;
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: -6px
}

.info-panel-resizer:before {
	content: "";
	width: 2px;
	transition: var(--transition-fast);
	background: #94a3b824;
	border-radius: 999px;
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 5px
}

.info-panel-resizer:hover:before {
	background: color-mix(in srgb, var(--primary) 54%, transparent)
}

.info-panel-refined {
	width: 100%;
	min-width: 0;
	height: 100%;
	overflow: hidden auto
}

.info-panel-refined .member-card-surface,
.info-panel-refined .member-list-row {
	min-width: 0
}

.info-panel-refined .role-badge {
	flex: none
}

.info-panel-refined .member-row-copy {
	min-width: 0
}

.sidebar-profile-hero-modern {
	background: 0 0;
	border: none;
	border-radius: 0;
	padding: 0;
	position: relative;
	overflow: hidden
}

.sidebar-profile-hero-modern .sidebar-profile-main,
.sidebar-profile-hero-modern .sidebar-profile-actions {
	z-index: 1;
	background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent), transparent 38%), linear-gradient(135deg, #ffffff0d, #ffffff05), linear-gradient(180deg, #0c101ceb, #0a0e18fa);
	border: 1px solid #ffffff0f;
	border-radius: 0;
	padding: 14px;
	position: relative
}

.sidebar-profile-hero-modern .sidebar-profile-main {
	border-bottom: none;
	align-items: center
}

.sidebar-profile-hero-modern .sidebar-profile-actions {
	justify-content: space-between;
	gap: 10px;
	display: flex
}

.user-list-row-with-action {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	display: grid
}

.user-list-main {
	text-align: left;
	background: 0 0;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-width: 0;
	display: flex
}

.profile-dialog-list {
	gap: 10px
}

.inline-icon-button,
.message-select-toggle {
	width: 32px;
	height: 32px;
	color: var(--text-secondary);
	transition: var(--transition-fast);
	background: #ffffff0a;
	border: 1px solid #ffffff14;
	border-radius: 12px;
	justify-content: center;
	align-items: center;
	display: inline-flex
}

.inline-icon-button:hover,
.message-select-toggle:hover {
	color: #fff;
	border-color: #ffffff24
}

.inline-icon-button.danger:hover {
	color: #fecaca;
	background: #ef444424;
	border-color: #ef44443d
}

.content-workbench {
	flex-direction: column;
	flex: 1;
	min-height: 0;
	display: flex
}

.content-workbench.has-call-pane {
	overflow: hidden
}

.embedded-call-shell {
	flex: none;
	padding: 12px 16px 0
}

.dm-call-stage.embedded {
	border: 1px solid #ffffff0f;
	border-radius: 28px;
	height: 100%
}

.call-pane-resizer {
	cursor: ns-resize;
	flex: none;
	place-items: center;
	width: 100%;
	height: 18px;
	margin: 0;
	display: grid
}

.call-pane-resizer span {
	background: #94a3b838;
	border-radius: 999px;
	width: 92px;
	height: 4px
}

.conversation-shell {
	flex-direction: column;
	flex: 1;
	min-height: 0;
	display: flex;
	overflow: hidden
}

.messages-and-rail {
	flex-direction: column;
	flex: 1;
	min-height: 0;
	display: flex;
	position: relative;
	overflow: hidden
}

.messages-refined {
	flex: 1;
	min-height: 0;
	overflow: hidden auto
}

.message-date-rail {
	z-index: 4;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background: #080c148a;
	border: 1px solid #ffffff0f;
	border-radius: 22px;
	gap: 9px;
	width: 168px;
	padding: 14px 12px;
	display: grid;
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%)
}

.message-date-rail-title {
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .72rem
}

.message-date-rail-chip {
	width: 100%;
	color: var(--text-secondary);
	text-align: left;
	background: 0 0;
	border: none;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	display: grid
}

.message-date-rail-line {
	background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 70%, white 6%), #94a3b838);
	border-radius: 999px;
	width: 24px;
	height: 2px;
	display: block;
	box-shadow: 0 0 0 1px #ffffff0a
}

.message-date-rail-text {
	color: inherit;
	font-size: .75rem;
	line-height: 1.35
}

.message-selection-toolbar {
	background: #ffffff0a;
	border: 1px solid #ffffff14;
	border-radius: 18px;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin: 0 22px 10px;
	padding: 12px 14px;
	display: flex
}

.message-selection-copy,
.message-selection-actions,
.message-meta-actions,
.composer-actions {
	align-items: center;
	gap: 8px;
	display: flex
}

.message-meta-actions {
	margin-left: auto
}

.divider-wave {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5c4 0 4-3 8-3s4 3 8 3 4-3 8-3 4 3 8 3 4-3 8-3' fill='none' stroke='rgba(148,163,184,0.55)' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 50%/40px 10px repeat-x;
	height: 10px
}

.divider-wave:before {
	content: none
}

.composer-actions {
	gap: 10px
}

.composer-voice-button {
	width: 44px;
	height: 44px;
	color: color-mix(in srgb, var(--text-primary) 88%, white 12%);
	background: #ffffff0d;
	border: 1px solid #ffffff14;
	border-radius: 14px;
	justify-content: center;
	align-items: center;
	display: inline-flex;
	position: relative
}

.composer-voice-button.recording,
.composer-voice-button:hover {
	color: #fff;
	background: #ef444429;
	border-color: #ef44443d
}

.composer-voice-icon {
	width: 20px;
	height: 20px;
	color: inherit;
	filter: drop-shadow(0 1px 2px #0000002e);
	place-items: center;
	display: grid
}

.composer-voice-icon svg {
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2px;
	vector-effect: non-scaling-stroke;
	width: 18px;
	height: 18px;
	display: block
}

.voice-recording-banner {
	background: #ef44441f;
	border: 1px solid #ef444429;
	border-radius: 18px;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	display: flex
}

.voice-recording-pulse {
	background: #ef4444;
	border-radius: 999px;
	width: 10px;
	height: 10px;
	animation: 1.2s ease-out infinite recordingPulse;
	box-shadow: 0 0 #ef444470
}

.friend-modal-shell {
	grid-template-columns: 204px minmax(0, 1fr);
	gap: 10px;
	min-height: 430px;
	display: grid
}

.friend-modal-sidebar {
	align-content: start;
	gap: 6px;
	display: grid
}

.friend-tab-button {
	min-height: 48px;
	color: var(--text-secondary);
	text-align: left;
	background: #ffffff08;
	border: 1px solid #ffffff0f;
	border-radius: 16px;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 0 14px;
	display: flex
}

.friend-tab-button.active {
	background: color-mix(in srgb, var(--primary) 18%, transparent);
	border-color: color-mix(in srgb, var(--primary) 28%, transparent);
	color: var(--text-primary)
}

.friend-modal-content,
.friend-pane {
	gap: 10px;
	min-height: 0;
	display: grid
}

.audio-player-waveform {
	grid-template-columns: repeat(52, minmax(0, 1fr));
	align-items: end;
	gap: 3px;
	min-height: 72px;
	padding: 10px 0;
	display: grid;
	position: relative
}

.audio-wave-bar {
	z-index: 1;
	width: 100%;
	height: var(--bar-height);
	transition: var(--transition-fast);
	background: #94a3b842;
	border-radius: 999px;
	align-self: end;
	position: relative
}

.audio-wave-bar.played {
	background: color-mix(in srgb, var(--primary) 76%, white 8%)
}

.audio-wave-progress {
	display: none
}

.attachment-video-shell {
	background: radial-gradient(circle at top, color-mix(in srgb, var(--primary) 18%, transparent), transparent 52%), linear-gradient(180deg, #0a0e18f0, #060a12fa);
	gap: 10px;
	padding: 0;
	display: grid
}

.attachment-video-top {
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	min-width: 0;
	display: flex
}

.attachment-video-top strong {
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
	font-size: .82rem;
	overflow: hidden
}

.attachment-video-pill {
	background: color-mix(in srgb, var(--primary) 18%, transparent);
	color: #eef2ff;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
	align-items: center;
	min-height: 24px;
	padding: 0 10px;
	font-size: .72rem;
	font-weight: 700;
	display: inline-flex
}

.attachment-video-frame {
	background: linear-gradient(135deg, #ffffff14, #0000 34%), #040810ad;
	border-radius: 20px;
	padding: 8px;
	position: relative;
	box-shadow: inset 0 1px #ffffff0a
}

.attachment-video {
	background: #030712;
	border-radius: 16px;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 20px 34px #00000052
}

.attachment-video::-webkit-media-controls-enclosure {
	background: linear-gradient(#060a121f, #060a12b8);
	border-radius: 0 0 16px 16px
}

.attachment-video::-webkit-media-controls-panel {
	background: 0 0
}

.attachment-card {
	animation: .34s attachmentCardIn
}

.attachment-loading {
	background: radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 28%), linear-gradient(180deg, #0f1420d1, #090d16f5);
	border-radius: 18px;
	min-height: 190px;
	padding: 18px;
	position: relative;
	overflow: hidden
}

.attachment-loading:after {
	content: "";
	background: linear-gradient(110deg, #0000 18%, #ffffff0f 44%, #0000 68%);
	animation: 1.6s linear infinite attachmentLoadingSweep;
	position: absolute;
	inset: 0;
	transform: translate(-120%)
}

.attachment-manual-load {
	background: radial-gradient(circle at top, color-mix(in srgb, var(--primary) 10%, transparent), transparent 58%), #ffffff05
}

.attachment-manual-load:after {
	display: none
}

.attachment-loading-visual,
.attachment-loading-copy {
	z-index: 1;
	position: relative
}

.attachment-loading-visual {
	place-items: center;
	width: 82px;
	height: 82px;
	display: grid
}

.attachment-loading-orb {
	filter: blur(10px);
	opacity: .84;
	border-radius: 999px;
	position: absolute
}

.attachment-loading-orb-a {
	background: color-mix(in srgb, var(--primary) 44%, transparent);
	width: 54px;
	height: 54px;
	animation: 3.2s ease-in-out infinite alternate attachmentOrbA
}

.attachment-loading-orb-b {
	background: #0ea5e957;
	width: 38px;
	height: 38px;
	animation: 2.8s ease-in-out infinite alternate attachmentOrbB
}

.attachment-loading-orb-c {
	transform-origin: -20px -20px;
	background: #f472b652;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	animation: 2.3s linear infinite attachmentOrbC;
	position: absolute;
	top: 50%;
	left: 50%
}

@keyframes attachmentOrbC {
	to {
		transform: rotate(360deg)scale(1.18)
	}
}

.attachment-loading-copy {
	justify-items: center;
	gap: 5px;
	display: grid
}

.attachment-loading-copy strong {
	font-size: .9rem
}

.attachment-loading-copy span {
	color: var(--text-secondary);
	font-size: .78rem
}

.composer-voice-button svg {
	stroke: currentColor;
	fill: none;
	stroke-width: 2.4px;
	width: 18px;
	height: 18px;
	color: inherit;
	display: block
}

.composer-voice-button {
	box-shadow: inset 0 1px #ffffff0a
}

@keyframes attachmentCardIn {
	0% {
		opacity: 0;
		transform: translateY(12px)scale(.985)
	}

	to {
		opacity: 1;
		transform: translateY(0)scale(1)
	}
}

@keyframes attachmentLoadingSweep {
	to {
		transform: translate(120%)
	}
}

@keyframes attachmentOrbA {
	to {
		transform: translate(8px, -6px)scale(1.12)
	}
}

@keyframes attachmentOrbB {
	to {
		transform: translate(-10px, 10px)scale(1.08)
	}
}

.dm-call-avatar-ring {
	position: relative
}

.dm-call-eq-bloom {
	background: radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%);
	opacity: .45;
	filter: blur(12px);
	border-radius: 999px;
	position: absolute;
	inset: -14px
}

.dm-call-eq-orbit {
	display: none
}

.dm-call-eq-bar {
	width: 1px;
	height: calc(21px + var(--bar-level, .5) * 15px);
	background: color-mix(in srgb, var(--primary) 70%, white 10%);
	transform: rotate(calc(var(--bar-index) * 13.857deg)) translateY(-118px) scaleY(calc(.72 + var(--bar-level, .5) * .34));
	transform-origin: 50% -20px;
	z-index: -5;
	opacity: .9;
	filter: blur(7px);
	border-radius: 1000px;
	position: absolute;
	top: 60%;
	left: 50%
}

.dm-call-avatar-stage.speaking .dm-call-avatar-display {
	box-shadow: 0 22px 54px #00000057, 0 0 0 4px color-mix(in srgb, var(--primary) 36%, transparent)
}

.dm-call-timer {
	min-width: 84px
}

@keyframes recordingPulse {
	0% {
		box-shadow: 0 0 #ef444470
	}

	to {
		box-shadow: 0 0 0 14px #ef444400
	}
}

:root[data-theme=light] .sidebar-profile-hero-modern .sidebar-profile-main,
:root[data-theme=light] .sidebar-profile-hero-modern .sidebar-profile-actions,
:root[data-theme=light] .message-selection-toolbar,
:root[data-theme=light] .friend-tab-button,
:root[data-theme=light] .message-date-rail-chip {
	background: #ffffffd1;
	border-color: #94a3b833
}

:root[data-theme=light] .sidebar-profile-hero-modern .sidebar-profile-main,
:root[data-theme=light] .sidebar-profile-hero-modern .sidebar-profile-actions {
	background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 40%), linear-gradient(180deg, #ffffffeb, #f2f7fffa)
}

:root[data-theme=light] .dm-call-stage.embedded {
	border-color: #94a3b82e
}

@media (width<=1180px) {
	.message-date-rail {
		width: 148px;
		right: 12px
	}
}

@media (width<=980px) {
	.friend-modal-shell {
		grid-template-columns: 1fr
	}

	.sidebar-resizer {
		display: none
	}

	.app-shell,
	.app-shell--compact {
		grid-template-columns: 72px minmax(260px, var(--sidebar-width, 304px)) minmax(0, 1fr)
	}
}

.action-button.small {
	border-radius: 12px;
	min-height: 36px;
	padding: 0 12px;
	font-size: .82rem
}

.role-badge.custom {
	color: color-mix(in srgb, var(--role-color, var(--primary)) 76%, white 12%);
	background: color-mix(in srgb, var(--role-color, var(--primary)) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--role-color, var(--primary)) 24%, transparent)
}

.role-badge-dot,
.hover-role-dot,
.member-role-chip-dot {
	background: var(--role-color, var(--primary));
	border-radius: 999px;
	flex-shrink: 0;
	width: 8px;
	height: 8px
}

.hover-role-list {
	flex-wrap: wrap;
	gap: 8px;
	display: flex
}

.hover-role-chip {
	background: color-mix(in srgb, var(--role-color, var(--primary)) 12%, #ffffff0a);
	border: 1px solid color-mix(in srgb, var(--role-color, var(--primary)) 22%, transparent);
	min-height: 28px;
	color: color-mix(in srgb, var(--role-color, var(--primary)) 78%, white 8%);
	border-radius: 999px;
	align-items: center;
	gap: 7px;
	padding: 0 10px;
	font-size: .78rem;
	font-weight: 600;
	display: inline-flex
}

.server-settings-modal-refined {
	width: min(1040px, 96vw)
}

.server-settings-layout {
	grid-template-columns: 176px minmax(0, 1fr)
}

.server-settings-content {
	gap: 14px;
	min-height: 0;
	display: grid
}

.invite-settings-card,
.server-role-list,
.server-role-editor-card,
.server-member-role-row {
	background: #ffffff08;
	border: 1px solid #ffffff0f;
	border-radius: 22px
}

.invite-link-shell,
.invite-link-actions {
	gap: 12px;
	display: grid
}

.invite-link-field input {
	cursor: copy
}

.server-roles-editor {
	grid-template-columns: 248px minmax(0, 1fr);
	gap: 14px;
	min-height: 0;
	display: grid
}

.server-role-list,
.server-role-editor-card {
	padding: 14px
}

.server-role-list {
	align-content: start;
	gap: 12px;
	display: grid
}

.server-role-list-head,
.server-role-editor-head,
.server-member-role-head {
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	display: flex
}

.server-role-list-head strong,
.server-role-editor-head strong,
.server-member-role-copy strong {
	font-size: .96rem
}

.server-role-list-stack,
.server-member-role-list {
	gap: 10px;
	display: grid
}

.server-role-row {
	text-align: left;
	transition: var(--transition-fast);
	background: #ffffff05;
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	align-items: center;
	gap: 12px;
	padding: 12px;
	display: flex
}

.server-role-row:hover,
.server-role-row.active {
	background: #ffffff0f;
	border-color: #ffffff1f
}

.server-role-swatch {
	border-radius: 999px;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	box-shadow: 0 0 0 3px #ffffff0a
}

.server-role-copy,
.server-member-role-copy {
	gap: 4px;
	min-width: 0;
	display: grid
}

.server-role-copy span,
.server-role-editor-head span,
.server-member-role-copy span {
	color: var(--text-secondary);
	font-size: .82rem;
	line-height: 1.45
}

.server-role-editor-card {
	gap: 14px;
	display: grid
}

.role-color-editor {
	border: 1px solid var(--border-light);
	background: #ffffff0a;
	border-radius: 16px;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 12px;
	display: flex
}

.role-color-editor input[type=color] {
	background: 0 0;
	border: none;
	border-radius: 10px;
	width: 40px;
	height: 32px;
	padding: 0
}

.role-permission-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	display: grid
}

.permission-card {
	text-align: left;
	transition: var(--transition-fast);
	background: #ffffff05;
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	gap: 6px;
	padding: 13px 14px;
	display: grid
}

.permission-card span {
	color: var(--text-secondary);
	font-size: .8rem;
	line-height: 1.45
}

.permission-card.active {
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, transparent), #ffffff08);
	border-color: #818cf852;
	box-shadow: 0 14px 32px #00000024
}

.server-member-role-editor {
	gap: 14px;
	display: grid
}

.server-member-role-row {
	gap: 12px;
	padding: 14px;
	display: grid
}

.server-member-role-head {
	justify-content: flex-start
}

.server-member-role-chip-row {
	flex-wrap: wrap;
	gap: 8px;
	display: flex
}

.member-role-chip {
	min-height: 34px;
	color: var(--text-secondary);
	transition: var(--transition-fast);
	background: #ffffff0a;
	border: 1px solid #ffffff14;
	border-radius: 999px;
	align-items: center;
	gap: 7px;
	padding: 0 12px;
	display: inline-flex
}

.member-role-chip.active {
	color: color-mix(in srgb, var(--role-color, var(--primary)) 76%, white 12%);
	border-color: color-mix(in srgb, var(--role-color, var(--primary)) 24%, transparent);
	background: color-mix(in srgb, var(--role-color, var(--primary)) 14%, #ffffff0a)
}

.attachment-grid {
	align-items: start
}

.attachment-card.attachment-audio,
.attachment-card.attachment-video {
	justify-self: start
}

.attachment-card.attachment-audio {
	width: min(352px, 100%)
}

.attachment-card.attachment-video {
	width: min(440px, 100%)
}

.audio-player-card {
	border-radius: 16px;
	gap: 10px;
	width: 100%;
	max-width: 352px;
	padding: 10px
}

.audio-player-head,
.audio-player-body {
	gap: 10px
}

.audio-player-toggle {
	border-radius: 14px;
	width: 40px;
	height: 40px
}

.audio-player-waveform {
	grid-template-columns: repeat(40, minmax(0, 1fr));
	gap: 2px;
	min-height: 44px
}

.audio-wave-bar {
	min-height: 10px
}

.audio-player-time {
	font-size: .72rem
}

.attachment-video-shell {
	gap: 0;
	padding: 0
}

.attachment-video-frame-compact {
	border-radius: 18px;
	padding: 0
}

.attachment-video {
	aspect-ratio: 16/9;
	border-radius: 14px;
	width: 100%;
	max-height: 240px;
	display: block
}

.attachment-card.attachment-video .attachment-foot {
	padding: 10px 12px 12px
}

.settings-field input,
.settings-field textarea,
.settings-field select,
.search-shell input,
.composer-shell textarea,
.header-search input {
	transition: transform .18s, box-shadow .18s, border-color .18s, background-color .18s, letter-spacing .18s, text-shadow .18s
}

.typing-burst {
	animation: .24s cubic-bezier(.2, 0, 0, 1) typingBurst
}

@keyframes typingBurst {
	0% {
		letter-spacing: .025em;
		text-shadow: 0 0 #0000;
		transform: translateY(2px)
	}

	to {
		letter-spacing: 0;
		text-shadow: 0 0 14px color-mix(in srgb, var(--primary) 22%, transparent);
		transform: translateY(0)
	}
}

@media (width<=980px) {

	.server-settings-layout,
	.server-roles-editor,
	.role-permission-grid {
		grid-template-columns: 1fr
	}
}

body,
.server-rail,
.sidebar,
.content-panel-refined,
.message-bubble-refined,
.settings-modal,
.appearance-card,
.friend-modal,
.server-settings-modal,
.dm-call-stage,
.composer-shell,
.call-floating-button,
.channel-row,
.user-list-row,
.member-list-row,
.server-role-row,
.permission-card,
.settings-nav button,
.friend-tab-button {
	transition: background-color .28s, background-image .28s, border-color .28s, color .28s, box-shadow .28s, transform .28s
}

:root.theme-transitioning body,
:root.theme-transitioning .server-rail,
:root.theme-transitioning .sidebar,
:root.theme-transitioning .content-panel-refined,
:root.theme-transitioning .settings-modal,
:root.theme-transitioning .dm-call-stage {
	animation: .4s themeBlendIn
}

@keyframes themeBlendIn {
	0% {
		opacity: .88;
		filter: saturate(.86)blur(.2px)
	}

	to {
		opacity: 1;
		filter: saturate()blur()
	}
}

body {
	background: radial-gradient(circle at 18% 16%, #22c55e14, transparent 24%), radial-gradient(circle at 82% 14%, #0ea5e917, transparent 22%), radial-gradient(circle at 58% 78%, #6366f11f, transparent 28%), linear-gradient(150deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 42%, var(--bg-gradient-end) 100%)
}

.content-panel-refined {
	background: radial-gradient(circle at 12% 10%, #0ea5e90f, #0000 24%), radial-gradient(circle at 86% 18%, #6366f114, #0000 26%), linear-gradient(#0c101af0, #080b12fa)
}

:root[data-theme=light] body {
	background: radial-gradient(circle at 16% 16%, #0ea5e91f, #0000 24%), radial-gradient(circle at 84% 16%, #6366f11f, #0000 24%), linear-gradient(150deg, #f8fbff 0%, #eef3ff 38%, #dde8ff 100%)
}

:root[data-theme=light] .content-panel-refined {
	background: radial-gradient(circle at 12% 10%, #0ea5e917, #0000 24%), radial-gradient(circle at 86% 16%, #6366f11a, #0000 26%), linear-gradient(#fffffff0, #edf3fffa)
}

.channel-row,
.user-list-row,
.member-list-row,
.server-role-row,
.permission-card,
.member-role-chip,
.settings-nav button,
.friend-tab-button,
.settings-field,
.settings-field span,
.settings-toggle-card,
.settings-toggle-copy strong {
	color: var(--text-primary)
}

.server-role-copy span,
.server-role-editor-head span,
.server-member-role-copy span,
.settings-toggle-copy span {
	color: var(--text-secondary)
}

.call-audio-sink {
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
	position: absolute
}

.media-video {
	object-fit: var(--media-fit, cover)
}

.media-tile-stage,
.media-tile-stage.screen-share {
	width: min(100%, 1180px);
	max-width: 100%
}

.media-tile-stage .media-video,
.media-tile-stage .media-fallback {
	width: 100%;
	height: 100%
}

.media-tile-stage.screen-share .media-video,
.media-tile-stage.screen-share .media-fallback {
	background: #02060ef0
}



.dm-call-stage-main {
	width: 100%
}

.dm-call-stage-main.split {
	grid-template-columns: repeat(2, minmax(220px, 1fr));
	width: 100%;
	max-width: min(920px, 100%)
}

.dm-call-filmstrip {
	width: 100%
}

.media-tile.speaking {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent), 0 0 0 5px color-mix(in srgb, var(--primary) 8%, transparent), 0 20px 42px #00000038
}

.upload-chip-refined {
	min-width: min(300px, 100%);
	min-height: 44px;
	color: var(--text-primary);
	background: #ffffff0a;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 0 12px;
	display: inline-flex;
	position: relative;
	overflow: hidden
}

.upload-chip-refined:before {
	content: "";
	width: var(--upload-progress, 0%);
	background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--primary) 12%, transparent));
	transition: width .24s;
	position: absolute;
	inset: 0
}

.upload-chip-refined.status-ready:before {
	background: linear-gradient(90deg, #22c55e33, #10b9811f);
	width: 100%
}

.upload-chip-refined.status-error:before {
	background: linear-gradient(90deg, #ef444433, #f871711f);
	width: 100%
}

.upload-chip-copy,
.upload-chip-refined button {
	z-index: 1;
	position: relative
}

.upload-chip-copy {
	gap: 2px;
	min-width: 0;
	display: grid
}

.upload-chip-copy strong,
.upload-chip-copy span {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.upload-chip-copy span {
	color: var(--text-secondary);
	font-size: .78rem
}

.upload-chip-refined button {
	flex-shrink: 0
}

.settings-modal-expanded {
	width: min(840px, 96vw)
}

.settings-layout-expanded {
	grid-template-columns: 180px minmax(0, 1fr)
}

.settings-toggle-grid {
	gap: 10px;
	display: grid
}

.settings-toggle-card {
	background: #ffffff08;
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	display: flex
}

.settings-toggle-card.disabled {
	opacity: .58
}

.settings-toggle-copy {
	gap: 4px;
	min-width: 0;
	display: grid
}

.settings-toggle-copy strong {
	font-size: .92rem
}

.settings-toggle-copy span {
	font-size: .82rem;
	line-height: 1.45
}

.slider-card,
.mic-test-card {
	background: #ffffff05;
	border: 1px solid #ffffff0f;
	border-radius: 18px;
	gap: 12px;
	padding: 14px;
	display: grid
}

.slider-copy {
	gap: 4px;
	display: grid
}

.slider-copy strong {
	font-size: .92rem
}

.slider-copy span,
.mic-test-card .panel-copy {
	color: var(--text-secondary);
	font-size: .82rem
}

.slider-card input[type=range],
.mic-test-card input[type=range] {
	width: 100%;
	accent-color: var(--primary)
}

.mic-test-meter {
	background: #ffffff0f;
	border-radius: 999px;
	height: 12px;
	position: relative;
	overflow: hidden
}

.mic-test-meter-fill {
	border-radius: inherit;
	background: linear-gradient(90deg, #0ea5e9d1, color-mix(in srgb, var(--primary) 76%, white 8%));
	height: 100%;
	transition: width .12s linear, filter .12s linear
}

.mic-test-meter-fill.active {
	filter: saturate(1.14)brightness(1.04)
}

.appearance-preview-card-rich {
	gap: 14px;
	padding: 16px;
	display: grid
}

.appearance-preview-card-rich .appearance-preview-top {
	justify-content: space-between;
	align-items: center;
	display: flex
}

.preview-surface {
	border-radius: calc(22px * var(--preview-roundness, 1));
	background: radial-gradient(circle at top left, color-mix(in srgb, var(--preview-accent) 14%, transparent), transparent 36%), linear-gradient(180deg, #0d121ce0, #090d16f0);
	border: 1px solid #ffffff0f;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 14px;
	min-height: 180px;
	padding: 14px;
	display: grid
}

.appearance-preview-card-rich.light .preview-surface {
	background: radial-gradient(circle at top left, color-mix(in srgb, var(--preview-accent) 16%, white 18%), transparent 38%), linear-gradient(180deg, #fffffff5, #ecf2ff);
	border-color: #94a3b82e
}

.preview-surface-sidebar,
.preview-surface-chat,
.preview-toolbar-row {
	gap: 10px;
	display: grid
}

.preview-surface-sidebar span,
.preview-line,
.preview-message,
.preview-toolbar-row span {
	background: #ffffff14;
	border-radius: 999px
}

.appearance-preview-card-rich.light .preview-surface-sidebar span,
.appearance-preview-card-rich.light .preview-line,
.appearance-preview-card-rich.light .preview-message,
.appearance-preview-card-rich.light .preview-toolbar-row span {
	background: #94a3b829
}

.preview-surface-sidebar span {
	height: 34px
}

.preview-line {
	width: 44%;
	height: 14px
}

.preview-line-strong {
	width: 60%
}

.preview-message {
	border-radius: 18px;
	height: 42px
}

.preview-message-own {
	background: color-mix(in srgb, var(--preview-accent) 24%, #ffffff14)
}

.preview-message-soft {
	width: 72%
}

.preview-toolbar-row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	margin-top: auto
}

.preview-toolbar-row span {
	border-radius: 16px;
	height: 46px
}

@media (width<=980px) {

	.settings-layout-expanded,
	.preview-surface {
		grid-template-columns: 1fr
	}
}

.app-shell {
	grid-template-columns: 76px var(--sidebar-width, 320px) minmax(0, 1fr) var(--info-panel-width, 420px) !important
}

.app-shell--compact {
	grid-template-columns: 76px var(--sidebar-width, 320px) minmax(0, 1fr) !important
}

.startup-preloader {
	z-index: 2147483647;
	background: linear-gradient(180deg, #05080efa, #080c14fa), var(--surface-base);
	place-items: center;
	display: grid;
	position: fixed;
	inset: 0;
	overflow: hidden
}

.startup-preloader:before {
	content: "";
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 14%, transparent), transparent), repeating-linear-gradient(0deg, #ffffff06 0 1px, transparent 1px 9px);
	opacity: .5;
	animation: 4.8s linear infinite startupBackdrop;
	position: absolute;
	inset: -1px
}

.startup-mark {
	width: 108px;
	height: 108px;
	filter: drop-shadow(0 24px 42px color-mix(in srgb, var(--primary) 22%, transparent));
	place-items: center;
	display: grid;
	position: relative
}

.startup-ring,
.startup-core,
.startup-scan {
	display: block;
	position: absolute
}

.startup-ring {
	border: 1px solid color-mix(in srgb, var(--primary) 32%, #ffffff3d);
	border-radius: 999px;
	inset: 0
}

.startup-ring-a {
	border-top-color: color-mix(in srgb, var(--primary) 86%, white);
	animation: 1.25s cubic-bezier(.64, .04, .36, 1) infinite startupSpin
}

.startup-ring-b {
	border-right-color: #ffffffd1;
	border-bottom-color: color-mix(in srgb, var(--primary) 58%, transparent);
	animation: 1.8s cubic-bezier(.64, .04, .36, 1) infinite startupSpinReverse;
	inset: 18px
}

.startup-core {
	border: 1px solid color-mix(in srgb, var(--primary) 60%, white);
	background: color-mix(in srgb, var(--primary) 18%, #ffffff0f);
	border-radius: 10px;
	width: 30px;
	height: 30px;
	animation: 1.7s ease-in-out infinite startupCore;
	transform: rotate(45deg)
}

.startup-scan {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 76%, white), transparent);
	opacity: .8;
	border-radius: 999px;
	width: 78px;
	height: 1px
}

.startup-scan-a {
	animation: 1.55s ease-in-out infinite startupScanA;
	transform: rotate(28deg)
}

.startup-scan-b {
	animation: 1.55s ease-in-out infinite startupScanB;
	transform: rotate(-28deg)
}

@keyframes startupSpin {
	to {
		transform: rotate(360deg)
	}
}

@keyframes startupSpinReverse {
	to {
		transform: rotate(-360deg)
	}
}

@keyframes startupCore {
	50% {
		opacity: .72;
		transform: rotate(45deg)scale(.78)
	}
}

@keyframes startupScanA {
	50% {
		opacity: .28;
		transform: rotate(28deg)translateY(-18px)
	}
}

@keyframes startupScanB {
	50% {
		opacity: .28;
		transform: rotate(-28deg)translateY(18px)
	}
}

@keyframes startupBackdrop {
	to {
		transform: translateY(18px)
	}
}

.dm-call-stage-main {
	place-items: center;
	width: 100%
}

.call-grid {
	place-content: center;
	place-items: center;
	width: 100%;
	height: 100%
}

.media-tile-grid,
.media-tile-stage:not(.screen-share),
.media-tile-hero {
	place-self: center;
	min-width: 260px;
	overflow: hidden;
	width: min(100%, 520px) !important;
	max-width: 520px !important
}

.media-tile-grid .media-video,
.media-tile-grid .media-fallback,
.media-tile-stage:not(.screen-share) .media-video,
.media-tile-stage:not(.screen-share) .media-fallback,
.media-tile-hero .media-video,
.media-tile-hero .media-fallback {
	min-height: 220px;
	width: 100% !important;
	max-height: 100% !important;
}

.media-tile-grid .media-fallback-shell,
.media-tile-stage:not(.screen-share) .media-fallback-shell,
.media-tile-hero .media-fallback-shell {
	min-height: 220px
}

.media-tile-grid .media-fallback-avatar,
.media-tile-stage:not(.screen-share) .media-fallback-avatar,
.media-tile-hero .media-fallback-avatar {
	width: 92px;
	height: 92px
}

.media-tile-stage.screen-share {
	width: min(100%, 1180px) !important;
	max-width: 1180px !important
}

.media-tile-stage.screen-share .media-video,
.media-tile-stage.screen-share .media-fallback {
	background: #02060ef0;
	min-height: 0;
	max-height: none;
	width: 100% !important;
	height: 100% !important;
}

.dm-call-stage-main.split,
.dm-call-stage-main.split-1 {
	place-content: center;
	width: 100%;
	max-width: min(1080px, 100%)
}

.dm-call-stage-main.split {
	grid-template-columns: repeat(2, minmax(260px, 520px)) !important
}

.dm-call-stage-main.split-1 {
	grid-template-columns: minmax(260px, 520px) !important
}

@media (width<=860px) {

	.media-tile-grid,
	.media-tile-stage:not(.screen-share),
	.media-tile-hero {
		width: min(100%, 420px) !important;
		max-width: 420px !important
	}

	.dm-call-stage-main.split {
		grid-template-columns: minmax(240px, 420px) !important
	}
}

.voice-channel-wrapper {
	gap: 4px;
	display: grid
}

.voice-channel-wrapper.has-participants .channel-row {
	margin-bottom: 2px
}

.call-focus-layout {
	grid-template-rows: minmax(0, 1fr) auto;
	place-items: center;
	gap: 14px;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0 8px;
	display: grid !important
}

.call-focus-tile {
	place-self: center;
	width: min(100%, 980px) !important;
	min-width: 0 !important;
	max-width: 980px !important
}

.call-focus-tile.screen-share {
	width: min(100%, 1180px) !important;
	max-width: 1180px !important
}

.call-focus-tile .media-video,
.call-focus-tile .media-fallback {
	width: 100% !important;
	height: 100% !important;
}

.call-focus-tile.screen-share .media-video,
.call-focus-tile.screen-share .media-fallback {
	object-fit: contain;
	background: #02060ef0
}

.call-thumbnail-strip {
	grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
	justify-content: center;
	gap: 12px;
	width: min(100%, 920px);
	padding: 0 0 4px;
	display: grid;
	overflow: visible
}

.call-side-tile {
	cursor: zoom-in;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important
}

.call-side-tile .media-video,
.call-side-tile .media-fallback {
	width: 100% !important;
	height: 100% !important;
}

.call-side-tile .media-meta {
	min-height: 44px;
	padding: 9px 10px !important;
	display: grid !important
}

.call-side-tile .media-meta span,
.call-focus-tile .media-meta span {
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	overflow: hidden
}

@media (width<=860px) {
	.call-focus-layout {
		gap: 10px;
		padding: 0
	}

	.call-focus-tile .media-video,
	.call-focus-tile .media-fallback {
		min-height: clamp(180px, 38vh, 360px) !important;
		max-height: 44vh !important
	}

	.call-thumbnail-strip {
		grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
		gap: 8px;
		width: 100%
	}

	.call-side-tile .media-video,
	.call-side-tile .media-fallback {
		min-height: 82px !important;
		max-height: 110px !important
	}
}

.voice-participant-list {
	gap: 4px;
	padding: 0 4px 4px 36px;
	display: grid
}

.voice-participant-row {
	min-height: 30px;
	color: var(--text-secondary);
	text-align: left;
	cursor: pointer;
	transition: var(--transition-fast);
	background: 0 0;
	border: 1px solid #0000;
	border-radius: 12px;
	grid-template-columns: 24px minmax(0, 1fr) 10px;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	display: grid
}

.voice-participant-row:hover {
	color: var(--text-primary);
	background: #ffffff0d
}

.voice-participant-row .app-avatar {
	width: 24px;
	height: 24px;
	font-size: .68rem
}

.voice-participant-row span:not(.presence-dot) {
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	font-size: .82rem;
	font-weight: 600;
	overflow: hidden
}

.voice-participant-row .presence-dot {
	width: 8px;
	height: 8px;
	box-shadow: none;
	border-width: 1px
}

:root:not([data-theme=light]),
:root[data-theme=dark] {
	--surface-base: #0c1019e6;
	--surface-elevated: #121824d6;
	--surface-overlay: #151c2af5;
	--border-subtle: #7d91b438;
	--border-light: #91a5cd47
}

:root[data-theme=light] {
	--surface-base: #ffffffeb;
	--surface-elevated: #f8fbfff5;
	--surface-overlay: #fffffffa;
	--border-subtle: #5b6a842e;
	--border-light: #5b6a8447
}

body:before {
	content: "";
	pointer-events: none;
	background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34%), radial-gradient(circle at 82% 14%, #2dd4bf14, transparent 32%);
	opacity: .9;
	z-index: -1;
	position: fixed;
	inset: 0
}

.server-rail,
.sidebar,
.content-panel,
.info-panel {
	box-shadow: inset 1px 0 #ffffff06
}

.server-chip,
.icon-button,
.action-button,
.list-button,
.user-list-item,
.member-row,
.message-row-refined,
.composer-wrapper,
.header-search,
.attachment-card {
	border-radius: 12px
}

.server-chip {
	background: linear-gradient(#ffffff0f, #ffffff06), #ffffff06
}

.server-chip.active {
	background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 24%, transparent), #ffffff09), #ffffff09;
	box-shadow: 0 12px 28px #0000002e
}

.sidebar-profile-hero,
.sidebar-server-hero,
.server-identity-card,
.profile-card,
.info-panel-card {
	background: linear-gradient(180deg, #ffffff0d, #ffffff06), var(--surface-elevated);
	border-radius: 16px
}

.panel-header-refined {
	background: linear-gradient(180deg, #ffffff09, transparent), color-mix(in srgb, var(--surface-base) 92%, transparent)
}

.message-row-refined {
	transition: background .14s, border-color .14s, transform .14s
}

.message-row-refined:hover {
	background: color-mix(in srgb, var(--surface-elevated) 86%, var(--primary) 5%);
	border-color: color-mix(in srgb, var(--border-light) 82%, var(--primary) 18%);
	transform: translateY(-1px)
}

.composer-refined {
	background: linear-gradient(180deg, transparent, #00000014), var(--surface-elevated)
}

.composer-wrapper {
	background: linear-gradient(180deg, #ffffff0d, #ffffff05), var(--surface-base);
	box-shadow: 0 12px 34px #0000002e
}

.composer textarea {
	background: 0 0
}

.header-search {
	background: #ffffff0b;
	border-color: #ffffff12
}

:root {
	--bg-gradient-start: #080908;
	--bg-gradient-mid: #10130f;
	--bg-gradient-end: #15120d;
	--primary: #14b8a6;
	--primary-hover: #2dd4bf;
	--primary-soft: #14b8a624;
	--primary-medium: #14b8a63d;
	--primary-glow: #0f766e;
	--surface-base: #0b0d0ceb;
	--surface-elevated: #121512e0;
	--surface-overlay: #161916f7;
	--border-subtle: #97a6912e;
	--border-light: #b2bea03d
}

body:before {
	background: radial-gradient(circle at 84% 12%, #14b8a614, #0000 30%), radial-gradient(circle at 18% 88%, #f59e0b0e, #0000 36%), linear-gradient(120deg, #14b8a60b, #0000 34%)
}

body.resizing-panels {
	cursor: col-resize;
	-webkit-user-select: none;
	user-select: none
}

body.resizing-panels iframe,
body.resizing-panels video,
body.resizing-panels canvas {
	pointer-events: none
}

.header-panel-toggle {
	flex: 0 0 36px;
	width: 36px;
	height: 36px
}

.role-badge-dot {
	display: none !important
}

.role-badge.custom {
	padding-inline: 9px
}

.emoji-picker-shell {
	align-items: center;
	display: flex;
	position: relative
}

.composer-icon-button {
	border: 1px solid var(--border-subtle);
	width: 38px;
	height: 38px;
	color: var(--text-secondary);
	cursor: pointer;
	background: #ffffff0b;
	border-radius: 12px;
	justify-content: center;
	align-items: center;
	transition: background .14s, border-color .14s, color .14s;
	display: inline-flex
}

.composer-icon-button:hover:not(:disabled),
.composer-icon-button:focus-visible {
	border-color: color-mix(in srgb, var(--primary) 42%, transparent);
	background: var(--primary-soft);
	color: var(--text-primary)
}

.composer-icon-button:disabled {
	cursor: not-allowed;
	opacity: .45
}

.emoji-picker {
	z-index: 50;
	border: 1px solid var(--border-light);
	background: var(--surface-overlay);
	border-radius: 14px;
	grid-template-columns: repeat(4, 42px);
	gap: 8px;
	padding: 10px;
	display: grid;
	position: absolute;
	bottom: calc(100% + 12px);
	right: 0;
	box-shadow: 0 18px 42px #00000059
}

.emoji-picker-item {
	cursor: pointer;
	background: #ffffff09;
	border: 1px solid #0000;
	border-radius: 12px;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	transition: transform .12s, background .12s, border-color .12s;
	display: inline-flex
}

.emoji-picker-item:hover,
.emoji-picker-item:focus-visible {
	border-color: color-mix(in srgb, var(--primary) 45%, transparent);
	background: var(--primary-soft);
	transform: translateY(-1px)
}

.emoji-picker-item img,
.inline-custom-emoji {
	object-fit: contain;
	width: 28px;
	height: 28px;
	display: block
}

.inline-custom-emoji {
	vertical-align: -.42em;
	width: 1.75em;
	height: 1.75em;
	margin: 0 .08em;
	display: inline-block
}

.sidebar-server-hero {
	border: 1px solid var(--border-subtle);
	background: linear-gradient(180deg, #ffffff09, #ffffff03), var(--surface-base);
	box-shadow: none;
	border-radius: 14px;
	overflow: hidden
}

.server-banner-refined {
	filter: saturate(.55)contrast(1.08)brightness(.7);
	opacity: .78;
	height: 86px;
	min-height: 86px;
	position: relative
}

.server-banner-refined:after {
	content: "";
	pointer-events: none;
	background: linear-gradient(#0000000a, #0000006b), linear-gradient(90deg, #0a0e0cad, #0000 72%);
	position: absolute;
	inset: 0
}

.sidebar-server-hero .server-identity-card {
	border: 0;
	border-top: 1px solid var(--border-subtle);
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: linear-gradient(#ffffff07, #0000), #070a0a52;
	border-radius: 0;
	margin: 0;
	padding: 12px
}

.server-identity-main {
	min-width: 0
}

.server-identity-card .app-avatar {
	border-radius: 16px;
	width: 50px;
	height: 50px
}

.server-identity-copy strong,
.sidebar-profile-copy strong {
	letter-spacing: 0;
	font-size: .96rem
}

.server-identity-copy span,
.sidebar-profile-copy span {
	color: var(--text-secondary);
	font-size: .84rem;
	line-height: 1.35
}

.server-identity-card .inline-actions,
.sidebar-profile-actions {
	gap: 8px
}

.server-identity-card .icon-button,
.sidebar-profile-actions .icon-button,
.sidebar-user-actions .icon-button {
	width: 34px;
	height: 34px;
	color: var(--text-secondary);
	background: #ffffff09;
	border-radius: 10px
}

.server-identity-card .icon-button svg,
.sidebar-profile-actions .icon-button svg,
.sidebar-user-actions .icon-button svg {
	width: 18px;
	height: 18px
}

.sidebar-profile-hero-modern {
	border: 1px solid var(--border-subtle);
	background: linear-gradient(180deg, #ffffff09, #ffffff03), var(--surface-base);
	box-shadow: none;
	border-radius: 14px;
	overflow: hidden
}

.sidebar-profile-hero-modern:before {
	content: "";
	background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 11%, transparent), transparent 58%), linear-gradient(180deg, #ffffff06, transparent);
	opacity: .86;
	pointer-events: none;
	position: absolute;
	inset: 0
}

.sidebar-profile-hero-modern .sidebar-profile-main,
.sidebar-profile-hero-modern .sidebar-profile-actions {
	box-shadow: none;
	background: 0 0;
	border: 0
}

.sidebar-profile-hero-modern .sidebar-profile-main {
	padding: 14px 14px 12px
}

.sidebar-profile-hero-modern .sidebar-profile-actions {
	border-top: 1px solid var(--border-subtle);
	padding: 10px 14px 14px
}

.sidebar-profile-main .app-avatar {
	width: 58px;
	height: 58px
}

.message-date-rail {
	border: 1px solid var(--border-subtle);
	background: color-mix(in srgb, var(--surface-base) 88%, transparent);
	width: auto;
	min-width: 156px;
	max-width: 190px;
	box-shadow: none;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-radius: 12px;
	gap: 4px;
	padding: 8px;
	top: 22px;
	right: 18px;
	transform: none
}

.message-date-rail-title {
	letter-spacing: .04em;
	padding: 2px 6px 5px;
	font-size: .66rem
}

.message-date-rail-chip {
	min-height: 28px;
	color: var(--text-secondary);
	background: 0 0;
	border: 0;
	border-radius: 8px;
	grid-template-columns: minmax(0, 1fr);
	padding: 5px 7px
}

.message-date-rail-chip:hover,
.message-date-rail-chip:focus-visible {
	background: #ffffff0b
}

.message-date-rail-chip:hover .message-date-rail-text {
	color: var(--text-primary)
}

.message-date-rail-line {
	display: none
}

.message-date-rail-text {
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .74rem;
	overflow: hidden
}

.composer-icon-button {
	width: 42px;
	height: 42px;
	color: var(--text-primary);
	background: #ffffff0e;
	border-radius: 12px
}

.composer-icon-button svg {
	color: currentColor;
	stroke: currentColor;
	width: 22px;
	height: 22px
}

.emoji-picker {
	border-color: var(--border-light);
	background: #0e1110;
	grid-template-columns: repeat(4, 54px);
	gap: 9px;
	padding: 12px
}

.emoji-picker-item {
	background: #ffffff0b;
	border-radius: 12px;
	width: 54px;
	height: 54px
}

.emoji-picker-item img {
	width: 42px;
	height: 42px
}

.inline-custom-emoji {
	vertical-align: -.62em;
	width: 12.25em;
	height: 12.25em
}

.message-bubble-refined.emoji-only {
	width: max-content;
	max-width: 100%;
	padding: 0;
	box-shadow: none !important;
	background: 0 0 !important;
	border-color: #0000 !important
}

.message-bubble-refined.emoji-only:after {
	display: none
}

.message-bubble-refined.emoji-only .message-text {
	align-items: flex-end;
	gap: .15em;
	margin: 0;
	display: inline-flex
}

.message-bubble-refined.emoji-only .inline-custom-emoji {
	box-shadow: none;
	background: 0 0;
	border: 0;
	border-radius: 0;
	margin: 0
}

.dm-thread .message-row-refined.own {
	flex-direction: row-reverse
}

.dm-thread .message-row-refined.own .message-stack {
	align-items: flex-end
}

.dm-thread .message-row-refined.own .message-bubble-meta {
	flex-direction: row
}

.dm-thread .message-row-refined.own .message-meta-title {
	justify-content: flex-start
}

.dm-thread .message-row-refined.own .message-meta-actions {
	margin-left: auto
}

.dm-thread .message-row-refined.own .message-bubble-refined {
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--primary) 12%, transparent)), color-mix(in srgb, var(--surface-elevated) 80%, transparent)
}

.dm-thread .message-row-refined.own .message-bubble-refined:after {
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	left: auto;
	right: -12px
}

.message-code-card {
	border: 1px solid color-mix(in srgb, var(--border-light) 86%, var(--primary) 14%);
	background: #030712b3;
	border-radius: 12px;
	width: min(720px, 100%);
	margin: 0;
	overflow: hidden
}

.message-text-block {
	gap: 10px;
	display: grid
}

.safe-message-link {
	color: color-mix(in srgb, var(--primary) 78%, #fff);
	font-weight: 700;
	text-decoration: none
}

.safe-message-link:hover {
	text-decoration: underline
}

.youtube-embed-card {
	aspect-ratio: 16/9;
	border: 1px solid color-mix(in srgb, var(--border-light) 72%, var(--primary) 28%);
	background: #00000047;
	border-radius: 14px;
	width: min(560px, 100%);
	overflow: hidden
}

.youtube-embed-card iframe {
	border: 0;
	width: 100%;
	height: 100%;
	display: block
}

.safe-link-gate {
	background: var(--bg-base);
	min-height: 100vh;
	color: var(--text-primary);
	place-items: center;
	padding: 24px;
	display: grid
}

.safe-link-card {
	border: 1px solid var(--border-subtle);
	background: var(--surface-elevated);
	border-radius: 18px;
	gap: 14px;
	width: min(620px, 100%);
	padding: 24px;
	display: grid;
	box-shadow: 0 28px 80px #0000005c
}

.safe-link-card h1,
.safe-link-card p {
	margin: 0
}

.safe-link-card p {
	color: var(--text-muted);
	word-break: break-all
}

.safe-link-actions {
	justify-content: flex-end;
	gap: 10px;
	display: flex
}

.bot-playing {
	box-shadow: 0 0 0 1px #22c55e33, 0 14px 40px #22c55e1f;
	border-color: color-mix(in srgb, #22c55e 55%, var(--border-light)) !important
}

.message-code-card figcaption {
	border-bottom: 1px solid var(--border-subtle);
	color: var(--text-secondary);
	text-transform: uppercase;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	font-size: .76rem;
	display: flex
}

.message-code-card pre {
	max-height: 520px;
	margin: 0;
	padding: 10px 0;
	font: .84rem/1.55 Consolas, Cascadia Code, Fira Code, monospace;
	overflow: auto
}

.message-code-card.collapsed pre {
	max-height: 360px
}

.code-line {
	grid-template-columns: 44px minmax(0, 1fr);
	min-height: 1.55em;
	display: grid
}

.code-line-number {
	color: #94a3b894;
	text-align: right;
	-webkit-user-select: none;
	user-select: none;
	padding-right: 10px
}

.code-line-content {
	color: #dbeafe;
	white-space: pre;
	min-width: 0;
	padding-right: 14px
}

.code-token.keyword {
	color: #93c5fd
}

.code-token.string {
	color: #86efac
}

.code-token.number {
	color: #fbbf24
}

.code-token.comment {
	color: #64748b
}

.code-token.type {
	color: #c4b5fd
}

.code-collapse-button {
	border: 0;
	border-top: 1px solid var(--border-subtle);
	width: 100%;
	min-height: 34px;
	color: var(--text-secondary);
	cursor: pointer;
	background: #ffffff09;
	justify-content: center;
	align-items: center;
	gap: 8px;
	display: inline-flex
}

.message-mention {
	background: color-mix(in srgb, var(--primary) 20%, transparent);
	color: color-mix(in srgb, var(--primary) 72%, white);
	border-radius: .45em;
	padding: 0 .25em;
	font-weight: 700;
	display: inline-flex
}

.mention-suggest {
	z-index: 70;
	border: 1px solid var(--border-light);
	background: var(--surface-overlay);
	border-radius: 12px;
	width: min(280px, 100% - 116px);
	position: absolute;
	bottom: calc(100% + 10px);
	left: 58px;
	overflow: hidden;
	box-shadow: 0 18px 42px #00000057
}

.mention-suggest-stable {
	display: none
}

.mention-suggest-stable.open {
	display: block
}

.mention-suggest button {
	width: 100%;
	min-height: 42px;
	color: var(--text-primary);
	text-align: left;
	cursor: pointer;
	background: 0 0;
	border: 0;
	border-radius: 0;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	display: flex
}

.mention-suggest button:hover {
	background: color-mix(in srgb, var(--primary) 16%, transparent)
}

.mention-suggest-head {
	color: var(--text-secondary);
	text-transform: uppercase;
	border-bottom: 1px solid var(--border-subtle);
	padding: 9px 11px 7px;
	font-size: 11px;
	font-weight: 800
}

.bot-command-suggest {
	width: min(360px, 100% - 116px)
}

.bot-command-icon {
	width: 28px;
	height: 28px;
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 18%, transparent);
	border-radius: 9px;
	justify-content: center;
	align-items: center;
	font-weight: 900;
	display: inline-flex
}

.bot-command-copy {
	gap: 2px;
	min-width: 0;
	display: grid
}

.bot-command-copy strong,
.bot-command-copy small {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.bot-command-copy small {
	color: var(--text-secondary);
	font-size: 11px
}

.scroll-to-bottom-button {
	z-index: 60;
	border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border-light));
	background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
	min-height: 38px;
	color: var(--text-primary);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	cursor: pointer;
	border-radius: 999px;
	padding: 0 14px;
	position: absolute;
	bottom: 92px;
	right: 28px;
	box-shadow: 0 16px 36px #00000047
}

.attachment-image-shell {
	background: #00000029;
	min-height: 180px;
	position: relative;
	overflow: hidden
}

.attachment-image {
	opacity: 0;
	transition: opacity .18s
}

.attachment-image-shell.loaded .attachment-image {
	opacity: 1
}

.attachment-image-preloader,
.attachment-image-unavailable {
	z-index: 1;
	color: var(--text-secondary);
	background-color: #080d16d1;
	background-image: linear-gradient(110deg, #0000 18%, #ffffff0f 44%, #0000 68%), none;
	background-position: 0 0, 0 0;
	background-repeat: repeat, repeat;
	background-size: 220% 100%;
	background-attachment: scroll, scroll;
	background-origin: padding-box, padding-box;
	background-clip: border-box, border-box;
	place-items: center;
	gap: 8px;
	animation: 1.6s linear infinite attachmentLoadingSweep;
	display: grid;
	position: absolute;
	inset: 0
}

.attachment-image-unavailable {
	min-height: 180px;
	animation: none;
	position: relative
}

.text-attachment-preview {
	gap: 10px;
	padding: 12px;
	display: grid
}

.text-attachment-head,
.text-attachment-actions {
	align-items: center;
	gap: 10px;
	display: flex
}

.profile-status-control {
	border-radius: var(--radius-sm);
	background: #0f172a6b;
	border: 1px solid #94a3b829;
	gap: 6px;
	margin-top: 10px;
	padding: 10px 12px;
	display: grid
}

.profile-status-control span {
	color: var(--text-secondary);
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700
}

.profile-status-control select {
	width: 100%;
	color: var(--text-primary);
	font: inherit;
	background: 0 0;
	border: 0;
	outline: 0;
	font-weight: 700
}

.sidebar-user-status-select {
	width: min(120px, 100%);
	color: var(--text-secondary);
	font: inherit;
	background: 0 0;
	border: 0;
	outline: 0;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700
}

.bot-token-list,
.server-ban-list,
.server-bot-list {
	gap: 8px;
	display: grid
}

.bot-token-row,
.server-ban-row,
.server-bot-row {
	border-radius: var(--radius-sm);
	background: #0f172a61;
	border: 1px solid #94a3b824;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	display: flex
}

.server-ban-row.active {
	background: #7f1d1d29;
	border-color: #f8717159
}

.bot-docs {
	gap: 8px;
	display: grid
}

.bot-docs code,
.bot-token-field input {
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	white-space: normal;
	word-break: break-all;
	background: #0206176b;
	border: 1px solid #94a3b829;
	padding: 10px 12px
}

:root[data-theme=light] .profile-status-control,
:root[data-theme=light] .bot-token-row,
:root[data-theme=light] .server-bot-row,
:root[data-theme=light] .server-ban-row,
:root[data-theme=light] .bot-docs code,
:root[data-theme=light] .bot-token-field input {
	background: #ffffffbd
}

.text-attachment-actions {
	flex-wrap: wrap
}

.text-attachment-preview pre {
	border: 1px solid var(--border-subtle);
	max-height: 180px;
	color: var(--text-primary);
	white-space: pre-wrap;
	background: #03071285;
	border-radius: 10px;
	margin: 0;
	padding: 10px;
	font: .78rem/1.5 Consolas, Cascadia Code, monospace;
	overflow: auto
}

.text-attachment-preview pre.open {
	max-height: 520px
}

.text-preview-note {
	color: var(--text-secondary);
	font-size: .78rem
}

.text-preview-skeleton {
	gap: 7px;
	padding: 10px;
	display: grid
}

.text-preview-skeleton span {
	background: linear-gradient(110deg, #ffffff0d, #ffffff24, #ffffff0d) 0 0/220% 100%;
	border-radius: 999px;
	height: 12px;
	animation: 1.35s linear infinite attachmentLoadingSweep
}

.text-preview-skeleton span:nth-child(2) {
	width: 82%
}

.text-preview-skeleton span:nth-child(3) {
	width: 58%
}

.emoji-trigger-button {
	color: var(--text-primary) !important
}

.emoji-trigger-button svg,
.emoji-trigger-button svg * {
	opacity: 1 !important;
	stroke: currentColor !important
}

:root[data-theme=light] .sidebar-server-hero,
:root[data-theme=light] .sidebar-profile-hero-modern {
	background: linear-gradient(180deg, #ffffffc7, #f7f9fcf2), var(--surface-base)
}

:root[data-theme=light] .sidebar-server-hero .server-identity-card,
:root[data-theme=light] .sidebar-profile-hero-modern .sidebar-profile-main,
:root[data-theme=light] .sidebar-profile-hero-modern .sidebar-profile-actions,
:root[data-theme=light] .message-date-rail {
	background: #ffffffe0;
	border-color: #94a3b838
}

:root[data-theme=light] .emoji-picker {
	background: #fff;
	border-color: #94a3b847;
	box-shadow: 0 18px 38px #0f172a29
}

:root[data-theme=light] .emoji-picker-item {
	background: #0f172a0b
}

.emoji-picker {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(6px)scale(.98)
}

.emoji-picker.open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0)scale(1)
}

.emoji-trigger-preview {
	object-fit: contain;
	width: 30px;
	height: 30px;
	display: block
}

.composer-send {
	border-radius: 14px;
	justify-content: center;
	width: 46px;
	height: 42px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, white 8%), color-mix(in srgb, var(--primary) 42%, #0f172a 24%)) !important;
	min-width: 46px !important;
	padding: 0 !important
}

.composer-send svg {
	width: 19px;
	height: 19px
}

.message-selection-toolbar {
	border-radius: 0 0 12px 12px;
	margin: 0
}

.conversation-shell:has(.message-selection-toolbar) {
	padding-top: 0
}

.message-row-refined.selectable {
	cursor: pointer
}

.message-row-refined.selected {
	border-color: color-mix(in srgb, var(--primary) 54%, transparent) !important;
	background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 15%, transparent), transparent 72%), color-mix(in srgb, var(--surface-elevated) 90%, var(--primary) 8%) !important
}

.message-row-refined.selected .message-bubble-refined {
	border-color: color-mix(in srgb, var(--primary) 42%, transparent)
}

.floating-media-player {
	z-index: 260;
	border: 1px solid var(--border-light);
	background: var(--surface-overlay);
	border-radius: 14px;
	gap: 10px;
	width: min(360px, 100vw - 36px);
	padding: 12px;
	display: grid;
	position: fixed;
	bottom: 18px;
	right: 18px;
	box-shadow: 0 22px 58px #0000006b
}

.floating-media-head {
	align-items: center;
	gap: 10px;
	display: flex
}

.floating-media-copy {
	flex: 1;
	gap: 2px;
	min-width: 0;
	display: grid
}

.floating-media-copy strong,
.floating-media-copy span {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.floating-media-copy span,
.floating-media-status {
	color: var(--text-secondary);
	font-size: .78rem
}

.floating-media-status.error {
	color: #fca5a5
}

.floating-media-player audio,
.floating-media-player video {
	border-radius: 10px;
	width: 100%
}

.floating-media-player video {
	background: #050607;
	max-height: 220px
}

:root[data-theme=light] .floating-media-player {
	background: #fffffff5;
	box-shadow: 0 22px 48px #0f172a2e
}

.floating-media-player {
	z-index: 520;
	background: linear-gradient(180deg, #fff1, #ffffff05), color-mix(in srgb, var(--surface-overlay) 94%, #020403 6%);
	border-radius: 18px;
	width: min(390px, 100vw - 36px);
	padding: 14px;
	bottom: 148px;
	right: 24px;
	box-shadow: 0 24px 70px #0000007a, inset 0 1px #ffffff0d
}

.audio-player-card-compact {
	gap: 0;
	padding: 10px
}

.audio-player-card-compact .audio-player-head {
	grid-template-columns: 36px minmax(0, 1fr) 40px 36px;
	gap: 10px;
	display: grid
}

.audio-player-card-compact .audio-player-toggle {
	border-radius: 12px;
	width: 38px;
	height: 38px
}

.audio-player-card-compact.active {
	border-color: color-mix(in srgb, var(--primary) 52%, transparent);
	background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%), var(--surface-elevated)
}

.floating-audio-control {
	border: 1px solid var(--border-subtle);
	background: #ffffff0b;
	border-radius: 14px;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px;
	display: grid
}

.floating-audio-control input[type=range] {
	width: 100%;
	accent-color: var(--primary)
}

.floating-media-time {
	color: var(--text-secondary);
	white-space: nowrap;
	font-size: .76rem
}

.floating-playlist-shell {
	gap: 8px;
	display: grid
}

.floating-playlist-toggle {
	border: 1px solid var(--border-subtle);
	width: fit-content;
	color: var(--text-primary);
	cursor: pointer;
	background: #ffffff0b;
	border-radius: 10px;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	display: inline-flex
}

.floating-playlist {
	gap: 6px;
	max-height: 180px;
	display: grid;
	overflow: auto
}

.floating-playlist button {
	color: var(--text-primary);
	text-align: left;
	background: #ffffff08;
	border: 1px solid #0000;
	border-radius: 10px;
	gap: 2px;
	padding: 8px 10px;
	display: grid
}

.floating-playlist button.active {
	border-color: color-mix(in srgb, var(--primary) 48%, transparent);
	background: var(--primary-soft)
}

.floating-playlist span {
	color: var(--text-secondary);
	font-size: .76rem
}

.floating-media-head {
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	padding-bottom: 2px
}

.floating-media-head:active {
	cursor: grabbing
}

.floating-media-copy strong {
	font-size: .96rem
}

.floating-media-copy span {
	color: color-mix(in srgb, var(--text-secondary) 88%, var(--primary) 12%)
}

.floating-media-player audio {
	border-radius: 999px;
	height: 44px
}

.floating-media-player video {
	border: 1px solid #ffffff0f;
	border-radius: 14px
}

.cache-consent-banner {
	z-index: 700;
	border: 1px solid var(--border-light);
	background: linear-gradient(180deg, #ffffff12, #ffffff06), var(--surface-overlay);
	border-radius: 16px;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	width: min(720px, 100vw - 28px);
	padding: 14px;
	display: flex;
	position: fixed;
	bottom: 18px;
	left: 50%;
	transform: translate(-50%);
	box-shadow: 0 22px 64px #0000006b
}

.cache-consent-copy {
	gap: 4px;
	min-width: 0;
	display: grid
}

.cache-consent-copy strong {
	font-size: .94rem
}

.cache-consent-copy span {
	color: var(--text-secondary);
	font-size: .82rem;
	line-height: 1.4
}

.cache-consent-actions {
	flex: none;
	align-items: center;
	gap: 10px;
	display: inline-flex
}

:root[data-theme=light] .cache-consent-banner {
	background: #fffffff5;
	box-shadow: 0 22px 48px #0f172a2e
}

@media (width<=680px) {
	.cache-consent-banner {
		flex-direction: column;
		align-items: stretch
	}

	.cache-consent-actions {
		justify-content: flex-end
	}
}

.content-panel>.floating-media-player {
	z-index: 8;
	background: linear-gradient(180deg, #ffffff0b, #ffffff04), color-mix(in srgb, var(--surface-base) 94%, #020403 6%);
	width: auto;
	max-width: none;
	box-shadow: none;
	border-width: 0 0 1px;
	border-radius: 0;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 16px;
	display: grid;
	position: relative;
	inset: auto
}

.content-panel>.floating-media-player .floating-media-head {
	display: none
}

.content-panel>.floating-media-player .floating-media-copy strong {
	font-size: .88rem
}

.content-panel>.floating-media-player .floating-audio-control {
	grid-template-columns: 40px minmax(0, 1fr);
	width: 100%;
	padding: 6px 8px
}

.content-panel>.floating-media-player video {
	max-height: 340px
}

.content-panel>.floating-media-player .floating-media-progress {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	display: grid
}

.content-panel>.floating-media-player .floating-media-actions {
	justify-self: end;
	align-items: center;
	gap: 10px;
	display: inline-flex
}

.content-panel>.floating-media-player .floating-media-actions .inline-icon-button {
	border-radius: 12px;
	width: 40px;
	height: 40px
}

.content-panel>.floating-media-player .floating-media-actions .inline-icon-button svg {
	width: 20px;
	height: 20px
}

.floating-playlist-modal {
	z-index: 760;
	-webkit-backdrop-filter: blur(14px);
	background: #00000075;
	padding: 24px;
	display: block;
	position: fixed;
	inset: 0
}

.floating-playlist-dialog {
	border: 1px solid var(--border-light);
	background: var(--surface-overlay);
	border-radius: 16px;
	gap: 12px;
	width: min(560px, 100vw - 40px);
	max-height: min(620px, 100vh - 64px);
	padding: 14px;
	display: grid;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 26px 70px #00000075
}

.floating-playlist-dialog-head {
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	display: flex
}

.floating-playlist-dialog .floating-playlist {
	max-height: min(480px, 100vh - 170px)
}

@media (width<=920px) {
	.content-panel>.floating-media-player {
		grid-template-columns: 1fr
	}

	.content-panel>.floating-media-player .floating-media-actions {
		justify-self: start
	}
}

:root:not([data-theme=light]) .profile-dialog-list .user-list-copy strong,
:root[data-theme=dark] .profile-dialog-list .user-list-copy strong {
	color: var(--text-primary) !important
}

:root:not([data-theme=light]) .profile-dialog-list .user-list-copy span,
:root[data-theme=dark] .profile-dialog-list .user-list-copy span {
	color: var(--text-secondary) !important
}

.profile-dialog-list .user-list-row.selected .user-list-copy strong {
	color: #fff !important
}

.friend-modal {
	width: min(820px, 94vw) !important
}

.friend-modal .settings-head {
	padding: 16px 18px 14px
}

.friend-modal .settings-head strong {
	font-size: .98rem
}

.friend-modal .modal-subtitle {
	font-size: .82rem
}

.friend-modal .settings-body.friend-modal-shell {
	grid-template-columns: 178px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 18px 18px !important
}

.friend-modal-sidebar {
	gap: 6px
}

.friend-tab-button {
	border-radius: 12px;
	min-height: 42px;
	padding: 9px 11px
}

.friend-modal-content,
.friend-pane {
	gap: 10px
}

.friend-pane .panel-title {
	min-height: 34px
}

.friend-pane .search-shell {
	border-radius: 14px;
	min-height: 58px;
	padding: 10px 12px
}

.friend-pane .search-shell input {
	min-height: 38px
}

.friend-pane .search-shell .action-button {
	min-height: 38px;
	padding-inline: 14px
}

.friend-result-list {
	gap: 7px
}

.friend-result-card {
	min-height: 56px;
	border-radius: 12px !important;
	padding: 10px 12px !important
}

.friend-result-card .app-avatar {
	width: 38px;
	height: 38px
}

.friend-result-copy strong {
	color: var(--text-primary);
	font-size: .9rem
}

.friend-result-copy p {
	font-size: .78rem;
	line-height: 1.35
}

.friend-pane .empty-inline-card {
	border-radius: 14px;
	min-height: 88px;
	padding: 14px
}

@media (width<=980px) {
	.friend-modal .settings-body.friend-modal-shell {
		grid-template-columns: 1fr
	}
}

.member-role-groups {
	gap: 14px;
	min-width: 0;
	display: grid
}

.member-role-group {
	gap: 8px;
	min-width: 0;
	display: grid
}

.member-role-group-head {
	color: var(--text-muted);
	letter-spacing: .06em;
	text-transform: uppercase;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 0 4px;
	font-size: .72rem;
	font-weight: 800;
	display: flex
}

.member-role-group-head>span:last-child {
	border: 1px solid var(--border-subtle);
	min-width: 22px;
	min-height: 22px;
	color: var(--text-secondary);
	background: #ffffff0a;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	font-size: .7rem;
	display: inline-flex
}

.member-role-group-name {
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	color: color-mix(in srgb, var(--role-color, var(--text-muted)) 72%, var(--text-primary) 18%);
	overflow: hidden
}

.member-role-group .member-list-refined {
	padding: 0
}