/* check-you.to support chat — enterprise widget. Scoped .cysup, light/dark, responsive. */

.cysup *, .cysup *::before, .cysup *::after { box-sizing: border-box; }
.cysup [hidden] { display: none !important; }
/* neutralize the site's global form-element styles (e.g. label{margin:10px 0 6px}) that
   otherwise mis-size/misalign the composer controls */
.cysup button, .cysup input, .cysup textarea, .cysup label, .cysup select {
	margin: 0; font-family: inherit; line-height: normal;
}

.cysup {
	/* ── brand palette (subtle blue; white text passes WCAG AA on the gradient).
	   To switch to coral-pink: --cs-grad: linear-gradient(135deg,#e95c79,#d23b5e);
	   --cs-accent:#cf3a5e; --cs-ring:rgba(207,58,94,.22); --cs-vis:#fdeaee; --cs-vis-tx:#7a1230;
	   and in the dark block --cs-vis:#5a2233; --cs-vis-tx:#ffdfe6. ── */
	--cs-grad: linear-gradient(135deg, #3366d6 0%, #2a52bf 100%);
	--cs-accent: #2a52bf;
	--cs-ring: rgba(51, 102, 214, .22);
	--cs-bg: #ffffff;
	--cs-bg-soft: #f4f6fb;
	--cs-text: #19212e;
	--cs-text-soft: #5d6878;
	--cs-text-faint: #98a2b3;
	--cs-border: #e5e9f1;
	--cs-border-soft: #eef1f7;
	--cs-vis: #e8effd;
	--cs-vis-tx: #163172;
	--cs-adm: #ffffff;
	--cs-adm-tx: #19212e;
	--cs-shadow: 0 16px 48px -8px rgba(20, 28, 48, .24), 0 4px 12px -4px rgba(20, 28, 48, .12);
	--cs-shadow-bubble: 0 8px 20px -4px rgba(26, 54, 120, .38);
	--cs-r-panel: 20px;
	--cs-r-msg: 18px;
	--cs-r-ctl: 13px;
	--cs-ease: cubic-bezier(.22, 1, .36, 1);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .cysup {
	--cs-bg: #181c23;
	--cs-bg-soft: #10131a;
	--cs-text: #eaedf3;
	--cs-text-soft: #a4adbd;
	--cs-text-faint: #6d7787;
	--cs-border: #29303b;
	--cs-border-soft: #222832;
	--cs-vis: #213a6b;
	--cs-vis-tx: #dde8ff;
	--cs-adm: #252c37;
	--cs-adm-tx: #eaedf3;
	--cs-shadow: 0 18px 52px -8px rgba(0, 0, 0, .66), 0 4px 14px -4px rgba(0, 0, 0, .5);
	--cs-shadow-bubble: 0 10px 24px -4px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) .cysup {
		--cs-bg: #181c23; --cs-bg-soft: #10131a; --cs-text: #eaedf3; --cs-text-soft: #a4adbd;
		--cs-text-faint: #6d7787; --cs-border: #29303b; --cs-border-soft: #222832;
		--cs-vis: #213a6b; --cs-vis-tx: #dde8ff; --cs-adm: #252c37; --cs-adm-tx: #eaedf3;
		--cs-shadow: 0 18px 52px -8px rgba(0, 0, 0, .66), 0 4px 14px -4px rgba(0, 0, 0, .5);
		--cs-shadow-bubble: 0 10px 24px -4px rgba(0, 0, 0, .6);
	}
}

/* ───────── Launcher ───────── */
.cysup__bubble {
	position: fixed; right: 22px; bottom: 22px;
	width: 60px; height: 60px;
	border: 0; padding: 0; margin: 0; border-radius: 50%;
	cursor: pointer; z-index: 2147483000; color: #fff;
	background: var(--cs-grad);
	box-shadow: var(--cs-shadow-bubble);
	display: flex; align-items: center; justify-content: center;
	transition: transform .25s var(--cs-ease), box-shadow .25s var(--cs-ease), opacity .25s var(--cs-ease);
}
.cysup__bubble:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -4px rgba(23,32,51,.42); }
.cysup__bubble:active { transform: scale(.94); }
.cysup__bubble:focus-visible { outline: 3px solid var(--cs-accent); outline-offset: 3px; }
/* banned visitor → whole widget hidden; boot → bubble hidden until we confirm not-banned */
.cysup--banned { display: none !important; }
.cysup--boot .cysup__bubble { opacity: 0; transform: scale(.5); pointer-events: none; }
.cysup__bubble-ic, .cysup__bubble-close {
	position: absolute; width: 28px; height: 28px;
	transition: opacity .2s var(--cs-ease), transform .3s var(--cs-ease);
}
.cysup__bubble-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.cysup.is-open .cysup__bubble-ic { opacity: 0; transform: rotate(90deg) scale(.6); }
.cysup.is-open .cysup__bubble-close { opacity: 1; transform: none; }

