/* ============================================================
   KBBC AI Chatbot — chatbot.css
   Brand: Kodiak Brown Bear Center
   Colors: #D97D2E (orange), #f8f5f1 (cream), #1a1a1a (dark)
   Fonts: Montserrat (headings), Roboto (body)
   Version: 1.4.0 | Author: Dan Lee
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500&display=swap');

/* ── CSS Variables ── */
:root {
  --kbbc-orange:      #D97D2E;
  --kbbc-orange-dark: #b8651f;
  --kbbc-cream:       #f8f5f1;
  --kbbc-border:      #e8e2da;
  --kbbc-dark:        #1a1a1a;
  --kbbc-text:        #333333;
  --kbbc-muted:       #888888;
  --kbbc-shadow:      0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  --kbbc-radius:      16px;
  --kbbc-bubble-size: 60px;
}

/* ── Floating Bubble ── */
#kbbc-chat-bubble {
  position:        fixed;
  bottom:          24px;
  right:           24px;
  width:           var(--kbbc-bubble-size);
  height:          var(--kbbc-bubble-size);
  background:      var(--kbbc-orange);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  z-index:         99998;
  box-shadow:      0 4px 20px rgba(217,125,46,0.45);
  transition:      transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline:         none;
  overflow:        hidden;
}

#kbbc-chat-bubble.has-custom-icon { background: transparent; }
#kbbc-chat-bubble.has-custom-icon.is-open { background: var(--kbbc-dark); }
.kbbc-chat-bubble-img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  border-radius: 50%;
  display:      block;
  pointer-events: none;
}

#kbbc-chat-bubble:hover,
#kbbc-chat-bubble:focus {
  transform:  scale(1.08);
  background: var(--kbbc-orange-dark);
  box-shadow: 0 6px 28px rgba(217,125,46,0.55);
}

#kbbc-chat-bubble.is-open {
  transform: scale(0.9);
  background: var(--kbbc-dark);
}

/* Pulse ring */
#kbbc-chat-bubble::before {
  content:       '';
  position:      absolute;
  width:         100%;
  height:        100%;
  border-radius: 50%;
  border:        2px solid var(--kbbc-orange);
  opacity:       0;
  animation:     kbbc-pulse 2.5s ease-out infinite;
}

@keyframes kbbc-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* ── Chat Panel (shared) ── */
.kbbc-chat-panel {
  background:     #ffffff;
  border-radius:  var(--kbbc-radius);
  box-shadow:     var(--kbbc-shadow);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  font-family:    'Roboto', sans-serif;
}

/* Floating variant — positioning + animated open */
.kbbc-chat-panel.is-floating {
  position:       fixed;
  bottom:         calc(var(--kbbc-bubble-size) + 36px);
  right:          24px;
  width:          380px;
  max-width:      calc(100vw - 48px);
  height:         520px;
  max-height:     calc(100vh - 120px);
  z-index:        99997;
  opacity:        0;
  transform:      translateY(16px) scale(0.97);
  pointer-events: none;
  transition:     opacity 0.25s ease, transform 0.25s ease;
}
.kbbc-chat-panel.is-floating.is-open {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: all;
}

/* Inline variant — block in page flow */
.kbbc-chat-panel.is-inline {
  position:    static;
  width:       100%;
  max-width:   720px;
  margin:      24px auto;
  /* height comes from the inline-style on the element */
}

/* ── Header ── */
.kbbc-chat-header {
  background:      var(--kbbc-dark);
  padding:         16px 18px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-shrink:     0;
}

.kbbc-chat-header-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.kbbc-chat-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:   15px;
  color:       #ffffff;
  letter-spacing: 0.3px;
}

