/* SumKitTool Helper — floating tool finder + FAQ + AI answers widget.
   Local search is client-side; questions with no local match go to /api/chat. */
.sk-helper{position:fixed;right:22px;bottom:76px;z-index:9000;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.sk-helper-btn{width:52px;height:52px;border:0;border-radius:50%;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;cursor:pointer;box-shadow:0 10px 24px rgba(37,99,235,.35);display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s}
.sk-helper-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(37,99,235,.42)}
.sk-helper-btn:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.sk-helper-btn svg{width:26px;height:26px}
/* Dismiss: small × at the button's corner; hides the widget for this visit.
   Lighthouse Nov 2026 (target-size): the touch target is 44×44px while the
   visible circle stays 20px — the circle is drawn by ::before, centred on
   the same spot as before (button top/left -18px keeps the circle's centre
   at the old -6px+10px position). ::before sits behind the × (z-index:-1
   inside this button's own stacking context). The button itself has NO
   border-radius: a 50% radius would clip hit-testing to the circle and the
   square corners would stop being clickable (verified with elementFromPoint). */
.sk-helper-dismiss{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border:0;background:transparent;color:#64748b;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2;padding:0}
.sk-helper-dismiss::before{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);border:1px solid #e2e8f0;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.15);z-index:-1}
.sk-helper-dismiss:hover{color:#dc2626}
.sk-helper-dismiss:hover::before{border-color:#fecaca}
.sk-helper-btn .sk-icon-close{display:none}
.sk-helper.open .sk-helper-btn .sk-icon-chat{display:none}
.sk-helper.open .sk-helper-btn .sk-icon-close{display:block}
.sk-helper-panel{position:absolute;right:0;bottom:64px;width:360px;max-width:calc(100vw - 28px);max-height:min(560px,72vh);background:#fff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 20px 48px rgba(15,23,42,.22);display:none;flex-direction:column;overflow:hidden}
.sk-helper.open .sk-helper-panel{display:flex}
.sk-helper-head{position:relative;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;padding:14px 44px 14px 16px;flex:none}
.sk-helper-head h2{margin:0;font-size:16px;font-weight:700;line-height:1.3}
.sk-helper-head p{margin:2px 0 0;font-size:12.5px;opacity:.92}
.sk-helper-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.18);color:#fff;font-size:17px;line-height:1;cursor:pointer}
.sk-helper-close:focus-visible,.sk-chip:focus-visible,.sk-send:focus-visible,.sk-input:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.sk-helper-msgs{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.sk-msg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5;color:#1e293b;background:#f1f5f9;border-bottom-left-radius:4px}
.sk-msg.user{align-self:flex-end;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.sk-msg a{color:#2563eb}
/* AI thinking indicator: three bouncing dots. */
.sk-thinking{display:flex;gap:5px;align-items:center;padding:12px 14px}
.sk-thinking span{width:7px;height:7px;border-radius:50%;background:#94a3b8;animation:sk-bounce 1.2s infinite ease-in-out}
.sk-thinking span:nth-child(2){animation-delay:.15s}
.sk-thinking span:nth-child(3){animation-delay:.3s}
@keyframes sk-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.sk-ai-note{font-size:11.5px;color:#94a3b8}
.sk-cards{display:flex;flex-direction:column;gap:8px;max-width:100%}
.sk-card{display:block;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;text-decoration:none;color:#1e293b;background:#fff;transition:border-color .15s,box-shadow .15s}
.sk-card:hover{border-color:#2563eb;box-shadow:0 4px 14px rgba(37,99,235,.12)}
.sk-card b{display:block;font-size:14px;color:#1e293b}
.sk-card span{display:block;font-size:12.5px;color:#64748b;margin-top:2px;line-height:1.45}
.sk-chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 14px 10px;flex:none}
.sk-chip{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:999px;padding:6px 12px;font-size:12.5px;font-family:inherit;cursor:pointer}
.sk-chip:hover{border-color:#2563eb;color:#2563eb}
.sk-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #e2e8f0;flex:none;background:#fff}
.sk-input{flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:10px;padding:9px 11px;font-size:14px;font-family:inherit;color:#1e293b}
.sk-send{border:0;border-radius:10px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-weight:600;font-size:14px;font-family:inherit;padding:9px 16px;cursor:pointer;flex:none}
.sk-foot{padding:7px 12px 9px;font-size:11px;color:#94a3b8;text-align:center;flex:none}
@media (max-width:760px){
  .sk-helper{right:14px;bottom:72px}
  .sk-helper-btn{width:46px;height:46px}
  .sk-helper-btn svg{width:23px;height:23px}
  .sk-helper-panel{bottom:60px}
}
@media (prefers-reduced-motion:reduce){
  .sk-helper-btn{transition:none}
  .sk-thinking span{animation:none}
}