/*
 * Premium profile and chat decorations.
 *
 * These rules used to be printed by the extend_files addon. They live in the
 * core stylesheet now so profiles, badges and frames keep their layout when
 * that addon is disabled.
 */
@font-face {
	font-family: "Moon Font Awesome 5 Free";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("webfonts/fa-solid-900.woff2") format("woff2"), url("webfonts/fa-solid-900.woff") format("woff");
}
.webauthn_fa { display:inline-block; font-family:"Moon Font Awesome 5 Free"; font-style:normal; font-weight:900; line-height:1; text-rendering:auto; -webkit-font-smoothing:antialiased; }
.webauthn_fa.fa-fingerprint::before { content:"\f577"; }
.webauthn_external_login { margin-bottom:12px; }
.webauthn_login_break { clear:both; height:1px; margin:17px 0 14px; background:rgba(127,127,127,.3); }
.webauthn_autofill_username { position:fixed !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.webauthn_password_wrap { position:relative; }
.webauthn_password_wrap #webauthn_password { padding-left:43px; }
.webauthn_password_eye { position:absolute; left:5px; top:50%; width:34px; height:34px; margin-top:-17px; padding:0; color:#68777f; background:transparent; border:0; cursor:pointer; font-size:17px; }
.webauthn_login_status { min-height:18px; margin-top:7px; text-align:center; color:#69757d; }
.webauthn_login_status.webauthn_error { color:#c62828; }
.webauthn_login_status.webauthn_success { color:#087f8c; }
.webauthn_intro { text-align:center; padding:5px 5px 12px; }
.webauthn_big_icon { font-size:42px; color:#087f8c; margin-bottom:7px; }
.webauthn_notice,.webauthn_empty { padding:12px; margin:8px 0; border-radius:6px; background:rgba(127,127,127,.12); text-align:center; }
.webauthn_device { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; margin-top:7px; border:1px solid rgba(127,127,127,.2); border-radius:7px; }
.webauthn_device small { display:block; margin-top:3px; color:#888; }

#pro_social {
	right: auto;
	left: 0;
	top: 100%;
	width: 170px;
	z-index: 40;
}

.online_mark {
	border-left: 3px solid green;
	background: linear-gradient(45deg, #c1ffd2, transparent);
}

.inline {
	display: inline !important;
}

.rtl_fright {
	float: right;
}

.btn.btn-counter {
	box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) inset;
	border-radius: 3px;
	border: 1px solid #bbb;
	display: inline-block;
	height: 20px;
	line-height: 18px;
	padding: 0 8px;
	position: relative;
	font-size: 12px;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #dbdbdb;
	color: #666;
}

.btn.btn-counter {
	margin-right: 39px;
}

.btn.btn-counter::after,
.btn.btn-counter:hover::after {
	text-shadow: none;
}

.btn.btn-counter::after {
	border-radius: 3px;
	border: 1px solid #d3d3d3;
	background-color: #eee;
	padding: 0 8px;
	color: #777;
	content: attr(data-count);
	left: 100%;
	margin-left: 8px;
	margin-right: -13px;
	position: absolute;
	top: -1px;
}

.btn.btn-counter::before {
	transform: rotate(45deg);
	background-color: #eee;
	border: 1px solid #d3d3d3;
	border-right: 0;
	border-top: 0;
	content: '';
	position: absolute;
	right: -13px;
	top: 5px;
	height: 6px;
	width: 6px;
	z-index: 1;
}

.btn.btn-counter:hover,
.btn.btn-counter.active {
	text-shadow: 0 1px 0 #b12f27;
	background-color: #f64136;
	border-color: #b12f27;
}

.btn.btn-counter:active {
	box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2) inset;
}

.btn.btn-counter span {
	color: #f64136;
}

.btn.btn-counter:hover,
.btn.btn-counter:hover span,
.btn.btn-counter.active,
.btn.btn-counter.active span {
	color: #eee;
}

.btn.btn-counter:active span {
	color: #b12f27;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.frame_class {
	position: absolute;
	top: -7px;
	border-radius: 0;
	width: 50px !important;
	height: 54px !important;
}

.frame_class_pro {
	left: 50%;
	right: auto;
	position: absolute;
	top: -30px;
	border-radius: 0;
	width: 200px !important;
	height: 200px !important;
	margin: 0;
	transform: translateX(-50%);
	transform-origin: center center;
}

.moon_profile_avatar {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 0 auto 14px;
}

.moon_profile_avatar_framed {
	margin-bottom: 50px;
}

.moon_profile_avatar_image {
	width: 118px;
	height: 118px;
	border: 0;
	border-radius: 50%;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	box-shadow: 0 5px 10px #00000094;
}

.moon_profile_avatar .frame_class_pro {
	top: -38px;
	width: 160px !important;
	height: auto !important;
}

/* Animated premium frames use a taller 204x238 canvas. */
.moon_profile_avatar .profile_frame_portrait {
	top: -49px;
	width: 170px !important;
	height: auto !important;
}

/* g8 uses a lower circular opening inside its 204x238 animation canvas. */
.moon_profile_avatar .profile_frame_g8_webp {
	top: -58px;
	margin-left: 0;
}

.moon_profile_rank {
	margin-bottom: 4px;
}

.moon_profile_premium {
	margin-bottom: -3px;
}

/* Keep every profile action, including the like counter, inside mobile width. */
.moon_profile_actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	max-width: 100%;
}

.moon_profile_actions .tiny_button,
.moon_profile_actions .btn.btn-counter {
	margin-top: 8px;
	height: 23px !important;
	min-height: 23px;
	box-sizing: border-box;
	font-size: 11px;
	line-height: 21px;
	padding-top: 0;
	padding-bottom: 0;
	border-radius: 3px;
	vertical-align: middle;
}

.moon_profile_actions .btn.btn-counter::after {
	height: 23px;
	box-sizing: border-box;
	line-height: 21px;
	top: -1px;
}

.moon_profile_actions .btn.btn-counter::before {
	top: 7px;
}

.moon_profile_actions .moon_profile_like_readonly,
.moon_profile_actions .moon_profile_like_readonly:hover {
	cursor: default;
	background-color: #dbdbdb;
	border-color: #bbb;
	color: #666;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.moon_profile_actions .moon_profile_like_readonly:hover span {
	color: #f64136;
}

@media screen and (max-width: 480px) {
	.moon_profile_actions {
		gap: 3px;
		padding: 0 2px;
	}

	.moon_profile_actions .tiny_button {
		min-width: 0;
		padding-right: 6px;
		padding-left: 6px;
		font-size: 11px;
		white-space: nowrap;
	}

	.moon_profile_actions .btn.btn-counter {
		margin-right: 36px;
		padding-right: 6px;
		padding-left: 6px;
		font-size: 11px;
		white-space: nowrap;
	}

	.moon_profile_actions .btn.btn-counter::after {
		margin-left: 5px;
		padding-right: 6px;
		padding-left: 6px;
	}
}

/* Fill the whole profile tab bar and remove the baseline strip under/over tabs. */
#ex_menu > ul {
	display: flex;
	align-items: stretch;
	width: 100%;
}

#ex_menu > ul > .modal_menu_item {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px 6px;
	white-space: normal;
	line-height: 1.2;
	overflow-wrap: break-word;
}

@media screen and (max-width: 640px) {
	#ex_menu > ul > .modal_menu_item {
		padding: 8px 2px;
		font-size: 11px;
	}
}

.pad_frame_pro {
	padding-top: 25px;
}

.badge_class {
	position: absolute;
}

.badge_class img {
	height: 23px;
}

.chat_rank {
	margin: 0 3px;
}

.list_online {
	position: absolute;
	bottom: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	padding: 2px;
}

.moon_lang_ar .frame_class {
	right: -5px;
	left: auto;
}

.moon_lang_ar .badge_class {
	left: -9px;
	right: auto;
	top: -10px;
}

.moon_lang_ar .list_online {
	right: 0;
	left: auto;
}

.moon_lang_ltr .frame_class {
	left: -5px;
	right: auto;
}

.moon_lang_ltr .badge_class {
	right: -3px;
	left: auto;
	top: -4px;
}

.moon_lang_ltr .list_online {
	left: 0;
	right: auto;
}

/* Voice and video calls */
#private_call_btn {
	color: #35c8ff;
}

