/*
 * Widget panel styles — the full chat UI (header, thread, composer, form,
 * lightbox). This is the "heavy" stylesheet: ~15KB, only ever requested
 * when a visitor actually opens the chat (icon/floating trigger) or when
 * the [guest_support_box] shortcode is present on a page. Registered with
 * a filemtime() cache-busting version, so browsers cache it across every
 * page after the first load — unlike the old wp_add_inline_style() output,
 * which shipped as raw uncached text inside every single page's HTML.
 *
 * Content is functionally identical to the old assets/css/widget-frontend.php
 * string (the $v font-stack variable is inlined here as a literal, since it
 * was always the same constant value on every request), with the fab/badge
 * rules split out to widget-icon.css and the .wpgs-embedded block added at
 * the end for the new [guest_support_box] dedicated-page mode.
 */

@font-face { font-family: 'Vazirmatn'; font-display: swap; }

:root {
	--wpgs-primary: #2563EB;
	--wpgs-primary-hover: #1D4ED8;
	--wpgs-surface: #FFFFFF;
	--wpgs-bg: #F8FAFC;
	--wpgs-text-main: #0F172A;
	--wpgs-text-muted: #64748B;
	--wpgs-border: #E2E8F0;
	--wpgs-msg-user-bg: #FFFFFF;
	--wpgs-msg-user-text: black;
	--wpgs-msg-admin-bg: #EFFDDE;
	--wpgs-msg-admin-text: black;
	--wpgs-error-bg: #FEF2F2;
	--wpgs-error-text: #EF4444;
	--wpgs-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04);
	--wpgs-radius-lg: 16px;
	--wpgs-radius-md: 10px;
	--wpgs-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--wpgs-surface: #1E293B;
		--wpgs-bg: #0F172A;
		--wpgs-text-main: #F8FAFC;
		--wpgs-text-muted: #94A3B8;
		--wpgs-border: #334155;
		--wpgs-msg-user-bg: #334155;
		--wpgs-msg-user-text: #F1F5F9;
		--wpgs-error-bg: #451A1A;
		--wpgs-error-text: #F87171;
	}
}

.wpgs-widget[style*='display: block'],
.wpgs-widget.wpgs-expanded {
	display: flex !important;
	flex-direction: column !important;
}

.wpgs-widget {
	font-family: 'Vazirmatn', 'Vazir', Tahoma, Arial, sans-serif; width: 380px; max-width: 90vw;
	background: var(--wpgs-surface);
	border: 1px solid var(--wpgs-border);
	border-radius: var(--wpgs-radius-lg);
	box-shadow: 0 20px 40px -10px rgb(0 3 12 / 71%), 0 10px 20px -5px rgb(9 30 25 / 39%);
	position: fixed; right: 24px; bottom: 100px; z-index: 99999;
	display: none; overflow: hidden;
	transform-origin: bottom right;
	animation: wpgs_slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wpgs-header {
	padding: 20px 24px;
	background: var(--wpgs-surface);
	border-bottom: 1px solid var(--wpgs-border);
	display: flex; align-items: center; justify-content: space-between;
	direction: rtl;
	flex: 0 0 auto !important;
}

.wpgs-title {
	font-weight: 600; font-size: 14px; color: var(--wpgs-text-main);
	display: flex; align-items: center; gap: 10px;
}

.wpgs-title svg { color: var(--wpgs-primary); }

.wpgs-header-actions { display: flex; gap: 8px; }

#wpgs_minimize_btn, #wpgs_refresh_btn {
	background: transparent; color: var(--wpgs-text-muted);
	border: none; border-radius: 6px; cursor: pointer;
	padding: 6px; display: flex; align-items: center; justify-content: center;
	transition: var(--wpgs-transition);
}
#wpgs_minimize_btn:hover, #wpgs_refresh_btn:hover {
	background: var(--wpgs-bg); color: var(--wpgs-text-main);
}

.wpgs-thread {
	height: 400px; overflow-y: auto; padding: 24px;
	background: var(--wpgs-bg); scroll-behavior: smooth;
	display: flex; flex-direction: column; gap: 16px;
}

.wpgs-thread::-webkit-scrollbar { width: 6px; }
.wpgs-thread::-webkit-scrollbar-thumb { background: var(--wpgs-border); border-radius: 10px; }

