/* ============================================================
   Чат МЕРЦ. Цвета — только переменные канона (notes/brandbook.md).
   ============================================================ */

.mc{ position:fixed; right:20px; bottom:20px; z-index:10000;
	display:flex; flex-direction:column; align-items:flex-end; gap:10px;
	font-family:var(--font-base, "PT Sans", system-ui, sans-serif) }

/* Кнопка была широкой пилюлей с подписью и вместе с трубкой рядом читалась
   как две тяжёлые плашки в углу. Осталась одна: круг с иконкой, подпись
   выезжает при наведении и остаётся доступной для озвучки. */
.mc__launch{ display:inline-flex; align-items:center; gap:0; min-height:52px; overflow:hidden;
	padding:0; width:52px; border:0; border-radius:100px;
	transition:width .18s ease, background-color .15s ease, transform .15s ease;
	background:var(--color-accent-fill); color:var(--color-on-fill);
	font:700 15px/1 var(--font-base, "PT Sans", system-ui, sans-serif); cursor:pointer;
	box-shadow:0 6px 20px rgb(var(--shadow-rgb) / .22);
	transition:background-color .15s ease, transform .15s ease }
.mc__launch:hover{ background:var(--color-accent-fill-hover); transform:translateY(-1px) }
.mc__launch:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px }
.mc__launch-ico{ display:grid; place-items:center; width:52px; height:52px; flex:0 0 52px }
.mc__launch-ico svg{ width:24px; height:24px; display:block }
.mc__launch-text{ white-space:nowrap; padding-right:20px; font:700 15px/1 var(--font-base, "PT Sans", system-ui, sans-serif);
	opacity:0; transition:opacity .18s ease }
.mc__launch:hover, .mc__launch:focus-visible{ width:auto }
.mc__launch:hover .mc__launch-text, .mc__launch:focus-visible .mc__launch-text{ opacity:1 }
.mc[data-open="1"] .mc__launch{ display:none }
/* Клавиатурой подпись видна сразу: иначе она была бы недоступна без мыши. */
@media (hover:none){ .mc__launch{ width:auto } .mc__launch-text{ opacity:1 } }

.mc__panel{ width:min(360px, calc(100vw - 32px));
	display:flex; flex-direction:column; overflow:hidden;
	background:var(--color-surface); border:1px solid var(--color-line);
	border-radius:12px; box-shadow:0 18px 44px rgb(var(--shadow-rgb) / .26) }
.mc__panel[hidden]{ display:none !important }

.mc__head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:14px 12px 14px 16px; border-bottom:1px solid var(--color-line) }
.mc .mc__title{ margin:0; font:700 15px/1.3 var(--font-base, "PT Sans", system-ui, sans-serif); color:var(--color-text) }
.mc__close{ width:34px; height:34px; border:0; border-radius:3px; background:transparent;
	color:var(--color-text-soft); font-size:24px; line-height:1; cursor:pointer }
.mc__close:hover{ color:var(--color-accent) }
.mc__close:focus-visible{ outline:2px solid var(--color-accent); outline-offset:1px }

.mc__log{ display:flex; flex-direction:column; gap:8px; max-height:44vh; overflow-y:auto;
	padding:14px 16px; background:var(--color-bg) }
.mc .mc__msg{ margin:0; max-width:92%; padding:10px 12px; border-radius:10px;
	font-size:14px; line-height:1.5 }
.mc__msg--staff{ align-self:flex-start; background:var(--color-surface);
	border:1px solid var(--color-line); color:var(--color-text) }
.mc__msg--visitor{ align-self:flex-end; background:var(--color-plate);
	color:var(--color-on-fill) }
.mc__msg--pending{ opacity:.6 }

.mc__form{ display:grid; gap:8px; padding:14px 16px 16px }
.mc__label{ font:700 13px/1 var(--font-base, "PT Sans", system-ui, sans-serif); color:var(--color-text) }
.mc__input{ width:100%; min-height:74px; padding:10px 12px; resize:vertical;
	font:400 15px/1.45 var(--font-base, "PT Sans", system-ui, sans-serif); color:var(--color-text); background:var(--color-bg);
	border:1px solid var(--color-text-soft); border-radius:4px }
.mc__input:focus{ outline:2px solid var(--color-accent); outline-offset:-1px;
	border-color:var(--color-accent) }
/* Ловушка для роботов: убрана из потока и из озвучки, но остаётся в форме. */
.mc__trap{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.mc__send{ min-height:46px; border:1px solid var(--color-accent-fill); border-radius:4px;
	background:var(--color-accent-fill); color:var(--color-on-fill);
	font:700 15px/1 var(--font-base, "PT Sans", system-ui, sans-serif); cursor:pointer }
.mc__send:hover:not(:disabled){ background:var(--color-accent-fill-hover);
	border-color:var(--color-accent-fill-hover) }
.mc__send:disabled{ opacity:.6; cursor:default }
.mc__send:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }
.mc .mc__note{ margin:0; font-size:12px; line-height:1.45; color:var(--color-text-soft) }
.mc .mc__note a{ color:var(--color-accent-ink) }
.mc .mc__status{ margin:0; min-height:1.3em; font-size:13px; color:var(--color-text-mute) }
.mc__status[data-state="err"]{ color:var(--color-accent-ink); font-weight:700 }

/* ---------- как ещё связаться ---------- */
.mc__ways{ display:grid; gap:8px; padding:12px 16px; border-bottom:1px solid var(--color-line) }
.mc .mc__ways-title{ margin:0; font:700 12px/1 var(--font-base, "PT Sans", system-ui, sans-serif);
	letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-soft) }
.mc .mc__ways-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 }
.mc .mc__ways-row span{ font-size:12.5px; color:var(--color-text-soft) }
.mc .mc__ways-row b{ font:700 16px/1 var(--font-base, "PT Sans", system-ui, sans-serif);
	color:var(--color-accent-ink); white-space:nowrap }
.mc__ways-cb{ min-height:40px; padding:0 14px; border:1px solid var(--color-text-soft);
	border-radius:4px; background:var(--color-surface); color:var(--color-text);
	font:700 14px/1 var(--font-base, "PT Sans", system-ui, sans-serif); cursor:pointer }
.mc__ways-cb:hover{ border-color:var(--color-accent); color:var(--color-accent) }
.mc__ways-cb:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }

/* Отдельная трубка убрана: связь теперь внутри окна, и в углу одна кнопка,
   а не две тяжёлые плашки. Правило оставлено на случай, если тема выведет
   её на страницах, куда чат не попадает. */
.ritual-fab{ display:none !important }
@media (max-width:480px){
	.mc{ right:14px; bottom:14px }
	.mc__log{ max-height:34vh }
	.mc__ways{ padding:10px 14px }
}
/* Мобильная панель темы перекрывала бы чат — поднимаем его над ней. */
body:has(.merc-bar) .mc{ bottom:calc(20px + var(--merc-bar-h, 64px)) }


@media (prefers-reduced-motion:reduce){
	.mc__launch{ transition:none }
	.mc__launch:hover{ transform:none }
}