@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&family=Lato:wght@100;300;400;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import 'bootstrap-grid.css';
@import 'microtip.css';

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

html,
body {
	background-color: #f4f6fa;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #25302B;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: #515365
}

a:hover {
	color: #515365;
}

h1 {
	font-size: 20px;
	color: #545454;
}

hr {
	margin-top: 1rem;
	border: 0;
	border-bottom: 1px solid #f5f5f5;
}

/* GLOBAL CLASSES*/

/* verification */
.verify {
	font-size: 17px;
	margin: 2px 5px 0px 10px;
	opacity: .8;
}

.verify:hover {
	opacity: 1;
}

/* wall images */
.img-elem {
	max-width: 100%;
}

/* admins */
.serverlist {
	position: fixed;
	float: left;
	text-align: left;
	left: 15px;
	bottom: 15px;
	font-size: 13px;
	padding: 10px;
	color: #008bc8;
	background: #fff;
	opacity: .3;
	transition: all ease .3s;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 5%);
	z-index: 1;
}

.serverlist__title {
	height: 20px;
	color: #515365;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 5px;
}

.serverlist:hover {
	opacity: 1;
}

/* float styles */
.left {
	float: left;
}

.right {
	float: right;
	margin-left: auto;
	order: 2;
}

/* visability */
.hidden {
	display: none;
	opacity: 0;
}

.visability {
	display: block;
	opacity: 1;
}

.clear {
	display: block;
	clear: both;
}

/* tooltip */
.tooltip {
	position: relative;
}

/* button */
.button,
.btn {
	display: inline-block;
	cursor: pointer;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: all .15s ease-in-out;
}

.btn {
	font-size: 14px;
	border-radius: 3px;
	padding: 8px 25px;
	box-shadow: 0px 2px 4px 0px rgb(0 129 198 / 10%);
	font-weight: 500;
}

.btn-primary {
	color: #fff;
	background-color: #4c637b;
	border-color: #4c637b;
}

.btn-primary:hover {
	color: #fff;
	background-color: #435a71;
	border-color: #435a71;
}

.btn-primary:focus {
	background-color: #3b5167;
}

.btn-panel-head {
	font-size: 11px;
}

.btn-random {
	padding: 10px 15px;
	font-size: 13px;
}

.btn-comments {
	font-size: 13px;
	padding: 5px 15px;
}

.btn-audio {
	color: #fff;
	background-color: #4c637b;
	border-color: #4c637b;
	margin-bottom: 10px;
	padding: 10px;
	box-shadow: none;
}

.btn-audio:hover {
	color: #fff;
	background-color: #435a71;
	border-color: #435a71;
}

.btn-audio:focus {
	background-color: #3b5167;
}

/* DIV textarea */
.textarea {
	cursor: text;
	width: 100%;
}

.textarea:empty::before {
	color: #ababab;
}

.textarea[data-placeholder]:not([data-placeholder=""]):empty::before {
	content: attr(data-placeholder);
}

.textarea:empty::before {
	content: attr(data-placeholder);
}

/* ONLINE or PFFLINE */
.online {
	position: absolute;
	display: block;
	background-color: #2cc185;
	border-radius: 50%;
	height: 13px;
	width: 13px;
	border: 2px solid #FFF;
}

.offline {
	position: absolute;
	display: block;
	background-color: #545454;
	border-radius: 50%;
	height: 13px;
	width: 13px;
	border: 2px solid #FFF;
}

/* sizes */
.h-100 {
	height: 100%;
}

.w-100 {
	width: 100%;
}

/* positions */
.position-a {
	position: absolute;
}

/* borders */
.border-r {
	border-right: 1px solid #f5f5f5;
	padding-right: 0;
}

/* padding */
.padding-l {
	padding-left: 0;
}

/* MODAL */
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}

.modal-header {
	display: block;
	font-size: 18px;
	color: #adb2ad;
	background: #f7f9f7;
	padding: 25px 30px;
}

button.close {
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
}

button.close {
	padding: 0;
	background-color: transparent;
	border: 0;
	-webkit-appearance: none
}

.close {
	float: right;
	font-size: 30px;
	font-weight: bold;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .2;
	filter: alpha(opacity=20);
}

.modal-title {
	margin: 0;
	line-height: 1.42857143;
	font-size: 16px;
}

.close {
	float: right;
	font-size: 1.5rem;
	color: #000;
	text-shadow: 0 1px 0 #FFF;
	opacity: .5
}

.close:focus,
.close:hover {
	color: #a4a4a4;
	text-decoration: none;
	opacity: .75;
}

.close:not(:disabled):not(.disabled) {
	cursor: pointer
}

.modal {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	outline: 0
}

.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}

.modal-dialog {
	position: relative;
	width: auto;
	margin: .5rem;
	max-width: 800px;
	pointer-events: none
}

.modal.fade .modal-dialog {
	-webkit-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
	transition: transform .3s ease-out, -webkit-transform .3s ease-out, -o-transform .3s ease-out;
	-webkit-transform: translate(0, -25%);
	-o-transform: translate(0, -25%);
	transform: translate(0, -25%)
}

.modal.show .modal-dialog {
	-webkit-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0)
}

.modal-dialog-centered {
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	min-height: calc(100% - (.5rem * 2))
}

.modal-content,
.modal-header {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox
}

.modal-content {
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-clip: padding-box;
	outline: 0
}

.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000
}

.modal-backdrop.fade {
	opacity: 0
}

.modal-backdrop.show {
	opacity: .5
}

.modal-header {
	display: flex;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	flex-direction: row-reverse;
	border-radius: 5px 5px 0 0;
}

.modal-header .close {
	padding: 1rem;
	margin: -1rem -1rem -1rem auto
}

.modal-title {
	margin-bottom: 0
}

.modal-body {
	padding: 20px 30px 30px;
	position: relative;
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	background-color: #FFF;
	border-radius: 0 0 5px 5px;
}

.modal-footer {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end
}

.modal-footer>:not(:first-child) {
	margin-left: .25rem
}

.modal-footer>:not(:last-child) {
	margin-right: .25rem
}

.img img {
	border-radius: 0 0 5px 5px;
}

@media (min-width:576px) {
	.modal-dialog {
		margin: 1.75rem auto
	}

	.modal-dialog-centered {
		min-height: calc(100% - (1.75rem * 2))
	}

	.modal-sm {
		max-width: 300px
	}
}

@media (min-width:992px) {
	.modal-lg {
		max-width: 750px
	}
}

/* IMAGE MODAL */
.img_upload {
	padding: 0px 0px 15px 0px;
	background: #d9e0e8;
	color: #66819e;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	line-height: 105%;
	position: relative;
	width: 100%;
}

.img_upload:hover {
	background: #CDD7E2;
	color: #59799B;
}

.img_photo {
	float: left;
	width: 148px;
	height: 87px;
	margin-right: 6px;
	margin-bottom: 6px;
	cursor: pointer;
}

.img_photo .photo {
	background: #F1F1F1;
	text-align: center;
	width: 150px;
	height: 87px;
	overflow: hidden;
}

.img_photo img {
	width: 100%;
	min-height: 87px;
	transition: opacity 500ms ease;
	opacity: 0;
}

.new_h1 {
	color: #45688E;
	border-bottom: 1px solid #DEE5EB;
	width: 100%;
	margin-top: 10px;
	padding-left: 15px;
	font-size: 14px;
	font-weight: bold;
}

.photo_res {
	padding: 10px;
}

/* HEADER */
.header {
	background-color: #FFF;
	/*border-bottom: 2px solid #f5f5f5;*/
	box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 5%);
}

.headbar {
	height: 60px;
	width: 100%;
	display: flex;
	align-items: center;
	line-height: 60px;
}

/* header logo */
.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all ease .3s
}

.logo:hover {
	background-color: rgba(0, 0, 0, .07);
}

.logo__image {
	height: 40px;
	width: 40px;
}

.logo__text {
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	padding: 0 10px;
}

/* header search */
.headbar__search {
	display: flex;
	margin-left: 15px;
	position: relative;
	padding: 10px 5px;
	transition: transform 0.5s;
}

.icon-headbar__search {
	font-size: 16px;
	color: #515365;
}

.form-headbar__search {
	width: 100%;
	border: 0;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
}

/* border effect */
.border-effect {
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	top: 100%;
	background: #515365;
	transform: scaleX(0);
	transition: transform 0.5s;
	transform-origin: 0% 50%;
}

.form-headbar__search:focus+.border-effect,
.headbar__search:focus .border-effect {
	transform: scaleX(1);
}


.headbar__menu {
	padding: 0;
	margin: 0;
}

.headbar__menu .hidden {
	display: none;
}

/* audio header player */
.headbar__player {
	display: flex;
	cursor: pointer;
	width: auto;
	padding: 0 13px 0 0;
}

.headbar__player:hover {
	background-color: rgba(0, 0, 0, .07);
}

.headbar__playerbtn {
	font-size: 1.077rem;
	padding: 0 13px;
	outline: 0;
	color: #515365;
	cursor: pointer;
}

.headbar__playerbtn i {
	padding: 0 3px;
}

.headbar__playerbtn i:hover {
	opacity: .8;
}

.headbar__playersong {
	margin-left: 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 150px;
}

.headbar__audio_wrap {
	display: flex;
	align-items: center;
	position: relative;
	height: 60px;
}

.headbar__audiobtn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 15px;
	font-size: 1.2rem;
	color: #acb3bd;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.headbar__audiobtn:hover {
	color: #515365;
	background-color: #f7f9fa;
}

/* Old #audio_popup_container removed — replaced by #music-modal-root */


/* header menu */
.headbarmenu {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0;
	list-style: none;
	padding: 0;
}

.headbarmenu__item {
	display: inline-flex;
	position: relative;
	transition: all .3s;
	float: left;
}

.headbarmenu__item a {
	padding: 0 15px;
}

.headbarmenu__item i {
	min-width: 30px;
	text-align: center;
	font-size: 18px;
	color: #515365;
}

.headbarmenu__uerphoto {
	width: 30px;
	height: 30px;
	display: block;
	float: left;
	border-radius: 50%;
	margin: 15px 10px 15px 0;
}

.headbarmenu__item:hover {
	background-color: rgba(0, 0, 0, .07);
}

/*.headbarmenu__item:hover > .headmenuchild {display: block;}*/

/*header menu notify*/
.headmenunotify {
	background-color: #FFFFFF;
	width: 340px;
	position: absolute;
	top: 60px;
	right: 0;
	display: none;
	z-index: 999;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 2px 8px 2px rgb(0 0 0 / 5%);
}

.headmenunotify__title {
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: block;
	padding: 0 15px;
	border-bottom: 1px solid #F1F4F7;
}

.headmenunotify__content {
	height: 300px;
	overflow-y: scroll;
}

.headmenunotify__content::-webkit-scrollbar {
	display: none;
}

.headmenunotify__footer {
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: block;
	border-top: 1px solid #F1F4F7;
}

.headmenunotify__footer a {
	width: 100%;
	display: block;
}

.headmenunotify__footer a:hover {
	background-color: rgba(0, 0, 0, .07);
}

.headmenunotify__footer a:last-child:hover {
	border-radius: 0 0 5px 5px;
}

/*notify*/
.notify-block {
	line-height: 20px;
	border-bottom: 1px solid #f5f5f5;
	padding: 0px 10px;
}

.notify-block:hover {
	background-color: rgba(0, 0, 0, .07);
}

.notify-block a {
	display: block;
	padding: 10px 5px;
}

.notifyblock__message img {
	max-width: 50px;
	border-radius: 50%;
	float: left;
}

.notifyblock__content,
.notifyblock-content {
	padding: 5px 0 5px 55px;
	color: #515365;
}

.notifyblock-content__title {
	font-weight: bold;
}

/*header menu child*/
.headmenuchild {
	background-color: #FFFFFF;
	width: 200px;
	position: absolute;
	padding: 0;
	top: 60px;
	right: 0;
	display: none;
	list-style: none;
	z-index: 999;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 2px 8px 2px rgb(0 0 0 / 5%);
}

.headmenuchild__item {
	line-height: 3.5;
	cursor: pointer;
}

.headmenuchild__item a {
	display: block;
	padding: 0 15px;
	border-bottom: 1px solid #f5f5f5;
}

.headmenuchild__item:hover {
	background-color: rgba(0, 0, 0, .07);
}

.headmenuchild__item a:last-child {
	border-bottom: 0;
}

.headmenuchild__item:last-child:hover {
	border-radius: 0 0 5px 5px;
}

.headmenuchild__balance {
	float: right;
	font-weight: 500;
	padding: 0 5px;
}


/* main */
.main {}

/* aside menu*/
.aside {
	width: 100%;
	height: auto;
	margin-top: 25px;
	background-color: #FFF;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 5%);
}

.aside-small {
	width: 51px;
	margin: 25px auto;
}

.asidemenu {
	width: 100%;
	line-height: 40px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.asidemenu__item {
	transition: all ease .3s;
}

.asidemenu__item:hover {
	background-color: rgba(0, 0, 0, .07);
}

.asidemenu__item:first-child:hover {
	border-radius: 5px 5px 0 0;
}

.asidemenu__item:last-child:hover {
	border-radius: 0 0 5px 5px;
}

.asidemenu__item a {
	display: block;
	border-bottom: 1px solid #f5f5f5;
}

.asidemenu__item i {
	font-size: 17px;
	height: 50px;
	width: 50px;
	padding: 17px;
}

.asidemenu__item span {}

.asidemenu__item--disabled {
	color: #b85c66;
	background: rgba(220, 74, 92, 0.06);
	cursor: not-allowed;
	position: relative;
}

.asidemenu__item--disabled:hover {
	background: rgba(220, 74, 92, 0.11);
}

.asidemenu__disabled {
	display: block;
	border-bottom: 1px solid #f5e6e8;
	color: #b85c66;
	opacity: 0.82;
}

.asidemenu__item--disabled i,
.asidemenu__item--disabled .asidemenu__text {
	color: #b85c66;
}

.asidemenu__item--disabled::after {
	content: attr(data-tooltip);
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
	padding: 7px 12px;
	background: #2f3746;
	color: #fff;
	border-radius: 7px;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
	z-index: 100;
}

.asidemenu__item--disabled::before {
	content: '';
	position: absolute;
	left: calc(100% + 4px);
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-right-color: #2f3746;
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, visibility .16s ease;
	z-index: 101;
}

.asidemenu__item--disabled:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

.asidemenu__item--disabled:hover::before {
	opacity: 1;
	visibility: visible;
}

.dev-unavailable {
	max-width: 560px;
	margin: 56px auto;
	padding: 34px 28px;
	text-align: center;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.dev-unavailable__icon {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	border-radius: 50%;
	background: rgba(220, 74, 92, 0.1);
	color: #b85c66;
	font-size: 22px;
}

.dev-unavailable__title {
	font-size: 20px;
	font-weight: 600;
	color: #252b36;
	margin-bottom: 8px;
}

.dev-unavailable__text {
	font-size: 14px;
	line-height: 1.55;
	color: #667085;
}

.group-create-modal {
	padding: 20px 22px 22px;
	background: #fff;
}

.group-create-modal__lead {
	margin-bottom: 18px;
	padding: 12px 14px;
	border: 1px solid #edf0f5;
	border-radius: 8px;
	background: #f8fafc;
	color: #667085;
	font-size: 13px;
	line-height: 1.45;
}

.group-create-modal__label {
	display: block;
	margin: 0 0 7px;
	color: #344054;
	font-size: 13px;
	font-weight: 600;
}

.group-create-modal__input,
.group-create-modal__textarea {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 15px;
	padding: 10px 12px;
	border: 1px solid #d8dee8;
	border-radius: 8px;
	background: #fff;
	color: #1f2937;
	font-size: 14px;
	line-height: 1.45;
	outline: none;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.group-create-modal__textarea {
	min-height: 118px;
	resize: vertical;
}

.group-create-modal__input:focus,
.group-create-modal__textarea:focus {
	border-color: #5181b8;
	box-shadow: 0 0 0 3px rgba(81, 129, 184, 0.13);
	background: #fff;
}

.group-create-modal__input::placeholder,
.group-create-modal__textarea::placeholder {
	color: #98a2b3;
}

.group-create-modal__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

.group-create-modal__submit {
	min-width: 132px;
	padding: 9px 18px;
	border-radius: 8px;
	font-weight: 600;
}

/* SECTION CONTENT */
.section {}

.section__content {
	margin-top: 25px;
}

/* PANEL ITEM */
.panel {
	background-color: #FFF;
	border-radius: 5px;
	margin-bottom: 20px;
	box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 5%);
}

.panel__head {
	text-transform: uppercase;
	font-size: 1.385rem;
	font-weight: 400;
	color: #3d3d3d;
	padding: 20px 0 15px;
	margin: 0 20px;
	display: block;
	border-bottom: 1px solid #f5f5f5;
	text-decoration: none !important;
}

.panel__body {
	padding: 17px 20px;
}

.panel-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: 28px 20px;
	text-align: center;
	color: #64748b;
}

.panel-empty-state__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 12px;
	border-radius: 14px;
	background: #f1f5f9;
	color: #94a3b8;
	font-size: 20px;
	line-height: 1;
}

