/**
 * هوشیار — استایل ویجت گفتگو
 *
 * تمام رنگ‌ها، فاصله‌ها و گردی‌ها از طریق متغیرهای CSS روی .hy کنترل می‌شوند،
 * بنابراین پنل مدیریت افزونه فقط کافی است همین متغیرها را بازنویسی کند.
 * هیچ استایلی خارج از .hy تعریف نشده تا با قالب سایت تداخل نکند.
 */

/* ============================================================
   ۱) توکن‌های طراحی
   ============================================================ */

.hy {
	/* — هویت بصری — */
	--hy-accent: #2f8435;
	--hy-accent-hover: #276e2b;
	--hy-accent-soft: rgba(47, 132, 53, 0.09);
	--hy-on-accent: #ffffff;

	/* — سطوح — */
	--hy-surface: #ffffff;
	--hy-surface-2: #f5f7fa;
	--hy-surface-3: #e9edf2;
	--hy-border: #e4e7ec;
	--hy-border-strong: #d3d8e0;

	/* — متن — */
	--hy-text: #18191f;
	--hy-text-muted: #5b5f66;
	--hy-text-faint: #6e717f;

	/* — حباب پیام — */
	--hy-bot-bg: var(--hy-surface-2);
	--hy-bot-text: var(--hy-text);
	--hy-user-bg: var(--hy-accent);
	--hy-user-text: var(--hy-on-accent);

	/* — وضعیت‌ها — */
	--hy-online: #22c55e;
	--hy-danger: #d92d20;

	/* — تایپوگرافی — */
	--hy-font: "hy-vazirmatn", Tahoma, sans-serif;
	--hy-font-title: var(--hy-font);
	--hy-weight-title: 700;
	--hy-size: 14.5px;
	--hy-line: 1.85;

	/* — هندسه — */
	--hy-radius: 20px;
	--hy-radius-bubble: 16px;
	--hy-radius-input: 14px;
	--hy-radius-btn: 10px;
	--hy-launcher-size: 56px;
	--hy-panel-w: 384px;
	--hy-panel-h: 600px;
	--hy-gap: 16px;
	--hy-offset-x: 24px;
	--hy-offset-y: 24px;

	/* — سایه — */
	--hy-shadow-panel: 0 2px 8px rgba(16, 17, 26, 0.04), 0 20px 52px rgba(16, 17, 26, 0.13);
	--hy-shadow-launcher: 0 4px 16px rgba(16, 17, 26, 0.16);

	/* — حرکت — */
	--hy-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hy-dur: 0.34s;
}

/* ── پوسته تیره ── */
.hy[data-hy-theme="dark"] {
	--hy-accent: #63c266;
	--hy-accent-hover: #7fd182;
	--hy-accent-soft: rgba(99, 194, 102, 0.15);
	--hy-on-accent: #0f1b10;
	--hy-surface: #1a1e24;
	--hy-surface-2: #22272f;
	--hy-surface-3: #2c323b;
	--hy-border: rgba(255, 255, 255, 0.1);
	--hy-border-strong: rgba(255, 255, 255, 0.18);
	--hy-text: #f3f5f7;
	--hy-text-muted: #b0b6bf;
	--hy-text-faint: #8f95a0;
	--hy-shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.3), 0 20px 52px rgba(0, 0, 0, 0.55);
	--hy-shadow-launcher: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   ۲) پایه
   ============================================================ */

.hy,
.hy *,
.hy *::before,
.hy *::after {
	box-sizing: border-box;
}

