/* ==========================================================================
   Ticket Support Pro - Chat UI (WhatsApp/Telegram style)
   استایل کاملاً مجزا و مستقل از قالب سایت (ریست‌شده) اما فونت را از خود سایت می‌گیرد
   ========================================================================== */

/* ---------------------------------------------------------------------
   ریست اختصاصی محدود به داخل ویجت - از تداخل استایل قالب جلوگیری می‌کند
   --------------------------------------------------------------------- */
#tsp-app,
#tsp-app *,
#tsp-app *::before,
#tsp-app *::after {
	box-sizing: border-box !important;
}

#tsp-app button,
#tsp-app input,
#tsp-app select,
#tsp-app textarea {
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: inherit !important;
	background: none !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	padding: 0 !important;
	outline: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	width: auto;
	max-width: 100%;
}
#tsp-app ul, #tsp-app ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#tsp-app img { max-width: 100%; border: none !important; }
#tsp-app a { text-decoration: none !important; }
#tsp-app h1, #tsp-app h2, #tsp-app h3, #tsp-app p { margin: 0 !important; padding: 0 !important; }

/* ---------------------------------------------------------------------
   متغیرهای رنگی - حالت روشن (پیش‌فرض)
   متغیرها روی :root تعریف می‌شوند تا هم در ویجت فرانت (#tsp-app)، هم در پنل مدیریت،
   و هم در شورت‌کدهای مستقل (شمارنده/آمار) به‌درستی در دسترس باشند
   --------------------------------------------------------------------- */
:root {
	--tsp-primary: #25D366;
	--tsp-primary-dark: #1da851;

	--tsp-app-bg: #ffffff;
	--tsp-chat-bg: #e9ecef;
	--tsp-header-bg: #f7f7f8;
	--tsp-border: #e2e5e9;

	--tsp-text: #16191c;
	--tsp-muted: #6b7280;

	--tsp-bubble-mine: #d9fdd3;
	--tsp-bubble-mine-text: #0b1f10;
	--tsp-bubble-other: #ffffff;
	--tsp-bubble-other-text: #16191c;

	--tsp-composer-bg: #f0f2f5;
	--tsp-input-bg: #ffffff;

	--tsp-danger: #e53e3e;
}

/* حالت تاریک به‌صورت کلاس عمومی تا هم روی #tsp-app و هم روی ویجت‌های مستقل شورت‌کد کار کند */
.tsp-theme-dark {
	--tsp-app-bg: #111b21;
	--tsp-chat-bg: #0b141a;
	--tsp-header-bg: #202c33;
	--tsp-border: #263238;

	--tsp-text: #e9edef;
	--tsp-muted: #8696a0;

	--tsp-bubble-mine: #005c4b;
	--tsp-bubble-mine-text: #e9fdf6;
	--tsp-bubble-other: #202c33;
	--tsp-bubble-other-text: #e9edef;

	--tsp-composer-bg: #202c33;
	--tsp-input-bg: #2a3942;
}

#tsp-app {
	unicode-bidi: isolate;
	font-family: inherit !important;
	display: block;
	max-width: 900px;
	margin: 0 auto;
	border: 1px solid var(--tsp-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0,0,0,0.10);
	background: var(--tsp-app-bg);
	color: var(--tsp-text);
	position: relative;
	isolation: isolate;
}
#tsp-app.tsp-theme-dark { box-shadow: 0 4px 24px rgba(0,0,0,0.4); }

/* ---------------- Loading spinner ---------------- */
@keyframes tsp-spin-anim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tsp-spinner {
	display: inline-block;
	width: 16px; height: 16px;
	border: 2px solid var(--tsp-border);
	border-top-color: var(--tsp-primary);
	border-radius: 50%;
	animation: tsp-spin-anim .7s linear infinite;
	flex-shrink: 0;
}
.tsp-loading-state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 50px 20px;
	color: var(--tsp-muted);
}

