:root {
	/* === НЕЙТРАЛЬНЫЕ ЦВЕТА (общие для всех тем) === */
	--color-white: #ffffff;
	--color-black: #000000;

	--color-gray-50: #f9fafb;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #d1d5db;
	--color-gray-400: #9ca3af;
	--color-gray-500: #6b7280;
	--color-gray-600: #4b5563;
	--color-gray-700: #374151;
	--color-gray-800: #1f2937;
	--color-gray-900: #111827;

	/* === БАЗОВЫЕ ТЕМЫ (переопределяются через CSS классы) === */
	/* Default/Blue Theme */
	--theme-primary: #2563eb;
	--theme-primary-hover: #1d4ed8;
	--theme-primary-light: #3b82f6;
	--theme-primary-dark: #1e40af;
	--theme-secondary: #7c3aed;
	--theme-secondary-hover: #6d28d9;
	--theme-secondary-light: #8b5cf6;
	--theme-success: #059669;
	--theme-success-hover: #047857;
	--theme-success-light: #10b981;
	--theme-warning: #d97706;
	--theme-warning-hover: #b45309;
	--theme-warning-light: #f59e0b;
	--theme-danger: #dc2626;
	--theme-danger-hover: #b91c1c;
	--theme-gradient-hero: linear-gradient(0deg, #667eea 0%, #764ba2 100%);
	--theme-gradient-cta: linear-gradient(185deg, #2563eb 0%, #1e40af 100%);

	/* === ПРИМЕНЕНИЕ ЦВЕТОВ ТЕМЫ К КОМПОНЕНТАМ === */
	--color-primary: var(--theme-primary);
	--color-primary-hover: var(--theme-primary-hover);
	--color-primary-light: var(--theme-primary-light);
	--color-primary-dark: var(--theme-primary-dark);
	--color-secondary: var(--theme-secondary);
	--color-secondary-hover: var(--theme-secondary-hover);
	--color-secondary-light: var(--theme-secondary-light);
	--color-success: var(--theme-success);
	--color-success-hover: var(--theme-success-hover);
	--color-success-light: var(--theme-success-light);
	--color-warning: var(--theme-warning);
	--color-warning-hover: var(--theme-warning-hover);
	--color-warning-light: var(--theme-warning-light);
	--color-danger: var(--theme-danger);
	--color-danger-hover: var(--theme-danger-hover);

	/* Градиенты */
	--gradient-primary: linear-gradient(0deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	--gradient-success: linear-gradient(0deg, var(--color-success) 0%, var(--color-success-light) 100%);
	--gradient-hero: var(--theme-gradient-hero);
	--gradient-cta: var(--theme-gradient-cta);

	/* Семантические цвета */
	--text-link: var(--theme-primary);
	--text-link-hover: var(--theme-primary-hover);
	--border-focus: var(--theme-primary);
	--message-user-bg: var(--theme-primary);

	/* === РАЗМЕРЫ И ОТСТУПЫ === */
	--radius-sm: 0.375rem;
	--radius-base: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-2xl: 1.75rem;
	--radius-full: 9999px;

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-base: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 2.5rem;
	--space-3xl: 3rem;

	/* Typography */
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;

	--font-weight-mini: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	--line-height-tight: 1.15;
	--line-height-normal: 1.35;
	--line-height-relaxed: 1.45;

	/* === АНИМАЦИИ === */
	--transition-fast: 0.15s ease;
	--transition-base: 0.2s ease;
	--transition-slow: 0.3s ease;

	/* === Z-INDEX === */
	--z-dropdown: 1000;
	--z-modal: 1050;
	--z-tooltip: 1070;

	/* === ТЕНИ === */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-card-hover: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* === ПАРНЫЕ ТЕМЫ === */

/* === ТЕМА 1: СИНЯЯ === */
.theme-blue {
	--theme-primary: #2563eb;
	--theme-primary-hover: #1d4ed8;
	--theme-primary-light: #3b82f6;
	--theme-primary-dark: #1e40af;
	--theme-secondary: #7c3aed;
	--theme-gradient-hero: linear-gradient(0deg, #667eea 0%, #2563eb 100%);
	--theme-gradient-cta: linear-gradient(185deg, #2563eb 0%, #7c3aed 100%);
}

@media (prefers-color-scheme: dark) {
	.theme-blue:not([data-theme-mode="light"]) {
		--theme-primary: #60a5fa;
		--theme-primary-hover: #3b82f6;
		--theme-primary-light: #93c5fd;
		--theme-primary-dark: #2563eb;
		--theme-secondary: #a78bfa;
		--theme-gradient-hero: linear-gradient(0deg, #2563eb 0%, #2563eb 100%);
		--theme-gradient-cta: linear-gradient(185deg, #2563eb 0%, #7c3aed 100%);
	}
}

[data-theme-mode="dark"].theme-blue {
	--theme-primary: #60a5fa;
	--theme-primary-hover: #3b82f6;
	--theme-primary-light: #93c5fd;
	--theme-primary-dark: #2563eb;
	--theme-secondary: #a78bfa;
	--theme-gradient-hero: linear-gradient(0deg, #2563eb 0%, #2563eb 100%);
	--theme-gradient-cta: linear-gradient(185deg, #2563eb 0%, #7c3aed 100%);
}

/* === ТЕМА 2: ОРАНЖЕВАЯ === */
.theme-orange {
	--theme-primary: #FF6B35;
	--theme-primary-hover: #E55A2B;
	--theme-primary-light: #FF7F50;
	--theme-primary-dark: #D4491C;
	--theme-secondary: #FF8C42;
	--theme-gradient-hero: linear-gradient(0deg, #FF6B35 0%, #FF8C42 100%);
	--theme-gradient-cta: linear-gradient(185deg, #FF6B35 0%, #D4491C 100%);
}

@media (prefers-color-scheme: dark) {
	.theme-orange:not([data-theme-mode="light"]) {
		--theme-primary: #fb923c;
		--theme-primary-hover: #f97316;
		--theme-primary-light: #fdba74;
		--theme-primary-dark: #ea580c;
		--theme-secondary: #fbbf24;
		--theme-gradient-hero: linear-gradient(0deg, #f97316 0%, #fbbf24 100%);
		--theme-gradient-cta: linear-gradient(185deg, #fb923c 0%, #ea580c 100%);
	}
}

[data-theme-mode="dark"].theme-orange {
	--theme-primary: #fb923c;
	--theme-primary-hover: #f97316;
	--theme-primary-light: #fdba74;
	--theme-primary-dark: #ea580c;
	--theme-secondary: #fbbf24;
	--theme-gradient-hero: linear-gradient(0deg, #f97316 0%, #fbbf24 100%);
	--theme-gradient-cta: linear-gradient(185deg, #fb923c 0%, #ea580c 100%);
}

/* === ТЕМА 3: ЗЕЛЕНАЯ === */
.theme-green {
	--theme-primary: #38A169;
	--theme-primary-hover: #2F855A;
	--theme-primary-light: #48BB78;
	--theme-primary-dark: #276749;
	--theme-secondary: #68D391;
	--theme-gradient-hero: linear-gradient(0deg, #38A169 0%, #68D391 100%);
	--theme-gradient-cta: linear-gradient(185deg, #38A169 0%, #276749 100%);


}

@media (prefers-color-scheme: dark) {
	.theme-green:not([data-theme-mode="light"]) {
		--theme-primary: #34d399;
		--theme-primary-hover: #10b981;
		--theme-primary-light: #6ee7b7;
		--theme-primary-dark: #059669;
		--theme-secondary: #a7f3d0;
		--theme-gradient-hero: linear-gradient(0deg, #10b981 0%, #34d399 100%);
		--theme-gradient-cta: linear-gradient(185deg, #34d399 0%, #059669 100%);
	}
}

[data-theme-mode="dark"].theme-green {
	--theme-primary: #34d399;
	--theme-primary-hover: #10b981;
	--theme-primary-light: #6ee7b7;
	--theme-primary-dark: #059669;
	--theme-secondary: #a7f3d0;
	--theme-gradient-hero: linear-gradient(0deg, #10b981 0%, #34d399 100%);
	--theme-gradient-cta: linear-gradient(185deg, #34d399 0%, #059669 100%);
}

/* === ТЕМА 4: КРАСНАЯ === */
.theme-red {
	--theme-primary: #E53E3E;
	--theme-primary-hover: #C53030;
	--theme-primary-light: #FC8181;
	--theme-primary-dark: #9B2C2C;
	--theme-secondary: #F56565;
	--theme-gradient-hero: linear-gradient(0deg, #E53E3E 0%, #F56565 100%);
	--theme-gradient-cta: linear-gradient(185deg, #E53E3E 0%, #9B2C2C 100%);
}

@media (prefers-color-scheme: dark) {
	.theme-red:not([data-theme-mode="light"]) {
		--theme-primary: #f87171;
		--theme-primary-hover: #ef4444;
		--theme-primary-light: #fca5a5;
		--theme-primary-dark: #dc2626;
		--theme-secondary: #fda4af;
		--theme-gradient-hero: linear-gradient(0deg, #ef4444 0%, #f87171 100%);
		--theme-gradient-cta: linear-gradient(185deg, #f87171 0%, #dc2626 100%);
	}
}

[data-theme-mode="dark"].theme-red {
	--theme-primary: #f87171;
	--theme-primary-hover: #ef4444;
	--theme-primary-light: #fca5a5;
	--theme-primary-dark: #dc2626;
	--theme-secondary: #fda4af;
	--theme-gradient-hero: linear-gradient(0deg, #ef4444 0%, #f87171 100%);
	--theme-gradient-cta: linear-gradient(185deg, #f87171 0%, #dc2626 100%);
}

/* === ТЕМА 5: ФИОЛЕТОВАЯ === */
.theme-purple {
	--theme-primary: #7C3AED;
	--theme-primary-hover: #6D28D9;
	--theme-primary-light: #8B5CF6;
	--theme-primary-dark: #553C9A;
	--theme-secondary: #A78BFA;
	--theme-gradient-hero: linear-gradient(0deg, #7C3AED 0%, #A78BFA 100%);
	--theme-gradient-cta: linear-gradient(185deg, #7C3AED 0%, #553C9A 100%);
}

@media (prefers-color-scheme: dark) {
	.theme-purple:not([data-theme-mode="light"]) {
		--theme-primary: #a855f7;
		--theme-primary-hover: #9333ea;
		--theme-primary-light: #c084fc;
		--theme-primary-dark: #7c3aed;
		--theme-secondary: #d8b4fe;
		--theme-gradient-hero: linear-gradient(0deg, #9333ea 0%, #a855f7 100%);
		--theme-gradient-cta: linear-gradient(185deg, #a855f7 0%, #7c3aed 100%);
	}
}

[data-theme-mode="dark"].theme-purple {
	--theme-primary: #a855f7;
	--theme-primary-hover: #9333ea;
	--theme-primary-light: #c084fc;
	--theme-primary-dark: #7c3aed;
	--theme-secondary: #d8b4fe;
	--theme-gradient-hero: linear-gradient(0deg, #9333ea 0%, #a855f7 100%);
	--theme-gradient-cta: linear-gradient(185deg, #a855f7 0%, #7c3aed 100%);
}

/* === ТЕМА 6: РОЗОВАЯ === */
.theme-pink {
	--theme-primary: #EC4899;
	--theme-primary-hover: #DB2777;
	--theme-primary-light: #F472B6;
	--theme-primary-dark: #BE185D;
	--theme-secondary: #F9A8D4;
	--theme-gradient-hero: linear-gradient(0deg, #EC4899 0%, #F9A8D4 100%);
	--theme-gradient-cta: linear-gradient(185deg, #EC4899 0%, #BE185D 100%);
}

@media (prefers-color-scheme: dark) {
	.theme-pink:not([data-theme-mode="light"]) {
		--theme-primary: #f472b6;
		--theme-primary-hover: #ec4899;
		--theme-primary-light: #f9a8d4;
		--theme-primary-dark: #db2777;
		--theme-secondary: #fbcfe8;
		--theme-gradient-hero: linear-gradient(0deg, #ec4899 0%, #f472b6 100%);
		--theme-gradient-cta: linear-gradient(185deg, #f472b6 0%, #db2777 100%);
	}
}

[data-theme-mode="dark"].theme-pink {
	--theme-primary: #f472b6;
	--theme-primary-hover: #ec4899;
	--theme-primary-light: #f9a8d4;
	--theme-primary-dark: #db2777;
	--theme-secondary: #fbcfe8;
	--theme-gradient-hero: linear-gradient(0deg, #ec4899 0%, #f472b6 100%);
	--theme-gradient-cta: linear-gradient(185deg, #f472b6 0%, #db2777 100%);
}

/* === ТЕМА 7: БИРЮЗОВАЯ === */
.theme-teal {
	--theme-primary: #14B8A6;
	--theme-primary-hover: #0F766E;
	--theme-primary-light: #2DD4BF;
	--theme-primary-dark: #0D9488;
	--theme-secondary: #5EEAD4;
	--theme-gradient-hero: linear-gradient(0deg, #14B8A6 0%, #5EEAD4 100%);
	--theme-gradient-cta: linear-gradient(185deg, #14B8A6 0%, #0D9488 100%);
}

@media (prefers-color-scheme: dark) {
	.theme-teal:not([data-theme-mode="light"]) {
		--theme-primary: #22d3ee;
		--theme-primary-hover: #06b6d4;
		--theme-primary-light: #67e8f9;
		--theme-primary-dark: #0891b2;
		--theme-secondary: #a7f3d0;
		--theme-gradient-hero: linear-gradient(0deg, #06b6d4 0%, #22d3ee 100%);
		--theme-gradient-cta: linear-gradient(185deg, #22d3ee 0%, #0891b2 100%);
	}
}

[data-theme-mode="dark"].theme-teal {
	--theme-primary: #22d3ee;
	--theme-primary-hover: #06b6d4;
	--theme-primary-light: #67e8f9;
	--theme-primary-dark: #0891b2;
	--theme-secondary: #a7f3d0;
	--theme-gradient-hero: linear-gradient(0deg, #06b6d4 0%, #22d3ee 100%);
	--theme-gradient-cta: linear-gradient(185deg, #22d3ee 0%, #0891b2 100%);
}

/* === ТЕМА 8: ИНДИГО === */
.theme-indigo {
	--theme-primary: #4F46E5;
	--theme-primary-hover: #4338CA;
	--theme-primary-light: #6366F1;
	--theme-primary-dark: #3730A3;
	--theme-secondary: #818CF8;
	--theme-gradient-hero: linear-gradient(0deg, #4F46E5 0%, #818CF8 100%);
	--theme-gradient-cta: linear-gradient(185deg, #4F46E5 0%, #3730A3 100%);
}

@media (prefers-color-scheme: dark) {
	.theme-indigo:not([data-theme-mode="light"]) {
		--theme-primary: #6366f1;
		--theme-primary-hover: #4f46e5;
		--theme-primary-light: #818cf8;
		--theme-primary-dark: #4338ca;
		--theme-secondary: #a5b4fc;
		--theme-gradient-hero: linear-gradient(0deg, #4f46e5 0%, #6366f1 100%);
		--theme-gradient-cta: linear-gradient(185deg, #6366f1 0%, #4338ca 100%);
	}
}

[data-theme-mode="dark"].theme-indigo {
	--theme-primary: #6366f1;
	--theme-primary-hover: #4f46e5;
	--theme-primary-light: #818cf8;
	--theme-primary-dark: #4338ca;
	--theme-secondary: #a5b4fc;
	--theme-gradient-hero: linear-gradient(0deg, #4f46e5 0%, #6366f1 100%);
	--theme-gradient-cta: linear-gradient(185deg, #6366f1 0%, #4338ca 100%);
}

/* === СВЕТЛАЯ ТЕМА (по умолчанию) === */
:root,
[data-theme-mode="light"] {
	/* --bg-primary: var(--color-white); */
	--bg-primary: #efe9e0;
	--bg-secondary: var(--color-gray-50);
	--bg-tertiary: var(--color-gray-100);
	--bg-chat: var(--color-white);
	--bg-glass: var(--border-secondary);

	--text-primary: var(--color-gray-900);
	--text-secondary: var(--color-gray-700);
	--text-tertiary: var(--color-gray-600);
	--text-muted: var(--color-gray-500);
	--text-inverse: var(--color-white);

	--border-primary: var(--color-gray-200);
	--border-secondary: var(--color-gray-300);

	--card-bg: var(--color-white);
	/* --card-border: var(--color-gray-200); */
	--card-border: #d3cfc9;
	--card-hover-border: var(--theme-primary-light);

	--input-bg: var(--color-white);
	--input-border: var(--color-gray-200);
	--input-text: var(--color-gray-900);
	--input-placeholder: var(--color-gray-500);

	--message-system-bg: var(--color-white);
	--message-system-text: var(--color-gray-600);

	--message-user-bg: #d0fecf;
	--message-user-text: #333333;
}

/* === ТЕМНАЯ ТЕМА === */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme-mode="light"]) {
		--bg-primary: #0f172a;
		--bg-secondary: #1e293b;
		--bg-tertiary: #334155;
		--bg-chat: #0f172a;
		--bg-glass: var(--border-secondary);

		--text-primary: #f1f5f9;
		--text-secondary: #e2e8f0;
		--text-tertiary: #cbd5e1;
		--text-muted: #94a3b8;
		--text-inverse: var(--color-white);

		--border-primary: #334155;
		--border-secondary: #475569;

		--card-bg: #1e293b;
		--card-border: #334155;
		--card-hover-border: var(--theme-primary-light);

		--input-bg: #1e293b;
		--input-border: #334155;
		--input-text: #f1f5f9;
		--input-placeholder: #94a3b8;

		--message-system-bg: #1e293b;
		--message-system-text: #f1f5f9;
		--message-user-bg: #013d61;
		--message-user-text: #f1f5f9;

		/* --message-user-bg: #d0fecf; */

	}
}

/* === ПРИНУДИТЕЛЬНАЯ ТЕМНАЯ ТЕМА === */
[data-theme-mode="dark"] {
	--bg-primary: #0f172a;
	--bg-secondary: #1e293b;
	--bg-tertiary: #334155;
	--bg-chat: #0f172a;
	--bg-glass: var(--border-secondary);

	--text-primary: #f1f5f9;
	--text-secondary: #e2e8f0;
	--text-tertiary: #cbd5e1;
	--text-muted: #94a3b8;
	--text-inverse: var(--color-white);

	--border-primary: #334155;
	--border-secondary: #475569;

	--card-bg: #1e293b;
	--card-border: #334155;
	--card-hover-border: var(--theme-primary-light);

	--input-bg: #1e293b;
	--input-border: #334155;
	--input-text: #f1f5f9;
	--input-placeholder: #94a3b8;

	--message-system-bg: #1e293b;
	--message-system-text: #f1f5f9;
	--message-user-text: #555;
}

/* === БАЗОВЫЕ СТИЛИ === */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	line-height: var(--line-height-relaxed);
	height: 100vh;
	width: 100dvw;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-image: url(https://b24u.com/ai/assets/img/b.png?v1);
	/* background-size: cover; */
	background-blend-mode: difference;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* === ОСНОВНОЙ КОНТЕЙНЕР === */
.chat-app {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	max-width: 100%;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;

}

@media (min-width: 768px) {
	.chat-app {
		max-width: 768px;
		margin: 0 auto;
	}
}

/* === ХЕДЕР ЧАТА === */
.chat-header {
	padding: var(--space-base) var(--space-base);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-shrink: 0;
	height: 100px;
	background: var(--bg-primary);
	z-index: var(--z-dropdown);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	mask: linear-gradient(black, black, transparent);
	backdrop-filter: blur(4px);
	line-height: normal;
	border-radius: 0rem 0rem 1rem 1rem;
}

.chat-header.hidden {
	display: none;
}

.chat-header.active {
	display: flex;
}

.operator-info {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-left: 0px;
}

.operator-avatar {
	position: relative;
	flex-shrink: 0;
}

.avatar-image {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.status-indicator {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--bg-primary);
	background: var(--color-success);
}

.operator-details {
	flex: 1;
	min-width: 0;
}

.chat-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	letter-spacing: -0.02rem;
	text-wrap-style: balance;
	width: 57vw;
}

.connection-status {
	font-size: var(--font-size-sm);
	opacity: 0.8;
}

/* Статусы подключения */
.status-connecting .status-indicator {
	background: var(--color-warning);
	animation: pulse 2s infinite;
}

.status-connected .status-indicator {
	background: var(--color-success);
}

.status-disconnected .status-indicator {
	background: var(--color-danger);
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

/* === ЭКРАН ПРИВЕТСТВИЯ === */
.welcome-screen {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 90px;
	z-index: var(--z-dropdown);
	/* background: var(--bg-primary); */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	padding: var(--space-xl) var(--space-base) var(--space-base) var(--space-base);
	text-align: center;
	overflow-x: auto;
	padding-top: 100px;
}

.welcome-screen.hidden {
	display: none;
}

.welcome-suggestions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-base);
	width: 100%;
	max-width: 740px;
}

/* === КАРТОЧКИ ПРЕДЛОЖЕНИЙ === */
.suggestion-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-base);
	cursor: pointer;
	transition: all var(--transition-base);
	text-align: left;
}

/* .suggestion-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
	border-color: var(--card-hover-border);
} */

.suggestion-card:hover,
.benefit-card:hover,
.service-card:hover,
.pricing-card:hover {
	border-color: var(--theme-primary-light);
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.suggestion-title {
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-sm);
	color: var(--text-primary);
}

.suggestion-description {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

/* === СООБЩЕНИЯ === */
.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-base) 0;
	display: none;
	min-height: 0;
	padding-bottom: 100px;
	padding-top: 75px;
}

.chat-messages.active {
	display: flex;
	flex-direction: column-reverse;
}



.message {
	display: flex;
	align-items: stretch;
	margin-bottom: var(--space-lg);
	line-height: var(--line-height-normal);
	padding: var(--space-xs);
	font-size: var(--font-size-sm);
	/* font-weight: var(--font-weight-mini); */
	box-shadow: -1px 1px 3px -1px rgb(0 0 0 / 14%);
}

.message-avatar {
	flex-shrink: 0;
	margin-top: 0.35rem;
}

.avatar-img {
	width: 40px;
	height: 40px;
	border-radius: 25%;
	object-fit: cover;
	transition: border-color var(--transition-base);
}

.message-content {
	flex: 1;
	padding: 0.2rem 0.4rem 0.2rem 0.6rem;
	border-radius: var(--radius-base);
	position: relative;
	word-wrap: break-word;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	flex-wrap: wrap;
	/* text-wrap-style: balance; */
}

.message-user {
	justify-content: flex-end;
	margin: 10px 14px;
	width: fit-content;
	margin-left: auto;
	background: var(--message-user-bg);
	max-width: 80%;
	border-radius: var(--radius-md);
}

/* --message-system-bg: #1e293b;
--message-system-text: #f1f5f9;
--message-user-bg: #1e293b;
--message-user-text: #f1f5f9; */

/* .message-system {
	justify-content: space-between;
	background: var(--message-system-bg);
	border-radius: var(--radius-lg);
	margin: 10px 18px;
} */

.message-system {
	justify-content: space-between;
	background: var(--message-system-bg);
	border-radius: var(--radius-md);
	margin: 4px 18px;
	width: fit-content;
	max-width: 80%;
}

.message-system .message-content {
	color: var(--message-system-text);
	max-width: 100%;
	display: flex;
	align-content: flex-end;
	flex-direction: column;
	justify-content: space-between;
}

.message-user .message-content {
	color: var(--message-user-text);
}

.message-time {
	font-size: 0.65rem;
	color: var(--text-muted);
	align-self: flex-end;
	flex-shrink: 0;
	width: min-content;
	padding: 0.2rem 0.1rem 0.0rem 0.3rem;
	white-space: nowrap;
	float: right;
}

.message-user .message-time {
	margin-left: 4px;
	margin-right: 0px;
	margin-bottom: 4px;
	text-align: right;
}

.bubble-arrow {
	position: absolute;
	width: 0;
	bottom: 32px;
	left: -28px;
	/* left: -68px; */

	height: 0;
}


.bubble-arrow.alt {
	right: -8px;
	bottom: 32px;
	left: auto;
}

.bubble-arrow:after {
	content: "";
	position: absolute;
	border: 0 solid transparent;
	border-top: 12px solid var(--message-system-bg);
	border-radius: 0 30px 0;
	width: 20px;
	height: 40px;
	transform: rotate(98deg);
}

.bubble-arrow.alt:after {
	content: "";
	position: absolute;
	border: 0 solid transparent;
	border-top: 12px solid var(--message-user-bg);
	border-radius: 0 30px 0;
	width: 20px;
	height: 40px;
	transform: rotate(87deg) scaleY(-1);
}

/* === ОБЛАСТЬ ВВОДА === */
.chat-input-area {
	padding: var(--space-base);
	/* background: var(--bg-primary); */

	flex-shrink: 0;
	/* min-height: 120px; */
	min-height: 58px;
	position: fixed;
	bottom: 0;
	z-index: 1001;
	width: 100%;
	border-radius: 28px 28px 0 0;

	background: transparent;
	backdrop-filter: blur(20px);
}

@media (min-width: 768px) {
	.chat-input-area {
		max-width: 768px;
		left: 50%;
		transform: translateX(-50%);

	}


}

/* .chat-input-area:before,
.chat-input-area:after {
	content: "";
	position: absolute;
	height: 25px;
	width: 40px;
	bottom: 0;
}

.chat-input-area:before {
	left: -40px;
	border-radius: 0 0 20px 0;
	box-shadow: 20px 0 0 0 var(--bg-glass);
}

.chat-input-area:after {
	right: -40px;
	border-radius: 0 0 0 20px;
	box-shadow: -20px 0 0 0 var(--bg-glass);
} */

.input-container {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	margin-bottom: -5px
}

.message-input {
	width: 100%;
	height: 58px;
	min-height: 58px;
	max-height: 100px;
	padding: 6px 50px 6px 12px;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--input-bg);
	color: var(--input-text);
	resize: none;
	outline: none;
	transition: all var(--transition-base);
	font-family: inherit;
	-webkit-appearance: none;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-mini);
}

.message-input:focus {
	border-color: var(--input-border-focus);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.message-input::placeholder {
	color: var(--input-placeholder);
}

.send-button {
	position: fixed;
	right: 1.5rem;
	bottom: 0px;
	transform: translateY(-60%);
	/* background: var(--color-success); */
	background: var(--gradient-hero);
	border: none;
	border-radius: 25%;
	width: 2.6rem;
	height: 2.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--transition-base);
	color: var(--text-inverse);
}

.send-button:hover {
	/* background: var(--color-success-hover); */
	background: var(--gradient-cta);

	transform: translateY(-60%) scale(1.15);
}

.send-button:disabled {
	background: var(--text-muted);

	cursor: not-allowed;
}

.send-button svg {
	margin-left: -2px;
}

/* === ЛЕНДИНГ СЕКЦИИ === */
.landing-section {
	padding: var(--space-base) 0;
	margin-bottom: var(--space-base);
	width: -webkit-fill-available;
}

.landing-section:nth-child(even) {
	/* background: var(--bg-secondary); */
	border-radius: var(--radius-lg);
}

.landing-section p {
	padding: 0 var(--space-base) var(--space-lg);
	text-align: left;
	color: var(--text-secondary);
	margin-bottom: var(--space-lg);
	font-size: var(--font-size-lg);
}

.section-title {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-base);
	color: var(--text-primary);
	text-align: center;
}

/* === HERO СЕКЦИЯ === */
.hero-section {
	background: var(--gradient-hero);
	color: var(--text-inverse);
	text-align: left;
	padding: var(--space-xl) var(--space-3xl);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-xl);
	box-shadow: var(--shadow-lg);
}

.hero-title {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-base);
	/* line-height: var(--line-height-tight); */
	line-height: normal;
}

.hero-subtitle {
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-xl);
	opacity: 0.95;
}

.hero-buttons {
	display: flex;
	gap: var(--space-base);
	justify-content: center;
	flex-wrap: wrap;
}

/* === КНОПКИ === */
.btn-primary,
.btn-secondary,
.btn-outline {
	padding: 0.75rem var(--space-lg);
	border: none;
	border-radius: var(--radius-lg);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: all var(--transition-slow);
	text-decoration: none;
	display: inline-block;
	text-align: center;
	letter-spacing: 0.01rem;
}

.btn-primary {
	background: var(--gradient-cta);
	color: var(--text-inverse);
	box-shadow: var(--shadow-md);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn-secondary {
	background: transparent;
	color: var(--text-inverse);
	border: 2px solid var(--text-inverse);
}

.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.1);
}

.btn-outline {
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	font-variant-caps: all-small-caps;
	font-size: var(--font-size-xl);
	letter-spacing: 0.01rem;
}

.btn-outline:hover {
	background: var(--color-primary);
	color: var(--text-inverse);
}

/* === СПИСКИ ПРОБЛЕМ === */
.problems-list {
	list-style: none;
	margin: var(--space-base) 0;
	padding: 0 var(--space-base);
}

.problems-list li {
	padding: 1rem;
	margin-bottom: 0.75rem;
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--card-border);
	position: relative;
	padding-left: 3rem;
	color: var(--text-primary);
	margin: 1rem 0.5vw;
	font-size: clamp(1.6vw, 3vw, 3vh);
	text-align: left;
	font-weight: 500;
}

.problems-list li::before {
	content: "⚡";
	position: absolute;
	left: var(--space-base);
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
}

/* === СЕТКИ === */
.solution-features,
.benefits-grid,
.services-grid,
.pricing-grid,
.social-stats,
.testimonials-grid,
.media-grid {
	display: grid;
	gap: var(--space-lg);
	margin-top: var(--space-lg);
}

.solution-features {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.benefits-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	/* padding: 0 var(--space-base); */
}

.services-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem 0;
	margin: 0 calc(-1 * var(--space-base));
}

.pricing-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.social-stats {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin: var(--space-lg) 0;
}

.testimonials-grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.media-grid {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.feature-item {
	text-align: center !important;
}

/* === КАРТОЧКИ === */
.feature-item,
.benefit-card,
.service-card,
.pricing-card,
.stat-item,
.testimonial-card {
	background: var(--bg-secondary);
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	border: 2px solid var(--card-border);
	transition: all var(--transition-slow);
	text-align: left;
}

.benefit-card,
.service-card,
.pricing-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--card-bg);
}

.benefit-card:hover,
.service-card:hover,
.pricing-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--card-hover-border);
}

.service-card,
.pricing-card {
	margin: 0 var(--space-base);
}

.pricing-card.popular {
	border-color: var(--theme-primary);
	position: relative;
	box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 37, 99, 235), 0.1);
}

.pricing-card.popular::before {
	background: var(--theme-primary);
}

.pricing-card.popular::before {
	content: "★ ★ ★ ★ ★";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	/* background: var(--color-primary); */
	color: var(--text-inverse);
	padding: 0.25rem var(--space-base);
	border-radius: var(--radius-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}

/* === ЭЛЕМЕНТЫ КАРТОЧЕК === */
.benefit-icon {
	font-size: 1.6rem;
	margin-bottom: var(--space-base);
	display: block;
}

.benefit-title,
.service-name,
.pricing-name {
	/* font-size: var(--font-size-xl); */
	font-weight: var(--font-weight-semibold);
	margin-bottom: 0.75rem;
	color: var(--text-primary);
	font-size: 2rem;
	line-height: normal;
}

.benefit-description,
.service-description {
	color: var(--text-secondary);
	font-size: 0.95rem;
}

.service-description {
	margin-bottom: var(--space-base);
}

.service-price,
.pricing-price {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	margin-bottom: var(--space-base);
}

.pricing-features {
	list-style: none;
	padding: 0;
	margin: var(--space-base) 0;
}

.pricing-features li {
	padding: 0.25rem 0;
	color: var(--text-secondary);
	position: relative;
	padding-left: var(--space-base);
	text-align: left;
}

.pricing-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-success);
	font-weight: bold;
}

/* === СТАТИСТИКА === */
.stat-number {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	display: block;
}

.stat-label {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	margin-top: var(--space-sm);
}

/* === ОТЗЫВЫ === */
.testimonial-text {
	color: var(--text-secondary);
	font-style: italic;
	margin-bottom: var(--space-base);
	line-height: var(--line-height-relaxed);
}

.testimonial-author {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.testimonial-position {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* === МЕДИА === */
.media-item {
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--card-border);
	/* margin: var(--space-base); */
}

.media-item img,
.media-item video {
	width: 100%;
	/* height: 50vw; */
	object-fit: cover;
}

.media-caption {
	padding: var(--space-base);
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	/* background: var(--card-bg); */
	background: var(--bg-secondary);
}

/* === ДОКУМЕНТЫ === */
.document-item {
	display: flex;
	background: var(--card-bg);
	padding: var(--space-base);
	border-radius: var(--radius-lg);
	border: 1px solid var(--card-border);
	text-decoration: none;
	color: var(--text-primary);
	transition: all var(--transition-slow);
	margin: 0 var(--space-base);
	flex-direction: row;
	align-items: flex-start;
}

.document-item:hover {
	background: var(--bg-secondary);
	transform: translateY(-1px);
	text-decoration: none;
	color: var(--text-primary);
}

.document-icon {
	font-size: var(--font-size-4xl);
	margin-right: var(--space-base);
}

.document-info {
	flex: 1;
}

.document-name {
	font-weight: var(--font-weight-semibold);
	margin-bottom: 0.25rem;
	color: var(--text-primary);
	text-align: left;
	font-weight: 400;
}

.document-type {
	color: var(--text-muted);
	font-size: var(--font-size-xs);
	text-align: left;
}

/* === CTA СЕКЦИЯ === */
.cta-section {
	background: var(--gradient-hero);
	color: var(--text-inverse);
	text-align: left;
	padding: var(--space-xl) var(--space-3xl);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-xl);
	box-shadow: var(--shadow-lg);
	width: -webkit-fill-available;
	display: flex;
	flex-direction: column;
	align-content: space-between;
	align-items: stretch;
	flex-wrap: nowrap;
}

.cta-title {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-base);
	line-height: normal;
}

.cta-text {
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-xl);
	opacity: 0.95;
}

/* === ФАЙЛЫ В СООБЩЕНИЯХ === */
.message-file {
	margin: 5px 0;
	display: inline-block;
}

.file-link {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-full);
	text-decoration: none;
	color: var(--text-primary);
	transition: all var(--transition-base);
	font-size: var(--font-size-sm);
	max-width: 280px;
}

.file-link:hover {
	background: var(--input-bg);
	border-color: var(--color-primary);
	color: var(--text-primary);
	text-decoration: none;
	transform: translateY(-1px);
}

.file-icon {
	font-size: 16px;
	margin-right: 6px;
	flex-shrink: 0;
}

.file-name {
	font-weight: var(--font-weight-medium);
	margin-right: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.file-type {
	font-size: 11px;
	color: var(--text-muted);
	background: var(--border-primary);
	padding: 2px 6px;
	border-radius: 10px;
	flex-shrink: 0;
}

.download-icon {
	font-size: var(--font-size-sm);
	opacity: 0.7;
	flex-shrink: 0;
}

.file-link:hover .download-icon {
	opacity: 1;
}

/* === MARKDOWN СТИЛИ === */
.markdown-content {
	text-wrap-style: balance;
	/* line-height: var(--line-height-tight); */
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
	margin: 0.8em 0 0.4em 0;
	font-weight: var(--font-weight-semibold);
}

.markdown-content h1 {
	font-size: 1.4em;
	border-bottom: 2px solid var(--border-primary);
	padding-bottom: 0.3em;
}

.markdown-content h2 {
	font-size: 1.3em;
	color: var(--text-primary);
}

.markdown-content h3 {
	font-size: 1.2em;
	color: var(--text-secondary);
}

.markdown-content strong {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.markdown-content em {
	font-style: italic;
	color: var(--text-secondary);
}

.markdown-content code {
	background: var(--bg-secondary);
	padding: 0.2em 0.4em;
	border-radius: var(--radius-sm);
	font-family: 'Courier New', monospace;
	font-size: 0.9em;
	color: var(--color-danger);
	border: 1px solid var(--border-primary);
}

.markdown-content pre {
	background: var(--bg-secondary);
	padding: var(--space-base);
	border-radius: var(--radius-md);
	overflow-x: auto;
	border: 1px solid var(--border-primary);
	margin: var(--space-sm) 0;
}

.markdown-content pre code {
	background: none;
	padding: 0;
	border: none;
	color: var(--text-primary);
	font-size: 0.9em;
}

.markdown-content blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-base);
	margin: var(--space-sm) 0;
	color: var(--text-secondary);
	font-style: italic;
	background: var(--bg-secondary);
	padding: var(--space-sm) var(--space-base);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.markdown-content ul,
.markdown-content ol {
	/* margin: var(--space-sm) 0; */
	/* padding-left: var(--space-xs); */
	padding-left: var(--space-sm);
}

.markdown-content li {
	margin: 0.3em 0;
}

.markdown-content p {
	margin: var(--space-sm) 0;
}

.markdown-content hr {
	border: none;
	border-top: 2px solid var(--border-primary);
	margin: var(--space-base) 0;
}

.markdown-content table {
	border-collapse: collapse;
	width: 100%;
	margin: var(--space-sm) 0;
	font-size: var(--font-size-sm);
}

.markdown-content th,
.markdown-content td {
	border: 1px solid var(--border-primary);
	padding: var(--space-sm);
	text-align: left;
}

.markdown-content th {
	background-color: var(--bg-secondary);
	font-weight: var(--font-weight-semibold);
}

.markdown-content a {
	color: var(--text-link);
	text-decoration: underline;
	word-break: break-all;
}

.markdown-content a:hover {
	color: var(--text-link-hover);
}

.markdown-content img,
.markdown-content video {
	display: block;
	margin: 4px 0;
}

/* === АНИМАЦИИ === */
.typing-cursor {
	animation: blink 1s infinite;
	font-weight: bold;
	color: var(--text-primary);
}

@keyframes blink {

	0%,
	50% {
		opacity: 1;
	}

	51%,
	100% {
		opacity: 0;
	}
}

.message-image {
	margin: 8px 0;
}

.message-image img {
	transition: transform var(--transition-base);
}

.message-image img:hover {
	transform: scale(1.02);
}

/* === СКРОЛЛБАРЫ === */
.chat-messages::-webkit-scrollbar {
	width: 3px;
	height: 0px;
}

.chat-messages::-webkit-scrollbar-track {
	background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
	background: var(--border-primary);
	border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

/* === ОБРАБОТКА ОДИНОЧНЫХ ЭЛЕМЕНТОВ В GRID === */
.social-stats.lone-last-item .stat-item:last-child,
.services-grid.lone-last-item .service-card:last-child,
.pricing-grid.lone-last-item .pricing-card:last-child,
.benefits-grid.lone-last-item .benefit-card:last-child,
.testimonials-grid.lone-last-item .testimonial-card:last-child {
	grid-column: 1 / -1;
	max-width: none;
	width: -webkit-fill-available;
	text-align: center;
}

/* === DEBUG INFO === */
.debug-info {
	position: fixed;
	top: 10px;
	left: 10px;
	background: var(--bg-overlay);
	color: var(--text-inverse);
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: 1.75rem;
	font-family: monospace;
	z-index: var(--z-dropdown);
	max-width: 300px;
	display: none;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
	.debug-info {
		display: none;
	}

	.hero-title {
		font-size: var(--font-size-2xl);
	}

	.section-title {
		font-size: var(--font-size-xl);
	}

	.landing-section {
		padding: var(--space-base) 0;
	}

	.hero-section {
		padding: 1.7rem var(--space-xl);
		margin-bottom: var(--space-base);
	}

	.services-grid,
	.pricing-grid,
	.benefits-grid {
		/* grid-template-columns: 1fr; */
		gap: var(--space-base);
	}

	.social-stats {
		/* grid-template-columns: repeat(2, 1fr); */
		gap: var(--space-base);
	}

	.testimonials-grid {
		grid-template-columns: 1fr;
	}

	.cta-section {
		margin: var(--space-base) 0;
		/* padding: 1.7rem var(--space-xl); */
		margin-bottom: var(--space-base);
	}

	.hero-buttons {
		gap: 0.75rem;
	}

	.btn-primary,
	.btn-secondary {
		width: 100%;
		max-width: 300px;
		text-align: center;
	}



	.chat-input-area {
		padding: var(--space-base) var(--space-base) calc(env(safe-area-inset-bottom) + var(--space-base)) var(--space-base);
		min-height: 80px;
		right: 0;
		/* background: var(--bg-primary); */
		/* margin-bottom: -5px; */
	}


	/* .chat-input-area:before {
		left: none;
		border-radius: 0;
		box-shadow: none;
	}

	.chat-input-area:after {
		right: none;
		border-radius: 0;
		box-shadow: none;
	} */


	.social-stats.lone-last-item .stat-item:last-child,
	.services-grid.lone-last-item .service-card:last-child,
	.pricing-grid.lone-last-item .pricing-card:last-child,
	.benefits-grid.lone-last-item .benefit-card:last-child,
	.testimonials-grid.lone-last-item .testimonial-card:last-child {
		grid-column: auto;
		max-width: none;
		margin: 0;
	}
}

/* === iOS/WEBKIT FIXES === */
@supports (-webkit-touch-callout: none) {
	.message-input {
		-webkit-appearance: none;
		border-radius: var(--radius-lg);
	}
}

/* === ACCESSIBILITY === */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.sr-only-focusable:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 0.25rem 0.5rem !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
	background: var(--color-primary) !important;
	color: var(--text-inverse) !important;
	text-decoration: none !important;
	border-radius: var(--radius-sm) !important;
	z-index: 9999 !important;
}

.suggestion-card:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-outline:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
	:root {
		--border-primary: var(--color-black);
		--card-border: var(--color-black);
	}

	.benefit-card,
	.service-card,
	.pricing-card,
	.testimonial-card,
	.stat-item,
	.feature-item {
		border-width: 2px;
	}
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.benefit-card:hover,
	.service-card:hover,
	.pricing-card:hover {
		transform: none;
	}
}

/* === ТЕМНАЯ ТЕМА - ДОПОЛНИТЕЛЬНЫЕ СТИЛИ === */
@media (prefers-color-scheme: dark) {
	.pricing-card.popular {
		box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
	}

	/* .avatar-img {
		border-color: var(--border-primary);
	}
	
	.message-system .avatar-img {
		border-color: var(--color-success-light);
	}
	
	.message-user .avatar-img {
		border-color: var(--text-link);
	} */
}


/* === УЛУЧШЕНИЯ ДЛЯ ТЕМНОЙ ТЕМЫ === */
@media (prefers-color-scheme: dark) {
	.pricing-card.popular {
		box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
	}

	/* .avatar-img {
		border: 1px solid var(--border-primary);
	}
	
	.message-system .avatar-img {
		border-color: var(--color-success-light);
	}
	
	.message-user .avatar-img {
		border-color: var(--text-link);
	} */

	.shadow-base {
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	}

	.shadow-lg {
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
	}

	.shadow-card-hover {
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
	}
}

[data-theme-mode="dark"] {
	.pricing-card.popular {
		box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
	}

	/* .avatar-img {
		border: 1px solid var(--border-primary);
	}
	
	.message-system .avatar-img {
		border-color: var(--color-success-light);
	}
	
	.message-user .avatar-img {
		border-color: var(--text-link);
	} */
}

.video-embed {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	/* 16:9 aspect ratio */
	overflow: hidden;
}

.video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-placeholder {
	background: var(--bg-secondary);
	padding: var(--space-xl);
	text-align: center;
	color: var(--text-muted);
	border-radius: var(--radius-lg);
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* === ИНДИКАТОРЫ ПЕЧАТАНИЯ === */
.typing-indicator {
	opacity: 0.8;
}

.typing-animation-dots {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
}

.typing-dot {
	width: 8px;
	height: 8px;
	background: var(--text-muted);
	border-radius: 50%;
	animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
	animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
	animation-delay: -0.16s;
}

.typing-dot:nth-child(3) {
	animation-delay: 0;
}

@keyframes typing-bounce {

	0%,
	80%,
	100% {
		transform: scale(0.8);
		opacity: 0.5;
	}

	40% {
		transform: scale(1);
		opacity: 1;
	}
}

.operator-response-message {
	color: var(--text-muted);
	font-style: italic;
	padding: 8px 0;
	font-size: 0.9em;
}

/* === RESPONSIVE === */
@media (prefers-reduced-motion: reduce) {
	.typing-dot {
		animation: none;
	}

	.typing-animation-dots {
		opacity: 0.7;
	}
}

video {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/* === РЕЖИМ ЧАТА === */
.chat-mode .welcome-screen {
	display: none !important;
}

.chat-mode .chat-messages {
	display: flex !important;
	flex-direction: column-reverse;
}

.chat-mode .chat-header {
	display: flex !important;
}

.language-selector {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	padding: 0.5rem;
	backdrop-filter: blur(10px);
}

.language-selector select {
	background: transparent;
	border: none;
	color: var(--text-primary);
	font-size: 0.875rem;
	cursor: pointer;
}

.language-selector select option {
	background: var(--bg-primary);
	color: var(--text-primary);
}

@keyframes blinkCursor {
	0% {
		border-color: transparent;
	}

	50% {
		border-color: var(--text-primary);
	}

	100% {
		border-color: transparent;
	}
}

#chat_footer_url {
	position: absolute;
	bottom: 0px;
	z-index: 100000;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	width: 100%;
}

#b24u-footer {
	color: var(--text-primary);
	z-index: 100000;
	font-size: 9px;
	text-align: center;
	font-variant: all-small-caps;
	margin-bottom: 3px;
	text-decoration: none;
	display: inline-block;
	white-space: nowrap;
	/* border-right: .1em solid var(--text-primary); */
	/* animation: blinkCursor 0.8s infinite; */
	opacity: 0.67;
	height: 12px;
}