#hksc-root{
  --hksc-green:#5b8f76; --hksc-green-2:#85b69c; --hksc-gold:#d5b03e;
  --hksc-cream:#fdfbf8; --hksc-sand:#f5f1ea; --hksc-line:#ece3d5;
  --hksc-ink:#353535; --hksc-muted:#6a635c;
  font-family:Lato,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:13.5px; line-height:1.5; color:var(--hksc-ink);
}
#hksc-root *,#hksc-root *::before,#hksc-root *::after{box-sizing:border-box}

/* launcher */
.hksc-fab{
  position:fixed; left:22px; bottom:52px; z-index:99997;
  height:50px; min-width:50px; padding:0 18px 0 15px; border:0; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  background:var(--hksc-green); color:#fff; font:700 14px/1 Lato,system-ui,sans-serif; letter-spacing:.02em;
  box-shadow:0 8px 22px rgba(53,53,53,.25); transition:transform .2s ease, background .2s ease;
}
.hksc-fab:hover{background:#4c7a64; transform:translateY(-2px)}
.hksc-fab:focus-visible{outline:3px solid var(--hksc-gold); outline-offset:3px}
.hksc-fab svg{width:22px; height:22px; flex:none; display:block}
.hksc-fab .hksc-dot{position:absolute; top:7px; left:33px; width:9px; height:9px; border-radius:50%; background:var(--hksc-gold); border:2px solid var(--hksc-green)}
.hksc-open .hksc-fab .hksc-dot{display:none}

/* panel */
.hksc-panel{
  position:fixed; left:22px; bottom:114px; z-index:1000004;
  width:360px; height:min(540px, calc(100vh - 140px)); height:min(540px, calc(100dvh - 140px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--hksc-cream); border:1px solid var(--hksc-line); border-radius:16px;
  box-shadow:0 22px 56px rgba(53,53,53,.24);
  opacity:0; transform:translateY(12px) scale(.98); transform-origin:bottom left; pointer-events:none; visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.hksc-open .hksc-panel{opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .2s ease, transform .2s ease}

.hksc-head{display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; background:#fff; border-bottom:2px solid var(--hksc-gold)}
.hksc-logo{width:62px; height:auto; flex:none; display:block}
.hksc-title{flex:1; min-width:0; padding-left:12px; border-left:1px solid var(--hksc-line)}
.hksc-title strong{display:block; font:600 16px/1.2 "Cormorant Garamond",Georgia,serif; color:var(--hksc-ink); letter-spacing:.01em}
.hksc-title span{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--hksc-muted)}
.hksc-live{width:6px; height:6px; border-radius:50%; background:var(--hksc-green-2); flex:none}
.hksc-close{width:32px; height:32px; border:0; border-radius:50%; background:transparent; color:var(--hksc-muted); cursor:pointer; display:grid; place-items:center; flex:none}
.hksc-close:hover{background:var(--hksc-sand); color:var(--hksc-ink)}
.hksc-close svg{width:18px; height:18px}

.hksc-body{flex:1; overflow-y:auto; padding:14px 12px 6px; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain; background:var(--hksc-cream)}
.hksc-msg{max-width:86%; padding:8px 12px; border-radius:14px; word-wrap:break-word; overflow-wrap:anywhere; white-space:normal}
.hksc-bot{align-self:flex-start; background:#fff; border:1px solid var(--hksc-line); border-bottom-left-radius:5px}
.hksc-user{align-self:flex-end; background:var(--hksc-green); color:#fff; border-bottom-right-radius:5px}
.hksc-msg p{margin:0 0 5px} .hksc-msg p:last-child{margin:0}
.hksc-msg ul{margin:3px 0 5px; padding-inline-start:16px} .hksc-msg li{margin:2px 0}
.hksc-msg a{color:var(--hksc-green); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.hksc-user a{color:#fff}
.hksc-msg strong{font-weight:700}
.hksc-err{align-self:center; max-width:94%; font-size:12px; color:#8a3b2b; background:#fbeee9; border:1px solid #f0d2c8; border-radius:10px; padding:7px 11px}
.hksc-ur{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Noto Naskh Arabic",Lato,sans-serif; line-height:2; font-size:14px}
.hksc-msg ul:has(.hksc-ur){padding-inline-start:0; list-style-position:inside}

.hksc-typing{display:inline-flex; gap:4px; padding:12px 14px}
.hksc-typing i{width:6px; height:6px; border-radius:50%; background:var(--hksc-green-2); animation:hksc-b 1.2s infinite ease-in-out}
.hksc-typing i:nth-child(2){animation-delay:.15s} .hksc-typing i:nth-child(3){animation-delay:.3s}
@keyframes hksc-b{0%,80%,100%{transform:translateY(0); opacity:.5} 40%{transform:translateY(-4px); opacity:1}}

.hksc-chips{display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 4px}
.hksc-chip{border:1px solid var(--hksc-green-2); background:#fff; color:var(--hksc-green); border-radius:999px; padding:5px 11px; font:700 12px/1.3 Lato,system-ui,sans-serif; cursor:pointer}
.hksc-chip:hover{background:var(--hksc-sand)}

.hksc-foot{padding:8px 10px 10px; border-top:1px solid var(--hksc-line); background:#fff}
.hksc-form{display:flex; align-items:flex-end; gap:8px}
.hksc-input{flex:1; min-height:40px; max-height:110px; resize:none; border:1px solid var(--hksc-line); border-radius:12px; padding:10px 12px; font:14px/1.4 Lato,system-ui,sans-serif; color:var(--hksc-ink); background:var(--hksc-cream); outline:none}
.hksc-input:focus{border-color:var(--hksc-green-2); box-shadow:0 0 0 3px rgba(133,182,156,.25)}
.hksc-send{width:40px; height:40px; flex:none; border:0; border-radius:50%; background:var(--hksc-green); color:#fff; cursor:pointer; display:grid; place-items:center}
.hksc-send:disabled{opacity:.45; cursor:default}
.hksc-send svg{width:18px; height:18px}
.hksc-links{display:flex; gap:14px; justify-content:center; margin-top:6px; font-size:11.5px; color:var(--hksc-muted)}
.hksc-links a{color:var(--hksc-muted); text-decoration:none} .hksc-links a:hover{color:var(--hksc-green); text-decoration:underline}

@media (max-width:640px){
  .hksc-fab{left:14px; bottom:44px; height:50px; min-width:50px; padding:0 14px}
  .hksc-fab .hksc-label{display:none}
  .hksc-fab .hksc-dot{left:30px}
  /* floating card, not full screen */
  .hksc-panel{left:12px; right:42px; bottom:104px; width:auto; height:min(600px, calc(100vh - 120px)); height:min(600px, calc(100dvh - 120px)); border-radius:14px}
  .hksc-input{font-size:16px} /* below 16px iOS zooms the page on focus */
}
@media (prefers-reduced-motion:reduce){
  .hksc-fab,.hksc-panel{transition:none} .hksc-typing i{animation:none}
}