/* =====================================================================
   Наготове 24 - виджет чата сайта (консультант Алекс + демо администратора ниши).
   Подключение - см. комментарий в начале /assets/chat.js. Стили самодостаточны.
   ===================================================================== */
.tgfab{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(18px,2.6vw,28px);z-index:75;
  display:flex;align-items:center;gap:11px;padding:13px 20px 13px 15px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#12b077,#0a7049);color:#fff;border-radius:999px;font:inherit;font-family:inherit;
  font-weight:800;font-size:15px;line-height:1.2;box-shadow:0 18px 40px -16px rgba(6,60,42,.75),0 0 0 1px #cfe5da;
  transition:transform .2s,box-shadow .2s,opacity .25s}
.tgfab .bico{width:26px;height:26px;flex:none;display:block}
.tgfab:hover{transform:translateY(-2px);box-shadow:0 24px 48px -18px rgba(6,60,42,.75),0 0 0 1px #cfe5da}
.tgfab .pulse{position:absolute;inset:0;border-radius:999px;pointer-events:none;box-shadow:0 0 0 0 rgba(14,158,105,.45)}
@media (prefers-reduced-motion:no-preference){.tgfab .pulse{animation:n24fabPulse 3.4s ease-out infinite}}
@keyframes n24fabPulse{0%{box-shadow:0 0 0 0 rgba(14,158,105,.45)}70%{box-shadow:0 0 0 16px rgba(14,158,105,0)}100%{box-shadow:0 0 0 0 rgba(14,158,105,0)}}
.tgfab .dot{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:#2ED688;border:2px solid #fff;display:none}
.tgfab.hasnew .dot{display:block}
@media(max-width:640px){
  .tgfab{bottom:calc(16px + env(safe-area-inset-bottom));right:14px;padding:13px;gap:0}
  .tgfab span.lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tgfab .bico{width:28px;height:28px}
}
body.ck-open .tgfab{opacity:0;pointer-events:none;transform:translateY(12px)}
.tgfab.off{transform:translateY(14px) scale(.96);opacity:0;pointer-events:none}
body.cw-open .tgfab{opacity:0;pointer-events:none}
.tgfab.n24-nofab{display:none!important}
@media(max-width:640px){.tgfab.n24-nofab-m{display:none!important}}

.cw{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(18px,2.6vw,28px);z-index:120;
  width:min(390px,calc(100vw - 28px));height:min(600px,calc(100vh - 40px));font-family:inherit;color:#12352a;
  background:#fff;border-radius:20px;overflow:hidden;display:none;flex-direction:column;
  box-shadow:0 32px 80px -24px rgba(3,30,20,.62),0 0 0 1px rgba(6,60,42,.08);
  transform:translateY(16px) scale(.98);opacity:0;transition:transform .22s,opacity .22s}
.cw *{box-sizing:border-box}
.cw.open{display:flex;transform:none;opacity:1}
@media(max-width:640px){.cw{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0}}
.cw-head{background:linear-gradient(135deg,#12b077,#0a7049);color:#fff;padding:15px 16px;display:flex;align-items:center;gap:11px;flex:none}
.cw-av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex:none}
.cw-ht{min-width:0}
.cw-ht b{display:block;font-size:15.5px;line-height:1.2}
.cw-ht span{font-size:12.5px;opacity:.9;display:flex;align-items:center;gap:6px}
.cw-ht span::before{content:"";width:8px;height:8px;border-radius:50%;background:#7BE8B4;box-shadow:0 0 0 3px rgba(123,232,180,.3)}
.cw-x{margin-left:auto;background:rgba(255,255,255,.16);border:0;color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;flex:none}
.cw-x:hover{background:rgba(255,255,255,.28)}
/* плашка демо-режима */
.cw-demo{display:none;align-items:center;gap:10px;flex:none;background:#fff5e2;color:#5a4415;border-bottom:1px solid #f2dfae;
  padding:9px 14px;font-size:13px;line-height:1.3}
.cw-demo.on{display:flex}
.cw-demo b{font-weight:800}
.cw-demo button{margin-left:auto;flex:none;border:1px solid #e6c779;background:#fff;color:#7a5207;border-radius:999px;
  padding:6px 11px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.cw-demo button:hover{background:#fff9ec}
.cw-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(#f6faf8,#fff)}
.cw-m{max-width:85%;padding:10px 13px;border-radius:15px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.cw-a{align-self:flex-start;background:#eef4f1;color:#12352a;border-bottom-left-radius:5px}
.cw-m a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.cw-a a{color:#0a7049}
.cw-u{align-self:flex-end;background:#0e9e69;color:#fff;border-bottom-right-radius:5px}
.cw-op{align-self:flex-start;background:#fff4dc;color:#5a4415;border-bottom-left-radius:5px;border:1px solid #f2dfae}
.cw-p{align-self:flex-start;background:#fff;color:#12352a;border:1.5px solid #bfe3d1;border-bottom-left-radius:5px}
.cw-lab{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.02em;color:#7c9488;margin:-4px 0 -4px 2px}
.cw-lab.op{color:#b7841e}
.cw-lab.p{color:#0a7049}
.cw-typing{align-self:flex-start;color:#7c9488;font-size:13px;padding:2px 8px}
.cw-empty{margin:auto 4px 0;text-align:center;color:#5c6b63;font-size:13.5px;line-height:1.5;display:flex;flex-direction:column;gap:8px}
.cw-empty b{color:#12352a;font-size:15px}
.cw-empty .cw-live{font-size:12.5px;color:#6f7f77}
.cw-empty a{color:#0a7049;font-weight:700;text-decoration:none;white-space:nowrap}
/* кнопки-подсказки под последним сообщением */
.cw-btns{display:flex;flex-wrap:wrap;gap:6px;align-self:stretch;margin-top:2px}
.cw-btns button{border:1px solid #cfe6db;background:#f1f8f4;color:#0a7049;border-radius:999px;padding:7px 12px;
  font:inherit;font-size:13px;font-weight:700;line-height:1.25;cursor:pointer;text-align:left}
.cw-btns button:first-child.hl{background:#0e9e69;border-color:#0e9e69;color:#fff}
.cw-btns button:hover{background:#e2f1ea}
.cw-btns button:first-child.hl:hover{background:#0a7049}
.cw-foot{border-top:1px solid #e6efea;background:#fff;padding:10px 12px;flex:none}
.cw-form{display:flex;gap:8px;align-items:flex-end;margin:0}
.cw-form textarea{flex:1;border:1px solid #dbe7e0;border-radius:13px;padding:10px 13px;font:inherit;font-size:15px;resize:none;max-height:96px;line-height:1.4;color:#12352a;min-width:0}
.cw-form textarea:focus{outline:none;border-color:#0e9e69}
.cw-form button{background:#0e9e69;color:#fff;border:0;border-radius:12px;width:44px;height:44px;font-size:19px;cursor:pointer;flex:none}
.cw-form button:disabled{opacity:.45;cursor:default}
.cw-note{text-align:center;font-size:11px;color:#9bb0a6;margin-top:7px}