.panel-empty-state__title,
.text-not-search {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: #475569;
}

.panel__bottom {
	width: 100%;
}

.panel__bottom-flex-center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.panel__head-cursor-pointer {
	cursor: pointer;
}

/*edit button */
.paneledit {
	color: #515365;
	cursor: pointer;
	position: relative;
	transition: all ease .3s;
}

.paneledit i {
	opacity: .8;
}

.paneledit i:hover {
	opacity: 1;
	transition: all ease .3s;
}

.paneledit:hover>.paneledit i {
	opacity: 1;
	transition: all ease .3s;
}

.paneledit:hover>.paneledit__section {
	display: block;
}

.paneledit__section {
	display: none;
	background-color: #FFF;
	width: 150px;
	position: absolute;
	border-radius: 5px;
	right: -10px;
	list-style: none;
	z-index: 999;
	border: 1px solid #f5f5f5;
	box-shadow: 0 0 8px 2px rgb(0 0 0 / 5%);
}

.paneledit__item {
	padding: 12px 15px;
	transition: all ease .2s;
}

.paneledit__item:hover {
	background-color: rgba(0, 0, 0, .07);
	transition: all ease .3s;
}

.paneledit__item:first-child:hover {
	border-radius: 5px 5px 0 0;
}

.paneledit__item:last-child:hover {
	border-radius: 0 0 5px 5px;
}

.paneledit__section-friend-section {
	padding: 5px 0px;
}

.paneledit__item-friend-section {
	border-radius: 0;
}

.paneledit-comments-hidden {
	display: none;
	opacity: 0;
}


/* NEWS SECTION */
.TESTITEM img {
	width: 50px;
	height: 50px;
	border-radius: 50%
}


/* WALL ITEM */
.wallitem {
	position: relative;
	background-color: #FFF;
	padding: 25px 25px 25px 25px;
	min-height: 85px;
	border-radius: 5px;
}

/* TEXTAREA */
.form {
	margin-bottom: 1.3rem;
}

.form__textarea {
	border: 0;
	background: #fff;
	padding: 8px 9px;
	border-bottom: 1px solid #f5f5f5;
}

.form__textarea-size {
	min-height: 110px;
}

.autosize {
	resize: none;
	overflow: hidden;
}

/* attachments under textarea*/
.wallattachment {}

.wallattachment__icon {
	font-size: 1.5rem;
	color: #515365;
	padding: 5px 0px 1px 5px;
	margin: 0px 15px 0 0px;
	cursor: pointer;
}

.wallattachment__icon:hover {
	opacity: .8;
}

/* wall main content */
.wallitem__header {}

.wallitem__header-flex-center {
	display: flex;
	align-items: center;
	justify-content: end;
}

.wallitem__ava {
	width: 35px;
	height: 35px;
	display: block;
	border-radius: 50px;
	overflow: hidden;
	vertical-align: middle;
}