#private_call_btn:hover,
#private_call_btn:focus {
	color: #7de0ff;
	outline: none;
}

.call_overlay {
	position: fixed;
	inset: 0;
	z-index: 1400;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(5, 9, 16, .76);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.call_overlay.call_open {
	display: flex;
}

body.call_overlay_open {
	overflow: hidden !important;
}

.call_dialog {
	position: relative;
	width: min(520px, 100%);
	max-height: calc(100vh - 36px);
	max-height: calc(100dvh - 36px);
	overflow: auto;
	color: #f7f9fc;
	background: #151b26;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 20px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .52);
}

.call_header {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 72px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, .035);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.call_icon_btn {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	padding: 0;
	color: #cbd3df;
	background: rgba(255, 255, 255, .08);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.call_icon_btn:hover,
.call_icon_btn:focus {
	color: #fff;
	background: rgba(255, 255, 255, .16);
	outline: 2px solid rgba(53, 200, 255, .45);
}

.call_minimize_btn {
	display: none;
}

.call_mini_bubble {
	position: absolute;
	right: 18px;
	bottom: 86px;
	z-index: 1350;
	display: none;
	width: 88px;
	height: 88px;
	padding: 0;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	background: #111925;
	border: 3px solid rgba(88, 214, 255, .92);
	border-radius: 50%;
	box-shadow: 0 9px 30px rgba(0, 0, 0, .42), 0 0 0 4px rgba(53, 200, 255, .12);
	cursor: grab;
	transition: transform .16s ease, box-shadow .16s ease;
}

.call_mini_bubble.call_mini_visible {
	display: block;
}

.call_mini_bubble:hover,
.call_mini_bubble:focus {
	transform: scale(1.05);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 0 5px rgba(53, 200, 255, .18);
	outline: none;
}

.call_mini_bubble.call_mini_dragging {
	transform: scale(1.03);
	cursor: grabbing;
	transition: none;
}

.call_mini_bubble img {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	border-radius: 50%;
}

.call_mini_pulse {
	position: absolute;
	inset: -7px;
	z-index: 1;
	pointer-events: none;
	border: 2px solid rgba(83, 214, 255, .65);
	border-radius: 50%;
	animation: callMiniPulse 1.8s ease-out infinite;
}

.call_mini_type {
	position: absolute;
	top: -5px;
	right: -4px;
	z-index: 4;
	display: grid;
	width: 27px;
	height: 27px;
	place-items: center;
	pointer-events: none;
	color: #fff;
	background: #25b96d;
	border: 2px solid #111925;
	border-radius: 50%;
	font-size: 12px;
}

.call_mini_duration {
	position: absolute;
	bottom: -9px;
	left: 50%;
	z-index: 4;
	min-width: 55px;
	padding: 4px 7px;
	pointer-events: none;
	color: #fff;
	background: rgba(9, 14, 22, .94);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	transform: translateX(-50%);
}

.call_header_avatar {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	object-fit: cover;
	border-radius: 50%;
	background: #252d3a;
}

.call_header_identity {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
}

.call_header_identity strong {
	font-size: 16px;
}

.call_header_identity span {
	color: #aeb7c5;
	font-size: 12px;
}

.call_quality {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 6px 9px;
	color: #b8c1ce;
	background: rgba(255, 255, 255, .06);
	border-radius: 18px;
	font-size: 11px;
}

.call_quality_dot {
	width: 8px;
	height: 8px;
	background: #7e8794;
	border-radius: 50%;
}

.call_quality_excellent .call_quality_dot,
.call_quality_good .call_quality_dot {
	background: #34d17b;
	box-shadow: 0 0 0 3px rgba(52, 209, 123, .14);
}

.call_quality_poor .call_quality_dot {
	background: #ffb43c;
}

.call_quality_lost .call_quality_dot,
.call_quality_reconnecting .call_quality_dot {
	background: #ff5d68;
}

.call_quality_reconnecting .call_quality_dot {
	animation: callBlink 1s infinite;
}

.call_notice {
	display: none;
	margin: 12px 16px 0;
	padding: 9px 11px;
	color: #ffe7a8;
	background: rgba(255, 180, 60, .12);
	border: 1px solid rgba(255, 180, 60, .2);
	border-radius: 10px;
	font-size: 12px;
}

.call_notice.call_notice_show {
	display: block;
}

.call_notice.call_notice_error {
	color: #ffc1c5;
	background: rgba(255, 93, 104, .12);
	border-color: rgba(255, 93, 104, .22);
}

.call_view {
	display: none;
}

.call_view.call_view_active {
	display: block;
}

#call_chooser {
	padding: 18px;
}

.call_balance_line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, .055);
	border-radius: 12px;
}

