/**
 * ATLAS чат-виджет — премиум-стиль под магазин EK (Apple-эстетика: чисто, спокойно, доверие).
 * Акцент = #1D1D1F (--ek-text) — ТОТ ЖЕ цвет, что у кнопок сайта (.ek-btn-primary) и кнопки
 * «вверх» (.ek-scroll-top) → единая система. Светлая панель, тёмный акцент для действий.
 * Префикс .atlas-chat- → без конфликтов. Easing cubic-bezier(.23,1,.32,1) — как в теме.
 */
.atlas-chat {
	--ac-ink:    var(--ek-text, #1D1D1F);
	--ac-ink-2:  #000;
	--ac-muted:  var(--ek-text-muted, #6E6E73);
	--ac-bg:     #fff;
	--ac-bg-2:   var(--ek-bg-secondary, #F5F5F7);
	--ac-border: var(--ek-border, #E5E5E7);
	--ac-online: #34C759;
	--ac-font:   var(--ek-font, ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "Segoe UI", Roboto, sans-serif);
	--ac-ease:   cubic-bezier(.23, 1, .32, 1);
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 2147483000;
	font-family: var(--ac-font);
}

/* ───────── развести с кнопкой «вверх» темы (.ek-scroll-top): стопкой над виджетом ─────────
 * Это CSS-оверрайд из плагина (тему НЕ редактируем). Центры кружков выровнены.
 * При открытом чате — прячем «вверх», чтобы не лезла в панель. */
.ek-scroll-top { bottom: 92px !important; right: 30px !important; }
body.atlas-chat-open .ek-scroll-top { opacity: 0 !important; pointer-events: none !important; transform: translateY(8px) !important; }

/* ───────── кнопка-лаунчер ───────── */
.atlas-chat-launcher {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 0;
	background: var(--ac-ink);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .12);
	transition: transform .24s var(--ac-ease), background .2s, box-shadow .24s var(--ac-ease);
	-webkit-tap-highlight-color: transparent;
}
.atlas-chat-launcher:hover { background: var(--ac-ink-2); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .14); }
.atlas-chat-launcher:active { transform: scale(.94); }
.atlas-chat-launcher svg { width: 25px; height: 25px; transition: opacity .2s, transform .26s var(--ac-ease); }
.atlas-chat-ic-close { position: absolute; opacity: 0; transform: rotate(-45deg) scale(.6); }
.atlas-chat.is-open .atlas-chat-ic-open  { opacity: 0; transform: rotate(45deg) scale(.6); }
.atlas-chat.is-open .atlas-chat-ic-close { opacity: 1; transform: none; }
/* При ОТКРЫТОМ чате лаунчер скрыт → панель цельная в углу, закрытие только в шапке
 * (убирает «болтающийся X» снизу и дублирование с кнопкой «свернуть»). */
.atlas-chat.is-open .atlas-chat-launcher { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ───────── ЖЁСТКАЯ ИЗОЛЯЦИЯ кнопок от глобальных button-стилей темы ─────────
 * 🔴 ПРИЧИНА кривых иконок: тема (woo/shopire) навешивает ВСЕМ кнопкам
 * padding:11px 20px (+ submit-кнопке display:block + border:1px) при box-sizing:border-box →
 * content-box кнопки схлопывался, SVG-иконку выдавливало в правую половину (+7px вправо).
 * Сам path иконки центрирован (bbox 12,12). Поэтому: чистый viewBox 0 0 24 24 + жёсткий
 * сброс кнопки → glyph-центр == центр кружка. Виджет автономен, !important оправдан. */
.atlas-chat-launcher,
.atlas-chat-send {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: grid !important;       /* grid place-items центрирует и абсолютный ic-close */
	place-items: center !important;
	line-height: 0;
}
.atlas-chat-launcher svg,
.atlas-chat-send svg,
.atlas-chat-avatar svg,
.atlas-chat-greet-ic svg { display: block; }

/* ───────── панель ───────── */
.atlas-chat-panel {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 384px;
	max-width: calc(100vw - 32px);
	height: 580px;
	max-height: calc(100vh - 96px);
	display: flex;
	flex-direction: column;
	background: var(--ac-bg);
	border: 1px solid var(--ac-border);
	border-radius: 20px;
	box-shadow: 0 20px 56px rgba(0, 0, 0, .17), 0 4px 14px rgba(0, 0, 0, .07);
	overflow: hidden;
	transform-origin: bottom right;
	opacity: 0;
	transform: translateY(14px) scale(.97);
	pointer-events: none;
	transition: opacity .26s var(--ac-ease), transform .3s var(--ac-ease);
}
.atlas-chat.is-open .atlas-chat-panel { opacity: 1; transform: none; pointer-events: auto; }

/* шапка — светлая, спокойная, с аватаром и статусом «онлайн» (доверие) */
.atlas-chat-head {
	display: flex; align-items: center; gap: 11px;
	padding: 14px 14px 13px 16px;
	background: var(--ac-bg);
	border-bottom: 1px solid var(--ac-border);
}
.atlas-chat-avatar {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
	background: var(--ac-ink); color: #fff; display: grid; place-items: center;
}
.atlas-chat-avatar svg { width: 20px; height: 20px; }
.atlas-chat-head-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.atlas-chat-title { font-size: 15px; font-weight: 600; letter-spacing: -.012em; color: var(--ac-ink); }
.atlas-chat-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ac-muted); margin-top: 2px; }
.atlas-chat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-online); box-shadow: 0 0 0 3px rgba(52, 199, 89, .16); }
.atlas-chat-min {
	flex: 0 0 auto; border: 0; background: transparent; color: var(--ac-muted); cursor: pointer;
	width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
	transition: background .18s, color .18s;
}
.atlas-chat-min:hover { background: var(--ac-bg-2); color: var(--ac-ink); }
.atlas-chat-min svg { width: 20px; height: 20px; }

