/* ========================================================================= */
/* ================== N8N CHAT СТИЛИ - ОБНОВЛЕННАЯ ВЕРСИЯ ================ */
/* ========================================================================= */

/* ========================================================================= */
/* ==================== КНОПКА ЧАТА - ФИРМЕННЫЙ ДИЗАЙН =================== */
/* ========================================================================= */

.chat-window-wrapper {
	z-index: 9999 !important;
}

.chat-window-wrapper .chat-window-toggle {
	position: relative !important;
	width: var(--chat-button-size) !important;
	height: var(--chat-button-size) !important;
	border-radius: 50% !important;
	background: var(--gradient-dark) !important;
	box-shadow:
		0 8px 20px rgba(43, 49, 55, 0.3),
		0 4px 10px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	border: 1px solid var(--glassmorphism-border) !important;
	cursor: pointer !important;
	transition: var(--transition-bounce) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}

/* Мобильные размеры */
@media (max-width: 768px) {
	.chat-window-wrapper .chat-window-toggle {
		width: var(--chat-button-size-mobile) !important;
		height: var(--chat-button-size-mobile) !important;
	}

	.chat-window-wrapper .chat-window-toggle::before {
		width: 28px !important;
		height: 28px !important;
		margin-top: -14px !important;
		margin-left: -14px !important;
	}
}

/* СКРЫТИЕ СТАНДАРТНЫХ ИКОНОК */
.chat-window-wrapper .chat-window-toggle svg,
.chat-window-wrapper .chat-window-toggle i {
	display: none !important;
}

/* ЛОГОТИП ВНУТРИ КНОПКИ */
.chat-window-wrapper .chat-window-toggle::before {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 32px !important;
	height: 32px !important;
	margin-top: -16px !important;
	margin-left: -16px !important;
	background-image: url('../../../images/chat/logo-white.svg') !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
	transform: rotate(0deg) !important;
	z-index: 9999 !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
}

/* ========================================================================= */
/* ===================== СОСТОЯНИЯ КНОПКИ ЧАТА ============================ */
/* ========================================================================= */

