/* ===== Chat Doc 812 — Frontend (Glassmorphism) ===== */

#cd812-root {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999999;
	font-family: var(--cd812-font);
	font-size: 15px;
	line-height: 1.5;
}

/* ---------- Иконка запуска ---------- */
.cd812-launcher {
	position: relative;
	width: var(--cd812-icon-size, 64px);
	height: var(--cd812-icon-size, 64px);
	border-radius: 50%;
	border: none;
	cursor: pointer;
	padding: 0;
	background: linear-gradient(135deg, var(--cd812-accent), rgba(255,255,255,0.15));
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	transition: transform .2s ease;
}
.cd812-launcher img {
	width: 62%;
	height: 62%;
	object-fit: contain;
	border-radius: 50%;
	pointer-events: none;
}
.cd812-launcher:hover { transform: scale(1.06); }

/* Иконка исчезает, когда открыт чат */
.cd812-launcher.cd812-hidden { display: none; }

/* Индикатор непрочитанного ответа оператора */
.cd812-unread {
	position: absolute;
	top: -2px; right: -2px;
	width: 16px; height: 16px;
	background: #ff3b30;
	border: 2px solid #fff;
	border-radius: 50%;
	animation: cd812-online 1.5s infinite;
}

/* Иконка без фона-подложки: показываем PNG как есть */
.cd812-launcher.cd812-nobg {
	background: none;
	box-shadow: none;
	border-radius: 0;
}
.cd812-launcher.cd812-nobg img {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.cd812-online-dot {
	position: absolute;
	top: 4px; right: 4px;
	width: 14px; height: 14px;
	background: #24d366;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(36,211,102,.7);
	animation: cd812-online 2s infinite;
}
@keyframes cd812-online {
	0%   { box-shadow: 0 0 0 0 rgba(36,211,102,.6); }
	70%  { box-shadow: 0 0 0 8px rgba(36,211,102,0); }
	100% { box-shadow: 0 0 0 0 rgba(36,211,102,0); }
}

/* ---------- Анимации иконки ---------- */
.cd812-icon-pulse  { animation: cd812-pulse 2s infinite; }
.cd812-icon-bounce { animation: cd812-bounce 1.8s infinite; }
.cd812-icon-shake  { animation: cd812-shake 2.5s infinite; }
.cd812-icon-rotate img { animation: cd812-rotate 6s linear infinite; }

@keyframes cd812-pulse {
	0%   { box-shadow: 0 8px 30px rgba(0,0,0,.25), 0 0 0 0 var(--cd812-accent); }
	70%  { box-shadow: 0 8px 30px rgba(0,0,0,.25), 0 0 0 16px rgba(123,92,255,0); }
	100% { box-shadow: 0 8px 30px rgba(0,0,0,.25), 0 0 0 0 rgba(123,92,255,0); }
}
@keyframes cd812-bounce {
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-10px); }
}
@keyframes cd812-shake {
	0%,88%,100% { transform: rotate(0); }
	90% { transform: rotate(-12deg); }
	94% { transform: rotate(10deg); }
	98% { transform: rotate(-6deg); }
}
@keyframes cd812-rotate {
	from { transform: rotate(0); } to { transform: rotate(360deg); }
}

/* ---------- Плашка приветствия (слева от иконки) ---------- */
.cd812-bubble {
	position: absolute;
	bottom: 10px;
	right: calc(var(--cd812-icon-size, 64px) + 18px);
	width: var(--cd812-bubble-w, 240px);
	min-height: var(--cd812-bubble-h, auto);
	max-width: 80vw;
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255,255,255,0.5);
	color: #222;
	padding: 12px 30px 12px 16px;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	animation: cd812-fadein .5s ease;
	cursor: pointer;
}
/* хвостик, указывающий на иконку справа */
.cd812-bubble::after {
	content: '';
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
	border: 8px solid transparent;
	border-left-color: rgba(255,255,255,0.7);
	border-right: 0;
}
.cd812-bubble-close {
	position: absolute; top: 6px; right: 8px;
	border: none; background: none; font-size: 18px; cursor: pointer; color: #777;
}

/* ---------- Окно чата (Glass) ---------- */
.cd812-window {
	position: fixed;               /* fixed => проценты считаются от размера экрана */
	bottom: 24px;                  /* открывается на месте иконки, не смещаясь вверх */
	right: 24px;
	width: var(--cd812-width);
	height: var(--cd812-height);
	min-width: 320px;
	min-height: 420px;
	max-width: 95vw;
	max-height: 82vh;
	display: none;
	flex-direction: column;
	border-radius: var(--cd812-radius);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.35);
	background: rgba(255,255,255, var(--cd812-opacity));
	backdrop-filter: blur(var(--cd812-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--cd812-blur)) saturate(160%);
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.cd812-window.cd812-open { display: flex; }

/* Анимации всплытия */
.cd812-anim-popup .cd812-window.cd812-open { animation: cd812-popup .35s cubic-bezier(.2,.8,.3,1.2); transform-origin: bottom right; }
.cd812-anim-slide .cd812-window.cd812-open { animation: cd812-slide .35s ease; }
.cd812-anim-fade  .cd812-window.cd812-open { animation: cd812-fadein .35s ease; }

