/* assets/css/site-chat.css — виджет AIDA */
.cchat {
  --cchat-accent: #1e2a4a;
  --cchat-accent-grad: linear-gradient(135deg, #1e2a4a 0%, #38478f 100%);
  --cchat-bot: #f1f3f8;
  --cchat-bot-text: #1b2030;
  --cchat-muted: #8a90a2;
  --cchat-radius: 16px;
  --cchat-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: fixed; right: 24px; bottom: 24px; z-index: 99999;
  font-family: var(--cchat-font);
}

/* ---------- кнопка-аватар с глитчем ---------- */
.cchat__fab {
  position: relative;
  width: 5vw; height: 5vw;
  border: none; border-radius: 50%;
  padding: 0; cursor: pointer; overflow: hidden;
  background: #0d1326;
  box-shadow: 0 8px 24px rgba(30, 42, 74, .4);
  opacity: 0; transform: scale(.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media(max-width:768px){
	.cchat__fab {
  position: relative;
  width: 15vw; height: 15vw;
  border: none; border-radius: 50%;
  padding: 0; cursor: pointer; overflow: hidden;
  background: #0d1326;
  box-shadow: 0 8px 24px rgba(30, 42, 74, .4);
  opacity: 0; transform: scale(.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
}
.cchat--ready .cchat__fab {
  animation: cchatGlitchIn .7s steps(2, end) forwards;
}
.cchat__fab-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50%;
}
.cchat__fab:hover { box-shadow: 0 12px 30px rgba(30,42,74,.55); }
.cchat__fab:hover .cchat__fab-img { transform: scale(1.05); transition: transform .2s; }

/* глитч-оверлей */
.cchat__glitch {
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(transparent 0 40%, rgba(255,0,80,.4) 40% 45%, transparent 45% 55%, rgba(0,200,255,.4) 55% 60%, transparent 60%);
}
.cchat--ready .cchat__fab .cchat__glitch {
  animation: cchatGlitchFx .7s steps(5, end) 1;
}
@keyframes cchatGlitchIn {
  0%   { opacity: 0; transform: scale(.6) translate(0,0); filter: hue-rotate(0deg); }
  20%  { opacity: 1; transform: scale(1.05) translate(-3px,2px); filter: hue-rotate(90deg); }
  40%  { transform: scale(.97) translate(3px,-2px); filter: hue-rotate(-60deg); }
  60%  { transform: scale(1.02) translate(-2px,0); }
  100% { opacity: 1; transform: scale(1) translate(0,0); filter: hue-rotate(0deg); }
}
@keyframes cchatGlitchFx {
  0%, 100% { opacity: 0; transform: translateX(0); }
  30% { opacity: .8; transform: translateX(-4px); }
  60% { opacity: .6; transform: translateX(4px); }
}

/* ---------- плашка-приветствие ---------- */
.cchat__greet {
position: absolute;
    right: 5vw;
    bottom: 9vh;
    width: 160%;
    background: #fff;
    color: #1b2030;
    padding: 10px 14px;
    border-radius: 14px 14px 4px 14px;
    font-size: 10.5px;
    line-height: 1.4;
    box-shadow: 0 6px 20px rgba(20, 26, 48, .18);
    opacity: 0;
    transform: translateY(8px) scale(.95);
    pointer-events: none;
    cursor: pointer;
    white-space: normal;
    transition: opacity .25s ease, transform .25s ease;
    display: flex;
    align-items: flex-start;
}
@media(max-width:768px){
	.cchat__greet {
  position: absolute; right: 15vw; bottom: 20vh;
  width: 100%;
  background: #fff; color: #1b2030;
  padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 6px 20px rgba(20,26,48,.18);
  opacity: 0; transform: translateY(8px) scale(.95);
  pointer-events: none; cursor: pointer; white-space: normal;
  transition: opacity .25s ease, transform .25s ease;
  display: flex; align-items: flex-start; gap: 8px;
}
}
.cchat--greet .cchat__greet { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cchat--open .cchat__greet { opacity: 0 !important; pointer-events: none; }
.cchat--greet-dismissed .cchat__greet { opacity: 0 !important; pointer-events: none; }

/* крестик на плашке */
.cchat__greet-txt { flex: 1; }
.cchat__greet-x {
  background: none; border: none; color: #8a90a2; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 2px; flex: 0 0 auto; margin-top: -2px;
}
.cchat__greet-x:hover { color: #1b2030; }

/* ---------- панель ---------- */
.cchat__panel {
  position: absolute; right: 0; bottom: 84px;
  width: 370px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 130px);
  background: #fff; border-radius: var(--cchat-radius);
  box-shadow: 0 20px 60px rgba(20,26,48,.28);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.cchat--open .cchat__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* шапка с аватаром */
.cchat__head {
  background: var(--cchat-accent-grad); color: #fff;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.cchat__head-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.3); }
.cchat__head-txt { display: flex; flex-direction: column; flex: 1; }
.cchat__title { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.cchat__subtitle { font-size: 12px; opacity: .8; }
.cchat__close { background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: .8; }
.cchat__close:hover { opacity: 1; }

/* лента */
.cchat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #fafbfd; }
.cchat__msg { display: flex; align-items: flex-end; gap: 8px; }
.cchat__msg--me { justify-content: flex-end; }
.cchat__msg--bot { justify-content: flex-start; }
.cchat__msg-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; }
.cchat__bubble { max-width: 76%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.cchat__msg--bot .cchat__bubble { background: var(--cchat-bot); color: var(--cchat-bot-text); border-bottom-left-radius: 4px; }
.cchat__msg--me .cchat__bubble { background: var(--cchat-accent-grad); color: #fff; border-bottom-right-radius: 4px; }

/* кнопка WhatsApp */
.cchat__wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25d366; color: #fff; text-decoration: none;
  padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(37,211,102,.35); transition: transform .12s;
}
.cchat__wa:hover { transform: translateY(-1px); color: #fff; }

/* индикатор набора */
.cchat__dot { display: inline-block; width: 6px; height: 6px; margin: 0 2px; background: var(--cchat-muted); border-radius: 50%; animation: cchatBlink 1.2s infinite both; }
.cchat__dot:nth-child(2) { animation-delay: .2s; }
.cchat__dot:nth-child(3) { animation-delay: .4s; }
@keyframes cchatBlink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ввод */
.cchat__foot { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid #eef0f5; background: #fff; }
.cchat__input { flex: 1; resize: none; border: 1px solid #dfe3ec; border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.4; max-height: 110px; outline: none; transition: border-color .15s; }
.cchat__input:focus { border-color: #38478f; }
.cchat__send { width: 40px; height: 40px; flex: 0 0 40px; border: none; border-radius: 12px; background: var(--cchat-accent-grad); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.cchat__send:hover { transform: scale(1.05); }

@media (max-width: 480px) {
  .cchat { right: 16px; bottom: 16px; }
  .cchat__panel { right: 0; bottom: 80px; height: calc(100vh - 110px); width:100vw; }
  .cchat__greet {width: 50vw; bottom: 10vh; right: 10vw; font-size: 8px; }
}