/* Tzanov Bros chat widget — self-contained, theme-aware via CSS vars. */
.tzc-root {
	--tzc-ink: var(--tz-ink, #16130f);
	--tzc-paper: var(--tz-paper, #ffffff);
	--tzc-accent: var(--tz-accent, #c8341f);
	--tzc-accent-deep: var(--tz-accent-deep, #a52a10);
	--tzc-muted: var(--tz-muted, #6b6257);
	--tzc-line: var(--tz-line, #e7e1d6);
	position: fixed;
	right: clamp(14px, 3vw, 28px);
	bottom: clamp(14px, 3vw, 28px);
	z-index: 99990;
	font-family: inherit;
}
/* Accent, not ink. The launcher floats over whatever happens to be under it —
   the cream page, a production photo, and the ink footer. In ink it was black
   on black and effectively disappeared. Accent is the one colour in this
   palette that holds on all three, and it is already the site's call-to-action
   colour, which is exactly what this button is. */
.tzc-launcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	background: var(--tzc-accent);
	color: #fff;
	border: 1.5px solid var(--tzc-accent);
	padding: 10px 15px;
	border-radius: 0;              /* sharp corners — the theme's whole language */
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	box-shadow: 0 6px 18px rgba(19, 16, 9, .22);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
/* While the informational cookie strip is on screen, the launcher sits above
   it instead of covering it (the theme sets --tz-cookiebar-h + body class). */
body.tz-cookie-on .tzc-root {
	bottom: calc(var(--tz-cookiebar-h, 80px) + clamp(14px, 3vw, 28px));
}
.tzc-launcher:hover {
	transform: translateY(-2px);
	background: var(--tzc-accent-deep); border-color: var(--tzc-accent-deep);
	box-shadow: 0 14px 36px rgba(19, 16, 9, .30);
}
/* Ink outline: the accent-on-accent ring of the old rule was invisible. */
.tzc-launcher:focus-visible { outline: 3px solid var(--tzc-ink); outline-offset: 3px; }
.tzc-launcher svg { width: 20px; height: 20px; }
/* The dot was accent on ink; on an accent button it has to be paper. */
.tzc-launcher .tzc-dot {
	width: 8px; height: 8px; border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: tzc-pulse 2.4s infinite;
}
@keyframes tzc-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
	70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.tzc-panel {
	position: absolute;
	right: 0;
	bottom: 64px;
	width: min(92vw, 380px);
	height: min(70vh, 560px);
	background: var(--tzc-paper);
	border: 1px solid var(--tzc-line);
	border-radius: 18px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(.98);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.tzc-root.is-open .tzc-panel { opacity: 1; transform: none; pointer-events: auto; }
.tzc-root.is-open .tzc-launcher { display: none; }

.tzc-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 16px;
	background: var(--tzc-ink);
	color: #fff;
}
.tzc-head b { font-size: 15px; letter-spacing: .01em; }
.tzc-head small { display: block; font-size: 12px; opacity: .72; font-weight: 400; }
.tzc-head .tzc-avatar { width: 34px; height: 34px; border-radius: 9px; background: var(--tzc-accent); display: grid; place-items: center; font-weight: 800; }
.tzc-close { margin-left: auto; background: transparent; border: none; color: #fff; cursor: pointer; font-size: 22px; line-height: 1; width: 34px; height: 34px; border-radius: 8px; }
.tzc-close:hover { background: rgba(255,255,255,.12); }
.tzc-close:focus-visible { outline: 2px solid #fff; }

.tzc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, #faf7f1, var(--tzc-paper)); }
.tzc-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; word-wrap: break-word; }
.tzc-msg a { color: var(--tzc-accent); font-weight: 600; }
.tzc-bot { align-self: flex-start; background: #fff; border: 1px solid var(--tzc-line); color: var(--tzc-ink); border-bottom-left-radius: 5px; }
.tzc-user { align-self: flex-end; background: var(--tzc-ink); color: #fff; border-bottom-right-radius: 5px; }
.tzc-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--tzc-line); border-radius: 14px; }
.tzc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--tzc-muted); opacity: .5; animation: tzc-blink 1.2s infinite; }
.tzc-typing i:nth-child(2){animation-delay:.2s} .tzc-typing i:nth-child(3){animation-delay:.4s}
@keyframes tzc-blink { 0%,100%{opacity:.25;transform:translateY(0)} 50%{opacity:.9;transform:translateY(-3px)} }

.tzc-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--tzc-line); background: var(--tzc-paper); }
.tzc-input { flex: 1; resize: none; border: 1px solid var(--tzc-line); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 14.5px; max-height: 110px; color: var(--tzc-ink); background: #fff; }
/* One ring, not two. The old rule drew an offset accent outline AND recoloured
   the border, which stacked into a thick red frame that read as a validation
   error rather than as focus. */
.tzc-input:focus-visible { outline: 2px solid var(--tzc-accent); outline-offset: 0; border-color: var(--tzc-line); }
.tzc-send { border: none; background: var(--tzc-accent); color: #fff; width: 44px; border-radius: 12px; cursor: pointer; display: grid; place-items: center; transition: background .18s ease; }
.tzc-send:hover { background: var(--tzc-accent-deep); }
.tzc-send:disabled { opacity: .5; cursor: default; }
.tzc-send svg { width: 19px; height: 19px; }
.tzc-foot { text-align: center; font-size: 11px; color: var(--tzc-muted); padding: 0 12px 10px; background: var(--tzc-paper); }

@media (prefers-color-scheme: dark) {
	.tzc-root:not([data-force-light]) { --tzc-paper:#1c1a17; --tzc-ink:#f3ede2; --tzc-line:#33302b; --tzc-muted:#a89c8c; }
	.tzc-root:not([data-force-light]) .tzc-head { background:#000; }
	.tzc-root:not([data-force-light]) .tzc-bot { background:#26231f; }
	.tzc-root:not([data-force-light]) .tzc-log { background:#1c1a17; }
	.tzc-root:not([data-force-light]) .tzc-user { background:#3a352e; }
	.tzc-root:not([data-force-light]) .tzc-input { background:#26231f; color:#f3ede2; }
}

/* On phones the wide text pill covered page content — collapse the launcher
   to a compact circular icon button (icon only). The panel stays full-featured. */
@media (max-width: 640px) {
	.tzc-launcher { padding: 0; width: 56px; height: 56px; border-radius: 50%; justify-content: center; gap: 0; }
	.tzc-launcher > span { display: none; }        /* hide the "Питай за печат" label */
	.tzc-launcher .tzc-dot { display: none; }       /* and the pulsing dot */
	.tzc-launcher svg { width: 24px; height: 24px; }
	.tzc-panel { width: min(94vw, 380px); height: min(76vh, 560px); }
}