/* Dragon Farm Assistant – chat widget v2.
 * One memorable element: the header's "field horizon", a soft green curve the
 * conversation rises out of. Everything else stays quiet so it fits any site. */

.dc-root {
	--dc-primary: #1f6b3a;
	--dc-on-primary: #fff;
	--dc-accent: #e2a93b;
	--dc-bottom: 20px;
	--dc-side: 20px;
	--dc-width: 384px;
	--dc-surface: #ffffff;
	--dc-field: #f2f5f1;
	--dc-ink: #1b2a20;
	--dc-muted: #5b6b61;
	--dc-line: #dbe3dc;
	--dc-bot: #ffffff;
	--dc-link: var(--dc-primary);
	--dc-shadow: 0 18px 50px -12px rgba(16, 36, 22, .28), 0 4px 14px -6px rgba(16, 36, 22, .18);
	position: fixed;
	bottom: var(--dc-bottom);
	z-index: 2147483000;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dc-ink);
	text-align: start;
	-webkit-font-smoothing: antialiased;
}
.dc-root[data-theme="dark"] {
	--dc-surface: #141b16;
	--dc-field: #0f1511;
	--dc-ink: #e3ebe5;
	--dc-muted: #9aaba0;
	--dc-line: #263229;
	--dc-bot: #1a231d;
	--dc-link: color-mix(in srgb, var(--dc-primary) 55%, #ffffff);
	--dc-shadow: 0 18px 50px -12px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
	.dc-root[data-theme="auto"] {
		--dc-surface: #141b16;
		--dc-field: #0f1511;
		--dc-ink: #e3ebe5;
		--dc-muted: #9aaba0;
		--dc-line: #263229;
		--dc-bot: #1a231d;
		--dc-link: color-mix(in srgb, var(--dc-primary) 55%, #ffffff);
		--dc-shadow: 0 18px 50px -12px rgba(0, 0, 0, .6);
	}
}
.dc-root.dc-font-system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Tahoma, Arial, sans-serif; }
.dc-root.dc-right { right: var(--dc-side); }
.dc-root.dc-left { left: var(--dc-side); }
.dc-root *, .dc-root *::before, .dc-root *::after { box-sizing: border-box; }
.dc-root [hidden] { display: none !important; }
.dc-root button { font: inherit; color: inherit; margin: 0; letter-spacing: normal; text-transform: none; box-shadow: none; min-height: 0; line-height: 1.2; }
.dc-root svg { width: 20px; height: 20px; display: block; flex: none; }
.dc-root img { display: block; }

/* ---------- Launcher ---------- */
.dc-root .dc-launcher {
	display: flex; align-items: center; gap: 10px;
	height: 54px; padding: 0 22px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--dc-primary); color: var(--dc-on-primary);
	box-shadow: var(--dc-shadow);
	font-weight: 600; font-size: 15px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.dc-root.dc-right .dc-launcher { margin-inline-start: auto; }
.dc-root .dc-launcher:hover { transform: translateY(-2px); }
.dc-root .dc-launcher:focus-visible { outline: 3px solid var(--dc-accent); outline-offset: 3px; }
.dc-root .dc-launcher-icon { display: flex; }
.dc-root .dc-launcher-icon svg { width: 24px; height: 24px; }
.dc-root .dc-launcher-icon img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.dc-root .dc-launcher-x { display: none; }
.dc-root .dc-launcher-label { white-space: nowrap; }
.dc-root.dc-launch-round .dc-launcher { width: 60px; height: 60px; padding: 0; justify-content: center; }
.dc-root.dc-launch-round .dc-launcher-label { display: none; }
.dc-root.dc-launch-round .dc-launcher-icon svg { width: 28px; height: 28px; }
.dc-root.dc-is-open .dc-launcher { width: 54px; padding: 0; justify-content: center; }
.dc-root.dc-is-open.dc-launch-round .dc-launcher { width: 60px; }
.dc-root.dc-is-open .dc-launcher-icon, .dc-root.dc-is-open .dc-launcher-label { display: none; }
.dc-root.dc-is-open .dc-launcher-x { display: flex; }

/* ---------- Teaser ---------- */
.dc-root .dc-teaser {
	position: absolute; bottom: 70px; width: max-content; max-width: 250px;
	padding: 12px 34px 12px 14px; border-radius: 14px; cursor: pointer;
	background: var(--dc-surface); color: var(--dc-ink);
	border: 1px solid var(--dc-line); border-inline-start: 3px solid var(--dc-accent);
	box-shadow: var(--dc-shadow); font-size: 14px; line-height: 1.4;
	animation: dc-rise .3s ease both;
}
.dc-root.dc-right .dc-teaser { right: 0; }
.dc-root.dc-left .dc-teaser { left: 0; }
.dc-root .dc-teaser-x {
	position: absolute; top: 7px; inset-inline-end: 7px; width: 22px; height: 22px; padding: 3px;
	border: 0; border-radius: 50%; background: transparent; color: var(--dc-muted); cursor: pointer;
}
.dc-root .dc-teaser-x svg { width: 16px; height: 16px; }

/* ---------- Panel ---------- */
.dc-root .dc-panel {
	position: absolute; bottom: 70px;
	width: min(var(--dc-width), calc(100vw - 2 * var(--dc-side)));
	height: min(640px, calc(100vh - var(--dc-bottom) - 96px));
	display: flex; flex-direction: column;
	background: var(--dc-field); color: var(--dc-ink);
	border-radius: 22px; overflow: hidden; overflow: clip;
	box-shadow: var(--dc-shadow);
	animation: dc-rise .22s ease both;
}
.dc-root.dc-right .dc-panel { right: 0; transform-origin: bottom right; }
.dc-root.dc-left .dc-panel { left: 0; transform-origin: bottom left; }

.dc-root .dc-head {
	position: relative; display: flex; align-items: center; gap: 12px;
	padding: 16px 12px 18px 16px;
	background: var(--dc-primary); color: var(--dc-on-primary);
}
.dc-root.dc-curve .dc-head { padding-bottom: 34px; }
.dc-root.dc-curve .dc-head::after {
	content: ""; position: absolute; left: -8%; right: -8%; bottom: -1px; height: 26px;
	background: var(--dc-field); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.dc-root .dc-avatar {
	flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	background: color-mix(in srgb, var(--dc-on-primary) 16%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc-on-primary) 22%, transparent);
}
.dc-root .dc-avatar svg { width: 22px; height: 22px; }
.dc-root .dc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dc-root .dc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dc-root .dc-title strong { font-size: 16px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-root .dc-title span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-root .dc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc-accent); flex: none; }
.dc-root .dc-test {
	font-size: 10.5px; font-weight: 700; line-height: 1.5; padding: 0 6px; border-radius: 6px;
	background: var(--dc-accent); color: #2b2106;
}
.dc-root .dc-actions { display: flex; gap: 2px; }
.dc-root .dc-icon-btn {
	width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: transparent; color: var(--dc-on-primary); text-decoration: none;
}
.dc-root .dc-icon-btn:hover, .dc-root .dc-icon-btn:focus-visible { background: color-mix(in srgb, var(--dc-on-primary) 16%, transparent); outline: none; }