/* лента сообщений */
.atlas-chat-msgs {
	flex: 1; overflow-y: auto; padding: 18px 14px 10px;
	display: flex; flex-direction: column; gap: 9px;
	background: var(--ac-bg-2);
	scrollbar-width: thin; scrollbar-color: #d0d0d4 transparent;
	overscroll-behavior: contain;
}
.atlas-chat-msgs::-webkit-scrollbar { width: 7px; }
.atlas-chat-msgs::-webkit-scrollbar-thumb { background: #d0d0d4; border-radius: 99px; }

/* приветствие / пустое состояние */
.atlas-chat-greet { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 26px; text-align: center; }
.atlas-chat-greet-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--ac-bg); border: 1px solid var(--ac-border); display: grid; place-items: center; color: var(--ac-ink); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.atlas-chat-greet-ic svg { width: 24px; height: 24px; }
.atlas-chat-greet p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ac-muted); max-width: 240px; }

/* бабблы */
.atlas-chat-row { display: flex; flex-direction: column; max-width: 80%; }
.atlas-chat-row--own { align-self: flex-end; align-items: flex-end; }
.atlas-chat-row--mgr { align-self: flex-start; align-items: flex-start; }
.atlas-chat-name { font-size: 11.5px; color: var(--ac-muted); margin: 0 3px 3px; font-weight: 500; }
.atlas-chat-bubble {
	padding: 9px 13px; font-size: 14px; line-height: 1.42;
	word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
	animation: ac-pop .26s var(--ac-ease);
}
.atlas-chat-row--own .atlas-chat-bubble { background: var(--ac-ink); color: #fff; border-radius: 18px 18px 5px 18px; }
.atlas-chat-row--mgr .atlas-chat-bubble { background: var(--ac-bg); color: var(--ac-ink); border: 1px solid var(--ac-border); border-radius: 18px 18px 18px 5px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.atlas-chat-time { font-size: 10.5px; color: var(--ac-muted); margin: 4px 4px 0; }
.atlas-chat-note { align-self: center; font-size: 12px; color: #b42318; background: #fee4e2; padding: 6px 13px; border-radius: 999px; margin: 2px 0; }
@keyframes ac-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* форма ввода */
.atlas-chat-form {
	display: flex; align-items: flex-end; gap: 9px;
	padding: 11px 12px; border-top: 1px solid var(--ac-border); background: var(--ac-bg);
}
.atlas-chat-input {
	flex: 1; resize: none; border: 1px solid var(--ac-border); border-radius: 13px;
	padding: 10px 13px; font: inherit; font-size: 14px; line-height: 1.4;
	min-height: 42px; height: 42px; max-height: 116px;
	color: var(--ac-ink); background: var(--ac-bg-2); outline: none;
	transition: border-color .18s, background .18s, box-shadow .18s;
}
.atlas-chat-input:focus { border-color: var(--ac-ink); background: var(--ac-bg); box-shadow: 0 0 0 3px rgba(29, 29, 31, .07); }
.atlas-chat-input::placeholder { color: var(--ac-muted); }
.atlas-chat-send {
	flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%;
	background: var(--ac-ink); color: #fff; cursor: pointer; display: grid; place-items: center;
	transition: background .18s, transform .15s, opacity .18s;
}
.atlas-chat-send:hover { background: var(--ac-ink-2); }
.atlas-chat-send:active { transform: scale(.9); }
.atlas-chat-send svg { width: 18px; height: 18px; }

/* мобильные: панель почти на весь экран с полями, стопка с «вверх» */
@media (max-width: 480px) {
	.atlas-chat { right: 16px; bottom: 16px; }
	.atlas-chat-panel { width: calc(100vw - 24px); height: calc(100dvh - 88px); bottom: 0; border-radius: 18px; }
	.ek-scroll-top { bottom: 80px !important; right: 22px !important; }
}

/* доступность */
.atlas-chat-launcher:focus-visible,
.atlas-chat-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(29, 29, 31, .45); }
.atlas-chat-min:focus-visible { outline: 2px solid var(--ac-ink); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
	.atlas-chat-launcher, .atlas-chat-panel, .atlas-chat-launcher svg, .atlas-chat-send, .atlas-chat-min, .ek-scroll-top { transition: none !important; }
	.atlas-chat-panel { transform: none; }
	.atlas-chat-bubble { animation: none; }
}

/* ───── Панель входа в чате (гость → вход, Phase 1) ─────
   Гость может читать приветствие; отправка показывает эту панель. */
.atlas-chat-auth {
	margin: 8px 0 4px;
	padding: 16px;
	background: #F5F5F7;
	border: 1px solid #E5E5E7;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.atlas-chat-auth-t {
	margin: 0 0 4px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #1D1D1F;
}
.atlas-chat-auth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 980px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}
.atlas-chat-auth-btn--primary { background: #1D1D1F; color: #fff; }
.atlas-chat-auth-btn--primary:hover { background: #000; color: #fff; }
.atlas-chat-auth-btn--yandex { background: #FC3F1D; color: #fff; }
.atlas-chat-auth-btn--yandex:hover { opacity: .92; color: #fff; }
.atlas-chat-auth-btn--ghost { background: #fff; color: #1D1D1F; border-color: #E5E5E7; }
.atlas-chat-auth-btn--ghost:hover { border-color: #1D1D1F; }