/* Live-chat «Консультація» + липка панель на телефоні (inc/live-chat.php).
   Кольори — від теми: акцент var(--gold) (золото в темній, синій у світлій). */

.eg-chat{
  --c-bg: rgba(22,22,26,.92); --c-bd: rgba(255,255,255,.1); --c-tx: #F5F5F7; --c-mt: rgba(235,235,245,.6);
  --c-in: var(--gold,#ffbf2f); --c-in-tx: #09090D; --c-out: rgba(118,118,128,.28); --c-out-tx: #F5F5F7;
  --c-field: rgba(118,118,128,.24); --c-shadow: 0 24px 70px rgba(0,0,0,.55);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font,'DM Sans'), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] .eg-chat{
  --c-bg: rgba(255,255,255,.94); --c-bd: rgba(0,0,0,.08); --c-tx: #1D1D1F; --c-mt: #6E6E73;
  --c-in-tx: #FFFFFF; --c-out: #E9E9EB; --c-out-tx: #1D1D1F;
  --c-field: rgba(0,0,0,.05); --c-shadow: 0 24px 70px rgba(0,0,0,.18);
}
.eg-chat [hidden]{ display: none !important; }

/* ── кругла кнопка справа знизу ── */
.eg-chat__fab{
  position: fixed; right: 24px; bottom: 24px; z-index: 99980;
  display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 18px !important;
  border: 0; border-radius: 100px; cursor: pointer;
  background: var(--c-in); color: var(--c-in-tx);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--c-in) 40%, transparent), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, opacity .25s;
}
.eg-chat__fab:hover{ transform: translateY(-2px); background: var(--c-in); color: var(--c-in-tx); }
.eg-chat__fab:focus-visible{ outline: 3px solid color-mix(in srgb, var(--c-in) 55%, transparent); outline-offset: 3px; }
.eg-chat__fab svg{ width: 22px; height: 22px; flex-shrink: 0; }
.eg-chat__fab::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-in) 50%, transparent); animation: egChatPulse 2.8s ease-out 3s 3;
}
@keyframes egChatPulse{ 0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-in) 50%, transparent); } 100%{ box-shadow: 0 0 0 16px transparent; } }
.eg-chat__badge{
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: grid; place-items: center; background: #FF3B30; color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 3px var(--bg,#09090D);
}
.eg-chat.is-open .eg-chat__fab{ opacity: 0; pointer-events: none; transform: scale(.9); }

