/**
 * SupportHub Frontend Styles
 *
 * @package SupportHub
 */

/* =========================================================
   Main Widget
   ========================================================= */

#supporthub {
	position: fixed;
	z-index: 999999;
	bottom: 25px;
	right: 25px;
	font-family: Arial, sans-serif;
	box-sizing: border-box;
}

#supporthub *,
#supporthub *::before,
#supporthub *::after {
	box-sizing: border-box;
}

.supporthub-position-left {
	left: 25px;
	right: auto;
}

.supporthub-position-right {
	right: 25px;
	left: auto;
}


/* =========================================================
   Main Launcher
   ========================================================= */

.supporthub-launcher {
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(
		--supporthub-primary,
		#2563eb
	);
	color: var(
		--supporthub-text,
		#ffffff
	);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.supporthub-launcher:hover {
	transform: scale(1.06);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.supporthub-launcher:focus {
	outline: 3px solid rgba(37, 99, 235, 0.25);
	outline-offset: 3px;
}

.supporthub-launcher .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
}

.supporthub-launcher-icon {
	width: 30px;
	height: 30px;
	object-fit: contain;
}


/* =========================================================
   Launcher Sizes
   ========================================================= */

.supporthub-size-small .supporthub-launcher {
	width: 50px;
	height: 50px;
}

.supporthub-size-small .supporthub-launcher .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.supporthub-size-medium .supporthub-launcher {
	width: 60px;
	height: 60px;
}

.supporthub-size-large .supporthub-launcher {
	width: 70px;
	height: 70px;
}

.supporthub-size-large .supporthub-launcher .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
}


/* =========================================================
   Launcher Animation
   ========================================================= */

#supporthub[data-animation="pulse"]
	.supporthub-launcher {
	animation: supporthub-pulse 2.5s infinite;
}

#supporthub[data-animation="bounce"]
	.supporthub-launcher {
	animation: supporthub-bounce 2s infinite;
}

#supporthub[data-animation="none"]
	.supporthub-launcher {
	animation: none;
}

@keyframes supporthub-pulse {

	0% {
		box-shadow:
			0 8px 25px rgba(0, 0, 0, 0.20);
	}

	50% {
		box-shadow:
			0 8px 25px rgba(0, 0, 0, 0.20),
			0 0 0 10px rgba(37, 99, 235, 0.10);
	}

	100% {
		box-shadow:
			0 8px 25px rgba(0, 0, 0, 0.20);
	}
}

@keyframes supporthub-bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-7px);
	}

	60% {
		transform: translateY(-3px);
	}
}


/* =========================================================
   Options Container
   ========================================================= */

.supporthub-options {
	width: 320px;
	margin-bottom: 14px;
	background: #ffffff;
	border-radius: 16px;
	padding: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.supporthub-options[hidden] {
	display: none;
}

.supporthub-options-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}


/* =========================================================
   Contact Options
   ========================================================= */

.supporthub-option {
	width: 100%;
	min-height: 64px;
	border: 0;
	border-radius: 12px;
	background: #f8fafc;
	color: #111827;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	box-sizing: border-box;
	transition:
		background 0.2s ease,
		transform 0.2s ease;
}

.supporthub-option:hover {
	background: #eef2f7;
	transform: translateY(-1px);
}

