/* فونت‌های فارسی معروف - در صورت وجود فایل فونت در پوشه‌ی public/fonts بارگذاری می‌شوند */
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IRANSans'; src: url('../fonts/IRANSans-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Shabnam'; src: url('../fonts/Shabnam.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Samim'; src: url('../fonts/Samim.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'YekanBakh'; src: url('../fonts/YekanBakh-Regular.woff2') format('woff2'); font-display: swap; }

.robatok-widget { direction: rtl; text-align: right; font-family: 'Vazirmatn', Tahoma, sans-serif; position: relative; z-index: 99999; }
.robatok-widget[data-font="vazirmatn"] .robatok-box { font-family: 'Vazirmatn', Tahoma, sans-serif; }
.robatok-widget[data-font="iransans"] .robatok-box { font-family: 'IRANSans', Tahoma, sans-serif; }
.robatok-widget[data-font="shabnam"]  .robatok-box { font-family: 'Shabnam', Tahoma, sans-serif; }
.robatok-widget[data-font="samim"]    .robatok-box { font-family: 'Samim', Tahoma, sans-serif; }
.robatok-widget[data-font="yekan"]    .robatok-box { font-family: 'YekanBakh', Tahoma, sans-serif; }

.robatok-box {
	display: flex;
	flex-direction: column;
	position: relative;
	border: 1px solid #e0e0e0;
	border-radius: 16px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow: 0 6px 24px rgba(0,0,0,.12);
	max-width: 100%;
}

/* لایه‌ی جداگانه برای تصویر پس‌زمینه، تا بتوان شفافیتش را مستقل از متن پیام‌ها تنظیم کرد */
.robatok-bg-image-layer {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	pointer-events: none; z-index: 0;
}

/* سبک «شیشه‌ای» (Glassmorphism) */
.robatok-box-style-glass {
	background-color: rgba(255,255,255,.35) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.4);
}
.robatok-box-style-glass .robatok-messages,
.robatok-box-style-glass .robatok-input-area,
.robatok-box-style-glass .robatok-lead-form { position: relative; z-index: 1; }
.robatok-box-style-glass .robatok-msg-bot { background: rgba(255,255,255,.55); backdrop-filter: blur(6px); }

/* سبک «بدون جعبه» (کاملاً شفاف، بدون کادر/سایه) */
.robatok-box-style-none {
	background: transparent !important; border: none !important; box-shadow: none !important;
}
.robatok-box-style-none .robatok-messages,
.robatok-box-style-none .robatok-input-area,
.robatok-box-style-none .robatok-lead-form { position: relative; z-index: 1; }
.robatok-box-style-none .robatok-msg-bot { background: rgba(255,255,255,.75); }

.robatok-messages, .robatok-input-area, .robatok-lead-form, .robatok-header { position: relative; z-index: 1; }

/* افکت‌های گرافیکی متحرک پس‌زمینه (ستاره/شکل/باران/برف) - فقط CSS خالص، بدون JS سنگین */
.robatok-fx-layer {
	position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.robatok-fx-item { position: absolute; top: -20px; border-radius: 50%; }

.robatok-fx-stars .robatok-fx-item {
	background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.8);
	animation-name: robatok-fx-twinkle-fall; animation-timing-function: linear; animation-iteration-count: infinite;
	opacity: .8;
}
@keyframes robatok-fx-twinkle-fall {
	0% { transform: translateY(0) scale(.6); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: .7; }
	100% { transform: translateY(var(--robatok-fx-distance, 600px)) scale(1); opacity: 0; }
}