.kbbc-chat-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size:   11px;
  color:       var(--kbbc-orange);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.kbbc-chat-header-actions {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.kbbc-chat-email,
.kbbc-chat-close {
  background:  none;
  border:      none;
  color:       rgba(255,255,255,0.6);
  cursor:      pointer;
  line-height: 1;
  transition:  color 0.15s;
  padding:     4px 6px;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
}
.kbbc-chat-close { font-size: 22px; }
.kbbc-chat-email:hover,
.kbbc-chat-close:hover { color: #ffffff; }
.kbbc-chat-email svg { display: block; }

/* Email transcript inline form */
.kbbc-chat-email-form {
  display:     none;
  align-items: center;
  gap:         6px;
  padding:     10px 14px;
  background:  var(--kbbc-cream);
  border-top:  1px solid rgba(0,0,0,0.06);
}
.kbbc-chat-email-form.is-open { display: flex; }
.kbbc-chat-email-input {
  flex:          1;
  padding:       9px 12px;
  border:        1px solid #ddd;
  border-radius: 6px;
  font-family:   'Roboto', sans-serif;
  font-size:     13px;
  outline:       none;
  background:    #fff;
}
.kbbc-chat-email-input:focus { border-color: var(--kbbc-orange); }
.kbbc-chat-email-send {
  padding:       9px 16px;
  background:    var(--kbbc-orange);
  color:         #fff;
  border:        none;
  border-radius: 6px;
  font-family:   'Montserrat', sans-serif;
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
}
.kbbc-chat-email-send:disabled { opacity: 0.6; cursor: default; }
.kbbc-chat-email-cancel {
  background:  none;
  border:      none;
  color:       #888;
  font-size:   20px;
  cursor:      pointer;
  padding:     0 4px;
  line-height: 1;
}
.kbbc-chat-email-cancel:hover { color: #333; }

/* ── Messages ── */
.kbbc-chat-messages {
  flex:           1;
  overflow-y:     auto;
  padding:        16px 14px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  background:     var(--kbbc-cream);
  scroll-behavior: smooth;
}
.kbbc-chat-messages::-webkit-scrollbar       { width: 4px; }
.kbbc-chat-messages::-webkit-scrollbar-track { background: transparent; }
.kbbc-chat-messages::-webkit-scrollbar-thumb { background: var(--kbbc-border); border-radius: 4px; }

.kbbc-msg {
  max-width:     82%;
  padding:       10px 14px;
  border-radius: 14px;
  font-size:     14px;
  line-height:   1.55;
  word-break:    break-word;
  animation:     kbbc-msg-in 0.2s ease;
}
@keyframes kbbc-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kbbc-msg.bot {
  background:    #ffffff;
  color:         var(--kbbc-text);
  align-self:    flex-start;
  border-radius: 14px 14px 14px 4px;
  box-shadow:    0 1px 3px rgba(0,0,0,0.07);
}
.kbbc-msg.user {
  background:    var(--kbbc-orange);
  color:         #ffffff;
  align-self:    flex-end;
  border-radius: 14px 14px 4px 14px;
}
.kbbc-msg.error {
  background:    #fff3f0;
  color:         #c0392b;
  border:        1px solid #fccdc7;
  align-self:    flex-start;
  border-radius: 14px 14px 14px 4px;
  font-size:     13px;
}

/* Auto-linked URLs and emails inside messages */
.kbbc-msg a:not(.kbbc-booking-btn) {
  color:           var(--kbbc-orange);
  text-decoration: underline;
  word-break:      break-all;
}
.kbbc-msg a:not(.kbbc-booking-btn):hover { color: var(--kbbc-orange-dark); }
.kbbc-msg.user a:not(.kbbc-booking-btn) {
  color:           #ffffff;
  text-decoration: underline;
}

/* Booking button inside bot message */
.kbbc-booking-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  margin-top:      10px;
  padding:         9px 16px;
  background:      var(--kbbc-orange);
  color:           #ffffff !important;
  text-decoration: none !important;
  border-radius:   8px;
  font-family:     'Montserrat', sans-serif;
  font-weight:     700;
  font-size:       12px;
  letter-spacing:  0.8px;
  text-transform:  uppercase;
  transition:      background 0.2s ease, transform 0.15s ease;
}
.kbbc-booking-btn:hover {
  background: var(--kbbc-orange-dark);
  transform:  translateY(-1px);
}
.kbbc-booking-btn .kbbc-btn-price {
  font-weight: 400;
  opacity:     0.85;
  font-size:   11px;
}

/* Typing indicator */
.kbbc-chat-typing {
  display:     none;
  padding:     6px 18px 10px;
  background:  var(--kbbc-cream);
  align-items: center;
  gap:         4px;
  flex-shrink: 0;
}
.kbbc-chat-typing.is-visible { display: flex; }
.kbbc-chat-typing span {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--kbbc-muted);
  animation:     kbbc-bounce 1.2s ease infinite;
}
.kbbc-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.kbbc-chat-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes kbbc-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-5px); }
}