/* operator presence on the launcher: grey when offline, green dot when online */
.cysup.is-offline .cysup__bubble { background: linear-gradient(135deg, #8b94a4 0%, #6c7585 100%); }
.cysup__presence {
	position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px;
	border-radius: 50%; background: #2ec66e; border: 2.5px solid var(--cs-bg);
	opacity: 0; transform: scale(.4); transition: opacity .2s var(--cs-ease), transform .2s var(--cs-ease);
}
.cysup.is-online .cysup__presence { opacity: 1; transform: none; }
.cysup.is-open .cysup__presence { opacity: 0; }

/* unread attention pulse while the chat is collapsed */
.cysup.has-unread:not(.is-open) .cysup__bubble { animation: cs-attn 1.6s ease-in-out infinite; }
@keyframes cs-attn {
	0%   { box-shadow: var(--cs-shadow-bubble), 0 0 0 0 rgba(240, 65, 58, .5); }
	70%  { box-shadow: var(--cs-shadow-bubble), 0 0 0 13px rgba(240, 65, 58, 0); }
	100% { box-shadow: var(--cs-shadow-bubble), 0 0 0 0 rgba(240, 65, 58, 0); }
}

.cysup__badge {
	position: absolute; top: -3px; right: -3px;
	min-width: 21px; height: 21px; padding: 0 6px;
	border-radius: 11px; background: #f0413a; color: #fff;
	font-size: 12px; font-weight: 700; line-height: 21px; text-align: center;
	box-shadow: 0 0 0 2.5px var(--cs-bg); animation: cs-pop .3s var(--cs-ease);
}
@keyframes cs-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ───────── Panel ───────── */
.cysup__panel {
	position: fixed; right: 22px; bottom: 96px;
	width: 384px; max-width: calc(100vw - 32px);
	height: 620px; max-height: calc(100vh - 120px);
	background: var(--cs-bg);
	border: 1px solid var(--cs-border-soft);
	border-radius: var(--cs-r-panel);
	box-shadow: var(--cs-shadow);
	z-index: 2147483001;
	display: flex; flex-direction: column; overflow: hidden;
	transform-origin: bottom right;
	animation: cs-in .26s var(--cs-ease);
}
@keyframes cs-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.cysup__panel, .cysup__bubble, .cysup__bubble-ic, .cysup__bubble-close, .cysup__msg-in { animation: none !important; transition: none !important; }
}

/* ───────── Header ───────── */
.cysup__head {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px; color: #fff; background: var(--cs-grad);
	flex: none;
}
.cysup__head-av {
	width: 40px; height: 40px; flex: none; border-radius: 50%;
	background: rgba(255,255,255,.18);
	display: flex; align-items: center; justify-content: center;
}
.cysup__head-av svg { width: 22px; height: 22px; }
.cysup__head-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cysup__name { font-weight: 700; font-size: 15.5px; line-height: 1.15; letter-spacing: .1px; }
.cysup__status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .94; }
.cysup__dot { width: 8px; height: 8px; border-radius: 50%; background: #cfd3da; flex: none; }
.cysup.is-online .cysup__dot { background: #43d17a; box-shadow: 0 0 0 0 rgba(67,209,122,.6); animation: cs-pulse 2s infinite; }
@keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 rgba(67,209,122,.55); } 70% { box-shadow: 0 0 0 6px rgba(67,209,122,0); } 100% { box-shadow: 0 0 0 0 rgba(67,209,122,0); } }
.cysup__close {
	width: 34px; height: 34px; flex: none; border: 0; padding: 0; border-radius: 9px;
	background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.cysup__close:hover { background: rgba(255,255,255,.3); }
.cysup__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.cysup__close svg { width: 18px; height: 18px; }

/* ───────── Body / messages ───────── */
.cysup__body {
	flex: 1; overflow-y: auto; padding: 16px 14px 18px;
	background: var(--cs-bg-soft);
	display: flex; flex-direction: column; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: var(--cs-border) transparent;
}
.cysup__body::-webkit-scrollbar { width: 8px; }
.cysup__body::-webkit-scrollbar-thumb { background: var(--cs-border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.cysup__body::-webkit-scrollbar-thumb:hover { background: var(--cs-text-faint); }

.cysup__intro {
	display: flex; gap: 10px; align-items: flex-start;
	background: var(--cs-bg); border: 1px solid var(--cs-border-soft);
	border-radius: 16px; padding: 13px 14px; box-shadow: 0 2px 6px rgba(23,32,51,.04);
}
.cysup__intro-av { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--cs-grad); color: #fff; display: flex; align-items: center; justify-content: center; }
.cysup__intro-av svg { width: 19px; height: 19px; }
.cysup__intro-tx { font-size: 13.5px; line-height: 1.5; color: var(--cs-text-soft); padding-top: 3px; white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }

.cysup__sep { align-self: center; margin: 14px 0 4px; font-size: 11.5px; font-weight: 600; color: var(--cs-text-faint); background: var(--cs-border-soft); padding: 3px 10px; border-radius: 10px; }

.cysup__rowm { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; }
.cysup__rowm--grouped { margin-top: 3px; }
.cysup__rowm--visitor { flex-direction: row-reverse; }
.cysup__rowm--system { justify-content: center; margin-top: 12px; }

.cysup__avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--cs-grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(23,32,51,.15); }
.cysup__avatar svg { width: 16px; height: 16px; }
.cysup__avatar--spacer { background: none; box-shadow: none; }

.cysup__wrap { display: flex; flex-direction: column; max-width: 80%; min-width: 0; }
.cysup__rowm--visitor .cysup__wrap { align-items: flex-end; }

.cysup__msg {
	position: relative; padding: 9px 13px; font-size: 14px; line-height: 1.45;
	border-radius: var(--cs-r-msg); word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
	animation: cs-msg-in .22s var(--cs-ease);
}
@keyframes cs-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cysup__rowm--visitor .cysup__msg { background: var(--cs-vis); color: var(--cs-vis-tx); border-bottom-right-radius: 6px; }
.cysup__rowm--admin .cysup__msg { background: var(--cs-adm); color: var(--cs-adm-tx); border: 1px solid var(--cs-border-soft); border-bottom-left-radius: 6px; box-shadow: 0 1px 3px rgba(23,32,51,.05); }
.cysup__rowm--grouped.cysup__rowm--visitor .cysup__msg { border-bottom-right-radius: 6px; border-top-right-radius: 8px; }
.cysup__rowm--grouped.cysup__rowm--admin .cysup__msg { border-bottom-left-radius: 6px; border-top-left-radius: 8px; }

.cysup__msg--system {
	align-self: center; max-width: 88%; text-align: center; font-size: 12px; line-height: 1.4;
	color: var(--cs-text-soft); background: transparent; padding: 2px 8px; white-space: pre-wrap;
}

.cysup__meta { display: flex; align-items: center; gap: 4px; margin-top: 3px; padding: 0 5px; font-size: 11px; color: var(--cs-text-faint); }
.cysup__rowm--visitor .cysup__meta { flex-direction: row-reverse; }
.cysup__tick { width: 14px; height: 14px; opacity: .8; }

/* media + file card inside a message */
.cysup__msg img { display: block; max-width: 100%; max-height: 240px; border-radius: 12px; margin-top: 2px; cursor: zoom-in; }
.cysup__msg-img { margin-top: 0; }
.cysup__filecard {
	display: flex; align-items: center; gap: 10px; margin-top: 2px;
	text-decoration: none; color: inherit;
	background: rgba(0,0,0,.04); border-radius: 11px; padding: 9px 11px;
}
:root[data-theme="dark"] .cysup__filecard { background: rgba(255,255,255,.06); }
.cysup__filecard:hover { filter: brightness(.97); }
.cysup__filecard-ic { width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--cs-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.cysup__filecard-ic svg { width: 19px; height: 19px; }
.cysup__filecard-meta { min-width: 0; display: flex; flex-direction: column; }
.cysup__filecard-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cysup__filecard-sub { font-size: 11.5px; color: var(--cs-text-faint); }

/* ───────── Offline gate ───────── */
.cysup__offline {
	flex: none; padding: 14px 16px 16px; border-top: 1px solid var(--cs-border-soft); background: var(--cs-bg);
	display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.cysup__offline-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--cs-bg-soft); color: var(--cs-accent); display: flex; align-items: center; justify-content: center; }
.cysup__offline-ic svg { width: 20px; height: 20px; }
.cysup__offline-lead { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--cs-text); }
.cysup__field { display: flex; align-items: center; height: 44px; border: 1px solid var(--cs-border); border-radius: var(--cs-r-ctl); background: var(--cs-bg-soft); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.cysup__field:focus-within { border-color: var(--cs-accent); box-shadow: 0 0 0 3px var(--cs-ring); }
.cysup__field-at { flex: none; padding: 0 4px 0 12px; color: var(--cs-text-faint); font-size: 14px; line-height: 44px; }
.cysup .cysup__tg { flex: 1; border: 0; background: none; height: 44px; padding: 0 12px 0 0; color: var(--cs-text); font: inherit; font-size: 14px; line-height: normal; }
.cysup .cysup__tg:focus { outline: none; }
.cysup__offline-btn {
	border: 0; border-radius: var(--cs-r-ctl); cursor: pointer; padding: 11px;
	font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--cs-grad);
	transition: transform .15s, filter .15s;
}
.cysup__offline-btn:hover { filter: brightness(1.04); }
.cysup__offline-btn:active { transform: scale(.98); }
.cysup__offline-btn:disabled { opacity: .6; cursor: default; }

/* ───────── Composer ───────── */
.cysup__composer { flex: none; border-top: 1px solid var(--cs-border-soft); background: var(--cs-bg); padding: 10px 12px 8px; }
.cysup__chip {
	display: flex; align-items: center; gap: 9px; margin-bottom: 9px; padding: 8px 9px;
	background: var(--cs-bg-soft); border: 1px solid var(--cs-border-soft); border-radius: 11px;
}
.cysup__chip-ic { width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--cs-grad); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cysup__chip-ic svg { width: 18px; height: 18px; }
.cysup__chip-ic img { width: 100%; height: 100%; object-fit: cover; }
.cysup__chip-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cysup__chip-name { font-size: 13px; font-weight: 600; color: var(--cs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cysup__chip-size { font-size: 11.5px; color: var(--cs-text-faint); }
.cysup__chip-x { width: 26px; height: 26px; flex: none; border: 0; padding: 0; border-radius: 7px; background: none; color: var(--cs-text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cysup__chip-x:hover { background: var(--cs-border-soft); color: var(--cs-text); }
.cysup__chip-x svg { width: 15px; height: 15px; }

.cysup__row { display: flex; align-items: flex-end; gap: 8px; }
.cysup__attach {
	width: 44px; height: 44px; flex: none; border-radius: var(--cs-r-ctl); cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: var(--cs-text-soft);
	background: var(--cs-bg-soft); transition: color .15s, background .15s;
}
.cysup__attach:hover { color: var(--cs-accent); background: var(--cs-border-soft); }
.cysup__attach:focus-within { outline: 2px solid var(--cs-accent); outline-offset: 1px; }
.cysup__attach svg { width: 21px; height: 21px; flex: none; }
.cysup__attach.is-set { color: #fff; background: var(--cs-grad); }
/* visually hidden but focusable (keyboard can tab to attach; native label opens picker) */
.cysup__fileinput { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }

.cysup__input {
	flex: 1; min-width: 0; min-height: 44px; max-height: 120px; resize: none;
	padding: 12px 14px; border: 1px solid var(--cs-border); border-radius: var(--cs-r-ctl);
	background: var(--cs-bg-soft); color: var(--cs-text); font: inherit; font-size: 14px; line-height: 1.35;
	transition: border-color .15s, box-shadow .15s;
	scrollbar-width: thin;
}
.cysup__input:focus { outline: none; border-color: var(--cs-accent); box-shadow: 0 0 0 3px var(--cs-ring); }
.cysup__input::placeholder { color: var(--cs-text-faint); }

.cysup__send {
	width: 44px; height: 44px; flex: none; border: 0; padding: 0; margin: 0; border-radius: var(--cs-r-ctl);
	cursor: pointer; color: #fff; background: var(--cs-grad); position: relative;
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s, filter .15s, opacity .15s;
}
.cysup__send:hover { filter: brightness(1.06); transform: scale(1.04); }
.cysup__send:active { transform: scale(.92); }
.cysup__send:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cysup__send:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.cysup__send-ic { width: 22px; height: 22px; flex: none; }
.cysup__spinner { position: absolute; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; display: none; animation: cs-spin .7s linear infinite; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cysup.is-sending .cysup__send-ic { opacity: 0; }
.cysup.is-sending .cysup__spinner { display: block; }

.cysup__foot { margin-top: 7px; text-align: center; font-size: 11px; color: var(--cs-text-faint); }

/* ───────── Mobile ───────── */
@media (max-width: 520px) {
	.cysup__panel {
		right: 0; left: 0; top: 0; bottom: 0;
		width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
		border: 0; border-radius: 0;
	}
	.cysup__bubble { right: 16px; bottom: 16px; width: 56px; height: 56px; }
	.cysup.is-open .cysup__bubble { opacity: 0; pointer-events: none; }
	.cysup__head { padding-top: max(14px, env(safe-area-inset-top)); }
	.cysup__composer { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
	.cysup__offline { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
	.cysup__wrap { max-width: 84%; }
}