.wallitem__subheader {
	display: block;
	padding: 0 0 0 15px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.wallitem__autor {
	font-weight: 500;
	font-size: 15px;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wallitem__date {
	color: #ababab;
	font-size: 13px;
}

.wallitem__summary {
	margin: 15px 0;
	word-break: break-all;
}

.wallitem__text {
	padding: 5px 0 15px;
}

.wallitem__img {
	max-width: 100%;
}


/* wall likes item */
.wallitem__actions {}

.actlikes {
	width: 30px;
	height: 30px;
	display: inline-block;
	margin-left: -0.5rem;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 0 3px #fff;
}

.actlikes:first-child {
	margin-left: 0;
}

.actlikes-photo {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

/* wall reactions item*/
.wallitem__reactions {
	margin-top: 1rem;
}

.wallitem__reactions-flex-space {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wallreactions {
	display: flex;
	font-size: 1.2rem;
	color: #515365;
}

.wallreactions__item {
	padding: 5px 0px 1px 5px;
	margin: 0px 15px 0 0px;
	cursor: pointer;
}

.wallreactions__item:hover {
	opacity: .8
}

.wallreactions .wallreactions__view:hover {
	opacity: 1;
}

.wallreactions__like {}

.activelike {
	color: #ff3347;
}

.wallreactions__comment {}

.wallreactions__reply {}

.wallreactions__report {}

.wallreactions__view {}

.wallreactions__view {
	cursor: auto;
}

/* wall comments under post */
.comments {
	border-top: 1px solid #f5f5f5;
}

.comments__item {
	display: flex;
	flex-direction: row;
	padding: 15px 25px;
}

.comments__item:hover>.paneledit-comments-hidden {
	display: block;
	opacity: 1;
	transition: all ease .2s;
}

.comments_img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
}

.comment__info {
	display: flex;
	flex-direction: column;
	margin-left: 10px;
	color: #515365;
}

.comment__autor {
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
}

.comment__text {
	margin-top: 5px;
	word-break: break-all;
}

.comment__bottom {
	margin-top: 5px;
}

.comment__date {
	color: #ababab
}

.comment__reply {
	color: #515365;
	margin-left: 5px;
	cursor: pointer;
}

.comment__reply:hover {
	opacity: .8;
}

/* wall comments textarea */
.commentsbox {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-top: 1px solid #f5f5f5;
	padding: 15px 15px 10px 15px;
}

.commentsbox__ava img {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	cursor: pointer;
}

.commentsbox__textarea {
	width: 100%;
	min-height: 34px;
	margin: 0 15px;
}

.commentsbox__input {
	min-height: 34px;
	padding: 8px;
}

.contentsbox__button {}


/* RIGHT SIDE SECTION */

/* right menu selector */
.selectorblock {
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 15px 0;
}

.selectorblock__item {
	padding: 10px 23px;
	border-left: 2px solid #fff0;
	font-weight: bold;
}

.selectorblock__item:hover {
	border-left: 2px solid #4c637b;
	background-color: #f4f6f4;
}

.selectorblock .active {
	border-left: 2px solid #4c637b;
	background-color: #f4f6f4;
}

/* right menu random users */
.userview {
	display: flex;
	flex-direction: column;
}

.userview__item a {
	display: flex;
	align-items: center;
	margin: 12px 0;
	transition: all 0.1s;
}

.userview_ava {
	height: 50px;
	width: 50px;
}

.userview_ava img {
	border-radius: 50px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.userview__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3px 7px;
}

.userview__name {
	width: 130px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.userview__year {
	color: #ababab;
}

.btn-random i {
	margin: 0;
	padding: 0;
}

/* right menu random groups */
.groupview {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.groupview__item {
	width: auto;
	cursor: pointer;
	position: relative;
	margin-right: 12px;
}

.groupview__item:last-child {
	flex-grow: 1;
}

.groupview__image {
	border-radius: 50%;
	width: 55px;
	height: 55px;
}

/* right menu copyright */
.copyright {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.copyright__item {
	font-size: 14px;
}

.copyright__item:hover {
	opacity: 0.9
}


/* PROFILE SECTION */
.userdisplay {
	background-color: #FFF;
	border-radius: 5px;
	margin-bottom: 30px;
	box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 5%);
}

/* profile cover section */
.userdisplay .cover {
	height: 300px;
	border-radius: 5px 5px 0 0;
}

.userdisplay__cover {
	position: relative;
	max-height: 290px;
	border-radius: 5px 5px 0 0;
}

.userdisplay__cover:hover .userdisplay__coverbtn {
	opacity: .8;
}

.userdisplay__coverbtn {
	position: absolute;
	right: 23px;
	height: 50px;
	width: 50px;
	top: 25px;
	line-height: 3.2;
	border-radius: 50px;
	text-align: center;
	cursor: pointer;
	background: #191818ad;
	transition: all 0.2s;
	color: #ffff;
	opacity: 0;
	font-size: 15px;
}

.userdisplay__coverbtn:hover {
	background: #191818;
	height: 55px;
	width: 55px;
	top: 20px;
	right: 20px;
	font-size: 16px;
	line-height: 3.3;
}

/* profile status in bottom cover */
.userdisplay__status {
	position: relative;
	top: -31px;
	background: #00000094;
	color: #fff;
	padding: 7px 0;
	padding-left: 240px;
}

/* EDIT STATUS */
#edit-status {
	display: none;
	position: fixed;
	height: 100%;
	width: 100%;
	background: #00000094;
	z-index: 9999;
}

.box-status {
	top: 38%;
	margin: auto;
	position: relative;
	width: 38%;
	border-radius: 3px;
}

.box-status .close-box:hover {
	opacity: 1;
}

.box-status .close-box {
	float: right;
	color: #fff;
	right: -36px;
	position: relative;
	opacity: 0.8;
	transition: all 0.2s;
}

.box-status textarea {
	resize: none;
	overflow: hidden;
	min-height: 120px;
	padding: 20px;
	border-radius: 3px;
	border: 0;
	box-shadow: 0 2px 12px 2px rgba(0, 0, 0, 0.22);
}


.status {}

.status_text {
	cursor: pointer;
	z-index: 5;
	font-weight: bold;
}

.status__button {
	position: relative;
	font-size: 19px;
	color: #FFF;
	margin: -2px 15px 0 0;
	cursor: pointer;
}

.status__button:hover {
	opacity: .8;
}

/* profile user inform status*/
.userdisplay__bottom {
	position: relative;
	padding: 20px;
}

.userstatus {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.userstatus__item {
	border-right: 1px solid #d9d9d9;
	min-width: 153px;
	text-align: center;
	padding: 20px 0;
	color: #333;
	cursor: pointer;
}

.userstatus__item:last-child {
	border-right-width: 0;
}

.userposts__count {
	display: block;
	text-align: center;
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: .5rem;
}

.userposts__title {
	display: block;
	text-align: center;
	font-size: 1.1rem;
	text-transform: uppercase;
	line-height: 1;
}

/* profile avatar section */
.userprofile {
	position: absolute;
	left: 50px;
	top: -118.67px;
	border-radius: 50%;
}

.userprofile__name {
	font-size: 2.30769rem;
	line-height: 1;
	display: flex;
	align-items: center;
}

.setphoto {
	position: absolute;
	z-index: 10;
	top: 95px;
	left: 100px;
}

.setphoto__icon,
.setphoto_dell span,
.setphoto_thumb span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: #515365;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.setphoto__icon:hover,
.setphoto_dell span:hover,
.setphoto_thumb span:hover {
	background: #5181b8;
	transform: scale(1.1);
}

.setphoto_dell,
.setphoto_thumb {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	transition: all 0.25s ease;
}

.setphoto__yesava:hover > .setphoto_dell {
	top: -32px;
	left: 8px;
	visibility: visible;
	opacity: 1;
}

.setphoto__yesava:hover > .setphoto_thumb {
	top: 6px;
	left: -32px;
	visibility: visible;
	opacity: 1;
}

.profile__ava {}

.profile__img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	z-index: 5;
}

.profile__online {
	height: 16px;
	width: 16px;
	bottom: 10px;
	right: 10px;
	top: auto;
	left: auto;
	margin: 0;
}

/* RIGHT PROFILE SECTION */

/* about user */
.userinfo {
	padding: 0 10px;
}

.userinfo__item {
	padding: 0 0 15px 0;
	color: #515365;
}

.userinfo__icon {
	font-size: 19px;
	height: 20px;
	width: 20px;
}

.userinfo__span {
	font-size: 16px;
	margin-left: 15px
}

/* user friends */
.userfriends {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.userfriends__item {
	width: auto;
	cursor: pointer;
	position: relative;
}

.userfriends__image {
	border-radius: 50%;
	width: 55px;
	height: 55px;
}

/* user friends buttons */
.userbuttons {
	padding: 0 10px;
}

.userbuttons hr {
	margin-bottom: 1rem;
	margin-top: .5rem;
}

.userbuttons__item {
	cursor: pointer;
	padding: 0 0 15px 0;
	color: #515365;
	opacity: 1;
}

.userbuttons__item:hover {
	opacity: .8;
}

.userbuttons__icon {
	font-size: 19px;
	height: 20px;
	width: 20px;
}

.userbuttons__span {
	font-size: 16px;
	margin-left: 15px
}

/* FRIENDS or GROUP PAGE SECTION */

/* panel section */
.panelmenu {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}

.panelmenu__selector {
	padding: 15px 0 14px;
}

.panelmenu__selector .active {
	border-bottom: .14rem solid #CCC;
}

.panelmenu__link {
	font-size: 14px;
	padding: 20px 10px 14px 10px;
}

.panelmenu__link:hover {
	border-bottom: .14rem solid #dadada;
}

.panelmenu__link:not(:first-child):last-child {
	margin-left: 5px;
}

.panelmenu__span {}

.panelmenu__span:not(:first-child):last-child {
	font-size: 13px;
	color: #ababab;
	margin-left: 3px;
}

.panelmenu-albums {
	padding: 20px 0 15px;
}

.panelmenu-albums-inside {
	padding: 12px 0 7px;
	justify-content: end;
}

.panelmenu__rowicon {
	display: inline;
	color: #a2a2a2;
	padding: 0 10px;
	font-size: 13px;
	margin: 19px 4px 17px 0px;
}

.panelmenu__rowlink {
	cursor: pointer;
}

.panelmenu__rowlink:hover {
	text-decoration: underline;
}



/* right button "search" */
.panelmenu__button {}

.panelmenu__btn {}

/* panel search section */
.panelsearch {
	position: relative;
}

.panelsearch__textarea {
	background: #eff3f5;
	margin: 0;
	border-radius: 5px;
	overflow: hidden;
	padding: 10px 35px 10px 20px;
	white-space: nowrap;
}

.panelsearch__icon {
	font-size: 20px;
	color: #758690;
	background-color: #eff3f5;
	position: absolute;
	cursor: pointer;
	width: 36px;
	height: 36px;
	padding: 9px;
	border-radius: 5px;
}

.panelsearch-main-panel {}

.panelsearch__icon-friends-panel {
	right: 10px;
	top: 0px;
}

.panelsearch-messges-panel {
	padding: 20px;
	height: 78px;
	border-bottom: 1px solid #f5f5f5;
	background-color: #FFF;
}

.panelsearch__icon-messges-panel {
	right: 20px;
	top: 20px;
}

/* panel item in section */
.panelsection__item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 20px 10px 10px 10px;
	border-bottom: 1px solid #f5f5f5;
}

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

.panelsection__ava {
	cursor: pointer;
	display: inline-block;
}

.panelsection__img {
	border-radius: 50px;
	width: 95px;
	height: 95px;
}

.panelsection__online {
	margin: -90px 0 0 78px;
}

.panelsection__info {
	padding: 0 0;
	margin: 13px 0 0 16px;
	display: inline-block;
	color: #515365;
}

.panelsection__name {
	display: block;
	font-weight: 500;
	font-size: 14px;
}

.panelsection__msg {
	font-weight: 400;
	cursor: pointer;
	font-size: 13px;
	padding: 4px 0px;
	margin-top: 3px;
}

.panelsection__msg:hover {
	text-decoration: underline;
}

.panelsection__groupinfo {
	font-weight: 400;
	cursor: pointer;
	font-size: 13px;
	display: flex;
	flex-direction: column;
	padding: 4px 0px;
	margin-top: 3px;
}

.panelsection__groupinfo span:last-child {
	margin-top: 7px;
}



/* MESSAGES PAGE SECTION */

/* messages section */
.messagespanel {
	position: relative;
	min-height: 600px;
	max-height: 800px;
}

.messagespanel .hidden {
	display: none;
	opacity: 0;
}

/* friends item in section */
.tabmessages {
	background-color: #f9fbfc;
	border-radius: 5px 0 0 5px;
}

.tabmessages__item {
	display: flex;
	transition: all ease .2s;
	cursor: pointer;
	flex-direction: row;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #f5f5f5;
}

.tabmessages__item:hover {
	background-color: rgba(0, 0, 0, .07);
	transition: all ease .2s;
}

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

.tabmessages__item .paneledit {
	opacity: 0;
}

.tabmessages__item:hover .paneledit {
	opacity: 1;
}

.tabmessages__ava {
	cursor: pointer;
	display: flex;
	align-items: center;
}

.tabmessages__img {
	border-radius: 50px;
	width: 45px;
	height: 45px;
}

.tabmessages__online {
	margin: -30px 0 0 33px;
}

.tabmessages__info {
	padding: 0 0;
	margin: 0px 0 0 16px;
	display: inline-block;
	color: #515365;
}

.tabmessages__name {
	display: block;
	font-weight: 500;
	font-size: 14px;
	display: flex;
	align-items: center;
}

.tabmessages__verify {
	color: #4c637b;
	margin: 0 0 0 5px;
}

.tabmessages__msg {
	font-weight: 400;
	font-size: 13px;
	padding: 4px 1px;
	margin-top: 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 197px;
}

/* ── Табы Диалоги/Беседы ── */
.msg-tabs {
	display: flex;
	border-bottom: 1px solid #e7e8ec;
}
.msg-tabs__item {
	flex: 1;
	text-align: center;
	padding: 12px 0;
	font-size: 13px;
	font-weight: 500;
	color: #828a99;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.msg-tabs__item:hover { color: #4c637b; }
.msg-tabs__item--active {
	color: #4c637b;
	border-bottom-color: #4c637b;
}
.msg-tabs__item i { margin-right: 5px; }
.msg-tabs__create { padding: 8px 12px; }

/* ── Talk header actions ── */
.talk-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}
.talk-header__action {
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #99a2ad;
	font-size: 14px;
	cursor: pointer;
	border-radius: 50%;
	transition: color 0.15s, background 0.15s;
}
.talk-header__action:hover { color: #4c637b; background: #f0f2f5; }

/* ── Talk message (group chat) ── */
.message__system {
	text-align: center;
	padding: 8px 0;
	font-size: 12px;
	color: #828a99;
}
.message__systemtext {
	background: #f0f2f5;
	padding: 4px 12px;
	border-radius: 10px;
	font-size: 12px;
}
.message__talk-ava {
	flex-shrink: 0;
	margin-right: 10px;
}
.message__talk-ava img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}
.message__left .message__talk-body {
	flex: 1;
}
.message__talk-name {
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 2px;
}
.message__talk-name a {
	color: #4c637b;
	text-decoration: none;
}
.message__talk-name a:hover { text-decoration: underline; }
.message__left {
	display: flex;
	align-items: flex-start;
	padding: 4px 0;
}
.message__left .message__span {
	display: inline-block;
	background: #f5f6f7;
	padding: 8px 12px;
	border-radius: 0 14px 14px 14px;
	font-size: 14px;
	color: #222;
	max-width: 400px;
	word-wrap: break-word;
}
.message__left .message__spandate {
	display: block;
	font-size: 11px;
	color: #99a2ad;
	margin-top: 2px;
}

/* ── Talk create/settings modals ── */
.talk-create__friends,
.talk-invite {
	max-height: 300px;
	overflow-y: auto;
}
.talk-friend {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s;
}
.talk-friend:hover { background: #f4f7f9; }
.talk-friend.selected { background: #e8f0f9; }
.talk-friend__ava {
	width: 36px; height: 36px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 10px;
}
.talk-friend__name {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	color: #222;
}
.talk-friend__check {
	color: #4c637b;
	font-size: 16px;
}

/* ── Talk settings members ── */
.talk-settings__section { margin-bottom: 16px; }
.talk-settings__label {
	font-size: 13px; color: #828a99; font-weight: 500;
	margin-bottom: 10px;
}
.talk-settings__members {
	max-height: 280px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 2px;
}
.talk-settings__ava {
	width: 56px; height: 56px;
	border-radius: 14px; object-fit: cover;
}
.talk-settings__ava-edit {
	position: absolute; bottom: 0; right: 0;
	width: 22px; height: 22px;
	background: #4c637b; color: #fff;
	border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px;
	border: 2px solid #fff;
}
.talk-settings__footer {
	border-top: 1px solid #e7e8ec;
	padding-top: 14px;
	display: flex; gap: 16px;
}
.talk-settings__leave {
	color: #828a99; font-size: 13px; cursor: pointer;
	transition: color 0.15s;
}
.talk-settings__leave:hover { color: #e64646; }
.talk-settings__delete {
	color: #e64646; font-size: 13px; cursor: pointer;
	transition: opacity 0.15s;
}
.talk-settings__delete:hover { opacity: 0.7; }

.talk-member {
	display: flex; align-items: center;
	padding: 6px 8px; border-radius: 10px;
	transition: background 0.1s;
}
.talk-member:hover { background: #f4f7f9; }
.talk-member__ava {
	width: 38px; height: 38px;
	border-radius: 50%; object-fit: cover;
	margin-right: 10px; flex-shrink: 0;
}
.talk-member__info {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column;
}
.talk-member__name {
	font-size: 13.5px; font-weight: 500; color: #222;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.talk-member__role {
	font-size: 11px; font-weight: 500; margin-top: 1px;
}
.talk-member__role--owner { color: #e8a94a; }
.talk-member__role--admin { color: #4c637b; }
.talk-member__dots {
	position: relative;
	width: 28px; height: 28px;
	display: flex; align-items: center; justify-content: center;
	color: #bcc3cd; cursor: pointer; border-radius: 50%;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s;
}
.talk-member__dots:hover { background: #f0f2f5; color: #222; }
.talk-member__menu {
	display: none !important;
}
.talk-member__dropdown {
	position: fixed;
	background: #fff; border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	min-width: 220px; z-index: 10020;
	padding: 4px 0; overflow: hidden;
}
.talk-member__menu-item {
	padding: 8px 14px; font-size: 13px;
	color: #222; cursor: pointer;
	transition: background 0.1s;
}
.talk-member__menu-item:hover { background: #f4f7f9; }
.talk-member__menu-item--danger { color: #e64646; }
.talk-member__menu-item--danger:hover { background: #fdf2f2; }

/* ─── Беседы: сообщения своих + чужих ─── */
/* Автор: Чепела Даниил Максимович */

/* Имя автора — показываем только в беседах (перед пузырём) */
#chat_type[value="talk"] ~ * .message__left .message__talk-name,
.messagescontent .message__left .message__talk-body .message__talk-name {
	font-size: 12px;
	font-weight: 600;
	color: #4c637b;
	margin-bottom: 4px;
	padding-left: 2px;
}

/* Выделение сообщения для удаления (админ) */
.talk-msg-selected {
	background: rgba(230, 70, 70, 0.08);
	border-radius: 10px;
	cursor: pointer;
}

/* Typing indicator в беседах */
.typing-talk {
	padding: 6px 16px;
	color: #707b8c;
	font-size: 12px;
	font-style: italic;
	animation: typingPulse 1.2s ease-in-out infinite;
}
@keyframes typingPulse {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}

/* Кнопка "Показать предыдущие" в беседах */
.talk-load-more {
	display: flex;
	justify-content: center;
	margin: 8px 0 14px;
}
.talk-load-more span {
	font-size: 12px;
	color: #4c637b;
	background: #f4f7f9;
	padding: 6px 16px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.15s;
}
.talk-load-more span:hover { background: #e8eef3; }

/* Стикеры в магазине */
.stickers-shop { padding: 0; }
.stickers-shop__header {
	padding: 16px 20px;
	border-bottom: 1px solid #e5e9ef;
}
.stickers-shop__header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #25302B;
}
.stickers-shop__list {
	padding: 12px;
	max-height: 60vh;
	overflow-y: auto;
}
.stickers-shop__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	transition: background 0.15s;
}
.stickers-shop__item:hover { background: #f4f7f9; }
.stickers-shop__preview {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}
.stickers-shop__img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}
.stickers-shop__meta {
	flex: 1;
	min-width: 0;
}
.stickers-shop__title {
	font-size: 14px;
	font-weight: 600;
	color: #25302B;
	margin-bottom: 2px;
}
.stickers-shop__author {
	font-size: 12px;
	color: #99a2ad;
}
.stickers-shop__action { flex-shrink: 0; }
.stickers-shop__owned {
	color: #4cab62;
	font-size: 13px;
	font-weight: 500;
}

/* Emoji-пикер для бесед и диалогов */
.new-emoji {
	transition: opacity 0.2s, visibility 0.2s;
}
.emoji_sticker_item {
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	transition: background 0.1s;
}
.emoji_sticker_item:hover { background: #f4f7f9; }

/* Картинки в беседах */
.massage__img-left,
.massage__img-right {
	max-width: 220px;
	max-height: 220px;
	border-radius: 10px;
	cursor: pointer;
	display: block;
}
.message__left .massage__img-left { margin-top: 4px; }
.message__right .massage__img-right { margin-top: 4px; }

/* (Удалено — перебивалось Telegram-блоком ниже) */

/* MsgNew badge */
.MsgNew {
	background: #4c637b;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 10px;
	min-width: 20px;
	text-align: center;
	flex-shrink: 0;
}

/* no messages */
.nomessages {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.nomessages__icon {
	font-size: 135px;
	color: #515365;
}

.nomessages__span {
	font-size: 19px;
	color: #ababab;
	padding: 30px;
	word-break: break-word;
	text-align: center;
}

.nomessages__link {}

/* inform about interlocutor */
.messagesnew {
	font-size: 9px;
	background-color: #4c637b;
	color: #ffffff;
	padding: 3px;
	border-radius: 5px;
	margin: 0 0 0 5px;
}

.messagescontent {
	position: relative;
	display: flex;
	flex-direction: column;
}

.messagescontent__userinfo {
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: center;
	height: 78px;
	padding: 15px 0;
	background-color: #f9fbfc;
	border-bottom: 1px solid #f5f5f5;
}

.messagescontent__back {
	font-size: 30px;
	padding: 5px 10px;
}

.messagescontent__ava {
	height: 35px;
	padding: 0 15px;
}

.messagescontent__img {
	height: 35px;
	width: 35px;
	border-radius: 50%;
}

/*.messagescontent__online {    margin: -40px 0 0 25px;width: 10px;height: 10px;}*/
.messagescontent__aboutuser {
	display: flex;
	flex-direction: column;
	align-items: end;
}

.messagescontent__aboutusername {
	font-size: 15px;
	font-weight: 500;
}

.messagescontent__aboutuseronline {
	margin-top: 5px;
	color: #545454;
}

/* messages area */
.messagescontent__feed {
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	max-height: 100%;
}

.message {
	padding: 20px 15px;
	position: relative;
	max-height: 73vh;
}

.message__date {
	display: block;
	text-align: center;
	position: relative;
	margin: 20px 0;
}

.message__date:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 9px;
	border-bottom: 1px solid #e0dfe06e;
}

.messages__datespan {
	background: #fff;
	display: inline-block;
	padding: 0 10px;
	position: relative;
	z-index: 1;
	color: #545454;
}

.message__left {
	display: flex;
	flex-direction: column;
	align-items: end;
	text-align: left;
	padding-bottom: 20px;
}

.message__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: left;
	padding-bottom: 20px;
}

.message__align {}

.message__align-left {
	display: flex;
	flex-direction: column;
	justify-content: end;
	background: #f5f6f7;
	color: #5a676f;
	border-radius: 15px 15px 15px 0px;
}

.message__align-right {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: #4c637b;
	color: #FFF;
	border-radius: 15px 15px 0px 15px;
}

.massage__img {}

.massage__img-left {
	width: 100%;
	border-radius: 15px 15px 15px 0px;
	cursor: pointer;
}

.massage__img-right {
	width: 100%;
	border-radius: 15px 15px 0px 15px;
	cursor: pointer;
}

.message__span {
	display: inline-block;
	padding: 13px 15px 13px;
	word-break: break-all;
}

.message__spandate {
	margin: 5px 0 0 0;
	font-size: 13px;
	color: #ababab;
}

.message__status {
	margin-left: 3px;
}

.message .fa-check-double {
	color: #515365
}

/* messages textarea*/
.typemessage {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	width: 100%;
	position: absolute;
	bottom: 0;
	background: #FFF;
	border-top: 1px solid #f5f5f5;
}

.typemessage__smiles {
	padding: 0 10px 0 0;
}

.typemessage__textarea {
	max-width: calc(100% - 205px);
	max-height: 55px;
	overflow-y: auto;
}

.typemessage__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.typemessage__actitem {
	padding: 0 10px;
	display: flex;
	flex-direction: row;
}

.typemessage__actitem:nth-last-child(2) {
	padding: 0 20px 0 10px;
}

.typemessage__acticon {
	font-size: 22px;
	cursor: pointer;
	opacity: .8;
}

.typemessage__acticon:hover {
	opacity: 1;
}

.typemessage__actions .record {
	font-size: 18px;
	width: 100%;
	float: left;
	color: #d63544;
	margin-right: 10px;
	cursor: pointer;
}

.typemessage__actions .record__text {
	float: left;
	width: 100%;
	font-size: 15px;
	cursor: pointer;
}

/* voice item */
.voice__msg {
	display: flex;
	padding: 7px 11px 7px 7px;
	align-items: center;
	justify-content: center;
}

.voice__msg .voice__button .voice__play {
	height: 12px;
	width: 12px;
	position: relative;
	padding: 12px 14px;
	color: #fff;
	font-size: 12px;
}

.voice__msg .voice__button .voice__stop {
	height: 12px;
	width: 12px;
	position: relative;
	padding: 12px 13px;
	color: #fff;
	font-size: 12px;
	display: none;
}

.voice__msg .voice__button {
	background-color: #4c637b;
	width: 35px;
	height: 35px;
	margin: 2px 10px 2px 2px;
	display: inline-block;
	border-radius: 70px;
	cursor: pointer;
}

.message__right .voice__msg .voice__button {
	background-color: #f5f6f7;
}

.message__right .voice__msg .voice__button .voice__play {
	color: #4c637b
}

.message__right .voice__msg .voice__button .voice__stop {
	color: #4c637b
}

.voice__msg .voise__title span {
	display: block;
	font-size: 13px;
	font-weight: 400;
}

/* emoji */
.emojione {
	font-size: inherit;
	height: 3ex;
	width: 3.1ex;
	min-height: 20px;
	min-width: 20px;
	display: inline-block;
	margin: -.2ex .15em .2ex;
	line-height: normal;
	vertical-align: middle
}

img.emojione {
	width: auto
}

.lsx-emojipicker-emoji span {
	display: inline-block;
	font-size: 24px;
	width: 33px;
	height: 35px;
	cursor: pointer;
}

.lsx-emojipicker-appender {
	position: relative;
}

.lsx-emojipicker-container {
	background: #ffffff;
	border-radius: 5px;
	z-index: 99999999999;
	position: absolute;
	top: -290px !important;
	right: -320px;
	box-shadow: 0 12px 29px rgba(0, 0, 0, .2);
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	display: none;
}

ul.lsx-emojipicker-tabs {
	margin: 0;
	padding: 0 10px;
	list-style: none;
	text-align: left;
	background-color: #eee;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top: 1px solid #ddd;
}

ul.lsx-emojipicker-tabs li {
	display: inline-block;
	text-align: left;
	font-size: 15px;
	padding: 6px;
	cursor: pointer;
	opacity: 0.5;
}

ul.lsx-emojipicker-tabs li.selected,
ul.lsx-emojipicker-tabs li:HOVER {
	opacity: 1;
}

.lsx-emojipicker-tabs img.emoji {
	width: 22px;
	margin: 5px 10px;
	opacity: 0.5;
	cursor: pointer;
}

.lsx-emojipicker-tabs img.emoji:HOVER,
.lsx-emojipicker-tabs li.selected img.emoji {
	opacity: 1;
}

.lsx-emojipicker-emoji span img.emoji {
	width: 25px;
	margin: 5px 4px;
	cursor: pointer;
	transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
}

.lsx-emojipicker-emoji.lsx-emoji-tab {
	width: 220px;
	padding: 8px;
	height: 200px;
	border-radius: 4px;
	overflow: auto;
}

.lsx-emojipicker-emoji span:HOVER,
.lsx-emojipicker-emoji span img.emoji:HOVER {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

ul.lsx-emojipicker-tabs li.selected {
	border-bottom: 2px solid #b5b5b5;
}

.lsx-emojipicker-container .loader {
	border: 6px solid #ececec;
	border-top: 6px solid #d8d8d8;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1.2s linear infinite;
	margin: 0 auto;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.lsx-emojipicker-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}

.lsx-emojipicker-wrapper .spinner-container {
	position: absolute;
	background: #ffffffbd;
	width: 100%;
	height: 100%;
	z-index: 10;
	border-radius: 4px;
	display: flex;
	align-items: center;
}

.lsx-emojipicker-container:after {
	position: absolute;
	display: block;
	content: '';
	clear: both;
	top: 100%;
	right: 320px;
	margin-bottom: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color: #eeeeee transparent transparent transparent;
}

.lsx-emojipicker-emoji.lsx-emoji-tab.hidden {
	display: none;
}

/* reply for message */
.message__reply {
	display: flex;
	justify-content: end;
	align-items: center;
	height: 60px;
	padding: 0 10px;
	margin-bottom: -10px;
}

.message__replycontent {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding-left: 7px;
	border-left: 2px solid #FFF;
}

.message__replycontent-left {
	border-left: 2px solid #717171;
}

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

.message__replyimg {
	background-image: url(../img/photo.jpg);
	width: 40px;
	height: 40px;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 35%;
	border-radius: 5px;
	margin-right: 7px;
}

.message__replyuser {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 5px;
}

.message__replytext {
	width: 100%;
	max-width: 350px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* reply over textarea */
.messagescontent__reply {
	display: flex;
	justify-content: end;
	align-items: center;
	height: 60px;
	background: #FFF;
	padding: 0 15px;
	border-top: 1px solid #f5f5f5;
}

.messagecontent__replyicon {
	font-size: 25px;
	color: #515365;
	margin-right: 20px;
}

.messagecontent__replyimg {
	background-image: url(../img/photo.jpg);
	width: 46px;
	height: 40px;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 35%;
	border-radius: 5px;
	margin-right: 10px;
}

.messagecontent__replycontent {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: #515365;
}

.messagescontent__replyuser {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 5px;
}

.messagescontent__replytext {
	width: 100%;
	max-width: 520px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* ALBUMS */

.photos .hidden {
	display: none;
}

.albums {}

.albums__item {
	padding: 0;
	margin: 10px 15px;
	border-radius: 5px;
}

.albums__bg {
	cursor: pointer;
	height: 165px;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 35%;
	background-color: #ecf1f5;
}

.albums__editbtn {
	position: absolute;
	top: 0;
	right: 0;
	margin: 8px;
	padding: 10px;
	border-radius: 3px;
	transition: opacity 60ms linear;
	z-index: 2;
	color: #fff;
	background: rgba(0, 0, 0, .4);
	font-size: 13px;
	line-height: 0;
	opacity: 0;
	cursor: pointer;
}

.albums__bg:hover .albums__editbtn {
	opacity: .8;
}

.albums__editbtn:hover {
	opacity: 1 !important;
}

.albums__icon {}

.albums__title {
	color: #fff;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 35px 12px 9px;
	border-radius: 0 0 5px 5px;
	background-image: url(../img/album_top_shadow.png);
}

.albumsinside {
	text-align: center;
	margin: 10px 0 0 0;
}

.albumsinside__info {
	margin: 10px 0 22px;
}

.albumsinside__infoitem {}

/* no photos section */
.nophotos {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
}

.nophotos__icon {
	font-size: 95px;
	color: #515365;
}

.nophotos__span {
	margin: 20px 0;
	color: #ababab;
}

/* photos */
.photos {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin: 0;
}

.photos__item {
	margin: 10px 0;
	height: 140px;
	border-radius: 5px;
	justify-self: flex-start;
}

.photos__bg {
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 35%;
	border-radius: 5px;
	background-color: #ecf1f5;
	box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 5%);
}

.photos__dellbtn {
	position: absolute;
	top: 0;
	right: 0;
	margin: 8px;
	padding: 5px 8px;
	border-radius: 3px;
	transition: opacity 60ms linear;
	z-index: 2;
	color: #fff;
	background: rgba(0, 0, 0, .4);
	font-size: 13px;
	line-height: 0;
	opacity: 0;
	cursor: pointer;
}

.photos__bg:hover .photos__dellbtn {
	opacity: .8;
}

.photos__dellbtn:hover {
	opacity: 1 !important;
}


/* VIDEOS */

/* no video section */
.novideos {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	margin: 30px 0 0 0;
}

.novideos__icon {
	font-size: 95px;
	color: #515365;
}

.novideos__span {
	margin: 20px 0;
	color: #ababab;
}

/* videos grid */
.videos {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin: 0;
	padding-top: 20px;
}

.videos__item {
	margin: 10px 0;
	height: 100%px;
	border-radius: 5px;
	justify-self: flex-start;
}

.videos__bg {
	cursor: pointer;
	width: 100%;
	height: 140px;
	position: relative;
	border-radius: 5px;
	background-color: #ecf1f5;
	box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 5%);
}

.videos__bg img {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 35%;
	border-radius: 5px;
}

.videos__dellbtn {
	position: absolute;
	top: 0;
	right: 0;
	margin: 8px;
	padding: 5px 8px;
	border-radius: 3px;
	transition: opacity 60ms linear;
	z-index: 2;
	color: #fff;
	background: rgba(0, 0, 0, .4);
	font-size: 13px;
	line-height: 0;
	opacity: 0;
	cursor: pointer;
}

.videos__bg:hover .videos__dellbtn {
	opacity: .8;
}

.videos__bg:hover .videos__play {
	opacity: 1;
}

.videos__dellbtn:hover {
	opacity: 1 !important;
}

.videos__play {
	position: absolute;
	top: 29%;
	right: 39%;
	margin: 8px;
	padding: 12px 14px;
	border-radius: 50%;
	transition: opacity 60ms linear;
	z-index: 2;
	color: #fff;
	background: rgba(0, 0, 0, .4);
	font-size: 20px;
	line-height: 0;
	opacity: .8;
	cursor: pointer;
}

.videos__title {
	display: flex;
	flex-direction: column;
	padding: 5px 3px 0 3px;
	font-weight: 500;
	color: #515365;
	cursor: pointer;
}

.videos__name:hover {
	text-decoration: underline;
}

.videos__view {
	font-weight: 400;
	font-size: 13px;
	padding-top: 5px;
}

/* video view */
.videoview {}

.videoview__content {}

.videoview__media {}

.videoview__aside {}

.videoview__asideheader {}

.videoview__asidelist {}

.videoview__title {}

.videoview__titlename {}

.videoview__titleviews {}

.fas {}

.fa-eye {}

/* video modal add */
.formgroup {
	margin-bottom: 1.5rem;
}

.formgroup__title {}

.formgroup__input {
	font-family: 'Roboto', sans-serif;
	display: block;
	width: 100%;
	color: #878787;
	background-color: #FFF;
	border: 1px solid #d3d9de;
	padding: 8px 9px 8px;
	border-radius: 0;
}

/* AUDIO */

/* audio main classes */
.audio {}

.audio__player {
	background-color: #fff;
	border-radius: 5px;
	height: 185px;
	display: flex;
	margin-bottom: 35px;
	box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 5%);
}

.audio__cover {
	position: relative;
	top: -10px;
	margin-left: 25px;
}

.audio__img {
	max-width: 219px;
	height: 210px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 5%);
	border: 1px solid rgb(0 0 0 / 5%);
}

.audio__content {
	padding: 20px 30px;
	flex: 1;
	display: block;
}

.audio__song {
	font-size: 22px;
}

.audio__author {}

.audio__name {
	color: #b1b1b1;
	font-size: 16px;
	margin-bottom: 35px;
}

.audio__padd {
	width: 100%;
	height: 15px;
	cursor: pointer;
}

.audio__hold {
	height: 6px;
	width: 100%;
	cursor: pointer;
	background-color: #efefef;
	border-radius: 10px;
}

.loader {}

.elapsed {
	height: 6px;
	background: #515365;
	border-radius: 10px;
}

.seek {
	height: 7px;
	margin-top: -7px;
}

.jp-play-bar {}

.audio__holdfooter {
	display: flex;
	justify-content: space-between;
	color: #b5b5b5;
	position: relative;
	font-size: 12px;
}

.audio__timeleft {}

.audio__timeright {}

.audio__buttons {
	text-align: center;
	font-size: 26px;
	color: #b7b7b7;
}

.audio__buttons i {
	cursor: pointer;
	padding: 0 7px;
}

/* audio list */
.audio__track {
	display: flex;
	cursor: pointer;
	transition: all 0.2s;
	margin-bottom: 5px;
}

.audio__poster {
	display: flex;
}

.audio__poster img {
	max-height: 66px;
	min-height: 71px;
	max-width: 67px;
	border-radius: 5px 0 0 5px;
}

.audio__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-align: center;
	padding: 10px 0;
}

.info__track {}

.audio__infoauthor {
	color: #515365;
	font-size: 15px;
	max-width: 175px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audio__infoname {
	font-size: 15px;
	max-width: 175px;
	color: #b1b1b1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audio__playbutton {
	display: flex;
	align-items: center;
	padding: 0 20px;
	font-size: 26px;
	color: #b7b7b7;
	cursor: pointer;
}

/* no audio */
.noaudio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	margin: 30px 0 0 0;
}

.noaudio__icon {
	font-size: 95px;
	color: #515365;
}

.noaudio__span {
	margin: 20px 0 0;
	color: #ababab;
}

/* audio aside */
.audioaside {}

.audioaside__buttons {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}

/* right menu random users */
.audioaside__friends {
	display: flex;
	flex-direction: column;
}

.audioaside__item a {
	display: flex;
	align-items: center;
	padding: 10px 17px;
	transition: all 0.1s;
}

.audioaside__item:hover {
	background-color: rgba(0, 0, 0, .07);
}

.audioaside__item:last-child {
	border-radius: 0 0 5px 5px;
}

.audioaside__ava {
	height: 50px;
	width: 50px;
}

.audioaside__ava img {
	border-radius: 50px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.audioaside__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3px 7px;
}

.audioaside__name {
	width: 130px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audioaside__songs {
	color: #ababab;
}






/* Всплывающие уведомления VK Style */
#gritter-notice-wrapper {
	position: fixed;
	bottom: 70px;
	left: 20px;
	width: 300px;
	z-index: 999999;
}

.gritter-item-wrapper {
	margin-top: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	overflow: hidden;
}

.gritter-item {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #e2e5ec;
	position: relative;
	padding: 12px 15px;
	border-left: 4px solid #346392;
	transition: transform 0.2s, opacity 0.2s;
	min-height: 48px;
}

.gritter-item:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.gritter-close {
	display: none;
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 0;
	color: #aeb7c2;
	cursor: pointer;
	text-decoration: none;
}

.gritter-close:after {
	font-size: 14px;
	font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
	font-weight: 900;
	content: '\f00d';
}

.gritter-item:hover .gritter-close {
	display: block;
}

.gritter-close:hover {
	color: #828a99;
}

.gritter-title {
	font-size: 14px;
	font-weight: 600;
	color: #4c637b;
	margin-bottom: 4px;
	font-family: sans-serif;
	padding-right: 15px;
}

.gritter-without-image p,
.gritter-with-image p {
	font-size: 13px;
	color: #758690;
	margin: 0;
	font-family: sans-serif;
}

.gritter-img-container {
	flex-shrink: 0;
	margin-right: 12px;
}

.gritter-image {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.gritter-content {
	flex-grow: 1;
	min-width: 0;
}

.gritter-color.success .gritter-item {
	border-left-color: #29ab45;
}

.gritter-color.danger .gritter-item {
	border-left-color: #d63544;
}

.gritter-color.info .gritter-item {
	border-left-color: #f7a435;
}

/* Уникальный дизайн боковых блоков (Друзья, Группы) */
.profile-side-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.profile-side-item {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
	text-decoration: none;
	border: 1px solid transparent;
}

.profile-side-item:hover {
	background: #f4f7f9;
	transform: translateX(4px);
}

.profile-side-ava {
	position: relative;
	width: 44px;
	height: 44px;
	margin-right: 14px;
	flex-shrink: 0;
}

.profile-side-ava img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
	/* Squircle (почти квадратный) */
}

.profile-side-ava.group img {
	border-radius: 50%;
	/* Для групп оставим круг, чтобы отличать */
}

.profile-side-online-dot {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	background: #4caf50;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.profile-side-info {
	flex-grow: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.profile-side-name {
	font-size: 14.5px;
	font-weight: 500;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.profile-side-arrow {
	color: #d0d6dc;
	font-size: 14px;
	margin-left: 10px;
	transition: transform 0.2s, color 0.2s;
}

.profile-side-item:hover .profile-side-arrow {
	color: #5181b8;
	transform: translateX(2px);
}

/* Унифицированное меню управления (Группы, Профиль) */
.admin-menu-list {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	margin-bottom: 20px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admin-menu-list__header {
	padding: 15px 20px;
	font-weight: 600;
	color: #1a1a1a;
	font-size: 15px;
	border-bottom: 1px solid #efefef;
}

.admin-menu-item {
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #4a5468;
	cursor: pointer;
	transition: background 0.2s;
	font-size: 14px;
}

.admin-menu-item i {
	width: 20px;
	font-size: 16px;
	text-align: center;
	color: #828a99;
	transition: color 0.2s;
}

.admin-menu-item:hover {
	background: #fafbfc;
	color: #5181b8;
}

.admin-menu-item:hover i {
	color: #5181b8;
}

/* ═══════════════════════════════════════════
   АУДИО-СИСТЕМА — AudioEngine
   ═══════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
	--audio-accent: #5181b8;
	--audio-accent-dark: #4072a8;
	--audio-bg: #fff;
	--audio-border: #e5e9ef;
	--audio-text: #1a1a1a;
	--audio-muted: #888;
	--audio-hover: #f5f7fa;
	--audio-playing: #e8f0f9;
	--audio-radius: 12px;
	--audio-transition: 0.2s ease;
}

/* ── Страница аудио ── */
.audio-page {
	margin-top: 0;
}

.audio-sidebar-col {
	padding-right: 10px;
}

.audio-main-col {
	padding-left: 10px;
}

/* ── Боковая навигация ── */
.audio-sidebar {
	padding: 8px 0;
}

.audio-sidebar__nav {
	display: flex;
	flex-direction: column;
}

.audio-sidebar__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 18px;
	cursor: pointer;
	color: var(--audio-text);
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	margin: 2px 4px;
	transition: background var(--audio-transition), color var(--audio-transition);
}

.audio-sidebar__item i {
	width: 18px;
	text-align: center;
	color: var(--audio-muted);
	font-size: 15px;
	transition: color var(--audio-transition);
}

.audio-sidebar__item.active,
.audio-sidebar__item:hover {
	background: var(--audio-hover);
	color: var(--audio-accent);
}

.audio-sidebar__item.active i,
.audio-sidebar__item:hover i {
	color: var(--audio-accent);
}

.audio-sidebar__count {
	margin-left: auto;
	background: var(--audio-border);
	color: var(--audio-muted);
	border-radius: 20px;
	padding: 1px 8px;
	font-size: 12px;
	font-weight: 600;
}

/* ── Блок друзей в сайдбаре ── */
.audio__friend {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	cursor: pointer;
	transition: opacity var(--audio-transition);
}

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

.audio__friend:hover {
	opacity: 0.8;
}

.audio__friend-ava img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}

.audio__friend-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--audio-text);
}

.audio__friend-count {
	font-size: 12px;
	color: var(--audio-muted);
}

/* ── BigPlayer ── */
.bigPlayer {
	overflow: visible;
	padding: 16px 20px;
}

.bigPlayer__row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.bigPlayer__cover {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	border-radius: var(--audio-radius);
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.bigPlayer__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.bigPlayer__cover img.playing {
	transform: scale(1.05);
}

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

.bigPlayer__meta {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.trackPerformers a {
	color: var(--audio-accent);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
	display: inline-block;
}

.trackPerformersSeparator {
	color: var(--audio-muted);
	font-size: 14px;
}

.trackName span {
	font-size: 15px;
	color: var(--audio-text);
}

/* Прогресс-бар */
.bigPlayer__progress-wrap {
	margin-bottom: 10px;
}

.selectableTrack[data-seek="true"] {
	height: 6px;
	background: var(--audio-border);
	border-radius: 3px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.selectableTrack[data-seek="true"] .slider {
	height: 100%;
	background: var(--audio-accent);
	border-radius: 3px;
	transition: width 0.1s linear;
	position: relative;
	z-index: 2;
}

.selectableTrackLoadProgress {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.selectableTrackLoadProgress .load_bar {
	height: 100%;
	background: rgba(81, 129, 184, 0.25);
	border-radius: 3px;
	transition: width 0.3s;
}

.selectableTrack[data-seek="true"]:hover {
	height: 8px;
	margin-top: -1px;
}

.selectableTrack[data-seek="true"]:hover .slider::after {
	content: '';
	position: absolute;
	right: -5px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background: var(--audio-accent);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(81, 129, 184, 0.5);
}

.bigPlayer__times {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--audio-muted);
	margin-top: 4px;
}

/* Контролы BigPlayer */
.bigPlayer__controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bigPlayer__btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--audio-transition), transform var(--audio-transition);
	background: transparent;
	position: relative;
}

.bigPlayer__btn:hover {
	background: var(--audio-hover);
}

.bigPlayer__btn.pressed {
	color: var(--audio-accent);
}

/* Иконки контролов через псевдоэлементы */
.play-btn::before {
	content: '▶';
	font-size: 14px;
	color: var(--audio-text);
	margin-left: 2px;
}

.play-btn.pause::before {
	content: '⏸';
	margin-left: 0;
}

.play-btn.loading::before {
	content: '⟳';
	animation: spin 1s linear infinite;
}

.prev-btn::before {
	content: '⏮';
	font-size: 14px;
	color: var(--audio-muted);
}

.next-btn::before {
	content: '⏭';
	font-size: 14px;
	color: var(--audio-muted);
}

.shuffle-btn::before {
	content: '⇌';
	font-size: 15px;
	color: var(--audio-muted);
}

.repeat-btn::before {
	content: '↻';
	font-size: 15px;
	color: var(--audio-muted);
}

.mute-btn::before {
	content: '🔊';
	font-size: 13px;
}

.mute-btn.pressed::before {
	content: '🔇';
}

.shuffle-btn.pressed::before,
.repeat-btn.pressed::before {
	color: var(--audio-accent);
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Громкость */
.bigPlayer__volume {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.volumePanel.selectableTrack[data-volume="true"] {
	width: 80px;
	height: 4px;
	background: var(--audio-border);
	border-radius: 2px;
	cursor: pointer;
	overflow: visible;
}

.volumePanel .slider {
	height: 100%;
	background: var(--audio-accent);
	border-radius: 2px;
	transition: opacity var(--audio-transition);
}

/* ── Поиск ── */
.audio-search-wrap {
	padding: 12px 20px;
}

.audio-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--audio-hover);
	border: 1.5px solid var(--audio-border);
	border-radius: 30px;
	padding: 10px 16px;
	transition: border-color var(--audio-transition), box-shadow var(--audio-transition);
}

.audio-search:focus-within {
	border-color: var(--audio-accent);
	box-shadow: 0 0 0 3px rgba(81, 129, 184, 0.12);
	background: #fff;
}

.audio-search__icon {
	color: var(--audio-muted);
	font-size: 14px;
}

.audio-search__input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-size: 14px;
	color: var(--audio-text);
}

.audio-search__clear {
	color: var(--audio-muted);
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 50%;
	transition: color var(--audio-transition);
}

.audio-search__clear:hover {
	color: var(--audio-accent);
}

/* Секции результатов поиска */
.audio-search-section {
	margin-bottom: 16px;
}

.audio-search-section__title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--audio-muted);
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.audio-search-section__title i {
	font-size: 11px;
}

.audio__empty {
	text-align: center;
	color: var(--audio-muted);
	padding: 20px;
	font-size: 14px;
}

/* ── Заголовок списка треков ── */
.audio-list__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0 14px;
	border-bottom: 1px solid var(--audio-border);
	margin-bottom: 4px;
}

.audio-list__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--audio-text);
}

.audio-list__upload {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--audio-accent);
	cursor: pointer;
	padding: 6px 12px;
	background: var(--audio-playing);
	border-radius: 20px;
	transition: background var(--audio-transition);
}

.audio-list__upload:hover {
	background: rgba(81, 129, 184, 0.2);
}

/* ── Карточка трека ── */
.audioEmbed {
	user-select: none;
	border-radius: 8px;
	transition: background var(--audio-transition);
}

.audioEmbed:hover {
	background: var(--audio-hover);
}

.audioEntry {
	border-radius: 8px;
	transition: background var(--audio-transition);
}

.audioEntry.nowPlaying {
	background: var(--audio-playing);
}

.audioEntryWrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	cursor: pointer;
}

/* Иконка воспроизведения — Font Awesome */
.playIcon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--audio-border);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--audio-transition), transform var(--audio-transition);
	position: relative;
	cursor: pointer;
}

.playIcon::before {
	content: '\f04b';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 12px;
	color: var(--audio-muted);
	margin-left: 2px;
	transition: color var(--audio-transition);
}

.audioEmbed:hover .playIcon {
	background-color: var(--audio-accent);
}

.audioEmbed:hover .playIcon::before {
	color: #fff;
}

.audioEntry.nowPlaying .playIcon {
	background-color: var(--audio-accent);
	animation: pulse-ring 1.5s ease-in-out infinite;
}

.audioEntry.nowPlaying .playIcon::before {
	content: '\f04c';
	color: #fff;
	margin-left: 0;
}

.audioEntry.nowPlaying.isPaused .playIcon {
	animation: none;
}

.audioEntry.nowPlaying.isPaused .playIcon::before {
	content: '\f04b';
	margin-left: 2px;
}

@keyframes pulse-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(81, 129, 184, 0.4);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(81, 129, 184, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(81, 129, 184, 0);
	}
}

