/* Sticx Chat — customer widget
   Brand variables are injected inline from the Settings screen. */

.stx-chat-root{
  --stx-brand:#c9202f;
  --stx-brand-dark:#a81a27;
  --stx-brand-soft:#fdf1f2;
  --stx-brand-tint:#f8dfe2;
  --stx-ink:#101828;
  --stx-body:#344054;
  --stx-muted:#667085;
  --stx-faint:#98a2b3;
  --stx-line:#e4e7ec;
  --stx-panel:#eef2f7;
  --stx-radius:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
}
.stx-chat-root *,
.stx-chat-root *::before,
.stx-chat-root *::after{box-sizing:border-box}
.stx-chat-root [hidden]{display:none !important}
.stx-chat-root button{font-family:inherit}
.stx-chat-root .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stx-chat-root :focus-visible{outline:2px solid var(--stx-brand);outline-offset:2px}

/* ------------------------------------------------------------ launcher */

.stx-launcher{
  position:fixed;right:24px;bottom:24px;z-index:999998;
  width:58px;height:58px;border:0;border-radius:50%;padding:0;
  background:var(--stx-brand);
  box-shadow:0 10px 26px rgba(16,24,40,.24);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.stx-launcher:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(16,24,40,.3)}
.stx-launcher img{width:31px;height:31px;object-fit:contain;display:block}
.stx-launcher-badge{
  position:absolute;top:-2px;right:-2px;min-width:21px;height:21px;padding:0 6px;
  border-radius:999px;background:#fff;color:var(--stx-brand);
  border:2px solid var(--stx-brand);
  font-size:11px;font-weight:700;line-height:17px;text-align:center;
}

/* --------------------------------------------------------------- panel */

.stx-panel{
  position:fixed;right:24px;bottom:96px;z-index:999999;
  width:376px;
  max-height:calc(100vh - 130px);
  max-height:calc(100dvh - 130px);
  display:flex;flex-direction:column;
  background:#fff;border-radius:var(--stx-radius);
  box-shadow:0 20px 60px rgba(16,24,40,.22), 0 2px 6px rgba(16,24,40,.06);
  overflow:hidden;
  animation:stx-rise .22s cubic-bezier(.22,1,.36,1);
}
@keyframes stx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .stx-panel{animation:none}
  .stx-launcher{transition:none}
}

/* -------------------------------------------------------------- header */