/* ---------- Conversation ---------- */
.dc-root .dc-log {
	flex: 1; overflow-y: auto; overscroll-behavior: contain;
	padding: 6px 16px 10px; display: flex; flex-direction: column; gap: 10px;
	scrollbar-width: thin;
}
.dc-root .dc-msg { max-width: 86%; padding: 11px 14px; border-radius: 18px; overflow-wrap: anywhere; font-size: 15px; }
.dc-root .dc-msg p { margin: 0 0 8px; padding: 0; font: inherit; color: inherit; }
.dc-root .dc-msg p:last-child { margin-bottom: 0; }
.dc-root .dc-msg ul, .dc-root .dc-msg ol { margin: 4px 0 8px; padding-inline-start: 20px; }
.dc-root .dc-msg li { margin: 3px 0; padding: 0; }
.dc-root .dc-msg li::marker { color: var(--dc-primary); }
.dc-root .dc-msg strong { font-weight: 650; }
.dc-root .dc-bot {
	align-self: flex-start; background: var(--dc-bot); color: var(--dc-ink);
	border: 1px solid var(--dc-line); border-start-start-radius: 6px;
}
.dc-root .dc-welcome { border-color: transparent; box-shadow: 0 1px 2px rgba(16, 36, 22, .06); }
.dc-root .dc-user {
	align-self: flex-end; background: var(--dc-primary); color: var(--dc-on-primary);
	border-end-end-radius: 6px;
}
.dc-root .dc-bot a { color: var(--dc-link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dc-root .dc-error { border-color: color-mix(in srgb, #c43d3d 35%, var(--dc-line)); }
.dc-root .dc-wa-btn {
	display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
	background: #1f9d55; color: #fff !important; text-decoration: none !important; font-size: 14px;
}
.dc-root .dc-wa-btn svg { width: 18px; height: 18px; }
.dc-root .dc-dots { display: inline-flex; gap: 5px; padding: 4px 2px; }
.dc-root .dc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--dc-primary); opacity: .3; animation: dc-pulse 1.2s infinite ease-in-out; }
.dc-root .dc-dots i:nth-child(2) { animation-delay: .18s; }
.dc-root .dc-dots i:nth-child(3) { animation-delay: .36s; }

.dc-root .dc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 16px 12px; }
.dc-root .dc-chip {
	padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; text-align: start;
	background: var(--dc-surface); color: var(--dc-ink);
	border: 1px solid color-mix(in srgb, var(--dc-primary) 45%, var(--dc-line));
}
.dc-root .dc-chip:hover, .dc-root .dc-chip:focus-visible { background: var(--dc-primary); color: var(--dc-on-primary); border-color: var(--dc-primary); outline: none; }

/* ---------- Product cards ---------- */
.dc-root .dc-cards { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin: -2px 0 2px; }
.dc-root .dc-card {
	display: flex; align-items: center; gap: 12px; padding: 8px; padding-inline-end: 14px;
	background: var(--dc-bot); border: 1px solid var(--dc-line); border-radius: 16px;
	color: var(--dc-ink) !important; text-decoration: none !important;
	transition: border-color .15s ease, transform .15s ease;
}
.dc-root .dc-card:hover { border-color: var(--dc-primary); transform: translateY(-1px); }
.dc-root .dc-card:focus-visible { outline: 3px solid var(--dc-accent); outline-offset: 2px; }
.dc-root .dc-card-img {
	flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--dc-primary) 10%, var(--dc-surface)); color: var(--dc-primary);
}
.dc-root .dc-card-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.dc-root .dc-card-img svg { width: 26px; height: 26px; }
.dc-root .dc-card-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dc-root .dc-card-body strong { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.dc-root .dc-card-body small { font-size: 12px; color: var(--dc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-root .dc-card-body em {
	display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
	font-style: normal; font-size: 13px; font-weight: 600; color: var(--dc-link);
}
.dc-root .dc-card-body em svg { width: 15px; height: 15px; }
.dc-root[dir="rtl"] .dc-card-body em svg { transform: scaleX(-1); }

.dc-root .dc-note { align-self: center; max-width: 92%; padding: 6px 12px; border: 0; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--dc-primary) 12%, var(--dc-surface)); color: var(--dc-ink); }
.dc-root .dc-note p { display: flex; align-items: center; gap: 6px; }
.dc-root .dc-note svg { width: 16px; height: 16px; color: var(--dc-primary); }

/* ---------- Composer ---------- */
.dc-root .dc-form { position: relative; margin: 0; padding: 0 12px; }
.dc-root .dc-compose {
	display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 16px;
	background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 26px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.dc-root[dir="rtl"] .dc-compose { padding: 6px 16px 6px 6px; }
.dc-root .dc-compose:focus-within { border-color: var(--dc-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc-primary) 18%, transparent); }
.dc-root .dc-compose textarea {
	flex: 1; min-height: 40px; max-height: 120px; resize: none; margin: 0; padding: 9px 0;
	border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--dc-ink);
	font: inherit; font-size: 16px; line-height: 1.4;
}
.dc-root .dc-compose textarea::placeholder { color: var(--dc-muted); opacity: 1; }
.dc-root .dc-send {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: var(--dc-primary); color: var(--dc-on-primary);
}
.dc-root .dc-send:disabled { opacity: .45; cursor: default; }
.dc-root .dc-send:focus-visible { outline: 3px solid var(--dc-accent); outline-offset: 2px; }
.dc-root[dir="rtl"] .dc-send svg { transform: scaleX(-1); }
.dc-root .dc-hp {
	position: absolute !important; top: 0; inset-inline-start: 0; width: 1px !important; height: 1px !important;
	padding: 0 !important; border: 0 !important; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none;
}
.dc-root .dc-foot { margin: 0; padding: 8px 18px 12px; font-size: 11.5px; line-height: 1.4; color: var(--dc-muted); text-align: center; }