.hy {
	position: fixed;
	z-index: 999999;
	font-family: var(--hy-font);
	font-size: var(--hy-size);
	line-height: var(--hy-line);
	color: var(--hy-text);
	direction: rtl;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hy[dir="ltr"] {
	direction: ltr;
}

/* موقعیت با خواص فیزیکی تعریف می‌شود تا «پایین راست» در سایت راست‌چین
   هم واقعاً سمت راست بنشیند، نه سمت شروعِ متن. */
.hy[data-hy-position$="-right"] {
	right: var(--hy-offset-x);
}

.hy[data-hy-position$="-left"] {
	left: var(--hy-offset-x);
}

.hy[data-hy-position^="bottom-"] {
	bottom: var(--hy-offset-y);
}

/* وسط لبه صفحه: دکمه عمودی وسط می‌نشیند و پنل هم وسط صفحه باز می‌شود.
   از transform استفاده نمی‌شود، چون پنل تمام‌صفحه موبایل position: fixed
   دارد و transform روی والد آن را خراب می‌کند. */
.hy[data-hy-position^="middle-"] {
	top: calc(50% - var(--hy-launcher-size) / 2);
}

/* ریست دکمه با :where نوشته می‌شود تا ویژگی‌مندی‌اش صفر بماند و
   استایل هر جزء (مثل .hy-starter یا .hy-send) رویش سوار شود، نه برعکس. */
:where(.hy) :where(button) {
	font: inherit;
	color: inherit;
	border: 0;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.hy :focus-visible {
	outline: 2px solid var(--hy-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

.hy svg {
	display: block;
	flex: none;
}

/* ویژگی hidden باید بر display نویسنده غلبه کند، وگرنه
   آواتار خالی و دکمه‌های خاموش‌شده همچنان دیده می‌شوند. */
.hy [hidden] {
	display: none !important;
}

.hy-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   ۳) دکمه شناور
   ============================================================ */

.hy-launcher-wrap {
	position: absolute;
	bottom: 0;
	right: 0;
	width: max-content;
	direction: ltr;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-direction: row-reverse;
	transition: opacity 0.18s ease, transform 0.26s var(--hy-ease), visibility 0s linear 0.26s;
}

/* وقتی گفتگو باز است، دکمه شناور کنار می‌رود تا پنل جایش را بگیرد */
.hy.is-open .hy-launcher-wrap {
	opacity: 0;
	visibility: hidden;
	transform: scale(0.5);
	pointer-events: none;
}

.hy[data-hy-position$="-left"] .hy-launcher-wrap {
	left: 0;
	right: auto;
	flex-direction: row;
}

.hy-launcher {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: var(--hy-launcher-size);
	height: var(--hy-launcher-size);
	border-radius: 50%;
	background: var(--hy-l-bg, var(--hy-accent));
	color: var(--hy-l-fg, var(--hy-on-accent));
	box-shadow: var(--hy-l-ring, 0 0 0 0 transparent), var(--hy-shadow-launcher);
	transition: transform var(--hy-dur) var(--hy-ease), background 0.2s ease, filter 0.2s ease;
}

.hy-launcher:hover {
	background: var(--hy-l-bg-hover, var(--hy-accent-hover));
	transform: scale(1.05);
}

.hy-launcher:active {
	transform: scale(0.94);
}

.hy-launcher__icon {
	position: absolute;
	display: grid;
	place-items: center;
	transition: opacity 0.26s var(--hy-ease), transform 0.26s var(--hy-ease);
}

.hy-launcher__icon svg {
	width: 24px;
	height: 24px;
}

.hy-launcher__icon--close {
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

.hy.is-open .hy-launcher__icon--chat {
	opacity: 0;
	transform: rotate(90deg) scale(0.6);
}

.hy.is-open .hy-launcher__icon--close {
	opacity: 1;
	transform: none;
}

/* حلقه تپش */
.hy-launcher::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--hy-l-pulse, var(--hy-accent));
	opacity: 0;
	pointer-events: none;
}

.hy[data-hy-pulse="on"]:not(.is-open) .hy-launcher::after {
	animation: hy-pulse 2.8s var(--hy-ease) infinite;
}

@keyframes hy-pulse {
	0% { opacity: 0.5; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.55); }
}

/* نشان پیام خوانده‌نشده */
.hy-launcher__badge {
	position: absolute;
	inset-block-start: -1px;
	inset-inline-end: -1px;
	width: 12px;
	height: 12px;
	display: none;
	border-radius: 50%;
	background: var(--hy-danger);
	box-shadow: 0 0 0 2.5px var(--hy-surface);
}

.hy.has-unread:not(.is-open) .hy-launcher__badge {
	display: block;
	animation: hy-pop 0.32s var(--hy-ease);
}

@keyframes hy-pop {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

/* ── تم‌های دکمه شناور ──────────────────────────────────────────
   شکل با data-hy-launcher و پرشدگی با data-hy-lfill. هر پرشدگی فقط
   متغیرهای --hy-l-* را عوض می‌کند، پس هر شکلی با هر پرشدگی جور است. */

.hy {
	--hy-grad-from: #8b5cf6;
	--hy-grad-to: #3b82f6;
}

.hy-launcher__label {
	display: none;
}

.hy-launcher__img {
	display: block;
	width: calc(var(--hy-launcher-size) - 8px);
	height: calc(var(--hy-launcher-size) - 8px);
	border-radius: inherit;
	object-fit: cover;
}

.hy-launcher__img--icon {
	width: 28px;
	height: 28px;
	border-radius: 0;
	object-fit: contain;
}

.hy-launcher__icon--chat:has(.hy-launcher__img) {
	border-radius: inherit;
}

/* پرشدگی */
.hy[data-hy-lfill="gradient"] {
	--hy-l-bg: linear-gradient(115deg, var(--hy-grad-from), var(--hy-grad-to));
	--hy-l-bg-hover: var(--hy-l-bg);
	--hy-l-fg: #fff;
	--hy-l-pulse: var(--hy-grad-from);
}

.hy[data-hy-lfill="soft"] {
	--hy-l-bg: linear-gradient(var(--hy-accent-soft), var(--hy-accent-soft)), var(--hy-surface);
	--hy-l-bg-hover: var(--hy-l-bg);
	--hy-l-fg: var(--hy-accent);
}

.hy[data-hy-lfill="outline"] {
	--hy-l-bg: var(--hy-surface);
	--hy-l-bg-hover: var(--hy-surface);
	--hy-l-fg: var(--hy-accent);
	--hy-l-ring: inset 0 0 0 2px var(--hy-accent);
}

.hy[data-hy-lfill="dark"] {
	--hy-l-bg: #18191f;
	--hy-l-bg-hover: #2a2c35;
	--hy-l-fg: #ffffff;
	--hy-l-pulse: #18191f;
}

.hy[data-hy-lfill="glass"] {
	--hy-l-bg: rgba(255, 255, 255, 0.62);
	--hy-l-bg-hover: rgba(255, 255, 255, 0.8);
	--hy-l-fg: var(--hy-accent);
	--hy-l-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.hy[data-hy-lfill="glass"] .hy-launcher {
	-webkit-backdrop-filter: blur(14px) saturate(1.6);
	backdrop-filter: blur(14px) saturate(1.6);
}

/* گرادیان روی background-image است؛ جابه‌جایی رنگ را با روشنایی نشان می‌دهیم */
.hy[data-hy-lfill="gradient"] .hy-launcher:hover,
.hy[data-hy-lfill="soft"] .hy-launcher:hover,
.hy[data-hy-lfill="outline"] .hy-launcher:hover {
	filter: brightness(1.06);
}

/* شکل: مربع گرد */
.hy[data-hy-launcher="squircle"] .hy-launcher {
	border-radius: calc(var(--hy-launcher-size) * 0.3);
}

/* شکل: قرص با برچسب، و زبانه چسبیده به لبه صفحه */
.hy[data-hy-launcher="pill"] .hy-launcher,
.hy[data-hy-launcher="tab"] .hy-launcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	height: calc(var(--hy-launcher-size) - 6px);
	padding-inline: 14px 18px;
	border-radius: 999px;
	direction: rtl;
	white-space: nowrap;
}

.hy[dir="ltr"][data-hy-launcher="pill"] .hy-launcher,
.hy[dir="ltr"][data-hy-launcher="tab"] .hy-launcher {
	direction: ltr;
}

.hy[data-hy-launcher="pill"] .hy-launcher__icon,
.hy[data-hy-launcher="tab"] .hy-launcher__icon {
	position: static;
}

.hy[data-hy-launcher="pill"] .hy-launcher__icon--close,
.hy[data-hy-launcher="tab"] .hy-launcher__icon--close {
	display: none;
}

.hy[data-hy-launcher="pill"] .hy-launcher__label,
.hy[data-hy-launcher="tab"] .hy-launcher__label {
	display: block;
	font-size: 14px;
	font-weight: var(--hy-weight-title);
	line-height: 1;
}

.hy[data-hy-launcher="pill"] .hy-launcher__img,
.hy[data-hy-launcher="tab"] .hy-launcher__img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.hy[data-hy-launcher="pill"] .hy-launcher__img--icon,
.hy[data-hy-launcher="tab"] .hy-launcher__img--icon {
	width: 24px;
	height: 24px;
	border-radius: 0;
}

.hy[data-hy-launcher="pill"] .hy-launcher:hover,
.hy[data-hy-launcher="tab"] .hy-launcher:hover {
	transform: translateY(-2px);
}

/* زبانه تا لبه صفحه می‌رود؛ فقط گوشه‌های رو به صفحه گرد است */
.hy[data-hy-launcher="tab"][data-hy-position$="-right"] .hy-launcher-wrap {
	right: calc(-1 * var(--hy-offset-x));
}

.hy[data-hy-launcher="tab"][data-hy-position$="-left"] .hy-launcher-wrap {
	left: calc(-1 * var(--hy-offset-x));
}

.hy[data-hy-launcher="tab"][data-hy-position$="-right"] .hy-launcher {
	border-radius: 16px 0 0 16px;
}

.hy[data-hy-launcher="tab"][data-hy-position$="-left"] .hy-launcher {
	border-radius: 0 16px 16px 0;
}

.hy[data-hy-launcher="tab"] .hy-launcher:hover {
	transform: none;
	filter: brightness(1.06);
}

/* نمایش ایستا — برای گالری تم‌ها و پیش‌نمایش در تنظیمات */
.hy.hy--static {
	position: relative;
	inset: auto;
	z-index: auto;
	display: inline-block;
}

.hy.hy--static .hy-launcher-wrap {
	position: relative;
	inset: auto;
}

.hy.hy--static[data-hy-launcher="tab"] .hy-launcher-wrap {
	right: auto;
	left: auto;
}

/* حباب تشویقی */
.hy-teaser {
	position: relative;
	width: max-content;
	max-width: 216px;
	direction: rtl;
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--hy-surface);
	color: var(--hy-text);
	font-size: 13px;
	line-height: 1.7;
	border: 1px solid var(--hy-border);
	box-shadow: var(--hy-shadow-launcher);
	opacity: 0;
	transform: translateY(6px) scale(0.94);
	transform-origin: bottom right;
	transition: opacity 0.3s var(--hy-ease), transform 0.3s var(--hy-ease);
	pointer-events: none;
	cursor: pointer;
}

.hy[dir="ltr"] .hy-teaser { direction: ltr; }

.hy[data-hy-position$="-left"] .hy-teaser {
	transform-origin: bottom left;
}

.hy[data-hy-position$="-left"] .hy-teaser__close {
	left: auto;
	right: -7px;
}

.hy.has-teaser:not(.is-open) .hy-teaser {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.hy-teaser__close {
	position: absolute;
	top: -7px;
	left: -7px;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--hy-surface-3);
	color: var(--hy-text-muted);
	border: 1px solid var(--hy-border);
}

.hy-teaser__close svg {
	width: 10px;
	height: 10px;
}

/* ============================================================
   ۴) پنل گفتگو
   ============================================================ */

.hy-panel {
	position: absolute;
	bottom: 0;
	right: 0;
	width: var(--hy-panel-w);
	height: min(var(--hy-panel-h), calc(100vh - var(--hy-offset-y) * 2));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--hy-radius);
	background: var(--hy-surface);
	border: 1px solid var(--hy-border);
	box-shadow: var(--hy-shadow-panel);
	transform-origin: bottom right;
	opacity: 0;
	transform: translateY(12px) scale(0.97);
	pointer-events: none;
	visibility: hidden;
	transition:
		opacity 0.24s var(--hy-ease),
		transform var(--hy-dur) var(--hy-ease),
		visibility 0s linear var(--hy-dur);
}

