#sts-widget-root,
#sts-widget-root * {
	box-sizing: border-box !important;
}

#sts-widget-root {
	--sts-color: #1f2937;
	--sts-color-dark: #111827;
	--sts-text: #1f2933;
	--sts-border: #e3e6ea;
	--sts-muted: #6b7280;
	direction: rtl !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "IRANSans", "Vazirmatn", sans-serif !important;
	position: fixed !important;
	bottom: 26px !important;
	inset-inline-end: 26px !important;
	z-index: 999999 !important;
	line-height: 1.6 !important;
}

#sts-toggle-btn {
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: var(--sts-color) !important;
	color: #ffffff !important;
	border: none !important;
	outline: none !important;
	box-shadow: 0 4px 16px rgba(17, 24, 39, 0.28) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.18s ease, transform 0.18s ease !important;
}

#sts-toggle-btn:hover {
	background: var(--sts-color-dark) !important;
	transform: translateY(-2px) !important;
}

#sts-toggle-btn svg {
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	flex-shrink: 0 !important;
}

#sts-modal {
	position: fixed !important;
	bottom: 94px !important;
	inset-inline-end: 26px !important;
	width: 368px !important;
	max-width: calc(100vw - 32px) !important;
	max-height: 72vh !important;
	background: #ffffff !important;
	border: 1px solid var(--sts-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 14px 40px rgba(17, 24, 39, 0.18) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	font-size: 13.5px !important;
	color: var(--sts-text) !important;
}

#sts-modal.sts-hidden,
.sts-hidden {
	display: none !important;
}

.sts-modal-header {
	background: var(--sts-color) !important;
	color: #ffffff !important;
	padding: 15px 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sts-modal-title {
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: 0.2px !important;
}

.sts-modal-subtitle {
	display: block !important;
	font-size: 11.5px !important;
	font-weight: 400 !important;
	color: rgba(255, 255, 255, 0.72) !important;
	margin-top: 2px !important;
}

#sts-close-btn {
	background: transparent !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 4px !important;
	opacity: 0.85 !important;
}

#sts-close-btn:hover {
	opacity: 1 !important;
}

.sts-modal-body {
	padding: 18px !important;
	overflow-y: auto !important;
}

.sts-panel label {
	display: block !important;
	margin: 12px 0 5px !important;
	font-weight: 600 !important;
	font-size: 12.5px !important;
	color: #374151 !important;
}

.sts-panel input[type="text"],
.sts-panel input[type="email"],
.sts-panel input[type="password"],
.sts-panel input[type="file"],
.sts-panel select,
.sts-panel textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 9px 11px !important;
	border: 1px solid var(--sts-border) !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-family: inherit !important;
	background: #fbfbfc !important;
	color: var(--sts-text) !important;
}

.sts-panel input:focus,
.sts-panel select:focus,
.sts-panel textarea:focus {
	outline: none !important;
	border-color: var(--sts-color) !important;
	background: #ffffff !important;
}

.sts-panel textarea {
	resize: vertical !important;
}

.sts-required {
	color: #b91c1c !important;
}

.sts-welcome-text {
	font-weight: 600 !important;
	font-size: 14px !important;
	margin: 0 0 6px !important;
	color: #111827 !important;
}

.sts-btn {
	cursor: pointer !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 10px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
}

.sts-btn-primary {
	background: var(--sts-color) !important;
	color: #ffffff !important;
	margin-top: 16px !important;
	width: 100% !important;
	transition: background 0.15s ease !important;
}

.sts-btn-primary:hover {
	background: var(--sts-color-dark) !important;
}

.sts-btn-primary:disabled {
	opacity: 0.6 !important;
	cursor: default !important;
}

.sts-btn-link {
	background: transparent !important;
	color: var(--sts-color) !important;
	padding: 4px 0 !important;
	margin-bottom: 12px !important;
	font-weight: 600 !important;
}

.sts-btn-secondary {
	background: #f3f4f6 !important;
	color: #374151 !important;
	border: 1px solid var(--sts-border) !important;
}

.sts-register-hint {
	margin-top: 16px !important;
	font-size: 12px !important;
	color: var(--sts-muted) !important;
	padding-top: 12px !important;
	border-top: 1px solid var(--sts-border) !important;
}

.sts-register-hint a {
	color: var(--sts-color) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.sts-alert {
	padding: 10px 12px !important;
	border-radius: 6px !important;
	margin-bottom: 12px !important;
	font-size: 12.5px !important;
	border: 1px solid transparent !important;
}

.sts-alert.sts-success {
	background: #f0fdf4 !important;
	color: #166534 !important;
	border-color: #bbf7d0 !important;
}

.sts-alert.sts-error {
	background: #fef2f2 !important;
	color: #991b1b !important;
	border-color: #fecaca !important;
}

.sts-tabs {
	display: flex !important;
	gap: 6px !important;
	margin-bottom: 16px !important;
	border-bottom: 1px solid var(--sts-border) !important;
	padding-bottom: 0 !important;
}

.sts-tab-btn {
	flex: 1 !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	padding: 9px 6px !important;
	cursor: pointer !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--sts-muted) !important;
	font-family: inherit !important;
	margin-bottom: -1px !important;
}

.sts-tab-btn.sts-tab-active {
	color: var(--sts-color) !important;
	border-bottom-color: var(--sts-color) !important;
}

.sts-ticket-item {
	border: 1px solid var(--sts-border) !important;
	border-radius: 8px !important;
	padding: 11px 13px !important;
	margin-bottom: 8px !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background 0.15s ease !important;
}

.sts-ticket-item:hover {
	background: #f9fafb !important;
	border-color: #d1d5db !important;
}

.sts-ticket-item .sts-t-top {
	display: flex !important;
	justify-content: space-between !important;
	font-size: 11.5px !important;
	color: var(--sts-muted) !important;
	margin-bottom: 5px !important;
}

.sts-ticket-item .sts-t-subject {
	font-weight: 600 !important;
	color: #111827 !important;
	margin-bottom: 6px !important;
}

.sts-status-badge {
	display: inline-block !important;
	padding: 3px 9px !important;
	border-radius: 4px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
}

.sts-status-open { background: #eff6ff !important; color: #1d4ed8 !important; }
.sts-status-in_progress { background: #fffbeb !important; color: #b45309 !important; }
.sts-status-answered { background: #f0fdf4 !important; color: #15803d !important; }
.sts-status-closed { background: #f3f4f6 !important; color: #4b5563 !important; }

.sts-reply-bubble {
	border-radius: 8px !important;
	padding: 9px 12px !important;
	margin-bottom: 9px !important;
	font-size: 12.5px !important;
	line-height: 1.7 !important;
	border: 1px solid var(--sts-border) !important;
}

.sts-reply-user {
	background: #f9fafb !important;
}

.sts-reply-admin {
	background: #eff6ff !important;
	border-color: #dbeafe !important;
}

.sts-reply-meta {
	font-size: 10.5px !important;
	color: var(--sts-muted) !important;
	margin-top: 5px !important;
}

@media (max-width: 420px) {
	#sts-modal {
		inset-inline-end: 8px !important;
		width: calc(100vw - 16px) !important;
	}
	#sts-widget-root {
		inset-inline-end: 12px !important;
	}
}