/* Input area */
.kbbc-chat-input-area {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     12px 14px;
  background:  #ffffff;
  border-top:  1px solid var(--kbbc-border);
  flex-shrink: 0;
}
.kbbc-chat-input {
  flex:          1;
  border:        1px solid var(--kbbc-border);
  border-radius: 10px;
  padding:       9px 14px;
  font-family:   'Roboto', sans-serif;
  font-size:     14px;
  color:         var(--kbbc-text);
  background:    var(--kbbc-cream);
  outline:       none;
  transition:    border-color 0.2s;
}
.kbbc-chat-input:focus {
  border-color: var(--kbbc-orange);
  background:   #ffffff;
}
.kbbc-chat-input::placeholder { color: var(--kbbc-muted); }
.kbbc-chat-send {
  min-width:     auto;
  width:         auto;
  height:        40px;
  border:        none;
  border-radius: 10px;
  background:    var(--kbbc-orange);
  color:         #ffffff;
  cursor:        pointer;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  padding:       0 18px;
  font-family:   'Montserrat', sans-serif;
  font-weight:   700;
  font-size:     12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height:   1;
  transition:    background 0.2s, transform 0.15s;
}
.kbbc-chat-send-label {
  color:       #ffffff !important;  /* defeat themes that recolor button children */
  font:        inherit;
  display:     inline-block;
  white-space: nowrap;
}
.kbbc-chat-send:hover    { background: var(--kbbc-orange-dark); transform: scale(1.05); }
.kbbc-chat-send:active   { transform: scale(0.97); }
.kbbc-chat-send:disabled { background: var(--kbbc-border); cursor: not-allowed; transform: none; }

/* ── Search Bar shortcode ── */
.kbbc-ai-search-bar {
  width:     100%;
  max-width: 680px;
  margin:    0 auto;
}
.kbbc-search-inner {
  display:       flex;
  align-items:   center;
  gap:           0;
  background:    #ffffff;
  border:        2px solid var(--kbbc-border);
  border-radius: 50px;
  padding:       6px 6px 6px 18px;
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.kbbc-search-inner:focus-within {
  border-color: var(--kbbc-orange);
  box-shadow:   0 2px 16px rgba(217,125,46,0.15);
}
.kbbc-search-icon  { flex-shrink: 0; margin-right: 10px; }
.kbbc-search-input {
  flex:        1;
  border:      none;
  background:  transparent;
  font-family: 'Roboto', sans-serif;
  font-size:   15px;
  color:       var(--kbbc-text);
  outline:     none;
  min-width:   0;
}
.kbbc-search-input::placeholder { color: var(--kbbc-muted); }
.kbbc-search-submit {
  flex-shrink:    0;
  padding:        10px 24px;
  background:     var(--kbbc-orange);
  color:          #ffffff;
  border:         none;
  border-radius:  40px;
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background 0.2s, transform 0.15s;
}
.kbbc-search-submit:hover  { background: var(--kbbc-orange-dark); }
.kbbc-search-submit:active { transform: scale(0.97); }

/* ── Mobile ── */
@media (max-width: 480px) {
  .kbbc-chat-panel.is-floating {
    right:         0;
    bottom:        0;
    width:         100%;
    max-width:     100%;
    max-height:    90vh;
    border-radius: var(--kbbc-radius) var(--kbbc-radius) 0 0;
  }
  .kbbc-chat-panel.is-inline {
    margin:        16px 0;
    border-radius: 12px;
  }
  #kbbc-chat-bubble {
    bottom: 16px;
    right:  16px;
  }
}