.hy[data-hy-position$="-left"] .hy-panel {
	left: 0;
	right: auto;
	transform-origin: bottom left;
}

.hy[data-hy-position^="middle-"] .hy-launcher-wrap {
	top: 0;
	bottom: auto;
}

.hy[data-hy-position^="middle-"] .hy-panel {
	--hy-mid-h: min(var(--hy-panel-h), calc(100vh - 32px));
	top: calc(var(--hy-launcher-size) / 2 - var(--hy-mid-h) / 2);
	bottom: auto;
	height: var(--hy-mid-h);
	transform-origin: center right;
}

.hy[data-hy-position="middle-left"] .hy-panel {
	transform-origin: center left;
}

.hy.is-open .hy-panel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

/* ── حالت جاسازی در صفحه (شورتکد / المنتور) ── */

.hy.hy--inline {
	position: relative;
	inset: auto;
	z-index: auto;
	width: 100%;
}

.hy.hy--inline .hy-launcher-wrap {
	display: none;
}

.hy.hy--inline .hy-panel {
	position: relative;
	inset: auto;
	width: 100%;
	height: var(--hy-panel-h);
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
}

.hy.hy--inline .hy-iconbtn[data-hy="close"] {
	display: none;
}

/* ── سربرگ ── */

.hy-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 14px 13px 16px;
	flex: none;
	border-block-end: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	background: var(--hy-surface);
	position: relative;
	z-index: 2;
}

