/**
 * Visitor chat widget.
 *
 * Light-first, like every other sheet in this plugin. There are deliberately
 * no `prefers-color-scheme` colour rules: a visitor whose phone is in dark
 * mode must still see this correctly on a light site. Dark is opt-in through
 * `.iptvpo-fe-dark` or `[data-theme="dark"]`, matching the rest of the plugin.
 *
 * @package IPTVPO
 */

/*
 * `hidden` must actually hide.
 *
 * The browser's own stylesheet says `[hidden] { display: none }`, but that is
 * specificity 0,1,0 — exactly the same as `.iptvpo-lvchat__panel` below, and
 * an author sheet beats the user-agent sheet on a tie. So `display: flex` won,
 * the panel rendered permanently, the close button did nothing, and the open
 * panel covered the round bubble. This rule has to come first and win.
 */
.iptvpo-lvchat [hidden],
.iptvpo-lvchat__panel[hidden] {
	display: none !important;
}

.iptvpo-lvchat {
	position: fixed;
	z-index: 99990;
	font-family: inherit;
}

.iptvpo-lvchat--bottom-right {
	inset-block-end: 22px;
	inset-inline-end: 22px;
}

.iptvpo-lvchat--bottom-left {
	inset-block-end: 22px;
	inset-inline-start: 22px;
}

.iptvpo-lvchat--top-right {
	inset-block-start: 22px;
	inset-inline-end: 22px;
}

.iptvpo-lvchat--top-left {
	inset-block-start: 22px;
	inset-inline-start: 22px;
}

/*
 * The bubble is a button, and themes style buttons hard — Woodmart sets
 * width, padding, border-radius, min-height and background on every
 * `button` element. Each of those turned the circle into a rounded
 * rectangle. Every property a theme is likely to touch is therefore pinned
 * here, and the box is made square explicitly rather than relying on the
 * icon to size it.
 */
