#ai-chat-button{
  position: fixed;
  right: 22px;
 bottom: 40px;

  width: 64px;
  height: 64px;

  border: 0;
  padding: 0;
  margin: 0;

  background-color: transparent !important;
  border-radius: 50%;
  overflow: visible;

 background-image: url("https://wapi.com/wp-content/uploads/2026/02/stefania.webp");

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
border-radius: 50%;
overflow: visible;
background-size: cover;      
background-position: center;
background-repeat: no-repeat;

  cursor: pointer;
  z-index: 999999;


  transform: none !important;
  filter: none !important;
  box-shadow: 0 10px 26px rgb(0 0 0 / 23%);

  -webkit-tap-highlight-color: transparent;
}

#ai-chat-button:hover{
  
  transform: scale(1.04) !important;
}
@media (min-width: 1200px){
  #ai-chat-button{ width: 70px; height: 70px; }
}
@media (min-width: 1600px){
  #ai-chat-button{ width: 76px; height: 76px; }
}


#ai-chat-button:focus{
  outline: none;
}


/* ===== CHAT WINDOW (mobile = center, desktop = above the button) ===== */

#ai-chat-window {
  position: fixed;
  right: 22px;
  bottom: 22px;

  width: 400px;
  height: 550px;

  background: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  z-index: 99999999999999;
  overflow: hidden;

  font-family: sans-serif;

  /* CLOSED state: "inside button" */
  opacity: 0;
  transform: scale(0.12);
  transform-origin: 100% 100%;

  pointer-events: none;

  transition: opacity .22s ease, transform .22s ease;
}

#ai-chat-window.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}


/* DESKTOP: привязка к кнопке (окно появляется над кнопкой и закрывает её) */
@media (min-width: 768px){
  #ai-chat-window{
    top: auto;
    left: auto;

    /* ДОЛЖНО БЫТЬ ТОЧНО КАК У КНОПКИ */
    right: 22px;
    bottom: 34px;

    /* частично перекрываем кнопку (как ты и нашёл) */
    transform: translateY(calc(-21% - 0px)) scale(.92);
  }

  #ai-chat-window.active{
    transform: translateY(calc(-21% - 0px)) scale(1);
  }
}



.ai-chat-header {
    background: #EE4146;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

#ai-chat-close {
    background: transparent;
    border: none;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: #ffffff;
}

#ai-chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

.ai-msg {
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 12px;
    max-width: 80%;
    font-size: 15px;
    line-height: 1.4;
}
.ai-msg-meta {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}
.ai-msg-text {
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-user {
    background: #e6f0ff;
    margin-left: auto;
}
.ai-bot {
    background: #f1f1f1;
    margin-right: auto;
}

.ai-chat-input {
    display: flex;
    border-top: 1px solid #ddd;
    padding: 12px;
}
.ai-chat-input input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 15px;
}
.ai-chat-input button {
    margin-left: 10px;
    background: #0066ff;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0 16px;
    cursor: pointer;
    font-size: 18px;
}
#ai-chat-window,
#ai-chat-window * {
    font-family: 'Gerbera', sans-serif !important;
}
	
	
	.ai-chat-status {
    font-size: 11px;          /* мелкий шрифт */
    color: #9ca3af;           /* спокойный серый */
    padding: 0 15px 6px;      /* чуть отступ сверху/снизу */
}

.ai-chat-status-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ai-chat-status-dots .dot {
    display: inline-block;
    opacity: 0.2;
    animation: wapi-dots 1s infinite;
}

/* Вторая и третья точки — с задержкой, чтобы "бежали" по очереди */
.ai-chat-status-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}
.ai-chat-status-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes wapi-dots {
    0%   { opacity: 0.2; }
    20%  { opacity: 1;   }
    40%  { opacity: 0.2; }
    100% { opacity: 0.2; }
}
.ai-chat-name-block {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 8px;
    align-items: center;
}
.ai-chat-name-block input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
}
.ai-chat-name-block button {
    border-radius: 10px;
    border: none;
    padding: 0 12px;
    cursor: pointer;
    background: #0066ff;
    color: #fff;
    font-size: 14px;
}

#ai-chat-name-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 5;
}
#ai-chat-name-overlay{
  display: none !important;
}
.ai-chat-name-modal {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 20px;
    width: 80%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

.ai-chat-name-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.ai-chat-name-subtitle {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 16px;
}

.ai-chat-name-modal input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    margin-bottom: 12px;
}

