/* Плавающая панель связи: на компьютере плашка внизу экрана, на телефоне две круглые кнопки мессенджеров.
   Общая для главной и страниц поводов. Цвета заданы здесь, чтобы не зависеть от переменных страницы. */
.dock, .dock-fab{
  --dk-bg:rgba(19,17,23,.95); --dk-line:rgba(243,239,230,.12); --dk-ink:#F3EFE6; --dk-dim:#A19BAE; --dk-pulse:#31D0BB; --dk-void:#0A090D;
}

/* ---------- плашка (компьютер) ---------- */
.dock{
  position:fixed; left:50%; bottom:18px; z-index:25;
  display:flex; align-items:center; gap:14px;
  padding:10px 12px 10px 22px; max-width:calc(100vw - 32px);
  background:var(--dk-bg); border:1px solid rgba(49,208,187,.3); border-radius:20px;
  box-shadow:0 14px 44px rgba(0,0,0,.55), 0 0 30px rgba(49,208,187,.10);
  transform:translate(-50%, 160%); opacity:0; pointer-events:none;
  transition:transform .7s cubic-bezier(0.22, 1.25, 0.36, 1), opacity .35s ease, bottom .4s ease;
}
.dock.is-on{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; animation:dockFloat 5s ease-in-out 1s infinite; }
/* парение через отдельное свойство translate: transform занят выездом */
@keyframes dockFloat{ 0%, 100%{ translate:0 0; } 50%{ translate:0 -4px; } }
/* дыхание бирюзового свечения по контуру */
.dock::before{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 26px 2px rgba(49,208,187,.5); opacity:.18;
  animation:dockGlow 4.4s ease-in-out infinite;
}
@keyframes dockGlow{ 0%, 100%{ opacity:.12; } 50%{ opacity:.55; } }
.dock-joke{
  margin:0; white-space:nowrap; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.78rem; line-height:1.35;
  letter-spacing:.02em; color:var(--dk-dim); transition:opacity .25s ease, transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.dock-joke.is-swap{ opacity:0; transform:translateY(5px); }

.dock-cta{
  position:relative; isolation:isolate; overflow:hidden; flex:none;
  display:inline-flex; align-items:center; padding:12px 24px; border-radius:14px;
  font-family:'Russo One', system-ui, sans-serif; font-size:.95rem; letter-spacing:.02em; text-decoration:none;
  background:var(--dk-pulse); color:var(--dk-void);
  transition:transform .3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .3s ease;
}
.dock-cta::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg);
  animation:dockShine 4.6s ease-in-out infinite; animation-delay:1.4s;
}
@keyframes dockShine{ 0%, 55%{ left:-60%; } 85%, 100%{ left:130%; } }
.dock-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(49,208,187,.45); }
.dock-cta:active{ transform:scale(.97); }

.dock-msg{
  flex:none; display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 10px; border-radius:14px;
  border:1px solid var(--dk-line); color:var(--dk-ink); text-decoration:none;
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.8rem; letter-spacing:.04em;
  transition:border-color .25s ease, background .25s ease, transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
/* иконки: неоновая линия бирюзового цвета, как символы на экране «Состав» */
.dock-msg svg, .dock-fab svg{
  fill:none; stroke:var(--dk-pulse); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(49,208,187,.7));
}
.dock-msg svg{ width:24px; height:24px; flex:none; transition:transform .35s cubic-bezier(0.22, 1.4, 0.36, 1); }
.dock-msg:hover{ border-color:rgba(49,208,187,.6); background:rgba(49,208,187,.08); transform:translateY(-2px); }
.dock-msg:hover svg{ transform:rotate(-10deg) scale(1.12); }

.dock a:focus-visible, .dock-fab a:focus-visible{ outline:2px solid var(--dk-pulse); outline-offset:3px; }

/* ---------- две круглые кнопки (телефон и планшет) ---------- */
.dock-fab{
  position:fixed; right:14px; bottom:18px; z-index:21;
  display:none; flex-direction:column; gap:10px;
  transform:translateY(16px); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(0.22, 1.25, 0.36, 1), opacity .3s ease;
}
.dock-fab.is-on{ transform:none; opacity:1; pointer-events:auto; }
.dock-fab.above-nav{ bottom:128px; } /* над стрелками ↑ ↓: 18 + 2×44 + 10 + отступ */
.dock-fab a{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,25,.86); border:1px solid rgba(49,208,187,.35);
  transition:transform .16s ease-out;
}
.dock-fab a:active{ transform:scale(.94); }
.dock-fab svg{ width:24px; height:24px; }

/* режим телефона: плашка скрыта, вместо неё кнопки */
html.dock-compact .dock{ display:none; }
html.dock-compact .dock-fab{ display:flex; }

/* узкие окна компьютера: без шутки, чтобы не тесниться */
@media (max-width:1100px){ .dock-joke{ display:none; } .dock{ padding-left:12px; } }
/* поднять плашку, пока на экране плашка cookie слева внизу */
@media (max-width:1300px){ html.dock-lift .dock{ bottom:150px; } }

@media (prefers-reduced-motion:reduce){
  .dock, .dock-fab{ transition:opacity .2s ease; }
  .dock-cta::after{ animation:none; }
  .dock.is-on, .dock::before{ animation:none; }
}