/* Pip character: 3D-rendered clips on a transparent canvas (loaded after pages.css / pip-enhancements.css) */
.pip-root{right:18px;bottom:12px}
.pip-btn{width:150px;height:150px}
.pip-character-wrap{position:relative;width:150px;height:150px;animation:none;filter:none;overflow:visible}
.pip-3d-stage{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0}
.pip-char-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .25s ease;filter:drop-shadow(0 6px 10px rgba(40,30,80,.18))}
.pip-char-ready .pip-char-canvas{opacity:1}
.pip-char-ready .pip-fallback-art{opacity:0;transition:opacity .2s}
/* soft contact shadow so Pip stands on the page */
.pip-character-wrap::after{content:"";position:absolute;left:24%;right:24%;bottom:5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,30,80,.28),rgba(40,30,80,0));z-index:-1;pointer-events:none}
.pip-btn{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.pip-btn:hover{transform:translateY(-4px) scale(1.04)}
.pip-btn-t{right:104px;bottom:44px}
/* chat open: Pip stands beside the panel, a little larger */
.pip-root.is-open .pip-btn{width:176px;height:176px;right:-6px;bottom:-4px}
.pip-root.is-open .pip-character-wrap{width:176px;height:176px}
.pip-panel{right:138px;bottom:20px}
@media (max-width:900px){
  .pip-root.is-open .pip-btn{width:132px;height:132px}
  .pip-root.is-open .pip-character-wrap{width:132px;height:132px}
  .pip-panel{right:82px}
}
@media (max-width:520px){
  .pip-root{right:6px;bottom:6px}
  .pip-btn{width:116px;height:116px}.pip-character-wrap{width:116px;height:116px}
  /* open: panel is full width; Pip perches on its top-right edge */
  .pip-root.is-open .pip-panel{position:fixed;right:8px;bottom:10px;width:calc(100vw - 16px);height:min(66vh,620px)}
  .pip-root.is-open .pip-btn{position:fixed;right:6px;bottom:calc(min(66vh,620px) - 4px);width:112px;height:112px}
  .pip-root.is-open .pip-character-wrap{width:112px;height:112px}
  .pip-root.is-open .pip-character-wrap::after{display:none}
}
@media (prefers-reduced-motion:reduce){.pip-char-canvas{transition:none}}

/* v65: procedural performances (dance / sing / confetti) and the sound toggle */
.pip-note{position:absolute;left:50%;bottom:58%;margin-left:-8px;font-weight:800;line-height:1;pointer-events:none;opacity:0;z-index:4;text-shadow:0 1px 2px rgba(255,255,255,.9);animation:pipNote var(--d,3s) ease-out forwards}
@keyframes pipNote{0%{opacity:0;transform:translate(var(--x0,0),12px) scale(.6) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,30px),-130px) scale(1.15) rotate(var(--r,20deg))}}
.pip-dancing .pip-char-canvas{animation:pipDance .66s ease-in-out infinite;transform-origin:50% 92%}
@keyframes pipDance{0%,100%{transform:translateY(0) rotate(-6deg) scale(1.03,.96)}25%{transform:translateY(-14px) rotate(0) scale(.97,1.05)}50%{transform:translateY(0) rotate(6deg) scale(1.03,.96)}75%{transform:translateY(-14px) rotate(0) scale(.97,1.05)}}
.pip-singing .pip-char-canvas{animation:pipSing 1.8s ease-in-out infinite;transform-origin:50% 92%}
@keyframes pipSing{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px) scale(1.02)}}
.pip-sound{border:1px solid #d8dfd1;background:#f6f7f0;color:#345441;border-radius:20px;padding:5px 9px;font-size:13px;line-height:1;cursor:pointer;flex:0 0 auto}
.pip-sound:hover,.pip-sound:focus-visible{background:#e7eddf}
.pip-sound[aria-pressed="false"]{opacity:.6}
@media (prefers-reduced-motion:reduce){.pip-dancing .pip-char-canvas,.pip-singing .pip-char-canvas{animation:none}.pip-note{animation-duration:.01s}}

/* v65.1: calm-music player inside the chat panel (one looped YouTube video) */
.pip-music-card{flex:0 0 auto;padding:8px 12px 10px;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(124,100,176,.16)}
.pip-music-card[hidden]{display:none}
.pip-music-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;color:#55457d;font-weight:700}
.pip-music-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pip-music-pp,.pip-music-open,.pip-music-stop{border:1px solid rgba(124,100,176,.35);background:#fff;color:#55457d;border-radius:14px;padding:4px 11px;font-size:11px;font-weight:700;cursor:pointer}
.pip-music-pp:hover,.pip-music-pp:focus-visible,.pip-music-open:hover,.pip-music-open:focus-visible,.pip-music-stop:hover,.pip-music-stop:focus-visible{background:#735ca9;color:#fff}
.pip-music-body iframe{display:block;width:100%;height:200px;border:0;border-radius:10px;background:#000;pointer-events:none}  /* no clicks reach the clip, so its YouTube logo / title links cannot be used */
.pip-vibing .pip-char-canvas{animation:pipSing 3.4s ease-in-out infinite;transform-origin:50% 92%}
@media (prefers-reduced-motion:reduce){.pip-vibing .pip-char-canvas{animation:none}}

/* v67: minimise the chat, keep the music playing */
.pip-min{margin-left:auto;border:0;background:transparent;color:#fff8e8;font-size:24px;line-height:1;cursor:pointer;padding:4px 8px;flex:0 0 auto}
.pip-min+.pip-close{margin-left:0}
.pip-min:hover,.pip-min:focus-visible{background:rgba(255,255,255,.18);border-radius:8px}
.pip-music-open{display:none}
.pip-root .pip-panel.is-min{height:auto;width:min(340px,calc(100vw - 170px));right:140px;bottom:46px;border-radius:18px;animation:none}
.pip-panel.is-min .pip-head,.pip-panel.is-min .pip-log,.pip-panel.is-min .pip-chips,.pip-panel.is-min .pip-form{display:none}
.pip-panel.is-min .pip-music-card{border-bottom:0;padding:9px 12px}
.pip-panel.is-min .pip-music-bar{margin-bottom:0}
.pip-panel.is-min .pip-music-open{display:inline-block}
/* the clip stays loaded (so the music never restarts) but is clipped to nothing while the chat is minimised */
.pip-panel.is-min .pip-music-body{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
@media (max-width:520px){.pip-root .pip-panel.is-min{right:96px;bottom:28px;width:calc(100vw - 118px)}}