.ai-chat-name-modal button {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    background: #0066ff;
    color: #ffffff;
}

/* Disabled send button state */
.ai-chat-input button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ai-chat-header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.ai-getprices-wrap{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#ai-chat-getprices-mouse{
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 28px;
    height: 28px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px) scale(0.92);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.16));
}
#ai-chat-getprices-mouse.is-animating{
    animation: wapi-mouse-hint 2.2s ease-in-out 1;
}

@keyframes wapi-mouse-hint{
    0%{
        opacity: 0;
        transform: translateY(8px) scale(0.92);
    }
    12%{
        opacity: 0.95;
        transform: translateY(0) scale(1);
    }
    28%{
        opacity: 0.95;
        transform: translateY(0) scale(1);
    }
    38%{
        opacity: 0.95;
        transform: translateY(2px) scale(0.88);
    }
    48%{
        opacity: 0.95;
        transform: translateY(0) scale(1.02);
    }
    62%{
        opacity: 0.88;
        transform: translateY(0) scale(1);
    }
    100%{
        opacity: 0;
        transform: translateY(-2px) scale(0.96);
    }
}
.ai-chat-header-btn{
    position: relative;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.24);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 12px;
    color: rgba(255,255,255,0.96);
    font-weight: 700;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 6px 16px rgba(0,0,0,0.08);
    transition:
      background .18s ease,
      border-color .18s ease,
      transform .18s ease,
      box-shadow .18s ease;
    overflow: visible;
}

.ai-chat-header-btn:hover{
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.30);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 8px 18px rgba(0,0,0,0.10);
}

.ai-chat-header-btn:active{
    transform: translateY(1px) scale(0.985);
}

.ai-chat-header-btn:focus{
    outline: none;
}

/* Волны только у кнопки Get Prices */
#ai-chat-new-dialog{
    position: relative;
    isolation: isolate;
}

#ai-chat-new-dialog::before,
#ai-chat-new-dialog::after{
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.20);
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    z-index: -1;
}

#ai-chat-new-dialog:hover::before{
    animation: wapi-getprices-wave 0.7s ease-out 1;
}

#ai-chat-new-dialog:hover::after{
    animation: wapi-getprices-wave 0.7s ease-out 1;
    animation-delay: 0.08s;
}

@keyframes wapi-getprices-wave{
    0%{
        opacity: 0;
        transform: scale(0.96);
    }
    18%{
        opacity: 0.28;
    }
    100%{
        opacity: 0;
        transform: scale(1.10);
    }
}

#ai-chat-close{
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

/* Reset overlay */
#ai-chat-reset-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 6; /* выше чем name overlay */
}

.ai-chat-reset-actions{
    display:flex;
    gap:10px;
    margin-top: 12px;
}

.ai-chat-reset-btn{
    flex: 1;
    padding: 10px 12px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.ai-chat-reset-btn.secondary{
    background: #f3f4f6;
    color: #111827;
}

.ai-chat-reset-btn.primary{
    background: #0066ff;
    color: #ffffff;
}
	
/* micro bubble */
/* micro bubble (kept inside chat window) */
.wapi-micro-bubble{
  position:absolute;
  background: rgba(17,24,39,0.92);
  color:#fff;
  font-size:11px;
  padding:6px 8px;
  border-radius:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  z-index: 999999999;
  max-width: 260px;
  line-height: 1.25;
  pointer-events:none;
  white-space: nowrap;
}
.wapi-micro-bubble:after{
  content:'';
  position:absolute;
  left: 16px;
  top: 100%;
  border:6px solid transparent;
  border-top-color: rgba(17,24,39,0.92);
}
/* button hide/show when chat is open */
#ai-chat-button{
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}

#ai-chat-button.is-hidden{
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

/* Mobile: lift chat a bit higher (safe-area + browser bars) */
@media (max-width: 600px){
  #ai-chat-window{
    right: 12px;
    bottom: calc(60px + env(safe-area-inset-bottom));
    width: min(94vw, 420px);
    height: min(78vh, 560px);
  }
}

	.wapi-ai-admin .wapi-ai-total{
  margin: 6px 0 12px;
  font-size: 12px;
  color: #6b7280;
}
.wapi-ai-admin .wapi-ai-total strong{
  color: #111827;
}
	
	
	
	
	
	
/* ===== TEASER (fixed like chat window) ===== */
#ai-chat-teaser{
  position: fixed;
  right: 22px;
  bottom: 22px;            /* desktop baseline */
  z-index: 999998;         /* чуть ниже кнопки и окна */
  display: none;

  max-width: 230px;
  background: rgb(238 238 238);
  color: #353535;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);

  cursor: pointer;
  user-select: none;

  transform-origin: 100% 100%;
  transform: scale(0.92);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