.hy.is-scrolled .hy-header {
	border-block-end-color: var(--hy-border);
	box-shadow: 0 4px 14px rgba(16, 17, 26, 0.05);
}

.hy[data-hy-theme="dark"].is-scrolled .hy-header {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.hy[data-hy-header="accent"] .hy-header {
	background: var(--hy-accent);
	border-block-end-color: transparent;
	color: var(--hy-on-accent);
}

.hy[data-hy-header="gradient"] .hy-header {
	background: linear-gradient(135deg, var(--hy-accent), var(--hy-accent-hover));
	border-block-end-color: transparent;
	color: var(--hy-on-accent);
}

.hy-header__id {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.hy-header__meta {
	min-width: 0;
}

.hy-header__title {
	font-family: var(--hy-font-title);
	font-size: 14.5px;
	font-weight: var(--hy-weight-title);
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hy-header__subtitle {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--hy-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hy[data-hy-header="accent"] .hy-header__subtitle,
.hy[data-hy-header="gradient"] .hy-header__subtitle {
	color: rgba(255, 255, 255, 0.8);
}

.hy-status-dot {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--hy-online);
}

.hy-header__actions {
	display: flex;
	align-items: center;
	gap: 1px;
	flex: none;
}

.hy-iconbtn {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: var(--hy-radius-btn);
	color: var(--hy-text-muted);
	transition: background 0.16s ease, color 0.16s ease;
}

.hy-iconbtn:hover {
	background: var(--hy-surface-2);
	color: var(--hy-text);
}

.hy-iconbtn svg {
	width: 16px;
	height: 16px;
}

.hy[data-hy-header="accent"] .hy-iconbtn,
.hy[data-hy-header="gradient"] .hy-iconbtn {
	color: rgba(255, 255, 255, 0.75);
}

.hy[data-hy-header="accent"] .hy-iconbtn:hover,
.hy[data-hy-header="gradient"] .hy-iconbtn:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* ── آواتار ── */

.hy-avatar {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hy-accent-soft);
	color: var(--hy-accent);
	overflow: hidden;
}

.hy-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hy-avatar svg {
	width: 56%;
	height: 56%;
}

.hy-avatar--xl {
	width: 54px;
	height: 54px;
}

.hy[data-hy-header="accent"] .hy-header .hy-avatar,
.hy[data-hy-header="gradient"] .hy-header .hy-avatar {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* ============================================================
   ۵) بدنه و پیام‌ها
   ============================================================ */

.hy-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	scroll-behavior: smooth;
	background: var(--hy-surface);
	scrollbar-width: thin;
	scrollbar-color: var(--hy-border-strong) transparent;
}

.hy-body::-webkit-scrollbar {
	width: 6px;
}

.hy-body::-webkit-scrollbar-thumb {
	background: var(--hy-border-strong);
	border-radius: 99px;
}

/* ── صفحه خوش‌آمد ── */

/* فقط وقتی صفحه خوش‌آمد تنها محتواست، عمودی وسط‌چین می‌شود.
   اگر این را روی همه حالت‌ها بگذاریم، اسکرول افقی کارت‌های محصول می‌شکند. */
.hy-body:has(> .hy-welcome) {
	display: flex;
	flex-direction: column;
}

.hy-body:has(> .hy-welcome) > * { flex: none; }

.hy-welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block: auto;
	text-align: center;
	padding: 12px 4px;
	animation: hy-fade-up 0.45s var(--hy-ease) both;
}

.hy-welcome__title {
	margin: 12px 0 0;
	font-family: var(--hy-font-title);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.7;
}

.hy-welcome__text {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--hy-text-muted);
	max-width: 36ch;
}

.hy-starters {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	margin-block-start: 18px;
}

.hy-starter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 11px 15px;
	text-align: start;
	font-size: 13.5px;
	line-height: 1.7;
	border-radius: var(--hy-radius-input);
	background: var(--hy-surface);
	border: 1px solid var(--hy-border-strong);
	color: var(--hy-text);
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s var(--hy-ease);
}

.hy-starter:hover {
	background: var(--hy-accent-soft);
	border-color: var(--hy-accent);
	transform: translateY(-1px);
}

.hy-starter svg {
	width: 14px;
	height: 14px;
	color: var(--hy-accent);
	opacity: 0;
	transform: translateX(-4px);
	transition: transform 0.2s var(--hy-ease), opacity 0.18s ease;
}

.hy[dir="ltr"] .hy-starter svg { transform: translateX(4px); }

.hy-starter:hover svg,
.hy-starter:focus-visible svg {
	opacity: 1;
	transform: none;
}

/* ── پیام ── */