.wpgs-empty { padding: 40px 20px; text-align: center; color: var(--wpgs-text-muted); font-size: 14px; }

.wpgs-message { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.wpgs-message.user { justify-content: flex-start; }
.wpgs-message.admin { justify-content: flex-end; }

.wpgs-avatar {
	width: 28px; height: 28px; border-radius: 50%;
	object-fit: cover; flex-shrink: 0;
}

.wpgs-message .bubble {
	padding: 12px 16px; max-width: 80%;
	font-size: 14px; line-height: 1.6; position: relative;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	direction: rtl;
}
.wpgs-copy-icon {
	cursor: pointer; opacity: 0.5; transition: var(--wpgs-transition);
}
.wpgs-copy-icon:hover {
	opacity: 1; transform: scale(1.1);
}

.wpgs-message.user .bubble {
	background: var(--wpgs-msg-user-bg); color: var(--wpgs-msg-user-text);
	border-radius: 16px 16px 16px 4px;
	box-shadow: 0 2px 20px -10px rgb(0 3 12 / 71%), 0 10px 20px -5px rgb(9 30 25 / 39%);
}

.wpgs-message.admin .bubble {
	background: var(--wpgs-msg-admin-bg); color: var(--wpgs-msg-admin-text);
	border-radius: 16px 16px 4px 16px;
	box-shadow: 0 2px 20px -10px rgb(0 3 12 / 71%), 0 10px 20px -5px rgb(9 30 25 / 39%);
}

.wpgs-attachment-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wpgs-attachment-img { border-radius: 8px; overflow: hidden; }
.wpgs-chat-img { max-width: 100%; max-height: 200px; object-fit: cover; cursor: pointer; border-radius: 8px; display: block; }
.wpgs-attachment-file { background: rgba(0,0,0,0.05); padding: 8px 12px; border-radius: 8px; }
.wpgs-file-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-size: 13px; font-weight: bold; }

.wpgs-link-btn {
	display: inline-flex; align-items: center; gap: 6px;
	max-width: 100%; box-sizing: border-box; vertical-align: middle;
	padding: 8px 14px; margin: 4px 2px;
	background: var(--wpgs-primary); color: #fff !important;
	border-radius: 20px; text-decoration: none !important;
	font-family: 'Vazirmatn', 'Vazir', Tahoma, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: var(--wpgs-transition); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.wpgs-link-btn:hover { background: var(--wpgs-primary-hover); transform: translateY(-1px); }
.wpgs-link-btn:visited { color: #fff !important; }
.wpgs-link-btn svg { flex-shrink: 0; }

.wpgs-typing-bubble { display: flex !important; align-items: center; gap: 4px; padding: 14px 16px !important; }
.wpgs-typing-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--wpgs-text-muted); opacity: 0.5;
	animation: wpgs_typing_bounce 1.3s infinite ease-in-out;
}
.wpgs-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.wpgs-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes wpgs_typing_bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30% { transform: translateY(-5px); opacity: 1; }
}

.wpgs-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); z-index: 999999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.wpgs-lightbox-content { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
.wpgs-lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; user-select: none; }

.wpgs-preview-item { display:flex; align-items:center; gap:6px; background:var(--wpgs-bg); padding:6px 10px; border-radius:8px; border:1px solid var(--wpgs-border); font-size:12px; max-width:140px; }
.wpgs-preview-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wpgs-preview-remove { cursor:pointer; color:var(--wpgs-error-text); font-weight:bold; font-size:16px; line-height:1; }

.wpgs-datetime {
	font-size: 11px; margin-top: 6px; display: block; direction: ltr; opacity: 0.7;
}
.wpgs-message.admin .wpgs-datetime { text-align: right; }
.wpgs-message.user .wpgs-datetime { text-align: left; }

.wpgs-footer {
	padding: 16px 24px; background: var(--wpgs-surface);
	border-top: 1px solid var(--wpgs-border); display: flex; gap: 12px; align-items: flex-end;
	flex: 0 0 auto !important;
}