#ai-chat-teaser.is-visible{
  opacity: 1;
  transform: scale(1);
}

#ai-chat-teaser .ai-teaser-body{
  padding-right: 18px; /* место под крестик */
}

#ai-chat-teaser .ai-teaser-title{
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

#ai-chat-teaser .ai-teaser-text{
  font-size: 13px;
  line-height: 1.25;
  opacity: 0.92;
}

#ai-chat-teaser .ai-teaser-close{
  position: absolute;
  right: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: #353535;
  font-size: 18px;
  line-height: 18px;
  cursor: pointer;
  padding: 0;
}

#ai-chat-teaser .ai-teaser-close:hover{
  color: #fff;
}

/* teaser should sit ABOVE the button */
@media (min-width: 601px){
  #ai-chat-teaser{
    bottom: calc(50px + 70px + 10px); 
  }
}

/* Mobile: use your proven offset (105px) */
@media (max-width: 600px){
  #ai-chat-teaser{
    right: 12px;
    bottom: calc(100px); 
    max-width: 210px;
  }
}
	
	
	
#ai-chat-close{
  position: relative;  
  z-index: 9999;       
}

	.wapi-ai-admin .wapi-ai-ended{
    margin-top: 4px;
    font-size: 12px;
    color: #dc2626;
    font-weight: 700;
}

	.wapi-ai-admin .wapi-ai-lead{
  display:inline-flex;
  align-items:center;
  margin-top:6px;
  padding:4px 8px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  color:#fff;
  background:#22c55e;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(34,197,94,.22);
}
	


	
	
/* ===== BADGE on chat button ===== */
#ai-chat-button{
  position: fixed; 
}

/* сам кружок */
#ai-chat-button .wapi-chat-badge{
  position: absolute;
  top: -4px;
  right: -4px;

  width: 22px;
  height: 22px;
  border-radius: 999px;

  background: #ef4444;
  box-shadow: 0 10px 20px rgba(239, 68, 68, .25);
  border: 2px solid #fff;

  display: none;
  align-items: center;
  justify-content: center;

  z-index: 2;
}



#ai-chat-button.has-badge .wapi-chat-badge{
  display: inline-flex;
}


#ai-chat-button .wapi-chat-badge svg{
  width: 12px;
  height: 12px;
  display: block;
  fill: #fff;
}
	
	
/* ===== Misty silver waves (smaller radius, slower) ===== */
#ai-chat-button{
  position: fixed;
  isolation: isolate;
}

#ai-chat-button::before,
#ai-chat-button::after{
  content:"";
  position:absolute;
  inset:-12px; 
  border-radius:999px;

  
  border: 3px solid rgba(210,215,224,0.62);

  
  box-shadow:
    0 0 0 6px rgba(190,195,205,0.18),
    0 14px 34px rgba(180,185,195,0.22);

  opacity: 0;
  transform: scale(0.86);
  pointer-events:none;
  z-index:-1;
}

#ai-chat-button::before{
  animation: wapi-pulse-mist 6.5s ease-out infinite; 
}
#ai-chat-button::after{
  animation: wapi-pulse-mist 6.5s ease-out infinite;
  animation-delay: 1.05s; 
}

@keyframes wapi-pulse-mist{
  0%   { opacity: 0;   transform: scale(0.86); }
  7%   { opacity: 1; }
  44%  { opacity: 0;   transform: scale(1.32); }
  100% { opacity: 0;   transform: scale(1.32); }
}

/* когда чат открыт — убрать */
#ai-chat-button.is-hidden::before,
#ai-chat-button.is-hidden::after{
  animation: none !important;
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce){
  #ai-chat-button::before,
  #ai-chat-button::after{ animation: none !important; }
}
	
	/* ===== CONTACT BAR (button at bottom) ===== */
.ai-chat-contactbar{
  padding: 0 12px 10px;
}
.ai-chat-contactbar.is-hidden{
  display:none;
}
#ai-chat-contact-btn{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: #0066ff;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(0,102,255,.18);
}
#ai-chat-contact-btn svg{
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: .95;
}

/* ===== CONTACT OVERLAY (same style as reset overlay) ===== */
#ai-chat-contact-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 7; /* выше reset overlay (у тебя reset = 6) */
}