/* Pip chat window. Brand: fern #3E7D0E, lime #78CC25, forest #23301C, mist #F1F9E8. */
.pip { --pip-fern: #3E7D0E; --pip-lime: #78CC25; --pip-dark: #23301C; --pip-mist: #F1F9E8; font-family: Figtree, system-ui, -apple-system, sans-serif; }
.pip-launch { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 950; width: 62px; height: 62px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--pip-fern); box-shadow: 0 10px 26px rgba(35,48,28,.35); cursor: pointer; overflow: hidden; transition: transform .2s ease; }
.pip-launch:hover { transform: translateY(-2px) scale(1.04); }
.pip-launch:focus-visible { outline: 3px solid var(--pip-lime); outline-offset: 3px; }
.pip.pip-raise .pip-launch { bottom: calc(86px + env(safe-area-inset-bottom)); }
.pip-ava { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.pip-ava svg, .pip-ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pip-tease { position: fixed; right: 92px; bottom: calc(30px + env(safe-area-inset-bottom)); z-index: 950; display: flex; align-items: center; gap: 8px; max-width: 250px; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.16); font-size: 15px; color: #2B2B2B; cursor: pointer; animation: pip-pop .35s cubic-bezier(.22,1,.36,1) both; }
.pip.pip-raise .pip-tease { bottom: calc(98px + env(safe-area-inset-bottom)); }
.pip-tease-x { order: 2; border: 0; background: none; font-size: 18px; line-height: 1; color: #8a8a8a; cursor: pointer; padding: 0 2px; }
.pip-panel { position: fixed; right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 951; display: flex; flex-direction: column; width: min(380px, calc(100vw - 24px)); height: min(600px, calc(100vh - 120px)); border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.22); overflow: hidden; animation: pip-pop .3s cubic-bezier(.22,1,.36,1) both; }
.pip-panel[hidden], .pip-tease[hidden] { display: none; }
.pip.pip-raise .pip-panel { bottom: calc(160px + env(safe-area-inset-bottom)); }
.pip-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--pip-dark); color: #fff; }
.pip-head .pip-ava { width: 40px; height: 40px; flex: none; border: 2px solid var(--pip-lime); }
.pip-head strong { display: block; font-size: 16px; }
.pip-head small { display: block; font-size: 12px; opacity: .78; }
.pip-clear { margin-left: auto; border: 0; background: none; color: #fff; cursor: pointer; opacity: .75; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.pip-clear:hover { opacity: 1; background: rgba(255,255,255,.12); }
.pip-close { border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; opacity: .8; padding: 4px; }
.pip-close:hover { opacity: 1; }
.pip-msgs { flex: 1; overflow-y: auto; padding: 16px; background: #F6F5FA; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: #2B2B2B; overscroll-behavior: contain; }
.pip-m { max-width: 86%; padding: 10px 13px; border-radius: 16px; word-wrap: break-word; }
.pip-m p { margin: 0 0 6px; } .pip-m p:last-child { margin-bottom: 0; }
.pip-m ul { margin: 4px 0 6px; padding-left: 18px; } .pip-m li { margin: 2px 0; }
.pip-bot { background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pip-bot a { color: var(--pip-fern); font-weight: 600; }
.pip-me { align-self: flex-end; background: var(--pip-fern); color: #fff; border-bottom-right-radius: 4px; }
.pip-hero { text-align: center; margin: -4px 0 2px; } .pip-hero img { width: 128px; height: 128px; animation: pip-pop .45s cubic-bezier(.22,1,.36,1) both; }
.pip-row { display: flex; align-items: flex-end; gap: 6px; } .pip-row .pip-m { max-width: calc(86% - 40px); }
.pip-pose { flex: none; width: 52px; height: 52px; margin-left: -6px; }
.pip-launch { background: var(--pip-mist); } .pip-head .pip-ava { background: var(--pip-mist); }
.pip-rate { margin-top: -6px; padding-left: 50px; } .pip-rate button { border: 0; background: none; cursor: pointer; font-size: 14px; opacity: .55; padding: 2px 4px; } .pip-rate button:hover { opacity: 1; } .pip-rate small { color: #8a8a8a; font-size: 12px; }
.pip-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pip-chips button { border: 1.5px solid var(--pip-fern); background: #fff; color: var(--pip-fern); border-radius: 999px; padding: 7px 13px; font: 600 14px/1.2 inherit; cursor: pointer; }
.pip-chips button:hover { background: var(--pip-mist); }
.pip-cards { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.pip-card { flex: none; width: 150px; border-radius: 14px; background: #fff; overflow: hidden; text-decoration: none; color: #2B2B2B; box-shadow: 0 1px 3px rgba(0,0,0,.08); scroll-snap-align: start; }
.pip-card img, .pip-noimg { display: block; width: 100%; height: 100px; object-fit: cover; background: var(--pip-mist); }
.pip-noimg { display: grid; place-items: center; font-size: 28px; }
.pip-card b { display: block; padding: 8px 10px 0; font-size: 13px; line-height: 1.3; max-height: 34px; overflow: hidden; }
.pip-card small { display: block; padding: 2px 10px 10px; font-size: 12px; color: #5A5A5A; }
.pip-typing { display: flex; gap: 4px; padding: 14px; width: 54px; }
.pip-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9aa58f; animation: pip-dot 1s infinite ease-in-out; }
.pip-typing span:nth-child(2) { animation-delay: .15s; } .pip-typing span:nth-child(3) { animation-delay: .3s; }
.pip-form { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid #ECEBF1; background: #fff; }
.pip-form input { flex: 1; min-width: 0; border: 1px solid #E6E5EC; background: #F6F5FA; border-radius: 999px; padding: 11px 15px; font: 16px/1.2 inherit; color: #2B2B2B; }
.pip-form input:focus { outline: 2px solid var(--pip-fern); outline-offset: 0; background: #fff; }
.pip-form button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--pip-lime); color: var(--pip-dark); font-size: 17px; cursor: pointer; }
.pip-form.is-busy button { opacity: .5; }
.pip-note { margin: 0; padding: 0 12px 4px; background: #fff; text-align: center; font-size: 11.5px; color: #8a8a8a; }
.pip .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes pip-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pip-dot { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
@media (max-width: 560px) {
	/* A bottom sheet, not full screen: the page stays visible above it, tap outside to close. */
	.pip-panel { right: 0; left: 0; bottom: 0; width: 100%; height: min(78dvh, 620px); border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); animation-name: pip-sheet; }
	.pip.pip-raise .pip-panel { bottom: 0; }
	.pip.is-open::before { content: ""; position: fixed; inset: 0; z-index: 950; background: rgba(35,48,28,.35); }
	.pip.is-open .pip-launch, .pip.is-open .pip-tease { display: none; }
	.pip-head { padding-top: 18px; position: relative; }
	.pip-head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255,255,255,.35); }
	.pip-hero img { width: 96px; height: 96px; }
	.pip-tease { right: 88px; max-width: calc(100vw - 110px); }
}
@keyframes pip-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Pip comes alive: pops in, gently bobs, waves now and then; poses hop in; thinking face tilts. */
.pip-launch { animation: pip-in .6s cubic-bezier(.34,1.56,.64,1) backwards; }
.pip-launch .pip-ava { animation: pip-bob 3.6s ease-in-out infinite; }
.pip-launch.pip-wave .pip-ava { animation: pip-wave 1s ease-in-out; transform-origin: 50% 85%; }
.pip.is-open .pip-launch .pip-ava { animation: none; }
.pip-row .pip-pose, .pip-boing { animation: pip-hop .5s cubic-bezier(.34,1.56,.64,1) backwards; }
.pip-row .pip-think { animation: pip-tilt 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes pip-in { from { transform: scale(0) rotate(-25deg); } }
@keyframes pip-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pip-wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
@keyframes pip-hop { 0% { transform: translateY(8px) scale(.6); opacity: 0; } 60% { transform: translateY(-3px) scale(1.08); opacity: 1; } }
@keyframes pip-tilt { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .pip-launch, .pip-launch .pip-ava, .pip-pose, .pip-boing { animation: none !important; } .pip-panel, .pip-tease, .pip-typing span { animation: none; } .pip-launch { transition: none; } }
@media print { .pip { display: none; } }

.pip[hidden] { display: none !important; }
.pip-hide { margin: 0; background: #fff; padding: 0 16px 12px; font-size: 11.5px; color: #6B7066; text-align: center; }
.pip-hide button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.pip-hide button:hover { color: #2F6B0A; }