.support-chat-widget {
    --support-chat-accent: #315efb;
    --support-chat-accent-dark: #2349c7;
    --support-chat-text: #182230;
    --support-chat-muted: #657182;
    --support-chat-border: #dce2ea;
    --support-chat-surface: #ffffff;
    --support-chat-user: #315efb;
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 10000;
   /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;*/
   font-family: OpenSans, /*Onest*/;
    color: var(--support-chat-text);
}

.support-chat-widget *,
.support-chat-widget *::before,
.support-chat-widget *::after {
    box-sizing: border-box;
}

/* Общее правило сайта button:hover, button:active красит любую кнопку в #7047C9 и убирает иконку.
   Базовый вид кнопок чата закреплён и для :hover/:active; свои hover и нажатие заданы ниже и перекрывают его */
.support-chat-widget__launcher,
.support-chat-widget__launcher:hover,
.support-chat-widget__launcher:active {
    width: 60px; height: 60px;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml;utf8,<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='60' height='60' rx='30' fill='%238C57FC'/><g clip-path='url(%23clip0_7773_247995)'><path d='M40.8679 16.5263C42.3296 16.5263 43.5371 17.7339 43.5371 19.1956V35.4656C43.5371 36.991 42.3296 38.1985 40.8679 38.1985H21.865L16.4629 43.6006V19.1956C16.4629 17.7339 17.6704 16.5263 19.1321 16.5263H40.8679Z' fill='white'/></g><defs><clipPath id='clip0_7773_247995'><rect x='10' y='10' width='40' height='40' rx='20' fill='white'/></clipPath></defs></svg>") no-repeat 50% 50%;
    cursor: pointer;
    font: inherit;
}

/* :hover только для устройств с курсором. На телефоне hover «залипает» в точке касания
   и переходит на элемент, который после перерисовки оказался на этом месте */
.support-chat-widget__launcher:focus-visible {
   background: url("data:image/svg+xml;utf8,<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='60' height='60' rx='30' fill='%237047C9'/><g clip-path='url(%23clip0_7773_259471)'><path d='M40.8679 16.5263C42.3296 16.5263 43.5371 17.7339 43.5371 19.1956V35.4656C43.5371 36.991 42.3296 38.1985 40.8679 38.1985H21.865L16.4629 43.6006V19.1956C16.4629 17.7339 17.6704 16.5263 19.1321 16.5263H40.8679Z' fill='white'/></g><defs><clipPath id='clip0_7773_259471'><rect x='10' y='10' width='40' height='40' rx='20' fill='white'/></clipPath></defs></svg>") no-repeat 50% 50%;
}
@media (hover: hover) {
    .support-chat-widget__launcher:hover {
    background: url("data:image/svg+xml;utf8,<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='60' height='60' rx='30' fill='%237047C9'/><g clip-path='url(%23clip0_7773_259471)'><path d='M40.8679 16.5263C42.3296 16.5263 43.5371 17.7339 43.5371 19.1956V35.4656C43.5371 36.991 42.3296 38.1985 40.8679 38.1985H21.865L16.4629 43.6006V19.1956C16.4629 17.7339 17.6704 16.5263 19.1321 16.5263H40.8679Z' fill='white'/></g><defs><clipPath id='clip0_7773_259471'><rect x='10' y='10' width='40' height='40' rx='20' fill='white'/></clipPath></defs></svg>") no-repeat 50% 50%;
    }
}

/*.support-chat-widget__launcher-icon {*/
/*    font-size: 20px;*/
/*}*/

.support-chat-widget__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    /*width: min(390px, calc(100vw - 24px)); */
	width: 345px;
    height: min(640px, calc(100vh - 32px));
    overflow: hidden;
    border-radius: 10px;
    background: var(--support-chat-surface);
    box-shadow: 0px 10px 30px 0px rgba(140, 87, 252, 0.2);
}


.support-chat-widget__panel[hidden] {
    display: none;
}

.support-chat-widget__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 15px 20px;
   background: #333;
    color: #fff;
	box-sizing: border-box;
}

