/* ==========================================================================
   Аудит ПРО — онлайн-консультант (виджет).
   Встраивается в существующую панель #call_buttons. Namespace: apw-
   Бренд-цвет сайта: #026f93.
   ========================================================================== */

:root {
	--apw-brand: #026f93;
	--apw-brand-dark: #024f6b;
	--apw-brand-tint: rgba(2, 111, 147, 0.08);
	--apw-ink: #1f2d34;
	--apw-muted: #6b7c85;
	--apw-line: rgba(2, 111, 147, 0.14);
	--apw-bot-bg: #eef4f7;
	--apw-radius: 20px;
	--apw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--apw-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- Триггер-карточка внутри #call_buttons (клон соседних кнопок) --------- */
.call_buttons a.apw-trigger { cursor: pointer; }
.apw-trigger .apw-ticon {
	display: flex;
	align-items: center;
	justify-content: center;
}
.apw-trigger .apw-ticon svg {
	width: 0.84em;
	height: 0.84em;
	fill: #fff;
	display: block;
}
/* деликатный «дышащий» ореол — зовёт нажать, затухает сам */
.apw-trigger .apw-ticon {
	position: relative;
}
.apw-trigger .apw-ticon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(2, 111, 147, 0.45);
	animation: apw-pulse 2.4s var(--apw-ease-out) 3;
	pointer-events: none;
}
@keyframes apw-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(2, 111, 147, 0.45); }
	70%  { box-shadow: 0 0 0 12px rgba(2, 111, 147, 0); }
	100% { box-shadow: 0 0 0 0 rgba(2, 111, 147, 0); }
}

/* --- Затемнение (только мобилка) ----------------------------------------- */
.apw-scrim {
	position: fixed;
	inset: 0;
	background: rgba(15, 32, 40, 0.45);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1000;
	transition: opacity 200ms ease-out, visibility 0s linear 200ms;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
}
.apw-scrim[data-open="true"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 200ms ease-out, visibility 0s;
}

/* --- Окно чата ------------------------------------------------------------ */
.apw-panel {
	position: fixed;
	right: 150px;
	bottom: 24px;
	width: 374px;
	max-width: calc(100vw - 32px);
	height: min(72vh, 560px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--apw-radius);
	box-shadow: 0 24px 60px -12px rgba(2, 45, 61, 0.35),
	            0 8px 20px -8px rgba(2, 45, 61, 0.22);
	overflow: hidden;
	z-index: 1001;
	transform-origin: 100% 100%;
	font-family: inherit;
	color: var(--apw-ink);

	opacity: 0;
	transform: translateY(10px) scale(0.96);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 150ms ease-out,
	            transform 160ms var(--apw-ease-out),
	            visibility 0s linear 160ms;
}
.apw-panel[data-open="true"] {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 220ms ease-out,
	            transform 260ms var(--apw-ease-out),
	            visibility 0s;
}

/* --- Шапка ---------------------------------------------------------------- */
.apw-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--apw-brand) 0%, var(--apw-brand-dark) 100%);
	color: #fff;
	flex-shrink: 0;
}
.apw-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.apw-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.apw-avatar svg { width: 22px; height: 22px; fill: #fff; }
.apw-avatar .apw-initial { font-weight: 700; font-size: 19px; color: #fff; line-height: 1; }
.apw-head-txt { flex: 1; min-width: 0; line-height: 1.25; }
.apw-head-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.apw-head-sub { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.apw-dot-online {
	width: 7px; height: 7px; border-radius: 50%;
	background: #46d17a;
	box-shadow: 0 0 0 0 rgba(70, 209, 122, 0.6);
	animation: apw-online 2s ease-out infinite;
}
@keyframes apw-online {
	0% { box-shadow: 0 0 0 0 rgba(70, 209, 122, 0.55); }
	70% { box-shadow: 0 0 0 6px rgba(70, 209, 122, 0); }
	100% { box-shadow: 0 0 0 0 rgba(70, 209, 122, 0); }
}
.apw-close {
	appearance: none;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	width: 30px; height: 30px;
	border-radius: 50%;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: background 160ms ease, transform 160ms var(--apw-ease-out);
}
.apw-close:hover { background: rgba(255, 255, 255, 0.24); }
.apw-close:active { transform: scale(0.9); }
.apw-close svg { width: 16px; height: 16px; display: block; }

/* --- Лента сообщений ------------------------------------------------------ */
.apw-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 18px 16px 8px;
	background:
		radial-gradient(1200px 200px at 50% -60px, var(--apw-brand-tint), transparent 60%),
		#fbfdfe;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scrollbar-width: thin;
	scrollbar-color: rgba(2, 111, 147, 0.3) transparent;
}
.apw-body::-webkit-scrollbar { width: 6px; }
.apw-body::-webkit-scrollbar-thumb { background: rgba(2, 111, 147, 0.28); border-radius: 3px; }

.apw-msg {
	max-width: 84%;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 16px;
	word-wrap: break-word;
	white-space: pre-wrap;
	animation: apw-msg-in 260ms var(--apw-ease-out) both;
}
@keyframes apw-msg-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}
.apw-msg.bot {
	align-self: flex-start;
	background: var(--apw-bot-bg);
	color: var(--apw-ink);
	border-bottom-left-radius: 5px;
}
.apw-msg.user {
	align-self: flex-end;
	background: var(--apw-brand);
	color: #fff;
	border-bottom-right-radius: 5px;
}
.apw-msg a { color: inherit; text-decoration: underline; }

/* Быстрые ответы */
.apw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-self: flex-start;
	max-width: 92%;
	margin-top: -2px;
}
.apw-chip {
	appearance: none;
	border: 1px solid var(--apw-line);
	background: #fff;
	color: var(--apw-brand-dark);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 13px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, transform 140ms var(--apw-ease-out);
}
.apw-chip:hover { background: var(--apw-brand-tint); border-color: var(--apw-brand); }
.apw-chip:active { transform: scale(0.97); }

