/* NOP Assistant. Own colours, dark by default; follows html[data-theme="light"]. Classes start with nopa-. */
#nopa{
  --a-bg:#131313;--a-surface:#1d1d1d;--a-surface-2:#262626;--a-text:#f3f3f3;--a-muted:#a9a9a9;--a-line:#2f2f2f;
  --a-accent:#ff7900;--a-ink:#ff9a3d;--a-on:#111;--a-shadow:0 24px 70px rgba(0,0,0,.55);
  --nopa-h:100vh;
  position:fixed;right:20px;bottom:20px;z-index:9500;transition:bottom .35s cubic-bezier(.2,.8,.2,1);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--a-text);font-size:15px;line-height:1.5;
}
html[data-theme="light"] #nopa{
  --a-bg:#ffffff;--a-surface:#f3f1ee;--a-surface-2:#e9e6e1;--a-text:#171717;--a-muted:#5c5c5c;--a-line:#dcd8d2;
  --a-accent:#ff7900;--a-ink:#b84e00;--a-on:#111;--a-shadow:0 24px 70px rgba(30,20,10,.25);
}
#nopa *,#nopa *::before,#nopa *::after{box-sizing:border-box}
#nopa button,#nopa input{font:inherit;color:inherit}
#nopa [hidden]{display:none!important}
.nopa-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* launcher */
/* At the bottom of a page the button steps up so the footer's "Top" link stays clickable (see assistant.js). */
#nopa.is-lifted:not(.is-open){bottom:84px}
.nopa-launch{position:relative;display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border:1px solid var(--a-line);border-radius:999px;background:var(--a-bg);color:var(--a-text);cursor:pointer;box-shadow:var(--a-shadow);transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .25s;animation:nopa-pop .7s cubic-bezier(.2,.9,.3,1.25) .9s backwards}
/* a soft ring that pulses now and then, to say "I am here" without shouting */
.nopa-launch::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(255,121,0,.5);animation:nopa-ring 3.6s ease-out 2.6s infinite}
.nopa-launch:hover{transform:translateY(-3px) scale(1.05);border-color:var(--a-accent);box-shadow:var(--a-shadow),0 0 0 4px rgba(255,121,0,.16),0 10px 30px rgba(255,121,0,.28)}
.nopa-launch:hover::before,.nopa-launch:focus-visible::before{animation:none}
.nopa-launch:active{transform:scale(.97);transition-duration:.08s}
.nopa-launch:focus-visible,.nopa-ib:focus-visible,.nopa-chip:focus-visible,.nopa-link:focus-visible,.nopa-hand:focus-visible,.nopa-send:focus-visible,.nopa-log:focus-visible{outline:2px solid var(--a-accent);outline-offset:2px}
.nopa-launch-t{font-weight:600;font-size:15px;transition:color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.nopa-launch:hover .nopa-launch-t{color:var(--a-ink);transform:translateX(2px)}
.nopa-face{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#ff9a3d,#ff6a00);overflow:hidden;animation:nopa-float 3.8s ease-in-out 1.8s infinite}
.nopa-face img{width:78%;height:78%;object-fit:contain;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nopa-launch:hover .nopa-face{animation:nopa-wiggle .7s ease-in-out}
.nopa-launch:hover .nopa-face img{transform:scale(1.12)}
.nopa-face .nopa-i{color:#111}
.nopa-face-s{width:34px;height:34px;animation:none}
#nopa.is-open .nopa-launch{display:none}
@keyframes nopa-pop{0%{opacity:0;transform:translateY(24px) scale(.5)}100%{opacity:1;transform:none}}
@keyframes nopa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes nopa-wiggle{0%{transform:rotate(0)}20%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
@keyframes nopa-ring{0%{box-shadow:0 0 0 0 rgba(255,121,0,.5)}70%,100%{box-shadow:0 0 0 16px rgba(255,121,0,0)}}

/* panel */
.nopa-panel{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;width:400px;max-width:calc(100vw - 24px);height:min(660px,calc(100vh - 40px));background:var(--a-bg);border:1px solid var(--a-line);border-radius:20px;box-shadow:var(--a-shadow);overflow:hidden;animation:nopa-in .22s ease-out}
@keyframes nopa-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.nopa-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:linear-gradient(135deg,#ff8a1f,#ee6400);color:#111}
.nopa-head .nopa-face{background:#fff3e6}
.nopa-head-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.nopa-head-t strong{font-size:16px;font-weight:700}
.nopa-head-t span{font-size:12.5px;opacity:.85}
.nopa-ib{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.28);color:#111;cursor:pointer;transition:background .2s}
.nopa-ib .nopa-i{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nopa-ib:hover{background:rgba(255,255,255,.5)}
.nopa-ib:hover .nopa-i{transform:rotate(90deg)}
.nopa-ib[aria-label^="Start"]:hover .nopa-i{transform:rotate(-180deg)}

/* conversation */
.nopa-log{position:relative;flex:1;min-height:0;overflow-y:auto;padding:16px 14px 6px;display:flex;flex-direction:column;gap:12px;scroll-behavior:auto;overscroll-behavior:contain}
.nopa-row{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.nopa-u{justify-content:flex-end}
.nopa-col{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:calc(100% - 42px)}
.nopa-bubble{padding:10px 14px;border-radius:16px;overflow-wrap:anywhere;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}
.nopa-b .nopa-bubble:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.nopa-u .nopa-bubble:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,121,0,.3)}
.nopa-b .nopa-bubble{background:var(--a-surface);border-bottom-left-radius:5px}
.nopa-u .nopa-bubble{max-width:86%;background:var(--a-accent);color:var(--a-on);border-bottom-right-radius:5px;font-weight:500}
.nopa-bubble ul{margin:8px 0 6px;padding:0;list-style:none;display:grid;gap:7px}
.nopa-bubble li{position:relative;padding-left:16px}
.nopa-bubble li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--a-accent)}
.nopa-bubble b{font-weight:650}
.nopa-bubble i{color:var(--a-muted);font-size:13.5px}

/* links, handoff, chips */
.nopa-links{display:grid;gap:6px}
.nopa-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--a-line);border-radius:12px;background:var(--a-bg);color:var(--a-text);text-decoration:none;font-weight:600;font-size:14px;transition:border-color .2s,background .2s,transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.nopa-link:hover{border-color:var(--a-accent);background:var(--a-surface);transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,121,0,.16)}
.nopa-link:active{transform:scale(.98)}
.nopa-link .nopa-i{color:var(--a-ink);width:16px;height:16px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.nopa-link:hover .nopa-i{transform:translateX(4px)}
.nopa-hand{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--a-accent);border-radius:12px;background:transparent;color:var(--a-text);font-weight:600;font-size:14px;cursor:pointer;text-align:left}
.nopa-hand{transition:background .2s,transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.nopa-hand:hover{background:var(--a-surface);transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,121,0,.16)}
.nopa-hand:active{transform:scale(.98)}
.nopa-hand .nopa-i{color:var(--a-ink)}
.nopa-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px 42px}
.nopa-chip{padding:8px 13px;border:1px solid var(--a-accent);border-radius:999px;background:transparent;color:var(--a-ink);font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;line-height:1.3;transition:background .18s,color .18s,transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.nopa-chip:hover{background:var(--a-accent);color:var(--a-on);transform:translateY(-2px) scale(1.03);box-shadow:0 6px 16px rgba(255,121,0,.32)}
.nopa-chip:active{transform:scale(.96)}

/* input */
.nopa-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--a-line);background:var(--a-bg)}
.nopa-input{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--a-line);border-radius:999px;background:var(--a-surface);color:var(--a-text);font-size:16px;outline:none}
.nopa-input::placeholder{color:var(--a-muted)}
.nopa-input:focus{border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(255,121,0,.18)}
.nopa-send{display:grid;place-items:center;flex:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--a-accent);color:var(--a-on);cursor:pointer;transition:transform .15s,background .15s}
.nopa-send .nopa-i{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.nopa-send:hover{transform:scale(1.08);background:#ff8b21;box-shadow:0 6px 16px rgba(255,121,0,.4)}
.nopa-send:hover .nopa-i{transform:translate(2px,-2px)}
.nopa-send:active{transform:scale(.94)}
.nopa-note{margin:0;padding:0 14px 10px;color:var(--a-muted);font-size:12px;text-align:center}

/* live messages: slide in, then their list items, buttons and suggestions follow one by one.
   fill-mode is 'backwards' so hover effects keep working after the animation ends. */
.nopa-new .nopa-bubble{animation:nopa-in-b .34s cubic-bezier(.2,.8,.2,1) backwards;transform-origin:left bottom}
.nopa-u.nopa-new .nopa-bubble{animation-name:nopa-in-u;transform-origin:right bottom}
.nopa-new .nopa-bubble li{animation:nopa-rise .38s ease-out backwards;animation-delay:calc(.14s + var(--i,0) * .08s)}
.nopa-new .nopa-link,.nopa-new .nopa-hand{animation:nopa-rise .38s ease-out backwards;animation-delay:calc(.22s + var(--i,0) * .08s)}
.nopa-chips.nopa-new .nopa-chip{animation:nopa-rise .38s ease-out backwards;animation-delay:calc(.3s + var(--i,0) * .07s)}
@keyframes nopa-in-b{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes nopa-in-u{from{opacity:0;transform:translateY(8px) translateX(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes nopa-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nopa-typing .nopa-bubble{display:flex;align-items:center;gap:5px;padding:15px 16px;animation:nopa-in-b .25s ease-out backwards}
.nopa-dot{width:7px;height:7px;border-radius:50%;background:var(--a-muted);animation:nopa-dot 1s ease-in-out infinite}
.nopa-dot:nth-child(2){animation-delay:.16s}
.nopa-dot:nth-child(3){animation-delay:.32s}
@keyframes nopa-dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

/* phones: a sheet that follows the visible area (the keyboard) */
@media(max-width:560px){
  #nopa{right:14px;bottom:14px}
  #nopa.is-lifted:not(.is-open){bottom:104px}
  .nopa-launch-t{display:none}
  .nopa-launch{padding:5px}
  #nopa.is-open{right:0;bottom:0;left:0}
  .nopa-panel{left:0;right:0;width:100%;max-width:none;height:min(var(--nopa-h),100dvh);border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .nopa-panel,.nopa-launch,.nopa-launch::before,.nopa-face,.nopa-launch:hover .nopa-face{animation:none!important}
  #nopa,.nopa-launch,.nopa-launch-t,.nopa-face img,.nopa-send,.nopa-chip,.nopa-link{transition:none!important}
  .nopa-launch:hover,.nopa-launch:hover .nopa-launch-t,.nopa-launch:hover .nopa-face img,.nopa-send:hover{transform:none}
  .nopa-new .nopa-bubble,.nopa-new .nopa-bubble li,.nopa-new .nopa-link,.nopa-new .nopa-hand,.nopa-chips.nopa-new .nopa-chip,.nopa-dot{animation:none!important}
  .nopa-bubble,.nopa-link,.nopa-hand,.nopa-chip,.nopa-ib .nopa-i,.nopa-link .nopa-i,.nopa-send .nopa-i{transition:none!important}
  .nopa-b .nopa-bubble:hover,.nopa-u .nopa-bubble:hover,.nopa-link:hover,.nopa-hand:hover,.nopa-chip:hover,.nopa-link:hover .nopa-i,.nopa-ib:hover .nopa-i,.nopa-send:hover .nopa-i{transform:none}
}
@media print{#nopa{display:none!important}}