/* =====================================================
   LBOT AI Assistant — Frontend Chatbot v2.0
   Electric Blue theme
===================================================== */
:root {
  /* Core */
  --lb-c-primary:       var(--lbot-color, #0ea5e9);
  --lb-c-dark:          #0284c7;

  /* Widget window */
  --lb-c-bg:            var(--lbot-window-bg, #ffffff);
  --lb-c-surface:       var(--lbot-messages-bg, #f0f9ff);
  --lb-c-radius:        var(--lbot-radius, 18px);
  --lb-c-size:          var(--lbot-bubble-size, 58px);
  --lb-c-shadow:        0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);

  /* Text */
  --lb-c-text:          var(--lbot-text-color, #0f172a);
  --lb-c-muted:         #64748b;
  --lb-c-border:        var(--lbot-border-color, #e2e8f0);

  /* Header */
  --lb-header-bg:       var(--lbot-header-bg, var(--lb-c-primary));
  --lb-header-text:     var(--lbot-header-text, #ffffff);
  --lb-header-name-size: var(--lbot-header-name-size, 15px);

  /* Bot message bubbles */
  --lb-bot-bubble-bg:   var(--lbot-bot-bubble-bg, #ffffff);
  --lb-bot-bubble-text: var(--lbot-bot-bubble-text, #0f172a);
  --lb-bot-bubble-border: var(--lbot-bot-bubble-border, #e2e8f0);

  /* User message bubbles */
  --lb-user-bubble-bg:  var(--lbot-user-bubble-bg, var(--lb-c-primary));
  --lb-user-bubble-text: var(--lbot-user-bubble-text, #ffffff);

  /* Input area */
  --lb-input-bg:        var(--lbot-input-bg, #f0f9ff);
  --lb-input-text:      var(--lbot-input-text, #0f172a);
  --lb-input-area-bg:   var(--lbot-input-area-bg, #ffffff);

  /* Read More links */
  --lb-citation-bg:           var(--lbot-citation-bg, #f0f9ff);
  --lb-citation-text:         var(--lbot-citation-text, #0284c7);
  --lb-citation-border:       var(--lbot-citation-border, #bae6fd);
  --lb-citation-hover-bg:     var(--lbot-citation-hover-bg, #e0f2fe);
  --lb-citation-hover-text:   var(--lbot-citation-hover-text, #0369a1);
  --lb-citation-hover-border: var(--lbot-citation-hover-border, #38bdf8);

  /* Font */
  --lb-font-size:       var(--lbot-font-size, 15px);
  --lb-bubble-font:     var(--lbot-bubble-font, 14px);
}

#lbot-root {
  position:fixed;
  bottom: var(--lbot-pos-bottom, 28px);
  right:  var(--lbot-pos-right,  28px);
  left:   var(--lbot-pos-left,   auto);
  z-index:999999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:var(--lbot-font-size, 15px);
}

/* Bubble */
.lbot-bubble {
  width:var(--lbot-bubble-size, 58px); height:var(--lbot-bubble-size, 58px);
  border-radius:50%; background:var(--lb-c-primary); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transition:transform .2s, box-shadow .2s;
  color:#fff; font-size:26px; position:relative;
}
.lbot-bubble:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(0,0,0,.35); }
.lbot-bubble .lb-close { display:none; }
.lbot-bubble.lbot-open .lb-chat  { display:none; }
.lbot-bubble.lbot-open .lb-close { display:block; }

/* Window */
.lbot-window {
  position:absolute; bottom:calc(var(--lbot-bubble-size, 58px) + 14px); right:0;
  width:var(--lbot-window-width, 370px); max-height:570px;
  background:var(--lbot-window-bg, #ffffff); border-radius:var(--lbot-radius, 18px);
  box-shadow:var(--lb-c-shadow);
  display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right;
  animation:lbSlideUp .22s cubic-bezier(.4,0,.2,1) both;
}
@media (max-width:768px) {
  .lbot-window:not(.lbot-hidden) {
    transform-origin: bottom center;
  }
}
@keyframes lbSlideUp { from{opacity:0;transform:scale(.92) translateY(14px)} to{opacity:1;transform:scale(1) translateY(0)} }
.lbot-window.lbot-hidden { display:none; }

/* Inline mode */
.lbot-inline #lbot-root { position:static; }
.lbot-inline .lbot-window { position:static; width:100%; max-height:600px; animation:none; border-radius:12px; }
.lbot-inline .lbot-bubble { display:none; }

/* Header */
.lbot-header {
  background:var(--lbot-header-bg, #0ea5e9); color:var(--lbot-header-text, #ffffff);
  padding:14px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.lbot-header-av  { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:20px; overflow:hidden; }
.lbot-header-info { flex:1; }
.lbot-header-name { font-weight:700; font-size:var(--lb-header-name-size); color:var(--lbot-header-text, #ffffff); }
.lbot-header-status { font-size:11px; opacity:.8; color:var(--lbot-header-text, #ffffff); }
.lbot-header-close { background:none; border:none; color:var(--lbot-header-text, #ffffff); font-size:18px; cursor:pointer; opacity:.75; padding:2px; }
.lbot-header-close:hover { opacity:1; }

/* Messages */
.lbot-messages { flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:10px; background:var(--lbot-messages-bg, #f0f9ff); scroll-behavior:smooth; }
.lbot-messages::-webkit-scrollbar { width:4px; }
.lbot-messages::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }

.lbot-msg { display:flex; gap:8px; max-width:90%; animation:lbMsgIn .16s ease both; }
@keyframes lbMsgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.lbot-msg-user { align-self:flex-end; flex-direction:row-reverse; }
.lbot-msg-bot  { align-self:flex-start; }

.lbot-msg-av { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.lbot-msg-bot  .lbot-msg-av { background:var(--lb-c-primary); color:#fff; }
.lbot-msg-user .lbot-msg-av { background:#e2e8f0; color:#475569; }

.lbot-msg-bubble { padding:9px 13px; border-radius:14px; line-height:1.55; font-size:var(--lbot-bubble-font, 14px); }
.lbot-msg-bot  .lbot-msg-bubble { background:var(--lbot-bot-bubble-bg, #ffffff); color:var(--lbot-bot-bubble-text, #0f172a); border:1px solid var(--lbot-bot-bubble-border, #e2e8f0); border-bottom-left-radius:4px; }
.lbot-msg-user .lbot-msg-bubble { background:var(--lbot-user-bubble-bg, #0ea5e9); color:var(--lbot-user-bubble-text, #ffffff); border-bottom-right-radius:4px; }

/* Typing */
.lbot-typing .lbot-msg-bubble { display:flex; align-items:center; gap:4px; padding:12px 14px; }
.lb-dot { width:7px; height:7px; border-radius:50%; background:#94a3b8; animation:lbBounce 1.2s infinite; }
.lb-dot:nth-child(2){animation-delay:.2s} .lb-dot:nth-child(3){animation-delay:.4s}
@keyframes lbBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }

/* Input */
.lbot-input-area { padding:10px 12px; background:var(--lbot-input-area-bg, #ffffff); border-top:1px solid var(--lbot-border-color, #e2e8f0); display:flex; align-items:flex-end; gap:8px; flex-shrink:0; }
.lbot-msg-input { flex:1; border:1.5px solid var(--lbot-border-color, #e2e8f0); border-radius:22px; padding:9px 14px; font-size:14px; resize:none; outline:none; font-family:inherit; max-height:100px; overflow-y:auto; background:var(--lbot-input-bg, #f0f9ff); color:var(--lbot-input-text, #0f172a); transition:border-color .15s; }
.lbot-msg-input:focus { border-color:var(--lb-c-primary); }
.lbot-msg-input::placeholder { color:var(--lb-c-muted); }
.lbot-send { width:38px; height:38px; border-radius:50%; background:var(--lb-c-primary); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s, transform .15s; }
.lbot-send:hover { background:var(--lb-c-dark); transform:scale(1.05); }
.lbot-send:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.lbot-footer { text-align:center; padding:5px; font-size:11px; color:var(--lb-c-muted); background:#fff; border-top:1px solid var(--lbot-border-color, #e2e8f0); }

/* ── Tablet (481px – 768px) ── */
@media (min-width:481px) and (max-width:768px) {
  #lbot-root {
    --lbot-pos-bottom: 20px;
    --lbot-pos-right:  20px;
    --lbot-pos-left:   auto;
  }
  /* Left-positioned bubble on tablet */
  #lbot-root[style*="left:auto"][style*="right:auto"],
  #lbot-root.lbot-pos-left {
    --lbot-pos-left:  20px;
    --lbot-pos-right: auto;
  }
  .lbot-window {
    position: fixed !important;
    /* On tablet: centered, max 480px wide, 20px margins */
    left: 50% !important;
    right: auto !important;
    width: min(var(--lbot-window-width, 370px), calc(100vw - 40px)) !important;
    transform: translateX(-50%) !important;
    bottom: calc(var(--lbot-pos-bottom, 20px) + var(--lbot-bubble-size, 58px) + 12px) !important;
    top: auto !important;
    max-height: calc(100svh - 120px);
  }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width:480px) {
  #lbot-root {
    --lbot-pos-bottom: 12px;
    --lbot-pos-right:  12px;
    --lbot-pos-left:   auto;
  }
  /* Left-positioned bubble on mobile */
  #lbot-root.lbot-pos-left {
    --lbot-pos-left:  12px;
    --lbot-pos-right: auto;
  }
  .lbot-window {
    /* Switch to fixed positioning so we control placement relative to viewport */
    position: fixed !important;
    /* Centre horizontally with 12px margins each side */
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    /* Sit just above the bubble row */
    bottom: calc(var(--lbot-pos-bottom, 12px) + var(--lbot-bubble-size, 58px) + 12px) !important;
    top: auto !important;
    max-height: calc(100svh - 120px);
    border-radius: 16px;
    transform: none !important;
  }
  /* Adjust bubble size slightly for smaller screens */
  .lbot-bubble {
    width:  min(var(--lbot-bubble-size, 58px), 52px);
    height: min(var(--lbot-bubble-size, 58px), 52px);
  }
  /* Larger tap target for mobile input send button */
  .lbot-send {
    width: 42px;
    height: 42px;
  }
  /* Full-width suggestion chips on mobile */
  .lbot-suggestions-chips {
    flex-direction: column;
  }
  .lbot-suggestion-chip {
    width: 100%;
    text-align: left;
  }
}
/* Safe area for iOS notch/home bar */
/* ── Disable Pinterest "Pin It" button inside chatbot widget ── */
#lbot-root [data-pin-href],
#lbot-root .PIN_1,
#lbot-root .pinterest-pin-it,
#lbot-root .Pin__PinItButton,
#lbot-root a[href*="pinterest.com/pin"] {
  display: none !important;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #lbot-root {
    bottom: calc(var(--lbot-pos-bottom, 28px) + env(safe-area-inset-bottom, 0px));
  }
}

/* =====================================================
   v2.2 — Source Citations & Read More Links
===================================================== */

/* Bot message content wrapper */
.lbot-msg-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}

/* Sources block sits below the reply bubble */
.lbot-sources-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #bae6fd;
  font-size: 13px;
}

.lbot-sources-label {
  font-weight: 700;
  color: var(--lbot-citation-text, #0284c7);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}

.lbot-sources-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Clickable Read More link */
.lbot-read-more-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--lbot-citation-bg, #f0f9ff);
  border: 1px solid var(--lbot-citation-border, #bae6fd);
  border-left: 3px solid var(--lb-c-primary);
  border-radius: 6px;
  text-decoration: none;
  color: var(--lbot-citation-text, #0284c7);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  line-height: 1.4;
}
.lbot-read-more-link:hover {
  background: var(--lbot-citation-hover-bg, #e0f2fe);
  border-color: var(--lbot-citation-hover-border, #38bdf8);
  border-left-color: var(--lb-c-primary);
  transform: translateX(2px);
  color: var(--lbot-citation-hover-text, #0369a1) !important;
}

.lbot-read-more-icon  { font-size: 14px; flex-shrink: 0; }
.lbot-read-more-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: normal; font-weight: 600; }
.lbot-read-more-arrow { flex-shrink: 0; font-size: 14px; opacity: .7; color: var(--lbot-citation-text, #0284c7); transition: color .15s; }

/* Explicitly set hover color on ALL child elements to prevent theme override */
.lbot-read-more-link:hover .lbot-read-more-label,
.lbot-read-more-link:hover .lbot-read-more-icon,
.lbot-read-more-link:hover .lbot-read-more-arrow {
  color: var(--lbot-citation-hover-text, #0369a1) !important;
}

/* Title-only mode (no link) */
.lbot-source-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f5f9;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  color: #475569;
}

/* Strong/em inside bubble */
.lbot-msg-bubble strong { font-weight: 700; }
.lbot-msg-bubble em     { font-style: italic; }

/* =====================================================
   v2.3 — Quick Prompts, Lead Capture, Escalation
===================================================== */

/* Quick prompt chips */
.lbot-quick-prompts { display:flex; flex-wrap:wrap; gap:6px; padding:4px 0; animation:lbMsgIn .2s ease both; }
.lbot-prompt-chip {
  border: 1.5px solid var(--lb-c-primary); border-radius:20px;
  padding: 6px 13px; font-size:12px; font-weight:600;
  color: var(--lb-c-primary); background:#fff; cursor:pointer;
  transition: background .15s, color .15s; white-space:nowrap;
}
.lbot-prompt-chip:hover { background:var(--lb-c-primary); color:#fff; }

/* Lead capture form */
.lbot-lead-form, .lbot-escalation-form {
  background:#f8fafc; border:1.5px solid #bae6fd;
  border-radius:12px; padding:16px; margin:4px 0;
  display:flex; flex-direction:column; gap:8px;
  animation:lbMsgIn .2s ease both;
}
.lbot-lead-heading { font-weight:800; font-size:15px; color:#0f172a; }
.lbot-lead-sub     { font-size:12px; color:#64748b; margin-top:-4px; }
.lbot-lead-input {
  border:1.5px solid #e2e8f0; border-radius:8px;
  padding:8px 11px; font-size:13px; font-family:inherit;
  width:100%; box-sizing:border-box; outline:none; transition:border-color .15s;
}
.lbot-lead-input:focus { border-color:var(--lb-c-primary); }
.lbot-lead-error  { color:#dc2626; font-size:12px; font-weight:600; }
.lbot-lead-actions { display:flex; gap:8px; flex-wrap:wrap; }
.lbot-lead-actions .lbot-btn { font-size:13px; padding:8px 16px; border-radius:8px; border:1.5px solid transparent; cursor:pointer; font-weight:600; }
.lbot-lead-actions .lbot-btn-primary { background:var(--lb-c-primary); color:#fff; border-color:var(--lb-c-primary); }
.lbot-lead-actions .lbot-btn-ghost   { background:#fff; color:#475569; border-color:#e2e8f0; }
.lbot-lead-esc { text-align:center; margin-top:4px; }
.lbot-esc-inline-btn { background:none; border:none; color:var(--lb-c-muted); font-size:12px; cursor:pointer; text-decoration:underline; }

/* Escalation bar */
.lbot-escalation-bar {
  border-top:1px solid var(--lbot-border-color, #e2e8f0); padding:8px 12px;
  background:#f8fafc; text-align:center; flex-shrink:0;
}
.lbot-esc-btn {
  background:none; border:1.5px solid #94a3b8; border-radius:20px;
  padding:6px 16px; font-size:12px; color:#475569; cursor:pointer;
  font-weight:600; transition:all .15s;
}
.lbot-esc-btn:hover { border-color:var(--lb-c-primary); color:var(--lb-c-primary); background:#f0f9ff; }

/* =====================================================
   v2.4 — Feedback Buttons
===================================================== */
.lbot-feedback {
  display:flex; align-items:center; gap:6px;
  margin-top:6px; padding-top:6px;
  border-top:1px solid var(--lbot-border-color, #e2e8f0);
}
.lbot-fb-btn {
  background:none; border:1px solid var(--lbot-border-color, #e2e8f0);
  border-radius:20px; padding:3px 10px; font-size:13px;
  cursor:pointer; transition:all .15s; color:var(--lb-c-muted);
}
.lbot-fb-btn:hover { border-color:var(--lb-c-primary); color:var(--lb-c-primary); background:#f0f9ff; }
.lbot-fb-thanks { font-size:12px; color:var(--lb-c-muted); }

/* =====================================================
   v2.5 — Streaming cursor animation
===================================================== */
.lbot-cursor {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--lb-c-primary);
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: lbCursorBlink .6s steps(1) infinite;
}
@keyframes lbCursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
/* ── Follow-up Suggestion Chips ── */
.lbot-suggestions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.lbot-suggestions-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.lbot-suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lbot-suggestion-chip {
  display: inline-block;
  padding: 5px 12px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
  line-height: 1.4;
  font-family: inherit;
}
.lbot-suggestion-chip:hover {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

/* ── Related document card (post heading + doc PDF link) ─────────── */
.lbot-related-doc-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.lbot-related-post-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--lb-primary, #7c3aed);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.lbot-related-post-link:hover { text-decoration: underline; }
.lbot-related-arrow { font-size: 13px; }
.lbot-doc-sub-link {
  margin-left: 14px;
  font-size: 12px !important;
}
.lbot-doc-sub-badge {
  margin-left: 14px;
  font-size: 12px;
  opacity: 0.85;
}