/* Индикатор набора */
.apw-typing {
	align-self: flex-start;
	background: var(--apw-bot-bg);
	padding: 13px 16px;
	border-radius: 16px;
	border-bottom-left-radius: 5px;
	display: inline-flex;
	gap: 5px;
	animation: apw-msg-in 200ms var(--apw-ease-out) both;
}
.apw-typing span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--apw-brand);
	opacity: 0.5;
	animation: apw-bounce 1.2s infinite ease-in-out;
}
.apw-typing span:nth-child(2) { animation-delay: 0.15s; }
.apw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes apw-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30% { transform: translateY(-5px); opacity: 1; }
}

/* --- Поле ввода ----------------------------------------------------------- */
.apw-foot {
	flex-shrink: 0;
	padding: 9px 12px 10px;
	border-top: 1px solid var(--apw-line);
	background: #fff;
}
.apw-inputrow {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f3f7f9;
	border: 1px solid transparent;
	border-radius: 13px;
	padding: 4px 5px 4px 14px;
	transition: border-color 160ms ease, background 160ms ease;
}
.apw-inputrow:focus-within { border-color: var(--apw-brand); background: #fff; }
.apw-input {
	flex: 1;
	border: 0;
	outline: 0;
	resize: none;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--apw-ink);
	max-height: 104px;
	padding: 7px 0;
	margin: 0;
}
.apw-input::placeholder { color: var(--apw-muted); }
.apw-send {
	appearance: none;
	border: 0;
	width: 34px; height: 34px;
	border-radius: 10px;
	background: var(--apw-brand);
	color: #fff;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: background 160ms ease, transform 140ms var(--apw-ease-out), opacity 160ms ease;
}
.apw-send:hover { background: var(--apw-brand-dark); }
.apw-send:active { transform: scale(0.94); }
.apw-send:disabled { opacity: 0.4; cursor: default; }
.apw-send svg { width: 18px; height: 18px; fill: #fff; }
.apw-foot-note {
	text-align: center;
	font-size: 10.5px;
	color: var(--apw-muted);
	margin-top: 7px;
}
.apw-foot-note b { color: var(--apw-brand-dark); font-weight: 600; }

/* --- Мобилка: нижний лист ------------------------------------------------- */
@media only screen and (max-width: 768px) {
	.apw-panel {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
		transform-origin: 50% 100%;
		transform: translateY(16px) scale(0.99);
		box-shadow: none;
	}
	.apw-panel[data-open="true"] { transform: none; }
	/* прячем плавающие кнопки, пока открыт чат */
	body.apw-open .call_buttons { opacity: 0 !important; pointer-events: none; }
}
@media only screen and (min-width: 769px) {
	.apw-scrim { display: none; }
}

/* --- Уважение к reduced-motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.apw-panel,
	.apw-panel[data-open="true"] { transition: opacity 160ms ease, visibility 0s; transform: none; }
	.apw-panel { transform: none; }
	.apw-msg, .apw-typing { animation: apw-fade 160ms ease both; }
	.apw-trigger .apw-ticon::after,
	.apw-dot-online,
	.apw-typing span { animation: none; }
	@keyframes apw-fade { from { opacity: 0; } to { opacity: 1; } }
}