/* highlight-to-ask — kid-friendly, private (nothing is stored or shown to others) */

#askPill{
  position:absolute;z-index:60;display:none;align-items:center;gap:7px;
  transform:translate(-50%,10px);
  font-family:var(--font-hand);font-size:17px;color:var(--ink);
  background:var(--gold);border:2px solid var(--ink);border-radius:99px;
  padding:6px 15px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);
  animation:pillpop .18s ease;white-space:nowrap;
}
#askPill:hover{background:var(--red);color:#fff}
#askPill .spark{font-size:15px}
@keyframes pillpop{from{opacity:0;transform:translate(-50%,2px) scale(.9)}to{opacity:1;transform:translate(-50%,10px) scale(1)}}

#askPanel{
  position:fixed;z-index:70;right:18px;bottom:18px;width:min(390px,calc(100vw - 36px));
  background:var(--card);border:2px solid var(--ink);border-radius:20px;
  box-shadow:6px 6px 0 var(--ink);display:none;overflow:hidden;
}
#askPanel.open{display:block;animation:panelup .22s ease}
@keyframes panelup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.ap-head{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--purple);color:#fff;padding:10px 16px;border-bottom:2px solid var(--ink);
}
.ap-head .t{font-family:var(--font-display);font-weight:800;font-size:16px}
.ap-close{background:none;border:none;color:#fff;font-size:17px;cursor:pointer;padding:2px 6px}
.ap-body{padding:14px 16px 16px}
.ap-quote{
  display:none;font-size:13.5px;color:var(--ink-soft);background:var(--gold-soft);
  border-left:4px solid var(--gold);border-radius:8px;padding:8px 11px;margin-bottom:10px;
  max-height:80px;overflow:auto;
}
#askInput{
  width:100%;min-height:64px;resize:vertical;font-family:var(--font-body);font-size:15px;
  border:2px solid var(--ink);border-radius:12px;padding:10px 12px;background:var(--paper);
  color:var(--ink);outline:none;
}
#askInput:focus{box-shadow:2px 2px 0 var(--teal)}
.ap-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.ap-hint{font-size:12px;color:var(--ink-faint);line-height:1.35}
.ap-status{display:none;align-items:center;gap:9px;margin-top:12px;font-size:13.5px;color:var(--ink-soft)}
.ap-status .dot{
  width:11px;height:11px;border-radius:50%;background:var(--teal);flex-shrink:0;
  animation:blink 1s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.ap-answer{
  display:none;margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink);
  background:var(--teal-soft);border:2px solid var(--teal);border-radius:12px;padding:11px 13px;
  max-height:280px;overflow:auto;
}