.hy-msg {
	display: flex;
	flex-direction: column;
	margin-block-end: 12px;
	animation: hy-fade-up 0.35s var(--hy-ease) both;
}

.hy-msg:last-child {
	margin-block-end: 0;
}

@keyframes hy-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.hy-msg--user {
	align-items: flex-end;
}

.hy-msg--bot {
	align-items: flex-start;
}

.hy-bubble {
	max-width: 84%;
	padding: 9px 13px;
	border-radius: var(--hy-radius-bubble);
	font-size: var(--hy-size);
	line-height: var(--hy-line);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.hy-msg--bot .hy-bubble {
	background: var(--hy-bot-bg);
	color: var(--hy-bot-text);
	border-start-start-radius: 5px;
}

.hy-msg--user .hy-bubble {
	background: var(--hy-user-bg);
	color: var(--hy-user-text);
	border-end-end-radius: 5px;
}

.hy[data-hy-bubble="flat"] .hy-msg--bot .hy-bubble {
	background: transparent;
	padding-inline: 0;
	max-width: 100%;
}

.hy[data-hy-bubble="outline"] .hy-msg--bot .hy-bubble {
	background: transparent;
	border: 1px solid var(--hy-border-strong);
}

/* محتوای داخل حباب */
.hy-bubble p {
	margin: 0;
}

.hy-bubble p + p {
	margin-block-start: 7px;
}

.hy-bubble a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hy-bubble code {
	padding: 1px 5px;
	border-radius: 5px;
	background: var(--hy-surface-3);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.88em;
	direction: ltr;
	display: inline-block;
}

.hy-msg--user .hy-bubble code {
	background: rgba(255, 255, 255, 0.18);
}

.hy-bubble strong {
	font-weight: 700;
}

.hy-bubble ul {
	margin: 7px 0 0;
	padding-inline-start: 18px;
}

.hy-bubble li {
	margin-block-end: 2px;
}

/* ── متادیتا و ابزار پیام ── */

.hy-msg__meta {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-block-start: 3px;
	padding-inline: 4px;
	font-size: 10.5px;
	color: var(--hy-text-faint);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.hy-msg:hover .hy-msg__meta,
.hy-msg:focus-within .hy-msg__meta {
	opacity: 1;
}

.hy-msg__tools {
	display: flex;
	gap: 1px;
}

.hy-tool {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 6px;
	color: var(--hy-text-faint);
	transition: background 0.14s ease, color 0.14s ease;
}

.hy-tool:hover {
	background: var(--hy-surface-2);
	color: var(--hy-text);
}

.hy-tool.is-active {
	color: var(--hy-accent);
}

.hy-tool svg {
	width: 12px;
	height: 12px;
}

/* ── نشانگر تایپ ── */

.hy-typing {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 13px;
	width: auto;
}

.hy-typing span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--hy-text-faint);
	animation: hy-bounce 1.3s var(--hy-ease) infinite;
}

.hy-typing span:nth-child(2) { animation-delay: 0.16s; }
.hy-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes hy-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30% { transform: translateY(-4px); opacity: 1; }
}

.hy-caret {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-inline-start: 2px;
	vertical-align: -2px;
	background: currentColor;
	animation: hy-blink 1s steps(2) infinite;
}

@keyframes hy-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* ============================================================
   ۶) انواع پیام ویژه
   ============================================================ */

/* ── خط سیستمی (انتقال به اپراتور، شروع گفتگو و…) ── */

.hy-system {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block: 4px 12px;
	font-size: 11.5px;
	color: var(--hy-text-faint);
	animation: hy-fade-up 0.35s var(--hy-ease) both;
}

.hy-system::before,
.hy-system::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--hy-border);
}

.hy-system svg {
	width: 13px;
	height: 13px;
}

.hy-system__text {
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

/* ── کارت محصول ووکامرس ── */

.hy-products {
	display: flex;
	gap: 9px;
	max-width: 100%;
	margin-block-end: 12px;
	padding-block-end: 4px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	animation: hy-fade-up 0.35s var(--hy-ease) both;
}

.hy-products::-webkit-scrollbar {
	display: none;
}

.hy-product {
	flex: none;
	width: 146px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	scroll-snap-align: start;
	border-radius: 14px;
	background: var(--hy-surface);
	border: 1px solid var(--hy-border);
	text-align: start;
	transition: border-color 0.2s ease, transform 0.2s var(--hy-ease), box-shadow 0.2s ease;
}

.hy-product:hover {
	border-color: color-mix(in srgb, var(--hy-accent) 45%, transparent);
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(16, 17, 26, 0.09);
}

.hy[data-hy-theme="dark"] .hy-product:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* ── تصویر ── */

.hy-product__thumb {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--hy-surface-2);
}

.hy-product__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s var(--hy-ease);
}

.hy-product:hover .hy-product__thumb img {
	transform: scale(1.05);
}

/* جانشین تصویر — زیر تصویر واقعی می‌نشیند و اگر فایل نیامد دیده می‌شود */
.hy-product__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, 0.6);
}

.hy-product__thumb img {
	position: relative;
	z-index: 1;
}

.hy-product__ph svg {
	width: 34%;
	height: 34%;
}

