#scc-chatbot{
  position:fixed; right:24px; bottom:24px; width:360px; max-height:78vh;
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.14); display:flex; flex-direction:column; overflow:hidden; z-index:2147483647;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
#scc-chatbot.min{ display:none; }

/* launcher (when hidden) */
#scc-launcher{
  position:fixed; right:24px; bottom:24px; width:56px; height:56px; border-radius:999px;
  background:#2563eb; color:#fff; border:0; box-shadow:0 10px 24px rgba(0,0,0,.2); cursor:pointer;
  z-index:2147483647; font-size:22px; display:flex; align-items:center; justify-content:center;
}
#scc-launcher.hidden{ display:none; }

#scc-header{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #eee; background:#f8fafc;
  font-weight:600; color:#0f172a; position:relative;
}
#scc-header .dot{ width:8px; height:8px; border-radius:999px; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); }

#scc-chatbox{ flex:1; overflow:auto; padding:12px; background:#fbfbfc; scroll-behavior:smooth; }
#scc-chatbox::-webkit-scrollbar{ width:8px; }
#scc-chatbox::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:8px; }

.scc-bubble{ max-width:85%; padding:10px 12px; margin:8px 0; border-radius:14px; line-height:1.4; font-size:14px; }
.scc-bubble.user{ margin-left:auto; background:#e0f2fe; color:#0c4a6e; border-top-right-radius:6px; }
.scc-bubble.bot{ margin-right:auto; background:#f1f5f9; color:#0f172a; border-top-left-radius:6px; }
.scc-bubble a{ color:#2563eb; text-decoration:underline; }
.scc-bubble ul{ margin:6px 0 0 16px; padding:0; }
.scc-bubble li{ margin:6px 0; }

#scc-controls{ display:flex; gap:8px; padding:10px; border-top:1px solid #eee; background:#fff; }
#scc-input{ flex:1; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; outline:none; }
#scc-input:focus{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
#scc-send{ padding:10px 14px; border:0; border-radius:10px; background:#2563eb; color:#fff; font-weight:600; cursor:pointer; }
#scc-send:hover{ opacity:.95; }

/* mic */
#scc-mic{
  border:0; background:#f1f5f9; color:#0f172a; border-radius:10px; padding:0 10px; cursor:pointer; font-size:16px;
}
#scc-mic.rec{ background:#fee2e2; }

/* menu */
#scc-menu-btn{
  margin-left:auto; border:0; background:transparent; font-size:18px; line-height:1; cursor:pointer; color:#334155;
}
#scc-menu{
  position:absolute; right:10px; top:42px; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.14); padding:6px; display:flex; flex-direction:column; gap:2px; z-index:2147483647;
}
#scc-menu.hidden{ display:none; }
#scc-menu button, #scc-menu a{
  display:block; text-align:left; padding:8px 10px; border:0; background:#fff; border-radius:8px; font-size:14px; color:#0f172a; text-decoration:none;
}
#scc-menu button:hover, #scc-menu a:hover{ background:#f1f5f9; }

/* typing dots */
.scc-typing{ display:flex; gap:4px; margin:8px 0 0 4px; }
.scc-typing span{ width:6px; height:6px; background:#94a3b8; border-radius:999px; display:inline-block; animation:scc-bounce 1s infinite ease-in-out; }
.scc-typing span:nth-child(2){ animation-delay:.2s; }
.scc-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes scc-bounce{ 0%,80%,100%{ transform:scale(0); opacity:.5; } 40%{ transform:scale(1); opacity:1; } }

/* responsive */
@media (max-width: 480px){
  #scc-chatbot{ right:12px; left:12px; width:auto; max-height:80vh; }
}