/* support-widget.css — V2Bot brand, light theme, no emoji */

/* Lock background scroll while the widget is open on mobile (hides the page scrollbar) */
html.sw-locked{overflow:hidden!important}
html.sw-locked,html.sw-locked body{overscroll-behavior:none}

/* Floating button */
#sw-btn{position:fixed;right:24px;bottom:24px;z-index:9998;width:58px;height:58px;border-radius:50%;
  background:var(--gold-gradient,linear-gradient(135deg,#D4A853 0%,#F4D03F 50%,#E8C97A 100%));
  color:#1A1A2E;border:none;cursor:pointer;opacity:.82;
  box-shadow:0 8px 24px rgba(212,168,83,.28),0 2px 8px rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
#sw-btn:hover,#sw-btn:focus-visible{opacity:1;transform:translateY(-2px);box-shadow:0 12px 28px rgba(212,168,83,.45),0 4px 10px rgba(0,0,0,.15)}
#sw-btn svg{width:26px;height:26px}
/* unread indicator (operator replied while widget closed) */
#sw-btn.sw-unread::after{content:"";position:absolute;top:2px;right:2px;width:14px;height:14px;
  border-radius:50%;background:#EF4444;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* Panel */
#sw-panel{position:fixed;right:24px;bottom:92px;z-index:9999;
  width:372px;max-width:calc(100vw - 32px);height:540px;max-height:calc(100vh - 130px);
  background:#FFFFFF;color:var(--text-primary,#1A1A2E);
  border:1px solid var(--border-card,rgba(0,0,0,.06));border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.16),0 4px 16px rgba(0,0,0,.06);
  display:none;flex-direction:column;overflow:hidden;
  font-family:var(--font-body,'Inter',-apple-system,sans-serif);
  animation:sw-in .22s cubic-bezier(.34,1.56,.64,1)}
#sw-panel.open{display:flex}
@keyframes sw-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* Header */
#sw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border-light,rgba(0,0,0,.06));
  background:linear-gradient(180deg,#FFFDF7 0%,#FFFFFF 100%)}
#sw-head-title{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--text-primary,#1A1A2E)}
#sw-head-dot{width:8px;height:8px;border-radius:50%;background:var(--success,#22C55E);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
#sw-close{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--text-muted,#8A8A9A);border-radius:8px;cursor:pointer;
  transition:background .15s ease,color .15s ease}
#sw-close:hover{background:rgba(0,0,0,.05);color:var(--text-primary,#1A1A2E)}
#sw-close svg{width:18px;height:18px}

/* Messages */
#sw-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;
  background:var(--bg-tertiary,#F8F7F4)}
.sw-m{max-width:82%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.45;
  white-space:pre-wrap;word-wrap:break-word}
.sw-user{align-self:flex-end;background:var(--gold-gradient,linear-gradient(135deg,#D4A853,#E8C97A));
  color:#1A1A2E;border-bottom-right-radius:5px}
.sw-ai,.sw-support{align-self:flex-start;background:#FFFFFF;color:var(--text-primary,#1A1A2E);
  border:1px solid var(--border-card,rgba(0,0,0,.06));border-bottom-left-radius:5px;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.sw-sys{align-self:center;max-width:90%;font-size:12px;color:var(--text-muted,#8A8A9A);text-align:center;
  background:transparent;padding:4px 8px}

/* Email row */
#sw-email{display:none;padding:10px 12px;border-top:1px solid var(--border-light,rgba(0,0,0,.06));
  gap:8px;background:#FFFFFF}
#sw-email.show{display:flex}
#sw-email-input{flex:1;background:#FFFFFF;color:var(--text-primary,#1A1A2E);
  border:1px solid var(--border-default,rgba(212,168,83,.3));border-radius:10px;padding:9px 10px;font:inherit}
#sw-email-ok{background:var(--gold-primary,#D4A853);color:#1A1A2E;border:none;border-radius:10px;
  padding:0 16px;cursor:pointer;font-weight:600}
#sw-email-ok:hover{background:var(--gold-dark,#B8923A)}

/* Footer / composer */
#sw-foot{border-top:1px solid var(--border-light,rgba(0,0,0,.06));padding:10px 12px;
  display:flex;gap:8px;align-items:flex-end;background:#FFFFFF}
#sw-input{flex:1;resize:none;background:#FFFFFF;color:var(--text-primary,#1A1A2E);
  border:1px solid var(--border-default,rgba(212,168,83,.3));border-radius:12px;
  padding:9px 12px;font:inherit;font-size:14px;line-height:1.4;max-height:104px;min-height:40px;
  transition:border-color .15s ease,box-shadow .15s ease;outline:none}
#sw-input::placeholder{color:var(--text-muted,#8A8A9A)}
/* Soft, light focus — no bright cyan, no thick ring */
#sw-input:focus,#sw-input:focus-visible{outline:none;border-color:rgba(212,168,83,.55);
  box-shadow:0 0 0 3px rgba(212,168,83,.12)}
#sw-email-input:focus,#sw-email-input:focus-visible{outline:none;border-color:rgba(212,168,83,.55);
  box-shadow:0 0 0 3px rgba(212,168,83,.12)}

/* Send button — paper plane */
#sw-send{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--gold-gradient,linear-gradient(135deg,#D4A853 0%,#F4D03F 50%,#E8C97A 100%));
  color:#1A1A2E;border:none;border-radius:12px;cursor:pointer;
  box-shadow:0 2px 8px rgba(212,168,83,.3);transition:transform .15s ease,box-shadow .15s ease}
#sw-send:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,168,83,.4)}
#sw-send:active{transform:translateY(0)}
#sw-send svg{width:19px;height:19px}

/* Typing dots */
.sw-typing{display:flex;align-items:center;gap:0;padding:12px 14px!important}
.sw-typing span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;
  background:var(--text-muted,#8A8A9A);animation:sw-b 1s infinite}
.sw-typing span:nth-child(2){animation-delay:.15s}
.sw-typing span:nth-child(3){animation-delay:.3s}
@keyframes sw-b{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

/* Mobile — fullscreen */
@media(max-width:480px){
  #sw-btn{right:16px;bottom:16px}
  #sw-panel{right:0;left:0;top:0;bottom:0;width:100%;max-width:100%;height:100%;max-height:100%;
    border-radius:0;border:none;animation:sw-in-m .22s ease}
  #sw-panel.open{display:flex}
  #sw-head{padding:16px}
  #sw-close{width:34px;height:34px}
  #sw-close svg{width:22px;height:22px}
}
@keyframes sw-in-m{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}