/* =========================================================
   Vaske Company Website Assistant - Styles
   Aligned with AI Chatbot Knowledge Base & Training Guide
   ========================================================= */

.bccai-widget{
  max-width:420px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 35px rgba(0,0,0,.12);
  font-family:Arial,Helvetica,sans-serif;
  color:#111827;
  line-height:1.4;
}

/* Header */
.bccai-header{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  background:var(--bccai-primary, #0b3558);
  color:#fff;
}
.bccai-header strong{ font-size:15px; letter-spacing:.2px; }
.bccai-header span{ display:block; font-size:12px; opacity:.9; margin-top:2px; }
.bccai-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.2);
  font-size:18px;
  font-weight:700;
}

/* Chat area */
.bccai-chat{
  height:340px;
  overflow:auto;
  padding:14px;
  background:#f9fafb;
  scroll-behavior:smooth;
}
.bccai-message{
  max-width:86%;
  padding:10px 12px;
  margin:0 0 10px;
  border-radius:14px;
  line-height:1.5;
  font-size:14px;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.bccai-ai{
  background:#fff;
  border:1px solid #e5e7eb;
  border-top-left-radius:4px;
}
.bccai-user{
  background:var(--bccai-primary, #0b3558);
  color:#fff;
  margin-left:auto;
  border-top-right-radius:4px;
}

/* Quick reply buttons */
.bccai-actions-row{
  display:flex;
  gap:7px;
  padding:10px 12px;
  border-top:1px solid #eef2f7;
  background:#fff;
  flex-wrap:wrap;
}
.bccai-quick{
  border:1px solid #dbe1ea;
  background:#fff;
  border-radius:999px;
  padding:7px 12px;
  cursor:pointer;
  font-size:12px;
  color:#111827;
  transition:all .15s ease;
}
.bccai-quick:hover{
  border-color:var(--bccai-primary, #0b3558);
  color:var(--bccai-primary, #0b3558);
  background:#f3f7fb;
}
.bccai-quick:focus{
  outline:2px solid var(--bccai-primary, #0b3558);
  outline-offset:1px;
}

/* Input form */
.bccai-form{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid #e5e7eb;
  background:#fff;
}
.bccai-input{
  flex:1;
  border:1px solid #d1d5db;
  border-radius:999px;
  padding:10px 14px;
  outline:none;
  min-width:0;
  font-size:14px;
  color:#111827;
}
.bccai-input:focus{ border-color:var(--bccai-primary, #0b3558); }
.bccai-send{
  border:0;
  background:var(--bccai-primary, #0b3558);
  color:#fff;
  border-radius:999px;
  padding:10px 18px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:opacity .15s ease;
}
.bccai-send:hover{ opacity:.9; }
.bccai-send:focus{ outline:2px solid #fff; outline-offset:-3px; }

/* Floating widget variant (use with floating="yes") */
.bccai-floating{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999999 !important;
  max-width:calc(100vw - 28px);
}

/* Mobile */
@media (max-width:480px){
  .bccai-floating{
    right:12px !important;
    bottom:12px !important;
    left:12px !important;
    width:auto;
    max-width:calc(100vw - 24px);
  }
  .bccai-widget{ max-width:100%; border-radius:14px; }
  .bccai-chat{ height:280px; }
  .bccai-message{ max-width:92%; font-size:13.5px; }
  .bccai-quick{ font-size:11.5px; padding:6px 10px; }
  .bccai-send{ padding:9px 14px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .bccai-chat{ scroll-behavior:auto; }
  .bccai-quick, .bccai-send{ transition:none; }
}