.support-chat-widget__header strong,
.support-chat-widget__presence {
    display: block;
}

.support-chat-widget__header strong {
    font-size: 16px;
}

.support-chat-widget__presence {
    color: #fff;
    font-size: 19px; line-height: 30px; font-weight: 500;
}

.support-chat-widget__header-actions {
    display: flex;
    gap: 4px;
}

.support-chat-widget__close,
.support-chat-widget__close:hover,
.support-chat-widget__close:active {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: url("data:image/svg+xml;utf8,<svg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_7792_29882)'><path d='M22.1008 9.12891L16.4297 14.8L22.1008 20.4711L20.6711 21.9008L15 16.2297L9.32891 21.9008L7.89922 20.4711L13.5703 14.8L7.89922 9.12891L9.32891 7.69922L15 13.3703L20.6711 7.69922L22.1008 9.12891Z' fill='white'/></g><defs><clipPath id='clip0_7792_29882'><rect width='30' height='30' rx='15' fill='white'/></clipPath></defs></svg>") no-repeat 50% 50%;
    cursor: pointer;
    font-size: 0;
}

@media (hover: hover) {
    .support-chat-widget__close:hover {
    background: #474747 url("data:image/svg+xml;utf8,<svg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(%23clip0_7792_29882)'><path d='M22.1008 9.12891L16.4297 14.8L22.1008 20.4711L20.6711 21.9008L15 16.2297L9.32891 21.9008L7.89922 20.4711L13.5703 14.8L7.89922 9.12891L9.32891 7.69922L15 13.3703L20.6711 7.69922L22.1008 9.12891Z' fill='white'/></g><defs><clipPath id='clip0_7792_29882'><rect width='30' height='30' rx='15' fill='white'/></clipPath></defs></svg>") no-repeat 50% 50%;
    }
}

.support-chat-widget__status {
    flex-shrink: 0;
    padding: 9px 14px;
    border-bottom: 1px solid #f1d9a7;
    background: #fff7e7;
    color: #744c00;
    font-size: 12px;
    line-height: 1.4;
	
}

.support-chat-widget__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 20px;
    background: #fff;
    scrollbar-width: thin;
    overscroll-behavior: contain;
	display: flex;
	/*flex-direction: column-reverse; */
	flex-direction: column;
    /*justify-content: flex-end;*/
}
.support-chat-widget__content {
  margin-top: auto;     
  display: flex;
  flex-direction: column;

}

.support-chat-widget__messages {
    overflow: visible;
}