/* ---------------- Views (بدون نوار تب - جابجایی فقط از طریق FAB/دکمه بازگشت) ---------------- */
.tsp-view { display: none; }
.tsp-view.active { display: block; }

/* ---------------- Login required ---------------- */
.tsp-login-required { padding: 60px 20px; text-align: center; color: var(--tsp-muted); }
.tsp-login-required a {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 24px !important;
	background: var(--tsp-primary) !important;
	color: #fff !important;
	border-radius: 24px !important;
	font-weight: 600 !important;
}

/* ---------------- سرتیتر نمای فرم تیکت جدید (با دکمه بازگشت) ---------------- */
.tsp-subheader {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--tsp-header-bg);
	border-bottom: 1px solid var(--tsp-border);
}
.tsp-subheader h3 { font-size: 15px !important; color: var(--tsp-text); }

/* ---------------- Ticket List ---------------- */
#tsp-view-list { position: relative; }
.tsp-ticket-list-wrap { min-height: 460px; max-height: 640px; overflow-y: auto; background: var(--tsp-app-bg); padding-bottom: 76px; }
.tsp-ticket-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--tsp-border);
	cursor: pointer;
	transition: background .15s;
	position: relative;
}
.tsp-ticket-item:hover { background: rgba(0,0,0,.03); }
.tsp-theme-dark .tsp-ticket-item:hover { background: rgba(255,255,255,.04); }
.tsp-ticket-item.tsp-has-unread { background: rgba(229,62,62,.06); }

.tsp-ticket-info { flex: 1; min-width: 0; }
.tsp-ticket-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tsp-ticket-subject { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tsp-text); }
.tsp-ticket-time { font-size: 11px; color: var(--tsp-muted); flex-shrink: 0; }
.tsp-ticket-preview { font-size: 13px; color: var(--tsp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px !important; max-width: 80%; }
.tsp-ticket-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 4px !important; }