.supporthub-option:focus {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.supporthub-option-icon {
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	overflow: hidden;
}

.supporthub-option-icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.supporthub-option-content {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.supporthub-option-content strong {
	font-size: 15px;
	line-height: 20px;
}

.supporthub-option-content small {
	font-size: 12px;
	line-height: 17px;
	color: #6b7280;
}

.supporthub-open-chat {
	font-family: inherit;
}


/* =========================================================
   Live Chat Window
   ========================================================= */

.supporthub-chat {
	width: 360px;
	max-width: calc(100vw - 32px);
	margin-bottom: 14px;
	background: #ffffff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.22);
}

.supporthub-chat[hidden] {
	display: none;
}


/* =========================================================
   Chat Header
   ========================================================= */

.supporthub-chat-header {
	min-height: 68px;
	padding: 14px 16px;
	background: var(
		--supporthub-primary,
		#2563eb
	);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.supporthub-chat-title {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.supporthub-chat-title strong {
	font-size: 17px;
	line-height: 22px;
}

.supporthub-online-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	opacity: 0.95;
}

.supporthub-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	display: inline-block;
}

.supporthub-close-chat {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.supporthub-close-chat:hover {
	background: rgba(255, 255, 255, 0.20);
}

.supporthub-close-chat:focus {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}


/* =========================================================
   Chat Body
   ========================================================= */

.supporthub-chat-body {
	padding: 16px;
	background: #ffffff;
}

.supporthub-welcome-message {
	margin-bottom: 16px;
	padding: 13px;
	border-radius: 12px;
	background: #f8fafc;
	color: #111827;
}

.supporthub-welcome-message strong {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 20px;
}

.supporthub-welcome-message p {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	color: #6b7280;
}


/* =========================================================
   Chat Form
   ========================================================= */

.supporthub-chat-form {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.supporthub-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.supporthub-field label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.supporthub-field input,
.supporthub-field textarea {
	width: 100%;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #ffffff;
	color: #111827;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	outline: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.supporthub-field input {
	height: 42px;
}

.supporthub-field textarea {
	min-height: 95px;
	resize: vertical;
}

.supporthub-field input:focus,
.supporthub-field textarea:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.supporthub-field input::placeholder,
.supporthub-field textarea::placeholder {
	color: #9ca3af;
}


/* =========================================================
   Chat Status
   ========================================================= */

.supporthub-chat-status {
	min-height: 20px;
	font-size: 12px;
	line-height: 18px;
	color: #6b7280;
}

.supporthub-chat-thread { display: flex; flex-direction: column; gap: 12px; }
.supporthub-live-messages { display: flex; flex-direction: column; gap: 10px; max-height: 310px; overflow-y: auto; padding: 4px; }
.supporthub-live-message { max-width: 82%; display: flex; flex-direction: column; gap: 3px; }
.supporthub-live-message-agent { align-self: flex-start; }
.supporthub-live-message-visitor { align-self: flex-end; align-items: flex-end; }
.supporthub-live-bubble { padding: 10px 12px; border-radius: 12px; background: #f1f5f9; color: #111827; font-size: 13px; line-height: 1.45; }
.supporthub-live-message-visitor .supporthub-live-bubble { background: var(--supporthub-primary, #2563eb); color: var(--supporthub-text, #ffffff); }
.supporthub-live-message > span { color: #6b7280; font-size: 10px; }
.supporthub-chat-image { display: block; max-width: 100%; max-height: 220px; margin-top: 8px; border-radius: 8px; }
.supporthub-followup-form { display: flex; flex-direction: column; gap: 8px; }
.supporthub-followup-form textarea { width: 100%; min-height: 68px; padding: 10px; border: 1px solid #d1d5db; border-radius: 10px; font: inherit; resize: vertical; }
.supporthub-followup-actions { display: flex; align-items: center; gap: 8px; }
.supporthub-followup-actions input { max-width: 155px; font-size: 11px; }
.supporthub-followup-actions .supporthub-send-button { width: auto; margin-left: auto; }
.supporthub-chat-credit { margin-top: 14px; padding-top: 11px; border-top: 1px solid #eef2f7; text-align: center; color: #94a3b8; font-size: 10px; line-height: 16px; }
.supporthub-chat-credit a { margin-left: 3px; color: var(--supporthub-primary, #2563eb); font-weight: 700; text-decoration: none; }
.supporthub-chat-credit a:hover, .supporthub-chat-credit a:focus { text-decoration: underline; }
.supporthub-rating-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: #f8fafc; font-size: 13px; }
.supporthub-rating-stars { display: flex; gap: 4px; }
.supporthub-rating-stars button { border: 0; padding: 0; background: transparent; color: #cbd5e1; font-size: 25px; cursor: pointer; }
.supporthub-rating-stars button.is-selected { color: #f59e0b; }

/* Lightweight signature widget skin */
#supporthub .supporthub-launcher {
	position: relative;
	border: 3px solid rgba(255,255,255,.96);
	background: linear-gradient(145deg, var(--supporthub-primary, #2563eb), #0f3e9b);
	box-shadow: 0 12px 28px rgba(15, 60, 145, .28), 0 0 0 5px rgba(37, 99, 235, .11);
}
#supporthub .supporthub-launcher::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.25); border-radius: inherit; }
#supporthub .supporthub-launcher .dashicons, #supporthub .supporthub-launcher-icon { position: relative; z-index: 1; }
#supporthub .supporthub-launcher-ping { position: absolute; z-index: 2; top: 1px; right: 1px; width: 13px; height: 13px; background: #22c55e; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
#supporthub .supporthub-unread-badge { position:absolute; z-index:3; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border:2px solid #fff; border-radius:999px; background:#ef4444; color:#fff; font:700 11px/16px Arial,sans-serif; text-align:center; box-shadow:0 3px 8px rgba(127,29,29,.28); }
#supporthub .supporthub-launcher-message { width: 218px; padding: 11px 14px; border: 1px solid rgba(226,232,240,.85); box-shadow: 0 14px 32px rgba(15,23,42,.13); }
#supporthub .supporthub-launcher-greeting::before { content: '●'; margin-right: 6px; color: #22c55e; font-size: 10px; vertical-align: 1px; }
#supporthub .supporthub-chat { border: 1px solid rgba(226,232,240,.95); border-radius: 20px; box-shadow: 0 20px 50px rgba(15,23,42,.18); }
#supporthub .supporthub-chat-header { position: relative; padding: 17px 18px; background: linear-gradient(125deg, var(--supporthub-primary, #2563eb), #1e40af); }
#supporthub .supporthub-chat-header::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.18); }
#supporthub .supporthub-chat-window-actions { display:flex; gap:7px; position:relative; z-index:1; }
#supporthub .supporthub-minimize-chat { width:34px; height:34px; border:0; border-radius:8px; background:rgba(255,255,255,.12); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
#supporthub .supporthub-minimize-chat:hover { background:rgba(255,255,255,.22); }
#supporthub .supporthub-chat-body { padding: 16px; background: linear-gradient(180deg,#fff 0%,#f8fbff 100%); }
#supporthub .supporthub-welcome-message { border-left: 3px solid var(--supporthub-primary,#2563eb); background: #f1f6ff; }
#supporthub .supporthub-field input, #supporthub .supporthub-field textarea, #supporthub .supporthub-followup-form textarea { border-color: #dbe4f0; background: #fff; }
#supporthub .supporthub-send-button { border-radius: 12px; background: linear-gradient(125deg, var(--supporthub-primary,#2563eb), #1d4ed8); box-shadow: 0 5px 13px rgba(37,99,235,.18); }
#supporthub .supporthub-options { border: 1px solid #e7edf5; box-shadow: 0 16px 38px rgba(15,23,42,.14); }
@media (prefers-reduced-motion: reduce) { #supporthub .supporthub-launcher { transition: none; } }


/* =========================================================
   Send Button
   ========================================================= */

.supporthub-send-button {
	width: 100%;
	min-height: 44px;
	border: 0;
	border-radius: 10px;
	padding: 10px 16px;
	background: var(
		--supporthub-primary,
		#2563eb
	);
	color: var(
		--supporthub-text,
		#ffffff
	);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease,
		box-shadow 0.2s ease;
}

.supporthub-send-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.20);
}

.supporthub-send-button:focus {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.supporthub-send-button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}


/* =========================================================
   Hidden Elements
   ========================================================= */

[hidden] {
	display: none !important;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 480px) {

	#supporthub {
		bottom: 16px;
		right: 16px;
		left: auto;
		max-width: calc(100vw - 32px);
	}

	.supporthub-position-left {
		left: 16px;
		right: auto;
	}

	.supporthub-position-right {
		right: 16px;
		left: auto;
	}

	.supporthub-launcher {
		width: 56px;
		height: 56px;
	}

	.supporthub-options {
		width: min(320px, calc(100vw - 32px));
		margin-bottom: 12px;
	}

	.supporthub-chat {
		width: min(360px, calc(100vw - 32px));
		margin-bottom: 12px;
		border-radius: 16px;
	}

	.supporthub-chat-header {
		min-height: 62px;
		padding: 12px 14px;
	}

	.supporthub-chat-body {
		padding: 14px;
	}

	.supporthub-field input {
		height: 44px;
	}

	.supporthub-field textarea {
		min-height: 90px;
	}

}


/* =========================================================
   Very Small Screens
   ========================================================= */

@media (max-width: 360px) {

	#supporthub {
		bottom: 12px;
		right: 12px;
		left: 12px;
		max-width: none;
	}

	.supporthub-position-left,
	.supporthub-position-right {
		left: 12px;
		right: 12px;
	}

	.supporthub-launcher {
		margin-left: auto;
	}

	.supporthub-options,
	.supporthub-chat {
		width: 100%;
		max-width: 100%;
	}

}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.supporthub-launcher,
	.supporthub-option,
	.supporthub-send-button {
		transition: none;
	}

	#supporthub[data-animation="pulse"]
		.supporthub-launcher,
	#supporthub[data-animation="bounce"]
		.supporthub-launcher {
		animation: none;
	}

}

/* =========================================
   SupportHub Professional Launcher Message
========================================= */

.supporthub-launcher-message {
	position: absolute;
	right: 0;
	bottom: 74px;
	width: 230px;
	padding: 13px 16px;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.16);
	display: flex;
	flex-direction: column;
	gap: 2px;
	box-sizing: border-box;
	animation: supporthub-message-in 0.4s ease;
}

.supporthub-position-left
.supporthub-launcher-message {
	left: 0;
	right: auto;
}

.supporthub-launcher-message::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: #ffffff;
	transform: rotate(45deg);
}

.supporthub-position-left
.supporthub-launcher-message::after {
	left: 20px;
	right: auto;
}

.supporthub-launcher-greeting {
	font-size: 13px;
	font-weight: 600;
	color: var(--supporthub-primary, #2563eb);
}

.supporthub-launcher-message strong {
	position: relative;
	z-index: 1;
	font-size: 16px;
	line-height: 22px;
	color: #111827;
}

.supporthub-launcher-message small {
	position: relative;
	z-index: 1;
	font-size: 12px;
	line-height: 18px;
	color: #6b7280;
}

@keyframes supporthub-message-in {

	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* =========================================
   Live Chat Window
========================================= */

.supporthub-chat {
	position: absolute;
	right: 0;
	bottom: 74px;
	width: 360px;
	max-width: calc(100vw - 32px);
	background: #ffffff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.20);
}

.supporthub-position-left
.supporthub-chat {
	left: 0;
	right: auto;
}

.supporthub-chat[hidden] {
	display: none !important;
}

.supporthub-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	background: var(--supporthub-primary, #2563eb);
	color: #ffffff;
}

.supporthub-chat-title {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.supporthub-online-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	opacity: 0.9;
}

.supporthub-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	display: inline-block;
}

.supporthub-close-chat {
	border: 0;
	background: transparent;
	color: #ffffff;
	font-size: 28px;
	cursor: pointer;
	line-height: 1;
}

.supporthub-chat-body {
	padding: 18px;
}

.supporthub-welcome-message {
	margin-bottom: 18px;
}

.supporthub-welcome-message strong {
	font-size: 17px;
	color: #111827;
}

.supporthub-welcome-message p {
	font-size: 13px;
	line-height: 20px;
	color: #6b7280;
	margin: 6px 0 0;
}

.supporthub-field {
	margin-bottom: 13px;
}

.supporthub-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.supporthub-field input,
.supporthub-field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d1d5db;
	border-radius: 9px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
}

.supporthub-field textarea {
	resize: vertical;
}

.supporthub-send-button {
	width: 100%;
	border: 0;
	border-radius: 10px;
	padding: 12px;
	background: var(--supporthub-primary, #2563eb);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.supporthub-send-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.supporthub-chat-status {
	margin-bottom: 10px;
	font-size: 13px;
	color: #16a34a;
}


/* Mobile */

@media (max-width: 480px) {

	.supporthub-launcher-message {
		width: 220px;
		bottom: 68px;
	}

	.supporthub-chat {
		position: fixed;
		right: 16px;
		bottom: 80px;
		width: calc(100vw - 32px);
		max-height: calc(100vh - 110px);
		overflow-y: auto;
	}

	.supporthub-position-left
	.supporthub-chat {
		left: 16px;
		right: auto;
	}
}
/* Point 1: Compact professional launcher label */
.supporthub-launcher-message {
	width: auto;
	min-width: 0;
	padding: 10px 14px;
	gap: 0;
}

.supporthub-launcher-message strong,
.supporthub-launcher-message small {
	display: none;
}

.supporthub-launcher-greeting {
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
}

/* Point 2: WhatsApp field */
.supporthub-phone-input {
	display: flex;
	align-items: center;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #ffffff;
	overflow: hidden;
}

.supporthub-phone-input:focus-within {
	border-color: var(--supporthub-primary, #2563eb);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.supporthub-phone-prefix {
	padding-left: 12px;
	font-weight: 700;
	color: #4b5563;
}

.supporthub-phone-input input {
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 6px !important;
}

.supporthub-field-help {
	font-size: 11px;
	color: #6b7280;
}