/* HOVER СОСТОЯНИЕ - ПОДЪЕМ + БЕЛЫЙ ЛОГОТИП */
.chat-window-wrapper .chat-window-toggle:hover {
	transform: translateY(-2px) scale(1.05) !important;
	background: linear-gradient(145deg, #3a404a, #2b3137) !important;
	box-shadow:
		0 16px 32px rgba(43, 49, 55, 0.4),
		0 8px 16px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
	border: 1px solid var(--glassmorphism-border) !important;
}

.chat-window-wrapper .chat-window-toggle:hover::before {
	background-image: url('../../../images/chat/logo-white.svg') !important;
	transform: rotate(15deg) scale(1.1) !important;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
}

/* АКТИВНОЕ СОСТОЯНИЕ (НАЖАТИЕ) */
.chat-window-wrapper .chat-window-toggle:active {
	transform: translateY(0) scale(0.96) !important;
	background: var(--gradient-dark) !important;
	box-shadow:
		inset 3px 3px 8px rgba(0, 0, 0, 0.3),
		inset -1px -1px 4px rgba(255, 255, 255, 0.1),
		0 2px 6px rgba(43, 49, 55, 0.2) !important;
	border: 1px solid var(--glassmorphism-border) !important;
}

/* ОТКРЫТЫЙ ЧАТ - СИНЯЯ КНОПКА С БЕЛЫМ ЛОГОТИПОМ */
.chat-window-wrapper .chat-window:not([style*="display: none"])+.chat-window-toggle {
	background: linear-gradient(145deg, #007AFF, #0056CC) !important;
	box-shadow:
		0 12px 28px rgba(0, 122, 255, 0.4),
		0 6px 14px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	border: 1px solid var(--glassmorphism-border) !important;
}

.chat-window-wrapper .chat-window:not([style*="display: none"])+.chat-window-toggle::before {
	background-image: url('../../../images/chat/logo-white.svg') !important;
	transform: rotate(18deg) scale(1.1) !important;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
}

/* ПРОДАВЛИВАНИЕ ПРИ ЗАКРЫТИИ */
.chat-window-wrapper .chat-window:not([style*="display: none"])+.chat-window-toggle:active {
	transform: translateY(0) scale(0.96) !important;
	background: linear-gradient(145deg, #0056CC, #004499) !important;
	box-shadow:
		inset 3px 3px 8px rgba(0, 0, 0, 0.3),
		inset -1px -1px 4px rgba(255, 255, 255, 0.1),
		0 2px 6px rgba(0, 122, 255, 0.3) !important;
	border: 1px solid var(--glassmorphism-border) !important;
}

/* ========================================================================= */
/* ======================= ТЕМНАЯ ТЕМА - КНОПКА ========================== */
/* ========================================================================= */

:root[data-theme="dark"] .chat-window-wrapper .chat-window-toggle {
	background: linear-gradient(145deg, rgba(44, 44, 46, 0.95), rgba(28, 28, 30, 0.9)) !important;
	border: 2px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Логотип в темной теме - БЕЛЫЙ */
:root[data-theme="dark"] .chat-window-wrapper .chat-window-toggle::before {
	background-image: url('../../../images/chat/logo-white.svg') !important;
}

/* Hover в темной теме - ОРАНЖЕВЫЙ */
:root[data-theme="dark"] .chat-window-wrapper .chat-window-toggle:hover {
	transform: translateY(-2px) scale(1.05) !important;
	box-shadow: 0 12px 24px rgba(255, 149, 0, 0.3), 0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

:root[data-theme="dark"] .chat-window-wrapper .chat-window-toggle:hover::before {
	background-image: url('../../../images/chat/logo-orange.svg') !important;
	transform: rotate(15deg) scale(1.1) !important;
}

/* ТЕМНАЯ ТЕМА - УЛУЧШЕННОЕ ПРОДАВЛИВАНИЕ */
:root[data-theme="dark"] .chat-window-wrapper .chat-window-toggle:active {
	transform: translateY(0) scale(0.96) !important;
	background: linear-gradient(145deg, rgba(20, 20, 22, 0.95), rgba(36, 36, 38, 1)) !important;
	box-shadow:
		inset 3px 3px 8px rgba(0, 0, 0, 0.5),
		inset -1px -1px 4px rgba(255, 255, 255, 0.03),
		0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Открытый чат в темной теме - ОРАНЖЕВЫЙ + НАКЛОН */
:root[data-theme="dark"] .chat-window-wrapper .chat-window:not([style*="display: none"])+.chat-window-toggle::before {
	background-image: url('../../../images/chat/logo-orange.svg') !important;
	transform: rotate(18deg) scale(1.1) !important;
}

:root[data-theme="dark"] .chat-window-wrapper .chat-window:not([style*="display: none"])+.chat-window-toggle {
	background: linear-gradient(145deg, rgba(50, 50, 52, 1), rgba(35, 35, 37, 0.95)) !important;
	box-shadow: 0 8px 20px rgba(255, 149, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Продавливание при закрытии в темной теме - УЛУЧШЕННОЕ */
:root[data-theme="dark"] .chat-window-wrapper .chat-window:not([style*="display: none"])+.chat-window-toggle:active {
	transform: translateY(0) scale(0.96) !important;
	background: linear-gradient(145deg, rgba(20, 20, 22, 0.95), rgba(36, 36, 38, 1)) !important;
	box-shadow:
		inset 3px 3px 8px rgba(0, 0, 0, 0.5),
		inset -1px -1px 4px rgba(255, 255, 255, 0.03),
		0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* ========================================================================= */
/* ======================= ОКНО ЧАТА - СТИЛИ ============================= */
/* ========================================================================= */

/* ОКНО ЧАТА - СВЕТЛАЯ ТЕМА */
.chat-window-wrapper .chat-window {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
	border: 1px solid var(--glassmorphism-border) !important;
	backdrop-filter: blur(15px) !important;
	background: var(--chat--color-white) !important;
	border-radius: var(--chat--border-radius) !important;
}

/* ТЕМНАЯ ТЕМА - СЕРАЯ РАМКА + ОРАНЖЕВОЕ СВЕЧЕНИЕ */
:root[data-theme="dark"] .chat-window-wrapper .chat-window {
	border: 1px solid var(--glassmorphism-border) !important;
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.5),
		0 0 30px rgba(255, 149, 0, 0.3),
		0 0 60px rgba(255, 149, 0, 0.1) !important;
}

#n8n-chat .chat-widget {
	background: var(--chat--color-white) !important;
	border-radius: var(--chat--border-radius) !important;
}

/* ========================================================================= */
/* ======================= СООБЩЕНИЯ ЧАТА ================================ */
/* ========================================================================= */

/* СООБЩЕНИЯ ПОЛЬЗОВАТЕЛЯ */
#n8n-chat .chat-message-from-user,
#n8n-chat [class*="user-message"],
#n8n-chat [class*="message-user"] {
	color: #ffffff !important;
	background: var(--chat--color-primary) !important;
}

/* Темная тема - ОРАНЖЕВЫЕ сообщения пользователя с ЧЕРНЫМ текстом */
:root[data-theme="dark"] #n8n-chat .chat-message-from-user,
:root[data-theme="dark"] #n8n-chat [class*="user-message"],
:root[data-theme="dark"] #n8n-chat [class*="message-user"] {
	color: #000000 !important;
	background: var(--brand-orange, #FF9500) !important;
}

/* СООБЩЕНИЯ БОТА */
#n8n-chat .chat-message-from-bot {
	color: var(--chat--color-dark) !important;
	background: var(--chat--color-light) !important;
}

:root[data-theme="dark"] #n8n-chat .chat-message-from-bot {
	color: var(--text-primary) !important;
	background: var(--bg-tertiary) !important;
}

/* ========================================================================= */
/* ==================== КНОПКА ОТПРАВКИ И ПОЛЕ ВВОДА ===================== */
/* ========================================================================= */

/* КНОПКА ОТПРАВКИ - НЕАКТИВНАЯ (серая) */
#n8n-chat .chat-input-send-button[disabled] svg,
#n8n-chat .chat-input-send-button[disabled] i,
#n8n-chat button[type="submit"][disabled] svg,
#n8n-chat button[type="submit"][disabled] i,
.chat-input-send-button[data-v-de5e7961][disabled] svg {
	color: var(--chat--color-disabled) !important;
	fill: var(--chat--color-disabled) !important;
	opacity: 1 !important;
	transition: all 0.3s ease !important;
}

/* КНОПКА ОТПРАВКИ - АКТИВНАЯ (синяя в светлой теме) */
#n8n-chat .chat-input-send-button:not([disabled]) svg,
#n8n-chat .chat-input-send-button:not([disabled]) i,
#n8n-chat button[type="submit"]:not([disabled]) svg,
#n8n-chat button[type="submit"]:not([disabled]) i,
.chat-input-send-button[data-v-de5e7961]:not([disabled]) svg {
	color: var(--chat--color-primary) !important;
	fill: var(--chat--color-primary) !important;
	opacity: 1 !important;
	transition: all 0.3s ease !important;
}

/* Темная тема - оранжевая кнопка отправки */
:root[data-theme="dark"] #n8n-chat .chat-input-send-button:not([disabled]) svg,
:root[data-theme="dark"] #n8n-chat .chat-input-send-button:not([disabled]) i,
:root[data-theme="dark"] #n8n-chat button[type="submit"]:not([disabled]) svg,
:root[data-theme="dark"] #n8n-chat button[type="submit"]:not([disabled]) i,
:root[data-theme="dark"] .chat-input-send-button[data-v-de5e7961]:not([disabled]) svg {
	color: var(--brand-orange, #FF9500) !important;
	fill: var(--brand-orange, #FF9500) !important;
}

/* Наследование цвета для вложенных элементов */
#n8n-chat .chat-input-send-button svg *,
#n8n-chat button[type="submit"] svg *,
.chat-input-send-button[data-v-de5e7961] svg * {
	color: inherit !important;
	fill: inherit !important;
}

/* ========================================================================= */
/* ======================== ЗАГОЛОВКИ ЧАТА ================================ */
/* ========================================================================= */

#n8n-chat .chat-header,
#n8n-chat [class*="header"] {
	background: #2b3137 !important;
	color: #ffffff !important;
}

:root[data-theme="dark"] #n8n-chat .chat-header,
:root[data-theme="dark"] #n8n-chat [class*="header"] {
	background: #404548 !important;
	color: #ffffff !important;
}

/* ========================================================================= */
/* =============== ПОЛЕ ВВОДА СООБЩЕНИЙ - БЕЗ РАМОК ====================== */
/* ========================================================================= */

/* КОНТЕЙНЕР ПОЛЯ ВВОДА */
#n8n-chat .chat-input,
#n8n-chat .chat-inputs,
#n8n-chat [data-v-de5e7961] .chat-inputs,
.chat-inputs[data-v-de5e7961],
.chat-input[data-v-de5e7961] {
	display: flex !important;
	align-items: center !important;
	background: var(--chat--color-white) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0.5rem !important;
	transition: all 0.3s ease !important;
	width: 100% !important;
	min-height: 2.5rem !important;
}

/* ТЕКСТОВОЕ ПОЛЕ */
#n8n-chat .chat-inputs textarea,
#n8n-chat textarea[data-v-de5e7961],
.chat-inputs textarea[data-v-de5e7961] {
	background: transparent !important;
	color: var(--text-primary) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0.5rem 0.75rem !important;
	font-family: var(--chat--font-family, inherit) !important;
	font-size: 16px !important; /* iOS Safari auto-zooms if font-size < 16px on focus */
	line-height: 1.4 !important;
	flex: 1 !important;
	min-height: 1.5rem !important;
	max-height: 4.2rem !important;
	height: auto !important;
	resize: none !important;
	outline: none !important;
	overflow-y: auto !important;
	vertical-align: middle !important;
}

/* PLACEHOLDER */
#n8n-chat .chat-inputs textarea::placeholder,
#n8n-chat textarea[data-v-de5e7961]::placeholder,
.chat-inputs textarea[data-v-de5e7961]::placeholder {
	color: var(--text-muted, #8e8e93) !important;
	opacity: 0.7 !important;
	line-height: 1.4 !important;
	padding-top: 0.3rem !important;
	transform: translateY(2px) !important;
}

/* Темная тема - placeholder */
:root[data-theme="dark"] #n8n-chat .chat-inputs textarea::placeholder,
:root[data-theme="dark"] #n8n-chat textarea[data-v-de5e7961]::placeholder,
:root[data-theme="dark"] .chat-inputs textarea[data-v-de5e7961]::placeholder {
	color: rgba(255, 255, 255, 0.6) !important;
	padding-top: 0.3rem !important;
	transform: translateY(2px) !important;
}

/* Темная тема - поле ввода */
:root[data-theme="dark"] #n8n-chat .chat-inputs,
:root[data-theme="dark"] .chat-inputs[data-v-de5e7961],
:root[data-theme="dark"] .chat-input[data-v-de5e7961] {
	background: var(--chat--color-white) !important;
}

:root[data-theme="dark"] #n8n-chat .chat-inputs textarea,
:root[data-theme="dark"] .chat-inputs textarea[data-v-de5e7961] {
	color: #ffffff !important;
}

/* ========================================================================= */
/* =============== КНОПКА ОТПРАВКИ (САМОЛЕТИК) - НЕЙМОФИЗМ ================ */
/* ========================================================================= */

/* КОНТЕЙНЕР КНОПКИ */
#n8n-chat .chat-inputs-controls,
#n8n-chat [data-v-de5e7961] .chat-inputs-controls,
.chat-inputs-controls[data-v-de5e7961] {
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100% !important;
	width: auto !important;
	margin-left: 0.5rem !important;
}

/* КНОПКА ОТПРАВКИ - КВАДРАТНАЯ С НЕЙМОФИЗМОМ */
#n8n-chat .chat-input-send-button,
#n8n-chat .chat-input-send-button[data-v-de5e7961],
#n8n-chat button[type="submit"],
.chat-input-send-button[data-v-de5e7961] {
	height: var(--chat--textarea--height, 2.5rem) !important;
	width: var(--chat--textarea--height, 2.5rem) !important;
	background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(240, 240, 240, 0.95)) !important;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 12px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow:
		inset -2px -2px 4px rgba(0, 0, 0, 0.1),
		inset 2px 2px 4px rgba(255, 255, 255, 1),
		0 6px 12px rgba(0, 0, 0, 0.1) !important;
	transition: var(--transition-bounce) !important;
}

/* HOVER ЭФФЕКТ */
.chat-input-send-button[data-v-de5e7961]:hover:not([disabled]),
#n8n-chat .chat-input-send-button:hover:not([disabled]) {
	transform: translateY(-2px) !important;
	background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(248, 248, 248, 0.95)) !important;
	box-shadow:
		inset -2px -2px 4px rgba(0, 0, 0, 0.1),
		inset 2px 2px 4px rgba(255, 255, 255, 1),
		0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* АКТИВНОЕ СОСТОЯНИЕ */
.chat-input-send-button[data-v-de5e7961]:active:not([disabled]),
#n8n-chat .chat-input-send-button:active:not([disabled]) {
	transform: translateY(0) !important;
	background: linear-gradient(145deg, rgba(248, 248, 248, 0.95), rgba(255, 255, 255, 1)) !important;
	box-shadow:
		inset 2px 2px 4px rgba(0, 0, 0, 0.1),
		inset -2px -2px 4px rgba(255, 255, 255, 0.9),
		0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ТЕМНАЯ ТЕМА - КНОПКА */
:root[data-theme="dark"] .chat-input-send-button[data-v-de5e7961],
:root[data-theme="dark"] #n8n-chat .chat-input-send-button {
	background: linear-gradient(145deg, rgba(44, 44, 46, 1), rgba(28, 28, 30, 0.95)) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow:
		inset -2px -2px 4px rgba(0, 0, 0, 0.3),
		inset 2px 2px 4px rgba(255, 255, 255, 0.05),
		0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

:root[data-theme="dark"] .chat-input-send-button[data-v-de5e7961]:hover:not([disabled]),
:root[data-theme="dark"] #n8n-chat .chat-input-send-button:hover:not([disabled]) {
	background: linear-gradient(145deg, rgba(58, 58, 60, 1), rgba(44, 44, 46, 0.95)) !important;
	box-shadow:
		inset -2px -2px 4px rgba(0, 0, 0, 0.3),
		inset 2px 2px 4px rgba(255, 255, 255, 0.08),
		0 8px 16px rgba(0, 0, 0, 0.5) !important;
}

:root[data-theme="dark"] .chat-input-send-button[data-v-de5e7961]:active:not([disabled]),
:root[data-theme="dark"] #n8n-chat .chat-input-send-button:active:not([disabled]) {
	background: linear-gradient(145deg, rgba(28, 28, 30, 0.95), rgba(44, 44, 46, 1)) !important;
	box-shadow:
		inset 2px 2px 4px rgba(0, 0, 0, 0.4),
		inset -2px -2px 4px rgba(255, 255, 255, 0.03),
		0 4px 8px rgba(0, 0, 0, 0.4) !important;
}