/* =========================================================
   Ticketing System Pro — Chat UI Stylesheet (RTL)
   Design tokens:
   primary  : var(--ts-accent)   (تنظیم‌پذیر از پنل مدیریت)
   surface  : #FFFFFF
   backdrop : #F3F5F9
   border   : #E4E7F1
   text     : #1B1F3B / muted #6E7391
   success  : #1FA97D   danger : #E1483D   warning : #E08A2C
   ========================================================= */

.ts-wrap {
	--ts-accent: #3454D1;
	--ts-accent-dark: #263C9E;
	--ts-bg: #F3F5F9;
	--ts-surface: #FFFFFF;
	--ts-border: #E4E7F1;
	--ts-text: #1B1F3B;
	--ts-muted: #6E7391;
	--ts-success: #1FA97D;
	--ts-danger: #E1483D;
	--ts-warning: #DB8A22;

	direction: rtl;
	font-family: IRANSansX, Tahoma, "Segoe UI", "IRANSans", "Vazirmatn", sans-serif;
	color: var(--ts-text);
	background: var(--ts-bg);
	border: 1px solid var(--ts-border);
	border-radius: 5px;
	display: flex;
	overflow: hidden;
	height: 78vh;
	min-height: 520px;
	margin: 24px auto;
	box-shadow: 0 10px 30px rgba(27, 31, 59, 0.06);
}

.ts-wrap * { box-sizing: border-box; }

.ts-guest-notice {
	display: block;
	height: auto;
	padding: 24px;
	text-align: center;
	background: var(--ts-surface);
	color: var(--ts-muted);
}

/* ---------- ستون‌ها ---------- */

.ts-col { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.ts-col-products {
	width: 320px;
	flex: 0 0 320px;
	background: var(--ts-surface);
	border-left: 1px solid var(--ts-border);
}

.ts-col-chat {
	flex: 1 1 auto;
	background: var(--ts-bg);
	position: relative;
	min-width: 0;
}

.ts-col-chat-full { flex: 1 1 100%; }

.ts-col-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--ts-border);
	background: var(--ts-surface);
	flex: 0 0 auto;
}

.ts-col-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ts-text);
	flex: 1;
}

