/* SEO Link Chatbot v2 */

/* ---------- Launcher (prominent, pulsing) ---------- */
.slc-launcher{position:fixed;inset-inline-start:22px;bottom:92px;z-index:72;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(145deg,var(--surface2),var(--surface));border:1px solid rgba(47,201,143,.55);
  display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 10px 30px rgba(4,8,12,.5),0 0 0 0 rgba(47,201,143,.5);
  transition:transform .22s ease,border-color .22s ease}
.slc-launcher:hover{transform:scale(1.09);border-color:var(--accent)}
.slc-launcher svg{width:34px;height:34px;position:relative;z-index:2}
.slc-launcher.active svg{transform:scale(.92)}
.slc-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:slcPulse 2.8s ease-out infinite;pointer-events:none}
@keyframes slcPulse{0%{transform:scale(.95);opacity:.65}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.slc-badge{position:absolute;top:-3px;inset-inline-end:-3px;min-width:20px;height:20px;border-radius:999px;
  background:#E5484D;color:#fff;font-family:var(--font-display);font-weight:700;font-size:.72rem;
  display:grid;place-items:center;border:2px solid var(--bg);z-index:3}
@media (prefers-reduced-motion:reduce){.slc-ring{animation:none;opacity:0}.slc-launcher:hover{transform:none}}

/* ---------- Proactive teaser bubble ---------- */
.slc-teaser{position:fixed;inset-inline-start:22px;bottom:168px;z-index:71;width:min(310px,calc(100vw - 44px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 16px 16px 14px;
  display:flex;gap:12px;cursor:pointer;box-shadow:0 18px 44px rgba(4,8,12,.55);
  opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.slc-teaser.show{opacity:1;transform:none;pointer-events:auto}
.slc-teaser:hover{border-color:rgba(47,201,143,.5)}
.slc-teaser-av{width:42px;height:42px;flex:none}
.slc-teaser-av svg{width:100%;height:100%}
.slc-teaser-body{flex:1;min-width:0}
.slc-teaser-body b{display:block;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink);margin-bottom:4px}
.slc-teaser-body p{margin:0;font-size:.86rem;line-height:1.65;color:var(--muted)}
.slc-teaser-x{position:absolute;top:6px;inset-inline-end:8px;background:none;border:none;color:var(--muted);
  font-size:1.15rem;line-height:1;cursor:pointer;padding:4px 6px}
.slc-teaser-x:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.slc-teaser{transition:none}}

/* ---------- Panel ---------- */
.slc-panel{position:fixed;inset-inline-start:22px;bottom:92px;z-index:80;width:min(392px,calc(100vw - 44px));
  height:min(580px,calc(100dvh - 140px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 26px 64px rgba(4,8,12,.6);
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.slc-panel.open{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.slc-panel{transition:none}}

.slc-head{display:flex;align-items:center;gap:12px;padding:15px 18px;
  background:linear-gradient(135deg,var(--surface2),rgba(47,201,143,.07));border-bottom:1px solid var(--line)}
.slc-avatar{position:relative;width:44px;height:44px;flex:none}
.slc-avatar svg{width:100%;height:100%}
.slc-online{position:absolute;bottom:1px;inset-inline-end:1px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface2)}
.slc-head-info{flex:1;min-width:0}
.slc-head-info b{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink)}
.slc-status{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.slc-status i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.slc-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.5rem;line-height:1;padding:4px 8px}
.slc-close:hover{color:var(--ink)}

.slc-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.slc-msgs::-webkit-scrollbar{width:6px}
.slc-msgs::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.slc-msg{max-width:86%;padding:11px 15px;border-radius:14px;font-size:.93rem;line-height:1.8;white-space:pre-line;word-wrap:break-word}
.slc-msg.bot{background:var(--surface2);border:1px solid var(--line);color:var(--ink);border-start-start-radius:4px;align-self:flex-start}
.slc-msg.user{background:var(--accent);color:var(--accent-ink);border-start-end-radius:4px;align-self:flex-end}
.slc-msg a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.slc-msg.user a{color:var(--accent-ink)}
.slc-typing{display:inline-flex;gap:5px;padding:14px 18px;background:var(--surface2);border:1px solid var(--line);
  border-radius:14px;border-start-start-radius:4px;align-self:flex-start}
.slc-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:slcB 1.1s infinite}
.slc-typing i:nth-child(2){animation-delay:.15s}
.slc-typing i:nth-child(3){animation-delay:.3s}
@keyframes slcB{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.slc-typing i{animation:none;opacity:.6}}

.slc-wa-btn{display:inline-flex;align-items:center;gap:8px;margin-top:6px;background:var(--accent);
  color:var(--accent-ink)!important;font-family:var(--font-display);font-weight:700;font-size:.88rem;
  padding:10px 20px;border-radius:var(--r-pill);text-decoration:none!important;align-self:flex-start;transition:background .15s}
.slc-wa-btn:hover{background:var(--accent-hover,#3BDCA0)}
.slc-wa-btn svg{width:17px;height:17px;fill:var(--accent-ink)}

.slc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 10px}
.slc-chip{background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--muted);
  font-family:var(--font-body);font-size:.82rem;padding:7px 14px;cursor:pointer;transition:border-color .15s,color .15s}
.slc-chip:hover{border-color:var(--accent);color:var(--accent)}

.slc-input{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:var(--surface2)}
.slc-input input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink);
  font-family:var(--font-body);font-size:.93rem;padding:11px 18px;min-width:0}
