/* Straight Line Chat – scoped theme variables (no global colour hardcoding) */
#slc-chat-root{
  /* Accent (fallback only). Primary colour is set by PHP inline style and/or JS on #slc-chat-root */
  --slc-primary:#ff2aa1;

  /* Primary-derived RGB + shades (JS will override --slc-primary-rgb from primary_color) */
  --slc-primary-rgb: 255, 42, 161; /* fallback only */
  --slc-primary-fade: rgba(var(--slc-primary-rgb), .12);
  --slc-primary-fade-2: rgba(var(--slc-primary-rgb), .16);
  --slc-primary-border: rgba(var(--slc-primary-rgb), .25);
  --slc-primary-border-2: rgba(var(--slc-primary-rgb), .35);

  /* Theme variables (default = dark) */
  --slc-bg:#0b0b10;
  --slc-panel:#12121a;
  --slc-text:#f2f2f7;
  --slc-muted:#a7a7b3;

  --slc-border:rgba(255,255,255,.10);
  --slc-shadow:0 18px 50px rgba(0,0,0,.35);
  --slc-radius:18px;
  --slc-font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* Light theme overrides (scoped) */
#slc-chat-root.slc-theme--light{
  --slc-bg:#f6f6fb;
  --slc-panel:#ffffff;
  --slc-text:#0b0b10;
  --slc-muted:#4a4a55;
  --slc-border:rgba(0,0,0,.10);
}

#slc-chat-root, #slc-chat-root *{
  box-sizing:border-box;
  font-family:var(--slc-font);
}

/* Launcher */
#slc-chat-root .slc-launcher{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999999;
  border:none;
  cursor:pointer;
  box-shadow:var(--slc-shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:width .22s ease, height .22s ease, border-radius .22s ease, padding .22s ease, transform .12s ease;
  background:var(--slc-primary);
  color:#000;
}
#slc-chat-root .slc-launcher:active{ transform:scale(.98); }

#slc-chat-root .slc-launcher--collapsed{
  width:56px;
  height:56px;
  border-radius:999px;
  padding:0;
  background:var(--slc-primary);
  color:#000;
}

#slc-chat-root .slc-launcher--expanded{
  height:56px;
  width:240px;
  border-radius:999px;
  padding:0 16px;
  display:flex;

  /* Put icon on RIGHT, label on LEFT */
  flex-direction:row-reverse;
  justify-content:space-between;
  align-items:center;

  /* Default (light) pill body + right end cap */
  background:
    linear-gradient(to right,
      #ffffff 0%,
      #ffffff calc(100% - 56px),
      var(--slc-primary) calc(100% - 56px),
      var(--slc-primary) 100%
    );

  color:#000;
}

/* Dark mode pill body (#2a2a33), keep right cap primary */
#slc-chat-root.slc-theme--dark .slc-launcher--expanded{
  background:
    linear-gradient(to right,
      #2a2a33 0%,
      #2a2a33 calc(100% - 56px),
      var(--slc-primary) calc(100% - 56px),
      var(--slc-primary) 100%
    );

  /* Text on dark body should be white */
  color:#ffffff;
}

#slc-chat-root .slc-launcher__icon{
  width:22px;
  height:22px;
  display:inline-block;
  flex:0 0 auto; /* ensures it stays fixed width inside pill */
}

#slc-chat-root .slc-launcher__label{
  font-weight:800;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* Ensure left alignment + take available space */
  flex:1;
  text-align:left;
  padding-right:12px;
}

/* Window */
#slc-chat-root .slc-window{
  position:fixed;
  right:20px;

  /* Lower the window so it overlaps launcher */
  bottom:20px;

  width:min(392px, calc(100vw - 40px));

  /* Slightly shorter */
  height:500px;

  border-radius:var(--slc-radius);
  background:var(--slc-panel);
  box-shadow:var(--slc-shadow);
  overflow:hidden;
  display:none;

  /* ensure window sits above launcher */
  z-index:1000000;
}
#slc-chat-root .slc-window.is-open{ display:flex; flex-direction:column; }

#slc-chat-root .slc-header{
  background:var(--slc-primary);
  color:#000;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#slc-chat-root .slc-title{ font-size:14px; font-weight:900; letter-spacing:.2px; }

#slc-chat-root .slc-close{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  padding:2px 8px;
  border-radius:10px;
}
#slc-chat-root .slc-close:hover{ background:rgba(0,0,0,.10); }

#slc-chat-root .slc-messages{
  flex:1;
  padding:12px;
  overflow:auto;
  color:var(--slc-text);
  font-size:14px;
}
#slc-chat-root .slc-msg{ margin:10px 0; line-height:1.35; }
#slc-chat-root .slc-msg.user{ text-align:right; }
#slc-chat-root .slc-msg.bot{ text-align:left; }

