/* VK Allure Chatbot – Frontend Styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@700;800&display=swap');

.vkal-chatbot-outer { display:flex; align-items:center; justify-content:center; padding:20px; }
.vkal-chat-wrapper {
  width:100%; max-width:460px; height:580px;
  background:white; border-radius:28px;
  box-shadow:0 24px 80px rgba(8,129,150,.25), 0 0 0 1px rgba(8,129,150,.1);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:'DM Sans',sans-serif;
  animation:vkalRise .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vkalRise { from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:none} }

/* HEADER */
.vkal-chat-header {
  background:linear-gradient(135deg,#088196,#055f70);
  padding:14px 18px; display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.vkal-header-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  border:2.5px solid rgba(255,255,255,.5); overflow:hidden;
  background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center;
}
.vkal-avatar-fallback { font-family:'Playfair Display',serif; font-weight:900; font-size:13px; color:white; }
.vkal-chat-header-info { flex:1; min-width:0; }
.vkal-chat-header-info h3 { font-family:'Playfair Display',serif; font-size:14px; font-weight:800; color:white; margin:0; }
.vkal-online-status { display:flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,.75); margin-top:3px; }
.vkal-online-dot { width:6px; height:6px; background:#4ade80; border-radius:50%; animation:vkalBlink 2s infinite; }
@keyframes vkalBlink { 0%,100%{opacity:1} 50%{opacity:.4} }
.vkal-header-logo-wrap {
  width:36px; height:36px; border-radius:8px; flex-shrink:0;
  border:2px solid rgba(255,255,255,.3); overflow:hidden;
  background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center;
}
.vkal-logo-fallback { font-family:'Playfair Display',serif; font-weight:900; font-size:9px; color:white; text-align:center; line-height:1.2; }

/* BODY */
.vkal-chat-body { flex:1; overflow-y:auto; padding:18px 16px; background:#f4fbfd; display:flex; flex-direction:column; gap:12px; }
.vkal-chat-body::-webkit-scrollbar { width:3px; }
.vkal-chat-body::-webkit-scrollbar-thumb { background:#b0dde5; border-radius:4px; }

/* MESSAGES */
.vkal-msg { display:flex; gap:9px; animation:vkalMsgIn .3s ease; }
@keyframes vkalMsgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.vkal-msg.vkal-bot { align-items:flex-end; }
.vkal-msg.vkal-user { flex-direction:row-reverse; align-items:flex-end; }
.vkal-msg-av { width:28px; height:28px; border-radius:50%; flex-shrink:0; overflow:hidden; border:1.5px solid rgba(8,129,150,.2); background:#dff7fa; display:flex; align-items:center; justify-content:center; }
.vkal-msg-av span { font-family:'Playfair Display',serif; font-weight:900; font-size:9px; color:#088196; }
.vkal-msg-bubble-wrap { display:flex; flex-direction:column; max-width:76%; }
.vkal-msg.vkal-user .vkal-msg-bubble-wrap { align-items:flex-end; }
.vkal-msg.vkal-bot  .vkal-msg-bubble-wrap { align-items:flex-start; }
.vkal-msg-bubble { border-radius:18px; padding:11px 15px; font-size:14px; line-height:1.6; word-break:break-word; display:inline-block; }
.vkal-msg.vkal-bot  .vkal-msg-bubble { background:white; color:#0d2b33; border-bottom-left-radius:4px; box-shadow:0 2px 10px rgba(8,129,150,.1); border:1px solid #b0dde5; }
.vkal-msg.vkal-user .vkal-msg-bubble { background:linear-gradient(135deg,#088196,#055f70); color:white; border-bottom-right-radius:4px; }
.vkal-msg-time { font-size:10px; color:rgba(0,0,0,.3); margin-top:4px; }
.vkal-msg.vkal-user .vkal-msg-time { text-align:right; }

/* QUICK REPLIES */
.vkal-quick-replies { display:flex; flex-wrap:wrap; gap:7px; padding:2px 38px; }
.vkal-qr-btn { background:white; border:1.5px solid #088196; color:#088196; border-radius:50px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; font-family:'DM Sans',sans-serif; }
.vkal-qr-btn:hover { background:#088196; color:white; transform:translateY(-1px); }
.vkal-qr-btn.vkal-other { border-color:#fe991c; color:#fe991c; }
.vkal-qr-btn.vkal-other:hover { background:#fe991c; color:white; border-color:#fe991c; }

/* TYPING */
.vkal-typing-wrap { display:flex; gap:9px; align-items:flex-end; }
.vkal-typing-dots { display:flex; gap:5px; padding:12px 16px; background:white; border-radius:18px; border-bottom-left-radius:4px; border:1px solid #b0dde5; box-shadow:0 2px 10px rgba(8,129,150,.1); }
.vkal-typing-dots span { width:7px; height:7px; background:#088196; border-radius:50%; animation:vkalDot 1.3s infinite; opacity:.3; }
.vkal-typing-dots span:nth-child(2){animation-delay:.22s}
.vkal-typing-dots span:nth-child(3){animation-delay:.44s}
@keyframes vkalDot { 0%,80%,100%{opacity:.3;transform:scale(1)} 40%{opacity:1;transform:scale(1.25)} }

/* SERVICE PILLS */
.vkal-service-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.vkal-service-pill { background:#dff7fa; color:#055f70; border-radius:50px; padding:4px 11px; font-size:12px; font-weight:600; }

/* SUCCESS */
.vkal-success-bubble { background:linear-gradient(135deg,#088196,#055f70) !important; color:white !important; text-align:center; border:none !important; box-shadow:0 8px 24px rgba(8,129,150,.3) !important; padding:20px 22px !important; }
.vkal-success-icon { font-size:34px; display:block; margin-bottom:8px; }

/* FOOTER */
.vkal-chat-footer { padding:13px 16px 14px; background:white; border-top:1px solid #b0dde5; flex-shrink:0; }
.vkal-input-row { display:flex; align-items:center; gap:9px; }
.vkal-chat-input { flex:1; border:1.5px solid #b0dde5; border-radius:50px; padding:0 16px; height:44px; font-family:'DM Sans',sans-serif; font-size:14px; color:#0d2b33; outline:none; transition:border-color .2s,box-shadow .2s; background:#eafcff; }
.vkal-chat-input:focus { border-color:#088196; box-shadow:0 0 0 3px rgba(8,129,150,.12); background:white; }
.vkal-chat-input::placeholder { color:#9bbec5; }
.vkal-chat-input:disabled { opacity:.5; cursor:not-allowed; }
.vkal-send-btn { width:44px; height:44px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,#fe991c,#e8870f); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(254,153,28,.4); transition:transform .15s; }
.vkal-send-btn:hover { transform:scale(1.08); }
.vkal-send-btn:disabled { opacity:.4; transform:none; cursor:not-allowed; }
.vkal-send-btn svg { width:17px; height:17px; fill:white; }
.vkal-restart-btn { width:100%; margin-top:9px; padding:10px; background:none; border:1.5px solid #b0dde5; color:#3a6b78; border-radius:50px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; display:none; }
.vkal-restart-btn:hover { border-color:#088196; color:#088196; background:#dff7fa; }
.vkal-restart-btn.vkal-show { display:block; }
.vkal-powered { text-align:center; padding:7px; font-size:10px; color:rgba(8,129,150,.4); letter-spacing:.04em; background:white; flex-shrink:0; }