/* Ask AI Jon. Reads the portfolio's tokens, with fallbacks so it works on any page. */
.aj-launch,.aj-panel{
  --aj-ink:var(--ink,#1d1d1f);--aj-soft:var(--ink-soft,#48484a);--aj-faint:var(--ink-faint,#6e6e73);
  --aj-line:var(--line,#d2d2d7);--aj-blue:var(--blue,#0071e3);--aj-teal:var(--teal,#007a6e);--aj-amber:var(--amber,#8a6d00);
  --aj-paper:#f3eadb;--aj-ease:var(--ease,cubic-bezier(.22,.61,.36,1));
  /* the site's own ground: warm cream with the hero's blue/teal/amber wash */
  --aj-cream:#fbfaf7;--aj-cream-2:#f2f5f4;--aj-warm-line:rgba(138,109,0,.18);
  --aj-wash:linear-gradient(135deg,rgba(0,113,227,.08),rgba(0,122,110,.07) 46%,rgba(138,109,0,.09));
  font-family:var(--f-body,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
}

/* launcher */
.aj-launch{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;
  border:1px solid var(--aj-warm-line);border-radius:999px;background:var(--aj-wash),rgba(251,250,247,.92);color:var(--aj-ink);cursor:pointer;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .2s var(--aj-ease),box-shadow .2s var(--aj-ease)}
.aj-launch:hover{transform:translateY(-3px);box-shadow:0 24px 48px -20px rgba(0,0,0,.5)}
.aj-launch:active{transform:scale(.97)}
.aj-launch:focus-visible,.aj-panel button:focus-visible,.aj-panel a:focus-visible{outline:3px solid var(--aj-blue);outline-offset:2px}
.aj-launch-face{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;
  background:linear-gradient(135deg,rgba(0,113,227,.16),rgba(0,122,110,.14) 50%,rgba(138,109,0,.18))}
.aj-launch-face svg{width:100%;height:100%;display:block}
.aj-launch-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left}
.aj-launch-text b{font-size:15px;font-weight:600}
.aj-launch-text small{font-family:var(--f-mono,ui-monospace,Menlo,monospace);font-size:11px;letter-spacing:.06em;color:var(--aj-faint)}
.aj-launch[hidden]{display:none}

/* panel */
.aj-panel{position:fixed;right:24px;bottom:24px;z-index:60;width:min(400px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 48px));
  display:flex;flex-direction:column;color:var(--aj-ink);border:1px solid var(--aj-warm-line);border-radius:20px;
  background:var(--aj-wash),linear-gradient(180deg,var(--aj-cream) 0%,#f8f7f4 55%,var(--aj-cream-2) 100%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.5);overflow:hidden;animation:aj-in .28s var(--aj-ease)}
.aj-panel[hidden]{display:none}
@keyframes aj-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.aj-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 16px 0 20px}
.aj-kicker{margin:0;font-family:var(--f-mono,ui-monospace,Menlo,monospace);font-size:11px;letter-spacing:.1em;color:var(--aj-teal);display:flex;align-items:center;gap:8px}
.aj-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--aj-teal)}
.aj-sub{margin:4px 0 0;font-size:13px;color:var(--aj-soft)}
.aj-tools{display:flex;gap:4px}
.aj-icon{width:36px;height:36px;display:inline-grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--aj-ink);
  font-size:24px;line-height:1;cursor:pointer;transition:background .15s var(--aj-ease)}
.aj-icon:hover{background:rgba(29,29,31,.07)}
.aj-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aj-icon svg path:first-child{fill:currentColor;fill-opacity:.12}

.aj-stage{height:170px;flex:none;margin:8px 16px 0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.7);
  background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.7),transparent 60%),
    linear-gradient(135deg,rgba(0,113,227,.14),rgba(0,122,110,.12) 46%,rgba(138,109,0,.16))}
.aj-stage svg{width:100%;height:100%;display:block}

/* face parts (shared by launcher and stage) */
.aj-body{fill:var(--aj-ink)}
.aj-collar{fill:var(--aj-blue)}
.aj-neck,.aj-skin,.aj-ear{fill:var(--aj-paper);stroke:var(--aj-ink);stroke-width:2.2}
.aj-hair{fill:var(--aj-ink)}
.aj-brows path{fill:none;stroke:var(--aj-ink);stroke-width:3.2;stroke-linecap:round}
.aj-eye{fill:var(--aj-ink)}
.aj-glint{fill:#fff}
.aj-cheek{fill:var(--aj-amber);opacity:.18}
.aj-nose{fill:none;stroke:var(--aj-ink);stroke-width:2;stroke-linecap:round;opacity:.55}
.aj-mouth-fill{fill:#3b1e1a}
.aj-teeth{fill:#fff}
.aj-lips{fill:none;stroke:var(--aj-ink);stroke-width:2.2;stroke-linejoin:round}

/* transcript */
.aj-log{flex:1 1 auto;min-height:96px;overflow-y:auto;padding:16px 20px 4px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.aj-msg p{margin:0;font-size:15px;line-height:1.5;overflow-wrap:break-word}
.aj-msg{max-width:88%}
.aj-ai{align-self:flex-start}
.aj-ai p{color:var(--aj-ink)}
.aj-user{align-self:flex-end;background:var(--aj-ink);color:#fff;padding:9px 14px;border-radius:16px 16px 4px 16px}
.aj-thinking p{color:var(--aj-faint);animation:aj-pulse 1.1s infinite}
@keyframes aj-pulse{50%{opacity:.35}}
.aj-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.aj-links a{font-size:13px;font-weight:600;text-decoration:none;color:var(--aj-blue);border:1px solid rgba(0,113,227,.28);background:rgba(232,240,254,.8);
  padding:6px 12px;border-radius:999px;transition:background .15s var(--aj-ease)}
.aj-links a:hover{background:#d6e6fd}

.aj-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 20px 8px}
.aj-chips[hidden]{display:none}
.aj-chip{font:inherit;font-size:13px;color:var(--aj-ink);background:rgba(255,255,255,.62);border:1px solid var(--aj-warm-line);border-radius:999px;padding:6px 12px;cursor:pointer;
  transition:border-color .15s var(--aj-ease),transform .15s var(--aj-ease)}
.aj-chip:hover{border-color:var(--aj-ink);transform:translateY(-1px)}

.aj-form{display:flex;gap:6px;align-items:center;padding:10px 12px 12px 16px;border-top:1px solid var(--aj-warm-line)}
.aj-input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 14px;border:1px solid var(--aj-warm-line);border-radius:12px;outline:none;color:var(--aj-ink);background:rgba(255,255,255,.75)}
.aj-input:focus{border-color:var(--aj-blue);box-shadow:0 0 0 3px rgba(0,113,227,.14)}
.aj-mic.is-on{background:rgba(0,122,110,.14);color:var(--aj-teal)}
.aj-send{font:inherit;font-weight:600;font-size:15px;border:0;border-radius:12px;padding:11px 18px;background:var(--aj-ink);color:#fff;cursor:pointer;transition:background .15s var(--aj-ease)}
.aj-send:hover{background:var(--aj-blue)}
.aj-send:disabled{opacity:.5;cursor:default;background:var(--aj-ink)}

@media (max-width:600px){
  .aj-launch{right:16px;bottom:16px}
  .aj-panel{right:16px;left:16px;bottom:16px;width:auto;max-height:calc(100dvh - 32px)}
  .aj-stage{height:140px}
}
@media (prefers-reduced-motion:reduce){
  .aj-panel{animation:none}
  .aj-launch,.aj-chip{transition:none}
}
