/* ---------------------------------------------------------------
   Cook Guy — corner mascot + chat.
   Uses the site tokens from site.css (--ink --paper --safety …).
   House rule: heroes stay still. This lives in the corner, not the hero.
   --------------------------------------------------------------- */

#cookguy{
  position:fixed; right:22px; bottom:18px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  font-family:var(--sans,'IBM Plex Sans',sans-serif);
}
#cookguy[hidden]{display:none}

/* ---- the guy ---- */
.cg-guy{
  position:relative; width:106px; height:150px; padding:0; border:0; background:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent; display:block;
  filter:drop-shadow(0 8px 16px rgba(20,32,46,.22));
}
.cg-guy:focus-visible{outline:3px solid var(--safety,#F3671B); outline-offset:6px; border-radius:6px}
.cg-guy img,.cg-guy svg{width:100%;height:100%;display:block;object-fit:contain;object-position:bottom center}
.cg-guy img{position:absolute;inset:0;opacity:0}
.cg-guy img.on{opacity:1}
.cg-guy .cg-svg{transition:transform .18s ease}
.cg-guy:hover .cg-svg,.cg-guy:hover img{transform:translateY(-3px)}
#cookguy.open .cg-guy{width:78px;height:110px}

/* the SVG stand-in: only the arm group moves, same as the 3-frame art */
#cg-arm{transition:transform .13s cubic-bezier(.4,1.4,.5,1)}

/* a small nudge so he reads as alive even when nobody scrolls */
@keyframes cg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#cookguy:not(.open) .cg-guy{animation:cg-bob 5.5s ease-in-out infinite}

/* ---- speech bubble ---- */
.cg-bubble{
  position:relative; max-width:250px; background:#fff; color:var(--ink,#14202E);
  border:2px solid var(--ink,#14202E); padding:13px 32px 13px 15px;
  font-size:15px; line-height:1.45; box-shadow:5px 5px 0 rgba(20,32,46,.14);
  opacity:0; transform:translateY(8px) scale(.96); pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,1.2,.3,1);
}
.cg-bubble.on{opacity:1;transform:none;pointer-events:auto}
.cg-bubble::after{
  content:""; position:absolute; right:34px; bottom:-11px;
  border:11px solid transparent; border-top-color:var(--ink,#14202E); border-bottom:0;
}
.cg-bubble::before{
  content:""; position:absolute; right:37px; bottom:-7px; z-index:1;
  border:8px solid transparent; border-top-color:#fff; border-bottom:0;
}
.cg-bubble .cg-name{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono,'IBM Plex Mono',monospace); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--safety,#F3671B); font-weight:600;
  margin-bottom:5px;
}
.cg-bubble .cg-name span{font-size:13px;letter-spacing:0;line-height:1}
.cg-bubble b{font-family:var(--disp,'Barlow Condensed',sans-serif);text-transform:uppercase;font-size:19px;letter-spacing:.02em;display:block;line-height:1.1;margin-bottom:2px}
.cg-x{
  position:absolute; top:4px; right:5px; width:24px; height:24px; border:0; background:none;
  cursor:pointer; color:#7C8A98; font-size:17px; line-height:1; padding:0;
}
.cg-x:hover{color:var(--ink,#14202E)}
.cg-caret{border-right:2px solid var(--safety,#F3671B);animation:cg-blink .9s steps(1) infinite;margin-left:1px}
@keyframes cg-blink{50%{border-color:transparent}}

/* ---- panel ---- */
.cg-panel{
  width:378px; max-width:calc(100vw - 32px); height:min(560px,calc(100vh - 130px));
  background:var(--paper,#F6F8F7); border:2px solid var(--ink,#14202E);
  box-shadow:0 24px 60px rgba(20,32,46,.28); display:none; flex-direction:column; overflow:hidden;
}
#cookguy.open .cg-panel{display:flex; animation:cg-in .26s cubic-bezier(.2,1,.3,1)}
@keyframes cg-in{from{opacity:0;transform:translateY(14px)}}

.cg-head{background:var(--ink,#14202E);color:#fff;padding:13px 15px;display:flex;align-items:center;gap:11px;flex:none}
.cg-head .cg-mini{width:36px;height:36px;flex:none;background:var(--safety,#F3671B);border-radius:50%;overflow:hidden;display:grid;place-items:end center}
.cg-head .cg-mini img,.cg-head .cg-mini svg{width:132%;height:132%;object-fit:contain;object-position:bottom center;transform:translateY(9%)}
.cg-head h3{font-family:var(--disp,'Barlow Condensed',sans-serif);font-size:22px;text-transform:uppercase;line-height:1;letter-spacing:.02em;margin:0;color:#fff;display:flex;align-items:center;gap:6px}
.cg-head h3 .cg-cookie{font-size:17px;line-height:1;transform:translateY(-1px)}
.cg-head p{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9FB0C2;margin:3px 0 0}
.cg-head .cg-close{margin-left:auto;background:none;border:0;color:#9FB0C2;font-size:22px;line-height:1;cursor:pointer;padding:2px 4px}
.cg-head .cg-close:hover{color:#fff}

.cg-log{flex:1;overflow-y:auto;padding:16px 15px 6px;display:flex;flex-direction:column;gap:11px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.cg-log{scroll-behavior:auto}}
.cg-msg{max-width:86%;font-size:15px;line-height:1.5;padding:10px 13px;border:1px solid var(--line,#C4CBC8);background:#fff}
.cg-msg.me{align-self:flex-end;background:var(--ink,#14202E);color:#fff;border-color:var(--ink,#14202E)}
.cg-msg.him{align-self:flex-start;border-left:3px solid var(--safety,#F3671B)}
.cg-msg a{color:var(--safety,#F3671B);text-decoration:underline;text-underline-offset:2px}
.cg-msg.me a{color:#FFC49A}
.cg-msg p+p{margin-top:8px}
.cg-msg ul{margin:6px 0 0 17px}
.cg-msg li{margin:3px 0}
.cg-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8A97A4;margin-right:4px;animation:cg-d 1.1s ease-in-out infinite}
.cg-dots span:nth-child(2){animation-delay:.16s}.cg-dots span:nth-child(3){animation-delay:.32s}
@keyframes cg-d{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.cg-chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 15px 12px}
.cg-chip{
  font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11.5px;letter-spacing:.04em;
  background:#fff;border:1px solid var(--line,#C4CBC8);padding:7px 11px;cursor:pointer;color:var(--ink,#14202E);
}
.cg-chip:hover{border-color:var(--safety,#F3671B);color:var(--safety,#F3671B)}

.cg-form{border-top:1px solid var(--line,#C4CBC8);background:#fff;padding:10px;display:flex;gap:8px;flex:none;align-items:flex-end}
.cg-form textarea{
  flex:1;resize:none;border:1px solid var(--line,#C4CBC8);padding:9px 11px;font:inherit;font-size:15px;
  line-height:1.4;max-height:96px;background:var(--paper,#F6F8F7);color:var(--ink,#14202E);border-radius:0;
}
.cg-form textarea:focus{outline:2px solid var(--safety,#F3671B);outline-offset:-1px}
.cg-send{
  flex:none;background:var(--safety,#F3671B);color:#fff;border:0;width:42px;height:40px;cursor:pointer;
  display:grid;place-items:center;
}
.cg-send:hover{background:#D5560F}
.cg-send:disabled{background:#B9C2C8;cursor:default}
.cg-legal{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:9.5px;letter-spacing:.05em;color:#7C8A98;text-align:center;padding:0 12px 9px;background:#fff;text-transform:uppercase}

/* inline lead card */
.cg-lead{align-self:stretch;max-width:100%;background:#fff;border:2px solid var(--ink,#14202E);padding:13px}
.cg-lead h4{font-family:var(--disp,'Barlow Condensed',sans-serif);text-transform:uppercase;font-size:20px;line-height:1;margin:0 0 3px}
.cg-lead p{font-size:13px;color:#4A5A6A;margin:0 0 10px}
.cg-lead input{width:100%;border:1px solid var(--line,#C4CBC8);padding:8px 10px;font:inherit;font-size:14px;margin-bottom:7px;background:var(--paper,#F6F8F7)}
.cg-lead input:focus{outline:2px solid var(--safety,#F3671B);outline-offset:-1px}
.cg-lead button{width:100%;background:var(--ink,#14202E);color:#fff;border:0;padding:10px;cursor:pointer;font-family:var(--disp,'Barlow Condensed',sans-serif);font-size:18px;text-transform:uppercase;letter-spacing:.05em}
.cg-lead button:hover{background:var(--safety,#F3671B)}
.cg-lead .hp{position:absolute;left:-9999px}
.cg-done{font-size:14px;color:var(--ink,#14202E)}
.cg-done b{font-family:var(--disp,'Barlow Condensed',sans-serif);text-transform:uppercase;font-size:17px;display:block}

/* ---- mobile ---- */
@media (max-width:560px){
  #cookguy{right:12px;bottom:12px;left:12px;align-items:flex-end}
  .cg-guy{width:84px;height:118px}
  #cookguy.open .cg-guy{display:none}
  .cg-panel{width:100%;height:min(76vh,540px)}
  .cg-bubble{max-width:min(250px,calc(100vw - 40px))}
}
@media (max-width:880px) and (min-width:561px){
  #cookguy{right:14px;bottom:14px}
  .cg-guy{width:92px;height:130px}
}

/* menu-open on mobile nav shouldn't fight the mascot */
body.menu-open #cookguy{display:none}

/* ---- reduced motion: he holds still, per the house rule ---- */
@media (prefers-reduced-motion:reduce){
  #cookguy:not(.open) .cg-guy{animation:none}
  #cg-arm{transition:none}
  .cg-bubble{transition:none}
  .cg-dots span{animation:none;opacity:.5}
  #cookguy.open .cg-panel{animation:none}
}