#slc-chat-root .slc-bubble{
  display:inline-block;
  padding:10px 12px;
  border-radius:14px;
  max-width:92%;
  word-wrap:break-word;
  white-space:pre-wrap;
}

/* User bubbles stay neutral */
#slc-chat-root .slc-msg.user .slc-bubble{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.07);
}

/* Bot bubbles follow primary colour (faded + border) */
#slc-chat-root .slc-msg.bot .slc-bubble{
  background:var(--slc-primary-fade);
  border:1px solid var(--slc-primary-border);
}

/* Input bar */
#slc-chat-root .slc-inputbar{
  padding:10px;
  display:flex;
  gap:8px;
  border-top:1px solid rgba(255,255,255,.06);
  background:var(--slc-bg);
}

#slc-chat-root .slc-input{
  flex:1;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--slc-text);
  padding:10px 12px;
  outline:none;
}
#slc-chat-root .slc-input::placeholder{ color:rgba(242,242,247,.55); }

#slc-chat-root .slc-send{
  border:none;
  border-radius:12px;
  background:var(--slc-primary);
  color:#000;
  font-weight:900;
  padding:10px 12px;
  cursor:pointer;
}
#slc-chat-root .slc-send[disabled]{ opacity:.6; cursor:not-allowed; }

/* Actions */
#slc-chat-root .slc-actions{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; }

#slc-chat-root .slc-action{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--slc-text);
  border-radius:999px;
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
}
#slc-chat-root .slc-action:hover{ background:rgba(255,255,255,.06); }

/* Primary quick replies follow primary colour (faded + border) */
#slc-chat-root .slc-action--primary{
  border-color:var(--slc-primary-border-2);
  background:var(--slc-primary-fade-2);
  color:var(--slc-text);
}

#slc-chat-root .slc-action[disabled]{ opacity:.6; cursor:not-allowed; }

/* Typing */
#slc-chat-root .slc-typing{
  display:inline-flex;
  gap:4px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
}
#slc-chat-root .slc-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(242,242,247,.75);
  animation:slc-bounce 1.1s infinite ease-in-out;
}
#slc-chat-root .slc-dot:nth-child(2){ animation-delay:.12s; }
#slc-chat-root .slc-dot:nth-child(3){ animation-delay:.24s; }

@keyframes slc-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.6; }
  40%{ transform:translateY(-4px); opacity:1; }
}

/* Modal */
#slc-chat-root .slc-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1000000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
#slc-chat-root .slc-overlay.is-open{ display:flex; }

#slc-chat-root .slc-modal{
  width:min(520px, 100%);
  background:var(--slc-panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  box-shadow:var(--slc-shadow);
  overflow:hidden;
}
#slc-chat-root .slc-modal__head{
  background:var(--slc-bg);
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#slc-chat-root .slc-modal__title{ color:var(--slc-text); font-weight:900; font-size:16px; }

#slc-chat-root .slc-modal__x{
  border:none;
  background:transparent;
  color:var(--slc-muted);
  font-size:20px;
  cursor:pointer;
  padding:4px 8px;
  border-radius:10px;
}
#slc-chat-root .slc-modal__x:hover{ background:rgba(255,255,255,.05); }

#slc-chat-root .slc-modal__body{ padding:14px 16px 16px; color:var(--slc-text); }
#slc-chat-root .slc-modal__msg{ color:var(--slc-text); line-height:1.45; }

#slc-chat-root .slc-modal__actions{ margin-top:14px; display:flex; gap:10px; justify-content:flex-end; }
#slc-chat-root .slc-btn{ border:none; border-radius:12px; padding:10px 12px; cursor:pointer; font-weight:900; }
#slc-chat-root .slc-btn--ghost{ background:rgba(255,255,255,.06); color:var(--slc-text); border:1px solid rgba(255,255,255,.10); }
#slc-chat-root .slc-btn--primary{ background:var(--slc-primary); color:#000; }

/* Inline */
#slc-chat-root .slc-inline{
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.02);
  border-radius:999px;
  padding:8px 10px;
  width:min(620px, 100%);
}
#slc-chat-root .slc-inline__input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  padding:10px 10px;
  font-size:14px;
}
#slc-chat-root .slc-inline__btn{
  border:none;
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:900;
  background:var(--slc-primary);
  color:#000;
}

/* Mobile tweaks */
@media (max-width:520px){
  #slc-chat-root .slc-window{
    right:12px;
    left:12px;
    width:auto;
    bottom:12px;
    height:55vh;
  }

  #slc-chat-root .slc-launcher{ right:12px; bottom:12px; }
  #slc-chat-root .slc-launcher--expanded{ width:200px; }
}