/* Обложка трека */
.track__poster {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
}

.track__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}

/* Инфо */
.track__info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.track__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--audio-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audioEntry.nowPlaying .track__title {
	color: var(--audio-accent);
}

.performer a {
	color: inherit;
	text-decoration: none;
}

.performer a:hover {
	color: var(--audio-accent);
}

.separator {
	color: var(--audio-muted);
}

.title {
	color: var(--audio-muted);
	font-weight: 400;
}

.track__duration {
	font-size: 12px;
	color: var(--audio-muted);
	margin-top: 3px;
}

/* Кнопки трека */
.track__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	opacity: 0;
	transition: opacity var(--audio-transition);
	position: relative;
}

.audioEmbed:hover .track__actions {
	opacity: 1;
}

.audioEntry.nowPlaying .track__actions {
	opacity: 1;
}

.track__btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--audio-transition);
	font-size: 13px;
	color: var(--audio-muted);
}

.track__btn:hover {
	background: var(--audio-border);
	color: var(--audio-accent);
}

.like-icon::before {
	content: '♡';
	font-size: 15px;
}

.menu-dots-icon::before {
	content: '⋯';
	font-size: 18px;
	line-height: 1;
}

/* ── Drag & Drop ── */
.audioEntryWrapper[data-draggable="1"] {
	cursor: grab;
}

