/* ==========================================================================
   LARALEE - assistant launcher and panel
   ==========================================================================
   Everything here reads the site's existing custom properties, so the panel
   follows the light-bulb toggle without a single dark-mode override of its
   own. z-index sits above the toast (1000) and below the preloader (9999)
   and the visualizer's drag ghost (2000).
   ========================================================================== */

.lr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- LAUNCHER */
.lr-launch{
  position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:1150;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.92em 1.35em;border-radius:999px;cursor:pointer;
  background:var(--ink);color:var(--ivory);border:1px solid var(--ink);
  font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  box-shadow:var(--shadow-md);
  transition:transform .35s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.lr-launch:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.lr-launch svg{width:18px;height:18px;flex:0 0 auto}
.lr-ico-x{display:none}
.lr-launch.on .lr-ico-chat{display:none}
.lr-launch.on .lr-ico-x{display:block}
.lr-launch.on .lr-launch__t{display:none}
.lr-launch.on{padding:.92em;border-radius:999px}

@media(max-width:560px){
  /* the label costs more than it earns on a phone */
  .lr-launch__t{display:none}
  .lr-launch{padding:.95em;border-radius:999px}
}

/* ---------------------------------------------------------------- PANEL */
.lr-panel{
  position:fixed;z-index:1160;
  right:clamp(14px,2.4vw,28px);bottom:calc(clamp(14px,2.4vw,28px) + 62px);
  width:min(392px,calc(100vw - 28px));height:min(580px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transform-origin:bottom right;
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out),visibility .34s;
}
.lr-panel.on{opacity:1;visibility:visible;transform:none}

@media(max-width:560px){
  .lr-panel{
    right:8px;left:8px;bottom:78px;width:auto;
    height:min(560px,calc(100vh - 150px));
  }
}

/* ----------------------------------------------------------------- HEAD */
.lr-head{
  display:flex;align-items:center;gap:.7rem;flex:0 0 auto;
  padding:.95rem 1.05rem;border-bottom:1px solid var(--line-soft);background:var(--linen);
}
.lr-av{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;background:var(--sage);color:var(--on-sage);
  font-family:var(--display);font-size:1.02rem;line-height:1;
}
.lr-head strong{display:block;font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.lr-head small{display:block;font-size:.66rem;color:var(--ink-mute);letter-spacing:.02em;margin-top:.2em}
.lr-x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink-mute);padding:.35em;line-height:0}
.lr-x svg{width:18px;height:18px}
.lr-x:hover{color:var(--ink)}

/* ------------------------------------------------------------------ LOG */
.lr-log{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:1.05rem;display:flex;flex-direction:column;gap:.62rem;
  scrollbar-width:thin;
}
.lr-msg{
  max-width:88%;padding:.72rem .88rem;border-radius:var(--rad);
  font-size:.86rem;line-height:1.58;
}
.lr-msg--bot{align-self:flex-start;background:var(--linen);color:var(--ink);border:1px solid var(--line-soft)}
.lr-msg--you{align-self:flex-end;background:var(--ink);color:var(--ivory)}
.lr-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lr-msg--bot a{color:var(--ink);text-decoration-color:var(--sage)}
.lr-msg--bot a:hover{color:var(--sage)}
.lr-mute{display:block;color:var(--ink-mute);font-size:.8rem;margin-top:.4em}

.lr-list{margin:.55em 0 .2em;padding-left:1.05em;display:flex;flex-direction:column;gap:.42em}
.lr-list li{font-size:.82rem;line-height:1.5}

/* a product quoted by Laralee - price and deposit always travel together */
.lr-card{
  display:block;margin:.55em 0;padding:.6em .72em;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
}
.lr-card__t{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--sage);padding-bottom:.18em;width:fit-content}
.lr-card__t:hover{color:var(--sage)}
.lr-card__p{display:block;margin-top:.42em;font-size:.8rem;color:var(--ink)}
.lr-card__d{color:var(--ink-mute)}

/* typing indicator */
.lr-dots{display:inline-flex;gap:4px;align-items:center;padding:.12em 0}
.lr-dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-mute);animation:lr-bounce 1.25s infinite}
.lr-dots i:nth-child(2){animation-delay:.16s}
.lr-dots i:nth-child(3){animation-delay:.32s}
@keyframes lr-bounce{0%,62%,100%{transform:translateY(0);opacity:.42}31%{transform:translateY(-4px);opacity:1}}

/* ---------------------------------------------------------------- CHIPS */
.lr-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem}
.lr-chip{
  background:none;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;
  padding:.5em .85em;border-radius:999px;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.05em;line-height:1;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.lr-chip:hover{border-color:var(--sage);color:var(--ink);background:var(--sage-wash)}

/* ----------------------------------------------------------------- FORM */
.lr-form{
  flex:0 0 auto;display:flex;align-items:center;gap:.5rem;
  padding:.72rem .8rem;border-top:1px solid var(--line-soft);background:var(--linen);
}
.lr-in{
  flex:1 1 auto;min-width:0;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--rad);
  padding:.72em .85em;font-family:var(--sans);font-size:.84rem;
}
.lr-in::placeholder{color:var(--ink-faint)}
.lr-in:focus{outline:none;border-color:var(--sage)}
.lr-send{
  flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  background:var(--ink);color:var(--ivory);border:1px solid var(--ink);border-radius:var(--rad);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.lr-send svg{width:17px;height:17px}
.lr-send:hover{background:var(--sage);border-color:var(--sage);color:var(--on-sage)}

.lr-foot{
  flex:0 0 auto;margin:0;padding:.55rem .9rem .7rem;background:var(--linen);
  font-size:.63rem;line-height:1.5;color:var(--ink-faint);border-top:1px solid var(--line-soft);
}
.lr-foot a{color:var(--ink-mute);text-decoration:underline;text-underline-offset:2px}
.lr-foot a:hover{color:var(--sage)}

/* keyboard focus should always be obvious inside a dialog */
.lr-launch:focus-visible,.lr-chip:focus-visible,.lr-send:focus-visible,.lr-x:focus-visible,.lr-card__t:focus-visible{
  outline:2px solid var(--sage);outline-offset:2px
}

/* the preloader owns the screen until it is done */
body.preloading .lr{display:none}

@media(prefers-reduced-motion:reduce){
  .lr-panel,.lr-launch{transition:none}
  .lr-dots i{animation:none}
}

/* printing a page should not print the chat */
@media print{ .lr{display:none} }