/* ==========================================================================
   Silvy: the talking printer chat mascot (bottom-right corner)
   Markup: inc/mascot-chat.php   Behaviour: assets/js/mascot.js
   ========================================================================== */

.pc { --pc-ink: var(--psp-ink, #0b1f33); --pc-blue: var(--psp-primary, #0f4c81); --pc-yellow: var(--psp-accent, #ffb100); --pc-paper: var(--psp-paper, #fbf8f2); --pc-line: var(--psp-line, #e4ddd0); --px: 0; --py: 0;
	position: fixed; right: 20px; bottom: 20px; z-index: 9998; font-family: var(--psp-font-body, system-ui, sans-serif); color: var(--pc-ink); }
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
body.psp-modal-active .pc { display: none; }
.pc.is-open { z-index: 10001; }
.pc [hidden] { display: none !important; }
.pc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the printer ---------- */
.pc-mascot { display: block; width: 100%; height: auto; overflow: visible; }
.pc-body, .pc-paper, .pc-eye, .pc-talk { transform-box: fill-box; transform-origin: center; }
/* the waving arm: tucked away until she greets someone */
.pc-wavelines { opacity: 0; }
.is-wave .pc-wavelines { animation: pc-lines .42s ease-in-out .35s infinite alternate; }
@keyframes pc-lines { from { opacity: 0; } to { opacity: 1; } }
.pc-arm { opacity: 0; transform-box: view-box; transform-origin: 103px 68px; transform: rotate(35deg) scale(.7); transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.is-wave .pc-arm { opacity: 1; transform: rotate(0); animation: pc-wave .42s ease-in-out .35s infinite alternate; }
@keyframes pc-wave { from { transform: rotate(-14deg); } to { transform: rotate(26deg); } }
.pc-paper { animation: pc-out 6s ease-in-out infinite; }
.pc-eye { animation: pc-blink 4s infinite; }
.pc-pupil { transform: translate(calc(var(--px) * 2px), calc(var(--py) * 1.6px)); transition: transform .12s linear; }
.pc-talk { opacity: 0; transform-origin: 50% 40%; }
.is-talking .pc-smile { opacity: 0; }
.is-talking .pc-talk { opacity: 1; animation: pc-mouth .24s ease-in-out infinite alternate; }
.is-talking .pc-body { animation: pc-nod .5s ease-in-out infinite; }
.is-talking .pc-paper { animation: pc-out-talk 1.2s ease-in-out infinite; }
@keyframes pc-out { 0%, 12% { transform: translateY(0); } 28%, 62% { transform: translateY(26px); } 78%, 100% { transform: translateY(0); } }
@keyframes pc-out-talk { 0%, 100% { transform: translateY(14px); } 50% { transform: translateY(2px); } }
@keyframes pc-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes pc-mouth { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes pc-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

/* ---------- launcher ---------- */
.pc-launch { position: relative; display: block; width: 78px; height: 78px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffff, #e6f3fb 75%); cursor: pointer; box-shadow: 0 12px 28px rgba(11, 31, 51, .30), 0 2px 8px rgba(11, 31, 51, .16); transition: transform .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
.pc-launch:hover { transform: scale(1.06); box-shadow: 0 16px 34px rgba(11, 31, 51, .34), 0 3px 10px rgba(11, 31, 51, .18); }
.pc-launch:focus-visible { outline: 3px solid var(--pc-yellow); outline-offset: 3px; }
.pc-mascot--launch { position: absolute; left: 50%; top: 52%; width: 66px; transform: translate(-50%, -50%); animation: pc-bob 3s ease-in-out infinite; }
@keyframes pc-bob { 0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); } 50% { transform: translate(-50%, -57%) rotate(4deg); } }
.is-open .pc-mascot--launch { animation: none; }

.pc-badge { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #ec008c; border: 2.5px solid #fff; display: none; }
.has-badge:not(.is-open) .pc-badge { display: block; animation: pc-ping 1.8s ease-out infinite; }
@keyframes pc-ping { 0% { box-shadow: 0 0 0 0 rgba(236, 0, 140, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(236, 0, 140, 0); } }

.is-hello .pc-launch { animation: pc-hop 1.1s cubic-bezier(.3, 1.4, .5, 1) 2; }
.is-hello .pc-paper { animation: pc-out-talk .9s ease-in-out infinite; }
@keyframes pc-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-14px) rotate(-5deg); } 55% { transform: translateY(0) rotate(3deg); } 75% { transform: translateY(-5px); } }

/* ---------- teaser bubble ---------- */
.pc-tease { position: absolute; right: 90px; bottom: 20px; width: max-content; max-width: 230px; padding: 10px 30px 10px 14px; background: #fff; border: 2px solid var(--pc-ink); border-radius: 16px; font: 700 14px/1.35 var(--psp-font-display, system-ui, sans-serif); cursor: pointer; box-shadow: 0 8px 20px rgba(11, 31, 51, .18); animation: pc-pop .45s cubic-bezier(.3, 1.5, .5, 1) both; transform-origin: right center; }
.pc-tease::before { content: ""; position: absolute; right: -8px; bottom: 16px; width: 12px; height: 12px; background: #fff; border-right: 2px solid var(--pc-ink); border-top: 2px solid var(--pc-ink); transform: rotate(45deg); }
.pc-tease-x { position: absolute; right: 4px; top: 3px; width: 22px; height: 22px; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--psp-muted, #5b6b7a); cursor: pointer; }
@keyframes pc-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

/* ---------- chat panel ---------- */
.pc-panel { position: absolute; right: 0; bottom: 92px; width: 372px; height: min(560px, calc(100vh - 140px)); height: min(560px, calc(100dvh - 140px)); display: flex; flex-direction: column; background: var(--pc-paper); border: 2.5px solid var(--pc-ink); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(11, 31, 51, .35); transform-origin: right bottom; animation: pc-open .32s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes pc-open { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

.pc-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--pc-blue); color: #fff; flex: none; }
.pc-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .28); }
.pc-mascot--head { width: 40px; margin-top: 2px; }
.pc-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pc-who strong { font: 800 17px/1.2 var(--psp-font-display, system-ui, sans-serif); }
.pc-who small { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-close { margin-left: auto; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.pc-close:hover { background: rgba(255, 255, 255, .3); }

.pc-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; overscroll-behavior: contain; }
.pc-msg { display: flex; max-width: 88%; animation: pc-in .28s ease both; }
.pc-msg--me { align-self: flex-end; justify-content: flex-end; }
.pc-msg--bot { align-self: flex-start; }
.pc-msg--form { max-width: 100%; width: 100%; }
@keyframes pc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pc-bubble { padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.pc-msg--bot .pc-bubble { background: #fff; border: 1.5px solid var(--pc-line); border-bottom-left-radius: 5px; }
.pc-msg--me .pc-bubble { background: var(--pc-blue); color: #fff; border-bottom-right-radius: 5px; }

.pc-dots { display: inline-flex; gap: 4px; align-items: center; height: 20px; }
.pc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc-blue); opacity: .35; animation: pc-dot 1s ease-in-out infinite; }
.pc-dots i:nth-child(2) { animation-delay: .15s; }
.pc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pc-dot { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-4px); opacity: 1; } }

/* ---------- quick answers ---------- */
.pc-chips { flex: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 14px 10px; max-height: 184px; overflow-y: auto; }
.pc-chips:empty { display: none; }
.pc-chip { appearance: none; display: inline-block; padding: 6px 12px; border: 1.5px solid var(--pc-blue); border-radius: 999px; background: #fff; color: var(--pc-blue); font: 700 13px/1.25 var(--psp-font-body, system-ui, sans-serif); text-decoration: none; cursor: pointer; animation: pc-in .25s ease both; transition: background .15s, color .15s, transform .15s; }
.pc-chip:hover { background: var(--pc-blue); color: #fff; transform: translateY(-1px); }
.pc-chip:focus-visible { outline: 3px solid var(--pc-yellow); outline-offset: 1px; }
.pc-chip.is-main { background: var(--pc-yellow); border-color: var(--pc-ink); color: var(--pc-ink); }
.pc-chip.is-main:hover { background: #ffc233; color: var(--pc-ink); }
.pc-chip.is-act { background: #e8f3fb; }
.pc-chip.is-act:hover { background: var(--pc-blue); color: #fff; }
.pc-chip.is-wa { background: #25d366; border-color: #128c4a; color: #06310f; }
.pc-chip.is-wa:hover { background: #1fbd5b; color: #06310f; }
.pc-chip.is-ghost { border-color: var(--pc-line); color: var(--psp-muted, #5b6b7a); background: transparent; }
.pc-chip.is-ghost:hover { background: #fff; color: var(--pc-ink); }

/* ---------- typing row ---------- */
.pc-input { flex: none; display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1.5px solid var(--pc-line); background: #fff; }
.pc-input.is-off { display: none; }
.pc-input input { flex: 1; min-width: 0; padding: 11px 14px; border: 1.5px solid var(--pc-line); border-radius: 999px; font: 400 15px/1.2 var(--psp-font-body, system-ui, sans-serif); color: var(--pc-ink); background: var(--pc-paper); }
.pc-input input:focus { outline: 2px solid var(--pc-blue); outline-offset: 1px; border-color: var(--pc-blue); }
.pc-input button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--pc-blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pc-input button:hover { background: var(--psp-primary-dark, #0a3a63); }

/* ---------- always-there way to a person ---------- */
.pc-human { display: block; flex: none; width: 100%; padding: 8px 12px 11px; background: #fff; color: #0b6b36; font: 700 12.5px/1.25 var(--psp-font-body, system-ui, sans-serif); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: center; }
.pc-human:hover { color: var(--psp-primary-dark, #0a3a63); }
.pc-input:not(.is-off) + .pc-human { margin-top: -2px; }

/* ---------- message to the admin ---------- */
.pc-form { width: 100%; padding: 14px; background: #fff; border: 1.5px solid var(--pc-line); border-radius: 16px; border-bottom-left-radius: 5px; display: grid; gap: 10px; }
.pc-form label { display: grid; gap: 4px; font: 700 12.5px/1.2 var(--psp-font-body, system-ui, sans-serif); color: var(--psp-muted, #5b6b7a); }
.pc-form input[type=text], .pc-form textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--pc-line); border-radius: 10px; font: 400 15px/1.4 var(--psp-font-body, system-ui, sans-serif); color: var(--pc-ink); background: var(--pc-paper); resize: vertical; }
.pc-form input:focus, .pc-form textarea:focus { outline: 2px solid var(--pc-blue); outline-offset: 1px; border-color: var(--pc-blue); }
.pc-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.pc-err { margin: 0; min-height: 0; font-size: 13px; color: #b3261e; }
.pc-err:empty { display: none; }
.pc-form-btns { display: flex; gap: 8px; }
.pc-send, .pc-cancel { padding: 10px 16px; border-radius: 999px; font: 800 14px/1 var(--psp-font-body, system-ui, sans-serif); cursor: pointer; }
.pc-send { flex: 1; border: 2px solid var(--pc-ink); background: var(--pc-yellow); color: var(--pc-ink); }
.pc-send:disabled { opacity: .6; cursor: wait; }
.pc-cancel { border: 1.5px solid var(--pc-line); background: #fff; color: var(--psp-muted, #5b6b7a); }

/* ---------- phones ---------- */
@media (max-width: 520px) {
	.pc { right: 12px; bottom: 12px; }
	.pc-launch { width: 66px; height: 66px; }
	.pc-mascot--launch { width: 56px; }
	.pc-tease { right: 76px; bottom: 14px; max-width: calc(100vw - 110px); font-size: 13px; }
	.pc-panel { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(640px, calc(100vh - 24px)); height: min(640px, calc(100dvh - 24px)); }
	.pc.is-open .pc-launch { display: none; }
	.pc-input input { font-size: 16px; } /* keeps iOS from zooming */
	.pc-form input[type=text], .pc-form textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.pc-arm { display: none; }
	.pc *, .pc *::before, .pc *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep the launcher away from the hero buttons on phones and hide it behind the open menu drawer (3.8.5) */
@media (max-width: 520px) {
	.psp-hs-actions { padding-right: 84px; }
	body.psp-nav-open .pc { display: none; }
}