/* JBWhisper badges — the one mark every JBWhisper button or link carries, in its upper right corner.
   Two designs (see .claude/skills/jb-icon-style):
   - .jbw-badge          "Interview Copilot" with the copilot icon, where the element has room around it;
   - .jbw-badge.jbw-icon the copilot icon alone, where it has not — hovering or focusing the element shows the
                         words as a small toast.
   The element that carries it gets .jbw-host (position:relative). The static pages inline this file. */
.jbw-host{position:relative;overflow:visible}
.jbw-badge{position:absolute;top:-11px;right:-10px;z-index:3;display:inline-flex;align-items:center;gap:4px;height:21px;
  padding:0 8px 0 3px;border-radius:999px;background:#fff;border:1px solid #f1c7bb;box-shadow:0 3px 10px -4px rgba(18,18,17,.35);
  font:800 10.5px/1 Archivo,system-ui,sans-serif;letter-spacing:.01em;color:#c63d2a;white-space:nowrap;pointer-events:none;
  animation:jbwPop .42s cubic-bezier(.2,.8,.2,1) both}
.jbw-badge img{width:16px;height:16px;flex:none;display:block}
.jbw-badge.jbw-icon{padding:0;width:21px;justify-content:center;gap:0;top:-9px;right:-9px}
.jbw-badge.jbw-icon img{width:15px;height:15px}
.jbw-badge.jbw-icon::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);right:-4px;padding:6px 10px;border-radius:9px;
  background:#121211;color:#fff;font:700 11.5px/1.2 Archivo,system-ui,sans-serif;letter-spacing:0;white-space:nowrap;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(-4px) scale(.96);transform-origin:top right;
  transition:opacity .16s ease,transform .22s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.jbw-host:hover>.jbw-badge.jbw-icon::after,.jbw-host:focus-visible>.jbw-badge.jbw-icon::after{opacity:1;transform:none}
.jbw-host:hover>.jbw-badge img{animation:jbwWiggle .6s ease}
@keyframes jbwPop{0%{opacity:0;transform:translateY(4px) scale(.7)}100%{opacity:1;transform:none}}
@keyframes jbwWiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.jbw-badge,.jbw-host:hover>.jbw-badge img{animation:none}.jbw-badge.jbw-icon::after{transition:none}}

/* The badge takes the pointer now: resting on it for a second opens the intro card (jbw-badge.js). */
.jbw-badge{pointer-events:auto;cursor:help}
.jbw-intro{position:fixed;z-index:1000;display:grid;background:#fff;border:1px solid #e7e4df;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(18,18,17,.45),0 2px 6px rgba(18,18,17,.06);font:400 13.5px/1.5 Archivo,system-ui,sans-serif;color:#121211;
  opacity:0;transform:translateY(6px) scale(.97);transform-origin:top right;pointer-events:none;visibility:hidden;
  transition:opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s}
.jbw-intro.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1)}
.jbw-intro-film{aspect-ratio:8/5;background:#f6f5f3;border-bottom:1px solid #e7e4df}
.jbw-intro-film video{display:block;width:100%;height:100%;object-fit:cover}
.jbw-intro-body{padding:12px 16px 14px}
.jbw-intro-body b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.jbw-intro-body p{margin:3px 0 8px;color:#56544f}
.jbw-intro-more{font-weight:700;color:#c63d2a;text-decoration:none}
.jbw-intro-more:hover{text-decoration:underline;text-underline-offset:3px}
.jbw-intro-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.92);
  color:#121211;font-size:18px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.jbw-intro-x:focus-visible,.jbw-intro-more:focus-visible{outline:3px solid #e8543f;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.jbw-intro,.jbw-intro.on{transition:none}}