.call_balance_line i {
	margin-left: 5px;
	color: #55d7ff;
}

.call_balance_line strong {
	color: #72dcff;
	font-size: 18px;
}

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

.call_type_card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 154px;
	padding: 16px 10px;
	color: #f8fbff;
	background: linear-gradient(160deg, rgba(52, 199, 255, .18), rgba(98, 86, 255, .12));
	border: 1px solid rgba(91, 208, 255, .25);
	border-radius: 16px;
	flex-direction: column;
	gap: 8px;
	cursor: pointer;
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.call_type_card:hover,
.call_type_card:focus {
	transform: translateY(-2px);
	background: linear-gradient(160deg, rgba(52, 199, 255, .25), rgba(98, 86, 255, .17));
	border-color: rgba(91, 208, 255, .62);
	outline: none;
}

.call_type_card:disabled {
	transform: none;
	opacity: .42;
	cursor: not-allowed;
}

.call_type_icon {
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	color: #72dcff;
	background: rgba(0, 0, 0, .18);
	border-radius: 50%;
	font-size: 22px;
}

.call_type_card > span:last-child {
	color: #aeb9c8;
	font-size: 12px;
}

.call_text_action {
	display: none;
	margin: 16px auto 0;
	padding: 7px 10px;
	color: #ff9da4;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.call_text_action.call_action_visible {
	display: block;
}

