/* LuxOn Chat - front-end widget. Mounts into #luxon-chat-root.
   All rules are ID-scoped (#luxon-chat-root ...) so host-theme styles cannot bleed in. */

/* ---- Root + palettes ---- */
#luxon-chat-root{
  --lxc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  position:fixed; z-index:2147483601; bottom:20px; right:20px;
  font-family:var(--lxc-font); font-size:14px;
}
#luxon-chat-root[data-palette="trust-blue"]{
  --lxc-primary:#2563EB; --lxc-header:linear-gradient(135deg,#1E40AF,#3B82F6);
  --lxc-launch:linear-gradient(135deg,#2563EB,#1E40AF);
  --lxc-panel:#FFFFFF; --lxc-chat-bg:#F6F9FE; --lxc-bot:#EDF1F8;
  --lxc-text:#0F172A; --lxc-muted:#64748B; --lxc-line:#E6EBF2;
  --lxc-header-text:#FFFFFF; --lxc-user-bg:linear-gradient(135deg,#2563EB,#3B82F6); --lxc-user-text:#FFFFFF;
  --lxc-launch-ico:#FFFFFF; --lxc-avatar:linear-gradient(135deg,#1E40AF,#3B82F6); --lxc-avatar-text:#FFFFFF;
  --lxc-focus:#2563EB;
}
#luxon-chat-root[data-palette="stark-dark"]{
  --lxc-primary:#F5901F; --lxc-header:linear-gradient(135deg,#181D22,#10141A);
  --lxc-launch:linear-gradient(135deg,#F5901F,#E07A0C);
  --lxc-panel:#13171B; --lxc-chat-bg:#0E1216; --lxc-bot:#181D22;
  --lxc-text:#E6EBEF; --lxc-muted:#8A969F; --lxc-line:#242B31;
  --lxc-header-text:#FFFFFF; --lxc-user-bg:linear-gradient(135deg,#F5901F,#E07A0C); --lxc-user-text:#10130F;
  --lxc-launch-ico:#10130F; --lxc-avatar:linear-gradient(135deg,#F5901F,#E07A0C); --lxc-avatar-text:#10130F;
  --lxc-focus:#22C7D3;
}

/* ---- Reset (kills host-theme inheritance inside the widget) ---- */
#luxon-chat-root, #luxon-chat-root *, #luxon-chat-root *::before, #luxon-chat-root *::after{
  box-sizing:border-box; margin:0; padding:0; border:0; outline:0;
  background:transparent; box-shadow:none; text-shadow:none;
  text-transform:none; letter-spacing:normal; line-height:normal;
  font-family:var(--lxc-font); font-weight:400; font-style:normal;
  color:inherit; text-align:left; text-decoration:none; float:none;
  border-radius:0; min-width:0; max-width:none; min-height:0;
  list-style:none; vertical-align:baseline; transition:none; animation:none;
}
#luxon-chat-root button, #luxon-chat-root input, #luxon-chat-root textarea, #luxon-chat-root select{
  -webkit-appearance:none; appearance:none; font:inherit; color:inherit;
  width:auto; height:auto; cursor:pointer;
}
#luxon-chat-root input, #luxon-chat-root textarea{ cursor:text; resize:none; }
/* Restore native rendering for checkboxes/radios (the appearance:none reset above hides them). */
#luxon-chat-root input[type="checkbox"], #luxon-chat-root input[type="radio"]{
  -webkit-appearance:auto; appearance:auto; width:16px; height:16px;
  accent-color:var(--lxc-primary); cursor:pointer; flex:none;
}
#luxon-chat-root img{ display:block; max-width:100%; height:auto; }

