/* Vexel demo — açık / koyu tema */
html { color-scheme: light dark; }

.mesh-bg {
	background-color: #070d22;
	background-image:
		radial-gradient(at 20% 20%, rgba(20, 106, 253, 0.30) 0, transparent 50%),
		radial-gradient(at 80% 10%, rgba(108, 51, 244, 0.25) 0, transparent 45%);
}
.glass {
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Demo panel shell — değişkenler html.dark ile */
.demo-shell {
	--demo-bg: #eef2f7;
	--demo-surface: #ffffff;
	--demo-surface-2: #f1f5f9;
	--demo-surface-3: #e2e8f0;
	--demo-border: #cbd5e1;
	--demo-text: #0f172a;
	--demo-text-secondary: #334155;
	--demo-muted: #475569;
	--demo-accent: #155ee8;
	--demo-accent-hover: #1149c2;
	--demo-accent-soft: #dde9fe;
	--demo-accent-text: #1149c2;
	--demo-shadow: 0 4px 24px -4px rgba(15, 23, 42, 0.1);
}
html.dark .demo-shell {
	--demo-bg: #0a0e1f;
	--demo-surface: #10162a;
	--demo-surface-2: #161d33;
	--demo-surface-3: #1f2741;
	--demo-border: rgba(255, 255, 255, 0.1);
	--demo-text: #f1f5f9;
	--demo-text-secondary: #cbd5e1;
	--demo-muted: #94a3b8;
	--demo-accent: #8fb5fe;
	--demo-accent-hover: #b4cdfe;
	--demo-accent-soft: rgba(21, 94, 232, 0.18);
	--demo-accent-text: #b4cdfe;
	--demo-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.5);
}

.demo-bg { background-color: var(--demo-bg); }
.demo-surface { background-color: var(--demo-surface); border: 1px solid var(--demo-border); }
.demo-surface-2 { background-color: var(--demo-surface-2); }
.demo-surface-3 { background-color: var(--demo-surface-3); }
.demo-surface-3 { background-color: var(--demo-surface-3); }
.demo-text { color: var(--demo-text); }
.demo-text-secondary { color: var(--demo-text-secondary); }
.demo-muted { color: var(--demo-muted); }
.demo-border { border-color: var(--demo-border); }
.demo-accent-text { color: var(--demo-accent-text); }

.demo-card {
	background: var(--demo-surface);
	border: 1px solid var(--demo-border);
	border-radius: 1rem;
	box-shadow: var(--demo-shadow);
	color: var(--demo-text);
}
.demo-card h1, .demo-card h2, .demo-card h3, .demo-card h4 {
	color: var(--demo-text);
}
.demo-card p, .demo-card li {
	color: var(--demo-text-secondary);
}