.call_privacy_hint {
	margin: 12px 0 0;
	color: #8f99a7;
	text-align: center;
	font-size: 11px;
}

.call_ringing_view,
.call_ended_view {
	min-height: 370px;
	padding: 42px 18px 28px;
	text-align: center;
}

.call_pulse_avatar {
	position: relative;
	width: 132px;
	height: 132px;
	margin: 0 auto 22px;
}

.call_pulse_avatar img {
	position: relative;
	z-index: 2;
	width: 132px;
	height: 132px;
	object-fit: cover;
	background: #252d3a;
	border: 4px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
}

.call_pulse_ring {
	position: absolute;
	inset: -2px;
	z-index: 1;
	background: rgba(53, 200, 255, .22);
	border-radius: 50%;
	animation: callPulse 1.7s infinite;
}

.call_ringing_view h3,
.call_ended_view h3 {
	margin: 0 0 8px;
	font-size: 21px;
}

.call_ringing_view p,
.call_ended_view p {
	min-height: 18px;
	margin: 0;
	color: #aab4c3;
}

.call_ringing_actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	margin-top: 36px;
}

.call_round_action {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #fff;
	background: transparent;
	border: 0;
	flex-direction: column;
	cursor: pointer;
}

.call_round_action i {
	display: grid;
	width: 62px;
	height: 62px;
	place-items: center;
	border-radius: 50%;
	font-size: 24px;
}

.call_round_action span {
	font-size: 12px;
}

.call_accept i {
	background: #22bd69;
}

.call_reject i {
	background: #e64e59;
	transform: rotate(135deg);
}

#call_active {
	padding-bottom: 16px;
}

.call_media_stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: radial-gradient(circle at center, #263246, #0d1119 72%);
}

.call_remote_video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #090c12;
}

.call_local_video {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	display: block;
	width: 112px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: #1f2733;
	border: 2px solid rgba(255, 255, 255, .7);
	border-radius: 12px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .35);
}

.call_audio_stage .call_remote_video,
.call_audio_stage .call_local_video {
	display: none;
}

.call_audio_avatar {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 14px;
}

.call_video_stage .call_audio_avatar {
	display: none;
}

.call_video_stage.call_remote_camera_off .call_remote_video {
	opacity: 0;
}

.call_video_stage.call_remote_camera_off .call_audio_avatar {
	display: flex;
}

.call_audio_avatar img {
	width: 126px;
	height: 126px;
	object-fit: cover;
	border: 4px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
}

.call_audio_wave {
	display: flex;
	align-items: center;
	height: 22px;
	gap: 4px;
}

.call_audio_wave i {
	display: block;
	width: 4px;
	height: 8px;
	background: #58d6ff;
	border-radius: 4px;
	animation: callWave 1s ease-in-out infinite;
}

.call_audio_wave i:nth-child(2) { animation-delay: .15s; }
.call_audio_wave i:nth-child(3) { animation-delay: .3s; }
.call_audio_wave i:nth-child(4) { animation-delay: .45s; }

.call_runtime_stats {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 5;
	display: flex;
	gap: 8px;
}

.call_runtime_stats span {
	padding: 5px 8px;
	color: #fff;
	background: rgba(0, 0, 0, .55);
	border-radius: 12px;
	font-size: 11px;
}