.slc-input input:focus{outline:none;border-color:var(--accent)}
.slc-input button{width:44px;height:44px;border-radius:50%;background:var(--accent);border:none;display:grid;
  place-items:center;cursor:pointer;flex:none;transition:background .15s}
.slc-input button:hover{background:var(--accent-hover,#3BDCA0)}
.slc-input button svg{width:20px;height:20px;stroke:var(--accent-ink);fill:none;transform:scaleX(-1)}

@media(max-width:480px){
  .slc-panel{inset-inline-start:12px;bottom:86px;width:calc(100vw - 24px);height:min(560px,calc(100dvh - 130px))}
  .slc-launcher{inset-inline-start:14px;bottom:88px;width:58px;height:58px}
  .slc-launcher svg{width:30px;height:30px}
  .slc-teaser{inset-inline-start:14px;bottom:156px;width:calc(100vw - 28px)}
}
body.admin-bar .slc-panel{height:min(580px,calc(100dvh - 175px))}

/* ===== Attention effects: wiggle, glow, badge pop, sound toggle ===== */
@keyframes slcWiggle{0%,86%,100%{transform:rotate(0deg) scale(1)}88%{transform:rotate(-10deg) scale(1.07)}90%{transform:rotate(9deg) scale(1.07)}92%{transform:rotate(-7deg) scale(1.05)}94%{transform:rotate(5deg) scale(1.03)}96%{transform:rotate(-3deg) scale(1.01)}98%{transform:rotate(1deg) scale(1)}}
@keyframes slcGlow{0%,100%{box-shadow:0 10px 30px rgba(4,8,12,.5),0 0 0 0 rgba(47,201,143,.45)}50%{box-shadow:0 10px 30px rgba(4,8,12,.5),0 0 26px 6px rgba(47,201,143,.32)}}
@keyframes slcBadgePop{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.3)}96%{transform:scale(.94)}}
.slc-launcher.attn{animation:slcWiggle 8s ease-in-out infinite,slcGlow 2.6s ease-in-out infinite}
.slc-launcher.attn:hover,.slc-launcher.active{animation:none}
.slc-launcher.attn .slc-badge{animation:slcBadgePop 8s ease-in-out infinite}
.slc-sound{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px 6px;display:grid;place-items:center;transition:color .15s;flex:none}
.slc-sound:hover{color:var(--ink)}
.slc-sound svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.slc-sound.off{opacity:.45}
@media (prefers-reduced-motion:reduce){.slc-launcher.attn,.slc-launcher.attn .slc-badge{animation:none}}