/*
  Sales-assist chat widget for the public marketing site (app/modules/sales_copilot).
  Scoped entirely under .rl-sc-* / custom properties defined on .rl-sc-root, so
  it never depends on and never collides with whatever a given marketing page
  happens to name its own --blue/--navy/etc. variables.
*/
.rl-sc-root{
  --rl-sc-navy:#0A1628;
  --rl-sc-navy2:#0F1F35;
  --rl-sc-blue:#2B6DEF;
  --rl-sc-blue2:#4B8BFF;
  --rl-sc-red:#E03030;
  --rl-sc-white:#F8FAFC;
  --rl-sc-slate:#94A3B8;
  --rl-sc-slate2:#64748B;
  --rl-sc-border:rgba(255,255,255,.1);
  --rl-sc-font:'Manrope','Segoe UI',system-ui,sans-serif;
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:2147483000;
  font-family:var(--rl-sc-font);
  /* Hidden until the visitor scrolls (see .rl-sc-visible below) -- every
     page this widget ships on has its primary hero CTA in roughly this same
     bottom-left area on initial load, so appearing immediately would sit on
     top of it. Same scroll-triggered-reveal pattern static/security.html's
     own sticky "Book a Demo" pill already uses on this site. */
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.rl-sc-root.rl-sc-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.rl-sc-root *{box-sizing:border-box}

.rl-sc-launcher{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--rl-sc-blue);
  color:#fff;
  border:none;
  cursor:pointer;
  border-radius:100px;
  padding:13px 20px 13px 16px;
  font-size:13.5px;
  font-weight:700;
  font-family:var(--rl-sc-font);
  box-shadow:0 8px 28px rgba(43,109,239,.4);
  transition:transform .15s ease,box-shadow .15s ease;
}
.rl-sc-launcher:hover{transform:translateY(-1px);box-shadow:0 10px 32px rgba(43,109,239,.5)}
.rl-sc-launcher svg{flex-shrink:0}
.rl-sc-root.rl-sc-open .rl-sc-launcher{display:none}

.rl-sc-panel{
  display:none;
  flex-direction:column;
  width:360px;
  max-width:calc(100vw - 40px);
  height:520px;
  max-height:calc(100vh - 100px);
  background:var(--rl-sc-navy);
  border:1px solid var(--rl-sc-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.rl-sc-root.rl-sc-open .rl-sc-panel{display:flex}

.rl-sc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:14px 16px;
  background:var(--rl-sc-navy2);
  border-bottom:1px solid var(--rl-sc-border);
  flex-shrink:0;
}
.rl-sc-head-title{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  font-weight:700;
  color:var(--rl-sc-white);
}
.rl-sc-dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;flex-shrink:0;box-shadow:0 0 0 3px rgba(74,222,128,.18)}
.rl-sc-close{
  background:transparent;
  border:none;
  color:var(--rl-sc-slate);
  cursor:pointer;
  padding:4px;
  border-radius:6px;
  display:flex;
}
.rl-sc-close:hover{color:var(--rl-sc-white);background:rgba(255,255,255,.06)}

.rl-sc-body{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rl-sc-body::-webkit-scrollbar{width:6px}
.rl-sc-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.rl-sc-msg{
  max-width:86%;
  font-size:13.5px;
  line-height:1.55;
  padding:10px 13px;
  border-radius:12px;
  white-space:pre-wrap;
  word-wrap:break-word;
}
.rl-sc-msg-assistant{
  align-self:flex-start;
  background:rgba(255,255,255,.05);
  color:#E2E8F0;
  border:1px solid var(--rl-sc-border);
  border-bottom-left-radius:4px;
}
.rl-sc-msg-user{
  align-self:flex-end;
  background:var(--rl-sc-blue);
  color:#fff;
  border-bottom-right-radius:4px;
}
.rl-sc-msg-error{
  align-self:flex-start;
  background:rgba(224,48,48,.1);
  border:1px solid rgba(224,48,48,.25);
  color:#FCA5A5;
}

.rl-sc-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 13px}
.rl-sc-typing span{width:6px;height:6px;border-radius:50%;background:var(--rl-sc-slate);animation:rl-sc-bounce 1.1s infinite ease-in-out}
.rl-sc-typing span:nth-child(2){animation-delay:.15s}
.rl-sc-typing span:nth-child(3){animation-delay:.3s}
@keyframes rl-sc-bounce{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.rl-sc-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 16px 12px;
  flex-shrink:0;
}
.rl-sc-chip{
  background:rgba(255,255,255,.05);
  border:1px solid var(--rl-sc-border);
  color:var(--rl-sc-slate);
  font-size:12px;
  font-family:var(--rl-sc-font);
  padding:7px 11px;
  border-radius:100px;
  cursor:pointer;
  text-align:left;
}
.rl-sc-chip:hover{background:rgba(255,255,255,.09);color:var(--rl-sc-white)}

.rl-sc-foot{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px;
  border-top:1px solid var(--rl-sc-border);
  flex-shrink:0;
}
.rl-sc-input{
  flex:1;
  resize:none;
  background:rgba(255,255,255,.05);
  border:1px solid var(--rl-sc-border);
  color:var(--rl-sc-white);
  border-radius:10px;
  padding:10px 12px;
  font-size:13.5px;
  font-family:var(--rl-sc-font);
  line-height:1.4;
  max-height:90px;
  outline:none;
}
.rl-sc-input:focus{border-color:var(--rl-sc-blue2)}
.rl-sc-input::placeholder{color:var(--rl-sc-slate2)}
.rl-sc-send{
  background:var(--rl-sc-blue);
  border:none;
  color:#fff;
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.rl-sc-send:disabled{opacity:.45;cursor:default}
.rl-sc-send:not(:disabled):hover{background:var(--rl-sc-blue2)}

.rl-sc-disclaimer{
  font-size:10.5px;
  color:var(--rl-sc-slate2);
  text-align:center;
  padding:0 12px 10px;
  flex-shrink:0;
}
.rl-sc-disclaimer a{color:var(--rl-sc-slate2)}

@media(max-width:480px){
  .rl-sc-root{left:12px;bottom:12px;right:12px}
  .rl-sc-panel{width:auto}
  /* The full "Ask about RedLens" pill sat over page copy at the bottom-left --
     e.g. it clipped the last line of the Professional pricing card. Collapse
     the closed launcher to a compact icon button on phones so it only occupies
     the corner and no longer covers body text. The label still shows on wider
     screens, and once opened the panel header names the widget. */
  .rl-sc-launcher{width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;gap:0}
  .rl-sc-launcher span{display:none}
}

@media(prefers-color-scheme:light){
  /* The marketing site itself is dark-themed only; this keeps the widget
     legible if a future light-mode page ever embeds it without also porting
     the whole page's palette. */
  .rl-sc-panel{box-shadow:0 24px 64px rgba(0,0,0,.35)}
}