/* Чат на сайте: кнопка, всплывающее приветствие Алисы и окно переписки.
   Цвета берём из переменных темы сайта, поэтому виджет живёт и в тёмной, и в светлой.
   --chat-lift поднимает его над плашкой о cookie, пока она на экране. */
.wchat{position:fixed;right:20px;bottom:calc(20px + var(--chat-lift,0px));z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:inherit}
.wchat *{box-sizing:border-box}
.wchat button{font:inherit;border:0;cursor:pointer}
.wchat__btn{position:relative;width:58px;height:58px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,#b21e3c,var(--accent,#e23a55));display:grid;place-items:center;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.55);transition:transform .2s,filter .2s}
.wchat__btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.wchat__btn svg{width:27px;height:27px}
.wchat__badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#fff;color:#b21e3c;font-size:12px;font-weight:800;line-height:20px;text-align:center}
.wchat__ava{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--line,#2a2024)}
.wchat__head .wchat__ava{width:42px;height:42px;box-shadow:0 0 0 2px rgba(255,255,255,.15)}

.wchat__teaser{position:relative;max-width:300px;animation:wchat-in .35s ease both}
.wchat__teaser-body{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  background:var(--card,#1a1416);color:inherit;padding:14px 16px;border-radius:16px;
  border:1px solid var(--line,#2a2024);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);font-size:14px;line-height:1.45}
.wchat__teaser-body b{display:block;font-size:13px;margin-bottom:2px}
.wchat__teaser-text{display:block;white-space:pre-line;color:var(--muted,#a99ca2)}
.wchat__teaser-x{position:absolute;top:-10px;left:-10px;width:26px;height:26px;border-radius:50%;
  background:var(--line,#2a2024);color:inherit;font-size:17px;line-height:1}

.wchat__panel{width:370px;height:min(560px,calc(100dvh - 120px));display:flex;flex-direction:column;
  background:var(--card,#1a1416);border:1px solid var(--line,#2a2024);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);animation:wchat-in .25s ease both}
.wchat__panel[hidden],.wchat__teaser[hidden]{display:none}
.wchat__head{display:flex;align-items:center;gap:12px;padding:14px;color:#fff;
  background:linear-gradient(135deg,#7e1430,#b21e3c)}
.wchat__who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.wchat__who b{font-size:15px}
.wchat__who small{font-size:12px;opacity:.85}
.wchat__x{width:36px;height:36px;border-radius:50%;background:none;color:#fff;font-size:26px;line-height:1;opacity:.85}
.wchat__x:hover{opacity:1;background:rgba(255,255,255,.12)}

.wchat__log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 14px;display:flex;
  flex-direction:column;gap:8px;background:var(--bg,#0c0a0b)}
.wchat__msg{max-width:82%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere}
.wchat__msg a{color:inherit;text-decoration:underline}
.wchat__msg--agent{align-self:flex-start;background:var(--card,#1a1416);border:1px solid var(--line,#2a2024);
  border-bottom-left-radius:5px}
.wchat__msg--client{align-self:flex-end;background:linear-gradient(135deg,#b21e3c,var(--accent,#e23a55));
  color:#fff;border-bottom-right-radius:5px}
.wchat__msg--pending{opacity:.6}
.wchat__msg--error{align-self:center;max-width:100%;background:none;color:var(--accent,#e23a55);font-size:13px;
  text-align:center;padding:4px 8px}

.wchat__form{display:flex;align-items:flex-end;gap:8px;padding:10px 10px 6px 14px;
  border-top:1px solid var(--line,#2a2024);background:var(--card,#1a1416)}
.wchat__form textarea{flex:1;resize:none;border:0;outline:0;background:none;font:inherit;font-size:15px;
  line-height:1.4;color:inherit;max-height:120px;padding:9px 0}
.wchat__form button{flex:none;width:42px;height:42px;border-radius:50%;color:#fff;display:grid;place-items:center;
  background:linear-gradient(135deg,#b21e3c,var(--accent,#e23a55));transition:filter .2s,opacity .2s}
.wchat__form button:hover{filter:brightness(1.08)}
.wchat__form button:disabled{opacity:.5}
.wchat__form button svg{width:19px;height:19px}
.wchat__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wchat__legal{margin:0;padding:0 14px 10px;font-size:11px;color:var(--muted,#a99ca2);background:var(--card,#1a1416)}
.wchat__legal a{color:inherit}

@keyframes wchat-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.wchat__teaser,.wchat__panel{animation:none}}

/* Телефон: переписка занимает весь экран, кнопка уходит. */
@media (max-width:640px){
  .wchat{right:14px;bottom:calc(14px + var(--chat-lift,0px))}
  .wchat__btn{width:54px;height:54px}
  .wchat__teaser{max-width:calc(100vw - 90px)}
  .wchat.is-open{inset:0;right:0;bottom:0;z-index:95}
  .wchat.is-open .wchat__btn{display:none}
  .wchat__panel{position:fixed;inset:0;width:auto;height:100dvh;border-radius:0;border:0}
  .wchat__head{padding-top:max(14px,env(safe-area-inset-top))}
  .wchat__legal{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .wchat__form textarea{font-size:16px}   /* иначе iOS увеличивает страницу при фокусе */
}