.hy-product__off {
	position: absolute;
	inset-block-start: 7px;
	inset-inline-start: 7px;
	padding: 0 7px;
	border-radius: 99px;
	background: var(--hy-danger);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 18px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ── متن ── */

.hy-product__info {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 9px 10px 10px;
}

.hy-product__meta {
	flex: 1;
}

.hy-product__name {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 36px;
}

.hy-product__rate {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-block-start: 4px;
}

.hy-product__stars {
	display: flex;
	gap: 1px;
	color: #f0a63a;
}

.hy-product__stars svg {
	width: 11px;
	height: 11px;
}

.hy-product__stars svg.is-off {
	color: var(--hy-border-strong);
}

.hy-product__count {
	font-size: 10px;
	color: var(--hy-text-faint);
	margin-inline-start: 2px;
}

.hy-product__price {
	display: flex;
	align-items: baseline;
	gap: 3px;
	margin-block-start: 6px;
	white-space: nowrap;
	overflow: hidden;
}

.hy-product__now {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hy-text);
	font-variant-numeric: tabular-nums;
}

.hy-product__unit {
	font-size: 10.5px;
	color: var(--hy-text-muted);
}

.hy-product__was {
	font-size: 10.5px;
	color: var(--hy-text-faint);
	text-decoration: line-through;
	line-height: 1.7;
	white-space: nowrap;
}

.hy-product__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	margin-block-start: 9px;
	padding: 7px;
	border-radius: 9px;
	background: var(--hy-accent-soft);
	color: var(--hy-accent-hover);
	font-size: 11.5px;
	font-weight: 600;
	transition: background 0.18s ease, color 0.18s ease;
}

.hy-product__cta svg {
	width: 13px;
	height: 13px;
}

.hy-product:hover .hy-product__cta {
	background: var(--hy-accent);
	color: var(--hy-on-accent);
}

/* تصویر و متن کارت خودشان پیوند به صفحه محصول‌اند */
.hy a.hy-product__thumb,
.hy a.hy-product__meta {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hy .hy-product__meta:is(a) {
	flex: 1;
}

.hy a.hy-product__meta:focus-visible,
.hy .hy-product__cta:focus-visible {
	outline: 2px solid var(--hy-accent);
	outline-offset: 2px;
	border-radius: 8px;
}

.hy a.hy-product__cta {
	text-decoration: none;
}

.hy .hy-product__cta {
	cursor: pointer;
	font-family: inherit;
}

.hy .hy-product__cta:disabled {
	cursor: progress;
	opacity: 0.75;
}

/* بعد از افزودن: دکمه به «مشاهده سبد» تبدیل می‌شود */
.hy .hy-product__cta.is-done,
.hy-product:hover .hy-product__cta.is-done {
	background: var(--hy-accent);
	color: var(--hy-on-accent);
}

/* ── دکمه‌های گزینه‌ای (پرسش مرحله‌ای) ── */

.hy-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-end: 12px;
	animation: hy-fade-up 0.35s var(--hy-ease) both;
}

.hy-option {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 99px;
	background: var(--hy-surface);
	border: 1px solid var(--hy-border-strong);
	color: var(--hy-text);
	font-size: 12.5px;
	line-height: 1.7;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.hy-option:hover {
	background: var(--hy-accent);
	border-color: var(--hy-accent);
	color: var(--hy-on-accent);
}

.hy-option__swatch {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid var(--hy-border-strong);
}

/* ── پیام تصویری ── */

.hy-image {
	max-width: 84%;
	overflow: hidden;
	border-radius: var(--hy-radius-bubble);
	border: 1px solid var(--hy-border);
	background: var(--hy-surface-2);
	line-height: 0;
}

.hy-image img,
.hy-image svg {
	width: 100%;
	height: auto;
}

.hy-image__cap {
	padding: 7px 12px;
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--hy-text-muted);
	background: var(--hy-surface);
}

.hy-msg--user .hy-image {
	border-color: transparent;
}

/* حالت پردازش تصویر */
.hy-image.is-working::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	animation: hy-shine 1.4s linear infinite;
}

.hy-image {
	position: relative;
}