/* Form alanları — demo-input ve eski vexel-input sınıfı */
.demo-shell .demo-input,
.demo-shell .vexel-input,
.demo-shell textarea.demo-input,
.demo-shell textarea.vexel-input,
.demo-shell select.demo-input,
.demo-shell select.vexel-input {
	width: 100%;
	background: var(--demo-surface-2);
	border: 1px solid var(--demo-border);
	border-radius: 0.75rem;
	padding: 0.65rem 1rem;
	font-size: 1rem;
	color: var(--demo-text);
	-webkit-text-fill-color: var(--demo-text);
}
.demo-shell .demo-input::placeholder,
.demo-shell .vexel-input::placeholder {
	color: var(--demo-muted);
	opacity: 0.85;
}
.demo-shell .demo-input:focus,
.demo-shell .vexel-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--demo-accent-soft);
	border-color: var(--demo-accent);
}
.demo-shell input[type="date"].demo-input,
.demo-shell input[type="date"].vexel-input,
.demo-shell input[type="datetime-local"].demo-input,
.demo-shell input[type="datetime-local"].vexel-input {
	color-scheme: light;
}
html.dark .demo-shell input[type="date"].demo-input,
html.dark .demo-shell input[type="date"].vexel-input,
html.dark .demo-shell input[type="datetime-local"].demo-input,
html.dark .demo-shell input[type="datetime-local"].vexel-input {
	color-scheme: dark;
}
html:not(.dark) .demo-shell select.demo-input option,
html:not(.dark) .demo-shell select.vexel-input option {
	background: #ffffff;
	color: #0f172a;
}
html.dark .demo-shell select.demo-input option,
html.dark .demo-shell select.vexel-input option {
	background: var(--demo-surface-2);
	color: var(--demo-text);
}
/* Açık mod: sayfa içi inline koyu stilleri ezer */
html:not(.dark) .demo-shell .demo-input,
html:not(.dark) .demo-shell .vexel-input,
html:not(.dark) .demo-shell textarea.demo-input,
html:not(.dark) .demo-shell textarea.vexel-input,
html:not(.dark) .demo-shell select.demo-input,
html:not(.dark) .demo-shell select.vexel-input {
	background: var(--demo-surface-2) !important;
	border-color: var(--demo-border) !important;
	color: var(--demo-text) !important;
	-webkit-text-fill-color: var(--demo-text) !important;
}
html:not(.dark) .demo-shell .demo-card label.text-slate-400 {
	color: var(--demo-muted) !important;
}

.demo-nav-active {
	background: var(--demo-accent-soft);
	color: var(--demo-accent-text);
	border: 1px solid rgba(21, 94, 232, 0.28);
	font-weight: 600;
	box-shadow: 0 1px 4px rgba(21, 94, 232, 0.1);
}
html.dark .demo-nav-active {
	box-shadow: 0 1px 6px rgba(21, 94, 232, 0.2);
}

.demo-inset {
	background: var(--demo-surface-2);
	border: 1px solid var(--demo-border);
}
.demo-inset:hover {
	background: var(--demo-surface-3);
}