.wpgs-footer textarea {
	flex: 1; min-height: 44px; max-height: 120px;
	background: var(--wpgs-bg); border: 1px solid var(--wpgs-border);
	border-radius: var(--wpgs-radius-md); padding: 12px 16px;
	font-size: 14px; color: var(--wpgs-text-main); font-family: 'Vazirmatn', 'Vazir', Tahoma, Arial, sans-serif;
	resize: none; outline: none; transition: var(--wpgs-transition);
	direction: rtl;
}
.wpgs-footer textarea:focus {
	background: var(--wpgs-surface); border-color: var(--wpgs-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.wpgs-btn {
	height: 44px;
	border-radius: var(--wpgs-radius-md);
	border: none;
	background: var(--wpgs-primary);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--wpgs-transition);
	flex-shrink: 0;
}

.wpgs-btn svg {
	display: block!important;
}
.wpgs-btn-alt { background: var(--wpgs-bg); color: var(--wpgs-text-muted); border: 1px solid var(--wpgs-border);font-size:22px;font-weight:900; }
.wpgs-btn-alt:hover { background: var(--wpgs-border); color: var(--wpgs-text-main); }
.wpgs-btn:hover:not(:disabled):not(.wpgs-btn-alt) { background: var(--wpgs-primary-hover); transform: scale(1.05); }
.wpgs-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.wpgs-form-container { padding: 32px 24px; background: var(--wpgs-surface); direction: rtl; }
.wpgs-form-intro { font-size: 14px; color: var(--wpgs-text-muted); margin-bottom: 24px; text-align: center; line-height: 1.6; }

.wpgs-input {
	width: 100%; box-sizing: border-box; padding: 14px 16px; margin-bottom: 16px;
	border-radius: var(--wpgs-radius-md); border: 1px solid var(--wpgs-border);
	background: var(--wpgs-bg); color: var(--wpgs-text-main);
	font-family: 'Vazirmatn', 'Vazir', Tahoma, Arial, sans-serif; font-size: 14px; transition: var(--wpgs-transition);
	min-height:50px; max-height:200px;
}
.wpgs-input:focus {
	background: var(--wpgs-surface); border-color: var(--wpgs-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); outline: none;
}

.wpgs-input.wpgs-verified-locked { background: #f0fdf4 !important; color: #166534 !important; cursor: not-allowed; }
.wpgs-verified-note {
	font-size: 12px; color: #166534; background: #f0fdf4;
	border: 1px solid #bbf7d0; padding: 6px 10px; border-radius: 8px;
	margin: -8px 0 16px; text-align: center;
}

.wpgs-submit-btn {
	width: 100%; padding: 14px; border: none; border-radius: var(--wpgs-radius-md);
	background: var(--wpgs-primary); color: white; font-family: 'Vazirmatn', 'Vazir', Tahoma, Arial, sans-serif; font-size: 15px; font-weight: 600;
	cursor: pointer; transition: var(--wpgs-transition); display: flex; justify-content: center; align-items: center; gap:8px;
}
.wpgs-submit-btn:hover { background: var(--wpgs-primary-hover); }

.wpgs-error-box {
	background: var(--wpgs-error-bg); color: var(--wpgs-error-text);
	padding: 12px 24px; font-size: 13px; text-align: right; border-bottom: 1px solid rgba(239, 68, 68, 0.2);
	animation: wpgs_slideUp 0.2s ease-out; direction: rtl;
}

@keyframes wpgs_slideUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wpgs_spin { 100% { transform: rotate(360deg); } }
.wpgs-spin { animation: wpgs_spin 1s linear infinite; }

#wpgs_expand_btn {
	background: transparent; color: var(--wpgs-text-muted);
	border: none; border-radius: 6px; cursor: pointer;
	padding: 6px; display: flex; align-items: center; justify-content: center;
	transition: var(--wpgs-transition);
}
#wpgs_expand_btn:hover { background: var(--wpgs-bg); color: var(--wpgs-text-main); }

.wpgs-widget.wpgs-expanded {
	top: 0 !important; right: 0 !important; bottom: 0 !important;
	height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important;
	border-y: none !important; box-shadow: 0 20px 40px -10px rgb(0 3 12 / 71%), 0 10px 20px -5px rgb(9 30 25 / 39%)!important;
}
.wpgs-expanded .wpgs-thread { flex: 1 1 0% !important; height: auto !important; min-height: 0 !important; overflow-y: auto !important; }
.wpgs-expanded .wpgs-footer { padding-bottom: 30px !important; }
.wpgs-expanded .wpgs-icon-expand { display: none !important; }
.wpgs-expanded .wpgs-icon-shrink { display: block !important; }
.wpgs-title{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.3; }
.wpgs-title-top{ display:flex; align-items:center; gap:8px; font-weight:700; }

@media(max-width:480px){
	.wpgs-widget{ width:100% !important; max-width:100% !important; left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; height:100dvh !important; max-height:100dvh !important; position:fixed !important; border-radius:0 !important; border:none !important; z-index:999999 !important; overflow:hidden !important; }
	.wpgs-widget.wpgs-show-flex{ display:flex !important; flex-direction:column !important; }
	.wpgs-header{ flex:0 0 auto !important; }
	.wpgs-thread{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; padding:12px !important; }
	.wpgs-footer{ flex:0 0 auto !important; position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; }
	#wpgs_expand_btn{ display:none; }
	#wpgs_floating_btn{ bottom:16px; right:16px; }
}
.wpgs-scroll-bottom { position: absolute; bottom: 120px; left: 24px; background: #ffffff; border: 1px solid var(--wpgs-border); border-radius: 50%; width: 42px; height: 42px; display: none; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.25); z-index: 10; color: var(--wpgs-text-main); transition: var(--wpgs-transition); }
.wpgs-scroll-bottom svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.wpgs-scroll-bottom:hover { background: var(--wpgs-bg); color: var(--wpgs-primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.wpgs-scroll-badge { position: absolute; top: -4px; right: -4px; background: #3b82f6; color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/*
 * ---- Icon/anchor mode ([guest_support_icon], trigger_mode = shortcode) ----
 * The panel's position is intentionally NOT self-determined here (no
 * fixed bottom-right corner like floating mode): it's positioned by
 * .wpgs-icon-anchor, the wrapper widget-icon.js mounts it into — a
 * dropdown hanging from wherever the trigger icon actually sits
 * (usually the header), rather than an independent floating box.
 */
.wpgs-icon-anchor { position: relative; display: inline-flex; }
.wpgs-icon-anchor .wpgs-widget.wpgs-anchored {
	position: absolute !important;
	top: calc(100% + 12px) !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	transform-origin: top right;
	animation: wpgs_dropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes wpgs_dropdownIn {
	from { opacity: 0; transform: scale(0.96) translateY(-6px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Not needed in a small header dropdown: closing = click the icon again,
   and there's nowhere more "full" to expand to without breaking the
   anchored layout. */
.wpgs-widget.wpgs-anchored #wpgs_expand_btn,
.wpgs-widget.wpgs-anchored #wpgs_minimize_btn {
	display: none !important;
}
@media (max-width: 480px) {
	/* Same fullscreen takeover as every other mode on small screens
	   (see the shared .wpgs-widget mobile rules above) — but once
	   fullscreen, the header icon that would normally toggle it closed
	   is covered up, so the close button has to come back here. */
	.wpgs-icon-anchor .wpgs-widget.wpgs-anchored {
		position: fixed !important;
		top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	}
	.wpgs-widget.wpgs-anchored #wpgs_minimize_btn { display: flex !important; }
}

/* Embedded mode has no floating trigger to fall back to (#wpgs_floating_btn
   doesn't exist on the page at all), so "minimize" would hide the panel
   with no way to bring it back — hide it. Fullscreen-expanding an
   in-flow embedded card also isn't a supported layout, so hide that too. */
.wpgs-widget.wpgs-embedded #wpgs_expand_btn,
.wpgs-widget.wpgs-embedded #wpgs_minimize_btn {
	display: none !important;
}

/*
 * ---- Embedded mode ([guest_support_box] on a dedicated page) ----
 * Turns the fixed-position floating panel into a normal in-flow card that
 * sits inside the page content, sized to the page instead of the corner
 * of the viewport, and visible immediately (no fab click needed).
 */
.wpgs-widget.wpgs-embedded {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 640px;
	margin: 0 auto;
	animation: none !important;
	height: 640px;
	max-height: 80vh;
}
.wpgs-widget.wpgs-embedded .wpgs-thread { flex: 1 1 auto !important; }
@media (max-width: 480px) {
	.wpgs-widget.wpgs-embedded { height: 75vh !important; max-height: 75vh !important; border-radius: var(--wpgs-radius-lg) !important; position: relative !important; }
}