@charset "utf-8";

/* Переменные */
:root {
	--main-color: #613098;
	--border-first: #e0e0e0;
	--border-second: #3a3a3a;
	--color-dark: #101011;
	--color-first: #ffffff;
	--color-second: #6a6a6a;
	--color-third: #a8a8a8;
	--color-error: #e80606;
	--color-ai-text: #ff51cb;
	--color-ai-image: #b47ff0;
	--color-ai-video: #6cb6ff;
	--color-ai-audio: #c35183;
	--nav-width: 80px;
	--aside-width: 276px;
	--content-gap: 20px;
}

/* Базовые стили */
body {
	position: relative;
	background: #000 url(../img/bg.jpg) fixed 0 0 / cover no-repeat;
	background-size: cover;
	font-family: 'Inter';
	font-weight: normal;
    font-style: normal;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-first);
}
body.page404 {
	background: #000 url(../img/404-bg.jpg) 50% 50% no-repeat;
}
body::after {
	content: '';
	position: fixed;
	bottom: 0;
	left: -999999px;
	z-index: 10;
	display: block;
	opacity: 0;
	width: 100%;
	height: 52px;
	background: linear-gradient(0deg, #13091E 0%, rgb(17 8 29 / 0%) 100%);
	pointer-events: none;
}
body.overflow::after {
	left: 80px;
	opacity: 1;
	transition: opacity .3s ease;
}
input,
textarea {
	font-family: 'Inter';
}
h1 {
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
	color: var(--color-first);
}
h2 {
	margin-bottom: 12px;
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	color: var(--color-first);
}
h3 {
	margin-bottom: 12px;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-first);
}

/* Вспомогательные классы */
.clear::after {
	content: '';
	display: table;
	clear: both;
}
.text-center {
	text-align: center;
}
.flex {
	display: flex;
}
.flex-column {
	flex-direction: column;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-1 {
	flex: 1;
}
.flex-100 {
    flex: 0 1 100%;
	min-width: 0;
}
.flex-50 {
    flex: 0 1 50%;
	min-width: 0;
}
.flex-33 {
    flex: 0 1 calc(100% / 3);
	min-width: 0;
}
.flex-25 {
    flex: 0 1 25%;
	min-width: 0;
}
.flex-20 {
    flex: 0 1 20%;
	min-width: 0;
}
.jcs {
	justify-content: flex-start;
}
.jcc {
	justify-content: center;
}
.jce {
	justify-content: flex-end;
}
.jcsb {
	justify-content: space-between;
}
.jcsa {
	justify-content: space-around;
}
.ais {
	align-items: flex-start;
}
.aic {
	align-items: center;
}
.aie {
	align-items: flex-end;
}
.aib {
	align-items: baseline;
}
.aish {
	align-items: stretch;
}
.grid {
	display: grid;
	--grid: 1;
	grid-template-columns: repeat(var(--grid), 1fr);
}
.grid-2 {
	--grid: 2;
}
.grid-3 {
	--grid: 3;
}
.grid-4 {
	--grid: 4;
}
.grid-5 {
	--grid: 5;
}
.gap {
	--gap: 0;
	gap: var(--gap);
}
.gap--16 {
	--gap: 16px;
}
.gap--20 {
	--gap: 20px;
}
.gap--28 {
	--gap: 28px;
}
.gap--36 {
	--gap: 36px;
}
.mb {
    --mb: 0;
    margin-bottom: var(--mb);
}
.mt {
    --mt: 0;
    margin-top: var(--mt);
}
.mb--16 {
	margin-bottom: 16px;
}
.mb--24 {
	margin-bottom: 24px;
}
.mb--32 {
	margin-bottom: 32px;
}
.mb--40 {
	margin-bottom: 40px;
}
.mt--16 {
	margin-top: 16px;
}
.mt--24 {
	margin-top: 24px;
}
.mt--32 {
	margin-top: 32px;
}
.mt--40 {
	margin-top: 40px;
}
.hidden {
	display: none;
}
.required {
	color: var(--main-color);
}

/* Контент */
.page {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 325px;
	min-height: 100dvh;
}
.page--aside {
	--content-offset: calc(var(--nav-width) + var(--content-gap));
}
.page--aside.open {
	--content-offset: calc(var(--nav-width) + var(--aside-width) + var(--content-gap));
}
.page--aside .wrapper {
	padding-left: var(--content-offset);
	transition: padding-left .25s ease;
}
.page--chat {
	height: 100dvh;
	overflow: hidden;
}
.page--chat .wrapper--center-y {
	min-height: 0;
	align-items: stretch;
}
.wrapper {
	position: relative;
	padding: 20px 20px 20px 100px;
	width: 100%;
	max-width: 1440px;
	height: 100%;
}
.wrapper--full-y {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: auto;
}
.wrapper--center-y {
	flex: 1;
	display: grid;
	align-items: center;
	height: auto;
}

.link {
	display: inline-flex;
	align-items: center;
	margin-bottom: 12px;
	gap: 4px;
}
.link span {
	text-decoration: underline;
}
.link:hover span {
	text-decoration: none;
}
.link .icon {
	width: 16px;
	height: 16px;
	color: var(--color-first);
}

@property --grad-h {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 62.13%;
}
@property --grad-v {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 197.73%;
}
@property --light-angle {
  syntax: '<angle>';
  initial-value: 243.67deg;
  inherits: false;
}
@property --light-stop1 {
  syntax: '<percentage>';
  initial-value: 27.35%;
  inherits: false;
}
@property --light-stop2 {
  syntax: '<percentage>';
  initial-value: 118.38%;
  inherits: false;
}
.btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0 20px;
	height: 40px;
	background: radial-gradient(var(--grad-h) var(--grad-v) at 50.25% 50%, #613098 0%, #2D0060 100%);
	border: 0;
	border-radius: 40px;
	text-align: center;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-first);
	transition: --grad-h .2s ease, --grad-v .2s ease;
}
.btn:disabled {
	opacity: .4;
}
.btn:not(:disabled):hover {
	--grad-h: 29.52%;
	--grad-v: 93.97%;
}
.btn:not(:disabled):active {
	--grad-h: 105.32%;
	--grad-v: 335.21%;
}
.btn-light {
	padding: 0 16px;
	gap: 8px;
	background: linear-gradient(var(--light-angle), var(--color-first) var(--light-stop1), #999 var(--light-stop2));
	font-size: 15px;
	color: var(--main-color);
	--light-angle: 243.67deg;
	--light-stop1: 27.35%;
	--light-stop2: 118.38%;
	transition: --light-angle .2s ease, --light-stop1 .2s ease, --light-stop2 .2s ease;
}
.btn-light:not(:disabled):hover {
	--light-angle: 237.13deg;
	--light-stop1: 0.39%;
	--light-stop2: 66.98%;
}
.btn-light:not(:disabled):active {
	--light-angle: 248.63deg;
	--light-stop1: 7.55%;
	--light-stop2: 157.27%;
}
.btn-light .icon {
	width: 20px;
	height: 20px;
}
.btn-opacity {
	background: rgb(255 255 255 / 10%);
	transition: all .15s ease;
}
.btn-opacity:hover {
	background: rgb(255 255 255 / 20%);
}
.btn-empty {
	padding: 0 16px;
	background: transparent;
	border: 1px solid var(--color-first);
	font-size: 15px;
	line-height: 20px;
	color: var(--color-first);
	transition: all .1s ease;
}
.btn-empty:hover {
	background: #fff;
	color: var(--main-color);
}
.btn-red {
	background: var(--color-error);
}
.back-btn {
	display: flex;
	align-items: center;
	font-weight: 500;
}
.back-btn .icon {
	margin-right: 4px;
	width: 16px;
	height: 16px;
	transform: rotate(90deg);
}
.back-btn span {
	text-decoration: underline;
}
.back-btn:hover span {
	text-decoration: none;
}

.notify {
	position: fixed;
	top: 45px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	display: flex;
	align-items: center;
	padding: 12px 16px;
	gap: 16px;
	min-height: 56px;
	overflow: hidden;
	background-color: #242c32;
	box-shadow: 0px 16px 24px rgb(0 0 0 / 7%);
	border-radius: 8px;
	transition: opacity .3s ease, transform .3s ease;
	cursor: pointer;
}
.notify.hide {
	opacity: 0;
	transform: translate(-50%, -16px);
	pointer-events: none;
}
.notify::after {
	content: '';
	position: absolute;
	top: -65px;
	left: -74px;
	z-index: 0;
	display: block;
	width: 212px;
	height: 212px;
	border-radius: 100%;
}
.notify--wrapper {
	left: calc(min(50vw, 720px) + 40px);
}
.notify--good::after {
	background: radial-gradient(50% 50% at 50% 50%, rgb(0 237 81 / 12%) 0%, rgb(0 237 123 / 0%) 100%);
}
.notify--warning::after {
	background: radial-gradient(50% 50% at 50% 50%, rgb(255 212 38 / 11%) 0%, rgb(255 212 38 / 0%) 100%);
}
.notify--error::after {
	background: radial-gradient(50% 50% at 50% 50%, rgb(240 66 72 / 13%) 0%, rgb(240 66 72 / 0%) 100%);
}
.notify__icon .icon {
	width: 32px;
	height: 32px;
}
.notify__text {
	position: relative;
	z-index: 1;
	font-size: 15px;
	color: var(--color-first);
}

.tooltip {
	position: fixed;
	z-index: 200;
	padding: 12px;
	opacity: 0;
	visibility: hidden;
	background-color: #54415f;
	border-radius: 8px;
	filter: drop-shadow(0px 4px 8px rgb(0 0 0 / 20%));
	pointer-events: none;
	white-space: nowrap;
	color: var(--color-first);
}
.tooltip.visible {
	opacity: 1;
	visibility: visible;
}

.tutorial {
	position: fixed;
	inset: auto;
	z-index: 300;
	margin: 0;
	padding: 12px;
	display: none;
	width: calc(100% - 32px);
	max-width: 465px;
	border: 0;
	border-radius: 8px;
	background-color: var(--color-first);
	cursor: default;
}
.tutorial:popover-open,
.tutorial.active {
	display: block;
}
.tutorial__close {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.tutorial__close .icon {
	width: 16px;
	height: 16px;
	color: var(--color-dark);
}
.tutorial__title {
	margin-bottom: 8px;
	padding-right: 20px;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
}
.tutorial__body {
	color: var(--color-second);
}
.tutorial__body * + p {
	margin-top: 8px;
}
.tutorial__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
}
.tutorial__foot a {
	color: var(--color-dark);
	text-decoration: underline;
}
.tutorial__foot a:hover {
	text-decoration: none;
}
.tutorial__steps {
	font-size: 10px;
	line-height: 12px;
	color: var(--color-third);
}
.tutorial__btns {
	display: flex;
	align-items: center;
	gap: 18px;
}
.tutorial__btns button {
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.tutorial__btns button .icon {
	width: 16px;
	height: 16px;
	color: var(--color-dark);
}
.tutorial__btns button:disabled .icon {
	color: var(--color-third);
	cursor: default;
}
.tutorial-overlay {
	position: fixed;
	inset: 0;
	z-index: 250;
	display: none;
	pointer-events: none;
}
.tutorial-overlay.active {
	display: block;
}
.tutorial-overlay__part {
	position: absolute;
	background-color: rgb(16 16 17 / 40%);
	backdrop-filter: blur(2px);
	pointer-events: auto;
}

.select {
	position: relative;
}
.select-btn {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	gap: 12px;
	height: 40px;
	background-color: rgb(0 0 0 / 20%);
	border: 1px solid #3e2d41;
	border-radius: 40px;
	backdrop-filter: blur(2px);
	cursor: pointer;
}
.select-btn.active {
	border-radius:  20px 20px 0 0;
}
.select-btn span {
	display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.select-btn span img {
    margin-right: 12px;
    vertical-align: bottom;
}
.select-btn .icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	transition: all .1s ease;
	color: var(--color-first);
}
.select-wrap {
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	z-index: 5;
	display: none;
	width: 100%;
	max-height: 266px;
	background-color: #160c17;
	border: 1px solid #3e2d41;
	backdrop-filter: blur(2px);
	box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
	border-radius: 0 0 12px 12px;
	overflow-y: auto;
    overflow-x: hidden;
}
.select-wrap li {
	display: block;
	padding: 8px 20px;
	gap: 12px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all .1s ease;
	cursor: pointer;
}
.select-wrap li img {
    margin-right: 12px;
    vertical-align: bottom;
}
.select-wrap li:hover,
.select-wrap li.active {
	background-color: rgb(255 255 255 / 10%);
}
.select-wrap::-webkit-scrollbar {
	width: 2px;
	background-color: transparent;
}
.select-wrap::-webkit-scrollbar-thumb {
    background-color: var(--color-first);
	border-radius: 2px;
}
.select-wrap::-webkit-scrollbar-track {
	margin-block: 12px;
    border-width: 0;
}

.collapse__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	color: var(--color-first);
	cursor: pointer;
}
.collapse__toggle .icon {
	width: 16px;
	height: 16px;
	transition: all .1s ease;
}
.collapse.active .collapse__toggle .icon {
	transform: rotate(180deg);
}
.collapse__wrap {
	display: none;
}
.collapse__wrap {
	padding-top: 8px;
	color: var(--color-third);
}
.collapse__wrap a {
	display: block;
	padding: 4px 8px 8px 0;
	border-bottom: 1px solid #3d3d3d;
}
.collapse__wrap a:hover {
	color: var(--color-first);
}

@property --switch-c1 {
	syntax: '<color>';
	inherits: false;
	initial-value: #ed0000;
}
@property --switch-c2 {
	syntax: '<color>';
	inherits: false;
	initial-value: #692b2b;
}
.switch {
	position: relative;
	display: inline-block;
	width: 28px;
	height: 16px;
}
.switch input {
	display: none;
}
.switch span {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	background: linear-gradient(253.22deg, var(--switch-c1) 21.23%, var(--switch-c2) 84.38%), var(--color-first);
	border: 1px solid #c7c7c7;
	border-radius: 16px;
	transition: --switch-c1 .3s ease, --switch-c2 .3s ease;
	cursor: pointer;
}
.switch span::before {
	content: '';
	position: absolute;
	top: 1px;
	left: 13px;
	display: block;
	height: 12px;
	width: 12px;
	background-color: var(--color-first);
	border-radius: 100%;
	transition: all .3s ease;
}
.switch input:checked + span {
	--switch-c1: #00ed51;
	--switch-c2: #00872e;
}
.switch input:checked + span::before {
	left: 1px;
}

.icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: inherit;
}
.icon use {
	fill: currentColor;
	stroke: currentColor;
	width: 100%;
	height: 100%;
}