.demo-preview-banner {
	background: linear-gradient(90deg, #1149c2, #2e72f8, #6c33f4);
}

.inbox-item-active {
	background: var(--demo-accent-soft) !important;
	border-left: 3px solid var(--demo-accent) !important;
}

.panel-sidebar {
	box-shadow: 4px 0 28px -10px rgba(15, 23, 42, 0.08);
}
html.dark .panel-sidebar {
	box-shadow: 4px 0 28px -10px rgba(0, 0, 0, 0.45);
}
.panel-sidebar::-webkit-scrollbar { width: 5px; }
.panel-sidebar::-webkit-scrollbar-thumb {
	background: var(--demo-border);
	border-radius: 4px;
}

/* ─── Açık mod: koyu tema Tailwind sınıflarını düzelt ─── */
html:not(.dark) .demo-shell .text-white {
	color: var(--demo-text) !important;
}
html:not(.dark) .demo-shell .text-slate-200 {
	color: var(--demo-text-secondary) !important;
}
html:not(.dark) .demo-shell .text-slate-300 {
	color: var(--demo-text-secondary) !important;
}
html:not(.dark) .demo-shell .text-slate-400,
html:not(.dark) .demo-shell .text-slate-500 {
	color: var(--demo-muted) !important;
}
html:not(.dark) .demo-shell .text-vexel-300,
html:not(.dark) .demo-shell .text-vexel-400 {
	color: var(--demo-accent-text) !important;
}
html:not(.dark) .demo-shell .text-emerald-300 {
	color: #047857 !important;
}
html:not(.dark) .demo-shell .text-emerald-400 {
	color: #059669 !important;
}
html:not(.dark) .demo-shell .text-fuchsia-300 {
	color: #a21caf !important;
}
html:not(.dark) .demo-shell .text-amber-300 {
	color: #b45309 !important;
}
html:not(.dark) .demo-shell .text-red-300 {
	color: #b91c1c !important;
}
html:not(.dark) .demo-shell .text-red-400 {
	color: #dc2626 !important;
}

html:not(.dark) .demo-shell .glass {
	background: var(--demo-surface) !important;
	border: 1px solid var(--demo-border) !important;
	backdrop-filter: none;
	box-shadow: var(--demo-shadow);
	color: var(--demo-text);
}

html:not(.dark) .demo-shell [class*="bg-white/"] {
	background-color: var(--demo-surface-2) !important;
}
html:not(.dark) .demo-shell [class*="border-white/"] {
	border-color: var(--demo-border) !important;
}
html:not(.dark) .demo-shell .hover\:bg-white\/5:hover,
html:not(.dark) .demo-shell .hover\:bg-white\/10:hover {
	background-color: var(--demo-surface-3) !important;
}

html:not(.dark) .demo-shell .bg-black\/20,
html:not(.dark) .demo-shell .bg-black\/30 {
	background-color: var(--demo-surface-2) !important;
}

html:not(.dark) .demo-shell thead.bg-white\/5,
html:not(.dark) .demo-shell tr.hover\:bg-white\/5:hover {
	background-color: var(--demo-surface-2) !important;
}

html:not(.dark) .demo-shell .bg-slate-500\/20 {
	background-color: #e2e8f0 !important;
}
html:not(.dark) .demo-shell .bg-slate-500\/20.text-slate-400 {
	color: var(--demo-muted) !important;
}

html:not(.dark) .demo-shell .bg-vexel-600\/10 {
	background-color: var(--demo-accent-soft) !important;
}
html:not(.dark) .demo-shell .border-vexel-500\/20,
html:not(.dark) .demo-shell .border-vexel-500\/30 {
	border-color: rgba(21, 94, 232, 0.35) !important;
}

html:not(.dark) .demo-shell .demo-muted {
	color: var(--demo-muted) !important;
}

/* Butonlar: beyaz metin mor arka planda kalsın */
html:not(.dark) .demo-shell .bg-vexel-600,
html:not(.dark) .demo-shell .bg-vexel-500,
html:not(.dark) .demo-shell .bg-fuchsia-600,
html:not(.dark) .demo-shell .from-pink-600,
html:not(.dark) .demo-shell .bg-gradient-to-r.from-vexel-600 {
	color: #fff !important;
}
html:not(.dark) .demo-shell .bg-vexel-600 .text-white,
html:not(.dark) .demo-shell button.bg-vexel-600 {
	color: #fff !important;
}

/* İkincil butonlar açık modda */
html:not(.dark) .demo-shell button.border.border-white\/10,
html:not(.dark) .demo-shell .border-white\/10.text-slate-300 {
	border-color: var(--demo-border) !important;
	color: var(--demo-text-secondary) !important;
	background: var(--demo-surface) !important;
}

/* Marka kimliği — bölüm menüsü */
.brand-section-active {
	background: var(--demo-accent-soft);
	color: var(--demo-accent-text);
	border: 1px solid rgba(21, 94, 232, 0.25);
}
.brand-identity-page .brand-section-btn {
	border: 1px solid transparent;
}
.brand-section-body {
	line-height: 1.75;
}
.brand-section-body br + br {
	display: none;
}

/* Rakip ekle butonu */
.btn-add-competitor {
	background: #111827 !important;
	color: #fff !important;
	border: none !important;
}
.btn-add-competitor:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.competitor-legend {
	background: var(--demo-surface-2);
}
html.dark .btn-add-competitor {
	background: #1e293b !important;
	color: #fff !important;
}

/* Rakip kartları */
.competitor-card {
	transition: box-shadow 0.2s ease;
}
.competitor-card:hover {
	box-shadow: var(--demo-shadow);
}
.competitor-pro {
	padding: 0.5rem 0.65rem;
	border-radius: 0.5rem;
	background: rgba(16, 185, 129, 0.1);
	color: #047857;
}
html.dark .competitor-pro {
	background: rgba(16, 185, 129, 0.15);
	color: #6ee7b7;
}
.competitor-con {
	padding: 0.5rem 0.65rem;
	border-radius: 0.5rem;
	background: rgba(239, 68, 68, 0.08);
	color: #b91c1c;
}
html.dark .competitor-con {
	background: rgba(239, 68, 68, 0.12);
	color: #fca5a5;
}

/* Konumlandırma kartları */
.positioning-section-title {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--demo-muted);
}
.positioning-summary-card,
.positioning-section-card {
	transition: box-shadow 0.2s ease;
}
.positioning-summary-card:hover,
.positioning-section-card:hover {
	box-shadow: var(--demo-shadow);
}