.support-chat-widget__message {
	color: #333;
    max-width: 265px;
	box-sizing: border-box;
    margin: 0;
    padding: 10px 15px;
    border-radius: 20px 20px 20px 0;
   background: rgba(242, 242, 242, 1);
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.support-chat-widget__message + .support-chat-widget__message { margin-top: 10px; }
.support-chat-widget__messages + .support-chat-widget__suggestions { margin-top: 20px; }

.support-chat-widget__message--user {
    margin-left: auto;
    border-radius: 20px 20px 0 20px;
    background: #8C57FC;
    color: #fff;
}

.support-chat-widget__message--admin {
    border-left: 3px solid #44a35a;
}

.support-chat-widget__message a {
    color: #8C57FC;
    text-decoration: none;
}
@media (hover: hover) { .support-chat-widget__message a:hover { color: #7047C9; } }

.support-chat-widget__message img,
.support-chat-widget__message video {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 8px;
    border-radius: 8px;
}

.support-chat-widget__message p:first-child {
    margin-top: 0;
}

.support-chat-widget__message p:last-child {
    margin-bottom: 0;
}

.support-chat-widget__source {
    display: block;
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid var(--support-chat-border);
    color: var(--support-chat-muted);
    font-size: 11px;
    white-space: normal;
}

/* Индикатор ожидания: пузырь бота с тремя точками */
.support-chat-widget__typing {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 20px 20px 20px 0;
    background: rgba(242, 242, 242, 1);
}
.support-chat-widget__typing[hidden] {
    display: none;
}
.support-chat-widget__typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--support-chat-muted);
    animation: support-chat-typing 1s linear infinite;
}
.support-chat-widget__typing i:nth-child(2) { animation-delay: .2s; }
.support-chat-widget__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes support-chat-typing {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.support-chat-widget__suggestions {
   display: flex;
   flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    overflow-x: visible;
}

.support-chat-widget__suggestions[hidden] {
    display: none;
}

.support-chat-widget__suggestion,
.support-chat-widget__suggestion:hover,
.support-chat-widget__suggestion:active {
    flex: 0 0 auto;
    align-self: flex-start;
    width: auto;
    height: auto;
    min-height: 0;
    max-width: 100%;
    padding: 8px 13px;
    border: 2px solid #8c57fc;
    border-radius: 20px;
    background: #fff;
    color: #333; 
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
	text-align: left;
	box-sizing: border-box;
}

/*.support-chat-widget__suggestion[data-action="resolved_yes"],
.support-chat-widget__suggestion[data-action="resolved_no"] { border-radius: 20px; }*/

.support-chat-widget__suggestion:focus-visible,
/* Отклик на касание: подсвечивается, только пока палец на кнопке */
.support-chat-widget__suggestion:active {
    background: #8c57fc; color: #fff; border-color: #8c57fc;
}
@media (hover: hover) {
    .support-chat-widget__suggestion:hover {
    background: #8c57fc; color: #fff; border-color: #8c57fc;
    }
}

.support-chat-widget__form {
    flex-shrink: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding: 14px 0px 15px 20px;
	position: relative;
}

.support-chat-widget__input {
    height: 85px;
    resize: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: #333;
    outline: none;
    font: inherit;
    font-size: 14px; line-height: 20px;
	box-shadow: none; padding-right: 60px;
	scrollbar-width: thin;
    overscroll-behavior: contain;
}

.support-chat-widget__send,
.support-chat-widget__send:hover,
.support-chat-widget__send:active {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 0;
   background: url("data:image/svg+xml;utf8,<svg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='30' height='30' rx='15' fill='%238C57FC'/><path d='M7.35078 14.8L15.5 6.65078L23.6492 14.8L22.1719 16.2297L16.5008 10.5586L16.5008 22.9492H14.4992L14.4992 10.5586L8.78047 16.2297L7.35078 14.8Z' fill='white'/></svg>") no-repeat 50% 50%;
    cursor: pointer;
    font-size: 0;
	position: absolute; right: 20px; top: 9px; 
}
@media (hover: hover) { .support-chat-widget__send:hover { background: url("data:image/svg+xml;utf8,<svg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='30' height='30' rx='15' fill='%237047C9'/><path d='M7.35078 14.8L15.5 6.65078L23.6492 14.8L22.1719 16.2297L16.5008 10.5586L16.5008 22.9492H14.4992L14.4992 10.5586L8.78047 16.2297L7.35078 14.8Z' fill='white'/></svg>") no-repeat 50% 50%; } }

.support-chat-widget__send:disabled { /*cursor: wait;*/ cursor: text; opacity: 1; background: url("data:image/svg+xml;utf8,<svg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='30' height='30' rx='15' fill='%23E6E6E6'/><path d='M7.35078 14.8L15.5 6.65078L23.6492 14.8L22.1719 16.2297L16.5008 10.5586L16.5008 22.9492H14.4992L14.4992 10.5586L8.78047 16.2297L7.35078 14.8Z' fill='white'/></svg>") no-repeat 50% 50%; }

.support-chat-widget__input:disabled {
    cursor: wait;
    opacity: .55;
}

.support-chat-widget__suggestion:disabled {
    cursor: wait;
    opacity: .55;
}

.support-chat-widget__privacy {
    padding: 0 12px 9px;
    color: var(--support-chat-muted);
    font-size: 10px;
    text-align: center;
}

.support-chat-widget__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.support-chat-widget__message ul li, 
.support-chat-widget__message ol ul li, 
.support-chat-widget__message ol li, 
.support-chat-widget__message ul ol li {
    list-style-position: outside;
    list-style-type: none;
}

.support-chat-widget__message ol { counter-reset: ol-li; }
.support-chat-widget__message ol ol { counter-reset: ol-ol-li; margin-top: 15px; margin-left: 30px; } 
.support-chat-widget__message ol + li { margin-top: 15px; }

.support-chat-widget__message ol li { margin-left: 20px; list-style-position: outside; list-style-type: none; position: relative; }
.support-chat-widget__message ol li:before { content: counter(ol-li)'.\a0'; counter-increment: ol-li; display: inline-block; 
position: absolute; top: 0px; left: -21px; width: 20px; font-size: 14px; line-height: 20px; text-align: right; vertical-align: baseline; }
.support-chat-widget__message ol ol li:before { content: counter(ol-li) '.' counter(ol-ol-li); counter-increment: ol-ol-li; left: -40px; width: 30px; }

.support-chat-widget__message ul { list-style-type: none; }
.support-chat-widget__message ul li { position: relative; margin-left: 30px; }
.support-chat-widget__message ul li:before { content: '\2014\a0';  position:absolute; top: 0; left: -21px; /* left: 5px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(51, 51, 51, 1); */}

.support-chat-widget__message p + p,
.support-chat-widget__message p + ol,
.support-chat-widget__message p + ul,
.support-chat-widget__message ol + p,
.support-chat-widget__message ul + p { margin-top: 20px; }
.support-chat-widget__message li + li { margin-top: 10px; }


@media (max-width: 768px) {
    html, body {
		overscroll-behavior-y: none; /* убирает bounce-эффект с открытием фона */
	}
	
	.support-chat-widget {
       top: auto; left: auto; right: 0;
    bottom: 0 !important;
    }
	.support-chat-widget__header { position: sticky; top: 0; right: 0; left: 0; }

    .support-chat-widget__panel {
       /* width: calc(100vw - 16px);
        height: calc(100dvh - 16px);*/
		border-radius: 0;	
		/*height: 100vh;
		height: -webkit-fill-available;
        height: 100dvh;*/
        border-radius: 0;
		box-shadow: none;
		
		 width: 100%; height: 100%;
		 right: 0; left: 0;
        bottom: 0; top: 0; 
		
    }
	.support-chat-widget__message { max-width: 295px; }

	.support-chat-widget__launcher { position: fixed; right: 10px;
        bottom: 10px; }
    .support-chat-widget__launcher-label {
        display: none;
    }
	.support-chat-widget.is-open {
		top: 0; left: 0; right: 0;
		bottom: auto !important;
		height: 100%; /* JS заменит на высоту видимой области */
		overflow: hidden;
		background: #fff;
	}
	.support-chat-widget.is-open::before {
		content: '';
		position: fixed;
		top: -100vh; bottom: -100vh; left: 0; right: 0;
		background: #fff;
		z-index: -1;
		pointer-events: none;
	}
  
  
	/* Страница под открытым чатом зафиксирована */
	html.support-chat-lock,
	html.support-chat-lock body {
		overflow: hidden !important;
		overscroll-behavior: none;
		height: 100%;
	}
	html.support-chat-lock body {
		position: fixed !important;
		left: 0; right: 0;
		width: 100%;
	}
  
}

/* Плавная смена цвета при наведении — только для устройств с курсором, на телефоне нажатие откликается сразу */
@media (hover: hover) {
    .support-chat-widget__suggestion { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
    .support-chat-widget__close { transition: background-color .3s ease; }
    .support-chat-widget__message a { transition: color .3s ease; }
}
/* Открытие окна на компьютере: проявление с подъёмом. Запускается само, когда у панели снимается hidden.
   На телефоне не анимируем: одновременно поднимается клавиатура и окно подгоняется под видимую область */
@media (min-width: 769px) {
    .support-chat-widget__panel:not([hidden]) { animation: support-chat-open .3s ease backwards; }
}
@keyframes support-chat-open {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .support-chat-widget__suggestion,
    .support-chat-widget__close,
    .support-chat-widget__message a { transition: none; }
    .support-chat-widget__panel:not([hidden]) { animation: none; }
    .support-chat-widget__typing i { animation: none; opacity: .6; }
}