@keyframes dc-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dc-pulse { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ---------- Full view (bigger window and text, for easier reading) ---------- */
.dc-root .dc-backdrop[hidden] { display: none; }
.dc-root.dc-full .dc-log,
.dc-root.dc-full .dc-chips,
.dc-root.dc-full .dc-form,
.dc-root.dc-full .dc-foot { zoom: 1.25; }
.dc-root.dc-full .dc-compose textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-root.dc-full .dc-title strong { font-size: 19px; }
.dc-root.dc-full .dc-title span { font-size: 14px; }
@media (min-width: 521px) {
	.dc-root:not(.dc-preview).dc-full .dc-backdrop {
		position: fixed; inset: 0; background: rgba(10, 20, 14, .55);
		animation: dc-fade .18s ease both;
	}
	.dc-root:not(.dc-preview).dc-full .dc-panel {
		position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
		width: min(940px, calc(100vw - 48px)); height: min(900px, calc(100vh - 48px)); height: min(900px, calc(100dvh - 48px));
		transform: translate(-50%, -50%); animation: none;
	}
	.dc-root:not(.dc-preview).dc-full .dc-msg { max-width: 80%; }
	.dc-root:not(.dc-preview).dc-full.dc-is-open .dc-launcher,
	.dc-root:not(.dc-preview).dc-full .dc-teaser { visibility: hidden; }
}
@media (max-width: 520px) {
	.dc-root.dc-full .dc-log,
	.dc-root.dc-full .dc-chips,
	.dc-root.dc-full .dc-form,
	.dc-root.dc-full .dc-foot { zoom: 1.18; }
}
@keyframes dc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Admin live preview ---------- */
.dc-root.dc-preview { position: absolute; bottom: 16px; }
.dc-root.dc-preview.dc-right { right: 16px; }
.dc-root.dc-preview.dc-left { left: 16px; }
.dc-root.dc-preview .dc-panel { height: 560px; width: min(var(--dc-width), 408px); max-width: none; animation: none; }
.dc-root.dc-preview .dc-teaser { animation: none; }

/* ---------- Phones ---------- */
@media (max-width: 520px) {
	.dc-root:not(.dc-preview).dc-right { right: 14px; }
	.dc-root:not(.dc-preview).dc-left { left: 14px; }
	.dc-root:not(.dc-preview) .dc-launcher { height: 52px; }
	.dc-root:not(.dc-preview).dc-is-open .dc-launcher { display: none; }
	.dc-root:not(.dc-preview) .dc-panel {
		position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; border-radius: 0; bottom: auto;
	}
	.dc-root .dc-msg { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
	.dc-root * { animation: none !important; transition: none !important; }
}