/* Плавающий блок связи.
 *
 * Что было не так у прежнего виджета:
 *   — ореол пульсации (:before, inset -8px) выходил за круг кнопки и не имел
 *     pointer-events: none, поэтому перехватывал клики по нижней иконке списка;
 *   — каналы связи были голыми кружками без подписей: угадай, куда ведёт значок;
 *   — состояние жило в sessionStorage вперемешку с инлайн-скриптом в подвале;
 *   — на телефоне столбик иконок закрывал правый край контента.
 *
 * Здесь: панель с подписями, закрытие по Esc и клику вне, на мобильном —
 * лист снизу во всю ширину. Скрипт — assets/contact-widget.js.
 */

.cw {position: fixed; right: 22px; bottom: 22px; z-index: 9999; font-family: inherit;}

/* ─── Круглая кнопка ────────────────────────────────────────────────────── */
.cw__toggle {position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, #9ccc4b 0%, #6aa32f 100%); box-shadow: 0 8px 22px rgba(43, 58, 38, .3); cursor: pointer; transition: transform .22s ease, box-shadow .22s ease;}
.cw__toggle:hover {transform: scale(1.06); box-shadow: 0 10px 26px rgba(43, 58, 38, .36);}
.cw__toggle:focus-visible {outline: 3px solid #2b3a26; outline-offset: 4px;}
.cw__toggle svg {width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .18s, transform .18s;}
.cw__toggle .cw__ico-close {position: absolute; opacity: 0; transform: rotate(-90deg);}
.cw.is-open .cw__toggle .cw__ico-chat {opacity: 0; transform: rotate(90deg);}
.cw.is-open .cw__toggle .cw__ico-close {opacity: 1; transform: rotate(0);}

/* Ореол: только украшение, клики сквозь него проходят. */
.cw__toggle:after {content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(139, 195, 74, .5); pointer-events: none; animation: cw-pulse 2.8s ease-out infinite;}
.cw.is-open .cw__toggle:after {display: none;}
@keyframes cw-pulse {0% {transform: scale(.9); opacity: .85;} 70% {transform: scale(1.28); opacity: 0;} 100% {opacity: 0;}}
@media (prefers-reduced-motion: reduce) { .cw__toggle:after {animation: none;} }

/* Точка «мы на связи» — снимает вопрос «а ответят ли». */
.cw__dot {position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border: 2.5px solid #fff; border-radius: 50%; background: #35c759;}

/* ─── Панель ────────────────────────────────────────────────────────────── */
.cw__panel {position: absolute; right: 0; bottom: 70px; width: 296px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(43, 58, 38, .22); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transform-origin: 100% 100%; transition: opacity .2s ease, transform .2s ease, visibility .2s;}
.cw.is-open .cw__panel {opacity: 1; visibility: visible; transform: none;}
.cw__title {margin-bottom: 2px; font-size: 17px; font-weight: 700; line-height: 1.25; color: #2b3a26;}
.cw__sub {margin-bottom: 14px; font-size: 13px; line-height: 1.4; color: #7d8676;}
.cw__list {display: flex; flex-direction: column; gap: 6px;}
.cw__item {display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: #2b3a26; text-decoration: none; transition: background .16s, transform .16s;}
.cw__item:hover {background: #f4f8f0; color: #2b3a26; transform: translateX(2px);}
.cw__item:focus-visible {outline: 2px solid #7cb32f; outline-offset: 1px;}
.cw__ico {display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #f2f4f0;}
.cw__ico img, .cw__ico svg {width: 22px; height: 22px;}
.cw__ico svg {stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.cw__ico--tg {background: #29a9eb;}
.cw__ico--wa {background: #25d366;}
.cw__ico--max {background: #f2f4f0;}
.cw__ico--call {background: #f2604f;}
.cw__ico--mail {background: #3b8fd4;}
.cw__name {font-size: 14.5px; font-weight: 600; line-height: 1.2;}
.cw__note {display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #5f6a58;}

/* ─── Телефон: панель снизу ─────────────────────────────────────────────── */
@media (max-width: 767px) {
	.cw {right: 14px; bottom: 14px;}
	.cw__toggle {width: 52px; height: 52px;}
	.cw__panel {position: fixed; right: 10px; left: 10px; bottom: 78px; width: auto; padding: 16px; border-radius: 20px;}
	.cw__item {padding: 11px 10px;}
}