.iptvpo-lvchat__bubble {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	inline-size: 56px !important;
	block-size: 56px !important;
	min-inline-size: 56px !important;
	min-block-size: 56px !important;
	max-inline-size: 56px !important;
	max-block-size: 56px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var( --iptvpo-chat-accent, #16a34a ) !important;
	background-image: none !important;
	color: var( --iptvpo-chat-glyph, #fff ) !important;
	line-height: 1 !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.22 );
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/*
 * The glyph inherits the chosen colour. `!important` because icons.css sets
 * a stroke colour of its own and themes recolour SVGs inside buttons.
 */
.iptvpo-lvchat__bubble svg,
.iptvpo-lvchat__bubble .iptvpo-icon {
	inline-size: 24px !important;
	block-size: 24px !important;
	color: var( --iptvpo-chat-glyph, #fff ) !important;
	stroke: currentColor !important;
	fill: none !important;
}

.iptvpo-lvchat__bubble:hover,
.iptvpo-lvchat__bubble:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 14px 34px rgba( 15, 23, 42, 0.28 );
}

.iptvpo-lvchat__bubble:focus-visible {
	outline: 3px solid rgba( 22, 163, 74, 0.45 );
	outline-offset: 3px;
}

/* A custom bubble image fills the circle without distorting. */
.iptvpo-lvchat__img {
	inline-size: 30px !important;
	block-size: 30px !important;
	object-fit: contain !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	max-inline-size: none !important;
}

.iptvpo-lvchat__bubble-icon {
	display: inline-flex;
	color: var( --iptvpo-chat-glyph, #fff );
}

/*
 * Unread counter, as on the reference image: a small circle clipped to the
 * top-right of the bubble with a white ring separating it from the fill.
 */
.iptvpo-lvchat__badge {
	position: absolute;
	inset-block-start: -3px;
	inset-inline-end: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 22px;
	block-size: 22px;
	padding: 0 5px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
	pointer-events: none;
}

.iptvpo-lvchat__badge[hidden] {
	display: none !important;
}

.iptvpo-lvchat__panel {
	position: absolute;
	inline-size: min( 340px, calc( 100vw - 36px ) );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba( 15, 23, 42, 0.1 );
	border-radius: 20px;
	background: rgba( 255, 255, 255, 0.92 );
	backdrop-filter: blur( 18px ) saturate( 140% );
	box-shadow: 0 24px 60px rgba( 15, 23, 42, 0.2 );
}

.iptvpo-lvchat--bottom-right .iptvpo-lvchat__panel,
.iptvpo-lvchat--bottom-left .iptvpo-lvchat__panel {
	inset-block-end: 70px;
}

.iptvpo-lvchat--top-right .iptvpo-lvchat__panel,
.iptvpo-lvchat--top-left .iptvpo-lvchat__panel {
	inset-block-start: 70px;
}

.iptvpo-lvchat--bottom-right .iptvpo-lvchat__panel,
.iptvpo-lvchat--top-right .iptvpo-lvchat__panel {
	inset-inline-end: 0;
}

.iptvpo-lvchat--bottom-left .iptvpo-lvchat__panel,
.iptvpo-lvchat--top-left .iptvpo-lvchat__panel {
	inset-inline-start: 0;
}

.iptvpo-lvchat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	background: var( --iptvpo-chat-accent, #16a34a );
	color: #fff;
}

.iptvpo-lvchat__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.iptvpo-lvchat__close {
	display: inline-flex;
	padding: 4px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.iptvpo-lvchat__close:focus-visible {
	outline: 2px solid rgba( 255, 255, 255, 0.8 );
	outline-offset: 2px;
}

.iptvpo-lvchat__log {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-block-size: 300px;
	min-block-size: 140px;
	padding: 16px;
	overflow-y: auto;
	background: #f8fafc;
}

.iptvpo-lvchat__greeting {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #475569;
}

.iptvpo-lvchat__msg {
	max-inline-size: 84%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.45;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.iptvpo-lvchat__msg--visitor {
	align-self: flex-end;
	background: var( --iptvpo-chat-accent, #16a34a );
	color: #fff;
	border-end-end-radius: 4px;
}

.iptvpo-lvchat__msg--agent {
	align-self: flex-start;
	background: #fff;
	color: #0f172a;
	border: 1px solid rgba( 15, 23, 42, 0.08 );
	border-end-start-radius: 4px;
}

.iptvpo-lvchat__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-block-start: 1px solid rgba( 15, 23, 42, 0.08 );
	background: #fff;
}

.iptvpo-lvchat__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: 10px 13px;
	border: 1px solid rgba( 15, 23, 42, 0.14 );
	border-radius: 999px;
	background: #f8fafc;
	color: #0f172a;
	font-size: 13px;
}

.iptvpo-lvchat__input:focus-visible {
	outline: 2px solid rgba( 22, 163, 74, 0.5 );
	outline-offset: 1px;
}

.iptvpo-lvchat__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var( --iptvpo-chat-accent, #16a34a );
	color: #fff;
	cursor: pointer;
}

.iptvpo-lvchat__send:focus-visible {
	outline: 2px solid rgba( 22, 163, 74, 0.5 );
	outline-offset: 2px;
}

/* Opt-in dark theme, never automatic. */
.iptvpo-fe-dark .iptvpo-lvchat__panel,
[data-theme="dark"] .iptvpo-lvchat__panel {
	border-color: rgba( 255, 255, 255, 0.12 );
	background: rgba( 17, 24, 39, 0.94 );
}

.iptvpo-fe-dark .iptvpo-lvchat__log,
[data-theme="dark"] .iptvpo-lvchat__log {
	background: #0f172a;
}

.iptvpo-fe-dark .iptvpo-lvchat__greeting,
[data-theme="dark"] .iptvpo-lvchat__greeting {
	color: #cbd5f5;
}

.iptvpo-fe-dark .iptvpo-lvchat__msg--agent,
[data-theme="dark"] .iptvpo-lvchat__msg--agent {
	background: #1e293b;
	border-color: rgba( 255, 255, 255, 0.1 );
	color: #e2e8f0;
}

.iptvpo-fe-dark .iptvpo-lvchat__form,
[data-theme="dark"] .iptvpo-lvchat__form {
	background: #111827;
	border-block-start-color: rgba( 255, 255, 255, 0.1 );
}

.iptvpo-fe-dark .iptvpo-lvchat__input,
[data-theme="dark"] .iptvpo-lvchat__input {
	background: #0f172a;
	border-color: rgba( 255, 255, 255, 0.14 );
	color: #e2e8f0;
}

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

	.iptvpo-lvchat__bubble {
		transition: none;
	}

	.iptvpo-lvchat__bubble:hover,
	.iptvpo-lvchat__bubble:focus-visible {
		transform: none;
	}
}

@media ( forced-colors: active ) {

	.iptvpo-lvchat__bubble,
	.iptvpo-lvchat__send {
		border: 1px solid ButtonText;
	}
}

.iptvpo-lvchat__typing {
	margin: 0;
	padding: 4px 16px 8px;
	font-size: 12px;
	font-style: italic;
	color: #64748b;
	background: #f8fafc;
}

.iptvpo-lvchat__lead {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 12px;
	border-block-start: 1px solid rgba( 15, 23, 42, 0.08 );
	background: #fff;
}

.iptvpo-lvchat__leadnote {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: #475569;
}

/*
 * Stacked, not side by side.
 *
 * A country name plus its dial code ("United Arab Emirates (+971)") cannot
 * fit in 45% of a 340px panel, so the text was clipping into the number
 * field. Full width each, and the select truncates with an ellipsis rather
 * than overlapping its neighbour.
 */
.iptvpo-lvchat__phone {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.iptvpo-lvchat__dial {
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	text-overflow: ellipsis;
	padding: 9px 8px;
	border: 1px solid rgba( 15, 23, 42, 0.14 );
	border-radius: 10px;
	background: #f8fafc;
	color: #0f172a;
	font-size: 12px;
}

.iptvpo-lvchat__phone .iptvpo-lvchat__input {
	inline-size: 100%;
	border-radius: 10px;
}

.iptvpo-lvchat__leadsend {
	padding: 9px 14px;
	border: 0;
	border-radius: 10px;
	background: var( --iptvpo-chat-accent, #16a34a );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.iptvpo-fe-dark .iptvpo-lvchat__lead,
[data-theme="dark"] .iptvpo-lvchat__lead {
	background: #111827;
	border-block-start-color: rgba( 255, 255, 255, 0.1 );
}

.iptvpo-fe-dark .iptvpo-lvchat__dial,
[data-theme="dark"] .iptvpo-lvchat__dial {
	background: #0f172a;
	border-color: rgba( 255, 255, 255, 0.14 );
	color: #e2e8f0;
}

/* One-tap questions shown to the customer. */
.iptvpo-lvchat__faqs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px 12px;
	background: #f8fafc;
}

.iptvpo-lvchat__faq {
	padding: 7px 12px;
	border: 1px solid var( --iptvpo-chat-accent, #16a34a );
	border-radius: 999px;
	background: #fff;
	color: var( --iptvpo-chat-accent, #16a34a );
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.iptvpo-lvchat__faq:hover,
.iptvpo-lvchat__faq:focus-visible {
	background: var( --iptvpo-chat-accent, #16a34a );
	color: #fff;
}

/*
 * The WhatsApp pill sits in the same strip as the one-tap questions, so it
 * shares their shape. It keeps WhatsApp's own green rather than the chat
 * accent colour, because that green is the thing customers recognise.
 */
/*
 * Full-width green bar beneath "Save my details". It is the last thing in the
 * panel before the message box, so it reads as the alternative to typing.
 */
.iptvpo-lvchat__wa {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 14px;
	border-block-start: 1px solid rgba( 15, 23, 42, 0.08 );
	background: #25d366 !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
}

.iptvpo-lvchat__wa:hover,
.iptvpo-lvchat__wa:focus-visible {
	background: #1eb855 !important;
	color: #fff !important;
}

.iptvpo-lvchat__wa-icon {
	display: inline-flex;
	color: #fff;
}

.iptvpo-lvchat__wa svg {
	color: #fff !important;
	stroke: currentColor !important;
}

.iptvpo-fe-dark .iptvpo-lvchat__faqs,
[data-theme="dark"] .iptvpo-lvchat__faqs {
	background: #0f172a;
}

.iptvpo-fe-dark .iptvpo-lvchat__faq,
[data-theme="dark"] .iptvpo-lvchat__faq {
	background: #1e293b;
}

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

	.iptvpo-lvchat__faq {
		transition: none;
	}
}