.audioEntryWrapper[data-draggable="1"]:active {
	cursor: grabbing;
}

.drag-ghost {
	border-radius: 8px;
	background: #fff;
}

.audioEmbed.drag-over {
	border-top: 2px solid var(--audio-accent) !important;
}

body.dragging-active * {
	cursor: grabbing !important;
	user-select: none;
}

/* ── Контекстное меню ── */
.buttons {
	position: relative;
}

.audio__context_menu {
	position: absolute;
	right: 0;
	top: 100%;
	background: #fff;
	border: 1px solid var(--audio-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 1000;
	min-width: 170px;
	opacity: 0;
	transform: translateY(-6px) scale(0.97);
	pointer-events: none;
	transition: opacity 0.15s, transform 0.15s;
}

.audio__context_menu.audio__context_menu_show {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.audio__context_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	font-size: 13.5px;
	color: var(--audio-text);
	cursor: pointer;
	border-radius: 6px;
	margin: 2px;
	transition: background var(--audio-transition), color var(--audio-transition);
}

.audio__context_item i {
	width: 16px;
	text-align: center;
	color: var(--audio-muted);
}

.audio__context_item:hover {
	background: var(--audio-hover);
	color: var(--audio-accent);
}

.audio__context_item:hover i {
	color: var(--audio-accent);
}

/* ── Модалка загрузки ── */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-box {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	width: 440px;
	max-width: 95vw;
	animation: modalIn 0.25s ease;
}

@keyframes modalIn {
	from {
		transform: translateY(-20px) scale(0.97);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

.modal-box__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid var(--audio-border);
	font-size: 16px;
	font-weight: 600;
}

.modal-box__close {
	cursor: pointer;
	color: var(--audio-muted);
	font-size: 18px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background var(--audio-transition), color var(--audio-transition);
}

.modal-box__close:hover {
	background: var(--audio-hover);
	color: var(--audio-text);
}

.modal-box__body {
	padding: 24px;
}

.audio-upload-area {
	border: 2px dashed var(--audio-border);
	border-radius: 12px;
	padding: 40px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--audio-transition), background var(--audio-transition);
}

.audio-upload-area:hover,
.audio-upload-area.drag-over {
	border-color: var(--audio-accent);
	background: var(--audio-playing);
}

.audio-upload-area__icon {
	font-size: 40px;
	color: var(--audio-accent);
	margin-bottom: 12px;
	display: block;
}

.audio-upload-area__text {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 6px;
}

.audio-upload-area__sub {
	font-size: 12px;
	color: var(--audio-muted);
}

.audio-upload-progress {}

.audio-upload-progress__bar {
	height: 8px;
	background: var(--audio-border);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
}

.audio-upload-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--audio-accent), #8ab4e0);
	border-radius: 4px;
	width: 0%;
	transition: width 0.3s;
}

.audio-upload-progress__text {
	text-align: center;
	font-size: 13px;
	color: var(--audio-muted);
}

/* ── Popup аудио в хедере ── */
.audio__popup-wrap {
	display: flex;
	gap: 0;
	height: 100%;
}

.audio__popup-tracks {
	flex: 1;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--audio-border);
	min-width: 0;
}

.audio__popup-player {
	padding: 12px 16px;
	border-bottom: 1px solid var(--audio-border);
}

.audio__popup-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}

.audio__popup-add {
	padding: 10px 16px;
	border-top: 1px solid var(--audio-border);
}

.audio__popup-link {
	color: var(--audio-accent);
	font-size: 14px;
	text-decoration: none;
}

.audio__popup-link:hover {
	text-decoration: underline;
}

.audio__popup-friends {
	width: 200px;
	flex-shrink: 0;
	padding: 12px;
	overflow-y: auto;
}

.audio__popup-friends-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--audio-muted);
	margin-bottom: 10px;
}

.audio__popup-more {
	margin-top: 8px;
	text-align: center;
	font-size: 13px;
	color: var(--audio-accent);
	cursor: pointer;
	padding: 6px;
	border-radius: 6px;
	transition: background var(--audio-transition);
}

.audio__popup-more:hover {
	background: var(--audio-hover);
}

/* ── Toast уведомления ── */
.audio-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #333;
	color: #fff;
	padding: 10px 20px;
	border-radius: 24px;
	font-size: 14px;
	z-index: 99999;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
	white-space: nowrap;
}

.audio-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.audio-toast--success {
	background: #27ae60;
}

.audio-toast--error {
	background: #e74c3c;
}

.audio-toast--info {
	background: var(--audio-accent);
}

/* ── Загрузчик ── */
.audio__loading {
	text-align: center;
	padding: 20px;
	color: var(--audio-muted);
	font-size: 14px;
}

/* ── Адаптивность ── */
@media (max-width: 992px) {
	.audio-sidebar-col {
		display: none;
	}

	.audio-main-col {
		padding-left: 0;
	}
}

@media (max-width: 768px) {
	.bigPlayer__row {
		flex-direction: column;
	}

	.bigPlayer__cover {
		width: 60px;
		height: 60px;
	}

	.bigPlayer__volume {
		display: none;
	}
}

/* ═══════════════════════════════════════════
   НОВЫЙ АУДИО-ПЛЕЕР (.audio-player-*)
   Цвета EDDAS: #4c637b accent, #f4f6f4 hover
   ═══════════════════════════════════════════ */

/* Обёртка плеера внутри panel */
.audio-player-wrap {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 20px 12px;
	border-bottom: 1px solid #e9ebee;
}

.audio-player__cover-col {
	flex-shrink: 0;
}

.audio-player__cover {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.audio-player__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.audio-player__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Мета (исполнитель — название) */
.audio-player__track {
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #333;
}

.audio-player__track .trackPerformers a {
	color: #4c637b;
	font-weight: 600;
	text-decoration: none;
}

.audio-player__track .trackPerformers a:hover {
	text-decoration: underline;
}

.audio-player__track .trackPerformersSeparator {
	color: #999;
}

.audio-player__track .trackName {
	display: inline;
	color: #555;
}

/* Прогресс */
.audio-player__progress {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.audio-player__progress .selectableTrack[data-seek="true"] {
	height: 5px;
	background: #e9ebee;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.audio-player__progress .selectableTrack[data-seek="true"] .slider {
	height: 100%;
	background: #4c637b;
	border-radius: 3px;
	transition: width 0.1s linear;
	position: relative;
	z-index: 2;
}

.audio-player__progress .selectableTrackLoadProgress {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.audio-player__progress .selectableTrackLoadProgress .load_bar {
	height: 100%;
	background: rgba(76, 99, 123, 0.2);
	border-radius: 3px;
}

.audio-player__progress .selectableTrack[data-seek="true"]:hover {
	height: 7px;
}

.audio-player__times {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #aaa;
}

/* Контролы */
.audio-player__controls {
	display: flex;
	align-items: center;
	gap: 4px;
}

.audio-player__btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 13px;
	transition: background 0.15s, color 0.15s;
	background: transparent;
	border: none;
}

.audio-player__btn:hover {
	background: #f4f6f4;
	color: #4c637b;
}

/* Кнопка play — чуть крупнее */
.audio-btn-play {
	width: 38px;
	height: 38px;
	background: #4c637b;
	color: #fff;
	font-size: 14px;
}

.audio-btn-play:hover {
	background: #3d5268;
	color: #fff;
}

.audio-btn-play.playing {}

/* Shuffle / repeat — подсветка при активации */
.audio-btn-shuffle.pressed,
.audio-btn-repeat.pressed {
	color: #4c637b !important;
	background: rgba(76, 99, 123, 0.12) !important;
}

/* Mute */
.audio-btn-mute.pressed {
	color: #c0392b !important;
	background: rgba(192, 57, 43, 0.08) !important;
}

/* Громкость */
.audio-player__volume {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.audio-player__volume-bar {
	width: 70px;
	height: 4px;
	background: #e9ebee;
	border-radius: 2px;
	cursor: pointer;
	overflow: visible;
}

.audio-player__volume-bar .slider {
	height: 100%;
	background: #4c637b;
	border-radius: 2px;
}

/* ── Поиск (panelsearch внутри panel) ── */
.panelsearch-main-panel {
	margin: 0 20px 10px;
}

/* ── Список треков ── */
.audiosDiv {
	padding: 0 4px;
}

/* ── Секции поиска ── */
.audio-search-section {}

.audio-search-section__title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #aaa;
	padding: 10px 20px 6px;
}

/* ── Плейлисты: заглушка "в разработке" ── */
.audio-playlists-stub {
	text-align: center;
	padding: 50px 20px;
	color: #aaa;
}

.audio-playlists-stub i {
	font-size: 48px;
	color: #ccc;
	margin-bottom: 16px;
	display: block;
}

.audio-playlists-stub h3 {
	font-size: 18px;
	color: #555;
	margin-bottom: 8px;
}

.audio-playlists-stub p {
	font-size: 14px;
}

@media (max-width: 768px) {
	.audio-player-wrap {
		flex-direction: column;
	}

	.audio-player__cover {
		width: 56px;
		height: 56px;
	}

	.audio-player__volume {
		display: none;
	}
}

/* ── Модификации для плеера внутри Попапа (более компактный, элегантный вид) ── */
#bigPlayerMainPopup {
	padding: 10px 14px 10px;
	gap: 12px;
	border: 1px solid #e1e5eb !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

#bigPlayerMainPopup .audio-player__body {
	gap: 4px;
}

#bigPlayerMainPopup .audio-player__meta {
	margin-bottom: 2px !important;
}

#bigPlayerMainPopup .audio-player__track {
	font-size: 13px;
}

#bigPlayerMainPopup .audio-player__times {
	font-size: 10px;
	color: #999;
	margin-top: 1px;
}

#bigPlayerMainPopup .audio-player__progress .selectableTrack[data-seek="true"] {
	height: 4px;
}

#bigPlayerMainPopup .audio-player__progress .selectableTrack[data-seek="true"]:hover {
	height: 5px;
}

#bigPlayerMainPopup .audio-player__controls {
	margin-top: 6px !important;
	gap: 6px;
	justify-content: center;
}

/* Кнопки в попапе делаем меньше */
#bigPlayerMainPopup .audio-player__btn {
	width: 26px;
	height: 26px;
	font-size: 11px;
	color: #777;
}

