/* ============================================================
   Sales Source - chat assistant styles
   ============================================================ */
.ss-chat{ position:fixed; right:22px; bottom:22px; z-index:9000; font-family:'Plus Jakarta Sans','Space Grotesk',system-ui,sans-serif; }

/* Launcher */
.ss-chat-launcher{
  position:relative; width:62px; height:62px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(150deg, #103E54 0%, #11524A 42%, #155B46 74%, #186044 100%); color:#fff;
  box-shadow:0 18px 40px -14px rgba(7,44,40,.6); display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.ss-chat-launcher:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 24px 50px -16px rgba(7,44,40,.7); }
.ss-chat-launcher svg{ width:27px; height:27px; position:absolute; transition:opacity .25s, transform .25s; }
.ss-ic-close{ opacity:0; transform:rotate(-90deg); }
.ss-open .ss-ic-chat{ opacity:0; transform:rotate(90deg); }
.ss-open .ss-ic-close{ opacity:1; transform:rotate(0); }
.ss-chat-badge{
  position:absolute; top:-3px; right:-3px; min-width:21px; height:21px; padding:0 6px; border-radius:11px;
  background:#E8543B; color:#fff; font-size:.72rem; font-weight:700; display:grid; place-items:center;
  box-shadow:0 0 0 3px #fff;
}
.ss-chat-launcher::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(30,143,92,.5);
  animation:ssPulse 2.4s ease-out infinite;
}
@keyframes ssPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }
.ss-open .ss-chat-launcher::after{ display:none; }

/* Panel */
.ss-chat-panel{
  position:absolute; right:0; bottom:78px; width:380px; max-width:calc(100vw - 32px);
  height:560px; max-height:calc(100vh - 120px);
  background:#fff; border-radius:22px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 40px 90px -30px rgba(8,30,24,.5), 0 0 0 1px rgba(8,30,24,.05);
  display:none; transform-origin:bottom right;
}
.ss-open .ss-chat-panel{ display:flex; animation:ssPanelIn .28s cubic-bezier(.2,.8,.2,1); }
@keyframes ssPanelIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }

/* Header */
.ss-chat-head{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  background:linear-gradient(135deg,#0F3D2E 0%,#15604A 55%,#1E8F5C 120%); color:#fff;
}
.ss-chat-avatar{ flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); }
.ss-chat-avatar svg{ width:22px; height:22px; }
.ss-chat-id{ flex:1; display:flex; flex-direction:column; line-height:1.25; }
.ss-chat-id strong{ font-size:1.02rem; font-weight:700; }
.ss-chat-id span{ font-size:.78rem; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:6px; }
.ss-dot{ width:8px; height:8px; border-radius:50%; background:#52E39B; box-shadow:0 0 0 0 rgba(82,227,155,.6); animation:ssLive 1.8s ease-out infinite; }
@keyframes ssLive{ 0%{ box-shadow:0 0 0 0 rgba(82,227,155,.6); } 100%{ box-shadow:0 0 0 7px rgba(82,227,155,0); } }
.ss-chat-min{ background:rgba(255,255,255,.14); border:none; color:#fff; width:32px; height:32px; border-radius:9px; cursor:pointer; display:grid; place-items:center; transition:background .2s; }
.ss-chat-min:hover{ background:rgba(255,255,255,.26); }
.ss-chat-min svg{ width:18px; height:18px; }
.ss-chat-reset{ background:rgba(255,255,255,.14); border:none; color:#fff; width:32px; height:32px; border-radius:9px; cursor:pointer; display:grid; place-items:center; transition:background .2s, transform .3s; margin-right:-4px; }
.ss-chat-reset:hover{ background:rgba(255,255,255,.26); transform:rotate(-45deg); }
.ss-chat-reset svg{ width:17px; height:17px; }

/* Body */
.ss-chat-body{ flex:1; overflow-y:auto; padding:18px 16px 8px; background:#F4F8F6; display:flex; flex-direction:column; gap:12px; }
.ss-chat-body::-webkit-scrollbar{ width:7px; }
.ss-chat-body::-webkit-scrollbar-thumb{ background:rgba(15,61,46,.18); border-radius:4px; }

.ss-msg{ display:flex; gap:9px; align-items:flex-end; max-width:90%; animation:ssIn .3s ease; }
@keyframes ssIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ss-msg-av{ flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(150deg,#1E8F5C,#15786E); color:#fff; }
.ss-msg-av svg{ width:15px; height:15px; }
.ss-msg-tx{ font-size:.93rem; line-height:1.5; padding:11px 14px; border-radius:15px; }
.ss-bot{ align-self:flex-start; }
.ss-bot .ss-msg-tx{ background:#fff; color:#16261F; border:1px solid #E2EAE5; border-bottom-left-radius:5px; }
.ss-user{ align-self:flex-end; flex-direction:row-reverse; }
.ss-user .ss-msg-tx{ background:linear-gradient(150deg,#1E8F5C,#15786E); color:#fff; border-bottom-right-radius:5px; }
.ss-msg-tx strong{ font-weight:700; }

.ss-msg-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ss-link-btn{ display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:9px; background:rgba(30,143,92,.1); color:#15604A; font-weight:700; font-size:.82rem; text-decoration:none; border:1px solid rgba(30,143,92,.25); transition:background .2s, transform .2s; }
.ss-link-btn:hover{ background:rgba(30,143,92,.18); transform:translateY(-1px); }

/* Typing */
.ss-typing-dots{ display:inline-flex; gap:4px; padding:3px 0; }
.ss-typing-dots i{ width:7px; height:7px; border-radius:50%; background:#9DB3A8; animation:ssBlink 1.4s infinite both; }
.ss-typing-dots i:nth-child(2){ animation-delay:.2s; }
.ss-typing-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes ssBlink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

/* Quick replies */
.ss-chat-quick{ display:flex; flex-wrap:wrap; gap:7px; padding:4px 16px 12px; background:#F4F8F6; }
.ss-chip{ background:#fff; border:1.5px solid #CFE6D7; color:#15604A; font-weight:600; font-size:.84rem; padding:8px 13px; border-radius:999px; cursor:pointer; transition:background .2s, border-color .2s, transform .2s; font-family:inherit; }
.ss-chip:hover{ background:#1E8F5C; color:#fff; border-color:#1E8F5C; transform:translateY(-1px); }

/* Input */
.ss-chat-input{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid #E2EAE5; background:#fff; }
.ss-chat-input input{ flex:1; border:1.5px solid #DCE8E3; border-radius:12px; padding:11px 14px; font:inherit; font-size:.92rem; color:#16261F; outline:none; transition:border-color .2s, box-shadow .2s; }
.ss-chat-input input:focus{ border-color:#1E8F5C; box-shadow:0 0 0 3px rgba(30,143,92,.12); }
.ss-chat-input button{ flex:none; width:44px; height:44px; border-radius:12px; border:none; cursor:pointer; background:linear-gradient(150deg,#1E8F5C,#15786E); color:#fff; display:grid; place-items:center; transition:transform .2s, box-shadow .2s; }
.ss-chat-input button:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(7,44,40,.6); }
.ss-chat-input button svg{ width:19px; height:19px; }

@media(max-width:480px){
  .ss-chat{ right:16px; bottom:16px; }
  .ss-chat-panel{ width:calc(100vw - 24px); height:calc(100vh - 110px); right:-2px; }
}
@media(prefers-reduced-motion:reduce){
  .ss-chat-launcher::after, .ss-dot{ animation:none; }
}

/* Robot mascot avatar */
.ss-robot{ overflow:visible; }
.ss-robot-eyes{ transform-box:fill-box; transform-origin:center; animation:ssBlink 4.2s infinite; }
@keyframes ssBlink{ 0%,92%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(.12); } }
.ss-robot-antenna{ transform-box:fill-box; transform-origin:center; animation:ssAntennaPulse 1.8s ease-in-out infinite; }
@keyframes ssAntennaPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.75); } }
.ss-chat-avatar{ cursor:default; }
.ss-chat-avatar:hover .ss-robot{ animation:ssRobotBob .65s ease; }
@keyframes ssRobotBob{ 0%,100%{ transform:translateY(0) rotate(0); } 30%{ transform:translateY(-2px) rotate(-6deg); } 65%{ transform:translateY(-1px) rotate(5deg); } }
@media(prefers-reduced-motion:reduce){ .ss-robot-eyes, .ss-robot-antenna{ animation:none; } }
