/* Landing chatbot widget — restyled 2026 to match the landing design system:
   dark surfaces + lime (#c2f74a) accent + Plus Jakarta Sans. References landing.css tokens with
   fallbacks (the widget only ships on the landing page, where landing.css is loaded). */
#lp-chat {
  --lpc-accent:    var(--accent, #c2f74a);
  --lpc-accent-2:  var(--accent-2, #84e0c0);
  --lpc-ink:       var(--ink, #0a0e03);          /* text on lime */
  --lpc-bg:        var(--bg-2, #0d0f13);          /* panel/body background */
  --lpc-surface:   var(--surface, #111319);       /* header / chrome */
  --lpc-surface-2: var(--surface-2, #171a21);     /* asst bubble, input, chips */
  --lpc-text:      var(--text, #f2f4f7);
  --lpc-text-2:    var(--text-2, #9ba3b0);
  --lpc-border:    var(--line, #21242c);
  --lpc-border-2:  var(--line-2, #2c313b);
  --lpc-r:         var(--r, 16px);
  --lpc-r-lg:      var(--r-lg, 22px);
  --lpc-glow:      var(--glow, 0 0 60px -12px rgba(194,247,74,.45));
  font-family: var(--font, "Plus Jakarta Sans"), system-ui, -apple-system, sans-serif;
}

/* Launcher bubble */
.lp-chat-bubble {
  position: fixed; bottom: 24px; right: 24px;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--lpc-accent); color: var(--lpc-ink);
  border: 0; cursor: pointer;
  box-shadow: 0 12px 30px -6px rgba(194,247,74,.5), var(--lpc-glow);
  display: flex; align-items: center; justify-content: center;
  z-index: 40; transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.lp-chat-bubble:hover { transform: scale(1.06) translateY(-1px); box-shadow: 0 16px 38px -6px rgba(194,247,74,.62), var(--lpc-glow); }
.lp-chat-bubble svg { width: 26px; height: 26px; }
.lp-chat-bubble-badge { display: none; }

/* Panel */
.lp-chat-panel {
  position: fixed; bottom: 96px; right: 24px;
  width: 384px; max-width: calc(100vw - 32px);
  height: 580px; max-height: calc(100vh - 120px);
  background: var(--lpc-bg);
  border: 1px solid var(--lpc-border);
  border-radius: var(--lpc-r-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(194,247,74,.04);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 41; opacity: 0; pointer-events: none;
  transform: translateY(20px) scale(.96);
  transition: opacity .22s var(--ease, ease), transform .22s var(--ease, ease);
}
.lp-chat-panel-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

/* Header */
.lp-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; flex-shrink: 0;
  background: var(--lpc-surface);
  border-bottom: 1px solid var(--lpc-border);
  position: relative;
}
.lp-chat-head::after {  /* thin lime hairline under the header */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194,247,74,.5), transparent);
}
.lp-chat-head-info { display: flex; align-items: center; gap: 12px; }
.lp-chat-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--lpc-accent); box-shadow: 0 0 0 3px rgba(194,247,74,.14);
}
.lp-chat-name { font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--lpc-text); font-family: var(--font-display, inherit); }
.lp-chat-name-team { font-weight: 500; color: var(--lpc-accent); font-size: 12px; }
.lp-chat-status { font-size: 11px; color: var(--lpc-text-2); display: flex; align-items: center; gap: 5px; line-height: 1.2; margin-top: 2px; }
.lp-chat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lpc-accent); display: inline-block; box-shadow: 0 0 8px var(--lpc-accent); }
.lp-chat-close {
  background: var(--lpc-surface-2); border: 1px solid var(--lpc-border-2);
  width: 30px; height: 30px; border-radius: 50%; color: var(--lpc-text-2);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.lp-chat-close:hover { background: var(--lpc-border-2); color: var(--lpc-text); }

/* Body */
.lp-chat-body {
  flex: 1 1 auto; overflow-y: auto; padding: 16px;
  background: var(--lpc-bg);
  display: flex; flex-direction: column; gap: 8px;
}
.lp-chat-body::-webkit-scrollbar { width: 8px; }
.lp-chat-body::-webkit-scrollbar-thumb { background: var(--lpc-border-2); border-radius: 8px; }
.lp-chat-msg { display: flex; max-width: 86%; }
.lp-chat-msg-user { align-self: flex-end; }
.lp-chat-msg-assistant { align-self: flex-start; }
.lp-chat-bubble-text { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.lp-chat-msg-user .lp-chat-bubble-text {
  background: var(--lpc-accent); color: var(--lpc-ink); font-weight: 500;
  border-bottom-right-radius: 5px;
}
.lp-chat-msg-assistant .lp-chat-bubble-text {
  background: var(--lpc-surface-2); color: var(--lpc-text);
  border: 1px solid var(--lpc-border); border-bottom-left-radius: 5px;
}
.lp-chat-bubble-text a { color: var(--lpc-accent); }

/* Typing indicator */
.lp-chat-typing .lp-chat-bubble-text { display: inline-flex; gap: 4px; padding: 14px; }
.lp-chat-typing .lp-chat-bubble-text span { width: 6px; height: 6px; border-radius: 50%; background: var(--lpc-accent); animation: lpChatBounce 1.2s infinite ease-in-out; }
.lp-chat-typing .lp-chat-bubble-text span:nth-child(2) { animation-delay: .15s; }
.lp-chat-typing .lp-chat-bubble-text span:nth-child(3) { animation-delay: .3s; }
@keyframes lpChatBounce { 0%,80%,100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* Quick-reply presets */
.lp-chat-presets {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; flex-shrink: 0;
  border-top: 1px solid var(--lpc-border); background: var(--lpc-bg);
}
.lp-chat-preset {
  border: 1px solid var(--lpc-border-2); background: var(--lpc-surface-2); color: var(--lpc-text);
  padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
  transition: all .15s var(--ease, ease); font-family: inherit;
}
.lp-chat-preset:hover { background: var(--lpc-accent); border-color: var(--lpc-accent); color: var(--lpc-ink); }

/* Composer */
.lp-chat-form {
  display: flex; gap: 8px; padding: 10px 12px; flex-shrink: 0;
  border-top: 1px solid var(--lpc-border); background: var(--lpc-surface);
}
.lp-chat-input {
  flex: 1; border: 1px solid var(--lpc-border-2); background: var(--lpc-bg);
  border-radius: 999px; padding: 10px 16px; font-size: 16px; outline: none;
  font-family: inherit; color: var(--lpc-text); transition: border-color .15s;
}
.lp-chat-input::placeholder { color: var(--lpc-text-2); }
.lp-chat-input:focus { border-color: var(--lpc-accent); box-shadow: 0 0 0 3px rgba(194,247,74,.12); }
.lp-chat-send {
  width: 42px; height: 42px; border-radius: 50%; background: var(--lpc-accent); color: var(--lpc-ink);
  border: 0; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: transform .12s var(--ease, ease), filter .12s;
}
.lp-chat-send:hover { filter: brightness(1.07); transform: scale(1.05); }
.lp-chat-send svg { width: 18px; height: 18px; }

/* AI disclaimer strip */
.lp-chat-disclaimer {
  border-top: 1px solid var(--lpc-border); background: var(--lpc-surface);
  color: var(--lpc-text-2); padding: 9px 14px; font-size: 11px; line-height: 1.35;
  text-align: center; flex-shrink: 0;
}

/* Lead-capture modal */
.lp-chat-lead-modal {
  position: fixed; inset: 0; background: rgba(4,5,7,.72); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.lp-chat-lead-modal-open { display: flex; }
.lp-chat-lead-card {
  background: var(--lpc-surface); border: 1px solid var(--lpc-border-2);
  border-radius: var(--lpc-r); padding: 24px; width: 100%; max-width: 420px; position: relative;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.lp-chat-lead-card h3 { margin: 0 0 6px; font-size: 18px; color: var(--lpc-text); font-family: var(--font-display, inherit); font-weight: 800; }
.lp-chat-lead-card p { margin: 0 0 18px; font-size: 13px; color: var(--lpc-text-2); line-height: 1.5; }
.lp-chat-lead-close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; font-size: 24px; color: var(--lpc-text-2); cursor: pointer; line-height: 1; }
.lp-chat-lead-close:hover { color: var(--lpc-text); }
.lp-chat-lead-card form { display: flex; flex-direction: column; gap: 10px; }
.lp-chat-lead-card input,
.lp-chat-lead-card textarea {
  width: 100%; border: 1px solid var(--lpc-border-2); background: var(--lpc-bg);
  border-radius: 10px; padding: 10px 14px; font-size: 14px; font-family: inherit;
  outline: none; resize: vertical; color: var(--lpc-text);
}
.lp-chat-lead-card input::placeholder, .lp-chat-lead-card textarea::placeholder { color: var(--lpc-text-2); }
.lp-chat-lead-card input:focus,
.lp-chat-lead-card textarea:focus { border-color: var(--lpc-accent); box-shadow: 0 0 0 3px rgba(194,247,74,.12); }
.lp-chat-lead-submit {
  background: var(--lpc-accent); color: var(--lpc-ink); border: 0; border-radius: 10px;
  padding: 12px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; margin-top: 4px;
  transition: filter .12s;
}
.lp-chat-lead-submit:hover { filter: brightness(1.07); }
.lp-chat-lead-submit:disabled { opacity: .6; cursor: wait; }

/* Mobile */
@media (max-width: 600px) {
  .lp-chat-bubble { bottom: 90px; right: 16px; width: 52px; height: 52px; }
  .lp-chat-bubble svg { width: 22px; height: 22px; }
  /* Fullscreen native-app sheet. z-index 60 puts it ABOVE the sticky LP header (z-index 50) so the
     close button (top of the chat header) is never covered. Header padded for the notch/browser
     chrome; disclaimer padded for the home-indicator. Slides up from the bottom. */
  .lp-chat-panel {
    top: 0; left: 0; right: 0; bottom: auto;
    width: auto; max-width: none;
    height: 100vh; height: 100dvh; max-height: none;
    border: 0; border-radius: 0; z-index: 60;
    transform: translateY(100%);
  }
  .lp-chat-panel-open { transform: translateY(0); }
  .lp-chat-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .lp-chat-close { width: 40px; height: 40px; font-size: 20px; }   /* bigger tap target */
  .lp-chat-disclaimer { padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
  .lp-chat-lead-modal { z-index: 61; }
}