#bigPlayerMainPopup .audio-btn-play {
	width: 32px;
	height: 32px;
	font-size: 12px;
	background: #4c637b;
	color: #fff;
	box-shadow: 0 2px 5px rgba(76, 99, 123, 0.25);
}

#bigPlayerMainPopup .audio-btn-play:hover {
	background: #3d5268;
}

#bigPlayerMainPopup .audio-player__volume {
	margin-left: auto;
	gap: 4px;
}

#bigPlayerMainPopup .audio-player__volume-bar {
	width: 45px;
	height: 3px;
}

/* ── Поиск на аудио-странице: input без рамки textarea ── */
.panelsearch-main-panel {
	margin: 0 20px 10px;
	position: relative;
}

.panelsearch-main-panel input.textarea {
	border: none;
	background: transparent;
	padding: 10px 40px 10px 14px;
	width: 100%;
	font-size: 14px;
	color: #333;
	outline: none;
	box-shadow: none;
	height: auto;
	resize: none;
	min-height: unset;
	font-family: inherit;
}

.panelsearch-main-panel .panelsearch__icon {
	pointer-events: none;
	color: #bbb;
}

/* Заглушка для плейлистов */
.audio-playlists-stub {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
	text-align: center;
	color: var(--audio-muted);
	background: var(--audio-header-bg);
	border-radius: var(--audio-radius);
	margin-top: 15px;
	border: 1px solid var(--audio-border);
}

.audio-playlists-stub i {
	font-size: 48px;
	color: var(--audio-accent);
	margin-bottom: 20px;
	opacity: 0.8;
}

.audio-playlists-stub h3 {
	font-size: 18px;
	color: var(--audio-text);
	margin-bottom: 10px;
	font-weight: 500;
}

.audio-playlists-stub p {
	font-size: 14px;
	max-width: 400px;
	line-height: 1.5;
}

/* === ORIGINAL VK POPUP & BIGPLAYER CSS OVERRIDES === */
/* CSS Variables for Audio (из референса VKify 2016) */
:root {
	--audio-background-color: #edeff1;
	--audio-background-color-2: #f5f7fa;
	--audio-background-color-3: #e8edf4;
	--audio-slider-color: #e4e7ea;
	--audio-slider-color-2: #e1e8ee;
	--audio-slider-progress-color: #b8c7d7;
	--audio-count-color: #cfd9e0;
	--audio-count-text-color: #5e6a79;
	--accent-color: #5e81a8;
	--accent-color-2: #5181b8;
	--accent-color-3: #5181b8;
	--muted-text-color: #939393;
	--muted-text-color-2: #656565;
	--muted-text-color-3: #828a99;
	--border-color: #e7e8ec;
	--text-color: #000;
	--module-background-color: #fff;
	--module-header-background-color: #fafbfc;
	--module-border-radius: 2px;
	--button-border-radius: 2px;
}

/*============================================
BIG PLAYER (Main Audio Player)============================================*/
.bigPlayer {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	background: var(--module-header-background-color) !important;
	border-color: var(--border-color) !important;
	border-radius: var(--module-border-radius, 2px) !important;
	overflow: hidden !important;
}

.bigPlayer.ctx_place {
	position: relative !important;
	cursor: default !important;
	transition: background-color 0.2s ease !important;
}

.bigPlayer.ctx_place:hover {
	background: var(--audio-background-color-2) !important;
}

.bigPlayer.ctx_place:active {
	background: var(--audio-background-color-3, #e8edf4) !important;
}

.bigPlayer .bigPlayerWrapper {
	padding: 0 15px;
	display: flex !important;
	align-items: center !important;
}

.bigPlayer .bigPlayerWrapper,
.bigPlayer,
.bigPlayer .playButtons .arrowsButtons {
	height: unset !important;
}

/* Play Buttons */
.bigPlayer .playButtons {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: unset !important;
}

.musicIcon {
	background: url(/design/VK/img/audio_player_controls.png) no-repeat;
	height: 10px;
	width: 12px;
}

.bigPlayer .playButtons .playButton {
	width: 28px !important;
	height: 28px !important;
	background: var(--accent-color) !important;
	border-radius: 50% !important;
	margin: 15px 0 !important;
	cursor: pointer !important;
	transition: background-color 0.2s, transform 0.1s !important;
	position: relative !important;
}

.bigPlayer .playButtons .playButton:hover {
	background: var(--accent-color-2, #6888ad) !important;
	transform: scale(1.05) !important;
}

.bigPlayer .playButtons .playButton:active {
	transform: scale(0.95) !important;
}

.bigPlayer .playButtons .playButton .playIcon {
	width: 28px !important;
	height: 28px !important;
	background: url(/design/VK/img/audio_player_controls.png) no-repeat !important;
	background-position: left top !important;
	transition: none !important;
	display: block !important;
	opacity: 1 !important;
	filter: brightness(1) !important;
}

.bigPlayer .playButton.pause .playIcon,
.bigPlayer #bigPlayerPlay.pause .playIcon {
	background-position: 0px -56px !important;
}

.bigPlayer .playButton:not(.pause) .playIcon,
.bigPlayer #bigPlayerPlay:not(.pause) .playIcon {
	background-position: left top !important;
}

/* Улучшенное отображение состояния play/pause */
.bigPlayer #bigPlayerPlay.pause {
	background: var(--accent-color-2, #6888ad) !important;
}

.bigPlayer #bigPlayerPlay:not(.pause) {
	background: var(--accent-color) !important;
}

.bigPlayer .playButtons .playButton:hover .playIcon {
	filter: brightness(1.1) !important;
}

.bigPlayer .playButtons .arrowsButtons {
	display: flex !important;
	gap: 8px !important;
	align-items: center !important;
	margin-left: 4px !important;
}

.bigPlayer .playButtons .nextButton {
	background-position: 0px -88px;
}

.bigPlayer .playButtons .backButton {
	background-position: 0px -102px;
}

