/* ==========================================================================
   Chat Widget Styles (Optimized - Minimal Changes)
   ========================================================================== */

/* -- CSS Custom Properties (Variables) - Low risk addition -- */
/* Добавляем переменные для цветов, чтобы упростить будущие изменения */
:root {
	--chat-border-color: #ccc;
	--chat-bg-color: white;
	--chat-shadow-color: rgba(0, 0, 0, 0.1);
	--chat-header-bg: #f1f1f1;
	--chat-text-color: #333;
	--chat-close-color: #999;
	--chat-message-bubble-bg: #eeeeee; /* Фон пузырей по умолчанию */
	--chat-message-bubble-border: #d7d7d7;
	--chat-button-bg: #007bff;
	--chat-button-text: white;
	--chat-button-hover-bg: #0056b3;
	--chat-button-disabled-bg: #cccccc;
	--chat-z-index-widget: 1000;
	--chat-z-index-overlay: 1010; /* Для элементов поверх виджета */
}

/* ==========================================================================
   Positioning Classes (Consolidated)
   ========================================================================== */
/* Используем ОДИН класс для позиционирования кнопки и контейнера */
.chat-widget-anchor-position {
	position: absolute;
	right: -90px; /* Оставляем оригинальные значения */
	top: auto;
	bottom: 70px; /* Оставляем оригинальные значения */
	z-index: var(--chat-z-index-widget); /* Базовый z-index */
}

/* Удаляем .chat-widget-position и .chat-toggle-button-position, используем .chat-widget-anchor-position в JS */


/* ==========================================================================
   Toggle Button (Optimized)
   ========================================================================== */
/* Базовый класс для ОБЩИХ стилей кнопки */
.chat-toggle-button-base {
	width: 90px;
	height: 197px;
	cursor: pointer;
	border: none; /* Убираем стили по умолчанию для button, если это button */
	padding: 0;
	background-color: transparent;
	/* Позиционирование берется из .chat-widget-anchor-position */
}

/* ID используются ТОЛЬКО для разных фонов */
/* #chat-button { background: url('/Images/eng_sprite.png'); } /* УДАЛЕНО - дублирует en или не используется? */
#chat-button-en {
	background: url('/Images/eng_sprite.png');
}

#chat-button-ru {
	background: url('/Images/rus_sprite.png');
}
/* ВАЖНО: В JS нужно будет добавить класс .chat-toggle-button-base к элементу кнопки ВМЕСТЕ с его ID */


/* ==========================================================================
   Main Chat Widget Container
   ========================================================================== */
#chat-widget-container {
	/* Размеры и позиционирование НЕ МЕНЯЕМ */
	width: 480px;
	height: 355px;
	border: 1px solid var(--chat-border-color); /* Используем переменную */
	border-radius: 10px;
	background: var(--chat-bg-color); /* Используем переменную */
	box-shadow: 0 0 10px var(--chat-shadow-color); /* Используем переменную */
	font-family: Arial, sans-serif;
	/* z-index: var(--chat-z-index-widget); */ /* z-index теперь в классе позиционирования */
	display: none; /* Управляется JS */
	padding: 10px 5px 5px 5px;
}

/* ==========================================================================
   Widget Header
   ========================================================================== */
#chat-widget-header {
	background: var(--chat-header-bg); /* Переменная */
	padding: 10px;
	border-bottom: 1px solid var(--chat-border-color); /* Переменная */
	display: flex; /* Оставляем как было */
	justify-content: space-between;
	align-items: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#chat-widget-title {
	font-size: 14px;
	color: var(--chat-text-color); /* Переменная */
	margin: 0;
}

#chat-widget-close {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--chat-close-color); /* Переменная */
	/* Абсолютное позиционирование оставляем */
	top: 3px;
	position: absolute;
	right: 10px;
	z-index: var(--chat-z-index-overlay); /* Переменная */
}

/* ==========================================================================
   Widget Body (Scrollable Area)
   ========================================================================== */
#chat-widget-body {
	/* Размеры и overflow НЕ МЕНЯЕМ */
	margin-bottom: 10px;
	padding-bottom: 0;
	height: 290px;
	scrollbar-width: thin;
	overflow-y: auto;
	/* ВАЖНО: position: relative НЕ добавляем, чтобы позиционирование
	   #chat-widget-clear и img#chat-ant-image осталось прежним (относительно #chat-widget-container) */
}

/* ==========================================================================
   Clear Button
   ========================================================================== */
#chat-widget-clear {
	background: var(--chat-message-bubble-bg); /* Переменная (похожий цвет) */
	border: 1px solid var(--chat-message-bubble-border); /* Переменная */
	color: var(--chat-text-color); /* Переменная */
	padding: 2px 6px;
	border-radius: 5px;
	cursor: pointer;
	/* Позиционирование НЕ МЕНЯЕМ */
	position: absolute;
	bottom: 70px;
	right: 25px;
}

	#chat-widget-clear:hover {
		background: #ddd; /* Можно тоже вынести в переменную */
	}