/* Değer önerisi */
.vp-section-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--demo-muted);
}
.vp-headline-card {
	border-left: 4px solid var(--vexel-500, #2e72f8);
	background: linear-gradient(135deg, rgba(21, 94, 232, 0.06), transparent);
}
html.dark .vp-headline-card {
	background: linear-gradient(135deg, rgba(46, 114, 248, 0.12), transparent);
}
.vp-headline-text {
	margin-top: 0.75rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.55;
	color: var(--demo-text);
}
.vp-points-grid {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 640px) {
	.vp-points-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.875rem 1.25rem;
	}
}
.vp-point-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.75rem 0.875rem;
	border-radius: 0.625rem;
	background: var(--demo-surface-2, #f8fafc);
	border: 1px solid var(--demo-border, #e2e8f0);
}
.vp-point-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 9999px;
	background: rgba(21, 94, 232, 0.12);
	color: var(--vexel-600, #155ee8);
	margin-top: 0.1rem;
}
html.dark .vp-point-icon {
	background: rgba(46, 114, 248, 0.2);
	color: #93c5fd;
}

/* Hedef kitle */
.ta-segment-card,
.ta-persona-card {
	transition: box-shadow 0.2s ease;
}
.ta-segment-card:hover,
.ta-persona-card:hover {
	box-shadow: var(--demo-shadow);
}
.ta-segment-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vexel-600, #155ee8);
}
html.dark .ta-segment-label {
	color: #93c5fd;
}
.ta-persona-avatar {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
}

/* Sidebar — ajan menüsü */
.menu-team-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	background-size: 58%;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow:
		0 2px 8px rgba(15, 23, 42, 0.08),
		inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
.menu-team-avatar--1 {
	background-color: #e8f0fe;
}
.menu-team-avatar--2 {
	background-color: #eef4ff;
}
.menu-team-avatar--3 {
	background-color: #dbeafe;
}
.menu-team-avatar--4 {
	background-color: #e0f2fe;
}
html.dark .menu-team-avatar {
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
html.dark .menu-team-avatar--1 { background-color: rgba(21, 94, 232, 0.22); }
html.dark .menu-team-avatar--2 { background-color: rgba(59, 130, 246, 0.18); }
html.dark .menu-team-avatar--3 { background-color: rgba(37, 99, 235, 0.24); }
html.dark .menu-team-avatar--4 { background-color: rgba(14, 165, 233, 0.18); }

.menu-agent-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.875rem;
	text-decoration: none;
	color: var(--demo-text);
	border: 1px solid transparent;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		color 0.2s ease;
}
.menu-agent-item:hover:not(.demo-nav-active) {
	background: var(--demo-surface-2);
	border-color: var(--demo-border);
}
.menu-agent-item .menu-agent-desc {
	color: var(--demo-muted);
}
.menu-agent-item.demo-nav-active .menu-agent-desc {
	color: var(--demo-accent-text);
	opacity: 0.8;
}
.menu-agent-item.demo-nav-active .menu-team-avatar {
	box-shadow:
		0 2px 10px rgba(21, 94, 232, 0.2),
		inset 0 0 0 2px rgba(21, 94, 232, 0.15);
}