@keyframes hy-shine {
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

/* ── فرم دریافت اطلاعات تماس ── */

.hy-form {
	width: 84%;
	padding: 14px;
	margin-block-end: 12px;
	border-radius: var(--hy-radius-bubble);
	background: var(--hy-surface-2);
	animation: hy-fade-up 0.35s var(--hy-ease) both;
}

.hy-form__title {
	font-size: 13px;
	font-weight: 600;
	margin-block-end: 10px;
}

.hy-form input {
	width: 100%;
	padding: 8px 12px;
	margin-block-end: 7px;
	border: 1px solid var(--hy-border-strong);
	border-radius: 10px;
	background: var(--hy-surface);
	color: var(--hy-text);
	font: inherit;
	font-size: 13px;
	outline: 0;
}

.hy-form input:focus {
	border-color: var(--hy-accent);
}

.hy-form button {
	width: 100%;
	padding: 9px;
	border-radius: 10px;
	background: var(--hy-accent);
	color: var(--hy-on-accent);
	font-size: 13px;
	font-weight: 600;
}

/* ============================================================
   ۷) پیشنهادهای سریع
   ============================================================ */

.hy-chips {
	display: flex;
	gap: 6px;
	flex: none;
	padding: 0 16px 10px;
	overflow-x: auto;
	scrollbar-width: none;
}

.hy-chips::-webkit-scrollbar {
	display: none;
}

.hy-chips:empty {
	display: none;
}

.hy-chip {
	flex: none;
	padding: 5px 12px;
	font-size: 12px;
	line-height: 1.7;
	white-space: nowrap;
	border-radius: 99px;
	background: var(--hy-surface-2);
	color: var(--hy-text-muted);
	transition: background 0.16s ease, color 0.16s ease;
}

.hy-chip:hover {
	background: var(--hy-accent-soft);
	color: var(--hy-accent-hover);
}

/* ============================================================
   ۸) نوار نوشتن پیام
   ============================================================ */

.hy-composer {
	flex: none;
	display: flex;
	align-items: flex-end;
	gap: 4px;
	padding: 10px 12px;
	border-block-start: 1px solid var(--hy-border);
	background: var(--hy-surface);
}

.hy-field {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	padding: 5px 7px;
	border-radius: var(--hy-radius-input);
	background: var(--hy-surface-2);
	border: 1.5px solid transparent;
	transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.hy-field:focus-within {
	background: var(--hy-surface);
	border-color: var(--hy-accent);
	box-shadow: 0 0 0 3px var(--hy-accent-soft);
}

/* خود textarea خط فوکوس جدا نمی‌گیرد؛ حلقه را ظرفش نشان می‌دهد */
.hy-input:focus,
.hy-input:focus-visible {
	outline: none;
}

.hy-input {
	flex: 1;
	min-width: 0;
	max-height: 104px;
	padding: 4px 7px;
	border: 0;
	outline: 0;
	resize: none;
	background: none;
	color: var(--hy-text);
	font: inherit;
	line-height: 1.6;
	overflow-y: auto;
	scrollbar-width: thin;
}

.hy-input::placeholder {
	color: var(--hy-text-faint);
}

.hy-act {
	flex: none;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: var(--hy-radius-btn);
	color: var(--hy-text-faint);
	transition: background 0.16s ease, color 0.16s ease;
}

.hy-act:hover {
	background: var(--hy-surface-2);
	color: var(--hy-text);
}

.hy-act svg {
	width: 17px;
	height: 17px;
}

.hy-act.is-recording {
	color: var(--hy-danger);
}

.hy-send {
	flex: none;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--hy-accent);
	color: var(--hy-on-accent);
	transition: transform 0.18s var(--hy-ease), background 0.18s ease, opacity 0.18s ease;
}

.hy-send:hover:not(:disabled) {
	background: var(--hy-accent-hover);
	transform: scale(1.06);
}

.hy-send:disabled {
	background: var(--hy-surface-3);
	color: var(--hy-text-faint);
	cursor: not-allowed;
}

.hy-send svg {
	width: 17px;
	height: 17px;
}

/* ── پابرگ ── */

.hy-footer {
	flex: none;
	padding: 0 16px 10px;
	text-align: center;
	font-size: 11px;
	line-height: 1.6;
	color: var(--hy-text-muted);
}

.hy-footer a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.hy-footer a:hover {
	color: var(--hy-accent);
}

/* ============================================================
   ۹) موبایل
   ============================================================ */

@media (max-width: 480px) {
	.hy[data-hy-position] {
		--hy-offset-x: var(--hy-offset-mx, 16px);
		--hy-offset-y: var(--hy-offset-my, 16px);
	}

	.hy:not(.hy--inline) .hy-panel {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
		border: 0;
		transform-origin: center bottom;
		padding-block-start: env(safe-area-inset-top);
		padding-block-end: env(safe-area-inset-bottom);
	}

	.hy-bubble,
	.hy-image,
	.hy-form {
		max-width: 90%;
	}

	.hy.is-open .hy-launcher-wrap {
		display: none;
	}

	/* هدف لمسی بزرگ‌تر روی صفحه لمسی */
	.hy-iconbtn,
	.hy-send {
		width: 44px;
		height: 44px;
	}

	.hy-act {
		width: 38px;
		height: 38px;
	}
}

/* ============================================================
   ۱۰) دسترسی‌پذیری
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.hy *,
	.hy *::before,
	.hy *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   ۱۱) اجزای تعاملی افزوده
   ============================================================ */

/* ── قفل اسکرول صفحه هنگام باز بودن ویجت تمام‌صفحه ── */

html.hy-lock,
html.hy-lock body {
	overflow: hidden;
	overscroll-behavior: none;
}

/* ── دکمه پرش به آخرین پیام ── */

.hy-jump {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 8px);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hy-surface);
	border: 1px solid var(--hy-border-strong);
	color: var(--hy-text-muted);
	box-shadow: 0 3px 12px rgba(16, 17, 26, 0.14);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s var(--hy-ease), transform 0.28s var(--hy-ease);
	z-index: 3;
}

.hy.has-jump .hy-jump {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -14px);
}

.hy-jump:hover { color: var(--hy-accent); border-color: var(--hy-accent); }
.hy-jump svg { width: 15px; height: 15px; }

/* بدنه باید مرجع موقعیت دکمه پرش باشد */
.hy-main {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* ── زمینه ناحیه گفتگو ── */

.hy[data-hy-body="tint"] .hy-body {
	background: linear-gradient(var(--hy-accent-soft), var(--hy-accent-soft)), var(--hy-surface);
}

.hy[data-hy-body="dots"] .hy-body {
	background-color: var(--hy-surface);
	background-image: radial-gradient(var(--hy-border-strong) 1px, transparent 1.3px);
	background-size: 18px 18px;
}

.hy[data-hy-body="gradient"] .hy-body {
	background: linear-gradient(180deg, var(--hy-accent-soft) 0%, var(--hy-surface) 60%), var(--hy-surface);
	background-attachment: local;
}

.hy[data-hy-body="tint"] .hy-msg--bot .hy-bubble,
.hy[data-hy-body="gradient"] .hy-msg--bot .hy-bubble {
	box-shadow: 0 1px 2px rgba(16, 17, 26, 0.05);
}

/* نمونه کوچک ایستا — برای گالری تم‌های صفحه گفتگو */
.hy.hy--mini {
	position: relative;
	inset: auto;
	z-index: auto;
	display: block;
	font-size: 11px;
	line-height: 1.7;
}

.hy.hy--mini .hy-panel {
	position: relative;
	inset: auto;
	width: 100%;
	height: 156px;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: none;
	box-shadow: 0 6px 18px rgba(16, 17, 26, 0.08);
	border-radius: calc(var(--hy-radius) * 0.6);
}

.hy.hy--mini .hy-header { padding: 8px 10px; gap: 6px; }
.hy.hy--mini .hy-header__title { font-size: 11.5px; }
.hy.hy--mini .hy-header__subtitle { font-size: 9.5px; }
.hy.hy--mini .hy-body { padding: 10px; overflow: hidden; scrollbar-width: none; }
.hy.hy--mini .hy-msg { margin-block-end: 6px; }
.hy.hy--mini .hy-bubble { padding: 5px 10px; font-size: 10.5px; border-radius: calc(var(--hy-radius-bubble) * 0.7); }
.hy.hy--mini .hy-msg__meta { display: none; }

/* ── پیام صوتی ── */

.hy-voice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 168px;
}