.call_resume_audio {
	display: none;
	width: calc(100% - 24px);
	margin: 10px 12px 0;
	padding: 9px;
	color: #fff;
	background: #377fbd;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
}

.call_resume_audio.call_resume_visible {
	display: block;
}

.call_audio_health {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 10px 2px;
}

.call_audio_health_item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 8px;
	border: 1px solid transparent;
	border-radius: 14px;
	font-size: 10px;
}

.call_audio_health_ok {
	color: #72e5ae;
	background: rgba(52, 209, 123, .1);
	border-color: rgba(52, 209, 123, .22);
}

.call_audio_health_wait {
	color: #f4cc72;
	background: rgba(240, 180, 55, .1);
	border-color: rgba(240, 180, 55, .22);
}

.call_audio_health_error {
	color: #ff939b;
	background: rgba(230, 78, 89, .1);
	border-color: rgba(230, 78, 89, .24);
}

.call_volume_control {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px 2px;
	font-size: 10px;
}

.call_volume_control label {
	white-space: nowrap;
}

.call_volume_control input[type="range"] {
	min-width: 80px;
	flex: 1 1 auto;
	accent-color: #31c3e5;
}

.call_volume_control output {
	min-width: 34px;
	direction: ltr;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.call_processing_row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	padding: 12px 10px 4px;
}

.call_processing_toggle,
.call_processing_fixed {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 8px;
	color: #aeb7c5;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	font-size: 10px;
}

.call_processing_toggle {
	cursor: pointer;
}

.call_processing_toggle.call_processing_unsupported {
	opacity: .58;
}

.call_processing_toggle.is_enabled,
.call_processing_fixed {
	color: #72e5ae;
	background: rgba(52, 209, 123, .1);
	border-color: rgba(52, 209, 123, .22);
}

.call_compatibility_box {
	margin: 8px 10px 0;
	padding: 8px;
	text-align: center;
	background: rgba(0, 0, 0, .14);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 10px;
}

.call_compatibility_box.is_enabled {
	background: rgba(52, 209, 123, .08);
	border-color: rgba(52, 209, 123, .28);
	box-shadow: inset 0 0 0 1px rgba(52, 209, 123, .06);
}

.call_compatibility_toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 12px;
	color: #d5dbe4;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px;
	cursor: pointer;
}

.call_compatibility_toggle.is_enabled {
	color: #72e5ae;
	background: rgba(52, 209, 123, .12);
	border-color: rgba(52, 209, 123, .3);
}

.call_compatibility_options {
	display: none;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 8px;
}

.call_compatibility_options.call_compatibility_visible {
	display: flex;
}

.call_push_to_talk_btn {
	display: none;
	width: 100%;
	max-width: 260px;
	margin: 9px auto 0;
	padding: 11px 12px;
	color: #fff;
	background: #1689a5;
	border: 0;
	border-radius: 22px;
	font-weight: bold;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
}

.call_push_to_talk_btn.call_push_to_talk_visible {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.call_push_to_talk_btn.is_talking {
	background: #29b66f;
	transform: scale(.98);
}

.call_compatibility_hint {
	margin: 7px 2px 0;
	color: #aeb7c5;
	font-size: 10px;
	line-height: 1.5;
}

.call_controls {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 18px;
	padding: 13px 12px 0;
}

.call_control_btn {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 62px;
	padding: 0;
	color: #eef2f7;
	background: transparent;
	border: 0;
	flex-direction: column;
	cursor: pointer;
}

.call_control_btn i {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	background: rgba(255, 255, 255, .12);
	border-radius: 50%;
	font-size: 18px;
}

.call_control_btn span {
	font-size: 10px;
}

.call_control_btn.is_off i,
.call_control_btn[aria-pressed="true"] i {
	background: #e9edf3;
	color: #202733;
}

.call_end_btn i {
	color: #fff;
	background: #e64e59;
	transform: rotate(135deg);
}

.call_ended_icon {
	display: grid;
	width: 78px;
	height: 78px;
	margin: 10px auto 22px;
	place-items: center;
	color: #ff8d95;
	background: rgba(230, 78, 89, .14);
	border-radius: 50%;
	font-size: 28px;
}

.call_ended_icon i {
	transform: rotate(135deg);
}

.call_ended_view .reg_button {
	margin-top: 28px;
}

.call_remote_audio {
	position: fixed;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: .01;
	pointer-events: none;
}

.call_blocks_panel {
	margin-top: 10px;
	padding: 10px;
	background: rgba(0, 0, 0, .05);
	border-radius: 8px;
}

.call_block_item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(128, 128, 128, .18);
}