.tsp-status-pill { display: inline-block; padding: 2px 10px !important; border-radius: 10px !important; font-size: 11px !important; font-weight: 600 !important; }
.tsp-status-open { background: #e6f4ea; color: #1e7e34; }
.tsp-status-pending { background: #fff4e5; color: #b26a00; }
.tsp-status-closed { background: #fde8e8; color: #c0392b; }
.tsp-theme-dark .tsp-status-open { background: rgba(30,126,52,.25); color: #6fdb8f; }
.tsp-theme-dark .tsp-status-pending { background: rgba(178,106,0,.25); color: #ffc86b; }
.tsp-theme-dark .tsp-status-closed { background: rgba(192,57,43,.25); color: #ff9a90; }

.tsp-unread-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px !important;
	border-radius: 999px !important;
	background: var(--tsp-danger) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	flex-shrink: 0;
}

.tsp-empty { text-align: center; padding: 50px 20px; color: var(--tsp-muted); }

/* دکمه شناور "+ تیکت جدید" - گوشه پایین، جهت‌دار بر اساس راست‌چین/چپ‌چین بودن سایت */
.tsp-fab-new {
	position: absolute;
	bottom: 18px;
	width: 54px !important;
	height: 54px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--tsp-primary) !important;
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
	transition: transform .15s, background .15s;
	z-index: 5;
}
.tsp-fab-new:hover { background: var(--tsp-primary-dark) !important; transform: scale(1.05); }
.tsp-fab-new svg { width: 24px; height: 24px; }
/* سایت راست‌چین -> دکمه شناور سمت چپ / سایت چپ‌چین -> دکمه شناور سمت راست */
#tsp-app[dir="rtl"] .tsp-fab-new { left: 18px; }
#tsp-app[dir="ltr"] .tsp-fab-new { right: 18px; }

/* ---------------- New Ticket Form ---------------- */
.tsp-new-ticket-form { padding: 24px 20px; background: var(--tsp-app-bg); }
.tsp-form-group { margin-bottom: 20px !important; }
.tsp-form-group label { display: block; font-weight: 600 !important; margin-bottom: 8px !important; font-size: 13.5px !important; color: var(--tsp-text); }
.tsp-form-group input[type=text],
.tsp-form-group select,
.tsp-form-group textarea {
	display: block;
	width: 100% !important;
	padding: 13px 16px !important;
	border: 1.5px solid var(--tsp-border) !important;
	border-radius: 14px !important;
	background: var(--tsp-composer-bg) !important;
	color: var(--tsp-text) !important;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.tsp-form-group input[type=text]:focus,
.tsp-form-group select:focus,
.tsp-form-group textarea:focus {
	border-color: var(--tsp-primary) !important;
	background: var(--tsp-input-bg) !important;
	box-shadow: 0 0 0 3px rgba(37,211,102,.15) !important;
}
.tsp-form-group select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: left 14px center !important;
	background-size: 16px !important;
	padding-left: 40px !important;
	cursor: pointer;
}
.tsp-form-group textarea { resize: vertical; min-height: 120px; line-height: 1.7 !important; }

.tsp-file-drop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 2px dashed var(--tsp-border);
	border-radius: 14px;
	padding: 22px;
	text-align: center;
	color: var(--tsp-muted);
	cursor: pointer;
	transition: .15s;
	font-size: 13px;
	background: var(--tsp-composer-bg);
}
.tsp-file-drop:hover { border-color: var(--tsp-primary); color: var(--tsp-primary); background: var(--tsp-input-bg); }
.tsp-file-drop-icon { display: flex; width: 20px; height: 20px; }
.tsp-file-drop-icon svg { width: 100%; height: 100%; }
.tsp-file-preview { display: flex; gap: 8px; margin-top: 10px !important; flex-wrap: wrap; }
.tsp-file-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px !important; border: 1px solid var(--tsp-border) !important; }

.tsp-submit-btn {
	display: block;
	width: 100% !important;
	padding: 15px !important;
	background: var(--tsp-primary) !important;
	color: #fff !important;
	border-radius: 14px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background .15s, transform .1s;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.tsp-submit-btn:hover { background: var(--tsp-primary-dark) !important; }
.tsp-submit-btn:active { transform: scale(.98); }
.tsp-submit-btn:disabled { opacity: .7; cursor: not-allowed; }
.tsp-submit-btn .tsp-spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; }

/* ---------------- Chat Screen ---------------- */
.tsp-chat-screen { display: flex; flex-direction: column; height: 640px; max-height: 80vh; }
.tsp-chat-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--tsp-header-bg);
	border-bottom: 1px solid var(--tsp-border);
	flex-shrink: 0;
}
.tsp-chat-back {
	background: none !important;
	cursor: pointer;
	color: var(--tsp-text) !important;
	padding: 6px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	transition: background .15s;
}
.tsp-chat-back:hover { background: rgba(0,0,0,.06) !important; }
.tsp-theme-dark .tsp-chat-back:hover { background: rgba(255,255,255,.08) !important; }
.tsp-chat-back svg { width: 22px; height: 22px; }
#tsp-app[dir="ltr"] .tsp-chat-back svg { transform: scaleX(-1); }

.tsp-chat-header-info { flex: 1; min-width: 0; }
.tsp-chat-header-info h3 { margin: 0 !important; font-size: 15px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tsp-text); }
.tsp-chat-header-info span { font-size: 12px; color: var(--tsp-muted); }

.tsp-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background-color: var(--tsp-chat-bg);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tsp-load-more {
	align-self: center;
	background: var(--tsp-app-bg) !important;
	border: 1px solid var(--tsp-border) !important;
	border-radius: 16px !important;
	padding: 6px 16px !important;
	font-size: 12px !important;
	cursor: pointer;
	margin-bottom: 10px !important;
	color: var(--tsp-muted) !important;
}

.tsp-msg-row { display: flex; margin: 3px 0; max-width: 100%; }
.tsp-msg-row.mine { justify-content: flex-start; }
.tsp-msg-row.other { justify-content: flex-end; }