.hy-voice__play {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: currentColor;
}

.hy-voice__play svg { width: 13px; height: 13px; }
.hy-msg--user .hy-voice__play svg { color: var(--hy-user-bg); }
.hy-msg--bot .hy-voice__play svg { color: var(--hy-bot-bg); }

.hy-wave {
	display: flex;
	align-items: center;
	gap: 2.5px;
	flex: 1;
	height: 22px;
}

.hy-wave span {
	flex: 1;
	min-width: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.45;
}

.hy-voice__time {
	flex: none;
	font-size: 11px;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

/* ── نوار ضبط صدا ── */

.hy-recorder {
	display: none;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	padding: 5px 14px;
	min-height: 43px;
	border: 1.5px solid transparent;
	border-radius: var(--hy-radius-input);
	background: var(--hy-surface-2);
}

.hy.is-recording .hy-recorder { display: flex; }
.hy.is-recording .hy-field { display: none; }

.hy-recorder__dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hy-danger);
	animation: hy-rec 1.2s ease-in-out infinite;
}

@keyframes hy-rec {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.hy-recorder__time {
	flex: none;
	font-size: 12.5px;
	color: var(--hy-text);
	font-variant-numeric: tabular-nums;
}

.hy-recorder__wave {
	display: flex;
	align-items: center;
	gap: 2.5px;
	flex: 1;
	height: 20px;
	overflow: hidden;
}

.hy-recorder__wave span {
	flex: none;
	width: 2.5px;
	border-radius: 2px;
	background: var(--hy-text-faint);
}

.hy-recorder__cancel {
	flex: none;
	font-size: 12.5px;
	color: var(--hy-text-muted);
	transition: color 0.16s ease;
}

.hy-recorder__cancel:hover { color: var(--hy-danger); }

/* ── دکمه توقف پاسخ ── */

.hy-send.is-stop { background: var(--hy-surface-3); color: var(--hy-text); }
.hy-send.is-stop:hover { background: var(--hy-border-strong); }

/* ── تلاش دوباره ── */

.hy-retry {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: 8px;
	padding: 5px 12px;
	border-radius: 99px;
	border: 1px solid var(--hy-border-strong);
	color: var(--hy-text-muted);
	font-size: 12px;
	transition: color 0.16s ease, border-color 0.16s ease;
}

.hy-retry:hover { color: var(--hy-accent); border-color: var(--hy-accent); }
.hy-retry svg { width: 13px; height: 13px; }

/* ── تصویر انتخاب‌شده ── */

.hy-file { display: none; }

.hy-image img { display: block; width: 100%; }

/* ── موبایل ── */

@media (max-width: 480px) {
	.hy-voice { min-width: 150px; }
}

/* ══════════════════════════════════════════════════════════════
 * پیشنهاد گفتگو با اپراتور
 * ══════════════════════════════════════════════════════════════ */

.hy-offer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-block-start: 4px;
}

.hy-offer__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: var(--hy-radius-btn);
	border: 1px solid var(--hy-accent);
	background: var(--hy-accent-soft);
	color: var(--hy-accent);
	font-size: calc(var(--hy-size) - 0.5px);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--hy-dur) var(--hy-ease), color var(--hy-dur) var(--hy-ease);
}

.hy-offer__btn:hover {
	background: var(--hy-accent);
	color: var(--hy-on-accent);
}

.hy-offer__btn svg { width: 16px; height: 16px; }

.hy-offer__hint {
	font-size: calc(var(--hy-size) - 2px);
	color: var(--hy-text-muted);
	line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
 * صفحک ایموجی
 * ══════════════════════════════════════════════════════════════ */

.hy-emoji {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
	padding: 8px;
	margin-block-start: 8px;
	border: 1px solid var(--hy-border);
	border-radius: var(--hy-radius-input);
	background: var(--hy-surface-2);
	max-height: 148px;
	overflow-y: auto;
}

.hy-emoji__item {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 7px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	background: none;
	border: 0;
	transition: background 0.14s ease, transform 0.14s ease;
}

.hy-emoji__item:hover {
	background: var(--hy-accent-soft);
	transform: scale(1.12);
}

.hy-emoji__item:focus-visible {
	outline: 2px solid var(--hy-accent);
	outline-offset: 1px;
}

/* دکمه فعال ایموجی */
.hy-act.is-open { color: var(--hy-accent); }

/* ══════════════════════════════════════════════════════════════
 * حالت گفتگوی زنده
 * ══════════════════════════════════════════════════════════════ */

.hy.is-human .hy-header__subtitle { color: var(--hy-online); }

.hy-system svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 480px) {
	.hy-emoji { grid-template-columns: repeat(6, 1fr); }
}