/* ---- Launcher ---- */
#luxon-chat-root .lxc-launcher{
  width:60px; height:60px; border-radius:18px; cursor:pointer;
  background:var(--lxc-launch); color:var(--lxc-launch-ico);
  box-shadow:0 14px 30px -8px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease;
}
#luxon-chat-root .lxc-launcher:hover{ transform:translateY(-2px); }
#luxon-chat-root .lxc-launcher svg{ width:26px; height:26px; fill:currentColor; }
/* ---- Launcher label (nudge shown while closed) ---- */
#luxon-chat-root .lxc-launch-label{
  position:absolute; right:72px; bottom:13px; white-space:nowrap; cursor:pointer;
  background:var(--lxc-panel); color:var(--lxc-text); border:1px solid var(--lxc-line);
  border-radius:999px; padding:9px 14px; font-size:13px; font-weight:600;
  box-shadow:0 10px 24px -10px rgba(15,23,42,.4); max-width:55vw; overflow:hidden; text-overflow:ellipsis;
}
#luxon-chat-root.lxc-is-open .lxc-launch-label{ display:none; }
#luxon-chat-root.lxc-left .lxc-launch-label{ right:auto; left:72px; }
@media (max-width:600px){ #luxon-chat-root .lxc-launch-label{ display:none; } }

/* ---- Panel ---- */
#luxon-chat-root .lxc-panel{
  position:absolute; bottom:74px; right:0;
  width:360px; max-width:calc(100vw - 32px);
  height:600px; max-height:calc(100vh - 110px);
  background:var(--lxc-panel); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 24px 60px -14px rgba(15,23,42,.4);
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
#luxon-chat-root .lxc-panel.lxc-open{ opacity:1; transform:none; pointer-events:auto; }
#luxon-chat-root.lxc-left .lxc-panel{ right:auto; left:0; }

/* ---- Header ---- */
#luxon-chat-root .lxc-header{ background:var(--lxc-header); color:var(--lxc-header-text); padding:14px; display:flex; align-items:center; gap:11px; flex:none; }
#luxon-chat-root .lxc-avatar{ width:40px; height:40px; border-radius:12px; overflow:hidden; background:var(--lxc-avatar); color:var(--lxc-avatar-text); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex:none; }
#luxon-chat-root .lxc-avatar img{ width:100%; height:100%; object-fit:cover; }
#luxon-chat-root .lxc-id{ flex:1; min-width:0; }
#luxon-chat-root .lxc-brand{ font-weight:700; font-size:15px; line-height:1.2; color:var(--lxc-header-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#luxon-chat-root .lxc-status{ font-size:12px; color:var(--lxc-header-text); opacity:.92; display:flex; align-items:center; gap:6px; margin-top:2px; white-space:nowrap; }
#luxon-chat-root .lxc-dot{ width:8px; height:8px; border-radius:50%; background:#4ADE80; flex:none; }
#luxon-chat-root .lxc-close{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.16); color:var(--lxc-header-text); cursor:pointer; font-size:18px; line-height:1; flex:none; display:flex; align-items:center; justify-content:center; }

/* ---- Body / messages ---- */
/* The scroll body is a flex column. CRITICAL: its children must NOT flex-shrink.
   The global reset sets min-height:0 on everything, so without an explicit
   flex-shrink:0 the browser squishes each message below its content height to fit
   the panel instead of scrolling — which makes the text spill out and overlap the
   next bubble. `.lxc-body > * { flex:0 0 auto }` is what actually prevents the overlap. */
#luxon-chat-root .lxc-body{ flex:1 1 auto; min-height:0; background:var(--lxc-chat-bg); padding:16px 14px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; gap:11px; }
#luxon-chat-root .lxc-body > *{ flex:0 0 auto; }
#luxon-chat-root .lxc-msg{ display:flex; gap:9px; max-width:90%; }
#luxon-chat-root .lxc-msg.lxc-user{ align-self:flex-end; flex-direction:row-reverse; }
#luxon-chat-root .lxc-mava{ width:26px; height:26px; border-radius:8px; overflow:hidden; flex:none; background:var(--lxc-avatar); color:var(--lxc-avatar-text); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
#luxon-chat-root .lxc-mava img{ width:100%; height:100%; object-fit:cover; }
#luxon-chat-root .lxc-bubble{ padding:11px 14px; font-size:14px; line-height:1.5; border-radius:16px; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
#luxon-chat-root .lxc-bot .lxc-bubble{ background:var(--lxc-bot); color:var(--lxc-text); border-bottom-left-radius:5px; }
#luxon-chat-root .lxc-user .lxc-bubble{ background:var(--lxc-user-bg); color:var(--lxc-user-text); border-bottom-right-radius:5px; }
#luxon-chat-root .lxc-bubble.lxc-err{ background:transparent; border:1px solid var(--lxc-line); color:var(--lxc-muted); }
#luxon-chat-root .lxc-bubble a{ color:inherit; text-decoration:underline; font-weight:600; word-break:break-word; overflow-wrap:anywhere; }
#luxon-chat-root .lxc-bot .lxc-bubble a{ color:var(--lxc-primary); }
#luxon-chat-root .lxc-bubble a:hover{ text-decoration:none; }

/* ---- Chips / CTA ---- */
#luxon-chat-root .lxc-chips{ display:flex; flex-wrap:wrap; gap:7px; padding-left:35px; }
#luxon-chat-root .lxc-chip{ background:transparent; border:1.5px solid var(--lxc-primary); color:var(--lxc-primary); padding:8px 12px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer; line-height:1.2; }
#luxon-chat-root .lxc-chip:hover{ background:var(--lxc-primary); color:#fff; }
#luxon-chat-root .lxc-cta-chip{ background:var(--lxc-launch); border:0; color:var(--lxc-launch-ico); }
#luxon-chat-root .lxc-cta-chip:hover{ opacity:.92; color:var(--lxc-launch-ico); }
#luxon-chat-root a.lxc-chip{ text-decoration:none; display:inline-flex; align-items:center; }
#luxon-chat-root .lxc-contact-intro{ flex-basis:100%; font-size:12.5px; color:var(--lxc-muted); line-height:1.4; margin-bottom:1px; }
#luxon-chat-root .lxc-notice{ font-size:11px; color:var(--lxc-muted); text-align:center; padding:2px 12px; opacity:.9; }

/* ---- Typing ---- */
#luxon-chat-root .lxc-typing .lxc-bubble{ display:flex; gap:5px; align-items:center; padding:14px; }
#luxon-chat-root .lxc-typing i{ width:7px; height:7px; border-radius:50%; background:var(--lxc-muted); display:inline-block; animation:lxc-blink 1.4s infinite both; }
#luxon-chat-root .lxc-typing i:nth-child(2){ animation-delay:.2s; }
#luxon-chat-root .lxc-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes lxc-blink{ 0%,80%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }

/* ---- In-chat lead form ---- */
#luxon-chat-root .lxc-lead-card{ background:var(--lxc-panel); border:1px solid var(--lxc-line); border-radius:16px; border-bottom-left-radius:5px; padding:12px; box-shadow:0 4px 14px rgba(15,23,42,.06); }
#luxon-chat-root .lxc-lead{ display:flex; flex-direction:column; gap:8px; }
#luxon-chat-root .lxc-lead-intro{ font-size:13px; color:var(--lxc-text); margin-bottom:2px; }
#luxon-chat-root .lxc-lead-f{ border:1.5px solid var(--lxc-line); border-radius:10px; padding:9px 11px; font-size:13.5px; color:var(--lxc-text); background:var(--lxc-chat-bg); width:100%; }
#luxon-chat-root .lxc-lead-f:focus{ border-color:var(--lxc-focus); }
#luxon-chat-root .lxc-lead-consent{ font-size:11.5px; color:var(--lxc-muted); display:flex; gap:7px; align-items:flex-start; line-height:1.45; }
#luxon-chat-root .lxc-lead-consent input{ width:16px; height:16px; flex:none; }
#luxon-chat-root .lxc-lead-consent a{ color:var(--lxc-primary); }
#luxon-chat-root .lxc-lead-submit{ background:var(--lxc-launch); color:var(--lxc-launch-ico); border-radius:11px; padding:11px; font-size:14px; font-weight:700; cursor:pointer; }
#luxon-chat-root .lxc-lead-submit:disabled{ opacity:.5; cursor:default; }
#luxon-chat-root .lxc-lead-err{ font-size:11.5px; color:#DC2626; }

/* ---- Foot / input ---- */
#luxon-chat-root .lxc-foot{ border-top:1px solid var(--lxc-line); background:var(--lxc-panel); flex:none; }
#luxon-chat-root .lxc-input{ display:flex; align-items:center; gap:8px; padding:11px 12px; }
#luxon-chat-root .lxc-field{ flex:1 1 auto; width:auto; border:1.5px solid var(--lxc-line); border-radius:999px; padding:10px 15px; font-size:14px; color:var(--lxc-text); background:var(--lxc-chat-bg); }
#luxon-chat-root .lxc-field:focus{ border-color:var(--lxc-focus); }
#luxon-chat-root .lxc-send{ width:40px; height:40px; border-radius:50%; flex:none; cursor:pointer; background:var(--lxc-launch); color:var(--lxc-launch-ico); font-size:16px; display:flex; align-items:center; justify-content:center; }
#luxon-chat-root .lxc-send:disabled{ opacity:.5; cursor:default; }
#luxon-chat-root .lxc-disc{ font-size:10.5px; color:var(--lxc-muted); text-align:center; padding:0 14px 6px; }
#luxon-chat-root .lxc-powered{ font-size:10.5px; color:var(--lxc-muted); text-align:center; padding:0 0 10px; }
#luxon-chat-root .lxc-powered a{ color:var(--lxc-primary); text-decoration:none; font-weight:700; }

#luxon-chat-root :focus-visible{ outline:2px solid var(--lxc-focus); outline-offset:2px; }

/* ---- Mobile ---- */
@media (max-width:600px){
  #luxon-chat-root{ bottom:16px; right:16px; left:auto; }
  /* Bottom-sheet rather than a full-bleed takeover: leaves a little of the page
     visible at the top and rounds the top corners, so it feels less overpowering. */
  #luxon-chat-root .lxc-panel{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100vw; max-width:100vw;
    height:90vh; max-height:90vh;
    height:90dvh; max-height:90dvh;
    border-radius:18px 18px 0 0;
  }
  #luxon-chat-root .lxc-header{ padding-top:14px; border-radius:18px 18px 0 0; }
  #luxon-chat-root .lxc-foot{ padding-bottom:env(safe-area-inset-bottom); }
  #luxon-chat-root .lxc-body{ padding-bottom:env(safe-area-inset-bottom); }
  #luxon-chat-root .lxc-msg{ max-width:94%; }
  /* hide the launcher while the panel is open so it can't overlap the input */
  #luxon-chat-root.lxc-is-open .lxc-launcher{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  #luxon-chat-root .lxc-panel, #luxon-chat-root .lxc-launcher{ transition:none; }
  #luxon-chat-root .lxc-typing i{ animation:none; }
}