/**
 * DiviFlash Chat — frontend styles.
 *
 * Every colour and size comes in as a CSS variable on #difl-chat (set inline by
 * includes/feature/Chat.php), so this file is static and cacheable.
 */
.difl-chat {
	position: fixed;
	bottom: var(--df-chat-y, 24px);
	z-index: var(--df-chat-z, 9999);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	color: #1f2937;
	-webkit-font-smoothing: antialiased;
}
.difl-chat--right { right: var(--df-chat-x, 24px); }
.difl-chat--left  { left: var(--df-chat-x, 24px); align-items: flex-start; }

.difl-chat *,
.difl-chat *::before,
.difl-chat *::after { box-sizing: border-box; }

.difl-chat svg { display: block; width: 1em; height: 1em; }
/* A chat item's Custom Icon stands in for the channel SVG at the same size. */
.difl-chat .difl-chat__icon-img { display: block; width: 1em; height: 1em; object-fit: contain; border-radius: 0; }

/* ── Launcher: the bubble, which stretches into a pill when it carries a label ── */
.difl-chat__launcher { display: flex; align-items: center; }

.difl-chat__bubble {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-width: var(--df-chat-size, 60px);
	height: var(--df-chat-size, 60px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--df-chat-bubble-radius, 100px);
	background: var(--df-chat-bubble-bg, var(--df-chat-accent, #3D4DFF));
	color: var(--df-chat-bubble-icon, #fff);
	font-family: inherit;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.difl-chat--shadow .difl-chat__bubble { box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .45); }
.difl-chat__bubble:hover { transform: scale(1.04); }
.difl-chat__bubble:focus-visible { outline: 3px solid var(--df-chat-bubble-bg, var(--df-chat-accent)); outline-offset: 3px; }

/* The icon area is always one bubble-size square; the open/close glyphs cross-fade inside it. */
.difl-chat__bubble-media {
	position: relative;
	flex: none;
	width: var(--df-chat-size, 60px);
	height: var(--df-chat-size, 60px);
}
.difl-chat__bubble-icon,
.difl-chat__bubble-close {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--df-chat-size, 60px) * .46);
	transition: transform .25s ease, opacity .25s ease;
}
.difl-chat__bubble-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.difl-chat.is-open .difl-chat__bubble-icon { opacity: 0; transform: rotate(90deg) scale(.6); }
.difl-chat.is-open .difl-chat__bubble-close { opacity: 1; transform: none; }

/* Custom image: fills the icon area, the bubble background becomes its backdrop. */
.difl-chat__bubble-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.difl-chat--bubble-image .difl-chat__bubble-media { border-radius: inherit; overflow: hidden; }
/* Attention Prompt image: replaces the bubble icon while the prompt is showing (.is-prompting). */
.difl-chat__bubble-prompt { position: absolute; inset: 0; overflow: hidden; border-radius: var(--df-chat-bubble-radius, 100px); opacity: 0; transform: scale(.6); transition: transform .25s ease, opacity .25s ease; }
.difl-chat__bubble-prompt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.difl-chat.is-prompting .difl-chat__bubble-prompt { opacity: 1; transform: none; }
.difl-chat.is-prompting .difl-chat__bubble-icon { opacity: 0; transform: scale(.6); }
.difl-chat--bubble-image.is-open .difl-chat__bubble-close { background: var(--df-chat-bubble-bg, var(--df-chat-accent, #3D4DFF)); }

/* Label inside the bubble. */
.difl-chat__bubble-label {
	display: block;
	max-width: 260px;
	padding: 0 22px 0 0;
	overflow: hidden;
	color: inherit;
	font-size: var(--df-chat-label-size, 15px);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: max-width .3s ease, opacity .2s ease, padding .3s ease;
}
.difl-chat--left .difl-chat__bubble { flex-direction: row-reverse; }
.difl-chat--left .difl-chat__bubble-label { padding: 0 0 0 22px; }

/* Show Label: On Hover — the pill collapses to a circle until hovered or focused. */
.difl-chat--label-hover .difl-chat__bubble-label { max-width: 0; padding: 0; opacity: 0; }
.difl-chat--label-hover .difl-chat__bubble:hover .difl-chat__bubble-label,
.difl-chat--label-hover .difl-chat__bubble:focus-visible .difl-chat__bubble-label { max-width: 260px; padding: 0 22px 0 0; opacity: 1; }
.difl-chat--label-hover.difl-chat--left .difl-chat__bubble:hover .difl-chat__bubble-label,
.difl-chat--label-hover.difl-chat--left .difl-chat__bubble:focus-visible .difl-chat__bubble-label { padding: 0 0 0 22px; }

/* Pulse ring behind the bubble while the box is closed. */
.difl-chat--pulse .difl-chat__bubble::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--df-chat-bubble-bg, var(--df-chat-accent, #3D4DFF));
	opacity: .45;
	animation: difl-chat-pulse 2.2s ease-out infinite;
	z-index: -1;
}
.difl-chat--pulse.is-open .difl-chat__bubble::before { animation: none; opacity: 0; }
@keyframes difl-chat-pulse {
	0%   { transform: scale(1);   opacity: .45; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ── Chat box ──────────────────────────────────────────────────────────── */
.difl-chat__box {
	width: var(--df-chat-width, 340px);
	max-width: calc(100vw - 2 * var(--df-chat-x, 24px));
	max-height: calc(100vh - var(--df-chat-y, 24px) - var(--df-chat-size, 60px) - 40px);
	overflow: hidden auto;
	border-radius: var(--df-chat-radius, 16px);
	background: var(--df-chat-body-bg, #fff);
	box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .45), 0 2px 10px rgba(15, 23, 42, .08);
	transform-origin: bottom right;
	animation: difl-chat-slide-up .28s cubic-bezier(.2, .8, .2, 1) both;
}
.difl-chat--left .difl-chat__box { transform-origin: bottom left; }
.difl-chat__box[hidden] { display: none; }
.difl-chat--anim-fade .difl-chat__box { animation-name: difl-chat-fade; }
.difl-chat--anim-zoom .difl-chat__box { animation-name: difl-chat-zoom; }
@keyframes difl-chat-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes difl-chat-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes difl-chat-zoom     { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

.difl-chat__header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: var(--df-chat-header-pad, 20px);
	background: var(--df-chat-header-bg, var(--df-chat-accent, #3D4DFF));
	color: var(--df-chat-header-text, #fff);
}
.difl-chat__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.difl-chat__title { font-size: var(--df-chat-title-size, 18px); font-weight: 700; line-height: 1.2; color: inherit; }
.difl-chat__subtitle { font-size: var(--df-chat-subtitle-size, 14px); opacity: .85; }

.difl-chat__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -6px -6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: .8;
	font-size: 20px;
	cursor: pointer;
	align-self: flex-start;
}
.difl-chat__close:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
.difl-chat__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Header picture: the Header Image, or the channel / chat icon on its tile (Header Image Corner shapes both). */
.difl-chat__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--df-chat-header-image, 56px);
	height: var(--df-chat-header-image, 56px);
	overflow: hidden;
	border-radius: var(--df-chat-header-image-radius, 100px);
	background: var(--df-chat-header-icon-bg, #fff);
	border: 3px solid rgba(255, 255, 255, .55);
}
.difl-chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.difl-chat__avatar--icon { color: var(--df-chat-header-icon, var(--df-chat-item, var(--df-chat-accent, #3D4DFF))); font-size: calc(var(--df-chat-header-image, 56px) * .5); }

.difl-chat__body { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 220px; padding: var(--df-chat-body-pad, 18px); }

/* Greeting bubble (Start Chat Bar / Channel Buttons): small avatar = the header picture. */
.difl-chat__message { display: flex; align-items: flex-start; gap: 10px; }
.difl-chat__message-avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: var(--df-chat-header-image-radius, 100px);
	background: var(--df-chat-header-icon-bg, #fff);
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
	font-size: 18px;
}
.difl-chat__message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.difl-chat__message-avatar--icon { color: var(--df-chat-header-icon, var(--df-chat-item, var(--df-chat-accent, #3D4DFF))); }
.difl-chat__message-text {
	padding: 12px 14px;
	border-radius: var(--df-chat-msg-radius, 14px);
	border-top-left-radius: 4px;
	background: var(--df-chat-msg-bg, #F1F3F6);
	color: var(--df-chat-msg-text, #1f2937);
	font-size: var(--df-chat-msg-size, 15px);
	white-space: pre-line;
}

/* Start Chat Bar: the text, then every channel as a white icon circle. */
.difl-chat__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 16px;
	border-radius: var(--df-chat-btn-radius, 12px);
	background: var(--df-chat-bar-bg, var(--df-chat-accent, #3D4DFF));
	color: var(--df-chat-bar-text, #fff);
	font-size: 16px;
	font-weight: 700;
}
.difl-chat__bar-icons { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--df-chat-btn-gap, 8px); }
.difl-chat__bar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--df-chat-btn-icon, 22px) + 14px);
	height: calc(var(--df-chat-btn-icon, 22px) + 14px);
	border-radius: 50%;
	background: #fff;
	color: var(--df-chat-item, var(--df-chat-accent, #3D4DFF)) !important;
	font-size: var(--df-chat-btn-icon, 22px);
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
.difl-chat__bar-icon:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(15, 23, 42, .25); }
.difl-chat__bar-icon:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Channel Buttons: one row of equal-width buttons, one per channel; the Button Text sits above it. */
.difl-chat__channels { display: flex; flex-direction: column; gap: 8px; }
.difl-chat__buttons-text { margin: 0; color: var(--df-chat-msg-text, #1f2937); font-size: 14px; font-weight: 600; text-align: center; }
.difl-chat__buttons { display: flex; flex-wrap: wrap; gap: var(--df-chat-btn-gap, 8px); }
.difl-chat__button {
	flex: 1 1 var(--df-chat-btn-height, 44px);
	min-width: var(--df-chat-btn-height, 44px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--df-chat-btn-height, 44px);
	border-radius: var(--df-chat-btn-radius, 12px);
	background: var(--df-chat-item, var(--df-chat-accent, #3D4DFF));
	color: #fff !important;
	font-size: var(--df-chat-btn-icon, 22px);
	text-decoration: none !important;
	transition: filter .15s ease, transform .15s ease;
}
.difl-chat__button.has-text { flex-basis: auto; padding: 0 18px; }
.difl-chat__button-text { font-size: var(--df-chat-btn-font, 15px); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.difl-chat__button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.difl-chat__button:focus-visible { outline: 3px solid var(--df-chat-item, var(--df-chat-accent)); outline-offset: 2px; }

/* Button Colours: Custom Colours replace each channel's brand colour on the Channel Buttons. */
.difl-chat--btn-custom .difl-chat__button { background: var(--df-chat-btn-bg, var(--df-chat-accent, #3D4DFF)); color: var(--df-chat-btn-fg, #fff) !important; }
.difl-chat--btn-custom .difl-chat__button-text { color: var(--df-chat-btn-label, #fff); }

/* ── Attention Prompt: a card above the bubble that invites new visitors to chat ── */
.difl-chat__prompt {
	position: relative;
	width: var(--df-chat-prompt-width, 300px);
	max-width: calc(100vw - 2 * var(--df-chat-x, 24px));
	padding: 18px 20px 20px;
	border-radius: var(--df-chat-prompt-radius, 8px);
	background: var(--df-chat-prompt-bg, #fff);
	color: var(--df-chat-prompt-text, #1f2937);
	box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .35), 0 2px 8px rgba(15, 23, 42, .08);
	animation: difl-chat-slide-up .28s cubic-bezier(.2, .8, .2, 1) both;
}
.difl-chat__prompt[hidden] { display: none; }
.difl-chat__prompt-text { margin: 0 0 14px; padding-right: 14px; color: inherit; font-size: var(--df-chat-prompt-size, 18px); line-height: 1.4; }
.difl-chat__prompt-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 4px;
	background: var(--df-chat-prompt-btn-bg, var(--df-chat-accent, #3D4DFF));
	color: var(--df-chat-prompt-btn-text, #fff);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	transition: filter .15s ease;
}
.difl-chat__prompt-btn:hover { filter: brightness(1.08); }
.difl-chat__prompt-btn:focus-visible { outline: 3px solid var(--df-chat-prompt-btn-bg, var(--df-chat-accent)); outline-offset: 2px; }
/* The dismiss cross appears on hover (always on touch screens), like Help Scout's. */
.difl-chat__prompt-close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 14px;
	opacity: 0;
	cursor: pointer;
	transition: opacity .15s ease;
}
.difl-chat__prompt:hover .difl-chat__prompt-close,
.difl-chat__prompt-close:focus-visible { opacity: .6; }
.difl-chat__prompt-close:hover { opacity: 1; }
@media (hover: none) { .difl-chat__prompt-close { opacity: .6; } }

/* ── Device visibility ─────────────────────────────────────────────────── */
@media screen and (min-width: 1025px) { .difl-chat--hide-desktop { display: none !important; } }
@media screen and (min-width: 768px) and (max-width: 1024px) { .difl-chat--hide-tablet { display: none !important; } }
@media screen and (max-width: 767px) { .difl-chat--hide-mobile { display: none !important; } }

/* Small screens: the box spans the viewport width; the pill label gives way to the icon. */
@media screen and (max-width: 480px) {
	.difl-chat__box { width: calc(100vw - 2 * var(--df-chat-x, 24px)); }
	.difl-chat__bubble-label { max-width: 160px; }
}

/* RTL: mirror the pill. */
[dir="rtl"] .difl-chat__bubble { flex-direction: row-reverse; }
[dir="rtl"] .difl-chat--left .difl-chat__bubble { flex-direction: row; }
[dir="rtl"] .difl-chat__bubble-label { padding: 0 0 0 22px; }
[dir="rtl"] .difl-chat--left .difl-chat__bubble-label { padding: 0 22px 0 0; }
[dir="rtl"] .difl-chat__message-text { border-top-left-radius: var(--df-chat-msg-radius, 14px); border-top-right-radius: 4px; }

/* Reduced motion: no animations, instant states. */
@media (prefers-reduced-motion: reduce) {
	.difl-chat__box,
	.difl-chat__prompt,
	.difl-chat--pulse .difl-chat__bubble::before { animation: none !important; }
	.difl-chat__bubble,
	.difl-chat__bubble-icon,
	.difl-chat__bubble-close,
	.difl-chat__bubble-label,
	.difl-chat__bubble-prompt,
	.difl-chat__bar-icon,
	.difl-chat__button { transition: none !important; }
}