.tsp-bubble {
	max-width: 75%;
	padding: 8px 12px !important;
	border-radius: 12px !important;
	position: relative;
	font-size: 14px !important;
	line-height: 1.6 !important;
	word-wrap: break-word;
	box-shadow: 0 1px 1px rgba(0,0,0,.08);
	transition: opacity .15s;
}
.tsp-msg-row.mine .tsp-bubble { background: var(--tsp-bubble-mine) !important; color: var(--tsp-bubble-mine-text) !important; border-bottom-right-radius: 3px !important; }
.tsp-msg-row.other .tsp-bubble { background: var(--tsp-bubble-other) !important; color: var(--tsp-bubble-other-text) !important; border-bottom-left-radius: 3px !important; }

.tsp-msg-sending .tsp-bubble { opacity: .55; }
.tsp-msg-failed .tsp-bubble { outline: 1.5px solid var(--tsp-danger) !important; opacity: .85; }

.tsp-bubble .tsp-sender-name { font-size: 11px !important; font-weight: 700 !important; color: var(--tsp-primary-dark) !important; margin-bottom: 3px !important; }
.tsp-bubble .tsp-msg-text { white-space: pre-wrap; }
.tsp-bubble .tsp-msg-time { font-size: 10px !important; opacity: .65; margin-top: 4px !important; text-align: left; display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.tsp-msg-time-text { line-height: 1; }
.tsp-msg-status { display: inline-flex; align-items: center; line-height: 1; }
.tsp-msg-status .tsp-spinner-sm {
	width: 10px; height: 10px;
	border-width: 1.5px;
	border-color: currentColor;
	opacity: .55;
	border-top-color: transparent;
}
.tsp-msg-check { width: 13px; height: 13px; color: inherit; }
.tsp-msg-fail { width: 13px; height: 13px; color: var(--tsp-danger); }

.tsp-bubble img.tsp-msg-image { max-width: 240px; max-height: 240px; border-radius: 8px !important; cursor: pointer; display: block; }

.tsp-voice-player { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.tsp-voice-player audio { width: 190px; height: 34px; }

/* ---------------- Composer ---------------- */
.tsp-chat-composer {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	padding: 10px 12px;
	background: var(--tsp-composer-bg);
	border-top: 1px solid var(--tsp-border);
	flex-shrink: 0;
	min-height: 62px;
}
.tsp-icon-btn {
	background: none !important;
	cursor: pointer;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	color: var(--tsp-muted) !important;
	border-radius: 50% !important;
	transition: background .15s;
	flex-shrink: 0;
	align-self: center !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.tsp-icon-btn svg { width: 22px; height: 22px; display: block; flex-shrink: 0; margin: auto; }
.tsp-icon-btn:hover { background: rgba(0,0,0,.06) !important; }
.tsp-theme-dark .tsp-icon-btn:hover { background: rgba(255,255,255,.08) !important; }

.tsp-chat-composer textarea {
	flex: 1;
	border-radius: 20px !important;
	padding: 9px 16px !important;
	resize: none;
	max-height: 100px;
	height: 40px;
	min-height: 40px;
	background: var(--tsp-input-bg) !important;
	color: var(--tsp-text) !important;
	line-height: 20px !important;
	align-self: center !important;
}

.tsp-send-btn {
	background: var(--tsp-primary) !important;
	color: #fff !important;
	width: 40px !important; height: 40px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	cursor: pointer;
	flex-shrink: 0;
	align-self: center !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}
.tsp-send-btn svg { width: 19px; height: 19px; display: block; margin: auto; }
.tsp-send-btn:hover { background: var(--tsp-primary-dark) !important; }

/* ---------------- ضبط پیام صوتی (خود آیکن میکروفون قرمز و چشمک‌زن می‌شود، مانند واتساپ) ---------------- */
@keyframes tsp-mic-pulse-ring {
	0%   { box-shadow: 0 0 0 0 rgba(229,62,62,.55); }
	70%  { box-shadow: 0 0 0 14px rgba(229,62,62,0); }
	100% { box-shadow: 0 0 0 0 rgba(229,62,62,0); }
}
.tsp-icon-btn.tsp-mic-recording {
	background: var(--tsp-danger) !important;
	color: #fff !important;
	animation: tsp-mic-pulse-ring 1.4s infinite;
}
.tsp-rec-timer-inline {
	font-variant-numeric: tabular-nums;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--tsp-danger) !important;
	padding: 0 4px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* پیش‌نمایش صوت ضبط‌شده - فقط یک دکمه ارسال دارد (همان دکمه اصلی ارسال چت) */
.tsp-voice-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	padding: 4px 10px !important;
	background: var(--tsp-input-bg) !important;
	border-radius: 24px !important;
	min-height: 40px;
}
.tsp-voice-preview audio { flex: 1; height: 34px; }
.tsp-voice-cancel-btn { color: var(--tsp-danger) !important; }

.tsp-closed-banner { text-align: center; padding: 10px; background: #fde8e8; color: #c0392b; font-size: 13px; }
.tsp-theme-dark .tsp-closed-banner { background: rgba(192,57,43,.18); color: #ff9a90; }

.tsp-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #333 !important;
	color: #fff !important;
	padding: 10px 20px !important;
	border-radius: 20px !important;
	font-size: 13px !important;
	z-index: 999999;
	opacity: 0;
	transition: opacity .3s;
	font-family: inherit !important;
}
.tsp-toast.show { opacity: 1; }

.tsp-lightbox {
	position: fixed; inset: 0; background: rgba(0,0,0,.85);
	display: flex; align-items: center; justify-content: center;
	z-index: 999998; cursor: zoom-out;
}
.tsp-lightbox img { max-width: 92%; max-height: 92%; border-radius: 6px; }

/* ---------------------------------------------------------------------
   ویجت شمارنده تیکت خوانده‌نشده [tsp_unread_count]
   فقط یک دایره قرمز با عدد - بدون متن/کادر/بوردر - اگر صفر بود اصلاً نمایش داده نمی‌شود
   --------------------------------------------------------------------- */
.tsp-unread-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--tsp-danger, #e53e3e);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	font-family: inherit;
	line-height: 1;
}

/* ---------------------------------------------------------------------
   ویجت آمار سه‌گانه [tsp_ticket_stats] - حساس به حالت تاریک از تنظیمات
   --------------------------------------------------------------------- */
.tsp-stats-grid {
	font-family: inherit;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	width: 100%;
}
.tsp-stat-box {
	background: var(--tsp-app-bg, #fff);
	border: 1px solid var(--tsp-border, #e2e5e9);
	border-radius: 14px;
	padding: 18px 12px;
	text-align: center;
}
.tsp-stat-number { display: block; font-size: 28px; font-weight: 800; color: var(--tsp-text, #16191c); line-height: 1.2; }
.tsp-stat-label { display: block; font-size: 13px; color: var(--tsp-muted, #6b7280); margin-top: 4px; }
.tsp-stat-open .tsp-stat-number { color: #1e7e34; }
.tsp-stat-closed .tsp-stat-number { color: #c0392b; }
.tsp-theme-dark .tsp-stat-open .tsp-stat-number { color: #6fdb8f; }
.tsp-theme-dark .tsp-stat-closed .tsp-stat-number { color: #ff9a90; }

/* ---------------------------------------------------------------------
   ریسپانسیو - موبایل و تبلت
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
	#tsp-app { border-radius: 0; max-width: 100%; }
	.tsp-chat-screen { height: calc(100vh - 140px); max-height: none; }
	.tsp-bubble { max-width: 85%; }
	.tsp-ticket-list-wrap { max-height: 60vh; }
	.tsp-new-ticket-form { padding: 16px 14px; }
	.tsp-stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
	.tsp-voice-player audio { width: 140px; }
}