/* ==========================================================================
   WoodGrand — виджет чата с ИИ-агентом Еленой
   chat-widget.css
   ==========================================================================
   Один файл на десктоп + мобильную версию, переключение через
   @media (max-width: 640px). Все цвета/шрифты берутся из бренда woodgrand.ru.
   ========================================================================== */

:root{
  --wg-green:#1E4B39;
  --wg-green-dark:#153427;
  --wg-orange:#F0791A;
  --wg-orange-dark:#D9640A;
  --wg-black:#171717;
  --wg-online:#3FAE60;
}

#wg-chat-root, #wg-chat-root *{
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
#wg-chat-root{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2147483647; /* абсолютный максимум z-index в браузере — строго выше всего */
}
#wg-chat-root .wg-clickable{ pointer-events:auto; }

/* ---------------------------------------------------------------------- */
/* Ярлычок (state 0)                                                      */
/* ---------------------------------------------------------------------- */
.wg-tab{
  position:absolute;
  right:16px; bottom:84px;
  display:flex; align-items:center; gap:12px;
  background:#27593b;
  color:#fff;
  padding:7px 24px 7px 7px;
  border-radius:32px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(39,89,59,.3);
  font-size:15px; font-weight:500;
  border:none;
  transition:transform .15s ease;
}
.wg-tab:hover{ transform:translateY(-1px); }
.wg-tab .wg-tab-icon{
  width:44px;height:44px;border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#27593b;
  flex:none;
}
.wg-tab .wg-tab-icon svg{ width:24px; height:24px; }
.wg-tab::before, .wg-tab::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:wg-ping 2.2s cubic-bezier(.2,.6,.3,1) infinite;
  pointer-events:none;
  z-index:-1;
}
.wg-tab::after{
  animation-delay:1.1s;
  box-shadow:0 0 0 0 rgba(15,40,30,.5);
  animation-name:wg-ping-alt;
}
.wg-tab.wg-ripple-paused::before,
.wg-tab.wg-ripple-paused::after{ animation-play-state:paused; opacity:0; }
@keyframes wg-ping{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.7); }
  70%{ box-shadow:0 0 0 16px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 16px rgba(255,255,255,0); }
}
@keyframes wg-ping-alt{
  0%{ box-shadow:0 0 0 0 rgba(15,40,30,.5); }
  70%{ box-shadow:0 0 0 16px rgba(15,40,30,0); }
  100%{ box-shadow:0 0 0 16px rgba(15,40,30,0); }
}
.wg-tab .wg-unread-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:10px;
  background:var(--wg-green);
  color:#fff; font-size:11px; font-weight:800;
  display:none; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.wg-tab.wg-has-unread .wg-unread-badge{ display:flex; }

/* ---------------------------------------------------------------------- */
/* Backdrop (блюр фона) — используется на мобильном под шторкой           */
/* ---------------------------------------------------------------------- */
.wg-backdrop{
  position:absolute; inset:0;
  background:rgba(20,20,20,.22);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .32s ease;
}
.wg-backdrop.wg-show{ opacity:1; pointer-events:auto; }

/* ---------------------------------------------------------------------- */
/* Карточка приветствия (desktop: floating panel) / шторка (mobile)       */
/* ---------------------------------------------------------------------- */
.wg-greeting{
  position:absolute;
  right:20px; bottom:84px;
  width:320px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(30,40,35,.14);
  overflow:hidden;
  display:none;
}
.wg-greeting.wg-show{ display:block; }

.wg-greeting-head{ padding:18px 34px 12px 18px; position:relative; }
.wg-greeting-top-row{ display:flex; gap:12px; align-items:center; margin-bottom:10px; min-width:0; }
.wg-greeting-text-col{ flex:1; min-width:0; }

.wg-avatar{
  width:48px; height:48px; border-radius:50%;
  flex:none;
  background:var(--wg-orange);
  color:#fff; font-weight:900; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--wg-green);
  position:relative;
}
.wg-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.wg-avatar .wg-status-dot{
  position:absolute; right:1px; bottom:1px;
  width:12px;height:12px;border-radius:50%;
  background:var(--wg-online); border:2.5px solid #fff;
  z-index:2;
}

.wg-agent-name{
  font-size:15px; font-weight:900; margin:0;
  color:var(--wg-green-dark);
  text-transform:uppercase; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.15;
}
.wg-agent-role{
  font-size:12.5px; font-weight:600; margin:0;
  color:#8a8477;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.2;
}