.auth-page {
	display: flex;
	justify-content: flex-end;
}
.auth-page__logo {
	margin-bottom: 101px;	
}
.auth-page-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 20px;
	width: 100%;
	max-width: 960px;
	height: 100vh;
	overflow-y: auto;
	background-color: #f9f9f9;
}
.auth-page-wrapper::-webkit-scrollbar {
	width: 2px;
	background-color: transparent;
}
.auth-page-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--color-dark);
	border-radius: 2px;
}
.auth-page-wrapper::-webkit-scrollbar-track {
	margin-block: 12px;
    border-width: 0;
}
.auth-page-wrapper .notify {
	position: absolute;
}
.auth-page-wrapper .back-btn {
	position: absolute;
	top: 40px;
	left: 40px;
	color: var(--color-dark);
}
.auth-page-wrapper h1 {
	margin-bottom: 27px;
	text-align: center;
	color: var(--color-dark);
}
.auth-page-steps {
	display: flex;
	align-items: center;
	margin-top: 16px;
	margin-bottom: 44px;
}
.auth-page-steps li {
	display: flex;
	align-items: center;
	color: var(--color-third);
}
.auth-page-steps li span {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 8px;
    width: 20px;
	height: 20px;
	background-position: center;
	background-repeat: no-repeat;
    border: 1px solid var(--color-third);
	border-radius: 100%;
	font-weight: 500;
}
.auth-page-steps li.current,
.auth-page-steps li.active {
	font-weight: 500;
    color: var(--color-dark);
}
.auth-page-steps li.current span {
	border-color: var(--main-color);
    color: var(--main-color);
}
.auth-page-steps li.active span {
	background-color: var(--main-color);
	background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.75L4.5 9.375L10.5 3.375' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	border-color: var(--main-color);
	text-indent: -999999px;
    color: var(--color-first);
}
.auth-page-steps li:not(:last-child)::after {
	content: '';
	display: block;
	margin-left: 36px;
	margin-right: 36px;
	width: 60px;
	height: 1px;
	background-color: var(--border-first);
}
.auth-page .form {
	width: 100%;
	max-width: 440px;
}

.mobile-toggle {
	position: fixed;
	top: 16px;
	left: 8px;
	z-index: 60;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	width: 41px;
	height: 41px;
	background-color: rgb(10 10 10 / 40%);
	border: 1px solid rgb(61 61 61 / 30%);
	border-radius: 100%;
	color: #fff;
	cursor: pointer;
}
.mobile-toggle .icon {
	width: 20px;
	height: 20px;
}
.mobile-close {
	position: fixed;
	top: 16px;
	right: 8px;
	z-index: 155;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 0;
	width: 41px;
	height: 41px;
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
}
.mobile-close .icon {
	width: 28px;
	height: 28px;
}

.nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 12px;
	gap: 80px;
	width: var(--nav-width);
	height: 100vh;
	background-color: rgb(10 10 10 / 40%);
	border-right: 1px solid rgb(61 61 61 / 30%);
}
.nav-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.nav-wrap--top {
	flex: 1;
}
.nav-wrap li + li {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-second);
}
.nav-wrap--bottom li + li {
	margin-top: 8px;
	padding-top: 8px;
}
.nav-wrap li a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px 0;
	border-radius: 12px;
	transition: background-color .1s ease;
}
.nav-wrap li a:not(.disable):hover {
	background-color: rgb(255 255 255 / 10%);
}
.nav-wrap li a.active {
	background: linear-gradient(243.67deg, #fff 27.35%, #999 118.38%);
}
.nav-wrap li a > .icon {
	width: 24px;
	height: 24px;
	color: var(--color-first);
}
.nav-wrap li a.active > .icon {
	color: var(--main-color);
}
.nav-wrap li a.disable {
	opacity: .2;
	cursor: default;
}
.nav-wrap__sub {
	display: none;
	margin-top: 12px;
}
.nav-wrap li a.active + .nav-wrap__sub {
	display: block;
}
.nav-wrap__sub li + li {
	margin-top: 4px;
	padding-top: 0;
	border-top: none;
}
.nav-wrap__sub li a:not(.disable).active {
	background: rgb(255 255 255 / 10%);
}
.nav-wrap__sub li a.active .icon {
    color: var(--color-first);
}
.nav-wrap__sub li a.active::before {
	content: '';
	position: absolute;
	top: calc(50% - 4px);
	left: 2px;
	display: block;
	width: 8px;
	height: 8px;
	background: linear-gradient(243.67deg, #fff 27.35%, #999 118.38%);
	border-radius: 100%;
}

.aside {
	position: fixed;
	top: 0;
	left: var(--nav-width);
	z-index: 40;
	width: var(--aside-width);
	height: 100dvh;
	transform: translateX(-100%);
	transition: transform .25s ease;
}
.aside-wrap {
	display: flex;
	flex-direction: column;
	padding: 20px 28px 20px 20px;
	gap: 24px;
	height: 100%;
	opacity: 0;
	background-color: rgb(10 10 10 / 40%);
	border-right: 1px solid rgb(61 61 61 / 30%);
	backdrop-filter: blur(10px);
	transition: opacity .25s ease;
}
.page--aside.open .aside {
	transform: translateX(0);
}
.page--aside.open .aside-wrap {
	opacity: 1;
}
.aside__toggle {
	position: absolute;
	top: 54%;
	left: 100%;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	width: 12px;
	height: 74px;
	transform: translateY(-50%);
	background: linear-gradient(243.67deg, #fff 27.35%, #999 118.38%);
	border: 0;
	border-radius: 0 12px 12px 0;
	cursor: pointer;
	transition: all .25s ease;
}
.page--aside.open .aside__toggle {
	left: calc(100% - 12px);
	border-radius: 12px 0 0 12px;
}
.aside__toggle .icon {
	width: 8px;
	height: 8px;
	color: var(--main-color);
	transform: rotate(180deg);
}
.page--aside.open .aside__toggle .icon {
	transform: none;
}
.aside-actions {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
	padding-bottom: 24px;
    gap: 16px;
	border-bottom: 1px solid var(--border-second);
}
.aside-actions a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	color: var(--color-first);
}
.aside-actions a .icon {
	width: 16px;
	height: 16px;
}
.aside-actions a:hover span {
	text-decoration: underline;
}
.aside-overflow {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 16px;
	overflow-y: auto;
	overflow-x: hidden;
}
.aside-overflow::-webkit-scrollbar {
	width: 2px;
	background-color: transparent;
}
.aside-overflow::-webkit-scrollbar-thumb {
    background-color: var(--color-first);
	border-radius: 2px;
}
.aside-overflow::-webkit-scrollbar-track {
	margin-block: 12px;
    border-width: 0;
}

.panel {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 5;
	background: #000 url(../img/bg.jpg) fixed 0 0 / cover no-repeat;
}
.panel .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	min-height: 80px;
	color: var(--color-first);
}
.panel h1 {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 12px;
}
.panel h1 span {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.panel .wrapper > .btn {
	flex: 0 0 auto;
}
.panel__img {
	flex: 0 0 28px;
	padding: 2px;
	width: 28px;
	height: 28px;
	background-color: var(--color-first);
	border-radius: 100%;
}
.panel--center .wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}
.panel--center h1 {
	grid-area: 1 / 1;
	position: static;
	justify-self: flex-start;
	margin: 0;
	width: 100%;
}
.panel--center .btn {
	grid-area: 1 / 2;
	justify-self: end;
}
.panel__btns {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
}

.home {
	margin: 0 auto;
	max-width: 1220px;
}
.home-links {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 32px;
	text-align: center;
	font-size: 13px;
	line-height: 16px;
	color: var(--border-first);
}
.home-links__title {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	gap: 6px;
}
.home-links__title::before,
.home-links__title::after {
	content: '';
	width: 86px;
	height: 1px;
	background-color: var(--border-first);
}
.home-links__last {
	display: flex;
	align-items: center;
	gap: 38px;
}
.home-links__last a {
	display: list-item;
	list-style-type: disc;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-first);
	text-decoration: underline;
}
.home-links__last a:hover {
	text-decoration: none;
}

.hero {
	margin: 0 auto;
	max-width: 1000px;
	text-align: center;
}
.hero + div {
	margin-top: 40px;
}
.hero img {
	margin-bottom: 22px;
}
.hero .btn {
	margin-top: 28px;
}
.hero__title {
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
	color: var(--color-first);
}
.hero__text {
	margin-top: 12px;
	font-size: 16px;
	color: #b4b4b4;
}
.hero__text * + p {
	margin-top: 16px;
}

.boxes {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
	gap: 20px;
}
.box {
	display: flex;
	padding: 20px 28px;
	background-color: rgb(10 10 10 / 40%);
	border: 1px solid rgb(61 61 61 / 30%);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	transition: border-color .1s ease;
}
a.box:hover,
a.box.active {
	border-color: rgb(61 61 61 / 100%);
}
.box.disable {
	opacity: .4;
}
.box--inline {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
}
.box--padding {
	padding: 28px;
}
.box--payment {
	width: 100%;
	max-width: 496px;
}
.box__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 7px;
	width: 44px;
	height: 44px;
	background-color: var(--color-first);
	border-radius: 100%;
}
.box__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	background-color: #2e2833;
	border-radius: 100%;
}
.box__icon--center {
	margin-left: auto;
	margin-right: auto;
}
.box__icon--text {
	background-color: var(--color-ai-text);
}
.box__icon--image {
	background-color: var(--color-ai-image);
}
.box__icon--video {
	background-color: var(--color-ai-video);
}
.box__icon--audio {
	background-color: var(--color-ai-audio);
}
.box__icon .icon {
	width: 20px;
	height: 20px;
	color: var(--color-first);
}
.box--inline .box__icon .icon {
	width: 24px;
	height: 24px;
}
.box-descr {
	flex: 1;
	color: #989898;
}
.box-descr .box__logo,
.box-descr .box__icon {
	margin-bottom: 16px;
}
.box-descr__title {
	margin-bottom: 4px;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	color: var(--color-first);
}
.box-descr__text * + p {
	margin-top: 16px;
}
.box-descr__note {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-top: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 40px;
	color: var(--color-third);
}
.box-descr__info {
	font-size: 13px;
	line-height: 16px;
}
.box-descr__list {
	margin-top: 16px;
}
.box-descr__list li {
	position: relative;
	padding-left: 16px;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-first);
}
.box-descr__list li + li {
	margin-top: 8px;
}
.box-descr__list li::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 0;
	display: block;
	width: 12px;
	height: 12px;
	background-color: #9921d6;
	mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.91972 2.84317L6.22085 3.67943C6.38608 4.13787 6.6504 4.55421 6.99498 4.89879C7.33956 5.24337 7.75591 5.5077 8.21435 5.67292L9.0506 5.97405C9.06711 5.9801 9.08137 5.99108 9.09144 6.0055C9.10151 6.01992 9.10691 6.03709 9.10691 6.05468C9.10691 6.07226 9.10151 6.08943 9.09144 6.10385C9.08137 6.11827 9.06711 6.12924 9.0506 6.1353L8.21435 6.43642C7.75591 6.60165 7.33956 6.86598 6.99498 7.21056C6.6504 7.55514 6.38608 7.97148 6.22085 8.42993L5.91972 9.26617C5.91367 9.28269 5.90269 9.29694 5.88827 9.30701C5.87385 9.31708 5.85669 9.32248 5.8391 9.32248C5.82151 9.32248 5.80435 9.31708 5.78993 9.30701C5.77551 9.29694 5.76453 9.28269 5.75847 9.26617L5.45735 8.42993C5.29212 7.97148 5.02779 7.55514 4.68322 7.21056C4.33864 6.86598 3.92229 6.60165 3.46385 6.43642L2.6276 6.1353C2.61109 6.12924 2.59683 6.11827 2.58676 6.10385C2.57669 6.08943 2.57129 6.07226 2.57129 6.05468C2.57129 6.03709 2.57669 6.01992 2.58676 6.0055C2.59683 5.99108 2.61109 5.9801 2.6276 5.97405L3.46385 5.67292C3.92229 5.5077 4.33864 5.24337 4.68322 4.89879C5.02779 4.55421 5.29212 4.13787 5.45735 3.67943L5.75847 2.84317C5.76436 2.82649 5.77528 2.81205 5.78972 2.80184C5.80416 2.79162 5.82141 2.78613 5.8391 2.78613C5.85679 2.78613 5.87404 2.79162 5.88848 2.80184C5.90292 2.81205 5.91384 2.82649 5.91972 2.84317Z' fill='%239921D6'/%3E%3C/svg%3E");
	mask-size: 12px;
	mask-position: center;
	mask-repeat: no-repeat;
}
.box-descr__link {
	display: inline-flex;
	align-items: center;
	margin-top: 16px;
	font-weight: 500;
	color: var(--color-first);
}
.box-descr__link span {
	text-decoration: underline;
}
.box:not(.disable):hover .box-descr__link span {
	text-decoration: none;
}
.box-descr__link .icon {
	margin-left: 4px;
	width: 16px;
	height: 16px;
	transform: rotate(-90deg);
}
.box-descr--small .box-descr__title {
	font-size: 16px;
	line-height: 20px;
}
.box-descr--small .box-descr__text {
	margin-bottom: 8px;
	color: var(--color-first);
}
.box-descr--small .box-descr__info {
	font-size: 12px;
	line-height: 16px;
	color: var(--color-third);
}