.call_block_item:last-child {
	border-bottom: 0;
}

.call_block_item img {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 50%;
}

.call_block_item span {
	min-width: 0;
	flex: 1 1 auto;
}

.call_block_item button {
	padding: 5px 8px;
	color: #fff;
	background: #d94b55;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
}

@keyframes callPulse {
	0% { transform: scale(.92); opacity: .75; }
	70%, 100% { transform: scale(1.28); opacity: 0; }
}

@keyframes callWave {
	0%, 100% { height: 7px; opacity: .6; }
	50% { height: 22px; opacity: 1; }
}

@keyframes callBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: .25; }
}

@keyframes callMiniPulse {
	0% { transform: scale(.9); opacity: .8; }
	75%, 100% { transform: scale(1.18); opacity: 0; }
}

@media (max-width: 560px) {
	.call_overlay {
		align-items: flex-end;
		padding: 0;
	}

	.call_dialog {
		width: 100%;
		max-height: 100vh;
		max-height: 100dvh;
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 20px 20px 0 0;
	}

	.call_quality span:last-child {
		display: none;
	}

	.call_type_card {
		min-height: 138px;
	}

	.call_ringing_view,
	.call_ended_view {
		min-height: 360px;
	}

	.call_local_video {
		width: 88px;
	}

	.call_mini_bubble {
		right: 12px;
		bottom: 76px;
		width: 76px;
		height: 76px;
	}
}

@media (max-width: 370px) {
	.call_type_grid {
		grid-template-columns: 1fr;
	}

	.call_type_card {
		min-height: 112px;
	}

	.call_processing_fixed {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.call_pulse_ring,
	.call_mini_pulse,
	.call_audio_wave i,
	.call_quality_reconnecting .call_quality_dot {
		animation: none;
	}

	.call_type_card {
		transition: none;
	}
}
.reward_overlay{position:fixed;inset:0;z-index:2147482000;background:rgba(6,8,18,.78);display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(5px)}
.reward_overlay.reward_open{display:flex}.reward_dialog{position:relative;width:min(430px,100%);max-height:92vh;overflow:auto;background:linear-gradient(160deg,#20233d,#121425);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.reward_close{position:absolute;left:14px;top:14px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}.reward_hero{text-align:center}.reward_gift{display:inline-flex;width:68px;height:68px;align-items:center;justify-content:center;border-radius:50%;font-size:32px;color:#70d7ff;background:linear-gradient(135deg,rgba(26,169,255,.28),rgba(137,74,255,.28));box-shadow:0 0 30px rgba(64,182,255,.18)}
.reward_hero h2{margin:12px 0 6px}.reward_hero p{margin:0;color:#c8cade;line-height:1.7}.reward_balance{display:flex;align-items:center;gap:8px;margin:18px 0;padding:13px 16px;background:rgba(255,255,255,.07);border-radius:12px}.reward_balance strong{margin-right:auto;font-size:22px}.reward_balance i{color:#70d7ff}
.reward_progress{padding:14px;background:rgba(0,0,0,.18);border-radius:12px}.reward_progress_head{display:flex;justify-content:space-between}.reward_progress_track{height:8px;margin:11px 0;background:rgba(255,255,255,.1);border-radius:8px;overflow:hidden}.reward_progress_track span{display:block;height:100%;background:linear-gradient(90deg,#22c3ff,#8b5cff);border-radius:8px;transition:width .3s}.reward_progress p{margin:0;color:#c8cade}
.reward_notice{margin:14px 0;padding:11px;border-radius:10px;background:rgba(255,255,255,.07);line-height:1.6;text-align:center}.reward_notice.reward_ok{background:rgba(35,190,110,.16);color:#8ff0ba}.reward_notice.reward_error{background:rgba(231,75,75,.16);color:#ffaaaa}.reward_watch{width:100%;min-height:50px;border:0;border-radius:12px;background:linear-gradient(90deg,#168eea,#724ee8);color:#fff;font-size:15px;font-weight:bold;cursor:pointer}.reward_watch i{margin-left:7px}.reward_watch:disabled{opacity:.55;cursor:not-allowed}.reward_policy{font-size:12px;color:#adb1c7;line-height:1.7;margin:13px 2px 0}.reward_policy i{color:#7fd6ff}