/* ==========================================================================
   Chat Content & Messages
   ========================================================================== */
#chat-content {
	font-size: 14px;
	color: var(--chat-text-color); /* Переменная */
}

	/* Общие стили для всех div внутри контента (сообщения) */
	/* Селектор упрощен, но результат тот же */
	#chat-content > div {
		/* Размеры и стили НЕ МЕНЯЕМ */
		width: 300px;
		border: 1px solid var(--chat-message-bubble-border); /* Переменная */
		margin: 5px;
		padding: 5px;
		border-radius: 5px;
		background-color: var(--chat-message-bubble-bg); /* Переменная */
		word-wrap: break-word;
	}

	/* Стили для сообщений Ассистента */
	/* Упрощенный селектор */
	#chat-content .ans {
		position: relative; /* Оставляем для ::after */
		/* ВАЖНО: Оставляем этот странный стиль, чтобы не сломать текущий вид */
		background-color: transparent; /* !!! Этот стиль делает фон ответа прозрачным !!! */
	}

	/* Убираем лишние отступы у первого/последнего сообщения */
	/* Селекторы упрощены */
	#chat-content > div:first-child {
		margin-top: 0;
	}

	#chat-content > div:last-child {
		margin-bottom: 0;
	}
	/* Примечание: У вас было правило только для :first-child.ans и :last-child.ans/.message.
   Я применил его ко всем первым/последним div внутри #chat-content, что более универсально.
   Если нужно строго для .ans/.message, верните как было:
   #chat-content .ans:first-child { margin-top: 0; }
   #chat-content .ans:last-child, #chat-content .message:last-child { margin-bottom: 0; }
*/


	/* Хвостик для сообщений ассистента */
	/* Селектор упрощен */
	#chat-content .ans::after {
		/* Стили НЕ МЕНЯЕМ */
		background-color: var(--chat-message-bubble-bg); /* Переменная */
		width: 13px;
		height: 10px;
		position: absolute;
		content: "";
		top: 10px;
		right: -13px;
		background: url(/Images/eng_sprite.png) 100% 100% no-repeat;
		z-index: 1001; /* Убедитесь, что это не конфликтует с --chat-z-index-overlay */
	}

/* ==========================================================================
   Ant Image
   ========================================================================== */
img#chat-ant-image {
	/* float: right; */ /* УДАЛЕНО - Не работает с position: absolute */
	position: absolute; /* Оставляем как было */
	/* Позиционирование НЕ МЕНЯЕМ */
	top: 10px;
	right: 10px;
	pointer-events: none;
}

/* ==========================================================================
   Widget Footer
   ========================================================================== */
#chat-widget-footer {
	padding: 10px;
	border-top: 1px solid var(--chat-border-color); /* Переменная */
	display: flex; /* Оставляем как было */
	align-items: center;
}

#chat-input {
	flex: 1;
	padding: 5px;
	font-size: 14px;
	border: 1px solid var(--chat-border-color); /* Переменная */
	border-radius: 5px;
	margin-right: 10px;
}

/* Стилизуем кнопку отправки отдельно от других button для ясности */
#send-button {
	background: var(--chat-button-bg); /* Переменная */
	border: none;
	color: var(--chat-button-text); /* Переменная */
	padding: 6px 12px;
	border-radius: 5px;
	cursor: pointer;
}

	#send-button[disabled] {
		background: var(--chat-button-disabled-bg); /* Переменная */
		cursor: not-allowed;
	}

	#send-button:hover:not([disabled]) { /* Hover только для активной кнопки */
		background: var(--chat-button-hover-bg); /* Переменная */
	}
/* Удалены общие стили для #chat-widget-footer button */


/* ==========================================================================
   Loader Animation
   ========================================================================== */

.anTloader {
	margin-left: 4px;
	margin-top: 8px;
	width: 30px;
	aspect-ratio: 2;
	--gr: no-repeat radial-gradient(circle closest-side,#000 90%, rgba(0, 0, 0, 0)); /* Оставляем rgba */
	background: var(--gr) 0% 50%, var(--gr) 50% 50%, var(--gr) 100% 50%;
	background-size: calc(100%/3) 50%;
	animation: l3 1s infinite linear;
}

@keyframes l3 {
	20% {
		background-position: 0% 0%, 50% 50%, 100% 50%
	}

	40% {
		background-position: 0% 100%, 50% 0%, 100% 50%
	}

	60% {
		background-position: 0% 50%, 50% 100%, 100% 0%
	}

	80% {
		background-position: 0% 50%, 50% 50%, 100% 100%
	}
}