.robatok-fx-shapes .robatok-fx-item {
	background: transparent; border: 2px solid rgba(108,92,231,.35);
	animation-name: robatok-fx-float-rotate; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.robatok-fx-shapes .robatok-fx-shape-circle { border-radius: 50%; }
.robatok-fx-shapes .robatok-fx-shape-square { border-radius: 4px; }
@keyframes robatok-fx-float-rotate {
	0% { transform: translateY(0) rotate(0deg); opacity: .5; }
	50% { transform: translateY(-40px) rotate(180deg); opacity: .9; }
	100% { transform: translateY(0) rotate(360deg); opacity: .5; }
}

.robatok-fx-rain .robatok-fx-item {
	width: 2px !important; height: 16px !important; border-radius: 2px;
	background: linear-gradient(180deg, rgba(120,170,255,0), rgba(120,170,255,.6));
	animation-name: robatok-fx-rain-fall; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes robatok-fx-rain-fall {
	0% { transform: translateY(0); opacity: 0; }
	10% { opacity: 1; }
	100% { transform: translateY(var(--robatok-fx-distance, 600px)); opacity: .3; }
}

.robatok-fx-snow .robatok-fx-item {
	background: #fff; box-shadow: 0 0 3px rgba(255,255,255,.9);
	animation-name: robatok-fx-snow-fall; animation-timing-function: linear; animation-iteration-count: infinite;
	opacity: .9;
}
@keyframes robatok-fx-snow-fall {
	0% { transform: translateY(0) translateX(0); opacity: 0; }
	10% { opacity: .9; }
	50% { transform: translateY(calc(var(--robatok-fx-distance, 600px) * .5)) translateX(12px); }
	100% { transform: translateY(var(--robatok-fx-distance, 600px)) translateX(-8px); opacity: .2; }
}

.robatok-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #fff; }
.robatok-header-social { display: flex; gap: 6px; align-items: center; }
.robatok-social-icon {
	font-size: 15px; text-decoration: none; opacity: .9;
	line-height: 1; transition: opacity .15s ease, transform .15s ease;
}
.robatok-social-icon:hover { opacity: 1; transform: scale(1.15); }
.robatok-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.robatok-title { font-weight: bold; flex: 1; }
.robatok-close { background: transparent; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }

.robatok-lead-form { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.robatok-lead-title { font-size: 13px; color: #666; margin: 0 0 4px; }
.robatok-privacy-notice { font-size: 11px; color: #888; margin: 2px 0 8px; line-height: 1.6; }
.robatok-lead-form input {
	padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; font-family: inherit; font-size: 14px;
}
.robatok-lead-submit {
	padding: 10px; border: none; border-radius: 8px; background: #6C5CE7; color: #fff; cursor: pointer; font-family: inherit;
}

.robatok-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.robatok-msg-row { display: flex; align-items: flex-end; gap: 6px; max-width: 85%; }
.robatok-row-bot  { align-self: flex-start; }
.robatok-row-user { align-self: flex-end; }
.robatok-msg-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.robatok-msg { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; max-width: 100%; }
.robatok-msg-bot  { background: #f1f1f7; border-bottom-left-radius: 4px; }
.robatok-msg-user { background: #6C5CE7; color: #fff; border-bottom-right-radius: 4px; }

.robatok-articles-wrap { display: flex; flex-direction: column; gap: 6px; background: transparent !important; padding: 0 !important; }
.robatok-article-link {
	display: block; padding: 8px 12px; background: #f1f1f7; border-radius: 10px;
	color: #4437c9; font-size: 13px; text-decoration: none; transition: background .15s ease;
}
.robatok-article-link:hover { background: #e5e0fb; }

.robatok-product-card {
	display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #eee;
	border-radius: 10px; padding: 8px; margin-top: 6px; max-width: 260px;
}
.robatok-product-card img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.robatok-product-info { flex: 1; font-size: 12px; }
.robatok-product-info .price { color: #6C5CE7; font-weight: bold; display: block; margin-top: 2px; }
.robatok-product-card a.robatok-product-btn {
	display: inline-block; margin-top: 4px; padding: 4px 10px; background: #6C5CE7; color: #fff;
	border-radius: 6px; font-size: 11px; text-decoration: none;
}

.robatok-support-offer { display: flex; gap: 8px; margin-top: 6px; }
.robatok-support-offer button {
	padding: 6px 14px; border-radius: 8px; border: 1px solid #6C5CE7; background: #fff; color: #6C5CE7; cursor: pointer; font-family: inherit;
}
.robatok-support-offer button.robatok-yes { background: #6C5CE7; color: #fff; }

.robatok-social-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.robatok-social-links a {
	padding: 6px 12px; border-radius: 8px; background: #f1f1f7; color: #222; font-size: 12px; text-decoration: none;
}

.robatok-input-area { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #eee; }
.robatok-input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; font-family: inherit; font-size: 14px; }
.robatok-send-btn {
	padding: 10px 18px; border: none; border-radius: 8px; color: #fff; cursor: pointer; font-family: inherit;
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.robatok-send-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.robatok-send-btn:active { transform: translateY(0); filter: brightness(.95); }

.robatok-attach-btn {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
	border: 1px solid #ddd; background: #fff; cursor: pointer; font-size: 16px;
	transition: background .15s ease, transform .15s ease;
}
.robatok-attach-btn:hover { background: #f4f2ff; transform: scale(1.05); }
.robatok-attach-btn input[type="file"] { display: none; }

.robatok-image-preview-area {
	display: none; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #eee;
}
.robatok-image-preview-thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.robatok-image-preview-remove {
	border: none; background: #eee; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; line-height: 1;
}
.robatok-msg-with-image { display: flex; flex-direction: column; gap: 6px; }
.robatok-msg a { color: inherit; text-decoration: underline; word-break: break-all; }
.robatok-msg-user a { color: #fff; }
.robatok-sent-image { max-width: 100%; border-radius: 10px; display: block; }

.robatok-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 14px; }
.robatok-typing span { width: 6px; height: 6px; border-radius: 50%; background: #aaa; animation: robatok-bounce 1s infinite; }
.robatok-typing span:nth-child(2) { animation-delay: .15s; }
.robatok-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes robatok-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* حالت شناور (Floating) */
.robatok-mode-floating .robatok-box {
	position: fixed; bottom: 90px; left: 24px; display: none; z-index: 99999;
}
.robatok-mode-floating.robatok-open .robatok-box { display: flex; }
.robatok-fab {
	position: fixed; bottom: 24px; left: 24px; width: 60px; height: 60px; border-radius: 50%;
	border: none; background: #6C5CE7; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer;
	display: flex; align-items: center; justify-content: center; z-index: 99998; padding: 0;
}
.robatok-fab img { width: 60%; height: 60%; object-fit: contain; }

/* ریسپانسیو موبایل */
@media ( max-width: 480px ) {
	.robatok-mode-floating .robatok-box {
		bottom: 0; left: 0; right: 0; width: 100% !important; height: 100% !important;
		border-radius: 0; max-height: 100vh;
	}
	.robatok-fab { bottom: 16px; left: 16px; width: 54px; height: 54px; }
}

.robatok-mode-inline .robatok-box { position: relative; max-width: 100%; }
@media ( max-width: 480px ) {
	.robatok-mode-inline .robatok-box { width: 100% !important; height: 480px !important; }
}