/* Avatar Frames System */
.avatar-framed {
	position: relative;
	display: inline-block;
	z-index: 0;
}
.avatar-framed img:not(.frame-overlay) {
	border-radius: 50%;
	display: block;
	position: relative;
	z-index: 2;
}
.avatar-framed .frame-overlay {
	display: block;
	position: absolute;
	z-index: 3;
	border-radius: 0;
	overflow: hidden;
}
.avatar-framed::before {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.avatar-framed::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
}

/* No frame */
.frame-none img {
	border: 2px solid #444;
}

/* Gold frame */
.frame-gold::before {
	inset: -4px;
	background: linear-gradient(135deg, #f5af19, #f12711, #f5af19, #fceabb);
	background-size: 300% 300%;
	animation: frame-rotate 3s ease infinite;
	z-index: 0;
}
.frame-gold img {
	border: 3px solid #1a1a2e;
}

/* Silver frame */
.frame-silver::before {
	inset: -4px;
	background: linear-gradient(135deg, #bdc3c7, #ecf0f1, #95a5a6, #ecf0f1);
	background-size: 300% 300%;
	animation: frame-rotate 4s ease infinite;
	z-index: 0;
}
.frame-silver img {
	border: 3px solid #1a1a2e;
}

/* Bronze frame */
.frame-bronze::before {
	inset: -4px;
	background: linear-gradient(135deg, #b8860b, #cd853f, #daa520, #cd853f);
	background-size: 300% 300%;
	animation: frame-rotate 4s ease infinite;
	z-index: 0;
}
.frame-bronze img {
	border: 3px solid #1a1a2e;
}

/* Platinum frame */
.frame-platinum::before {
	inset: -5px;
	background: linear-gradient(135deg, #e5e4e2, #a8a9ad, #e5e4e2, #c0c0c0, #e5e4e2);
	background-size: 400% 400%;
	animation: frame-rotate 2s ease infinite;
	z-index: 0;
}
.frame-platinum::after {
	inset: -8px;
	border: 2px solid rgba(229, 228, 226, 0.3);
	animation: frame-pulse 2s ease-in-out infinite;
}
.frame-platinum img {
	border: 3px solid #1a1a2e;
}

/* Fire frame */
.frame-fire::before {
	inset: -6px;
	background: linear-gradient(135deg, #ff0000, #ff6600, #ffcc00, #ff6600, #ff0000);
	background-size: 400% 400%;
	animation: frame-rotate 1s ease infinite;
	z-index: 0;
	filter: blur(2px);
}
.frame-fire::after {
	inset: -4px;
	background: linear-gradient(135deg, #ff3300, #ff6600, #ff9900);
	background-size: 300% 300%;
	animation: frame-rotate 1.5s ease infinite reverse;
	z-index: 0;
}
.frame-fire img {
	border: 3px solid #1a1a2e;
	box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
}

/* Ice frame */
.frame-ice::before {
	inset: -5px;
	background: linear-gradient(135deg, #00d4ff, #0099cc, #00ffff, #0066cc, #00d4ff);
	background-size: 400% 400%;
	animation: frame-rotate 3s ease infinite;
	z-index: 0;
}
.frame-ice::after {
	inset: -8px;
	border: 2px solid rgba(0, 212, 255, 0.4);
	animation: frame-pulse 2s ease-in-out infinite;
}
.frame-ice img {
	border: 3px solid #1a1a2e;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

/* Neon frame */
.frame-neon::before {
	inset: -5px;
	background: linear-gradient(135deg, #ff00ff, #00ffff, #ff00ff);
	background-size: 300% 300%;
	animation: frame-rotate 2s ease infinite;
	z-index: 0;
}
.frame-neon::after {
	inset: -8px;
	box-shadow: 0 0 15px #ff00ff, 0 0 30px #00ffff;
	animation: frame-neon-glow 1s ease-in-out infinite alternate;
}
.frame-neon img {
	border: 3px solid #1a1a2e;
}

/* Rainbow frame */
.frame-rainbow::before {
	inset: -5px;
	background: linear-gradient(135deg,
		#ff0000, #ff7f00, #ffff00, #00ff00,
		#0000ff, #4b0082, #9400d3, #ff0000);
	background-size: 800% 800%;
	animation: frame-rainbow 3s linear infinite;
	z-index: 0;
}
.frame-rainbow img {
	border: 3px solid #1a1a2e;
}

/* Legendary frame */
.frame-legendary::before {
	inset: -6px;
	background: linear-gradient(135deg, #ffd700, #ffec8b, #ffd700, #daa520, #ffd700);
	background-size: 400% 400%;
	animation: frame-rotate 2s ease infinite;
	z-index: 0;
}
.frame-legendary::after {
	inset: -10px;
	border: 3px solid transparent;
	background: linear-gradient(135deg, rgba(255,215,0,0.5), transparent, rgba(255,215,0,0.5)) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: frame-legendary-spin 4s linear infinite;
}
.frame-legendary img {
	border: 4px solid #1a1a2e;
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

/* VIP frame */
.frame-vip::before {
	inset: -5px;
	background: linear-gradient(135deg, #9400d3, #4b0082, #9400d3, #8b008b);
	background-size: 300% 300%;
	animation: frame-rotate 3s ease infinite;
	z-index: 0;
}
.frame-vip::after {
	inset: -8px;
	border: 2px solid rgba(148, 0, 211, 0.5);
	animation: frame-pulse 2s ease-in-out infinite;
}
.frame-vip img {
	border: 3px solid #1a1a2e;
	box-shadow: 0 0 15px rgba(148, 0, 211, 0.5);
}

/* Admin frame */
.frame-admin::before {
	inset: -6px;
	background: linear-gradient(135deg, #dc143c, #8b0000, #dc143c, #ff4500);
	background-size: 400% 400%;
	animation: frame-rotate 2s ease infinite;
	z-index: 0;
}
.frame-admin::after {
	inset: -10px;
	border: 2px solid rgba(220, 20, 60, 0.6);
	animation: frame-pulse 1.5s ease-in-out infinite;
}
.frame-admin img {
	border: 4px solid #1a1a2e;
	box-shadow: 0 0 20px rgba(220, 20, 60, 0.6);
}

/* Animations */
@keyframes frame-rotate {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes frame-pulse {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}

@keyframes frame-rainbow {
	0% { background-position: 0% 50%; }
	100% { background-position: 800% 50%; }
}

@keyframes frame-neon-glow {
	0% { box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff; }
	100% { box-shadow: 0 0 20px #00ffff, 0 0 40px #ff00ff; }
}

@keyframes frame-legendary-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Lightning frame - электрическая */
.frame-lightning::before {
	inset: -5px;
	background: linear-gradient(135deg, #00d4ff, #0040ff, #00d4ff, #ffffff, #00d4ff);
	background-size: 400% 400%;
	animation: frame-lightning-flash 0.3s ease infinite;
	z-index: 0;
}
.frame-lightning::after {
	inset: -8px;
	box-shadow: 0 0 15px #00d4ff, 0 0 30px #0040ff, 0 0 45px #00d4ff;
	animation: frame-lightning-glow 0.5s ease-in-out infinite alternate;
}
.frame-lightning img {
	border: 3px solid #0a0a1a;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
}

/* Blaze frame - пылающая */
.frame-blaze::before {
	inset: -8px;
	background:
		radial-gradient(ellipse at 50% 100%, #ff4500 0%, transparent 50%),
		radial-gradient(ellipse at 20% 80%, #ff6600 0%, transparent 40%),
		radial-gradient(ellipse at 80% 80%, #ff6600 0%, transparent 40%),
		radial-gradient(ellipse at 50% 50%, #ffcc00 0%, transparent 60%);
	background-size: 100% 100%;
	animation: frame-blaze 0.8s ease-in-out infinite;
	z-index: 0;
	filter: blur(3px);
}
.frame-blaze::after {
	inset: -4px;
	background: linear-gradient(0deg, #ff4500, #ff6600, #ffcc00, #ff6600);
	background-size: 100% 400%;
	animation: frame-blaze-inner 0.5s ease infinite;
	z-index: 0;
}
.frame-blaze img {
	border: 3px solid #1a0a00;
	box-shadow: 0 0 20px rgba(255, 102, 0, 0.8);
}

/* Frost frame - морозная */
.frame-frost::before {
	inset: -5px;
	background: linear-gradient(135deg, #e0f7ff, #87ceeb, #b0e0e6, #f0ffff, #e0f7ff);
	background-size: 300% 300%;
	animation: frame-rotate 4s ease infinite;
	z-index: 0;
}
.frame-frost::after {
	inset: -10px;
	background: radial-gradient(circle at 20% 20%, white 1px, transparent 2px),
				radial-gradient(circle at 80% 30%, white 1px, transparent 2px),
				radial-gradient(circle at 40% 80%, white 1px, transparent 2px),
				radial-gradient(circle at 70% 70%, white 1px, transparent 2px);
	animation: frame-frost-sparkle 2s ease-in-out infinite;
}
.frame-frost img {
	border: 3px solid #1a2a3a;
	box-shadow: 0 0 15px rgba(135, 206, 235, 0.6);
}

/* Toxic frame - ядовитая */
.frame-toxic::before {
	inset: -5px;
	background: linear-gradient(135deg, #39ff14, #32cd32, #00ff00, #7cfc00, #39ff14);
	background-size: 400% 400%;
	animation: frame-rotate 2s ease infinite;
	z-index: 0;
}
.frame-toxic::after {
	inset: -8px;
	box-shadow: 0 0 10px #39ff14, 0 0 20px #32cd32;
	animation: frame-toxic-pulse 1s ease-in-out infinite;
}
.frame-toxic img {
	border: 3px solid #0a1a0a;
	box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}

/* Galaxy frame - космическая */
.frame-galaxy::before {
	inset: -6px;
	background: linear-gradient(135deg, #0c0030, #1a0050, #2d1b69, #1a0050, #0c0030);
	background-size: 300% 300%;
	animation: frame-rotate 5s ease infinite;
	z-index: 0;
}
.frame-galaxy::after {
	inset: -8px;
	background:
		radial-gradient(circle at 20% 30%, #fff 1px, transparent 2px),
		radial-gradient(circle at 70% 20%, #fff 1px, transparent 2px),
		radial-gradient(circle at 40% 70%, #ffd700 1px, transparent 2px),
		radial-gradient(circle at 80% 60%, #fff 1px, transparent 2px),
		radial-gradient(circle at 10% 80%, #87ceeb 1px, transparent 2px),
		radial-gradient(circle at 90% 90%, #fff 1px, transparent 2px);
	animation: frame-galaxy-stars 3s ease-in-out infinite;
}
.frame-galaxy img {
	border: 3px solid #0c0030;
	box-shadow: 0 0 15px rgba(138, 43, 226, 0.6);
}

/* Blood frame - кровавая */
.frame-blood::before {
	inset: -5px;
	background: linear-gradient(180deg, #8b0000, #dc143c, #8b0000, #4a0000);
	background-size: 100% 400%;
	animation: frame-blood-drip 2s ease-in-out infinite;
	z-index: 0;
}
.frame-blood::after {
	inset: -8px;
	box-shadow: 0 0 15px rgba(139, 0, 0, 0.8);
	animation: frame-pulse 2s ease-in-out infinite;
}
.frame-blood img {
	border: 3px solid #1a0000;
	box-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
}

/* Cyber frame - кибер */
.frame-cyber::before {
	inset: -4px;
	background: linear-gradient(90deg, #00ff00 25%, transparent 25%, transparent 50%, #00ff00 50%, #00ff00 75%, transparent 75%);
	background-size: 8px 8px;
	animation: frame-cyber-scan 0.5s linear infinite;
	z-index: 0;
}
.frame-cyber::after {
	inset: -6px;
	border: 2px solid #00ff00;
	box-shadow: 0 0 10px #00ff00, inset 0 0 10px rgba(0, 255, 0, 0.3);
}
.frame-cyber img {
	border: 2px solid #001a00;
	box-shadow: 0 0 5px rgba(0, 255, 0, 0.8);
}

/* Shadow frame - теневая */
.frame-shadow::before {
	inset: -6px;
	background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460, #16213e, #1a1a2e);
	background-size: 300% 300%;
	animation: frame-rotate 4s ease infinite;
	z-index: 0;
}
.frame-shadow::after {
	inset: -10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(15, 52, 96, 0.5);
	animation: frame-shadow-pulse 3s ease-in-out infinite;
}
.frame-shadow img {
	border: 3px solid #0a0a15;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

/* Sakura frame - сакура */
.frame-sakura::before {
	inset: -5px;
	background: linear-gradient(135deg, #ffb7c5, #ff69b4, #ffb7c5, #ffc0cb, #ffb7c5);
	background-size: 300% 300%;
	animation: frame-rotate 3s ease infinite;
	z-index: 0;
}
.frame-sakura::after {
	inset: -10px;
	background:
		radial-gradient(circle at 15% 25%, #ffb7c5 3px, transparent 4px),
		radial-gradient(circle at 85% 35%, #ffc0cb 2px, transparent 3px),
		radial-gradient(circle at 25% 75%, #ff69b4 2px, transparent 3px),
		radial-gradient(circle at 75% 85%, #ffb7c5 3px, transparent 4px);
	animation: frame-sakura-fall 4s ease-in-out infinite;
}
.frame-sakura img {
	border: 3px solid #2a1a20;
	box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
}

/* Emerald frame - изумрудная */
.frame-emerald::before {
	inset: -5px;
	background: linear-gradient(135deg, #50c878, #2e8b57, #3cb371, #00fa9a, #50c878);
	background-size: 400% 400%;
	animation: frame-rotate 3s ease infinite;
	z-index: 0;
}
.frame-emerald::after {
	inset: -8px;
	box-shadow: 0 0 15px rgba(80, 200, 120, 0.6), 0 0 30px rgba(46, 139, 87, 0.4);
	animation: frame-pulse 2s ease-in-out infinite;
}
.frame-emerald img {
	border: 3px solid #0a1a10;
	box-shadow: 0 0 10px rgba(80, 200, 120, 0.5);
}

/* Additional animations */
@keyframes frame-lightning-flash {
	0%, 100% { opacity: 1; background-position: 0% 50%; }
	50% { opacity: 0.7; background-position: 100% 50%; }
	25%, 75% { opacity: 1; }
}

@keyframes frame-lightning-glow {
	0% { box-shadow: 0 0 10px #00d4ff, 0 0 20px #0040ff; }
	100% { box-shadow: 0 0 25px #00d4ff, 0 0 50px #0040ff, 0 0 75px #00d4ff; }
}

@keyframes frame-blaze {
	0%, 100% { transform: scale(1); filter: blur(3px); }
	50% { transform: scale(1.1); filter: blur(4px); }
}

@keyframes frame-blaze-inner {
	0% { background-position: 0% 100%; }
	100% { background-position: 0% 0%; }
}

@keyframes frame-frost-sparkle {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}

@keyframes frame-toxic-pulse {
	0%, 100% { box-shadow: 0 0 10px #39ff14, 0 0 20px #32cd32; }
	50% { box-shadow: 0 0 20px #39ff14, 0 0 40px #32cd32, 0 0 60px #00ff00; }
}

@keyframes frame-galaxy-stars {
	0%, 100% { opacity: 0.6; transform: rotate(0deg); }
	50% { opacity: 1; transform: rotate(180deg); }
}

@keyframes frame-blood-drip {
	0% { background-position: 0% 0%; }
	100% { background-position: 0% 100%; }
}

@keyframes frame-cyber-scan {
	0% { background-position: 0 0; }
	100% { background-position: 8px 0; }
}

@keyframes frame-shadow-pulse {
	0%, 100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), 0 0 40px rgba(15, 52, 96, 0.3); }
	50% { box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 0 0 60px rgba(15, 52, 96, 0.6); }
}

@keyframes frame-sakura-fall {
	0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
	50% { transform: translateY(5px) rotate(5deg); opacity: 1; }
}

/* Chat message avatar frames */
.chat_message {
	padding-left: 8px;
	padding-top: 8px;
	overflow: visible;
	display: flex;
	align-items: flex-start;
}
.chat_message > a {
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	margin-right: 10px;
}
.chat_message .avatar-framed {
	display: block;
	width: 50px;
	height: 50px;
	position: relative;
}
.chat_message .avatar-framed::before {
	inset: -2px !important;
}
.chat_message .avatar-framed::after {
	inset: -3px !important;
}
.chat_message .avatar-framed img.user_img {
	float: none !important;
	padding: 0 !important;
	background-color: transparent !important;
	object-fit: cover !important;
}
.chat_message .message {
	flex: 1;
	margin-left: 0;
	min-width: 0;
	padding-top: 2px;
}

/* Mobile styles for chat frames */
@media (max-width: 768px) {
	.chat_message {
		padding-left: 5px;
		padding-top: 5px;
	}
	.chat_message > a {
		margin-right: 8px;
	}
	.chat_message .avatar-framed {
		width: 44px;
		height: 44px;
	}
	.chat_message .avatar-framed img.user_img {
		object-fit: cover !important;
	}
	/* Reduce frame effects on mobile for performance */
	.chat_message .avatar-framed::before {
		inset: -3px;
	}
	.chat_message .avatar-framed::after {
		inset: -5px;
	}
}

/* Frame selector in profile */
.frame-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	padding: 15px;
}
.frame-option {
	cursor: pointer;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
	background: #1a1a2e;
	transition: all 0.3s;
	min-width: 100px;
}
.frame-option:hover {
	background: #2a2a4e;
	transform: scale(1.05);
}
.frame-option.selected {
	background: #2a4a2e;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}
.frame-option.locked {
	opacity: 0.5;
	cursor: not-allowed;
}
.frame-option .frame-name {
	margin-top: 8px;
	font-size: 12px;
	color: #ccc;
}
.frame-option .frame-price {
	font-size: 11px;
	color: #f39c12;
}
.frame-option .frame-price.free {
	color: #4ade80;
}

/* Animation for frame selection */
@keyframes frameSelected {
	0% {
		transform: scale(1);
		box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
	}
	50% {
		transform: scale(1.1);
		box-shadow: 0 0 25px rgba(74, 222, 128, 0.9);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
	}
}

.frame-option.selected {
	animation: frameSelected 0.5s ease;
}

/* Avatar Shape Styles */
/* Square shape - affects avatar image and CSS frame pseudo-elements (not PNG frames) */
.avatar-framed.shape-square img:not(.frame-overlay) {
	border-radius: 0 !important;
}
.avatar-framed.shape-square:not(.frame-png)::before,
.avatar-framed.shape-square:not(.frame-png)::after {
	border-radius: 0 !important;
}

/* Rounded shape (soft corners) - affects avatar image and CSS frame pseudo-elements (not PNG frames) */
.avatar-framed.shape-rounded img:not(.frame-overlay) {
	border-radius: 15% !important;
}
.avatar-framed.shape-rounded:not(.frame-png)::before,
.avatar-framed.shape-rounded:not(.frame-png)::after {
	border-radius: 15% !important;
}

/* Shape selector - styled like frame selector */
.shape-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	padding: 15px;
	justify-content: center;
}
.shape-option {
	cursor: pointer;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
	background: #1a1a2e;
	transition: all 0.3s;
	min-width: 100px;
}
.shape-option:hover {
	background: #2a2a4e;
	transform: scale(1.05);
}
.shape-option.selected {
	background: #2a4a2e;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}
.shape-option .shape-preview {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	overflow: hidden;
	border: 3px solid #4a4a6a;
}
.shape-option .shape-preview.circle {
	border-radius: 50%;
}
.shape-option .shape-preview.square {
	border-radius: 0;
}
.shape-option .shape-preview.rounded {
	border-radius: 15%;
}
.shape-option .shape-preview img {
	width: 54px !important;
	height: 54px !important;
	max-width: 54px !important;
	max-height: 54px !important;
	object-fit: cover;
	display: block;
}
.shape-option .shape-preview.circle img {
	border-radius: 50% !important;
}
.shape-option .shape-preview.square img {
	border-radius: 0 !important;
}
.shape-option .shape-preview.rounded img {
	border-radius: 15% !important;
}
.shape-option .shape-name {
	margin-top: 8px;
	font-size: 12px;
	color: #ccc;
}

/* Border selector - styled like shape selector */
.border-option {
	cursor: pointer;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
	background: #1a1a2e;
	transition: all 0.3s;
	min-width: 100px;
}
.border-option:hover {
	background: #2a2a4e;
	transform: scale(1.05);
}
.border-option.selected {
	background: #2a4a2e;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}
.border-preview {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.border-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.border-preview.with-border img {
	border: 3px solid #1a1a2e;
}
.border-preview.no-border img {
	border: none;
}

/* No inner border class - removes border from avatar in frames */
.avatar-framed.no-inner-border img {
	border: none !important;
	box-shadow: none !important;
}

/* Avatar shape classes for PNG frames */
.avatar-shape-circle {
	border-radius: 50% !important;
}
.avatar-shape-square {
	border-radius: 0 !important;
}
.avatar-shape-rounded {
	border-radius: 15% !important;
}

/* Frame shape classes for PNG frame overlay */
.avatar-framed.frame-shape-square .frame-overlay {
	border-radius: 0 !important;
}
.avatar-framed.frame-shape-rounded .frame-overlay {
	border-radius: 15% !important;
}
.avatar-framed.frame-shape-circle .frame-overlay {
	border-radius: 50% !important;
}

/* Frame shape classes for CSS frames - removed, CSS frames follow avatar shape */

/* Override fixed dimensions for PNG frames in chat */
.chat_message .frame-png .user_img {
	float: none !important;
	padding: 0 !important;
	object-fit: cover !important;
}

/* Settings page avatar frame - only PNG frames need overflow hidden */
#avatar-frame-preview.frame-png {
	overflow: hidden !important;
}
#avatar-frame-preview {
	width: 100px !important;
	height: 100px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}
#avatar-frame-preview img#avatar {
	object-fit: cover !important;
}
#avatar-frame-preview .frame-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
	z-index: 10 !important;
}

/* Profile page avatar frame - only PNG frames need overflow hidden */
#profile-avatar-frame.frame-png {
	overflow: hidden !important;
}
#profile-avatar-frame img#mini_profile_avatar {
	object-fit: cover !important;
	max-width: none !important;
}
#profile-avatar-frame .frame-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
	z-index: 10 !important;
}

/* Online users list - avatar frames like chat */
li.online_user {
	padding-left: 8px !important;
	padding-top: 8px !important;
	overflow: visible !important;
	border: none !important;
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	height: auto !important;
	line-height: normal !important;
	margin-bottom: 0 !important;
}
li.online_user > a {
	flex-shrink: 0 !important;
	position: relative !important;
	z-index: 1 !important;
	float: none !important;
	display: flex !important;
	align-items: center !important;
}
li.online_user .avatar-framed {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 50px !important;
	height: 50px !important;
	position: relative !important;
	margin-right: 10px !important;
}
li.online_user .avatar-framed::before {
	inset: -2px !important;
}
li.online_user .avatar-framed::after {
	inset: -3px !important;
}
li.online_user .avatar-framed img {
	width: 50px !important;
	height: 50px !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	object-fit: cover !important;
}
li.online_user a font,
li.online_user a b {
	line-height: 50px !important;
}

/* Dialog/messages - avatar frames */
.dialog .avatar-framed {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 60px !important;
	height: 60px !important;
	position: relative !important;
}
.dialog .avatar-framed::before {
	inset: -2px !important;
}
.dialog .avatar-framed::after {
	inset: -3px !important;
}
.dialog .avatar-framed img:not(.frame-overlay) {
	width: 100%;
	height: 100%;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	object-fit: cover !important;
}
.dialog .avatar-framed .frame-overlay {
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	pointer-events: none !important;
	z-index: 10 !important;
}

/* Top users block - avatar frames */
.top-user-block {
	overflow: visible !important;
}
.top-user-block .avatar-framed {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}
.top-user-block .avatar-framed::before {
	inset: -2px !important;
}
.top-user-block .avatar-framed::after {
	inset: -3px !important;
}
.top-user-block .avatar-framed img {
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
}