.plans {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 12px;
	color: var(--color-dark);
}
.plans--payment {
	justify-content: flex-start;
	margin-bottom: 40px;
	gap: 16px;
	color: var(--color-first);
}
.plan {
	flex: 0 0 calc(50% - 8px);
	min-height: 100%;
}
.plans--payment .plan {
	flex: 1 1 0;
	max-width: 320px;
	min-width: 0;
}
.plan label {
	position: relative;
	display: block;
	padding: 28px;
	height: 100%;
	border-radius: 20px;
	transition: box-shadow .2s ease;
	cursor: pointer;
	transition: border-color .1s ease;
}
.plan label.box:hover {
	border-color: rgb(61 61 61 / 100%);
}
.plan label:not(.box) {
	padding: 24px 20px;
	background-color: var(--color-first);
	border: none;
	box-shadow: inset 0 0 0 .5px var(--border-first), 0 0 5px rgb(208 208 208 / 7%);
	border-radius: 15px;
}
.plan label.active,
.plan input:checked + label {
	box-shadow: inset 0 0 0 2px var(--main-color);
}
.plan label.active,
.plan input:checked + label.box {
	background: rgba(255, 255, 255, 0.1);
}
.plan input {
	display: none;
}
.plan__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	padding: 0 8px;
	gap: 4px;
	height: 24px;
	background-color: #c83cff;
	border-radius: 24px;
	font-weight: 500;
	font-size: 12px;
	color: var(--color-first);
}
.plan__badge .icon {
	width: 16px;
	height: 16px;
	color: var(--color-first);
}
.plan__icon {
	margin-bottom: 12px;
	text-align: center;
}
.plan .box__icon {
	margin-bottom: 16px;
}
.plan__icon .icon {
	width: 36px;
	height: 36px;
	color: var(--main-color);
}
.plan__title {
	margin-bottom: 4px;
	text-align: center;
	font-weight: 500;
	font-size: 16px;
}
.plan__preview {
	text-align: center;
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 16px;
}
.plan__price {
	text-align: center;
	margin-bottom: 15px;
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
}
.plan__price span {
	font-weight: normal;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-second);
}
.plan__detail li {
	position: relative;
	padding-left: 24px;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-second);
}
.plan label.box .plan__detail li {
	color: var(--border-first);
}
.plan__detail li + li {
	margin-top: 15px;
}
.plan__detail li::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 16px;
	height: 16px;
	background-color: #009f6c;
	mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.75L4.5 9.375L10.5 3.375' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-size: 16px;
	mask-position: center;
	mask-repeat: no-repeat;
}
.plan__active {
	display: table;
	margin: 16px auto 0;
	font-weight: 500;
	text-decoration: underline;
}
.plan label:not(.active) .plan__active:hover {
	text-decoration: none;
}
.plan label.active .plan__active {
	opacity: .3;
}

.prompt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 28px;
	gap: 8px;
}
.prompt + .prompt {
	margin-top: 4px;
}
.prompt__dot {
	flex: 0 0 8px;
	margin-right: 8px;
	width: 8px;
	height: 8px;
	border-radius: 100%;
}
.prompt__dot--small {
	flex: 0 0 3px;
	width: 3px;
	height: 3px;
	background-color: var(--color-third);
}
.prompt__dot--text {
	background-color: var(--color-ai-text);
}
.prompt__dot--image {
	background-color: var(--color-ai-image);
}
.prompt__dot--video {
	background-color: var(--color-ai-video);
}
.prompt__dot--audio {
	background-color: var(--color-ai-audio);
}
.prompt__title,
.prompt__price {
	display: flex;
	align-items: center;
	flex: 1;
}
.prompt__type {
	display: flex;
	align-items: center;
}
.prompt__type,
.prompt__date {
	font-size: 10px;
	line-height: 12px;
	color: var(--color-third);
}
.prompt__date + .prompt__dot--small {
	margin-left: 16px;
}
.prompt__edit {
	margin-left: 8px;
}
.prompt__edit .icon {
	width: 20px;
	height: 20px;
}
.prompt__status {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 12px;
	height: 24px;
	border-radius: 24px;
	font-size: 12px;
	line-height: 16px;
}
.prompt__status--success {
	background-color: #dcfee4;
	color: #009f28;
}
.prompt__status--error {
	background-color: #fedcdc;
	color: #ff4d4d;
}

.news {
	margin-top: 56px;
}
.news-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	color: var(--color-first);
}
.news-head__title {
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
}
.news-head__link {
	text-decoration: underline;
}
.news-head__link:hover {
	text-decoration: none;
}
.news-item {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
	padding: 0 28px;
	gap: 16px;
	height: 52px;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-second);
}
.news-item__date {
	font-weight: 500;
	font-size: 10px;
	line-height: 12px;
	color: #6e6e6e;
}
.news-item__date:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
	width: 3px;
	height: 3px;
	background-color: #6e6e6e;
	border-radius: 100%;
}
.news-item__title {
	flex: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	min-width: 0;
}
.news-item__title .icon {
	margin-right: 8px;
	width: 20px;
	height: 20px;
	color: var(--color-first);
}
.news-item__more .icon {
	width: 16px;
	height: 16px;
	transform: rotate(-90deg);
	color: var(--color-first);
}

.bots {
	flex: 1;
	min-height: 0;
}
.bot,
a.bot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 28px;
	gap: 16px;
	cursor: pointer;
}
.bot + .bot {
	margin-top: 4px;
}
.bot__avatar {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 100%;
}
.bot__avatar img {
	max-width: 24px;
}
.bot__avatar--robot {
	background-color: #deb7ff;
}
.bot__avatar--men {
	background-color: #ffe091;
}
.bot__avatar--catalog {
	background-color: #7dbfff;
}
.bot-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	gap: 4px;
	min-width: 0;
}
.bot-info__update {
	font-size: 10px;
	line-height: 12px;
	color: var(--color-second);
}
.bot-info__title {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	min-width: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-first);
}
.bot-info__text {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	min-width: 0;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-third);
}
.bot-actions {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	align-self: stretch;
}
.bot__tags {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 8px;
}
.bot__tags li {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4px 12px;
	height: 24px;
	background-color: rgb(53 38 69 / 50%);
	border-radius: 24px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #b6b6b6;
}
.bot-detail {
	display: flex;
	flex-direction: column;
}
.bot-detail hr {
	display: block;
	margin: 16px 0;
	width: 100%;
	height: 1px;
	background-color: rgb(61 61 61 / 30%);
	border: 0;
}
.bot-detail .box {
	flex: 1;
	padding: 28px;
}
.bot-detail--empty .box {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-third);
}
.bot-detail .bot__avatar {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
}
.bot-detail__title {
	font-size: 18px;
	line-height: 26px;
	color: var(--color-first);
}
.bot-detail__text {
	margin-top: 2px;
	line-height: 17px;
	color: #9c9c9c;
}
.bot-detail-info__title {
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 16px;
	color: #9c9c9c;
}
.bot-detail-info__text {
	font-size: 14px;
	line-height: 16px;
	color: var(--color-first);
}
.bot-detail-info__text pre {
	max-width: 100%;
	white-space: break-spaces;
	word-wrap: break-word;
}
.bot-detail-info__text li {
	position: relative;
	padding-left: 16px;
}
.bot-detail-info__text li + li {
	margin-top: 8px;
}
.bot-detail-info__text li::before {
	content: '';
	position: absolute;
	top: 4px;
	left: 0;
	display: block;
	width: 8px;
	height: 8px;
	background-color: #656565;
	border-radius: 100%;
}
.bot-detail-info__text li.active::before {
	background: linear-gradient(253.22deg, #00ed51 21.23%, #00872e 84.38%), #d9d9d9;
}
.bot-detail-btns {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin-top: 24px;
	gap: 12px;
}

.user {
	display: block;
	padding: 0;
}
.user:hover,
.user.active {
	border-color: rgb(61 61 61 / 100%);
}
.user + .user {
	margin-top: 4px;
}
.user-show {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 28px;
	gap: 16px;
	width: 100%;
	cursor: pointer;
}
.user__avatar {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-first);
}
.user-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	gap: 4px;
	min-width: 0;
}
.user-info__title {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	min-width: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-first);
}
.user-info__text {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	min-width: 0;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-third);
}
.user-tags {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.user__tag {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 12px;
	height: 24px;
	border-radius: 24px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
}
.user__tag--admin {
	background-color: #d6e6ff;
	color: #6aa5ff;
}
.user__tag--member {
	background-color: #fbd9ff;
	color: #9900ad;
}
.user__tag--awaiting {
	background-color: #fff9e6;
	color: #e9a700;
}
.user__tag--active {
	background-color: #b6fdba;
	color: #009f6c;
}
.user__tag--inactive {
	background-color: #eaecf0;
	color: #475467;
}
.user-wrap {
	position: relative;
	display: none;
	padding: 6px 28px 20px;
}
.user-wrap:before {
	content: '';
	position: absolute;
	top: -8px;
	left: 28px;
	right: 28px;	
	display: block;
	height: 1px;
	background-color: rgb(61 61 61 / 30%);
}
.user-wrap__title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-third);
}
.user-wrap__title span {
	font-weight: 500;
	color: var(--color-first);
}
.user-wrap > .user-wrap__title {
	margin-top: 12px;
	margin-bottom: 4px;
}
.user-wrap__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.user-wrap__tags li {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 12px;
	height: 24px;
	background: #ececec;
	border-radius: 24px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
	color: #76777b;
}
.user-wrap__actions {
	display: flex;
	gap: 28px;
}
.user-wrap__actions li {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-first);
}
.user-wrap__btns {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 12px;
	gap: 36px
}
.user-wrap__btn {
	font-weight: 500;
	color: var(--color-first);
	text-decoration: underline;
}
.user-wrap__btn .icon {
	width: 16px;
	height: 16px;
}
.user-wrap__btn--remove {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--color-error);
}
.user-wrap__btn:hover {
	text-decoration: none;
}