.ts-btn-icon {
	background: var(--ts-bg);
	border: 1px solid var(--ts-border);
	width: 32px;
	height: 32px;
	border-radius: 10px;
	font-size: 16px;
	cursor: pointer;
	color: var(--ts-muted);
	transform: rotate(180deg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.ts-btn-icon:hover { background: var(--ts-border); }

/* ---------- لیست محصولات ---------- */

.ts-products-list { overflow-y: auto; flex: 1 1 auto; padding: 10px; }

.ts-loading, .ts-empty-mini {
	padding: 20px;
	text-align: center;
	color: var(--ts-muted);
	font-size: 13px;
}

.ts-product-card {
	position: relative;
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: 14px;
	padding: 12px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.ts-product-card:hover { border-color: var(--ts-accent, #3454D1); box-shadow: 0 4px 14px rgba(52,84,209,.10); }
.ts-product-card.is-active { border-color: var(--ts-accent, #3454D1); background: color-mix(in srgb, var(--ts-accent, #3454D1) 6%, white); }

.ts-product-thumb {
	width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
	background: var(--ts-bg); flex: 0 0 auto; border: 1px solid var(--ts-border);
}

.ts-product-info { flex: 1; min-width: 0; }

.ts-product-name {
	font-size: 13.5px; font-weight: 700; color: var(--ts-text);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	margin-bottom: 6px;
}

.ts-product-status-row {
	display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap;
}

.ts-expiry-chip {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11px; font-weight: 700; line-height: 1.4;
	padding: 3px 10px; border-radius: 20px;
	font-variant-numeric: tabular-nums;
	background: rgba(31,169,125,.10); color: var(--ts-success);
}
.ts-expiry-chip.is-warning { background: rgba(219,138,34,.12); color: var(--ts-warning); }
.ts-expiry-chip.is-danger  { background: rgba(225,72,61,.12); color: var(--ts-danger); }
.ts-expiry-chip.is-expired { background: #EEE; color: #9AA0BB; }
.ts-expiry-chip.is-unlimited { background: rgba(52,84,209,.10); color: var(--ts-accent-dark); }

.ts-open-count {
	display: inline-flex; align-items: center;
	padding: 3px 10px; border-radius: 20px; line-height: 1.4;
	font-size: 11px; font-weight: 700;
	background: rgba(52,84,209,.10); color: var(--ts-accent-dark, #263C9E);
}
.ts-closed-count {
	display: inline-flex; align-items: center;
	padding: 3px 10px; border-radius: 20px; line-height: 1.4;
	font-size: 11px; font-weight: 700;
	background: #EEE; color: #8B8FA8;
}

.ts-btn-buy-again {
	display: inline-flex; align-items: center;
	padding: 3px 10px; border-radius: 20px; line-height: 1.4;
	background: var(--ts-accent, #3454D1); color: #fff !important; font-size: 11px; font-weight: 700;
	text-decoration: none !important;
}
.ts-btn-buy-again:hover { opacity: .9; }

/* ---------- حالت خالی ---------- */

.ts-empty-state {
	height: 100%; display: flex; flex-direction: column; align-items: center;
	justify-content: center; color: var(--ts-muted); text-align: center; padding: 30px;
}
.ts-empty-icon { font-size: 40px; margin-bottom: 10px; opacity: .7; }

/* ---------- لیست تیکت‌های یک محصول ---------- */

.ts-product-tickets { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.ts-tickets-header .ts-col-title { flex: 1; }

.ts-tickets-list { overflow-y: auto; padding: 14px; flex: 1; }

.ts-ticket-row {
	background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: 12px;
	padding: 14px; margin-bottom: 10px; cursor: pointer; transition: box-shadow .15s ease;
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ts-ticket-row:hover { box-shadow: 0 4px 14px rgba(27,31,59,.08); }
.ts-ticket-row-subject { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.ts-ticket-row-meta { font-size: 11.5px; color: var(--ts-muted); }
.ts-ticket-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ts-ticket-row-side .ts-btn-small { font-size: 11px; padding: 4px 10px; }

.ts-rate-inline-prompt {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: rgba(52,84,209,.06); border-top: 1px solid var(--ts-border, #E4E7F1);
	padding: 10px 16px; font-size: 12.5px; color: var(--ts-text, #1B1F3B);
}
.ts-rate-inline-prompt .ts-btn { padding: 6px 16px; font-size: 12px; flex: 0 0 auto; }

.ts-status-badge {
	font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
	background: rgba(31,169,125,.12); color: var(--ts-success); white-space: nowrap;
}
.ts-status-badge.is-closed { background: #EEE; color: #8B8FA8; }

/* ---------- فرم تیکت جدید ---------- */

.ts-new-ticket-form { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.ts-form-body { padding: 18px 20px; overflow-y: auto; flex: 1; }

.ts-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ts-muted); margin: 14px 0 6px; }
.ts-label:first-child { margin-top: 0; }

.ts-input, .ts-textarea {
	width: 100%; border: 1px solid var(--ts-border); border-radius: 10px;
	padding: 10px 12px; font-size: 13.5px; font-family: inherit; color: var(--ts-text);
	background: var(--ts-surface); resize: vertical; box-sizing: border-box;
}
.ts-input:focus, .ts-textarea:focus { outline: none; border-color: var(--ts-accent, #3454D1); box-shadow: 0 0 0 3px rgba(52,84,209,.12); }

.ts-file-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ts-accent-dark); }
.ts-file-input { margin-top: 6px; }
.ts-file-preview:empty { display: none; }
.ts-file-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-file-thumb {
	position: relative; width: 64px; height: 64px; margin-top: 8px;
	border-radius: 8px; overflow: visible; background: var(--ts-bg, #F3F5F9);
}
.ts-file-thumb img {
	width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
	border: 1px solid var(--ts-border, #E4E7F1); cursor: zoom-in; display: block;
}
.ts-file-remove {
	position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--ts-danger, #E1483D); color: #fff; font-size: 13px; line-height: 20px;
	text-align: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

.ts-btn {
	border: none; border-radius: 10px; padding: 10px 18px; font-size: 13.5px; font-weight: 700;
	cursor: pointer; font-family: inherit; transition: opacity .15s ease, transform .05s ease;
}
.ts-btn:active { transform: scale(.98); }
.ts-btn-accent { background: var(--ts-accent, #3454D1); color: #fff; }
.ts-btn-accent:hover { opacity: .92; }
.ts-btn-danger { background: #E1483D; color: #fff; }
.ts-btn-danger:hover { opacity: .92; }
.ts-btn-block { width: 100%; margin-top: 18px; padding: 12px; font-size: 14px; }
.ts-btn-danger-outline { background: transparent; border: 1px solid var(--ts-danger); color: var(--ts-danger); }
.ts-btn-danger-outline:hover { background: rgba(225,72,61,.08); }
.ts-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- گفتگو / چت ---------- */

.ts-chat-thread { height: 100%; display: flex; flex-direction: column; min-height: 0; }

.ts-chat-header-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ts-chat-header .ts-status-badge { align-self: flex-start; }

.ts-messages {
	flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px;
	background:
		radial-gradient(circle at 10% 10%, rgba(52,84,209,.035), transparent 40%),
		radial-gradient(circle at 90% 90%, rgba(52,84,209,.035), transparent 40%);
}

.ts-msg { max-width: 68%; display: flex; flex-direction: column; gap: 4px; }
.ts-msg-user { align-self: flex-start; }
.ts-msg-admin { align-self: flex-end; }

.ts-msg-bubble {
	padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.9;
	box-shadow: 0 2px 6px rgba(27,31,59,.05);
}
.ts-msg-user .ts-msg-bubble { background: var(--ts-surface); border: 1px solid var(--ts-border); border-bottom-left-radius: 4px; }
.ts-msg-admin .ts-msg-bubble { background: var(--ts-accent, #3454D1); color: #fff; border-bottom-right-radius: 4px; }

.ts-msg-bubble a { word-break: break-all; overflow-wrap: anywhere; text-decoration: underline; }
.ts-msg-user .ts-msg-bubble a { color: var(--ts-accent-dark, #263C9E); }
.ts-msg-admin .ts-msg-bubble a { color: #fff; text-decoration-color: rgba(255,255,255,.65); }
.ts-msg-bubble a:hover { text-decoration-thickness: 2px; }



.ts-msg-meta {
	font-size: 10.5px; color: var(--ts-muted); padding: 0 4px;
	display: flex; align-items: center; gap: 6px;
}
.ts-msg-admin .ts-msg-meta { flex-direction: row-reverse; }

.ts-msg-reply-btn {
	border: none; background: transparent; color: var(--ts-muted); cursor: pointer;
	font-size: 12px; padding: 0 2px; opacity: .55; transition: opacity .12s ease;
	line-height: 1;
}
.ts-msg:hover .ts-msg-reply-btn, .ts-msg-reply-btn:focus { opacity: 1; }
.ts-msg-reply-btn:hover { color: var(--ts-accent, #3454D1); }

/* پیش‌نمایش پیام نقل‌قول‌شده داخل حباب */
.ts-quoted-reply {
	border-right: 3px solid var(--ts-accent, #3454D1); background: rgba(0,0,0,.04);
	border-radius: 8px; padding: 5px 8px; margin-bottom: 6px; cursor: pointer; font-size: 12px;
}
.ts-msg-admin .ts-quoted-reply { border-right: none; border-left: 3px solid rgba(255,255,255,.6); background: rgba(255,255,255,.12); }
.ts-quoted-reply-sender { display: block; font-weight: 700; margin-bottom: 2px; }
.ts-quoted-reply-snippet { display: block; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ts-msg.is-highlighted .ts-msg-bubble { animation: ts-highlight-pulse 1.5s ease; }
@keyframes ts-highlight-pulse {
	0% { box-shadow: 0 0 0 3px rgba(52,84,209,.5); }
	100% { box-shadow: none; }
}

/* نوار پیش‌نمایش «در حال پاسخ به...» بالای کامپوزر */
.ts-reply-quote-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--ts-bg, #F3F5F9); border-top: 1px solid var(--ts-border, #E4E7F1);
	padding: 8px 16px; font-size: 12px;
}
.ts-reply-quote-content { border-right: 3px solid var(--ts-accent, #3454D1); padding-right: 8px; overflow: hidden; }
.ts-reply-quote-sender { display: block; font-weight: 700; color: var(--ts-accent-dark, #263C9E); }
.ts-reply-quote-snippet { display: block; color: var(--ts-muted, #6E7391); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-reply-quote-cancel {
	border: none; background: transparent; color: var(--ts-muted, #6E7391); font-size: 20px; cursor: pointer;
	flex: 0 0 auto; line-height: 1;
}
.ts-reply-quote-cancel:hover { color: var(--ts-danger, #E1483D); }

.ts-composer {
	display: flex; align-items: center; gap: 8px; padding: 12px 16px;
	border-top: 1px solid var(--ts-border); background: var(--ts-surface); flex: 0 0 auto;
}
.ts-composer-input {
	flex: 1; border: 1px solid var(--ts-border); border-radius: 30px; padding: 10px 16px;
	font-size: 13.5px; font-family: inherit; background: var(--ts-bg);
}
.ts-composer-input:focus { outline: none; border-color: var(--ts-accent, #3454D1); }
.ts-composer-attach {
	width: 38px; height: 38px; border-radius: 50%; background: var(--ts-bg); border: 1px solid var(--ts-border);
	display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; font-size: 15px;
}
.ts-composer-send {
	width: 40px; height: 40px; border-radius: 50%; background: var(--ts-accent, #3454D1); color: #fff; border: none;
	display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; font-size: 16px;
	transform: scaleX(-1);
}
.ts-composer-send:hover { opacity: .9; }
.ts-composer-send[disabled] { opacity: .5; cursor: not-allowed; }

.ts-reply-file-preview { padding: 0 16px 10px; }
.ts-reply-file-preview:empty { padding: 0; }

.ts-locked-notice {
	margin: 0 16px 12px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px;
	background: rgba(225,72,61,.08); color: var(--ts-danger); text-align: center;
}

.ts-toast {
	position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
	background: var(--ts-text, #1B1F3B); color: #fff; padding: 10px 20px; border-radius: 30px;
	font-size: 13px; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.ts-toast.is-error { background: var(--ts-danger, #E1483D); }

/* ---------- ریسپانسیو ---------- */

@media (max-width: 780px) {
	.ts-wrap { flex-direction: column; height: 88vh; margin: 12px; border-radius: 5px; }
	.ts-col-products { width: 100%; flex: 0 0 auto; max-height: 40%; border-left: none; border-bottom: 1px solid var(--ts-border); }
	.ts-col-chat { flex: 1 1 auto; }
	.ts-msg { max-width: 84%; }
}

/* ---------- پنل مدیریت ---------- */

.ts-admin-wrap .ts-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.ts-badge-open { background: rgba(31,169,125,.12); color: #1FA97D; }
.ts-badge-closed { background: #EEE; color: #8B8FA8; }
.ts-admin-chat-wrap { height: 68vh; }

/* =========================================================
   افزودنی‌های نسخه ۲: چند پیوست، اعلان‌ها، عملیات دسته‌جمعی،
   وضعیت‌های دقیق‌تر تیکت، ایجاد تیکت توسط مدیر
   ========================================================= */

/* اسپینر لودینگ */
.ts-spinner-row {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 24px; color: var(--ts-muted); font-size: 13px;
}
.ts-spinner {
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid var(--ts-border); border-top-color: var(--ts-accent, #3454D1);
	animation: ts-spin 0.7s linear infinite; display: inline-block;
}
@keyframes ts-spin { to { transform: rotate(360deg); } }

/* نشان تعداد خوانده‌نشده */
.ts-badge-dot {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px;
	background: var(--ts-danger, #E1483D); color: #fff; font-size: 10.5px; font-weight: 700;
	vertical-align: middle;
}
.ts-col-header .ts-badge-dot { margin-right: 6px; }

/* وضعیت «پاسخ داده شده» */
.ts-status-badge.is-answered { background: rgba(52,84,209,.12); color: var(--ts-accent-dark, #263C9E); }

/* دکمه با حاشیه رنگی (بازکردن مجدد) */
.ts-btn-accent-outline {
	background: transparent; border: 1px solid var(--ts-accent, #3454D1); color: var(--ts-accent, #3454D1);
}
.ts-btn-accent-outline:hover { background: rgba(52,84,209,.08); }

/* گالری تصاویر پیوست در حباب پیام (چند تصویر) */
.ts-msg-attachments {
	display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.ts-msg-attachments img {
	width: 90px; height: 90px; object-fit: cover; border-radius: 10px; cursor: zoom-in;
	border: 1px solid rgba(0,0,0,.06);
}

/* لایت‌باکس بزرگ‌نمایی تصویر */
.ts-lightbox {
	position: fixed; inset: 0; background: rgba(15,17,32,.86); z-index: 99999;
	display: flex; align-items: center; justify-content: center; cursor: zoom-out;
	animation: ts-fade-in .12s ease;
}
@keyframes ts-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ts-lightbox img { max-width: 90vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.ts-lightbox-close {
	position: absolute; top: 18px; left: 24px; color: #fff; font-size: 30px; cursor: pointer; line-height: 1;
}

/* نشان تعداد پیام خوانده‌نشده روی کارت محصول */
.ts-product-unread-badge {
	position: absolute; top: -6px; right: -6px; box-shadow: 0 2px 6px rgba(225,72,61,.4);
}

/* تکست‌اریای کامپوزر (چند خطی) */
.ts-composer-input {
	resize: none; min-height: 40px; max-height: 140px; line-height: 1.6; padding-top: 9px; padding-bottom: 9px;
	font-family: inherit;
}

/* نوار عملیات دسته‌جمعی مدیریت */
.ts-bulk-bar { margin: 10px 0; display: flex; gap: 8px; }

/* نشان‌های وضعیت جدول مدیریت */
.ts-badge-awaiting { background: rgba(219,138,34,.12); color: #DB8A22; }
.ts-badge-answered { background: rgba(52,84,209,.12); color: #263C9E; }

/* شمارشگر روی منوی مدیریت */
.ts-menu-count {
	display: inline-block; background: #E1483D; color: #fff; border-radius: 20px;
	font-size: 11px; padding: 1px 7px; margin-right: 4px; font-weight: 700;
}

/* اتوکامپلیت جستجوی مشتری در صفحه ایجاد تیکت مدیر */
.ts-autocomplete-results {
	position: relative; border: 1px solid var(--ts-border); border-radius: 10px; margin-top: 4px;
	max-height: 220px; overflow-y: auto; display: none; background: #fff; z-index: 10;
}
.ts-autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: 13px; }
.ts-autocomplete-item:hover { background: var(--ts-bg, #F3F5F9); }
.ts-autocomplete-item strong { display: block; font-size: 12.5px; color: var(--ts-text, #1B1F3B); }
.ts-autocomplete-sub { display: block; font-size: 11px; color: var(--ts-muted, #6E7391); margin-top: 2px; }
.ts-autocomplete-empty { cursor: default; color: var(--ts-muted, #6E7391); text-align: center; }
.ts-autocomplete-empty:hover { background: transparent; }

/* جستجوی تیکت‌های من (ستون محصولات) */
.ts-my-tickets-search { position: relative; padding: 10px 12px 0; }
.ts-my-tickets-search input[type="text"] {
	width: 100%; border: 1px solid var(--ts-border, #E4E7F1); border-radius: 10px;
	padding: 8px 12px; font-size: 12.5px; font-family: inherit; background: var(--ts-bg, #F3F5F9);
}
.ts-my-tickets-search input[type="text"]:focus { outline: none; border-color: var(--ts-accent, #3454D1); background: #fff; }
.ts-my-tickets-search .ts-autocomplete-results {
	position: absolute; top: 100%; right: 12px; left: 12px; margin-top: 4px;
	box-shadow: 0 10px 28px rgba(15,17,32,.14); z-index: 30;
}
.ts-selected-chip {
	margin-top: 8px; display: inline-block; padding: 6px 12px; border-radius: 20px;
	background: rgba(52,84,209,.10); color: var(--ts-accent-dark, #263C9E); font-size: 12.5px; font-weight: 700;
}

.ts-admin-new-ticket-wrap { height: auto; display: block; padding: 20px; }

/* =========================================================
   افزودنی‌های نسخه ۳: پاپ‌آپ حرفه‌ای، لایک/دیس‌لایک، امتیاز ستاره‌ای، گزارش
   ========================================================= */

/* پاپ‌آپ / مودال تایید */
.ts-modal-overlay, .ts-modal-overlay * { box-sizing: border-box; }
.ts-modal-overlay {
	position: fixed; inset: 0; background: rgba(15,17,32,.5); z-index: 99998;
	display: flex; align-items: center; justify-content: center; padding: 16px;
	animation: ts-fade-in .12s ease;
}
.ts-modal-card {
	background: #fff; border-radius: 16px; max-width: 380px; width: 100%;
	padding: 22px; text-align: center; box-shadow: 0 20px 60px rgba(15,17,32,.25);
	direction: rtl; font-family: Tahoma, "Segoe UI", sans-serif;
}
.ts-modal-icon {
	width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center; font-size: 22px;
	background: rgba(219,138,34,.12); color: #DB8A22;
}
.ts-modal-icon.is-danger { background: rgba(225,72,61,.12); color: #E1483D; }
.ts-modal-icon.is-success { background: rgba(31,169,125,.12); color: #1FA97D; }
.ts-modal-title { font-size: 15.5px; font-weight: 700; color: #1B1F3B; margin-bottom: 6px; }
.ts-modal-text { font-size: 13px; color: #6E7391; line-height: 1.9; margin-bottom: 18px; }
.ts-modal-actions { display: flex; gap: 8px; }
.ts-modal-actions .ts-btn { flex: 1; padding: 10px; }
.ts-modal-cancel { background: #F1F2F7; color: #4A4F6A; }
.ts-modal-cancel:hover { background: #E7E8F0; }

/* امتیاز ستاره‌ای هنگام بستن تیکت */
.ts-star-rating { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; direction: ltr; }
.ts-star-rating .ts-star {
	font-size: 30px; cursor: pointer; color: #DADCE8; transition: color .1s ease, transform .1s ease;
}
.ts-star-rating .ts-star:hover,
.ts-star-rating .ts-star.is-active { color: #F4B740; transform: scale(1.08); }

/* دکمه‌های لایک/دیس‌لایک زیر پاسخ پشتیبانی */
.ts-msg-reactions { display: flex; gap: 6px; margin-top: 6px; }
.ts-msg-user .ts-msg-reactions { justify-content: flex-start; }
.ts-msg-admin .ts-msg-reactions { justify-content: flex-end; }
.ts-react-btn {
	border: 1px solid var(--ts-border, #E4E7F1); background: #fff; border-radius: 20px;
	padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--ts-muted, #6E7391);
	display: inline-flex; align-items: center; gap: 4px;
}
.ts-react-btn:hover { background: var(--ts-bg, #F3F5F9); }
.ts-react-btn:disabled { opacity: .65; cursor: not-allowed; }
.ts-react-btn.is-active-like { background: rgba(31,169,125,.12); border-color: transparent; color: #1FA97D; }
.ts-react-btn.is-active-dislike { background: rgba(225,72,61,.12); border-color: transparent; color: #E1483D; }
.ts-msg-reactions-readonly .ts-react-btn { cursor: default; }
.ts-btn-spinner {
	width: 11px; height: 11px; border-radius: 50%; display: inline-block;
	border: 2px solid rgba(110,115,145,.25); border-top-color: #6E7391;
	animation: ts-spin .7s linear infinite;
}

/* نشان امتیاز روی هدر گفتگو */
.ts-ticket-rating-shown { font-size: 13px; color: #F4B740; letter-spacing: 1px; }

/* کارت‌های گزارش رضایت */
.ts-report-cards { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.ts-report-card {
	background: #fff; border: 1px solid #E4E7F1; border-radius: 14px; padding: 20px;
	min-width: 220px; flex: 1;
}
.ts-report-card-wide { flex: 2; min-width: 320px; }
.ts-report-card-title { font-size: 12.5px; color: #6E7391; font-weight: 700; margin-bottom: 10px; }
.ts-report-card-value { font-size: 26px; font-weight: 700; color: #1B1F3B; }
.ts-report-stars { color: #F4B740; font-size: 18px; letter-spacing: 2px; margin-top: 6px; }
.ts-report-stars-inline { color: #F4B740; letter-spacing: 1px; }
.ts-report-card-sub { font-size: 11.5px; color: #9AA0BB; margin-top: 8px; }

.ts-report-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ts-report-bar-label { color: #F4B740; font-size: 12px; width: 90px; letter-spacing: 1px; }
.ts-report-bar-track { flex: 1; height: 10px; background: #F1F2F7; border-radius: 10px; overflow: hidden; }
.ts-report-bar-fill { height: 100%; background: linear-gradient(90deg, #F4B740, #E8942E); border-radius: 10px; }
.ts-report-bar-count { width: 24px; text-align: left; font-size: 12px; color: #6E7391; }

/* =========================================================
   افزودنی‌های نسخه ۴: ایموجی، رفع مشکل رنگ دکمه‌ها، نشان‌های زنده
   ========================================================= */

/* دکمه و پاپ‌آپ انتخاب ایموجی روی تکست‌اریای فرم‌ها (بالای فیلد) */
.ts-textarea-wrap { position: relative; }
.ts-textarea-wrap .ts-emoji-btn {
	position: absolute; top: 8px; left: 8px; z-index: 2;
}
.ts-textarea-wrap .ts-emoji-popover { top: 40px; left: 8px; }

/* دکمه ایموجی داخل نوار کامپوزر گفتگو */
.ts-composer { position: relative; }
.ts-composer .ts-emoji-btn.ts-composer-attach { font-size: 17px; }
.ts-emoji-popover-composer { bottom: 46px; right: 8px; top: auto; }

.ts-emoji-btn {
	width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ts-border, #E4E7F1);
	background: var(--ts-surface, #fff); font-size: 15px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0;
}
.ts-emoji-btn:hover { background: var(--ts-bg, #F3F5F9); }

.ts-emoji-popover {
	position: absolute; z-index: 50; background: #fff; border: 1px solid var(--ts-border, #E4E7F1);
	border-radius: 12px; box-shadow: 0 10px 30px rgba(15,17,32,.15); padding: 8px;
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 232px;
}
.ts-emoji-item {
	font-size: 19px; text-align: center; cursor: pointer; border-radius: 6px; padding: 3px 0; line-height: 1.6;
}
.ts-emoji-item:hover { background: var(--ts-bg, #F3F5F9); }

/* رفع اطمینان از رنگ دکمه‌های خارج از اسکوپ .ts-wrap (مودال‌ها) */
.ts-modal-overlay .ts-btn-accent { background: #3454D1; }
.ts-modal-overlay .ts-btn-danger { background: #E1483D; }

/* =========================================================
   افزودنی‌های نسخه ۵: بازطراحی کامل صفحه مدیریت تیکت‌ها (ایجکسی + صفحه‌بندی)
   ========================================================= */

.ts-admin-wrap { direction: rtl; }
.ts-admin-wrap .page-title-action { margin-right: 8px; }

.ts-admin-panel {
	font-family: Tahoma, "Segoe UI", sans-serif;
	margin-top: 18px;
}

/* نوار فیلتر بالای جدول */
.ts-admin-toolbar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	margin-bottom: 14px;
}

.ts-admin-tabs {
	display: inline-flex; background: #EEF0F6; border-radius: 12px; padding: 4px; gap: 2px;
}
.ts-admin-tab {
	border: none; background: transparent; padding: 7px 18px; border-radius: 9px;
	font-size: 13px; font-weight: 700; color: #6E7391; cursor: pointer; font-family: inherit;
}
.ts-admin-tab.is-active { background: #fff; color: #1B1F3B; box-shadow: 0 2px 6px rgba(15,17,32,.08); }
.ts-admin-tab:hover:not(.is-active) { color: #3454D1; }

.ts-admin-search input[type="search"] {
	border: 1px solid #E4E7F1; border-radius: 10px; padding: 9px 14px; font-size: 13px;
	min-width: 260px; font-family: inherit; background: #fff;
}
.ts-admin-search input[type="search"]:focus { outline: none; border-color: #3454D1; box-shadow: 0 0 0 3px rgba(52,84,209,.12); }

/* نوار عملیات دسته‌جمعی */
.ts-bulk-bar {
	display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 20px;
}
.ts-bulk-bar .ts-btn { padding: 7px 16px; font-size: 12.5px; }
.ts-bulk-count { font-size: 12.5px; color: #6E7391; }

/* کارت جدول */
.ts-admin-table-card {
	background: #fff; border: 1px solid #E4E7F1; border-radius: 14px; overflow: hidden;
	box-shadow: 0 4px 16px rgba(15,17,32,.04);
}

.ts-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts-admin-table thead th {
	background: #F7F8FC; color: #6E7391; font-weight: 700; font-size: 11.5px;
	text-align: right; padding: 12px 14px; border-bottom: 1px solid #E4E7F1; white-space: nowrap;
}
.ts-admin-table tbody td {
	padding: 12px 14px; border-bottom: 1px solid #F1F2F7; vertical-align: middle; color: #1B1F3B;
}
.ts-admin-table tbody tr:last-child td { border-bottom: none; }
.ts-admin-table tbody tr:hover { background: #FAFBFE; }
.ts-admin-table a { color: #3454D1; text-decoration: none; }
.ts-admin-table a:hover { text-decoration: underline; }
.ts-col-check { width: 36px; text-align: center; }

.ts-btn-small { display: inline-block; padding: 6px 14px; font-size: 12px; border-radius: 8px; background: #F1F2F7; color: #3454D1 !important; text-decoration: none !important; }
.ts-btn-small:hover { background: #E7E9F5; }

/* صفحه‌بندی */
.ts-admin-pagination {
	display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px;
}
.ts-page-nav { padding: 7px 18px; font-size: 12.5px; background: #fff; border: 1px solid #E4E7F1; color: #1B1F3B; }
.ts-page-nav:hover:not(:disabled) { border-color: #3454D1; color: #3454D1; }
.ts-page-nav:disabled { opacity: .4; cursor: not-allowed; }
.ts-page-info { font-size: 12.5px; color: #6E7391; }

/* واکنش‌گرا */
@media (max-width: 782px) {
	.ts-admin-toolbar { flex-direction: column; align-items: stretch; }
	.ts-admin-search input[type="search"] { min-width: 0; width: 100%; }
	.ts-admin-table-card { overflow-x: auto; }
	.ts-admin-table { min-width: 720px; }
}

/* =========================================================
   افزودنی‌های نسخه ۶: صفحهٔ مدیریت فایل‌های پیوست
   ========================================================= */

.ts-attachments-summary { margin-bottom: 14px; }
.ts-summary-chip {
	display: inline-block; background: #fff; border: 1px solid #E4E7F1; border-radius: 10px;
	padding: 8px 16px; font-size: 12.5px; color: #1B1F3B; margin-left: 10px; margin-bottom: 8px;
}
.ts-summary-chip strong { color: #3454D1; }
.ts-attachments-summary .description { margin-top: 6px; max-width: 720px; }

.ts-att-thumb { display: inline-block; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; }
.ts-att-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.ts-att-missing { font-size: 11px; color: #B3B7CC; }

/* =========================================================
   افزودنی‌های نسخه ۷: کارت‌های رویداد پیامکی + توکن + ذخیرهٔ ایجکسی
   ========================================================= */

.ts-sms-events-list { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 20px; max-width: 820px; }

.ts-sms-event-card {
	background: #fff; border: 1px solid #E4E7F1; border-radius: 12px; padding: 16px 18px;
}

.ts-sms-event-head {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
	padding-bottom: 12px; border-bottom: 1px solid #F1F2F7;
}
.ts-sms-event-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.ts-sms-event-recipient {
	font-size: 11px; color: #6E7391; background: #F1F2F7; padding: 3px 10px; border-radius: 20px;
}
.ts-sms-event-delay-flag {
	font-size: 11px; color: #DB8A22; background: rgba(219,138,34,.12); padding: 3px 10px; border-radius: 20px;
}

.ts-sms-event-body { display: flex; flex-wrap: wrap; gap: 16px; }
.ts-sms-field { flex: 1; min-width: 240px; }
.ts-sms-field label { display: block; font-size: 12px; font-weight: 700; color: #6E7391; margin-bottom: 6px; }
.ts-sms-field input[type="text"] { width: 100%; }

.ts-token-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ts-token-chip {
	border: 1px solid #E4E7F1; background: #F7F8FC; border-radius: 8px; padding: 4px 8px;
	font-size: 11px; cursor: pointer; font-family: inherit; color: #3454D1; direction: ltr;
	display: inline-flex; align-items: center; gap: 5px;
}
.ts-token-chip span { color: #6E7391; direction: rtl; font-weight: 400; }
.ts-token-chip:hover { background: rgba(52,84,209,.08); border-color: #3454D1; }

.ts-settings-save-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ts-settings-save-row .ts-btn { padding: 9px 26px; }
#ts-settings-save-status { font-size: 13px; }
#ts-settings-save-status.is-success { color: #1FA97D; }
#ts-settings-save-status.is-error { color: #E1483D; }

/* نشان «دیده شد / ارسال شد» زیر پیام‌های خودِ فرستنده (هم پشتیبانی در پنل مدیریت، هم مشتری در سایت) */
.ts-msg-seen {
	display: block; font-size: 10px; color: #9AA0BB; margin-top: 3px; padding: 0 4px; text-align: left;
}
.ts-msg-user .ts-msg-seen { text-align: right; }
.ts-msg-seen.is-seen { color: #3454D1; }

/* پیام سیستمی (مثل اطلاع‌رسانی بستن خودکار تیکت) */
.ts-msg-system {
	align-self: center; text-align: center; max-width: 80%;
	font-size: 11.5px; color: #8B8FA8; background: #F1F2F7;
	border-radius: 20px; padding: 6px 16px; margin: 4px 0;
}
/* =========================================================
   افزودنی‌های نسخه ۶: فرم سفارشی داخل گفتگو، آرشیو تیکت، تیکت‌های یک مشتری
   ========================================================= */

/* مودال عمومی با محتوای دلخواه (فرم‌ساز / تکمیل فرم / اطلاعات فرم / لیست تیکت‌های مشتری) */
.ts-panel-modal-card {
	max-width: 480px; width: 100%; min-width: 0; text-align: right; position: relative; max-height: 86vh;
	display: flex; flex-direction: column; padding: 22px; overflow-x: hidden;
}
.ts-panel-modal-wide { max-width: 620px; }
.ts-panel-modal-title { text-align: right; padding-left: 30px; margin-bottom: 12px; }
.ts-panel-modal-body { overflow-y: auto; overflow-x: hidden; flex: 1; min-width: 0; }
.ts-panel-modal-close {
	position: absolute; top: 14px; left: 14px; width: 30px; height: 30px; border-radius: 50%;
	border: none; background: #F1F2F7; color: #4A4F6A; font-size: 18px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.ts-panel-modal-close:hover { background: #E7E8F0; }

/* فرم‌ساز پشتیبانی - چیدمان مرتب، مینیمال، با بخش‌های مجزا */
.ts-form-builder { display: flex; flex-direction: column; min-width: 0; }
.ts-form-section { padding: 10px 0; min-width: 0; }
.ts-form-section:first-child { padding-top: 0; }
.ts-form-section-title { font-size: 12px; font-weight: 700; color: #6E7391; margin-bottom: 7px; }
.ts-form-divider { height: 1px; background: var(--ts-border, #E4E7F1); margin: 0; }

.ts-form-template-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ts-form-template-bar select { flex: 1; min-width: 0; }
.ts-form-template-delete-btn {
	flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: none;
	background: rgba(225,72,61,.1); color: #E1483D; cursor: pointer; font-size: 15px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.ts-form-template-delete-btn:hover { background: rgba(225,72,61,.2); }

.ts-form-template-save-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ts-form-template-save-bar input { flex: 1 1 180px; min-width: 0; }
.ts-form-template-save-bar button { flex: 0 0 auto; white-space: nowrap; }

/* فقط همین ناحیه (فهرست فیلدها) اسکرول می‌خورد؛ بقیهٔ پاپ‌آپ ثابت می‌ماند */
.ts-form-fields-scroll {
	max-height: 300px; overflow-y: auto; overflow-x: hidden; min-width: 0;
	margin-bottom: 10px; padding-inline-end: 6px; margin-inline-end: -6px;
}
.ts-form-builder-fields {
	display: flex; flex-direction: column; gap: 8px; min-width: 0;
	counter-reset: ts-field-counter;
}
.ts-form-field-row {
	counter-increment: ts-field-counter; min-width: 0;
	border: 1px solid var(--ts-border, #E4E7F1); border-radius: 9px; padding: 10px; background: #FAFBFD;
}
.ts-form-field-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ts-form-field-index {
	flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: rgba(52,84,209,.1); color: #3454D1;
	font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ts-form-field-index::before { content: counter(ts-field-counter); }
.ts-form-field-row-top .ts-field-label-input { flex: 1; min-width: 0; }
.ts-form-field-row-bottom { display: flex; align-items: center; gap: 10px; margin-top: 7px; padding-inline-start: 28px; flex-wrap: wrap; min-width: 0; }
.ts-form-field-row-bottom .ts-field-type-select { flex: 1 1 140px; min-width: 0; }
.ts-field-required-label { font-size: 11.5px; color: #6E7391; display: flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto; }
.ts-field-remove-btn {
	width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(225,72,61,.1); color: #E1483D;
	cursor: pointer; font-size: 14px; line-height: 1; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
.ts-field-remove-btn:hover { background: rgba(225,72,61,.2); }
.ts-field-options-input { margin-top: 7px; margin-inline-start: 28px; width: calc(100% - 28px); }
.ts-field-required-mark { color: #E1483D; }

.ts-form-submit-btn-main { margin-top: 16px; }

/* حباب فرم داخل گفتگو */
.ts-msg-form .ts-msg-bubble { padding: 12px 14px; }
.ts-form-bubble { min-width: 200px; }
.ts-form-bubble-title { font-weight: 700; margin-bottom: 8px; }
.ts-form-bubble-fields { margin: 0 0 10px; padding-inline-start: 18px; font-size: 13px; line-height: 1.9; }
.ts-msg-admin .ts-form-bubble-fields { color: rgba(255,255,255,.92); }
.ts-form-status {
	display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px;
}
.ts-form-status.is-answered { background: rgba(31,169,125,.15); color: #1FA97D; }
.ts-msg-admin .ts-form-status.is-answered { background: rgba(255,255,255,.2); color: #fff; }
.ts-form-status.is-pending { background: rgba(219,138,34,.15); color: #DB8A22; }
.ts-msg-admin .ts-form-status.is-pending { background: rgba(255,255,255,.2); color: #fff; }
.ts-form-bubble .ts-view-form-data-btn { display: block; width: 100%; margin-top: 4px; }
.ts-form-response-bubble .ts-form-bubble-title { margin-bottom: 10px; }

/* فرم داخل گفتگو (مستقیم داخل حباب پیام، بدون پاپ‌آپ) */
.ts-inline-form { margin-top: 6px; }
.ts-inline-form .ts-fill-field-row { margin-bottom: 12px; }
.ts-inline-form .ts-label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: #4A4F6A; }
.ts-msg-admin .ts-inline-form .ts-label { color: rgba(255,255,255,.9); }
.ts-inline-form .ts-fill-field-input,
.ts-inline-form select.ts-fill-field-input,
.ts-inline-form textarea.ts-fill-field-input {
	width: 100%; background: #fff; color: #1B1F3B; border: 1px solid rgba(255,255,255,.4);
	border-radius: 8px; padding: 8px 10px; font-size: 13px; box-sizing: border-box;
}
.ts-fill-field-row.is-invalid .ts-fill-field-input,
.ts-fill-field-row.is-invalid { border-color: #E1483D; }
.ts-fill-field-row.is-invalid .ts-label { color: #FFD9D6; }
.ts-fill-field-options { display: flex; flex-direction: column; gap: 6px; }
.ts-fill-option-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #1B1F3B; }
.ts-msg-admin .ts-fill-option-label { color: #fff; background: rgba(255,255,255,.12); padding: 6px 10px; border-radius: 8px; }
.ts-inline-form .ts-inline-form-submit-btn { margin-top: 4px; }
.ts-msg-admin .ts-inline-form-submit-btn {
	background: #fff; color: var(--ts-accent, #3454D1);
}
.ts-msg-admin .ts-inline-form-submit-btn:hover { opacity: .85; }
.ts-msg-admin .ts-inline-form-submit-btn[disabled] { opacity: .6; }

/* مشاهدهٔ اطلاعات ارسالی فرم (فقط پشتیبانی) */
.ts-form-data-row {
	display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
	border-bottom: 1px solid var(--ts-border, #E4E7F1); font-size: 13.5px;
}
.ts-form-data-row:last-child { border-bottom: none; }
.ts-form-data-label { color: #6E7391; font-weight: 700; flex: 0 0 40%; }
.ts-form-data-value { color: #1B1F3B; flex: 1; text-align: left; word-break: break-word; }

/* نشان آرشیو */
.ts-badge-archived { background: rgba(110,115,145,.15); color: #6E7391; }

/* نام مشتری قابل‌کلیک در جدول تیکت‌ها */
.ts-customer-name-link { color: inherit; text-decoration: none; border-bottom: 1px dashed #9AA0BB; }
.ts-customer-name-link:hover { color: #3454D1; border-bottom-color: #3454D1; }

/* لیست تیکت‌های یک مشتری خاص (داخل مودال) */
.ts-customer-tickets-list { display: flex; flex-direction: column; gap: 8px; }
.ts-customer-ticket-row {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ts-border, #E4E7F1);
	border-radius: 10px; text-decoration: none; color: #1B1F3B; font-size: 13px; flex-wrap: wrap;
}
.ts-customer-ticket-row:hover { background: #F7F8FC; border-color: #3454D1; }
.ts-customer-ticket-num { color: #6E7391; font-weight: 700; }
.ts-customer-ticket-subject { flex: 1; min-width: 120px; font-weight: 600; }

/* ==================== درگ‌ودراپ تصویر در پنجرهٔ گفتگو ==================== */
.ts-chat-thread,
.ts-new-ticket-form,
.ts-wrap.ts-admin-new-ticket-wrap {
	position: relative;
}
.ts-chat-thread.ts-dragover::after,
.ts-new-ticket-form.ts-dragover::after,
.ts-wrap.ts-admin-new-ticket-wrap.ts-dragover::after {
	content: attr(data-drop-hint);
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	background: color-mix(in srgb, var(--ts-accent, #3454D1) 8%, #fff 92%);
	border: 3px dashed var(--ts-accent, #3454D1);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ts-accent-dark, #263C9E);
	pointer-events: none;
}
.ts-chat-thread.ts-dragover,
.ts-new-ticket-form.ts-dragover,
.ts-wrap.ts-admin-new-ticket-wrap.ts-dragover {
	outline: none;
}

/* ==================== دکمهٔ ارسال دستی پیامک در نمای مدیریت تیکت ==================== */
.ts-chat-header { flex-wrap: wrap; row-gap: 8px; }
#ts-send-sms-btn { white-space: nowrap; }

/* ==================== صفحهٔ تنظیمات با تب‌بندی ==================== */
.ts-settings-wrap { max-width: 1000px; }
.ts-settings-intro { margin-top: 6px; }

.ts-settings-tabs {
	display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 20px;
	border-bottom: 1px solid var(--ts-border, #E4E7F1); padding-bottom: 0;
}
.ts-settings-tab {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 11px 18px; border: none; background: transparent; cursor: pointer;
	font-size: 13.5px; font-weight: 700; color: #6E7391;
	border-bottom: 3px solid transparent; margin-bottom: -1px;
	transition: color .15s ease, border-color .15s ease;
}
.ts-settings-tab-icon { font-size: 14px; }
.ts-settings-tab:hover { color: var(--ts-accent-dark, #263C9E); }
.ts-settings-tab.is-active { color: var(--ts-accent, #3454D1); border-bottom-color: var(--ts-accent, #3454D1); }

.ts-settings-panel { display: none; }
.ts-settings-panel.is-active { display: block; animation: ts-fade-in .15s ease; }
@keyframes ts-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

.ts-settings-card {
	background: #fff; border: 1px solid var(--ts-border, #E4E7F1); border-radius: 14px;
	padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(15,17,32,.04);
}
.ts-settings-card-title {
	font-size: 15px; font-weight: 800; color: #1B1F3B; margin: 0 0 16px;
	padding-bottom: 12px; border-bottom: 1px solid var(--ts-border, #E4E7F1);
}
.ts-settings-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 24px;
}
.ts-settings-field-full { grid-column: 1 / -1; }
.ts-settings-field label { display: block; font-size: 13px; font-weight: 700; color: #1B1F3B; margin-bottom: 6px; }
.ts-settings-field .ts-input {
	width: 100%; padding: 9px 12px; border: 1px solid var(--ts-border, #E4E7F1); border-radius: 9px;
	font-size: 13.5px; background: #fbfbfd; transition: border-color .15s ease, box-shadow .15s ease;
}
.ts-settings-field .ts-input:focus { outline: none; border-color: var(--ts-accent, #3454D1); box-shadow: 0 0 0 3px rgba(52,84,209,.10); background: #fff; }
.ts-settings-field .ts-input-narrow { max-width: 160px; }
.ts-field-hint { font-size: 12px; color: #8A8FB0; margin: 8px 0 0; line-height: 1.9; }

.ts-settings-field-toggle { display: flex; align-items: center; }
.ts-toggle-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 600; color: #1B1F3B; cursor: pointer; line-height: 1.9; }
.ts-toggle-row input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ts-accent, #3454D1); flex-shrink: 0; }

.ts-color-field { display: flex; align-items: center; gap: 8px; }
.ts-color-swatch { width: 42px; height: 38px; padding: 2px; border: 1px solid var(--ts-border, #E4E7F1); border-radius: 9px; background: #fbfbfd; cursor: pointer; }
.ts-color-field .ts-input { flex: 1; }

.ts-settings-save-bar {
	position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px;
	background: #fff; border: 1px solid var(--ts-border, #E4E7F1); border-radius: 14px;
	padding: 16px 20px; margin-top: 6px; box-shadow: 0 -4px 14px rgba(15,17,32,.06);
}
.ts-btn-large { padding: 11px 28px; font-size: 14px; }

.ts-sms-event-manual-flag { background: rgba(52,84,209,.12); color: var(--ts-accent-dark, #263C9E); }

@media (max-width: 782px) {
	.ts-settings-grid { grid-template-columns: 1fr; }
	.ts-settings-tabs { overflow-x: auto; flex-wrap: nowrap; }
}

/* ==================== صفحهٔ گزارش ارسال پیامک/ایمیل ==================== */
.ts-log-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.ts-summary-chip.is-danger strong { color: #E1483D; }
.ts-log-status-select {
	padding: 8px 12px; border: 1px solid var(--ts-border, #E4E7F1); border-radius: 9px;
	font-size: 13px; background: #fff;
}
.ts-log-channel-chip {
	display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px;
	font-size: 12px; font-weight: 700;
}
.ts-log-channel-chip.is-sms { background: rgba(52,84,209,.10); color: var(--ts-accent-dark, #263C9E); }
.ts-log-channel-chip.is-email { background: rgba(52,150,105,.12); color: #2A8B5F; }
.ts-customer-ticket-date { color: #9AA0BB; font-size: 11.5px; }