.stx-head{
  display:flex;align-items:center;gap:11px;
  padding:14px 14px 14px 16px;
  background:#fff;
  border-bottom:1px solid var(--stx-line);
  flex:none;
}
.stx-head-mark{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--stx-brand);
}
.stx-head-mark img{width:23px;height:23px;object-fit:contain;display:block}
.stx-head-mark .stx-mark-red{display:none}
.stx-head-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.stx-head-copy strong{font-size:16px;font-weight:700;color:var(--stx-ink);letter-spacing:-.01em}
.stx-head-sub{font-size:12px;color:var(--stx-muted)}
.stx-head-status{display:none;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.9)}
.stx-head-status i{width:7px;height:7px;border-radius:50%;background:#32d583;flex:none}
.stx-head-btn{
  width:30px;height:30px;border:0;border-radius:8px;padding:0;
  background:transparent;color:var(--stx-faint);
  display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background .15s ease,color .15s ease;
}
.stx-head-btn:hover{background:#f2f4f7;color:var(--stx-body)}

/* chat state — brand header */
.stx-head.is-chat{background:var(--stx-brand);border-bottom-color:transparent}
.stx-head.is-chat .stx-head-mark{background:#fff}
.stx-head.is-chat .stx-mark-white{display:none}
.stx-head.is-chat .stx-mark-red{display:block}
.stx-head.is-chat .stx-head-copy strong{color:#fff}
.stx-head.is-chat .stx-head-sub{display:none}
.stx-head.is-chat .stx-head-status{display:flex}
.stx-head.is-chat .stx-head-btn{color:rgba(255,255,255,.85)}
.stx-head.is-chat .stx-head-btn:hover{background:rgba(255,255,255,.16);color:#fff}

/* ---------------------------------------------------------------- menu */

.stx-view{min-height:0}
.stx-menu{padding:14px;overflow-y:auto}
.stx-menu-card{background:var(--stx-panel);border-radius:12px;padding:15px 14px}
.stx-greet-title{margin:0;font-size:15px;font-weight:600;color:var(--stx-ink)}
.stx-greet-text{margin:2px 0 14px;font-size:13.5px;color:var(--stx-body)}
.stx-options{display:flex;flex-direction:column;gap:9px}
.stx-option{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 13px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid #e2e7ee;border-radius:9px;
  font-size:13px;font-weight:500;color:var(--stx-body);
  transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.stx-option:hover{border-color:var(--stx-brand);box-shadow:0 2px 8px rgba(16,24,40,.07)}
.stx-option:active{transform:scale(.99)}
.stx-option-icon{color:var(--stx-muted);display:grid;place-items:center;flex:none}
.stx-option:hover .stx-option-icon{color:var(--stx-brand)}

/* ---------------------------------------------------------- start form */

.stx-form-view{padding:18px 18px 20px;overflow-y:auto}
.stx-topic-chip{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
  padding:6px 8px 6px 12px;border-radius:999px;
  background:var(--stx-brand-soft);color:var(--stx-brand);
  font-size:12px;font-weight:600;
}
.stx-topic-chip button{
  border:0;background:transparent;color:inherit;cursor:pointer;padding:2px;
  display:grid;place-items:center;border-radius:50%;opacity:.7;
}
.stx-topic-chip button:hover{opacity:1}
.stx-form-intro{margin:0 0 16px;font-size:13px;color:var(--stx-muted)}
.stx-field{display:block;margin-bottom:12px;font-size:12px;font-weight:600;color:var(--stx-body)}
.stx-field span{font-weight:400;color:var(--stx-faint)}
.stx-field input{
  display:block;width:100%;margin-top:6px;
  border:1px solid var(--stx-line);border-radius:9px;
  padding:11px 12px;font-size:13.5px;font-weight:400;color:var(--stx-ink);
  background:#fff;outline:0;font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.stx-field input::placeholder{color:#b4bcc8}
.stx-field input:focus{border-color:var(--stx-brand);box-shadow:0 0 0 3px var(--stx-brand-soft)}
.stx-field input:focus-visible{outline:none}
.stx-primary{
  width:100%;margin-top:6px;border:0;border-radius:10px;
  background:var(--stx-brand);color:#fff;
  padding:13px;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s ease;
}
.stx-primary:hover{background:var(--stx-brand-dark)}
.stx-primary:disabled{opacity:.6;cursor:not-allowed}
.stx-privacy{display:block;margin-top:12px;text-align:center;font-size:11px;line-height:1.5;color:var(--stx-faint)}
.stx-error{
  background:var(--stx-brand-soft);color:var(--stx-brand);
  border-radius:9px;padding:10px 12px;font-size:12.5px;margin-bottom:10px;
}

/* ------------------------------------------------------------- messages */

.stx-chat-view{display:flex;flex-direction:column;flex:1;min-height:0}
.stx-messages{flex:1;overflow-y:auto;padding:16px 14px 6px;background:#fff;min-height:220px}
.stx-msg{margin-bottom:14px;display:flex;flex-direction:column;align-items:flex-start}
.stx-msg.is-mine{align-items:flex-end}
.stx-bubble{
  max-width:80%;padding:10px 13px;border-radius:14px 14px 14px 5px;
  background:#f2f4f7;color:var(--stx-ink);
  font-size:13.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere;
}
.stx-msg.is-mine .stx-bubble{
  background:var(--stx-brand);color:#fff;border-radius:14px 14px 5px 14px;
}
.stx-bubble b{font-weight:700}
.stx-bubble a{color:inherit}
.stx-meta{display:flex;align-items:center;gap:4px;margin-top:4px;padding:0 3px;font-size:11px;color:var(--stx-faint)}
.stx-meta .stx-i{width:14px;height:14px}
.stx-msg.is-mine .stx-bubble > .stx-meta{
  width:100%;justify-content:flex-end;padding:0;margin-top:6px;color:rgba(255,255,255,.82);
}
.stx-bubble img{display:block;max-width:100%;max-height:190px;border-radius:9px;margin-top:8px}
.stx-bubble audio{width:100%;max-width:230px;margin-top:8px}
.stx-bubble .stx-fileline{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  color:inherit;text-decoration:none;font-size:12.5px;font-weight:500;
  border-bottom:1px solid currentColor;padding-bottom:1px;
}
.stx-typing{display:flex;gap:4px;padding:12px 14px;background:#f2f4f7;border-radius:14px 14px 14px 5px;width:fit-content}
.stx-typing i{width:6px;height:6px;border-radius:50%;background:var(--stx-faint);animation:stx-blink 1.2s infinite}
.stx-typing i:nth-child(2){animation-delay:.2s}
.stx-typing i:nth-child(3){animation-delay:.4s}
@keyframes stx-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* ------------------------------------------------------------- composer */

.stx-composer{position:relative;background:#fff;border-top:1px solid #eef0f3;padding:10px 12px;flex:none}
.stx-composer-row{display:flex;align-items:flex-end;gap:8px}
.stx-icon-btn{
  width:34px;height:34px;flex:none;border:0;border-radius:8px;padding:0;
  background:transparent;color:var(--stx-faint);
  display:grid;place-items:center;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.stx-icon-btn:hover{background:#f2f4f7;color:var(--stx-body)}
.stx-attach input{display:none}
.stx-input-pill{
  flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;
  border:1px solid var(--stx-line);border-radius:20px;
  background:#fff;padding:3px 4px 3px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.stx-input-pill:focus-within{border-color:var(--stx-brand);box-shadow:0 0 0 3px var(--stx-brand-soft)}
.stx-input-pill textarea{
  flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;
  font-family:inherit;font-size:13.5px;line-height:1.45;color:var(--stx-ink);
  padding:8px 0;max-height:104px;
}
.stx-input-pill textarea::placeholder{color:#b4bcc8}
.stx-input-pill textarea:focus-visible{outline:none}
.stx-emoji-btn{width:30px;height:30px}
.stx-send{
  width:40px;height:40px;flex:none;border:0;border-radius:9px;padding:0;
  background:var(--stx-brand);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  transition:background .15s ease;
}
.stx-send:hover{background:var(--stx-brand-dark)}
.stx-send:disabled{opacity:.55;cursor:not-allowed}
.stx-attach-preview{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px;padding:8px 10px;border-radius:8px;
  background:#f2f4f7;font-size:12px;color:var(--stx-body);
}
.stx-attach-preview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stx-attach-preview button{border:0;background:transparent;color:var(--stx-brand);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.stx-emoji-panel{
  position:absolute;bottom:calc(100% - 4px);right:12px;z-index:5;
  width:246px;padding:8px;border-radius:12px;
  background:#fff;border:1px solid var(--stx-line);
  box-shadow:0 12px 32px rgba(16,24,40,.16);
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
}
.stx-emoji-panel button{border:0;background:transparent;cursor:pointer;font-size:19px;line-height:1;padding:5px;border-radius:6px}
.stx-emoji-panel button:hover{background:#f2f4f7}

/* ------------------------------------------------------------ branding */

.stx-branding{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px;border-top:1px solid #f2f4f7;background:#fff;flex:none;
  font-size:11px;color:var(--stx-faint);
}
.stx-branding img{width:14px;height:14px;object-fit:contain}

/* --------------------------------------------------------------- small */

@media (max-width:520px){
  .stx-launcher{right:16px;bottom:16px;width:54px;height:54px}
  .stx-bubble{max-width:86%}

  /* On a phone the panel fills the screen and is pinned to the *visual*
     viewport, so the composer stays above the keyboard instead of being
     covered by it. --stx-vvh and --stx-vvtop are kept in step by chat.js. */
  .stx-panel{
    left:0;right:0;width:auto;border-radius:0;
    top:var(--stx-vvtop, 0px);
    bottom:auto;
    height:var(--stx-vvh, 100dvh);
    max-height:none;
  }
  /* The launcher would sit behind the keyboard, and there is a close button. */
  .stx-chat-root.is-open .stx-launcher{display:none}
}

/* Anything under 16px makes iOS zoom the page in when the field is focused. */
@media (max-width:768px){
  .stx-input-pill textarea,
  .stx-field input{font-size:16px}
}

.stx-messages{overscroll-behavior:contain}

/* ----------------------------------------------------------------- calls */

/* Calling is only offered once a conversation exists. */
.stx-call-btn{display:none}
.stx-head.is-chat .stx-call-btn{display:grid;color:rgba(255,255,255,.85)}

.stx-call{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#11161f;color:#fff;overflow:hidden;
}
.stx-remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#11161f}
.stx-local-video{
  position:absolute;right:12px;top:12px;width:92px;height:126px;
  object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.35);
  background:#1b2230;z-index:2;
}
.stx-call-body{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;
  text-align:center;padding:0 24px;
}
.stx-call.has-video .stx-call-body{
  position:absolute;top:14px;left:0;right:0;gap:2px;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.stx-call.has-video .stx-call-avatar{display:none}
.stx-call-avatar{
  width:82px;height:82px;border-radius:50%;margin-bottom:6px;
  background:var(--stx-brand);display:grid;place-items:center;
}
.stx-call-avatar img{width:46px;height:46px;object-fit:contain}
.stx-call-body strong{font-size:19px;font-weight:600}
.stx-call-body span{font-size:13px;color:rgba(255,255,255,.72)}
.stx-call-bar{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:16px;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
}
.stx-call-action{
  width:50px;height:50px;border:0;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;
  transition:background .15s ease;
}
.stx-call-action:hover{background:rgba(255,255,255,.26)}
.stx-call-action.is-off{background:#fff;color:#11161f}
.stx-call-end{background:#e5484d}
.stx-call-end:hover{background:#cf3438}
.stx-call-accept{background:#12b76a}
.stx-call-accept:hover{background:#0e9a59}
.stx-call.is-ringing .stx-call-avatar{animation:stx-pulse 1.6s ease-in-out infinite}
@keyframes stx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.stx-call.is-ringing .stx-call-avatar{animation:none}}
.stx-call-note{
  margin:0 12px 10px;padding:9px 12px;border-radius:8px;
  background:var(--stx-brand-soft);color:var(--stx-brand);font-size:12px;
}