@keyframes cd812-popup {
	from { opacity: 0; transform: scale(.6) translateY(20px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cd812-slide {
	from { opacity: 0; transform: translateY(60px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes cd812-fadein {
	from { opacity: 0; } to { opacity: 1; }
}

/* ---------- Шапка ---------- */
.cd812-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--cd812-accent), rgba(255,255,255,0.08));
	color: #fff;
}
.cd812-header-info { display: flex; align-items: center; gap: 12px; }
.cd812-avatar { position: relative; width: 42px; height: 42px; }
.cd812-avatar img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.3); }
.cd812-status-dot {
	position: absolute; bottom: 0; right: 0;
	width: 12px; height: 12px; background: #24d366;
	border: 2px solid #fff; border-radius: 50%;
}
.cd812-title { font-weight: 600; font-size: 16px; }
.cd812-subtitle { font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 5px; }
.cd812-online-icon { width: 14px; height: 14px; object-fit: contain; }
.cd812-close {
	background: none; border: none; color: #fff; font-size: 26px;
	cursor: pointer; line-height: 1; opacity: .85;
}
.cd812-close:hover { opacity: 1; }

/* ---------- Сообщения ---------- */
.cd812-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Строка сообщения с аватаром */
.cd812-msg-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	max-width: 88%;
}
.cd812-row-user { align-self: flex-end; flex-direction: row-reverse; }
.cd812-row-bot, .cd812-row-operator { align-self: flex-start; }
.cd812-msg-avatar {
	width: 30px; height: 30px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.cd812-msg {
	padding: 10px 14px;
	border-radius: 16px;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	animation: cd812-msgin .25s ease;
}
@keyframes cd812-msgin {
	from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); }
}
.cd812-msg-bot, .cd812-msg-operator {
	background: rgba(255,255,255,0.55);
	border: 1px solid rgba(255,255,255,0.4);
	color: #1a1a1a;
	border-bottom-left-radius: 4px;
}
.cd812-msg-operator { border-left: 3px solid #24d366; }
.cd812-msg-user {
	background: var(--cd812-accent);
	color: #fff;
	border-bottom-right-radius: 4px;
}

/* Время в сообщении */
.cd812-msg-time {
	display: block;
	font-size: 10px;
	opacity: .6;
	margin-top: 5px;
	text-align: right;
}
.cd812-msg-user .cd812-msg-time { color: rgba(255,255,255,.85); }

/* Форматирование внутри сообщений бота */
.cd812-msg-bot strong { font-weight: 700; }
.cd812-msg-bot em { font-style: italic; }
.cd812-msg-bot del { opacity: .7; }
.cd812-msg-bot a { color: var(--cd812-accent); text-decoration: underline; word-break: break-all; }
.cd812-msg-bot code {
	background: rgba(0,0,0,0.07);
	padding: 1px 5px;
	border-radius: 5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
}
.cd812-msg-bot pre {
	background: rgba(0,0,0,0.08);
	padding: 10px 12px;
	border-radius: 10px;
	overflow-x: auto;
	margin: 6px 0;
}
.cd812-msg-bot pre code { background: none; padding: 0; }

/* Индикатор набора */
.cd812-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.cd812-typing span {
	width: 8px; height: 8px; background: var(--cd812-accent); border-radius: 50%;
	opacity: .5; animation: cd812-typing 1.2s infinite;
}
.cd812-typing span:nth-child(2) { animation-delay: .2s; }
.cd812-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cd812-typing { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- Поле ввода ---------- */
.cd812-input-area {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid rgba(255,255,255,0.3);
	background: rgba(255,255,255,0.15);
}
.cd812-input {
	flex: 1;
	border: 1px solid rgba(0,0,0,0.1);
	background: rgba(255,255,255,0.7);
	border-radius: 22px;
	padding: 10px 16px;
	font-size: 14px;
	outline: none;
	font-family: inherit;
}
.cd812-send, .cd812-operator-btn {
	width: 42px; height: 42px;
	border: none; border-radius: 50%;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease;
}
.cd812-send { background: var(--cd812-accent); color: #fff; }
.cd812-operator-btn { background: rgba(255,255,255,0.6); font-size: 18px; overflow: hidden; }
.cd812-operator-btn img { width: 70%; height: 70%; object-fit: contain; border-radius: 50%; }
.cd812-send:hover, .cd812-operator-btn:hover { transform: scale(1.1); }

/* ---------- Мобильные устройства ---------- */
@media (max-width: 600px) {
	#cd812-root {
		font-size: 14px;               /* по умолчанию 14px на мобильных */
		right: 16px;
		bottom: 16px;
	}

	/* Чат раскрывается на весь экран с небольшими отступами и не съезжает */
	.cd812-window {
		width: auto !important;
		height: auto !important;
		left: 10px !important;
		right: 10px !important;
		top: 10px !important;
		bottom: 10px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		max-width: none !important;
		max-height: none !important;
		border-radius: 18px;
	}

	.cd812-title { font-size: 15px; }
	.cd812-msg { font-size: 14px; }

	/* Поле ввода оставляем 16px, иначе iOS зумит страницу и всё смещается */
	.cd812-input { font-size: 16px; }

	/* Плашка не должна вылезать за экран */
	.cd812-bubble {
		font-size: 14px;
		width: auto;
		max-width: calc(100vw - 90px);
	}
}