/* Мессенджеры клиники — «написать нам». Подключается на всех страницах копии, включая главную (build-dk.mjs).
   10.11.2026 — ссылки с логотипами в подвале и «Контактах» (с прежнего сайта клиники, копия на 9410).
   11.11.2026, владелец: «сделай расположение соцсетей лучше — и иконки, и расположение на экране, может, как-то красиво
   будет заменяться… нужно сделать круто, и оставь пока только WhatsApp и Max»:
     · значки — крупный белый знак на круге фирменного цвета, без «глянца»;
     · на экране — круглая кнопка справа внизу (.dk-msg, разметка — build-dk.mjs, поведение — msg.js): значки Max и WhatsApp
       по очереди переворачиваются в ней, как монета; нажатие (на компьютере — наведение) раскрывает над ней две кнопки
       с названиями; когда появляется «Наверх», кнопка плавно поднимается и стоит над ней;
     · в подвале и «Контактах» — кнопки с названием.
   Состав и ссылки — SOCIAL в tools/build-dk.mjs, знаки — /assets/dk/soc.svg */
.soc { display: inline-flex; align-items: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.soc-i { position: relative; flex: none; display: block; width: var(--soc, 40px); height: var(--soc, 40px); border-radius: 50%; overflow: hidden; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 20px -12px var(--soc-sh, rgba(22, 41, 74, 0.7)); }
.soc-i svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; fill: currentColor; }
.soc-telegram .soc-i { background: linear-gradient(160deg, #3fbcfb 0%, #1c93d6 100%); --soc-sh: rgba(28, 146, 210, 0.9); }
.soc-whatsapp .soc-i { background: linear-gradient(160deg, #4fdd76 0%, #1fb355 100%); --soc-sh: rgba(31, 171, 77, 0.9); }
.soc-max .soc-i { background: linear-gradient(140deg, #35c6ff 0%, #3d7bff 48%, #9150ff 100%); --soc-sh: rgba(88, 96, 255, 0.9); }
.soc-vk .soc-i { background: linear-gradient(160deg, #2b8cff 0%, #0068ef 100%); --soc-sh: rgba(0, 119, 255, 0.9); }
.soc:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 999px; }

/* «Контакты»: кнопки с названием */
.soc-row { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-list .soc-row .soc, .soc-row .soc { gap: 12px; padding: 6px 22px 6px 6px; border-radius: 999px; font-size: 17.5px; font-weight: 500; line-height: 1; color: var(--ink);
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px -20px rgba(22, 41, 74, 0.55);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.3s; }
.soc-row .soc-i { --soc: 44px; }
/* (в списке контактов любой span — «подпись строки» капсом и серым: значку и названию кнопки возвращаем свой вид) */
.contact-list li .soc-row .soc .soc-i { padding: 0; font-size: 0; letter-spacing: 0; color: #fff; }
.contact-list li .soc-row .soc .soc-n { padding: 0; font-size: 17.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.soc-row .soc:hover { transform: translateY(-2px); background: #fff; box-shadow: inset 0 1px 0 #fff, 0 20px 34px -20px rgba(22, 41, 74, 0.65); }
.soc-row .soc:active { transform: none; }

/* подвал: кнопки под телефоном — значок и название на синем поле */
.ftr .ftr-soc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ftr .ftr-soc a.soc { display: inline-flex; gap: 9px; padding: 5px 16px 5px 5px; border-radius: 999px; font-size: 15.5px; font-weight: 500; line-height: 1; color: #fff;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24);
  transition: transform 0.5s var(--ease), background-color 0.3s, border-color 0.3s; }
.ftr .ftr-soc a.soc:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); text-decoration: none; }
.ftr .ftr-soc .soc-i { --soc: 36px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 20px -12px rgba(0, 0, 0, 0.55); }
.ftr .ftr-soc .soc-n { color: #fff; }

/* ── кнопка на экране ──
   Место: правый нижний угол; когда видна «Наверх» — кнопка плавно поднимается и встаёт НАД ней (11.11, владелец: «когда
   появляется стрелка вверх, иконки соцсетей должны аккуратно сдвигаться вверх и находиться над кнопкой, на ПК тоже»):
   msg.js следит за стрелкой и пишет высоту подъёма в --lift (0 — стрелки нет). Пока кнопка не видна, подъём — без движения */
.dk-msg { position: fixed; z-index: 39; right: var(--pad, 20px); bottom: 28px; opacity: 0; visibility: hidden;
  transform: translate3d(0, calc(-1 * var(--lift, 0px)), 0); transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.dk-msg.on { opacity: 1; visibility: visible; transition: opacity 0.5s ease, transform 0.75s cubic-bezier(0.3, 0.75, 0.25, 1); }
.dk-msg-in { position: relative; transform: translate3d(0, 10px, 0); transition: transform 0.6s var(--ease); }
.dk-msg.on .dk-msg-in { transform: none; }
/* открыты меню или запись, идёт вход главной, человек печатает в поле — кнопки нет */
.menu-open .dk-msg.on, .modal-open .dk-msg.on, html.hdr-wait .dk-msg.on, .dk-msg.on.away { opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.75s cubic-bezier(0.3, 0.75, 0.25, 1); }
.menu-open .dk-msg.on .dk-msg-in, .modal-open .dk-msg.on .dk-msg-in, html.hdr-wait .dk-msg.on .dk-msg-in, .dk-msg.on.away .dk-msg-in { transform: translate3d(0, 10px, 0); }
.dk-msg-b { position: relative; display: block; width: 60px; height: 60px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink, #16294a);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dk-msg-b:focus-visible { outline: 2px solid var(--blue, #275da7); outline-offset: 4px; }
/* кольцо-«отклик» в цвет мессенджера, расходится при смене значка (msg.js) */
.dk-msg-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cur, #25d366); opacity: 0; pointer-events: none; }
.dk-msg[data-cur="whatsapp"] { --cur: #2fc463; }
.dk-msg[data-cur="max"] { --cur: #5a72ff; }
.dk-msg[data-cur="telegram"] { --cur: #2aa3e6; }
.dk-msg[data-cur="vk"] { --cur: #1a7dff; }
/* «монета»: значки по очереди поворачиваются вокруг вертикальной оси */
.dk-msg-flip { position: absolute; inset: 0; border-radius: 50%; perspective: 320px; transition: transform 0.45s var(--ease), opacity 0.3s ease; }
.dk-msg-f { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transform: rotateY(-90deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dk-msg-f.on { opacity: 1; transform: none; transition: transform 0.46s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.25s, opacity 0.01s linear 0.25s; }
.dk-msg-f.out { opacity: 0; transform: rotateY(90deg); transition: transform 0.26s cubic-bezier(0.6, 0, 0.9, 0.4), opacity 0.01s linear 0.25s; }
.dk-msg-f .soc-i { width: 100%; height: 100%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.96), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 16px 28px -12px var(--soc-sh), 0 4px 10px -4px rgba(22, 41, 74, 0.3); }
/* раскрыто: вместо значка — крестик */
.dk-msg-x { position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 16px 28px -14px rgba(22, 41, 74, 0.6), 0 4px 10px -4px rgba(22, 41, 74, 0.25);
  opacity: 0; transform: scale(0.6) rotate(-90deg); transition: transform 0.45s var(--ease), opacity 0.25s ease; }
.dk-msg-x::before, .dk-msg-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 2px; background: currentColor; }
.dk-msg-x::before { transform: rotate(45deg); }
.dk-msg-x::after { transform: rotate(-45deg); }
.dk-msg.open .dk-msg-flip { opacity: 0; transform: scale(0.6) rotate(90deg); }
.dk-msg.open .dk-msg-x { opacity: 1; transform: none; }
/* две кнопки с названиями — над кнопкой, выезжают по очереди снизу */
.dk-msg-menu { position: absolute; right: 0; bottom: calc(100% + 12px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.35s; }
.dk-msg-menu::after { content: ''; position: absolute; z-index: -1; left: -14px; right: -14px; top: -14px; bottom: -14px; } /* мостик для мыши между кнопкой и списком */
.dk-msg.open .dk-msg-menu { visibility: visible; pointer-events: auto; transition: none; }
.dk-msg-menu .soc { gap: 12px; padding: 6px 24px 6px 6px; border-radius: 999px; font-size: 17.5px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--ink, #16294a);
  background: rgba(255, 255, 255, 0.97); border: 1px solid #fff; box-shadow: 0 18px 36px -18px rgba(22, 41, 74, 0.6), 0 3px 8px -3px rgba(22, 41, 74, 0.2);
  opacity: 0; transform: translate3d(0, 14px, 0) scale(0.92); transform-origin: 100% 100%; transition: opacity 0.2s ease, transform 0.3s var(--ease), background-color 0.3s; }
.dk-msg-menu .soc-i { --soc: 46px; }
.dk-msg.open .dk-msg-menu .soc { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.5s var(--ease), background-color 0.3s; }
.dk-msg.open .dk-msg-menu .soc:nth-last-child(2) { transition-delay: 0.06s, 0.06s, 0s; }
.dk-msg.open .dk-msg-menu .soc:nth-last-child(3) { transition-delay: 0.12s, 0.12s, 0s; }
@media (hover: hover) and (pointer: fine) {
  .dk-msg.open .dk-msg-menu .soc:hover { transform: translate3d(-3px, 0, 0); transition-delay: 0s; }
}
/* «Наверх» — на своём месте в углу (компьютер: плашка справа внизу, как была; телефон: круг 40 px — на 5 px дальше от краёв,
   чтобы стоять на одной оси с кнопкой 54 px над ним) */
@media (max-width: 760px) {
  .dk-msg { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .dk-msg-b { width: 54px; height: 54px; }
  .dk-msg-menu { bottom: calc(100% + 10px); gap: 8px; }
  .dk-up, .variant .vr-again { right: 21px; bottom: calc(21px + env(safe-area-inset-bottom)); }
  .ftr .ftr-soc { margin-top: 16px; }
  .ftr .ftr-soc a.soc { gap: 11px; padding: 5px 20px 5px 5px; font-size: 16.5px; }
  .ftr .ftr-soc .soc-i { --soc: 40px; }
  .soc-row .soc, .contact-list li .soc-row .soc .soc-n { font-size: 16.5px; }
}
/* «уменьшить движение»: значки сменяются плавным проявлением, без поворота; кольца нет (msg.js) */
@media (prefers-reduced-motion: reduce) {
  .soc, .ftr .ftr-soc a.soc { transition: none; }
  .dk-msg-f { transform: none; }
  .dk-msg-f.on { transition: opacity 0.6s ease; }
  .dk-msg-f.out { transform: none; transition: opacity 0.6s ease; }
}