.wg-typing-row{
  display:none; align-items:center; gap:4px;
  width:fit-content;
  background:#F0EEE7;
  padding:12px 14px;
  border-radius:16px 16px 16px 5px;
  margin-bottom:7px;
}
.wg-typing-row.wg-show{ display:flex; }
.wg-typing-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--wg-green); opacity:.4;
  animation:wg-typing-blink 1.2s infinite;
}
.wg-typing-dot:nth-child(2){ animation-delay:.2s; }
.wg-typing-dot:nth-child(3){ animation-delay:.4s; }
@keyframes wg-typing-blink{ 0%,80%,100%{opacity:.35} 40%{opacity:1} }

.wg-greeting-msg{
  font-size:14px; line-height:1.5; margin:0; color:#2a2a2a;
  display:none;
  width:fit-content; max-width:92%;
  background:#F0EEE7;
  padding:9px 13px;
  border-radius:16px 16px 16px 5px;
}
.wg-greeting-msg.wg-show{ display:block; }
.wg-greeting-msg-1{ margin-bottom:7px; }

.wg-close{
  position:absolute; top:10px; right:10px;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; color:#3B2E22; opacity:.4;
  transition:opacity .15s ease, background .15s ease;
  background:none; border:none;
}
.wg-close:hover, .wg-close:active{ opacity:.8; background:#f2efe8; }

.wg-greeting-actions{ padding:12px 18px 20px; }
.wg-btn-primary{
  width:100%;
  padding:17px 16px; border-radius:16px; border:none;
  font-size:16px; font-weight:800; cursor:pointer; font-family:inherit;
  color:#fff; letter-spacing:.01em;
  background:linear-gradient(180deg,#F89A3D 0%,var(--wg-orange) 45%,var(--wg-orange-dark) 100%);
  display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 6px 16px rgba(217,100,10,.38), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.wg-btn-primary:hover{ filter:brightness(1.04); box-shadow:0 8px 20px rgba(217,100,10,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.wg-btn-primary:active{ transform:translateY(2px) scale(.99); box-shadow:0 3px 10px rgba(217,100,10,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.wg-btn-primary svg{ width:22px; height:22px; flex:none; }
.wg-btn-primary svg circle{ fill:var(--wg-orange); }
@keyframes wg-btn-pulse{
  0%,100%{ box-shadow:0 6px 16px rgba(217,100,10,.38), inset 0 1px 0 rgba(255,255,255,.35); }
  50%{ box-shadow:0 6px 22px rgba(217,100,10,.6), inset 0 1px 0 rgba(255,255,255,.35); }
}
.wg-btn-primary{ animation:wg-btn-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .wg-btn-primary{ animation:none; } }

.wg-sheet-handle{ display:none; }

/* ---------------------------------------------------------------------- */
/* Окно чата (desktop: floating window) / полноэкранный (mobile)          */
/* ---------------------------------------------------------------------- */
.wg-chat{
  display:none;
  position:absolute;
  right:20px; bottom:84px;
  width:320px; height:480px;
  border-radius:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  overflow:hidden;
  flex-direction:column;
  background:#fff;
}
.wg-chat.wg-show{ display:flex; }

.wg-chat-top{
  background:var(--wg-green);
  padding:12px 14px;
  display:flex; align-items:center; gap:10px;
  flex:none;
}
.wg-chat-back{ display:none; }
.wg-chat-top .wg-avatar{ width:32px; height:32px; font-size:12px; border-color:#fff; }
.wg-chat-name{ color:#fff; font-size:13.5px; font-weight:800; text-transform:uppercase; }
.wg-chat-status{ color:#BFE0CC; font-size:11.5px; }
.wg-chat-minimize{
  margin-left:auto;
  width:26px; height:26px; border-radius:50%;
  border:none; background:none; cursor:pointer;
  color:#fff; opacity:.75; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.wg-chat-minimize:hover{ opacity:1; background:rgba(255,255,255,.15); }

.wg-chat-body{
  flex:1; padding:14px; overflow-y:auto;
  display:flex; flex-direction:column; gap:9px;
  background:#faf9f6;
}
.wg-msg-row{ display:flex; align-items:flex-end; gap:6px; }
.wg-msg-row.wg-mine{ justify-content:flex-end; }
.wg-mini-avatar{
  width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--wg-orange); color:#fff; font-size:10px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.wg-mini-avatar img{ width:100%; height:100%; object-fit:cover; }
.wg-bubble{
  max-width:78%; padding:10px 13px; border-radius:14px;
  font-size:14px; line-height:1.5;
  background:#fff; border:1px solid #eee6d8;
  color:#222;
  border-bottom-left-radius:4px;
  white-space:pre-wrap; word-break:break-word;
}
.wg-bubble.wg-mine{
  background:#E3F1E8; border-color:#BEDDC9; color:#163826;
  border-bottom-left-radius:14px; border-bottom-right-radius:4px;
}
.wg-typing-bubble{
  display:flex; align-items:center; gap:4px;
  padding:11px 14px; border-radius:14px; border-bottom-left-radius:4px;
  background:#fff; border:1px solid #eee6d8;
}
.wg-typing-bubble span{
  width:6px;height:6px;border-radius:50%; background:var(--wg-green);
  opacity:.35; animation:wg-blink 1.2s infinite;
}
.wg-typing-bubble span:nth-child(2){ animation-delay:.2s; }
.wg-typing-bubble span:nth-child(3){ animation-delay:.4s; }
@keyframes wg-blink{ 0%,80%,100%{opacity:.3} 40%{opacity:1} }

/* Кнопки-подсказки (контекстные варианты ответа) */
.wg-suggestions{
  display:flex; flex-wrap:wrap; gap:7px;
  justify-content:flex-end;
  margin-top:2px; padding-left:30px;
}
.wg-suggestion-btn{
  border:1.5px solid var(--wg-green);
  background:#fff; color:var(--wg-green);
  font-family:inherit; font-size:13px; font-weight:700;
  padding:8px 14px; border-radius:18px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.wg-suggestion-btn:hover, .wg-suggestion-btn:active{
  background:var(--wg-green); color:#fff;
}

.wg-chat-input-row{
  padding:10px 12px; display:flex; gap:8px;
  border-top:1px solid #eee6d8; background:#fff; flex:none;
}
.wg-chat-input-row input{
  flex:1; border:none; background:#f3f1ea; border-radius:20px;
  padding:10px 14px; font-size:14px; font-family:inherit; outline:none;
}
.wg-chat-send{
  width:36px;height:36px;border-radius:50%; border:none; cursor:pointer;
  background:var(--wg-orange); color:#fff; flex:none; font-size:14px;
}

/* ==========================================================================
   MOBILE (<= 640px): шторка снизу + полноэкранный чат
   ========================================================================== */
@media (max-width: 640px){

  /* На мобилке ярлычок — круглая кнопка (только иконка, без текста),
     размещена между кластером соцсетей и кнопкой "Заказать звонок".
     bottom подобран так, чтобы попасть в зазор между ними. */
  .wg-tab{
    right:18px;
    bottom:calc(157px + env(safe-area-inset-bottom, 0px));
    padding:0;
    width:58px; height:58px;
    border-radius:50%;
    justify-content:center;
    gap:0;
    font-size:0; /* прячем текстовую подпись */
  }
  .wg-tab .wg-tab-icon{
    width:58px; height:58px;
    background:transparent;
    color:#fff;
  }
  .wg-tab .wg-tab-icon svg{ width:29px; height:29px; }
  .wg-tab .wg-tab-icon svg circle{ fill:#27593b; }
  .wg-tab .wg-unread-badge{ font-size:11px; }

  .wg-greeting{
    right:0; left:0; bottom:0; top:auto;
    width:auto;
    border-radius:20px 20px 0 0;
    transform:translateY(calc(100% + 6px));
    transition:transform .38s cubic-bezier(.22,.9,.28,1);
    pointer-events:none;
    display:block; /* видимость теперь через transform, не display */
  }
  .wg-greeting.wg-show{
    transform:translateY(calc(-1 * var(--wg-kb-offset, 0px)));
    pointer-events:auto;
  }
  .wg-sheet-handle{
    display:block;
    width:36px; height:4px; border-radius:3px; background:#ddd;
    margin:10px auto 4px; cursor:grab;
  }
  .wg-greeting-head{ padding:8px 26px 12px 16px; cursor:grab; }
  .wg-greeting-actions{ padding:20px 16px calc(22px + env(safe-area-inset-bottom, 16px)); }

  .wg-chat{
    right:0; left:0; top:0; bottom:0;
    width:auto; height:auto;
    border-radius:0;
  }
  .wg-chat-back{ display:block; color:#fff; font-size:20px; margin-right:2px; cursor:pointer; background:none; border:none; }
  .wg-chat-minimize{ display:none; }
  .wg-chat-top{ padding:14px 14px 12px; }
  .wg-chat-input-row{ padding:10px 12px calc(10px + env(safe-area-inset-bottom, 8px)); }
}

/* ==========================================================================
   Доступность / производительность
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .wg-tab::before, .wg-tab::after{ animation:none !important; box-shadow:none !important; }
  .wg-greeting{ transition:none !important; }
  .wg-backdrop{ transition:none !important; }
}