.bigPlayer .additionalButtons {
	padding: 0 0 0 10px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* Track Panel */
.bigPlayer .trackPanel {
	margin-left: 10px !important;
	margin-right: 15px !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	width: calc(var(--page-width) - 242px) !important;
	flex: 1 !important;
	min-width: 0 !important;
}

.wide_column .bigPlayer .trackPanel {
	width: 288px !important;
	margin-right: 15px !important;
}

.bigPlayer .trackInfo {
	padding-top: 19px !important;
	overflow: hidden !important;
	height: unset !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	display: flex !important;
	align-items: baseline !important;
	min-height: 20px !important;
	gap: 8px !important;
	justify-content: space-between !important;
}

.bigPlayer .trackInfo>span {
	display: inline-block !important;
	max-width: 50% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.bigPlayer .trackInfo .trackPerformers {
	max-width: 45% !important;
}

.bigPlayer .trackInfo>span {
	display: inline !important;
}

.bigPlayer .trackInfo .trackPerformers {
	max-width: none !important;
}

.bigPlayer .trackInfo a {
	color: var(--text-color, #000);
	text-decoration: none;
}

.bigPlayer .trackInfo a:hover {
	text-decoration: underline;
}

.bigPlayer .trackInfo .timer {
	padding: 0 !important;
	flex-shrink: 0 !important;
	margin-left: 0 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	white-space: nowrap !important;
	height: auto !important;
}

.bigPlayer .track .timer {
	display: none !important;
}

.bigPlayer .track .timer span[class],
.bigPlayer .track .timer {
	letter-spacing: 0.02em !important;
	color: var(--muted-text-color) !important;
	display: inline-block !important;
	vertical-align: baseline !important;
	font-family: var(--font-family, Arial, sans-serif) !important;
	transition: color 0.2s ease !important;
}

.bigPlayer .track .timer .time {
	color: var(--text-color) !important;
	font-weight: 500 !important;
	min-width: 42px !important;
	text-align: right !important;
}

.bigPlayer .track .timer .elapsedTime {
	color: var(--muted-text-color) !important;
	font-weight: 400 !important;
	min-width: 48px !important;
	text-align: left !important;
}

.bigPlayer .track .timer span:not(.time):not(.elapsedTime) {
	color: var(--muted-text-color-2, #656565) !important;
	margin: 0 2px !important;
}

.bigPlayer .trackInfo .trackName {
	display: flex !important;
	align-items: baseline !important;
	gap: 5px !important;
	flex: 1 !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

.bigPlayer .trackInfo .trackName span {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Track Progress (все transitions из референса) */
.bigPlayer .track *,
.audioEmbed .track *,
.bigPlayer .trackPanel,
.audioEntry,
.audioEntry .subTracks {
	transition: .2s !important;
}

/* Убираем общий transition для selectableTrack, чтобы избежать конфликтов */
/* Transition для selectableTrack задается индивидуально для прогресс-бара и volumePanel */

.bigPlayer .trackPanel .track {
	margin: 4px 0 0 !important;
	padding-bottom: 17px !important;
	/* Убрана transition для margin и padding, чтобы избежать дергания при hover */
	position: relative !important;
	display: flex !important;
	align-items: center !important;
}

/* Track Progress Wrapper - контейнер для прогресс-бара и volumePanel на одном уровне */
.bigPlayer .track .trackProgressWrapper {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	gap: 12px !important;
	position: relative !important;
	flex-wrap: nowrap !important;
}

/* Прогресс-бар - занимает доступное пространство, но не заходит на volumePanel */
.bigPlayer .track .trackProgressWrapper>.selectableTrack[data-seek="true"] {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin-right: 0 !important;
	flex-shrink: 1 !important;
	overflow: hidden !important;
}

/* VolumePanel в trackProgressWrapper - фиксированная ширина справа */
.bigPlayer .track .trackProgressWrapper>.volumePanel {
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
	width: 52px !important;
	min-width: 52px !important;
	max-width: 52px !important;
}

/* Убрано изменение margin-top и padding-bottom при hover, чтобы избежать дергания элементов */

/* Прогресс-бар в bigPlayer */
.bigPlayer .trackProgressWrapper>.selectableTrack[data-seek="true"],
.audioEmbed .track>.selectableTrack {
	--slider-height: 3px !important;
	margin-top: 0 !important;
	border: 0 !important;
	height: var(--slider-height) !important;
	background: var(--audio-slider-color) !important;
	border-radius: 4px !important;
	position: relative !important;
	cursor: pointer !important;
	/* Убрана transition для height, чтобы избежать дергания при hover */
	transition: background-color 0.2s ease !important;
}

.bigPlayer .trackProgressWrapper>.selectableTrack[data-seek="true"]:hover,
.audioEmbed .track>.selectableTrack:hover {
	/* Высота не изменяется при hover, чтобы избежать дергания элементов */
	background: var(--audio-slider-color-2, #e1e8ee) !important;
}

/* Слайдер прогресс-бара */
.bigPlayer .trackProgressWrapper>.selectableTrack[data-seek="true"] .slider,
.audioEmbed .track .slider {
	width: 0% !important;
	height: var(--slider-height) !important;
	background: var(--accent-color) !important;
	bottom: unset !important;
	top: 0 !important;
	left: 0 !important;
	position: absolute !important;
	z-index: 2 !important;
	border-radius: 4px !important;
	/* Убрана transition для height, чтобы избежать дергания при hover */
	transition: width 0.1s linear, background-color 0.2s ease !important;
	min-width: 3px !important;
	box-shadow: 0 0 2px rgba(94, 129, 168, 0.3) !important;
}

.bigPlayer .trackProgressWrapper>.selectableTrack[data-seek="true"]:hover .slider {
	background: var(--accent-color-2, #6888ad) !important;
	box-shadow: 0 0 4px rgba(94, 129, 168, 0.4) !important;
}

/* Load progress только для прогресс-бара (не для volumePanel) - общие стили для других элементов */
.audioEmbed .selectableTrack .selectableTrackLoadProgress,
.bigPlayer .trackProgressWrapper>.selectableTrack[data-seek="true"] .selectableTrackLoadProgress {
	top: 0 !important;
	left: 0 !important;
	height: var(--slider-height) !important;
	position: absolute !important;
	z-index: 1 !important;
	border-radius: 4px !important;
	width: 100% !important;
}

.audioEmbed .selectableTrack .selectableTrackLoadProgress .load_bar,
.bigPlayer .trackProgressWrapper>.selectableTrack[data-seek="true"] .selectableTrackLoadProgress .load_bar {
	background: var(--audio-slider-progress-color) !important;
	border-bottom: 0 !important;
	height: var(--slider-height) !important;
	position: absolute !important;
	border-radius: 4px !important;
	width: 0% !important;
	left: 0 !important;
	top: 0 !important;
	transition: width 0.3s ease !important;
	opacity: 0.6 !important;
}

/* Убираем load progress из volumePanel */
.bigPlayer .track .volumePanel .selectableTrackLoadProgress {
	display: none !important;
}

/* Стили для внутренних div только в прогресс-баре (не в volumePanel) */
.bigPlayer .trackPanel .track .trackProgressWrapper>.selectableTrack[data-seek="true"]>div {
	width: 100% !important;
	font-size: 0 !important;
	line-height: 0 !important;
	position: relative !important;
	height: 100% !important;
}

/* Стили для внутренних div в volumePanel */
.bigPlayer .trackPanel .track .volumePanel .selectableTrack>div {
	width: 100% !important;
	font-size: 0 !important;
	line-height: 0 !important;
	position: relative !important;
	height: 100% !important;
}

/* Volume Panel - горизонтальный после прогресс-бара */
.bigPlayer .track .volumePanel {
	padding: 0 !important;
	width: 52px !important;
	margin-left: 0 !important;
	transition: .2s !important;
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	height: 3px !important;
	min-height: 3px !important;
}

.bigPlayer .track .volumePanel:has(.selectableTrack:hover) {
	padding: 0 !important;
}

.bigPlayer .track .volumePanelTrack {
	position: relative !important;
	width: 100% !important;
	height: 3px !important;
}

.bigPlayer .track .volumePanel .selectableTrack {
	height: 3px !important;
	width: 100% !important;
	background: var(--audio-slider-color) !important;
	border-radius: 4px !important;
	position: relative !important;
	cursor: pointer !important;
	/* Убрана transition для height, чтобы избежать дергания при hover (как в прогресс-баре) */
	transition: background-color 0.2s ease !important;
}

.bigPlayer .track .volumePanel .selectableTrack:hover {
	/* Высота не изменяется при hover, чтобы избежать дергания элементов (как в прогресс-баре) */
	background: var(--audio-slider-color-2, #e1e8ee) !important;
}

.bigPlayer .track .volumePanel .slider {
	height: 3px !important;
	width: 0% !important;
	bottom: 0 !important;
	top: 0 !important;
	left: 0 !important;
	position: absolute !important;
	background: var(--accent-color) !important;
	border-radius: 4px !important;
	z-index: 2 !important;
	/* Убрана transition для height, чтобы избежать дергания при hover (как в прогресс-баре) */
	transition: width 0.1s linear, background-color 0.2s ease !important;
	min-width: 3px !important;
	box-shadow: 0 0 2px rgba(94, 129, 168, 0.3) !important;
}

.bigPlayer .track .volumePanel .selectableTrack:hover .slider {
	/* Высота не изменяется при hover, чтобы избежать дергания элементов (как в прогресс-баре) */
	background: var(--accent-color-2, #6888ad) !important;
	box-shadow: 0 0 4px rgba(94, 129, 168, 0.4) !important;
}

/* Additional Buttons */
.bigPlayer .additionalButtons {
	padding: 0 0 0 10px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
}

.bigPlayer .additionalButtons .repeatButton {
	height: 14px;
	width: 18px;
	background-position: 0px -132px;
}

.bigPlayer .additionalButtons .shuffleButton {
	height: 15px;
	width: 16px;
	background-position: 0px -115px;
}

.bigPlayer .additionalButtons .deviceButton {
	height: 14px;
	width: 13px;
	background-position: 0px -148px;
}

.bigPlayer .additionalButtons .statusButton {
	height: 15px;
	width: 16px;
	background-position: 0px -165px;
}

.bigPlayer .additionalButtons .musicIcon {
	opacity: .7 !important;
	transition: opacity 0.2s ease, transform 0.15s ease !important;
	cursor: pointer !important;
}

.bigPlayer .additionalButtons .musicIcon:hover {
	opacity: 1 !important;
	transform: scale(1.1) !important;
}

.bigPlayer .additionalButtons .musicIcon:active {
	transform: scale(0.95) !important;
}

.bigPlayer .musicIcon.pressed {
	filter: none !important;
	opacity: 1 !important;
}

.bigPlayer .musicIcon.pressed:hover {
	opacity: 1 !important;
}

/* ============================================
   AUDIO POPUP (Modal)
   ============================================ */

#audio_popup_overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
}

#audio_popup_overlay.show {
	display: flex;
}

#audio_popup {
	position: fixed;
	background: #fff;
	border-radius: 4px;
	width: 660px;
	height: 630px;
	overflow: hidden;
	display: none;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
	animation: popupAppear 0.2s ease;
	z-index: 9999;
}

#audio_popup.show {
	display: flex;
}

/* Стрелка вверх (скрыта, не нужна) */
.audio-tippy-arrow {
	display: none !important;
}

/* ============================================
   MUSIC MODAL — standalone popup player
   Scoped under #music-modal-root, zero inheritance
   ============================================ */

#music-modal-root { position: relative; z-index: 10001; }

.music-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10001;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(2px);
	align-items: center;
	justify-content: center;
}
.music-modal-overlay.open { display: flex; }

.music-modal {
	background: #fff;
	border-radius: 12px;
	width: 780px;
	max-width: 95vw;
	height: min(580px, 82vh);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	animation: musicModalIn 0.2s ease;
}
@keyframes musicModalIn {
	from { opacity: 0; transform: scale(0.96) translateY(8px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── HEAD ── */
.music-modal__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	border-bottom: 1px solid #e7e8ec;
	flex-shrink: 0;
	position: relative;
}
.music-modal__now {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}
.music-modal__cover {
	width: 44px; height: 44px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	background: #e9ebee;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.music-modal__cover img { width: 100%; height: 100%; object-fit: cover; }
.music-modal__meta { flex: 1; min-width: 0; overflow: hidden; }
.music-modal__title {
	font-size: 14px; font-weight: 600; color: #222;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	margin-bottom: 2px;
}
.music-modal__artist { font-size: 13px; color: #656e7b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-modal__artist a { color: #656e7b; text-decoration: none; }
.music-modal__artist a:hover { color: #4c637b; text-decoration: underline; }

.music-modal__ctrls {
	display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.music-modal__btn {
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: none;
	color: #99a2ad; font-size: 13px;
	cursor: pointer; border-radius: 50%;
	transition: color 0.15s, background 0.15s;
}
.music-modal__btn:hover { color: #4c637b; background: #f0f2f5; }
.music-modal__btn.pressed { color: #4c637b !important; }
.music-modal__btn--play {
	width: 36px; height: 36px;
	background: #4c637b; color: #fff !important;
	box-shadow: 0 2px 6px rgba(76,99,123,0.25);
}
.music-modal__btn--play:hover { background: #3d5166; transform: scale(1.06); }
.music-modal__btn--play i { font-size: 13px; margin-left: 2px; }
.music-modal__btn--play .fa-pause { margin-left: 0; }
.music-modal__head-spacer { flex: 1; }
.music-modal__close {
	width: 30px; height: 30px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: none; border: none;
	color: #bcc3cd; font-size: 15px;
	cursor: pointer; border-radius: 50%;
	transition: color 0.15s, background 0.15s;
	margin-left: 4px;
}
.music-modal__close:hover { color: #222; background: #f0f2f5; }

/* ── PROGRESS ── */
.music-modal__progress {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 20px; flex-shrink: 0;
	border-bottom: 1px solid #f0f2f5;
}
.music-modal__time {
	font-size: 11px; color: #99a2ad; font-weight: 500;
	font-variant-numeric: tabular-nums; min-width: 32px;
	text-align: center; user-select: none;
}
/* Прогресс-бар — цвета как в bigPlayer, высота 6px */
#music-modal-root .music-modal__bar {
	flex: 1;
	height: 6px !important;
	background: var(--audio-slider-color, #e4e7ea) !important;
	border-radius: 4px !important;
	position: relative;
	cursor: pointer;
}
#music-modal-root .selectableTrack[data-seek="true"]:hover {
	height: 6px !important;
	margin-top: 0 !important;
}
#music-modal-root .selectableTrack[data-seek="true"]:hover .slider::after {
	display: none;
}
#music-modal-root .selectableTrackLoadProgress {
	position: absolute; inset: 0;
	z-index: 1; border-radius: 4px;
}
#music-modal-root .selectableTrackLoadProgress .load_bar {
	background: var(--audio-slider-progress-color, #b8c7d7) !important;
	height: 100%; position: absolute;
	border-radius: 4px; left: 0; top: 0;
	transition: width 0.3s;
}
#music-modal-root .music-modal__bar .slider {
	height: 100% !important;
	background: var(--accent-color, #5e81a8) !important;
	border-radius: 4px;
	position: absolute; top: 0; left: 0;
	z-index: 2;
	transition: width 0.1s linear;
	box-shadow: 0 0 2px rgba(94, 129, 168, 0.3);
}
.music-modal__vol-icon {
	color: #99a2ad; font-size: 14px; cursor: pointer;
	margin-left: 6px; transition: color 0.15s;
}
.music-modal__vol-icon:hover { color: #4c637b; }
.music-modal__vol-icon.pressed { color: #4c637b; }
.music-modal__vol {
	width: 60px; height: 6px;
	background: var(--audio-slider-color, #e4e7ea);
	border-radius: 4px; cursor: pointer; position: relative;
}
.music-modal__vol .slider {
	height: 100%;
	background: var(--accent-color, #5e81a8);
	border-radius: 4px;
	position: absolute; top: 0; left: 0;
	box-shadow: 0 0 2px rgba(94, 129, 168, 0.3);
}

/* ── BODY ── */
.music-modal__body {
	flex: 1; display: flex; min-height: 0; overflow: hidden;
}
.music-modal__tracks {
	flex: 1; display: flex; flex-direction: column; min-height: 0;
	border-right: 1px solid #e7e8ec;
}
.music-modal__subhead {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px 8px; flex-shrink: 0;
	font-size: 14px; font-weight: 600; color: #222;
}
.music-modal__shuffle {
	font-size: 13px; color: #4c637b; cursor: pointer;
	font-weight: 500; transition: opacity 0.15s;
}
.music-modal__shuffle:hover { opacity: 0.7; }
.music-modal__shuffle.pressed { color: #4c637b; font-weight: 600; }
.music-modal__shuffle i { margin-right: 4px; font-size: 11px; }
.music-modal__list {
	flex: 1; min-height: 0;
	overflow-y: auto; overflow-x: hidden;
	padding: 0 8px 8px;
}
.music-modal__list::-webkit-scrollbar { width: 5px; }
.music-modal__list::-webkit-scrollbar-track { background: transparent; }
.music-modal__list::-webkit-scrollbar-thumb { background: #dce1e6; border-radius: 3px; }
.music-modal__list::-webkit-scrollbar-thumb:hover { background: #c5c9cc; }

.music-modal__friends {
	width: 260px; flex-shrink: 0;
	background: #fafbfc; padding: 0 12px;
	display: flex; flex-direction: column;
	overflow: hidden;
}
.music-modal__friends .music-modal__subhead { padding: 12px 4px 8px; }
.music-modal__friends-list {
	flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
	display: flex; flex-direction: column; gap: 6px;
	padding-right: 6px;
}
.music-modal__more {
	width: 100%; background: #f0f2f5; color: #4c637b;
	border: none; border-radius: 6px; padding: 7px 12px;
	font-size: 13px; font-weight: 500; cursor: pointer;
}
.music-modal__more:hover { background: #e4e6eb; }

/* ── FOOTER ── */
.music-modal__foot {
	height: 38px; background: #fafbfc; border-top: 1px solid #e7e8ec;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 20px; font-size: 12px; color: #656e7b; flex-shrink: 0;
}
.music-modal__foot-action {
	color: #4c637b; cursor: pointer; font-weight: 500;
}
.music-modal__foot-action:hover { text-decoration: underline; }

/* ── Track items in modal ── */
#music-modal-root .audioEntry {
	border-radius: 6px; margin-bottom: 1px;
	padding: 5px 8px !important; border: none !important;
	transition: background 0.1s;
}
#music-modal-root .audioEntry:hover { background: #f0f2f5 !important; }
#music-modal-root .audioEntry.nowPlaying { background: rgba(76,99,123,0.06) !important; }
#music-modal-root .audioEntry .track__poster img { border-radius: 4px; }

/* ── Friends in modal ── */
/* Друзья в попапе — компактная версия profile-side-item */
#music-modal-root .audio__friend {
	display: flex;
	align-items: center;
	padding: 6px 8px;
	border-radius: 10px;
	cursor: pointer;
	transition: transform 0.2s;
	text-decoration: none;
}
#music-modal-root .audio__friend:hover {
	transform: translateX(3px);
}
#music-modal-root .audio__friend-ava {
	width: 36px; height: 36px;
	margin-right: 10px; flex-shrink: 0;
}
#music-modal-root .audio__friend-ava img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
#music-modal-root .audio__friend-info {
	flex-grow: 1; overflow: hidden;
	display: flex; flex-direction: column;
	justify-content: center;
}
#music-modal-root .audio__friend-name {
	font-size: 13px; font-weight: 500; color: #222;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	line-height: 1.2;
}
#music-modal-root .audio__friend-count {
	font-size: 11.5px; color: #828a99; margin-top: 1px;
}


/* ============================================
   AUDIO FRIENDS
   ============================================ */

.audio__friends {
	padding: 8px 15px;
	max-height: 400px;
	overflow-y: auto;
}

.audio__friend {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 6px 0 !important;
	color: #2a5885 !important;
	text-decoration: none !important;
	transition: opacity 0.15s !important;
	cursor: pointer !important;
}

.audio__friend:hover {
	opacity: 0.8 !important;
	text-decoration: none !important;
}

.audio__friend_avatar {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
}

.audio__friend_info {
	flex: 1 !important;
	min-width: 0 !important;
}

.audio__friend_name {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #2a5885 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.audio__friend_count {
	font-size: 12px !important;
	color: var(--muted-text-color) !important;
}

/* ============================================
   VERTICAL TABS (Sidebar Menu)
   ============================================ */

.verticalGrayTabsWrapper {
	margin-bottom: 10px !important;
}

.verticalGrayTabs {
	background: #fff !important;
	border-radius: var(--module-border-radius, 2px) !important;
	box-shadow: 0 1px 0 0 #d7d8db, 0 0 0 1px #e3e4e8 !important;
}

.verticalGrayTabs .with_padding {
	padding: 6px 0 !important;
}

.verticalGrayTabs a {
	display: block !important;
	padding: 7px 5px 7px 18px !important;
	color: var(--accent-color, #5e81a8) !important;
	text-decoration: none !important;
	font-size: 12.5px !important;
	transition: background 0.1s !important;
	cursor: pointer !important;
	border-left: 2px solid transparent !important;
}

.verticalGrayTabs a:hover {
	text-decoration: none !important;
	background: var(--audio-background-color-2, #f5f7fa) !important;
}

.verticalGrayTabs #used {
	color: var(--text-color) !important;
	font-weight: 500 !important;
	padding: 7px 5px 7px 18px !important;
	border: 0 !important;
	border-left: solid 2px var(--accent-color-3) !important;
	background: var(--audio-background-color-2) !important;
}

.verticalGrayTabs hr {
	margin: 6px 0;
	border: 0;
	border-top: 1px solid var(--border-color, #e7e8ec);
}

/* My Audio Tab with Add Button */
.myaudiotab {
	display: flex !important;
	align-items: center !important;
	position: relative !important;
}

.myaudiotab a:not(.addAudioSmall) {
	flex: 1 !important;
}

.addAudioSmall {
	width: 24px !important;
	height: 24px !important;
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0.7 !important;
	transition: opacity 0.2s !important;
}

.addAudioSmall:hover {
	opacity: 1 !important;
}

.addAudioSmall .addIcon {
	width: 16px;
	height: 16px;
	background: url(/design/VK/img/common.png) no-repeat;
	background-position: 0px 1px;
	/* Иконка загрузки (add icon) */
}

/* Friends Audio List */
.friendsAudiosList {
	padding: 6px 0 0 !important;
	border-top: 1px solid var(--border-color, #e7e8ec) !important;
}

.friendsAudiosList a {
	display: block;
	padding: 0 !important;
	border: 0 !important;
}

.friendsAudiosList a:hover {
	background: transparent !important;
}

.friendsAudiosList .elem {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 15px !important;
	transition: background 0.1s !important;
	cursor: pointer !important;
}

.friendsAudiosList .elem:hover {
	background: var(--audio-background-color-2, #f5f7fa);
}

.friendsAudiosList .elem img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.friendsAudiosList .additionalInfo {
	flex: 1 !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

.friendsAudiosList .additionalInfo .name {
	font-size: 13px;
	font-weight: 400;
	color: var(--accent-color, #5e81a8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.friendsAudiosList .additionalInfo .desc {
	font-size: 12px;
	color: var(--muted-text-color, #939393);
	display: block;
}

/* ============================================

/* ═══════════════ Profile — Favorite genres (fav_genres) ═══════════════ */
.profile-genres {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    padding: 17px 20px 18px;
    margin-bottom: 20px;
}
.profile-genres__title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #828a99;
    margin-bottom: 12px;
}
.profile-genres__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.profile-genre-chip {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(81, 129, 184, 0.08);
    color: #5181b8;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.profile-genre-chip:hover {
    background: #5181b8;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(81, 129, 184, 0.2);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
   TELEGRAM-LIKE MESSAGES — полная переработка (2026-04-18)
   Автор: Чепела Даниил Максимович
   Перезаписывает старые .message__* стили.
   ═══════════════════════════════════════════════════════════ */

/* Переменные */
:root {
	--tg-bg-chat:        #f4f6fa;
	--tg-bg-own:         #e3f2fd;
	--tg-bg-other:       #ffffff;
	--tg-text-own:       #25302b;
	--tg-text-other:     #25302b;
	--tg-text-muted:     #8a95a5;
	--tg-accent:         #4c637b;
	--tg-accent-dark:    #3a506b;
	--tg-border:         #e5e9ef;
	--tg-hover:          #f0f2f5;
	--tg-active:         #e8f0f9;
	--tg-shadow-msg:     0 1px 2px rgba(0,0,0,0.08);
	--tg-radius:         14px;
	--tg-radius-tail:    4px;
}

/* ─── Контейнер ленты сообщений ─── */
.messagespanel {
	min-height: calc(100vh - 120px);
	padding: 0 !important;
	overflow: hidden;
}
.messagescontent {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 120px);
}
.messagescontent.hidden { display: none !important; }
.messagescontent__feed {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px 8px;
	background: var(--tg-bg-chat);
	scrollbar-width: thin;
}
.messagescontent__feed::-webkit-scrollbar { width: 6px; }
.messagescontent__feed::-webkit-scrollbar-thumb { background: #d6dbe3; border-radius: 3px; }
.messagescontent__feed::-webkit-scrollbar-thumb:hover { background: #b9c2ce; }

/* ─── Шапка чата/беседы ─── */
.messagescontent__userinfo {
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 12px;
	padding: 12px 20px !important;
	background: #fff !important;
	border-bottom: 1px solid var(--tg-border);
	flex-shrink: 0;
	height: auto !important;
}
.messagescontent__ava { padding: 0 !important; height: 42px !important; }
.messagescontent__ava {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}
.messagescontent__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.messagescontent__aboutuser {
	flex: 1;
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
}
.messagescontent__aboutusername {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #25302b;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.messagescontent__aboutusername:hover { color: var(--tg-accent); }
.messagescontent__aboutuseronline {
	display: block;
	font-size: 12px;
	color: var(--tg-text-muted);
	line-height: 1.4;
	margin-top: 2px;
}
.messagescontent__aboutuseronline i { margin-right: 4px; }
.messagescontent__back {
	cursor: pointer;
	padding: 4px 8px;
	color: var(--tg-text-muted);
}

/* ─── Дата-разделитель (pill-стиль как в Telegram) ─── */
.message__date {
	display: flex;
	justify-content: center;
	margin: 14px 0 10px;
	position: sticky;
	top: 4px;
	z-index: 2;
	pointer-events: none;
}
.messages__datespan {
	background: rgba(30, 42, 56, 0.48);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 12px;
	backdrop-filter: blur(6px);
}
.message__date::before,
.message__date::after { content: none !important; }

/* ─── Системное сообщение ─── */
.message__system {
	display: flex;
	justify-content: center;
	margin: 10px 0;
}
.message__systemtext {
	background: rgba(30, 42, 56, 0.08);
	color: #5a6876;
	font-size: 12.5px;
	padding: 5px 14px;
	border-radius: 12px;
	line-height: 1.4;
	max-width: 80%;
	text-align: center;
}

/* ─── Сообщения: общий контейнер ─── */
.message__left,
.message__right {
	display: flex;
	align-items: flex-end;
	margin: 2px 0;
	padding: 0;
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.message__left { justify-content: flex-start; padding-left: 0; }
.message__right { justify-content: flex-end; padding-right: 0; }

/* Аватарка в беседах (слева) */
.message__talk-ava {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	margin-right: 8px;
	margin-bottom: 2px;
}
.message__talk-ava img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
/* Когда предыдущее сообщение от того же автора — прячем аватар, оставляем отступ */
.message__left.message__left--grouped .message__talk-ava { visibility: hidden; }

/* Тело сообщения для беседы (слева) */
.message__talk-body {
	display: flex;
	flex-direction: column;
	max-width: 70%;
	min-width: 0;
}

/* Имя автора (только в беседах, только у первого в группе) */
.message__talk-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tg-accent);
	margin: 0 12px 2px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.message__talk-name a {
	color: inherit;
	text-decoration: none;
}
.message__talk-name a:hover { text-decoration: underline; }
.message__left.message__left--grouped .message__talk-name { display: none; }

/* Пузырь */
.message__align-left,
.message__align-right {
	display: inline-block;
	padding: 7px 12px 6px;
	border-radius: var(--tg-radius);
	word-wrap: break-word;
	word-break: break-word;
	max-width: 100%;
	position: relative;
	line-height: 1.4;
	font-size: 14px;
	box-shadow: var(--tg-shadow-msg);
}
.message__align-left {
	background: var(--tg-bg-other) !important;
	color: var(--tg-text-other) !important;
	border-bottom-left-radius: var(--tg-radius-tail);
	border-radius: var(--tg-radius) var(--tg-radius) var(--tg-radius) var(--tg-radius-tail);
}
.message__align-right {
	background: var(--tg-bg-own) !important;
	color: var(--tg-text-own) !important;
	border-bottom-right-radius: var(--tg-radius-tail);
	border-radius: var(--tg-radius) var(--tg-radius) var(--tg-radius-tail) var(--tg-radius);
}
.message__align-left .message__span { color: var(--tg-text-other) !important; background: transparent !important; padding: 0 !important; }
.message__align-right .message__span { color: var(--tg-text-own) !important; background: transparent !important; padding: 0 !important; }
/* В беседах свои тоже справа, но без аватара рядом */
.message__right .message__align-right { margin-right: 0; }

/* Текст внутри */
.message__span {
	display: block;
	word-wrap: break-word;
	white-space: pre-wrap;
}
.message__span a {
	color: var(--tg-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.message__span a:hover { color: var(--tg-accent-dark); }

/* Дата под сообщением */
.message__spandate {
	display: block;
	font-size: 11px;
	color: var(--tg-text-muted);
	margin: 2px 12px 0;
	line-height: 1;
	text-align: right;
}
.message__left .message__spandate { text-align: left; }
.message__status {
	margin-left: 4px;
	color: var(--tg-accent);
	font-size: 10px;
}
.message__status.read { color: #4cab62; }

/* Картинки в сообщениях */
.massage__img-left,
.massage__img-right {
	display: block;
	max-width: 260px;
	max-height: 260px;
	border-radius: 12px;
	cursor: pointer;
	margin: 0;
}
/* Если пузырь содержит ТОЛЬКО картинку — убираем фон и паддинг */
.message__align-left:has(> .massage__img-left:only-child),
.message__align-right:has(> .massage__img-right:only-child) {
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 12px !important;
	overflow: hidden;
}
/* Стикеры (im_gift) — всегда без пузыря */
.message__align-left:has(.im_gift),
.message__align-right:has(.im_gift) {
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.im_gift {
	display: block;
	max-width: 180px;
	max-height: 180px;
}

/* Голосовое — inline, без фона пузыря (для right — светлее) */
.message__align-left:has(> .voice__msg:only-child),
.message__align-right:has(> .voice__msg:only-child) {
	padding: 4px 6px !important;
}

/* Голосовое сообщение — пилл-стиль */
.voice__msg {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 10px 4px 4px;
	cursor: pointer;
	min-width: 180px;
	user-select: none;
}
.voice__button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--tg-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}
.voice__button .voice__play,
.voice__button .voice__stop {
	font-size: 13px;
	line-height: 1;
	color: #fff;
}
.voice__button .voice__stop { display: none; }
.voise__title {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	color: var(--tg-text-other);
	line-height: 1.3;
}
.voise__title span {
	font-size: 11px;
	color: var(--tg-text-muted);
}
.message__right .voice__msg .voice__button { background: var(--tg-accent-dark); }
.message__right .voise__title { color: var(--tg-text-own); }

/* ─── Поле ввода — светлое, округлое ─── */
.typemessage {
	display: flex !important;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 16px !important;
	background: #fff;
	border-top: 1px solid var(--tg-border);
	flex-shrink: 0;
}
.typemessage__smiles,
.typemessage__actitem {
	width: 36px;
	height: 36px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	color: var(--tg-text-muted);
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
}
.typemessage__smiles:hover,
.typemessage__actitem:hover {
	background: var(--tg-hover);
	color: var(--tg-accent);
}
.typemessage__acticon {
	font-size: 17px;
	color: inherit;
}
.typemessage__textarea {
	flex: 1;
	min-height: 36px;
	max-height: 120px;
	overflow-y: auto;
	padding: 8px 14px !important;
	background: var(--tg-bg-chat);
	border: 1px solid var(--tg-border);
	border-radius: 18px;
	font-size: 14px;
	line-height: 1.4;
	outline: none;
	word-wrap: break-word;
}
.typemessage__textarea:focus {
	border-color: var(--tg-accent);
	background: #fff;
}
.typemessage__textarea[data-placeholder]:empty::before {
	content: attr(data-placeholder);
	color: var(--tg-text-muted);
	pointer-events: none;
}
.typemessage__actions {
	display: flex !important;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.typemessage__button .btn {
	padding: 8px 18px;
	border-radius: 18px;
	font-size: 13px;
	font-weight: 500;
}
.typemessage__button .btn-primary {
	background: var(--tg-accent);
	border-color: var(--tg-accent);
}
.typemessage__button .btn-primary:hover {
	background: var(--tg-accent-dark);
	border-color: var(--tg-accent-dark);
}

/* Запись голосового */
.typemessage__actions .record {
	color: #e64646;
	animation: recordPulse 1.2s ease-in-out infinite;
}
@keyframes recordPulse {
	0%, 100% { opacity: 0.6; }
	50%      { opacity: 1; }
}
.typemessage__actions .record__text {
	color: #e64646;
	font-weight: 500;
	font-size: 12px;
}

/* ─── Таб-список чатов (sidebar) ─── */
.tabmessages__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	border-radius: 10px;
	margin: 2px 6px;
	transition: background 0.15s;
	position: relative;
}
.tabmessages__item:hover { background: var(--tg-hover); }
.tabmessages__item.active,
.tabmessages__item[style*="background: rgb(240, 242, 245)"] {
	background: var(--tg-active) !important;
}
.tabmessages__ava {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
	display: block;
}
.tabmessages__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.tabmessages__online {
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #ccc;
}
.tabmessages__online.online { background: #4cab62; }
.tabmessages__online.offline { display: none; }
.tabmessages__info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.tabmessages__name {
	display: block !important;
	font-size: 14px;
	font-weight: 600;
	color: #25302b;
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}
.tabmessages__msg {
	font-size: 12.5px;
	color: var(--tg-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
	margin-top: 1px;
}
.tabmessages__verify { color: var(--tg-accent); font-size: 11px; margin-left: 2px; }
.tabmessages__item .paneledit {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--tg-text-muted);
	cursor: pointer;
}
.tabmessages__item:hover .paneledit {
	display: flex;
	background: #fff;
}
.tabmessages__item .paneledit:hover { color: #e64646; background: #fde4e4; }

/* MsgNew badge */
.MsgNew {
	background: var(--tg-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 10px;
	min-width: 20px;
	text-align: center;
	flex-shrink: 0;
}

/* Табы "Диалоги / Беседы" */
.msg-tabs {
	display: flex;
	border-bottom: 1px solid var(--tg-border);
	padding: 0 6px;
}
.msg-tabs__item {
	flex: 1;
	padding: 12px 6px;
	text-align: center;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--tg-text-muted);
	border-bottom: 2px solid transparent;
	text-decoration: none !important;
	transition: color 0.15s, border-color 0.15s;
}
.msg-tabs__item:hover { color: var(--tg-accent); }
.msg-tabs__item--active {
	color: var(--tg-accent);
	border-bottom-color: var(--tg-accent);
}
.msg-tabs__item i { margin-right: 6px; }

/* Поиск в панели */
.panelsearch-messges-panel {
	padding: 8px 12px !important;
	position: relative;
}
.panelsearch-messges-panel .panelsearch__textarea {
	width: 100%;
	padding: 8px 14px 8px 34px !important;
	background: var(--tg-bg-chat);
	border: 1px solid transparent;
	border-radius: 18px;
	font-size: 13px;
	line-height: 1.3;
	outline: none;
}
.panelsearch-messges-panel .panelsearch__textarea:focus {
	background: #fff;
	border-color: var(--tg-accent);
}
.panelsearch-messges-panel .panelsearch__icon {
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tg-text-muted);
	font-size: 12px;
	pointer-events: none;
}

/* ─── Заголовок беседы: действия справа ─── */
.talk-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.talk-header__action {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	color: var(--tg-text-muted);
	transition: background 0.15s, color 0.15s;
}
.talk-header__action:hover {
	background: var(--tg-hover);
	color: var(--tg-accent);
}

/* ─── Настройки беседы (новая модалка .tg-settings) ─── */
.tg-settings { padding: 0; }
.tg-settings__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--tg-border);
	background: linear-gradient(180deg, #fafbfd, #fff);
}
.tg-settings__avawrap {
	position: relative;
	width: 96px;
	height: 96px;
	margin-bottom: 12px;
}
.tg-settings__ava {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.tg-settings__avaedit {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background: var(--tg-accent);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	border: 2px solid #fff;
	transition: background 0.15s;
}
.tg-settings__avaedit:hover { background: var(--tg-accent-dark); }
.tg-settings__avaedit i { font-size: 12px; }
.tg-settings__titlewrap {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	max-width: 360px;
}
.tg-settings__titleinput {
	flex: 1;
	padding: 8px 14px;
	border: 1px solid var(--tg-border);
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	color: #25302b;
	text-align: center;
	outline: none;
	background: #fff;
}
.tg-settings__titleinput:focus { border-color: var(--tg-accent); }
.tg-settings__titlesave {
	width: 34px;
	height: 34px;
	border: none;
	background: var(--tg-accent);
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s;
}
.tg-settings__titlesave:hover { background: var(--tg-accent-dark); }
.tg-settings__title {
	font-size: 17px;
	font-weight: 600;
	color: #25302b;
	text-align: center;
	width: 100%;
}
.tg-settings__sub {
	font-size: 13px;
	color: var(--tg-text-muted);
	margin-top: 4px;
}

.tg-settings__section {
	padding: 12px 0 8px;
	border-bottom: 1px solid var(--tg-border);
}
.tg-settings__sectitle {
	font-size: 13px;
	font-weight: 500;
	color: var(--tg-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 4px 20px 8px;
}
.tg-settings__adduser {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px;
	cursor: pointer;
	transition: background 0.15s;
}
.tg-settings__adduser:hover { background: var(--tg-hover); }
.tg-settings__addicon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tg-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tg-settings__addtext {
	font-size: 14px;
	color: var(--tg-accent);
	font-weight: 500;
}

.tg-settings__footer { padding: 8px 0; }
.tg-settings__action {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px;
	cursor: pointer;
	transition: background 0.15s;
}
.tg-settings__action:hover { background: var(--tg-hover); }
.tg-settings__action i {
	width: 22px;
	text-align: center;
	font-size: 15px;
}
.tg-settings__action span { font-size: 14px; font-weight: 500; }
.tg-settings__action--warn { color: #d47026; }
.tg-settings__action--danger { color: #e64646; }

/* ─── Участник в настройках ─── */
.tg-member {
	display: flex;
	align-items: center;
	padding: 8px 20px;
	gap: 12px;
	position: relative;
	transition: background 0.15s;
}
.tg-member:hover { background: var(--tg-hover); }
.tg-member__link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	text-decoration: none !important;
	color: inherit;
}
.tg-member__ava {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.tg-member__info {
	flex: 1;
	min-width: 0;
}
.tg-member__name {
	font-size: 14px;
	font-weight: 500;
	color: #25302b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tg-member__sub {
	font-size: 12px;
	color: var(--tg-text-muted);
	line-height: 1.3;
}
.tg-member__role {
	display: inline-block;
	font-size: 11px;
	padding: 1px 8px;
	border-radius: 8px;
	background: var(--tg-hover);
	color: var(--tg-text-muted);
}
.tg-member__role--owner {
	background: #fff4dc;
	color: #c89128;
}
.tg-member__role--admin {
	background: #e3eef9;
	color: var(--tg-accent);
}

.tg-member__dots {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	color: var(--tg-text-muted);
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s;
}
.tg-member__dots:hover {
	background: var(--tg-hover);
	color: #25302b;
}
.tg-member__menu { display: none !important; }
.tg-member__dropdown {
	position: fixed !important;
	display: block !important;
	background: #fff;
	border: 1px solid var(--tg-border);
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.12);
	padding: 6px;
	min-width: 220px;
	z-index: 10020 !important;
}
.tg-member__menuitem {
	padding: 9px 12px;
	font-size: 13px;
	color: #25302b;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.1s;
}
.tg-member__menuitem:hover { background: var(--tg-hover); }
.tg-member__menuitem--danger { color: #e64646; }
.tg-member__menuitem--danger:hover { background: #fde4e4; }

/* ─── Модалка: общие стили (rounded, чистая шапка) ─── */
.modal-content {
	border-radius: 14px !important;
	border: none !important;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.modal-header {
	padding: 14px 20px !important;
	border-bottom: 1px solid var(--tg-border);
}
.modal-title {
	font-size: 16px;
	font-weight: 600;
	color: #25302b;
}
.modal-body { padding: 0 !important; }

.profile-message-box {
	padding: 18px 20px 20px;
}

.profile-message-box__field {
	min-height: 112px;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
	color: #1f2937;
	font-size: 14px;
	line-height: 1.5;
	outline: none;
	transition: border-color .18s, box-shadow .18s, background .18s;
}

.profile-message-box__field:focus {
	border-color: #5181b8;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(81, 129, 184, 0.12);
}

.profile-message-box__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

.profile-message-box__button {
	min-width: 132px;
}

/* Модалка создания беседы */
.talk-create {
	padding: 16px 20px;
}
.talk-create__label {
	margin-bottom: 10px;
	font-size: 13px;
	color: var(--tg-text-muted);
}
.talk-create__friends {
	max-height: 340px;
	overflow-y: auto;
	margin: 0 -4px;
}
.talk-friend {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.15s;
}
.talk-friend:hover { background: var(--tg-hover); }
.talk-friend.selected { background: var(--tg-active); }
.talk-friend__ava {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}
.talk-friend__name {
	flex: 1;
	font-size: 14px;
	color: #25302b;
}
.talk-friend__check {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tg-accent);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}

/* Load more */
.talk-load-more {
	display: flex;
	justify-content: center;
	margin: 4px 0 10px;
}
.talk-load-more span {
	font-size: 12px;
	color: var(--tg-accent);
	background: rgba(30,42,56,0.06);
	padding: 5px 14px;
	border-radius: 12px;
	cursor: pointer;
}
.talk-load-more span:hover { background: rgba(30,42,56,0.12); }

/* Typing */
.typing-talk {
	padding: 4px 20px 6px;
	font-size: 12px;
	color: var(--tg-accent);
	font-style: italic;
	animation: typingPulse 1.2s ease-in-out infinite;
}
@keyframes typingPulse {
	0%, 100% { opacity: 0.6; }
	50%      { opacity: 1; }
}

/* Выделение для удаления (админ) */
.talk-msg-selected .message__align-left,
.talk-msg-selected .message__align-right {
	outline: 2px solid #e64646;
	outline-offset: 2px;
}

/* "Нет диалогов/бесед" */
.nomessages {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 200px);
}
.nomessages.hidden { display: none !important; }
.nomessages__icon {
	font-size: 90px;
	color: #d4dae3;
	margin-bottom: 12px;
}
.nomessages__span {
	font-size: 14px;
	color: var(--tg-text-muted);
	text-align: center;
	padding: 0 30px;
}
.nomessages__link {
	color: var(--tg-accent);
	text-decoration: none;
}
.nomessages__link:hover { text-decoration: underline; }