/* Ajan sohbet sayfası — tam yükseklik, iç scroll */
body.demo-shell:has(#agent-chat-app) .flex-1.flex.flex-col {
	min-height: 0;
}
main:has(#agent-chat-app) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden !important;
}
main:has(#agent-chat-app) > .max-w-6xl {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	height: 0;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.agent-page {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 1.25rem;
	min-height: 0;
}
.agent-hero {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
	padding: 1.25rem 1.5rem;
	border-radius: 1.25rem;
	background:
		linear-gradient(135deg, rgba(21, 94, 232, 0.06) 0%, rgba(255, 255, 255, 0) 55%),
		var(--demo-surface);
	border: 1px solid var(--demo-border);
	box-shadow: var(--demo-shadow);
}
html.dark .agent-hero {
	background:
		linear-gradient(135deg, rgba(21, 94, 232, 0.14) 0%, rgba(16, 22, 42, 0) 55%),
		var(--demo-surface);
}
.agent-hero .menu-team-avatar {
	width: 3rem;
	height: 3rem;
	background-size: 54%;
}
.agent-hero-eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--demo-accent-text);
}
.agent-hero-title {
	margin-top: 0.125rem;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--demo-text);
}
.agent-hero-desc {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--demo-muted);
}
.agent-chat-shell {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	border-radius: 1.25rem;
	overflow: hidden;
	background: var(--demo-surface);
	border: 1px solid var(--demo-border);
	box-shadow:
		var(--demo-shadow),
		0 24px 48px -28px rgba(21, 94, 232, 0.18);
}
.agent-chat-toolbar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.625rem 1rem;
	border-bottom: 1px solid var(--demo-border);
	background: var(--demo-surface);
}
.agent-refresh-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.35rem 0.65rem;
	border-radius: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--demo-accent-text);
	background: var(--demo-accent-soft);
	border: 1px solid rgba(21, 94, 232, 0.2);
	transition: background 0.15s ease, opacity 0.15s ease;
}
.agent-refresh-btn:hover:not(:disabled) {
	filter: brightness(0.97);
}
.agent-refresh-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.agent-chat-messages {
	flex: 1 1 auto;
	min-height: 0;
	padding: 1.25rem 1.5rem;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background:
		linear-gradient(180deg, var(--demo-surface-2) 0%, var(--demo-surface) 12%);
}
.agent-chat-messages > * + * {
	margin-top: 1rem;
}
.agent-chat-messages::-webkit-scrollbar {
	width: 6px;
}
.agent-chat-messages::-webkit-scrollbar-thumb {
	background: var(--demo-border);
	border-radius: 4px;
}
.agent-chat-composer {
	flex-shrink: 0;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--demo-border);
	background: var(--demo-surface);
}
.agent-chat-composer form {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	padding: 0.375rem;
	border-radius: 1rem;
	background: var(--demo-surface-2);
	border: 1px solid var(--demo-border);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.agent-chat-composer .demo-input {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0.625rem 0.75rem;
}
.agent-chat-composer .demo-input:focus {
	box-shadow: none !important;
}
.agent-chat-send {
	padding: 0.625rem 1.125rem;
	border-radius: 0.75rem;
	background: linear-gradient(135deg, #1a66ea, #155ee8);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	border: none;
	box-shadow: 0 4px 14px rgba(21, 94, 232, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.agent-chat-send:hover:not(:disabled) {
	filter: brightness(1.05);
	box-shadow: 0 6px 18px rgba(21, 94, 232, 0.42);
}
.agent-chat-send:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.chat-bubble-ai {
	margin-right: auto;
	max-width: min(85%, 36rem);
	background: var(--demo-surface);
	border: 1px solid var(--demo-border);
	border-radius: 1.125rem;
	border-top-left-radius: 0.375rem;
	padding: 1rem 1.125rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--demo-text);
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
html.dark .chat-bubble-ai {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.chat-bubble-user {
	margin-left: auto;
	max-width: min(85%, 36rem);
	background: linear-gradient(135deg, #e8f0fe, #dde9fe);
	border: 1px solid rgba(21, 94, 232, 0.22);
	border-radius: 1.125rem;
	border-top-right-radius: 0.375rem;
	padding: 1rem 1.125rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--demo-text);
	box-shadow: 0 2px 12px rgba(21, 94, 232, 0.1);
}
html.dark .chat-bubble-user {
	background: linear-gradient(135deg, rgba(21, 94, 232, 0.28), rgba(21, 94, 232, 0.16));
	border-color: rgba(143, 181, 254, 0.3);
}

.agent-quota-pill {
	padding: 0.625rem 0.875rem;
	border-radius: 0.875rem;
	background: var(--demo-surface-2);
	border: 1px solid var(--demo-border);
	text-align: right;
}
.agent-bubble-thinking {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.75rem;
}
.agent-thinking-label {
	font-size: 0.875rem;
	color: var(--demo-muted);
}
.agent-thinking-dots {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
}
.agent-thinking-dots span {
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--demo-accent);
	opacity: 0.35;
	animation: agent-dot-pulse 1.2s ease-in-out infinite;
}
.agent-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.agent-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes agent-dot-pulse {
	0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}
.agent-bubble-typing .agent-typed-text,
.agent-message-formatted .agent-typed-text,
.chat-bubble-ai.agent-message-formatted {
	white-space: pre-line;
	word-break: break-word;
}
.agent-message-formatted .agent-typed-text:empty::after,
.chat-bubble-ai.agent-message-formatted:empty::after {
	content: '';
}
.agent-typing-cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	vertical-align: text-bottom;
	background: var(--demo-accent);
	animation: agent-cursor-blink 0.9s step-end infinite;
}
@keyframes agent-cursor-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* Tam ekran loader / modal kartları */
.brand-enrich-loader-card,
.seo-loader-card,
.complaints-loader-card {
	max-width: 22rem;
	border: 1px solid var(--demo-border);
}
.brand-enrich-spinner {
	position: relative;
	width: 72px;
	height: 72px;
}
.brand-enrich-spinner-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: var(--demo-accent, #155ee8);
	border-right-color: rgba(236, 72, 153, 0.45);
	animation: brand-enrich-spin 1.1s linear infinite;
}
.brand-enrich-spinner-core {
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, #155ee8, #a855f7);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(21, 94, 232, 0.35);
	animation: brand-enrich-pulse 2s ease-in-out infinite;
}
@keyframes brand-enrich-spin {
	to { transform: rotate(360deg); }
}
@keyframes brand-enrich-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

/* Dijital pazarlama stratejisi */
.ds-channel-btn:hover:not(:disabled) {
	background: var(--demo-surface-2);
}
.ds-channel-active {
	background: var(--demo-surface-2);
	border-left: 3px solid var(--vexel-600, #155ee8);
}
.ds-channel-locked-row {
	opacity: 0.72;
}
.ds-placeholder-block {
	opacity: 0.45;
}
.ds-priority-badge {
	font-size: 10px;
	font-weight: 700;
	padding: 0.2rem 0.5rem;
	border-radius: 0.375rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ds-priority-high {
	background: rgba(239, 68, 68, 0.12);
	color: #dc2626;
}
html.dark .ds-priority-high {
	color: #f87171;
}
.ds-priority-medium {
	background: rgba(245, 158, 11, 0.12);
	color: #d97706;
}
html.dark .ds-priority-medium {
	color: #fbbf24;
}
.ds-priority-low {
	background: rgba(16, 185, 129, 0.12);
	color: #059669;
}
html.dark .ds-priority-low {
	color: #34d399;
}
.ds-blur-text {
	filter: blur(5px);
	user-select: none;
}
.ds-lock-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, var(--demo-surface, #fff) 85%);
	pointer-events: none;
}
html.dark .ds-lock-overlay {
	background: linear-gradient(180deg, transparent 0%, var(--demo-surface, #0f172a) 85%);
}
.ds-upgrade-banner {
	box-shadow: 0 8px 32px -8px rgba(21, 94, 232, 0.2);
}

/* Hesap ayarları */
.account-settings-page {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.account-settings-shell {
	box-shadow: 0 4px 24px -6px rgba(15, 23, 42, 0.08);
}
html.dark .account-settings-shell {
	box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.35);
}
.hesap-tab-active {
	background: var(--vexel-600, #155ee8);
	color: #fff !important;
}
.hesap-tab-active svg {
	color: #fff;
}
.account-settings-panels .demo-input {
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	border-radius: 0.5rem;
}
.account-panel-head {
	margin-bottom: 1.125rem;
}
.account-form {
	width: 100%;
}
.account-form-fields {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}
.account-field-row {
	display: grid;
	gap: 0.35rem;
}
@media (min-width: 640px) {
	.account-field-row {
		grid-template-columns: 9.5rem minmax(0, 1fr);
		column-gap: 1.5rem;
		row-gap: 0.25rem;
		align-items: center;
	}
	.account-field-row-hint {
		align-items: start;
	}
	.account-field-row-hint .account-field-label {
		padding-top: 0.5rem;
	}
}
.account-field-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--demo-text-secondary, #64748b);
	line-height: 1.3;
}
.account-field-value {
	min-width: 0;
}
.account-field-value > .demo-input {
	background: var(--demo-inset, #f8fafc);
}
.account-field-control {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}
.account-field-control .demo-input {
	flex: 1;
	min-width: 0;
	background: var(--demo-inset, #f8fafc);
}
.account-input-readonly {
	cursor: default;
}
.account-edit-link {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--vexel-600, #155ee8);
	white-space: nowrap;
}
.account-edit-link:hover {
	text-decoration: underline;
}
.account-field-hint {
	font-size: 0.6875rem;
	color: var(--demo-muted, #94a3b8);
	margin-top: 0.35rem;
	line-height: 1.35;
}
.account-password-panel {
	margin-top: 0.5rem;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0.875rem 1rem;
	border-radius: 0.625rem;
	border: 1px solid var(--demo-border, #e2e8f0);
	background: var(--demo-surface-2, #f8fafc);
	width: 100%;
}
@media (min-width: 640px) {
	.account-password-panel {
		margin-left: calc(9.5rem + 1.5rem);
		width: calc(100% - 9.5rem - 1.5rem);
	}
}
.account-form-actions {
	margin-top: 1.125rem;
}
@media (min-width: 640px) {
	.account-form-actions {
		padding-left: calc(9.5rem + 1.5rem);
	}
}
.account-subscription-block {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--demo-border, #e2e8f0);
	width: 100%;
}
.account-subscription-wide {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	border-radius: 0.75rem;
	border: 1px solid var(--demo-border, #e2e8f0);
	background: var(--demo-surface-2, #f8fafc);
}
@media (min-width: 768px) {
	.account-subscription-wide {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 1.25rem 2rem;
		padding: 1.25rem 1.5rem;
	}
}
.account-subscription-title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--demo-text, #0f172a);
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.account-subscription-title {
		min-width: 5.5rem;
	}
}
.account-subscription-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	flex: 1;
	min-width: 0;
}
@media (min-width: 768px) {
	.account-subscription-stats {
		gap: 1.5rem 2.5rem;
	}
}
.account-subscription-stat {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 7rem;
}
.account-subscription-stat dt {
	font-size: 0.6875rem;
}
.account-subscription-stat dd {
	font-size: 0.8125rem;
}
.account-subscription-action {
	flex-shrink: 0;
	width: 100%;
}
@media (min-width: 768px) {
	.account-subscription-action {
		width: auto;
		min-width: 10rem;
		margin-left: auto;
	}
}
.account-upgrade-btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.25rem;
	border-radius: 0.5rem;
	background: var(--vexel-600, #155ee8);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	transition: background 0.2s ease;
	white-space: nowrap;
}
.account-upgrade-btn:hover {
	background: var(--vexel-500, #2e72f8);
}