/**
 * Widget Override CSS
 *
 * Дополнительные стили для виджета WhatsApp.
 * Добавляет паттерн фона как в настоящем WhatsApp.
 *
 * @package WhatsApp_WP_Widget
 */

/* Паттерн теперь в основных стилях виджета (chat.css) */

/* Кастомный scrollbar */
.wa-widget-chat-layout::-webkit-scrollbar {
	width: 6px;
}

.wa-widget-chat-layout::-webkit-scrollbar-track {
	background: transparent;
}

.wa-widget-chat-layout::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

.wa-widget-chat-layout::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.3);
}

/* Пузыри сообщений - белый цвет */
.wa-widget-message-bubble {
	background-color: #ffffff !important;
	box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13) !important;
}

/* Хвостик пузыря - белый */
.wa-widget-bubble-tail path {
	fill: #ffffff !important;
}

/* Время сообщения - точные стили Elfsight */
.wa-widget-message-time-value {
	font-size: 11px !important;
	color: #667781 !important;
	background-color: rgba(255, 255, 255, 0.8) !important;
	border-radius: 12px !important;
	font-weight: 500 !important;
}

/* Пузырь сообщения - точные размеры */
.wa-widget-message-bubble {
	max-width: 75% !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}

/* Текст сообщения */
.wa-widget-message-content {
	color: #000000 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
}

/* Убираем жирное выделение из div внутри сообщения */
.wa-widget-message-content div,
.wa-widget-message-content span,
.wa-widget-message-content p {
	font-weight: 400 !important;
}

/* Header - имя и статус белым цветом */
.wa-widget-header-name {
	color: #FFFFFF !important;
	font-weight: 500 !important;
	font-size: 16px !important;
}

.wa-widget-header-status {
	color: rgba(255, 255, 255, 0.9) !important;
	font-weight: 400 !important;
	font-size: 13px !important;
}

/* Online индикатор */
.wa-widget-online-indicator {
	background-color: #4AD504 !important;
}

/* Плавающая кнопка - убираем зелёную рамку при фокусе */
.wa-widget-floating-button:focus,
.wa-widget-floating-button:focus-visible,
.wa-widget-floating-button:active {
	outline: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Поле ввода - обычный шрифт, не жирный */
.wa-widget-textarea {
	font-weight: 400 !important;
}

/* Кнопка закрытия - полностью статична, без hover эффектов */
.wa-widget-close-button {
	background: transparent !important;
	background-color: transparent !important;
}

.wa-widget-close-button:hover,
.wa-widget-close-button:active,
.wa-widget-close-button:focus {
	background: transparent !important;
	background-color: transparent !important;
	transform: none !important;
	opacity: 1 !important;
	box-shadow: none !important;
	outline: none !important;
}

.wa-widget-close-button svg {
	fill: #ffffff !important;
	color: #ffffff !important;
}

/* ИСПРАВЛЕНИЕ: Кнопка должна ВСЕГДА быть видна */
.wa-widget-floating-button {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

/* z-index для правильного наложения элементов */
.wa-widget-chat-window {
	z-index: 999999 !important;
}

.wa-widget-floating-button {
	z-index: 999998 !important;
}

/* Анимация набора текста - более реалистичная как в настоящем WhatsApp */
.wa-widget-typing-animation {
	background-color: #ffffff !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13) !important;
}

.wa-widget-typing-dot {
	width: 8px !important;
	height: 8px !important;
	background-color: #90949c !important;
	border-radius: 50% !important;
	animation: wa-widget-typing-bounce 1.4s infinite ease-in-out both !important;
}

.wa-widget-typing-dot:nth-child(1) {
	animation-delay: 0s !important;
}

.wa-widget-typing-dot:nth-child(2) {
	animation-delay: 0.15s !important;
}

.wa-widget-typing-dot:nth-child(3) {
	animation-delay: 0.3s !important;
}

@keyframes wa-widget-typing-bounce {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.4;
	}
	30% {
		transform: translateY(-6px);
		opacity: 1;
	}
}