/* ═══════════════════════════════════════════════════════════════════
   MyLimoHere — sales assistant widget
   Loaded on every marketing page. Nothing here touches the page's own
   selectors: everything is prefixed `ls-` and the launcher/panel are
   fixed-position, so the widget can be dropped onto any template.
   ═══════════════════════════════════════════════════════════════════ */
.ls-chat{
  --c-ink:#07080D; --c-panel:#10121C; --c-panel2:#151827;
  --c-gold:#D3A94F; --c-gold-soft:#EBD9A6; --c-ivory:#F3EFE6;
  --c-mut:#9BA0AE; --c-line:rgba(211,169,79,.22); --c-line2:rgba(255,255,255,.08);
  --c-ease:cubic-bezier(.2,.7,.2,1);
  font-family:'Jost',system-ui,sans-serif;
}

/* ── launcher ──────────────────────────────── */
.ls-launch{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:flex; align-items:center; gap:11px;
  padding:13px 20px 13px 15px; border:0; border-radius:99px; cursor:pointer;
  background:var(--c-gold); color:#141007; font-family:inherit; font-weight:500;
  font-size:.82rem; letter-spacing:.06em;
  box-shadow:0 16px 40px -14px rgba(211,169,79,.55);
  transition:transform .35s var(--c-ease), box-shadow .35s;
}
.ls-launch:hover{transform:translateY(-3px); box-shadow:0 22px 48px -14px rgba(211,169,79,.7)}
.ls-launch svg{width:20px;height:20px;flex:none}
.ls-launch.hide{transform:scale(.6);opacity:0;pointer-events:none}
/* Pulsing ring, twice, to catch the eye without becoming a distraction. */
.ls-launch::after{
  content:"";position:absolute;inset:0;border-radius:99px;border:2px solid var(--c-gold);
  animation:ls-ping 2.4s var(--c-ease) 2s 2;
}
@keyframes ls-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.ls-dot{width:7px;height:7px;border-radius:50%;background:#0f6b3f;box-shadow:0 0 0 2px rgba(255,255,255,.5)}

/* Nudge above the sticky pricing dock when it is up. */
body.dock-up .ls-launch{bottom:88px}

/* ── panel ─────────────────────────────────── */
.ls-panel{
  position:fixed; right:20px; bottom:20px; z-index:71; width:min(400px,calc(100vw - 32px));
  height:min(620px,calc(100vh - 40px)); display:flex; flex-direction:column;
  background:var(--c-panel); border:1px solid var(--c-line); border-radius:10px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transform:translateY(18px) scale(.97); opacity:0; pointer-events:none;
  transition:transform .4s var(--c-ease), opacity .35s var(--c-ease);
}
.ls-panel.open{transform:none;opacity:1;pointer-events:auto}
@media(max-width:520px){
  .ls-panel{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0}
}

.ls-head{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--c-line2);background:var(--c-panel2)}
.ls-head .av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#D3A94F,#8a6a2c);color:#141007;font-weight:600;font-size:.9rem}
.ls-head h4{margin:0;font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1rem;color:var(--c-ivory)}
.ls-head p{margin:0;font-size:.72rem;color:var(--c-mut);display:flex;align-items:center;gap:6px}
.ls-head button{margin-left:auto;background:none;border:0;color:var(--c-mut);font-size:1.4rem;
  cursor:pointer;line-height:1;padding:4px 6px;border-radius:4px;transition:.25s}
.ls-head button:hover{color:var(--c-ivory);background:rgba(255,255,255,.06)}

/* ── log ───────────────────────────────────── */
.ls-log{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px;
  scrollbar-width:thin;scrollbar-color:rgba(211,169,79,.3) transparent}
.ls-log::-webkit-scrollbar{width:6px}
.ls-log::-webkit-scrollbar-thumb{background:rgba(211,169,79,.3);border-radius:99px}

.ls-msg{max-width:86%;padding:12px 15px;border-radius:12px;font-size:.9rem;line-height:1.62;
  animation:ls-in .4s var(--c-ease) both;word-wrap:break-word}
@keyframes ls-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ls-msg.bot{background:var(--c-panel2);border:1px solid var(--c-line2);color:#d7dbe4;
  align-self:flex-start;border-bottom-left-radius:3px}
.ls-msg.me{background:var(--c-gold);color:#141007;align-self:flex-end;border-bottom-right-radius:3px}
.ls-msg strong{color:var(--c-gold-soft);font-weight:500}
.ls-msg.me strong{color:#141007}
.ls-msg a{color:var(--c-gold-soft);border-bottom:1px solid var(--c-line)}
.ls-msg ul{margin:8px 0 0;padding-left:18px}
.ls-msg li{margin-bottom:4px}

/* Typing indicator — shown only until the first token lands. */
.ls-typing{display:flex;gap:5px;align-self:flex-start;padding:14px 16px;background:var(--c-panel2);
  border:1px solid var(--c-line2);border-radius:12px;border-bottom-left-radius:3px}
.ls-typing i{width:6px;height:6px;border-radius:50%;background:var(--c-gold);opacity:.4;
  animation:ls-bounce 1.3s infinite}
.ls-typing i:nth-child(2){animation-delay:.18s}
.ls-typing i:nth-child(3){animation-delay:.36s}
@keyframes ls-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* Caret while a streamed reply is still arriving. */
.ls-msg.streaming::after{content:"▍";color:var(--c-gold);animation:ls-blink 1s steps(2) infinite;margin-left:1px}
@keyframes ls-blink{50%{opacity:0}}

/* ── quick replies ─────────────────────────── */
.ls-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.ls-chips button{background:none;border:1px solid var(--c-line);color:var(--c-gold-soft);
  font-family:inherit;font-size:.76rem;padding:8px 14px;border-radius:99px;cursor:pointer;
  transition:.28s var(--c-ease)}
.ls-chips button:hover{background:var(--c-gold);border-color:var(--c-gold);color:#141007}

/* ── composer ──────────────────────────────── */
.ls-form{display:flex;gap:9px;padding:14px 16px;border-top:1px solid var(--c-line2);background:var(--c-panel2)}
.ls-form input{flex:1;background:var(--c-ink);border:1px solid var(--c-line2);border-radius:99px;
  padding:12px 17px;color:var(--c-ivory);font-family:inherit;font-size:.9rem;font-weight:300;
  transition:border-color .3s}
.ls-form input:focus{outline:none;border-color:var(--c-gold)}
.ls-form button{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--c-gold);
  color:#141007;cursor:pointer;display:grid;place-items:center;transition:.3s var(--c-ease)}
.ls-form button:hover:not(:disabled){transform:scale(1.08)}
.ls-form button:disabled{opacity:.4;cursor:default}
.ls-form svg{width:17px;height:17px}
.ls-foot{padding:0 16px 12px;font-size:.66rem;color:#5b6070;text-align:center;background:var(--c-panel2)}

@media(prefers-reduced-motion:reduce){
  .ls-chat *,.ls-launch,.ls-panel{animation:none!important;transition:none!important}
  .ls-launch::after{display:none}
}