.chat {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
}
.chat-history {
	flex: 1 1 auto;
	margin-bottom: 24px;
	padding-right: 4px;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.chat-history::-webkit-scrollbar {
	width: 2px;
	background-color: transparent;
}
.chat-history::-webkit-scrollbar-thumb {
	background-color: var(--color-first);
	border-radius: 2px;
}
.chat-history::-webkit-scrollbar-track {
	margin-block: 12px;
	border-width: 0;
}
.chat-history-wrap {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
	max-width: 924px;
}
.chat-message {
	margin-top: 24px;
}
.chat-message--user {
	align-self: flex-end;
}
.chat-message__body {
	display: inline-flex;
	padding: 12px 24px;
	max-width: 749px;
	border-radius: 16px;
}
.chat-message--user .chat-message__body {
	background: #18121C;
}
.chat-message--assist .chat-message__body {
	background: #54415f;
}
.chat-message-actions {
	display: flex;
	align-items: center;
	margin-top: 8px;
	gap: 10px;
}
.chat-message-actions button {
	background: transparent;
	border: none;
	color: var(--color-first);
}
.chat-message-actions button .icon {
	width: 20px;
	height: 20px;
}
.chat-form {
	margin: 0 auto;
	width: 100%;
	max-width: 924px;
}
.page--chat .chat-form {
	position: sticky;
	bottom: 0;
	z-index: 10;
	flex: 0 0 auto;
}
.chat-form-wrap {
	position: relative;
	display: flex;
	align-items: center;
	padding: 24px;
	gap: 16px;
	background: rgb(255 255 255 / 5%);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	cursor: text;
}
.chat-form-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: 1px;
	background: linear-gradient(180deg, #906f95, #34283f);
	border-radius: inherit;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
}
.chat__input {
	padding: 12px 10px 12px 0;
	width: 100%;
    min-height: 44px;
    max-height: 320px;
    overflow-y: hidden;
    resize: none;
	background-color: transparent;
	border: none;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-first);
}
.chat__input::-webkit-scrollbar {
	width: 2px;
	background-color: transparent;
}
.chat__input::-webkit-scrollbar-thumb {
    background-color: var(--color-first);
	border-radius: 2px;
}
.chat__input::-webkit-scrollbar-track {
	margin-block: 12px;
    border-width: 0;
}
.chat__input::-webkit-input-placeholder {
	font-family: 'Inter';
	color: var(--color-first);
}
.chat__input:-ms-input-placeholder {
	font-family: 'Inter';
	color: var(--color-first);
}
.chat__input::-ms-input-placeholder {
	font-family: 'Inter';
	color: var(--color-first);
}
.chat-actions {
	display: flex;
	align-items: center;
	gap: 20px;
}
.chat-actions button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 100%;
}
.chat-actions button .icon {
	width: 20px;
	height: 20px;
}
.chat-actions__voice {
	background: var(--color-third);
}
.chat-actions__voice .icon {
	color: var(--color-dark);
}
.chat-actions__send {
	background: linear-gradient(243.67deg, #fff 27.35%, #999 118.38%);	
}
.chat-actions__send .icon {
	color: var(--main-color);
}
.chat__tags {
	display: flex;
	align-items: center;
	margin-top: 14px;
	gap: 8px;
}
.chat__tags .prompt {
	flex: 1 1 0;
    min-width: 0;
}
.chat__tags .prompt__title {
	flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.chat__help {
	margin-top: 18px;
	text-align: center;
	font-size: 12px;
	line-height: 16px;
	color: #d4d4d4;
}
.chat__help a {
	text-decoration: underline;
}
.chat__help a:hover {
	text-decoration: none;
}

@keyframes widget-gradient-flow {
	to {
		background-position: 200% 0;
	}
}
.widget-open {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 30;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 52px;
	height: 52px;
	visibility: visible;
	opacity: 1;
	background: linear-gradient(90deg, #fb34e4 0%, #1b8eff 50%, #fb34e4 100%);
	background-size: 200% 100%;
	box-shadow: 0 4px 20px rgb(0 0 0 / 7%);
	border-radius: 100%;
	transition: opacity .2s ease, visibility .2s ease;
}
.widget-open:hover {
	animation: widget-gradient-flow 2s linear infinite;
}
.widget-open.active {
	visibility: hidden;
	opacity: 0;
}
.widget {
	position: fixed;
	bottom: 40px;
	right: 20px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: min(520px, calc(100vw - 40px));
	height: min(564px, calc(100dvh - 40px));
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
	background-color: var(--color-first);
	border: 1px solid #f3f3f3;
	border-radius: 20px;
	box-shadow: 0 4px 5px rgb(0 0 0 / 30%);
	transform: translateY(20px) scale(.50);
	transform-origin: right bottom;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.widget.active {
	visibility: visible;
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.widget-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 24px 16px;
	gap: 16px;
	border-bottom: 1px solid #f3f3f3;
}
.widget-head__logo {
	position: relative;
	width: 36px;
	height: 36px;
}
.widget-head__logo img {
	width: 100%;
	height: 100%;
	border-radius: 100%;
	object-fit: cover;
}
.widget-head__logo span {
	position: absolute;
	bottom: -2px;
	right: 3px;
	display: block;
	width: 8px;
	height: 8px;
	background: #009f28;
	border: 1px solid var(--color-first);
	border-radius: 100%;
}
.widget-head-info {
	flex: 1;
}
.widget-head-info__title {
	font-weight: 500;
	color: var(--color-dark);
}
.widget-head-info__status {
	color: var(--color-second);
}
.widget-head__close {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	color: var(--color-dark);
	cursor: pointer;
}
.widget-head__close .icon {
	width: 18px;
	height: 18px;
}
.widget-body {
	flex: 1;
	padding: 12px 24px;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
}
.widget-body::-webkit-scrollbar {
	width: 2px;
	background-color: transparent;
}
.widget-body::-webkit-scrollbar-thumb {
    background-color: var(--color-dark);
	border-radius: 2px;
}
.widget-body::-webkit-scrollbar-track {
	margin-block: 12px;
    border-width: 0;
}
.widget-chat {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.widget-chat--assist {
	padding-right: 20px;
}
.widget-chat--user {
	align-items: flex-end;
	padding-left: 20px;
	padding-right: 38px;
}
.widget-chat__wrap {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background-color: #fafafa;
	border-radius: 0 20px 20px 20px;
	white-space: pre-wrap;
    overflow-wrap: anywhere;
	color: var(--color-dark);
}
.widget-chat--user .widget-chat__wrap {
	border-radius: 20px 0 20px 20px;
}
.widget-chat__avatar {
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 100%;
}
.widget-chat__avatar img {
	width: 100%;
	height: 100%;
	border-radius: 100%;
	object-fit: cover;
}
.widget-chat__time {
	flex: 0 0 100%;
	margin-top: 4px;
	text-align: right;
	font-weight: 500;
	font-size: 10px;
	line-height: 12px;
	color: var(--color-second);
}
.widget-chat--user .widget-chat__time {
	text-align: left;
}
.widget-tags {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 16px 0 24px;
	gap: 8px;
}
.widget-tags .btn {
	cursor: pointer;
	padding: 0 32px;
	gap: 10px;
	font-size: 15px;
	line-height: 20px;
	color: var(--color-first);
}
.widget-form {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px 24px;
	gap: 4px;
	border-top: 1px solid #f3f3f3;
}
.widget-form__attach,
.widget-form__send {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background-color: transparent;
	border: none;
}
.widget-form__attach .icon,
.widget-form__send .icon {
	width: 18px;
	height: 18px;
}
.widget-form__attach {
	color: var(--color-dark);
}
.widget-form__send {
	background: linear-gradient(90deg, #fb34e4 0%, #1b8eff 50%, #fb34e4 100%);
	background-size: 200% 100%;
	border-radius: 100%;
	color: var(--color-first);
}
.widget-form__send:hover {
	animation: widget-gradient-flow 2s linear infinite;
}
.widget-form__input {
	flex: 1;
	padding: 9px 16px;
	min-width: 0;
	min-height: 40px;
	height: 40px;
	max-height: 80px;
	overflow-y: hidden;
	resize: none;
	border: 1px solid #c3c3c3;
	border-radius: 12px;
	font-size: 14px;
	line-height: 20px;
}
.widget-form__input::-webkit-input-placeholder {
	font-family: 'Inter';
	color: var(--color-second);
}
.widget-form__input:-ms-input-placeholder {
	font-family: 'Inter';
	color: var(--color-second);
}
.widget-form__input::-ms-input-placeholder {
	font-family: 'Inter';
	color: var(--color-second);
}

.content {
	display: flex;
	justify-content: space-between;
	flex: 1;
	gap: 20px;
    min-height: 0;
}
.content-nav {
	flex: 0 0 280px;
	min-width: 0;
}
.content-nav > .box {
	padding: 28px;
}
.content-nav__toggle {
    display: none;
	justify-content: space-between;
	align-items: center;
	padding: 0 28px;
	width: 100%;
	height: 48px;
	background: rgb(10 10 10 / 40%);
	border: 1px solid rgb(61 61 61 / 30%);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	font-weight: 500;
	color: var(--color-first);
	cursor: pointer;
}
.content-nav-wrap {
	display: block;
}
.content-nav-wrap > li + li {
	margin-top: 8px;
}
.content-nav-wrap li.border {
	padding-top: 8px;
	border-top: 1px solid var(--border-second);
}
.content-nav-wrap > li > a,
.content-nav-wrap > li > span {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 12px;
	gap: 12px;
	height: 36px;
	border-radius: 12px;
	font-weight: 500;
	color: var(--color-first);
	cursor: pointer;
}
.content-nav-wrap > li > a .icon,
.content-nav-wrap > li > span .icon {
	width: 12px;
	height: 12px;
	transition: all .15s ease;
}
.content-nav-wrap > li.active > a .icon,
.content-nav-wrap > li.active > span .icon {
	transform: rotate(180deg);
}
.content-nav-wrap > li > a:hover,
.content-nav-wrap > li > span:hover {
	background: rgb(255 255 255 / 10%);
}
.content-nav-wrap > li.active > a,
.content-nav-wrap > li.active > span {
	background: linear-gradient(var(--light-angle), var(--color-first) var(--light-stop1), #999 var(--light-stop2));
	color: var(--main-color);
}
.content-nav-wrap-sub {
	display: none;
	padding-top: 2px;
}
.content-nav-wrap > li.active .content-nav-wrap-sub {
	display: block;
} 
.content-nav-wrap-sub li {
	padding-left: 28px;
}
.content-nav-wrap-sub li a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-third);
}
.content-nav-wrap-sub li a span {
	display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.content-nav-wrap-sub li a:hover {
	color: var(--color-first);
}
.content-nav-wrap-sub li.active a span {
	color: var(--color-first);
	border-bottom: 1px solid var(--color-first);
}
.content-nav-wrap-sub li a::before {
	content: '';
	display: block;
	flex: 0 0 4px;
	width: 4px;
	height: 4px;
	background-color: var(--color-third);
	border-radius: 100%;
}
.content-nav-wrap-sub li.active a::before {
	background-color: var(--color-first);
}
.content-wrap {
	display: flex;
    flex-direction: column;
	flex: 1;
}
.content-wrap > .box {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 28px;
}
.content-wrap h2 {
	margin-bottom: 20px;
	font-size: 18px;
}
.content-wrap h3 {
	margin-bottom: 16px;
}
.content-wrap hr {
	display: block;
	margin: 20px 0;
	width: 100%;
	height: 1px;
	background-color: var(--border-second);
	border: 0;
}

.text {
	color: var(--color-first);
}
.text :is(h1, h2) {
	margin-bottom: 4px;
	font-size: 18px;
}
.text h3 {
	margin-bottom: 24px;
	font-size: 16px;
}
.text :is(h4, h5, h6) {
	margin-bottom: 4px;
	font-size: 14px;
}
.text * + :is(h2, h3, h4, h5, h6) {
	margin-top: 12px;
}
.text p {
	margin-bottom: 4px;
}
.text img {
	margin-bottom: 24px;
	border-radius: 20px;
}
.text hr {
	margin: 24px 0;
	width: 100%;
	height: 1px;
	background-color: rgb(61 61 61 / 30%);
}
.text__img {
	display: flex;
	align-items: flex-start;
	margin-bottom: 4px;
	gap: 16px;
}
.text__date {
	margin-bottom: 24px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-third);
}

.form {
	width: 100%;
}
.form--center {
	margin: 0 auto;
	max-width: 600px;
}
.form--inline {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.form--invite {
	display: flex;
	align-items: flex-end;
	gap: 20px;
}
.form-text {
	margin-bottom: 10px;
	text-align: center;
	color: var(--color-second);
}
.form-text * + p {
	margin-top: 20px;
}
.form-text b {
	color: var(--color-dark);
}
.form-info {
	font-size: 13px;
	line-height: 16px;
	color: var(--color-third);
}
.form-group {
	position: relative;
	margin-bottom: 20px;
}
.form--inline .form-group {
    flex: 1 1 auto;
}
.form--invite .form-group {
	margin-bottom: 12px;
}
.form-group label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-first);
}
.form-group__help {
	margin-top: 6px;
	opacity: .6;
	color: #999;
}
.form-group__error {
	margin-top: 6px;
	display: none;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-error);
}
.form-group.error .form-group__error {
	display: block;
}
.form-group-input {
	position: relative;
}
.form-group-input input,
.form-group-input textarea {
	display: block;
	padding: 0 16px;
	width: 100%;
	height: 40px;
	background-color: rgb(255 255 255 / 5%);
	border: 1px solid rgb(144 111 149 / 30%);
	backdrop-filter: blur(10px);
	border-radius: 40px;
	color: var(--color-first);
	transition: border-color .1s ease;
}
.form-group-input input:focus,
.form-group-input textarea:focus {
	border-color: var(--main-color);
}
.form-group-input input[type=password] {
	padding-right: 42px;
}
.form--invite .form-group-input input {
	width: 308px;
}
.form-group-input textarea {
	padding: 12px 16px;
	height: 96px;
	border-radius: 20px;
	resize: none;
}
.form-group-input input::-webkit-input-placeholder,
.form-group-input textarea::-webkit-input-placeholder {
	font-family: 'Inter';
	color: var(--color-third);
}
.form-group-input input:-ms-input-placeholder,
.form-group-input textarea:-ms-input-placeholder {
	font-family: 'Inter';
	color: var(--color-third);
}
.form-group-input input::-ms-input-placeholder,
.form-group-input textarea::-ms-input-placeholder {
	font-family: 'Inter';
	color: var(--color-third);
}
.form-group.error input {
	border-color: var(--color-error);
}
.form-upload {
	position: relative;
	padding: 8px 16px;
	background-color: rgb(255 255 255 / 5%);
	border: 1px dashed rgb(144 111 149 / 30%);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	text-align: center;
	transition: border-color .1s ease;
	cursor: pointer;
}
.form-upload:hover,
.form-upload.dragover {
	border-color: var(--main-color);
}
.form-upload__main {
	color: var(--color-first);
}
.form-upload__main span {
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}
.form-upload__main span:hover {
	text-decoration: none;
}
.form-upload__sub {
	margin-top: 8px;
	color: var(--color-third);
}
.form-upload input {
	display: none;
}
.form-group-input > .icon {
	position: absolute;
    left: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	width: 20px;
	height: 20px;
    color: var(--main-color);
}
.form-group-input--date input::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	margin: 0;
	width: auto;
	height: auto;
	opacity: 0;
	cursor: pointer;
}
.form-group-input.form-group-input--date > .icon {
	position: absolute;
	left: auto;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	width: 16px;
	height: 16px;
	color: var(--color-first);
	cursor: pointer;
	pointer-events: none;
}
.form-group-input .icon + input {
	padding-left: 42px;
}
.form-password {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	width: 16px;
	height: 16px;
	color: var(--color-dark);
	cursor: pointer;
}
.form-password .icon {
	display: none;
	width: 16px;
	height: 16px;
}
.form-password .icon.active {
	display: block;
}
.form-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
	gap: 16px;
}
.form-actions a {
	font-weight: 500;
	text-decoration: underline;
}
.form-actions a:hover {
	text-decoration: none;
}
.form-checkbox {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.form-checkbox input {
	display: none;
}
.form-checkbox span {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 6px;
	width: 16px;
	height: 16px;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid var(--border-first);
	border-radius: 4px;
	transition: background-color .1s ease, border-color .1s ease;
}
.form-checkbox:hover span {
	border-color: var(--main-color);
}
.form-checkbox input:checked + span {
	background-color: var(--main-color);
	border-color: var(--main-color);
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.75L4.5 9.375L10.5 3.375' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.form-link {
	margin-top: 20px;
	text-align: center;
	color: var(--color-second);
}
.form-link span {
	margin-right: 6px;
}
.form-link a {
	color: var(--main-color);
	text-decoration: underline;
	font-weight: 500;
}
.form-link a:hover {
	text-decoration: none;
}
.form-btns {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 44px;
	margin-top: 48px;
}
.form-btns .btn {
	margin-top: 0;
}
.form-btns a {
	font-weight: 500;
	font-size: 16px;
	color: var(--color-first);
}
.form-btns a:hover {
	text-decoration: underline;
}
.form .plans {
	margin-left: -68px;
	margin-right: -68px;
}
.form--main .btn {
	margin-top: 16px;
	width: 100%;
}
.form--main .form-group {
	margin-bottom: 12px;
}
.form--main .form-group label {
	color: var(--color-second);
}
.form--main .form-group-input input,
.form--main .form-group-input textarea {
	background-color: var(--color-first);
	border: 1px solid var(--border-first);
	backdrop-filter: none;
	color: var(--color-dark);
}
.form--main .form-group.error input,
.form--main .form-group.error textarea {
	border-color: var(--color-error);
}
.form--main input::-webkit-input-placeholder,
.form--main textarea::-webkit-input-placeholder {
	font-family: 'Inter';
	color: var(--color-second);
}
.form--main input:-ms-input-placeholder,
.form--main textarea:-ms-input-placeholder {
	font-family: 'Inter';
	color: var(--color-second);
}
.form--main input::-ms-input-placeholder,
.form--main textarea::-ms-input-placeholder {
	font-family: 'Inter';
	color: var(--color-second);
}
.form--main .form-actions {
	color: var(--color-second);
}
.form--main .form-btns {
	gap: 32px;
}
.form--main .form-actions a,
.form--main .form-btns a {
	color: var(--color-dark);
}
.form--main .select-btn {
	background-color: rgb(255 255 255 / 5%);
	border: 1px solid rgb(144 111 149 / 30%);
	color: var(--color-dark);
}
.form--main .select-btn .icon {
	color: var(--color-dark);
}
.form--main .select-wrap {
	background-color: var(--color-first);
	border: 1px solid rgb(144 111 149 / 30%);
	color: var(--color-dark);
}
.form--main .select-wrap li:hover,
.form--main .select-wrap li.active {
	background-color: var(--border-first);
}
.form--main .select-wrap::-webkit-scrollbar-thumb {
    background-color: var(--color-dark);
}
.form--main .form-upload {
	background-color: #fafafa;
	border: 1px dashed rgb(144 111 149 / 30%);
}
.form--main .form-upload__main {
	color: var(--color-dark);
}
.form--main .form-upload__main span {
	color: var(--main-color);
}
.form--main .form-upload__sub {
    margin-top: 8px;
    color: var(--color-second);
}
.form--main .form-upload:hover,
.form--main .form-upload.dragover {
	border-color: var(--main-color);
}

.dark {
	position: fixed;
	top: 0;
	left: -999999px;
	z-index: 150;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: rgb(0 0 0 / 20%);
	backdrop-filter: blur(2px);
	transition: opacity .3s ease;
}
.dark.active {
	left: 0;
	opacity: 1;
}
.popup {
	position: fixed;
	top: 50%;
	left: -999999px;
	z-index: 155;
	transform: translate(-50%, -50%);
	padding: 24px;
	width: 520px;
	opacity: 0;
	background-color: var(--color-first);
	box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
	border-radius: 20px;
	transition: opacity .3s ease;
}
.popup.active {
	left: 50%;
	opacity: 1;
}
.popup__close {
	position: absolute;
	top: 16px;
	right: 24px;
	color: var(--color-dark);
	cursor: pointer;
}
.popup__title {
	margin-bottom: 20px;
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
	color: var(--color-dark);
}
.popup__text {
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 18px;
	color: var(--color-second);
}
.popup__text span {
	color: var(--color-dark);
}
.popup__note {
	margin-top: 16px;
	padding: 8px 12px;
	background: #f9f9f9;
	border-radius: 12px;
	color: var(--color-second);
}
.popup .form-btns {
	justify-content: flex-end;
	margin-top: 28px;
	color: var(--color-dark);
}
.popup .btn {
	margin-top: 0;
	width: auto;
}

.page-404 {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 70px;
	width: 100%;
	min-height: 100svh;
	text-align: center;
}
.page-404__title {
	margin-bottom: 12px;
	font-size: 24px;
	line-height: 28px;
	color: var(--color-first);
}
.page-404__body {
	margin-bottom: 32px;
	font-size: 16px;
	line-height: 20px;
	color: #b4b4b4;
}

@media (max-width: 1200px) {
	.content-wrap .boxes {
		flex-wrap: wrap;
		gap: 8px;
	}
	.content-wrap .boxes .box--inline {
		flex: 0 0 100%;
	}
	.chat__tags .prompt {
		font-size: 12px;
	}
	.form--inline {
		flex-wrap: wrap;
		gap: 16px;
		row-gap: 0;
	}
	.form--inline .form-group {
		flex: 0 0 calc(50% - 8px);
	}
}
@media (max-width: 1024px) {
	.bots {
		flex-wrap: wrap;
		align-content: flex-start;
	}
	.bots > .flex-50 {
		flex: 0 0 100%;
	}
	.boxes {
		gap: 8px;
	}
	.chat__tags {
		display: none;
	}
}
@media (max-width: 992px) {
	:root {
		--nav-width: 57px;
	}
	body.overflow::after {
		left: 57px;
	}
	h1,
	.hero__title,
	.page-404__title {
		font-size: 20px;
		line-height: 24px;
	}
	h2 {
		font-size: 18px;
		line-height: 22px;
	}
	.wrapper {
		padding: 20px 20px 20px 77px;
	}
	.auth-page-wrapper {
		max-width: 100%;
	}
	.auth-page__logo {
		margin-bottom: 30px;
	}
	.auth-page-steps li:not(:last-child)::after {
		margin-left: 16px;
		margin-right: 16px;
		width: 40px;
	}
	.auth-page-steps {
		margin-top: 0;
		margin-bottom: 24px;
	}
	.nav {
		padding: 16px 8px;
		gap: 40px;
	}
	.nav-wrap li + li {
		margin-top: 6px;
		padding-top: 6px;
	}
	.nav-wrap li a {
		padding: 10px 0;
	}
	.nav-wrap li a > .icon {
		width: 20px;
		height: 20px;
	}
	.nav-wrap__sub li a.active::before {
		top: calc(50% - 3px);
		width: 6px;
		height: 6px;
	}
	.aside-wrap {
		padding: 16px;
	}
	.panel .wrapper {
		padding-top: 16px;
		padding-bottom: 16px;
		gap: 16px;
		min-height: 73px;
	}
	.hero__text {
		font-size: 14px;
	}
	.content {
		flex-wrap: wrap;
		align-content: flex-start;
	}
	.content-nav,
	.content-wrap {
		flex: 0 0 100%;
	}
	.content-nav__toggle {
        display: flex;
    }
	.content-nav__toggle .icon {
		width: 12px;
        height: 12px;
        transition: transform .2s ease;
    }
	.content-nav.active .content-nav__toggle .icon {
        transform: rotate(180deg);
    }
	.content-nav > .content-nav-wrap {
        display: none;
        margin-top: 4px;
    }
	.content-nav-wrap > li > a,
	.content-nav-wrap > li > span {
		font-size: 13px;
		line-height: 16px;
	}
	.boxes,
	.content-wrap .boxes {
		flex-wrap: wrap;
	}
	.boxes .box,
	.content-wrap .boxes .box {
		flex: 0 0 calc(50% - 4px);
	}
	.box,
	.bot,
	a.bot,
	.bot-detail .box {
		padding: 16px;
	}
	.user {
		padding: 0;
	}
	.user-show,
	.user-wrap {
		padding: 16px;
	}
	.box-descr__info {
		font-size: 12px;
		line-height: 14px;
	}
	.box__icon {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
	}
	.box--inline .box__icon .icon {
		width: 20px;
		height: 20px;
	}
	.box-descr__note {
		font-size: 12px;
		line-height: 16px;
	}
	.bot__avatar {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
	}
	.plan label {
		padding: 16px;
	}
	.chat-form-wrap {
		padding: 16px;
	}
	.chat__input {
		font-size: 14px;
		line-height: 18px;
	}
	.chat-actions {
		gap: 16px;
	}
	.page-404__body {
		font-size: 13px;
		line-height: 16px;
	}
}
@media (max-width: 850px) {
	.plans--payment {
		flex-wrap: wrap;
		gap: 0;
	}
	.plans--payment .plan {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.plans--payment .plan + .plan {
		margin-top: 16px;
	}
	.plans--payment .plan label {
		display: flex;
        flex-wrap: wrap;
	}
	.plans--payment .box__icon {
		margin-right: 16px;
	}
	.plans--payment .plan-info {
		flex: 1;
	}
	.plans--payment .plan__title,
	.plans--payment .plan__preview,
	.plans--payment .plan__price {
		text-align: left;
	}
	.plans--payment .plan__detail {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		flex: 0 0 100%;
	}
	.plans--payment .plan__detail li {
		flex: 0 0 50%;
		margin-bottom: 8px;
		padding-right: 8px;
	}
	.plans--payment .plan__detail li + li {
		margin-top: 0;
	}
}
@media (max-width: 768px) {
	body.overflow::after {
        left: 0;
    }
	body.page404 {
		background-size: auto 50%;
	}
	.page {
		--mobile-aside-width: min(var(--aside-width), calc(100vw - var(--nav-width) - 57px));
	}
	.wrapper {
        padding: 16px;
    }
	.page:not(.page--aside) .wrapper--center-y {
		align-items: flex-start;
	}
	.page--aside .wrapper {
		padding-left: 16px;
	}
	.btn,
	.btn-light {
		font-size: 14px;
	}
	.notify {
		top: 20px;
		left: 20px;
		right: 20px;
		transform: none;
		width: auto;
	}
	.tooltip {
		padding: 4px 8px;
		font-size: 12px;
	}
	.gap--20 {
		--gap: 16px;
	}
	.grid-4 {
		--grid: 3;
	}
	.widget-tags .btn {
		padding: 0 12px;
        height: 30px;
        font-size: 12px;
        line-height: 14px;
	}
	.mobile-toggle {
		display: flex;
		z-index: 155;
	}
	.page.mobile-menu-open .mobile-toggle {
		display: none;
	}
	.page.mobile-menu-open .mobile-close {
		display: flex;
		left: calc(var(--nav-width) + 16px);
		right: auto;
	}
	.page--aside.mobile-menu-open .mobile-close {
		left: calc(var(--nav-width) + var(--mobile-aside-width) + 16px);
	}
	.nav {
		display: flex;
		z-index: 152;
		backdrop-filter: blur(10px);
		transform: translateX(-100%);
		transition: transform .25s ease;
	}
	.aside,
	.page--aside.open .aside {
		display: block;
		z-index: 151;
		width: var(--mobile-aside-width);
		transform: translateX(calc(-100% - var(--nav-width)));
	}
	.page.mobile-menu-open .nav,
	.page.mobile-menu-open .aside {
		transform: translateX(0);
	}
	.page.mobile-menu-open .aside-wrap {
		opacity: 1;
	}
	.aside__toggle {
		display: none;
	}
	.panel {
		position: static;
		padding-left: var(--nav-width);
	}
	.panel h1 {
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.panel .wrapper {
		flex-wrap: wrap;
	}
	.panel__btns {
		flex: 0 0 100%;
		width: 100%;
	}
	.panel--center .panel__btns {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.bot-info__title {
		font-size: 14px;
		line-height: 16px;
	}
	.bot-info__text {
		font-size: 12px;
		line-height: 14px;
	}
	.prompt__title,
	.prompt__price {
		font-size: 13px;
		line-height: 16px;
	}
	.chat-message__body {
		padding: 12px 16px;
		font-size: 13px;
		line-height: 16px;
	}
	.chat-message-actions button .icon {
		width: 16px;
		height: 16px;
	}
	.content-nav > .box,
	.content-wrap > .box {
		padding: 16px;
	}
	.content-nav__toggle {
		padding: 0 16px;
	}
	.user-info__title {
		font-size: 14px;
		line-height: 18px;
	}
	.user-info__text,
	.user-wrap__title {
		font-size: 12px;
		line-height: 14px;
	}
	.form-group {
		margin-bottom: 16px;
	}
	.form--invite {
		gap: 16px;
	}
	.form-info,
	.form-group__help,
	.form-upload__sub {
		font-size: 12px;
		line-height: 16px;
	}
	.form-btns {
		margin-top: 34px;
	}
	.form-btns a {
		font-size: 14px;
	}
}
@media (max-width: 650px) {
	.grid-4 {
		--grid: 2;
	}
	.auth-page-wrapper {
		justify-content: flex-start;
		padding: 30px 20px;
	}
	.auth-page-wrapper .back-btn {
		position: relative;
		top: auto;
		left: auto;
		align-self: flex-start;
		margin-bottom: 30px;
	}
	.collapse__wrap a {
		font-size: 12px;
		line-height: 16px;
	}
	.plans {
		flex-wrap: wrap;
	}
	.form .plans {
		margin-left: 0;
		margin-right: 0;
	}
	.plan {
		flex: 0 0 100%;
	}
	.plan + .plan {
		margin-top: 16px;
	}
	.plan label:not(.box) {
		display: flex;
		flex-wrap: wrap;
	}
	.plan__icon {
		padding-right: 16px;
		text-align: left;
	}
	.plan-info {
		flex: 1;
	}
	.plan__title,
	.plan__preview,
	.plan__price {
		text-align: left;
	}
	.plan__detail {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		flex: 0 0 100%;
	}
	.plan__detail li {
		flex: 0 0 50%;
		margin-bottom: 8px;
		padding-right: 8px;
	}
	.plan__detail li + li {
		margin-top: 0;
	}
	.home-sections {
		flex-wrap: wrap;
		gap: 16px;
	}
	.home-sections .box {
		flex: 0 0 100%;
	}
	.boxes {
		flex-wrap: nowrap;
		padding-bottom: 6px;
		overflow-x: auto;
	}
	.boxes::-webkit-scrollbar {
		height: 2px;
		background-color: transparent;
	}
	.boxes::-webkit-scrollbar-thumb {
		background-color: var(--color-first);
		border-radius: 2px;
	}
	.boxes::-webkit-scrollbar-track {
		margin-block: 12px;
		border-width: 0;
	}
	.boxes .box {
		min-width: 250px;
	}
	.content-wrap .boxes .box {
		flex: 0 0 100%;
	}
	.box {
		padding: 16px;
	}
	.user {
		padding: 0;
	}
	.user-show {
		flex-wrap: wrap;
		gap: 12px;
	}
	.user-tags {
		flex: 0 0 100%;
		order: 1;
	}
	.user__tag {
		height: 21px;
		font-size: 11px;
		line-height: 13px;
	}
	.user-wrap .flex {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	.user-wrap__actions {
		flex-wrap: wrap;
		row-gap: 16px;
	}
	.user-wrap__actions li {
		flex: 0 0 100%;
	}
	.user-wrap__btns {
		margin-top: 30px;
	}
	.news-item {
		flex-wrap: wrap;
		padding: 8px 40px 8px 16px;
		gap: 0;
		height: auto;
	}
	.news-item__date {
		flex: 0 0 100%;
		margin-bottom: 6px;
	}
	.news-item__date:before {
		display: none;
	}
	.news-item__title {
		flex: 0 0 100%;
	}
	.news-item__title .icon {
		width: 16px;
		height: 16px;
	}
	.news-item__more {
		position: absolute;
		top: 50%;
		right: 16px;
		transform: translateY(-50%);
	}
	.text img {
		margin-bottom: 16px;
	}
	.text__img {
		flex-wrap: wrap;
		margin-bottom: 30px;
		gap: 0;
	}
	.popup.active {
		top: 0;
		left: 0;
		padding: 16px;
		width: 100%;
		border-radius: 0 0 20px 20px;
		transform: none;
	}
	.chat-form-wrap {
		flex-wrap: wrap;
		gap: 8px;
	}
	.chat__input {
		flex: 0 0 100%;
		order: 0;
		max-height: 250px;
	}
	.chat__attach,
	.chat-actions {
		flex: 0 0 calc(50% - 8px);
		order: 1;
	}
	.chat-actions {
		justify-content: flex-end;
		gap: 10px;
		text-align: right;
	}
	.chat-actions button {
		width: 34px;
		height: 34px;
	}
}
@media (max-width: 576px) {
	.widget {
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 70vh;
		border-radius: 20px 20px 0 0;
	}
	.widget-head,
	.widget-body,
	.widget-form {
		padding: 16px;
	}
	.home-links__title::before, .home-links__title::after {
		width: 30px;
	}
	.home-links__last {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}
	.home-links__last span {
		flex: 0 0 100%;
	}
	.user-wrap__btns {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		row-gap: 16px;
	}
	.user-wrap__btns > .user-wrap__btn {
		flex: 0 0 auto;
		width: auto;
	}
	.form--invite {
		flex-wrap: wrap;
		gap: 0;
	}
	.form--invite .form-group,
	.form--inline .form-group {
        flex: 0 0 100%;
    }
	.form--invite .form-group-input input,
	.form--invite .form-group .btn {
		width: 100%;
	}
}
@media (max-width: 500px) {
	.panel .wrapper > .btn,
	.panel--center .wrapper > .btn,
	.panel__btns {
		grid-column: 1 / -1;
		justify-self: stretch;
		width: 100%;
	}
	.panel__btns .btn {
		width: 100%;
	}
	.panel .wrapper > .btn,
	.panel--center .wrapper > .btn {
		grid-row: 2;
	}
	.panel__btns {
		flex-direction: column;
	}
}
@media (max-width: 480px) {
	.grid-4 {
		--grid: 1;
	}
	.plan__detail li,
	.plans--payment .plan__detail li {
		flex: 0 0 100%;
		padding-right: 0;
	}
	.panel .wrapper,
	.panel--center .wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
	.panel h1 {
		grid-row: 1;
		width: 100%;
		min-height: 41px;
	}
	.box--payment {
		flex-wrap: wrap;
	}
	.box--payment .btn {
		flex: 0 0 100%;
		margin-top: 16px;
	}
	.bot,
	a.bot {
		flex-wrap: wrap;
	}
	.bot-info {
		padding-right: 40px;
	}
	.bot-actions {
		flex: 0 0 100%;
	}
	.bot-actions .switch {
		position: absolute;
		top: 16px;
		right: 16px;
	}
	.bot-detail .bot__avatar {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
	}
	.bot-detail__title {
		font-size: 16px;
		line-height: 20px;
	}
	.bot-detail__text,
	.bot-detail-info__title {
		font-size: 12px;
		line-height: 16px;
	}
	.bot-detail-info,
	.bot-detail-btns {
		flex-wrap: wrap;
	}
	.bot-detail-info .flex-50,
	.bot-detail-btns .btn {
		flex: 0 0 100%;
	}
	.bot-detail-info__text li {
		font-size: 12px;
	}
	.prompt {
        flex-wrap: wrap;
        padding: 8px 16px;
		gap: 8px;
		row-gap: 0;
        height: auto;
    }
	.prompt__type {
		flex: 0 0 calc(50% - 8px);
		order: 0;
		margin-bottom: 6px;
	}
	.prompt__date {
		flex: 0 0 calc(50% - 8px);
		order: 1;
		margin-bottom: 6px;
	}
	.prompt__title {
		flex: 0 0 calc(90% - 8px);
		order: 2;
	}
	.prompt__price {
		flex: 0 0 calc(50% - 8px);
		order: 2;
	}
	.prompt__edit {
		flex: 0 0 calc(10% - 8px);
		order: 3;
		margin-left: 0;
	}
	.prompt__status {
		flex: 0 0 calc(10% - 8px);
		order: 3;
	}
	.prompt__date,
	.prompt__edit,
	.prompt__price,
	.prompt__status {
		justify-self: flex-end;
		text-align: right;
	}
	.tutorial__foot {
		flex-wrap: wrap;
		gap: 32px;
		row-gap: 16px;
	}
	.tutorial__foot a {
		flex: 0 0 auto;
		width: auto;
	}
}