.modal_avatar{display: none;width: auto;height: auto;position: absolute;z-index: 99999}
.modal_avatar_hover{width: 220px;height: auto;position: absolute;z-index: 99999;text-align: left}
.avatarep_tavatar {padding: 0px 5px}
.avatarep_tavatar img {height: 80px;width: 80px;padding: 5px;border-radius: 50%}
.avatarep_tavatar_hov {padding: 0px 5px}
.avatarep_tavatar_hov img {height: 40px;width: 40px;padding: 3px;border-radius: 50%}
.avatarep_usern{float: right;right: 10px;position: absolute;margin-top: -60px;font-size: 15px;background: #f5fdff;padding: 10px;opacity: 0.5;color: #424242;border-radius:2px}
.avatarep_usern_hov{float: right;right: 15px;position: absolute;margin-top: -50px;font-size: 13px;background: #f5fdff;padding: 10px;opacity: 0.8;border-radius: 2px}
.avatarep_online_ext1,.avatarep_online_ext{background: #008000;box-shadow: 1px 1px 2px 1px rgba(14, 252, 14, 0.8);border-radius: 50%;height: 90px;width: 90px;margin-left: 10px;opacity: 0.9}
.avatarep_offline_ext1,.avatarep_offline_ext{background: #FFA500;box-shadow: 1px 1px 2px 1px rgba(252, 165, 14, 0.8);border-radius: 50%;height: 90px;width: 90px;margin-left: 10px;opacity: 0.9}
.avatarep_online_ext2{background: #008000;box-shadow: 1px 1px 2px 1px rgba(14, 252, 14, 0.8);border-radius: 50%;height: 45px;width: 45px;margin-left: 10px;opacity: 0.9}
.avatarep_offline_ext2{background: #FFA500;box-shadow: 1px 1px 2px 1px rgba(252, 165, 14, 0.8);border-radius: 50%;height: 45px;width: 45px;margin-left: 10px;opacity: 0.9}
.avatarep_divisor{margin-top: -60px}
.avatarep_divisor_hov{margin-top: -50px}
.avatarep_profile{vertical-align: top;padding-left: 9px;width:340px;color:#424242}
.avatarep_profile a{color: #051517}
.avatarep_profile a:hover{color: #e09c09}
.avatarep_uprofile{line-height:1.5;margin-top: 40px;padding: 10px}
.avatarep_uprofile_hov{line-height: 1.5;margin-top: 16px;padding: 11px}
.avatarep_uname{font-size:15px;color:#025f7e}
.avatarep_memprofile{font-size:11px;font-weight:bold}
.avatarep_memprofile a{display: inline-block;padding: 0px 10px 15px 10px}
.avatarep_data{font-size: 11px}
.avatarep_data_item{display:block}
.avatarep_status{display:block}
.avatarep_img_contributor{padding: 2px;border: 1px solid #D8DFEA;width: 44px;height: 44px;border-radius: 50%;opacity: 0.9;	margin: 0px 4px 0px 2px;float: none !important}
.avatarep_img, .avatarep_bg{padding: 3px;border: 1px solid #D8DFEA;width: 44px;height: 44px;border-radius: 50%;opacity: 0.9;margin: auto;float: left}
.avatarep_fd{width: 40px;height: 40px;display: inline;position: relative}
.avatarep_fda,.avatarep_fdl,.avatarep_fdan,.avatarep_fda_mine,.avatarep_fdl_mine{float:left}
.avatarep_fda,.avatarep_fda_mine{margin-right:15px}
.avatarep_fdl_img{width: 20px;height: 20px;border-radius: 50px;position: absolute;margin-left: -35px;margin-top: 25px;border: 1px solid #424242;padding: 2px}
.avatarep_postbit,.avatarep_member{width: 100px;  height: 100px;  float: none;margin: 5px 0px 5px 0px}
.avatarep_user_none{width: 30px;height: 30px;margin: -10px 5px 0px 0px;padding: 2px}
.avatarep_user{width: 30px;height: 30px;margin: -10px 5px -10px 0px;padding: 2px}
.avatarep_participants{padding: 3px;border: 1px solid #D8DFEA;width: 44px;height: 44px;border-radius: 50%;opacity: 0.9;margin: auto;float: left;background: #278cbd;color: #fff;font-weight: bold;font-size: 18px}
.avatarep_participants span{margin: auto;display: block;text-align:center}
@media screen and (max-width: 450px){
	.avatarep_memprofile a{display: block;padding: 2px}
	.avatarep_online, .avatarep_offline{height: 35px;width: 35px}
	.avatarep_online, .avatarep_offline{height: 35px;width: 35px}
	.avatarep_online_ext1,.avatarep_online_ext,.avatarep_offline_ext1,.avatarep_offline_ext{height: 32px;width: 32px}
	.avatarep_online_ext2,.avatarep_offline_ext2{height: 16px;width: 16px}
	.avatarep_tavatar img {height: 30px;width: 30px;padding: 2px}	
	.avatarep_divisor{margin-top: -28px}
	.avatarep_uname{font-size:12px}
	.avatarep_uprofile{margin-top: 0px;padding: 5px}
	.avatarep_usern{float: right;right: 3px;position: absolute;margin-top: -30px;font-size: 12px;background: #f5fdff;padding: 5px;opacity: 0.5;color: #424242;border-radius:2px}
	.avatarep_img_contributor{padding: 2px;border: 1px solid #D8DFEA;width: 19px;height: 19px;border-radius: 50%;opacity: 0.9;	margin: 2px 5px 0px 2px;float: left}
	.avatarep_img, .avatarep_bg{padding: 2px;border: 1px solid #D8DFEA;width: 19px;height: 19px;border-radius: 50%;opacity: 0.9;margin: auto;float: left}
	.avatarep_fd{float:left;margin: auto;padding: 0px 10px 0px 0px;width:20px;height:20px}
	.avatarep_fda,.avatarep_fdl,.avatarep_fdan,.avatarep_fda_mine,.avatarep_fdl_mine{float:left}
	.avatarep_fda,.avatarep_fda_mine{margin-right:15px}
	.avatarep_postbit,.avatarep_member{width: 44px;  height: 44;  float: none;margin: 2px 0px 5px 0px}
	.avatarep_user{width: 19px;height: 19px;margin: -2px 1px 0px 0px;padding: 1px}
	.avatarep_fdl_img{width: 20px;height: 20px;border-radius: 50px;position: absolute;margin-left: -35px;margin-top: 25px;border: 1px solid #424242;padding: 2px}
}

.avatarep_participants {
	width: 26px;
	height: 26px;
	font-size: 13px;
	padding: 2px;
}

.avatarep_participants_counter {
	font-size: 11px;
}

.avatarep_participants span {
	line-height: normal;
}

.avatarep_img_contributor,
.avatarep_img,
.avatarep_bg {
	width: 26px;
	height: 26px;
	padding: 2px;
}

.avatarep_participants_list img {
	margin: 0 2px;
}


@media (max-width: 768px) {
	.avatarep_participants {
		width: 24px;
		height: 24px;
		font-size: 11px;
		padding: 1px;
	}

	.avatarep_participants_counter {
		font-size: 10px;
	}

	.avatarep_img_contributor,
	.avatarep_img,
	.avatarep_bg {
		width: 24px;
		height: 24px;
		padding: 1px;
	}
}

/* ========== RESPONSIVE: phones, tablets, desktops (layout only, no style changes) ========== */

/* Popup / hover card – keep inside viewport */
.modal_avatar_hover {
	max-width: min(220px, calc(100vw - 24px));
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
}

/* Phone/touch: popup full screen on mobile, no responsive issues */
@media screen and (max-width: 768px) {
	.modal_avatar_hover,
	.modal_avatar {
		position: fixed !important;
		inset: 0 !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		z-index: 2147483647 !important;
		pointer-events: auto !important;
		touch-action: manipulation;
		transform: none !important;
		margin: 0 !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}
	.modal_avatar_hover *,
	.modal_avatar * {
		pointer-events: auto !important;
	}
	.modal_avatar_hover .avatarep_profile,
	.modal_avatar .avatarep_profile {
		width: 100% !important;
		max-width: 100% !important;
		padding: 12px 16px;
		box-sizing: border-box;
	}
	.modal_avatar_hover .avatarep_uprofile,
	.modal_avatar_hover .avatarep_uprofile_hov,
	.modal_avatar .avatarep_uprofile,
	.modal_avatar .avatarep_uprofile_hov {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 16px !important;
		box-sizing: border-box;
		min-height: 0;
	}
}
@media screen and (max-width: 480px) {
	.modal_avatar_hover .avatarep_profile,
	.modal_avatar .avatarep_profile {
		padding: 10px 12px;
	}
	.modal_avatar_hover .avatarep_uprofile,
	.modal_avatar_hover .avatarep_uprofile_hov,
	.modal_avatar .avatarep_uprofile,
	.modal_avatar .avatarep_uprofile_hov {
		padding: 12px !important;
	}
}

/* Menu content: ensure all buttons/links are tappable on phones */
@media screen and (max-width: 768px) {
	.avatarep_divisor,
	.avatarep_uprofile {
		pointer-events: auto !important;
		position: relative;
		z-index: 1;
	}
	.avatarep_memprofile a,
	.avatarep_data a {
		display: block !important;
		min-height: 44px;
		padding: 12px 10px !important;
		line-height: 1.4;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
		touch-action: manipulation;
		position: relative;
		z-index: 2;
	}
	.avatarep_memprofile a {
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}
	.avatarep_memprofile a:last-of-type {
		border-bottom: none;
	}
	.avatarep_data_item {
		padding: 6px 0;
	}
	.avatarep_data a {
		min-height: 40px;
		padding: 8px 0 !important;
	}
}

/* Profile panel – responsive width */
.avatarep_profile {
	max-width: 100%;
	width: min(340px, calc(100vw - 24px));
	box-sizing: border-box;
}
@media screen and (max-width: 600px) {
	.avatarep_profile {
		width: calc(100% - 12px);
		max-width: none;
		padding-left: 6px;
	}
}
@media screen and (max-width: 360px) {
	.avatarep_profile {
		width: 100%;
		padding-left: 4px;
	}
}

/* Avatars – scale with viewport (extra small phones) */
@media screen and (max-width: 360px) {
	.avatarep_tavatar img {
		height: clamp(24px, 7vw, 80px);
		width: clamp(24px, 7vw, 80px);
		max-width: 100%;
		padding: 2px;
	}
	.avatarep_tavatar_hov img {
		height: clamp(28px, 8vw, 40px);
		width: clamp(28px, 8vw, 40px);
		max-width: 100%;
	}
	.avatarep_online_ext1,
	.avatarep_online_ext,
	.avatarep_offline_ext1,
	.avatarep_offline_ext {
		height: clamp(28px, 8vw, 90px);
		width: clamp(28px, 8vw, 90px);
		max-width: 100%;
		margin-left: 6px;
	}
	.avatarep_online_ext2,
	.avatarep_offline_ext2 {
		height: clamp(14px, 4vw, 45px);
		width: clamp(14px, 4vw, 45px);
		margin-left: 6px;
	}
	.avatarep_divisor {
		margin-top: clamp(-32px, -9vw, -60px);
	}
	.avatarep_divisor_hov {
		margin-top: clamp(-28px, -8vw, -50px);
	}
	.avatarep_usern,
	.avatarep_usern_hov {
		max-width: calc(100vw - 80px);
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.avatarep_img_contributor,
	.avatarep_img,
	.avatarep_bg {
		width: clamp(18px, 5vw, 44px);
		height: clamp(18px, 5vw, 44px);
		max-width: 100%;
	}
	.avatarep_postbit,
	.avatarep_member {
		width: clamp(44px, 25vw, 100px);
		height: clamp(44px, 25vw, 100px);
		max-width: 100%;
	}
	.avatarep_participants {
		width: clamp(22px, 6vw, 44px);
		height: clamp(22px, 6vw, 44px);
		font-size: clamp(10px, 2.8vw, 18px);
	}
	.avatarep_fd {
		width: clamp(32px, 10vw, 40px);
		height: clamp(32px, 10vw, 40px);
	}
	.avatarep_fdl_img {
		width: clamp(14px, 4vw, 20px);
		height: clamp(14px, 4vw, 20px);
		margin-left: clamp(-28px, -8vw, -35px);
		margin-top: clamp(12px, 4vw, 25px);
	}
	.avatarep_uname {
		font-size: clamp(11px, 3.2vw, 15px);
	}
	.avatarep_memprofile {
		font-size: clamp(10px, 2.8vw, 11px);
	}
	.avatarep_data {
		font-size: clamp(10px, 2.8vw, 11px);
	}
}

/* Small phones */
@media screen and (max-width: 480px) {
	.avatarep_tavatar img {
		height: clamp(28px, 8vw, 80px);
		width: clamp(28px, 8vw, 80px);
		max-width: 100%;
	}
	.avatarep_tavatar_hov img {
		height: clamp(32px, 9vw, 40px);
		width: clamp(32px, 9vw, 40px);
		max-width: 100%;
	}
	.avatarep_online_ext1,
	.avatarep_online_ext,
	.avatarep_offline_ext1,
	.avatarep_offline_ext {
		height: clamp(36px, 10vw, 90px);
		width: clamp(36px, 10vw, 90px);
		max-width: 100%;
	}
	.avatarep_online_ext2,
	.avatarep_offline_ext2 {
		height: clamp(18px, 5vw, 45px);
		width: clamp(18px, 5vw, 45px);
	}
	.avatarep_profile {
		width: calc(100% - 8px);
	}
	.avatarep_usern,
	.avatarep_usern_hov {
		max-width: calc(100vw - 70px);
	}
	.avatarep_uprofile,
	.avatarep_uprofile_hov {
		padding: clamp(6px, 2vw, 11px);
	}
	.avatarep_postbit,
	.avatarep_member {
		width: clamp(50px, 28vw, 100px);
		height: clamp(50px, 28vw, 100px);
		max-width: 100%;
	}
	.avatarep_fdl_img {
		margin-left: clamp(-32px, -9vw, -35px);
	}
}

/* Tablets */
@media screen and (max-width: 768px) {
	.avatarep_tavatar img {
		max-width: 100%;
		height: auto;
		object-fit: cover;
	}
	.avatarep_tavatar_hov img {
		max-width: 100%;
		height: auto;
		object-fit: cover;
	}
	.avatarep_profile {
		max-width: min(340px, calc(100vw - 24px));
	}
	.avatarep_online_ext1,
	.avatarep_online_ext,
	.avatarep_offline_ext1,
	.avatarep_offline_ext {
		max-width: 100%;
	}
	.avatarep_postbit,
	.avatarep_member {
		max-width: 100%;
	}
}

/* Medium screens */
@media screen and (max-width: 992px) {
	.avatarep_profile {
		max-width: min(340px, calc(100vw - 32px));
	}
	.modal_avatar_hover {
		max-width: min(220px, calc(100vw - 32px));
	}
}

/* Large screens – cap max widths */
@media screen and (min-width: 993px) {
	.modal_avatar_hover {
		max-width: 220px;
	}
	.avatarep_profile {
		max-width: 340px;
	}
}

/* Touch-friendly tap targets and ensure popup is tappable on any touch device */
@media (hover: none) and (pointer: coarse) {
	.modal_avatar_hover,
	.modal_avatar {
		position: fixed !important;
		z-index: 2147483647 !important;
		pointer-events: auto !important;
		touch-action: manipulation;
	}
	.modal_avatar_hover *,
	.modal_avatar * {
		pointer-events: auto !important;
	}
	.avatarep_divisor,
	.avatarep_uprofile {
		pointer-events: auto !important;
		position: relative;
		z-index: 1;
	}
	.avatarep_tavatar,
	.avatarep_tavatar_hov {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.avatarep_memprofile a {
		min-height: 44px;
		display: block !important;
		align-items: center;
		padding: 12px 10px !important;
	}
	.avatarep_data a {
		min-height: 40px;
		padding: 8px 0 !important;
		display: block !important;
	}
	.avatarep_img_contributor,
	.avatarep_img,
	.avatarep_bg,
	.avatarep_participants {
		min-width: 36px;
		min-height: 36px;
	}
}

/* Short / landscape viewport */
@media screen and (max-height: 500px) and (orientation: landscape) {
	.modal_avatar_hover {
		max-height: 90vh;
		overflow-y: auto;
	}
	.avatarep_profile {
		max-height: 85vh;
		overflow-y: auto;
	}
}

/* Prevent overflow */
.avatarep_profile,
.modal_avatar_hover,
.avatarep_tavatar img,
.avatarep_tavatar_hov img,
.avatarep_img_contributor,
.avatarep_img,
.avatarep_bg,
.avatarep_postbit,
.avatarep_member,
.avatarep_participants {
	box-sizing: border-box;
}
.avatarep_tavatar img,
.avatarep_tavatar_hov img,
.avatarep_img_contributor,
.avatarep_img,
.avatarep_bg {
	max-width: 100%;
	object-fit: cover;
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
	.modal_avatar_hover {
		margin-left: max(0px, env(safe-area-inset-left));
		margin-right: max(0px, env(safe-area-inset-right));
	}
	@media screen and (max-width: 768px) {
		.modal_avatar_hover,
		.modal_avatar {
			padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
			box-sizing: border-box;
		}
	}
	.avatarep_profile {
		padding-left: max(9px, calc(9px + env(safe-area-inset-left)));
	}
	.avatarep_usern,
	.avatarep_usern_hov {
		right: max(10px, calc(10px + env(safe-area-inset-right)));
	}
}

#avatarep-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.avatarep-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.avatarep-content {
    position: relative;
    width: 80%;
    max-width: 600px;
    height: 80%;
    margin: 5% auto;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}

.avatarep-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.avatarep-close {
    position: absolute;
    top: 8px;
    right: 12px;
    color: #fff;
    font-size: 22px;
    text-decoration: none;
}

/* Avatarep popup modal – full screen and responsive on mobile */
@media screen and (max-width: 768px) {
    #avatarep-modal {
        inset: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: 100vw;
        max-height: 100vh;
        z-index: 2147483647;
        pointer-events: auto;
        touch-action: manipulation;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .avatarep-content {
        position: absolute;
        inset: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .avatarep-content iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: 100%;
        display: block;
    }
    .avatarep-close {
        position: fixed;
        top: max(8px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        z-index: 2147483647;
        min-width: 44px;
        min-height: 44px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: rgba(255,255,255,0.2);
        touch-action: manipulation;
    }
}