/* ── месенджери стовпчиком над кнопкою (комп'ютер) ── */
.eg-chat__dock{
  position: fixed; right: 29px; bottom: 96px; z-index: 99980;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 12px;
  transition: opacity .25s, transform .3s cubic-bezier(.16,1,.3,1);
}
.eg-chat__dock .eg-chat__msg{
  position: relative; width: 48px; height: 48px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 0 3px color-mix(in srgb, var(--bg,#09090D) 70%, transparent);
  animation: egDockIn .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(1.2s + var(--i) * .09s);
}
.eg-chat__dock .eg-chat__msg svg{ width: 22px; height: 22px; }
@keyframes egDockIn{ from{ opacity: 0; transform: translateY(12px) scale(.8); } to{ opacity: 1; transform: none; } }
.eg-chat__tip{
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px,-50%); white-space: nowrap; pointer-events: none;
  padding: 6px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1;
  background: var(--c-bg); color: var(--c-tx); border: 1px solid var(--c-bd); box-shadow: 0 6px 18px rgba(0,0,0,.3);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.eg-chat__dock .eg-chat__msg:hover .eg-chat__tip, .eg-chat__dock .eg-chat__msg:focus-visible .eg-chat__tip{ opacity: 1; transform: translate(0,-50%); }
.eg-chat.is-open .eg-chat__dock{ opacity: 0; pointer-events: none; transform: translateY(10px); }

/* ── панель ── */
.eg-chat__panel{
  position: fixed; right: 24px; bottom: 24px; z-index: 99990;
  width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px; background: var(--c-bg); border: 1px solid var(--c-bd); box-shadow: var(--c-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  color: var(--c-tx);
  opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right;
  transition: opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.eg-chat.is-open .eg-chat__panel{ opacity: 1; transform: none; }

.eg-chat__head{ display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--c-bd); }
.eg-chat__ava{ width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #09090D; display: grid; place-items: center; overflow: hidden; }
.eg-chat__ava img{ width: 28px; height: auto; }
.eg-chat__who{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eg-chat__who b{ font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.eg-chat__who span{ font-size: 12.5px; color: var(--c-mt); display: flex; align-items: center; gap: 6px; }
.eg-chat__who span::before{ content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #30D158; }
.eg-chat.is-off .eg-chat__who span::before{ background: #8E8E93; }
.eg-chat__x{ width: 32px; height: 32px; padding: 0 !important; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--c-field); color: var(--c-mt); transition: background .2s, color .2s; }
.eg-chat__x:hover{ background: var(--c-out); color: var(--c-tx); }
.eg-chat__x svg{ width: 14px; height: 14px; }

.eg-chat__log{ flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; scroll-behavior: smooth; }
.eg-chat__m{ max-width: 82%; padding: 9px 13px; border-radius: 18px; font-size: 15px; line-height: 1.38; white-space: pre-wrap; overflow-wrap: anywhere;
  animation: egChatIn .3s cubic-bezier(.16,1,.3,1); }
@keyframes egChatIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
.eg-chat__m--out{ align-self: flex-start; background: var(--c-out); color: var(--c-out-tx); border-bottom-left-radius: 6px; }
.eg-chat__m--in{ align-self: flex-end; background: var(--c-in); color: var(--c-in-tx); border-bottom-right-radius: 6px; }
.eg-chat__m--sys{ align-self: center; max-width: 92%; background: none; color: var(--c-mt); font-size: 12.5px; text-align: center; padding: 4px 8px; }
.eg-chat__m small{ display: block; margin-top: 3px; font-size: 11px; opacity: .6; }
.eg-chat__m.is-pending{ opacity: .6; }
.eg-chat__m.is-failed{ outline: 1px solid #FF3B30; }

.eg-chat__quick{ display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; }
.eg-chat__chip{ padding: 7px 12px !important; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--c-in) 45%, transparent);
  background: transparent; color: var(--c-tx); font: inherit; font-size: 13px; cursor: pointer; transition: background .2s; }
.eg-chat__chip:hover{ background: color-mix(in srgb, var(--c-in) 14%, transparent); color: var(--c-tx); }

/* імʼя й телефон (обовʼязкові) над полем повідомлення */
.eg-chat__intro{ margin: 0 14px 10px; padding: 12px; border-radius: 16px; background: var(--c-field); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eg-chat__intro[hidden]{ display: none; }
.eg-chat__intro p{ grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--c-mt); }
.eg-chat__intro input{ min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--c-bd); background: var(--c-bg); color: var(--c-tx); font: inherit; font-size: 16px; }
@media (max-width: 380px){ .eg-chat__intro{ grid-template-columns: 1fr; } }
.eg-chat__phone{ margin: 0 14px 10px; padding: 12px; border-radius: 16px; background: var(--c-field); display: flex; flex-wrap: wrap; gap: 8px; }
.eg-chat__phone p{ flex-basis: 100%; margin: 0; font-size: 13px; color: var(--c-mt); }
.eg-chat__phone input{ flex: 1 1 150px; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--c-bd); background: var(--c-bg); color: var(--c-tx); font: inherit; font-size: 16px; }
.eg-chat__phone button{ height: 40px; padding: 0 14px !important; border: 0; border-radius: 10px; background: var(--c-in); color: var(--c-in-tx); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

.eg-chat__form{ display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--c-bd); }
.eg-chat__form textarea{
  flex: 1; min-width: 0; max-height: 120px; min-height: 40px; padding: 9px 14px; resize: none;
  border-radius: 20px; border: 1px solid var(--c-bd); background: var(--c-field); color: var(--c-tx);
  font: inherit; font-size: 16px; line-height: 1.35;
}
.eg-chat__form textarea:focus, .eg-chat__phone input:focus, .eg-chat__intro input:focus{ outline: none; border-color: var(--c-in); }
.eg-chat__send{ width: 40px; height: 40px; flex-shrink: 0; padding: 0 !important; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--c-in); color: var(--c-in-tx); transition: transform .2s, opacity .2s; }
.eg-chat__send:disabled{ opacity: .4; cursor: default; }
.eg-chat__send svg{ width: 18px; height: 18px; }
.eg-chat__hp{ position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.eg-chat__err{ margin: 0 14px 8px; font-size: 12.5px; color: #FF453A; }

/* месенджери — фірмові кружечки */
.eg-chat__alt{ display: flex; align-items: center; justify-content: center; gap: 12px; padding: 2px 14px 14px; font-size: 12.5px; color: var(--c-mt); }
.eg-chat__msgs{ display: flex; gap: 8px; }
.eg-chat__msg{ width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: #fff;
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, filter .2s; }
.eg-chat__msg svg{ width: 19px; height: 19px; }
.eg-chat__msg--telegram{ background: #1679AE; }
.eg-chat__msg--viber{ background: #7360F2; }
.eg-chat__msg--whatsapp{ background: #1DA851; }
.eg-chat__msg:hover{ color: #fff; transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 16px rgba(0,0,0,.28); filter: brightness(1.08); }
.eg-chat__msg:focus-visible{ outline: 3px solid color-mix(in srgb, var(--c-in) 55%, transparent); outline-offset: 2px; }

/* ── липка панель на телефоні ── */
.eg-mbar{ display: none; }
@media (max-width: 900px){
  .eg-chat__fab, .eg-chat__dock{ display: none; }
  body{ padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .eg-mbar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99970;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--nav-bg, rgba(9,9,13,.88)); border-top: 1px solid var(--border, rgba(255,255,255,.08));
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .eg-mbar.is-hidden{ transform: translateY(110%); }
  .eg-mbar a, .eg-mbar button{
    position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 12px !important;
    border-radius: 14px; border: 0; font: 600 15px/1 var(--font,'DM Sans'), system-ui, sans-serif; text-decoration: none; cursor: pointer;
  }
  .eg-mbar svg{ width: 19px; height: 19px; flex-shrink: 0; }
  .eg-mbar__call{ background: var(--gold,#ffbf2f); color: #09090D; }
  html[data-theme="light"] .eg-mbar__call{ color: #fff; }
  .eg-mbar__chat{ background: var(--surface2, rgba(255,255,255,.08)); color: var(--text,#F4F4F6); border: 1px solid var(--border, rgba(255,255,255,.1)) !important; }
  .eg-mbar__chat .eg-chat__badge{ top: 6px; right: 10px; box-shadow: none; }
  .eg-mbar__call:hover{ color: #09090D; } html[data-theme="light"] .eg-mbar__call:hover{ color: #fff; }

  .eg-chat__panel{ inset: 0; right: 0; bottom: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(24px); }
  .eg-chat__m{ max-width: 86%; }
  html.eg-chat-lock, html.eg-chat-lock body{ overflow: hidden; }
}

@media (prefers-reduced-motion: reduce){
  .eg-chat__fab::before, .eg-chat__dock .eg-chat__msg{ animation: none; }
  .eg-chat__panel, .eg-chat__m, .eg-mbar{ transition: none; animation: none; }
}